Commit 39d23204a8ff8045576e3fe68e69ecabdcf9478e
Merge branch 'master' of github.com:thingsboard/thingsboard
Showing
8 changed files
with
54 additions
and
10 deletions
... | ... | @@ -71,10 +71,10 @@ |
71 | 71 | "resources": [], |
72 | 72 | "templateHtml": "", |
73 | 73 | "templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.pie-label {\n font-size: 12px;\n font-family: 'Roboto';\n font-weight: bold;\n text-align: center;\n padding: 2px;\n color: white;\n}\n", |
74 | - "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'pie'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.pieSettingsSchema;\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.pieDatakeySettingsSchema;\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\n", | |
74 | + "controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'pie'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.pieSettingsSchema;\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.pieDatakeySettingsSchema;\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\nself.actionSources = function() {\n return {\n 'sliceClick': {\n name: 'widget-action.pie-slice-click',\n multiple: false\n }\n };\n}\n", | |
75 | 75 | "settingsSchema": "{}\n", |
76 | 76 | "dataKeySettingsSchema": "{}\n", |
77 | - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6114638304362894,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.9955906536344441,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.9430835931647599,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"radius\":1,\"fontColor\":\"#545454\",\"fontSize\":10,\"decimals\":1,\"legend\":{\"show\":true,\"position\":\"nw\",\"labelBoxBorderColor\":\"#CCCCCC\",\"backgroundColor\":\"#F0F0F0\",\"backgroundOpacity\":0.85},\"innerRadius\":0,\"showLabels\":true,\"stroke\":{\"width\":5},\"tilt\":1,\"animatedPie\":false},\"title\":\"Pie - Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" | |
77 | + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6114638304362894,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.9955906536344441,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.9430835931647599,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"radius\":1,\"fontColor\":\"#545454\",\"fontSize\":10,\"decimals\":1,\"legend\":{\"show\":true,\"position\":\"nw\",\"labelBoxBorderColor\":\"#CCCCCC\",\"backgroundColor\":\"#F0F0F0\",\"backgroundOpacity\":0.85},\"innerRadius\":0,\"showLabels\":true,\"showPercentages\":true,\"stroke\":{\"width\":5},\"tilt\":1,\"animatedPie\":false},\"title\":\"Pie - Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" | |
78 | 78 | } |
79 | 79 | }, |
80 | 80 | { |
... | ... | @@ -170,4 +170,4 @@ |
170 | 170 | } |
171 | 171 | } |
172 | 172 | ] |
173 | -} | |
\ No newline at end of file | ||
173 | +} | ... | ... |
... | ... | @@ -132,7 +132,8 @@ export default function WidgetController($scope, $state, $timeout, $window, $ocL |
132 | 132 | actionDescriptorsBySourceId: actionDescriptorsBySourceId, |
133 | 133 | getActionDescriptors: getActionDescriptors, |
134 | 134 | handleWidgetAction: handleWidgetAction, |
135 | - elementClick: elementClick | |
135 | + elementClick: elementClick, | |
136 | + getActiveEntityInfo: getActiveEntityInfo | |
136 | 137 | }, |
137 | 138 | stateController: stateController, |
138 | 139 | aliasController: aliasController | ... | ... |
... | ... | @@ -1700,7 +1700,8 @@ |
1700 | 1700 | "marker-click": "On marker click", |
1701 | 1701 | "tooltip-tag-action": "Tooltip tag action", |
1702 | 1702 | "node-selected": "On node selected", |
1703 | - "element-click": "On HTML element click" | |
1703 | + "element-click": "On HTML element click", | |
1704 | + "pie-slice-click": "On slice click" | |
1704 | 1705 | } |
1705 | 1706 | }, |
1706 | 1707 | "language": { | ... | ... |
... | ... | @@ -1699,7 +1699,8 @@ |
1699 | 1699 | "marker-click": "Clic en el polígono", |
1700 | 1700 | "tooltip-tag-action": "Acción de etiqueta para globo de ayuda", |
1701 | 1701 | "node-selected": "Clic en el nodo seleccionado", |
1702 | - "element-click": "Clic en el elemento HTML" | |
1702 | + "element-click": "Clic en el elemento HTML", | |
1703 | + "pie-slice-click": "Clic en la rebanada" | |
1703 | 1704 | } |
1704 | 1705 | }, |
1705 | 1706 | "language": { | ... | ... |
... | ... | @@ -340,7 +340,8 @@ |
340 | 340 | "polygon-click": "On polygon click", |
341 | 341 | "tooltip-tag-action": "Tooltip tag action", |
342 | 342 | "node-selected": "On node selected", |
343 | - "element-click": "On HTML element click" | |
343 | + "element-click": "On HTML element click", | |
344 | + "pie-slice-click": "On slice click" | |
344 | 345 | } |
345 | 346 | }, |
346 | 347 | "customer": { | ... | ... |
... | ... | @@ -1639,7 +1639,8 @@ |
1639 | 1639 | "marker-click": "Click sul marker", |
1640 | 1640 | "tooltip-tag-action": "Azione tooltip", |
1641 | 1641 | "node-selected": "Click su nodo selezionato", |
1642 | - "element-click": "Click su elemento HTML" | |
1642 | + "element-click": "Click su elemento HTML", | |
1643 | + "pie-slice-click": "Click sulla fetta" | |
1643 | 1644 | } |
1644 | 1645 | }, |
1645 | 1646 | "language": { | ... | ... |
... | ... | @@ -350,7 +350,7 @@ export default class TbFlot { |
350 | 350 | pie: { |
351 | 351 | show: true, |
352 | 352 | label: { |
353 | - show: settings.showLabels === true | |
353 | + show: settings.showLabels || settings.showPercentages | |
354 | 354 | }, |
355 | 355 | radius: settings.radius || 1, |
356 | 356 | innerRadius: settings.innerRadius || 0, |
... | ... | @@ -366,6 +366,8 @@ export default class TbFlot { |
366 | 366 | } |
367 | 367 | } |
368 | 368 | } |
369 | + options.grid.clickable = true; | |
370 | + | |
369 | 371 | if (settings.stroke) { |
370 | 372 | options.series.pie.stroke.color = settings.stroke.color || '#fff'; |
371 | 373 | options.series.pie.stroke.width = settings.stroke.width || 0; |
... | ... | @@ -373,7 +375,11 @@ export default class TbFlot { |
373 | 375 | |
374 | 376 | if (options.series.pie.label.show) { |
375 | 377 | options.series.pie.label.formatter = function (label, series) { |
376 | - return "<div class='pie-label'>" + series.dataKey.label + "<br/>" + Math.round(series.percent) + "%</div>"; | |
378 | + return "<div class='pie-label'>" + | |
379 | + (settings.showLabels ? series.dataKey.label : "") + | |
380 | + (settings.showLabels && settings.showPercentages ? "<br/>" : "") + | |
381 | + (settings.showPercentages ? Math.round(series.percent) + "%" : "") + | |
382 | + "</div>"; | |
377 | 383 | } |
378 | 384 | options.series.pie.label.radius = 3/4; |
379 | 385 | options.series.pie.label.background = { |
... | ... | @@ -791,6 +797,11 @@ export default class TbFlot { |
791 | 797 | "type": "boolean", |
792 | 798 | "default": false |
793 | 799 | }, |
800 | + "showPercentages": { | |
801 | + "title": "Show percentages", | |
802 | + "type": "boolean", | |
803 | + "default": false | |
804 | + }, | |
794 | 805 | "fontColor": { |
795 | 806 | "title": "Font color", |
796 | 807 | "type": "string", |
... | ... | @@ -820,6 +831,7 @@ export default class TbFlot { |
820 | 831 | ] |
821 | 832 | }, |
822 | 833 | "showLabels", |
834 | + "showPercentages", | |
823 | 835 | { |
824 | 836 | "key": "fontColor", |
825 | 837 | "type": "color" |
... | ... | @@ -1296,6 +1308,17 @@ export default class TbFlot { |
1296 | 1308 | }; |
1297 | 1309 | this.$element.bind('mouseleave', this.mouseleaveHandler); |
1298 | 1310 | } |
1311 | + | |
1312 | + if (!this.flotClickHandler) { | |
1313 | + this.flotClickHandler = function (event, pos, item) { | |
1314 | + if (!tbFlot.ctx.plot) { | |
1315 | + return; | |
1316 | + } | |
1317 | + tbFlot.onPieSliceClick(event, item); | |
1318 | + }; | |
1319 | + this.$element.bind('plotclick', this.flotClickHandler); | |
1320 | + } | |
1321 | + | |
1299 | 1322 | } |
1300 | 1323 | |
1301 | 1324 | disableMouseEvents() { |
... | ... | @@ -1328,6 +1351,10 @@ export default class TbFlot { |
1328 | 1351 | this.$element.unbind('mouseleave', this.mouseleaveHandler); |
1329 | 1352 | this.mouseleaveHandler = null; |
1330 | 1353 | } |
1354 | + if (this.flotClickHandler) { | |
1355 | + this.$element.unbind('plotclick', this.flotClickHandler); | |
1356 | + this.flotClickHandler = null; | |
1357 | + } | |
1331 | 1358 | } |
1332 | 1359 | |
1333 | 1360 | |
... | ... | @@ -1478,6 +1505,17 @@ export default class TbFlot { |
1478 | 1505 | this.ctx.plot.setData(this.pieData); |
1479 | 1506 | this.ctx.plot.draw(); |
1480 | 1507 | } |
1508 | + | |
1509 | + onPieSliceClick($event, item) { | |
1510 | + var descriptors = this.ctx.actionsApi.getActionDescriptors('sliceClick'); | |
1511 | + if ($event && descriptors.length) { | |
1512 | + $event.stopPropagation(); | |
1513 | + var entityInfo = this.ctx.actionsApi.getActiveEntityInfo(); | |
1514 | + var entityId = entityInfo ? entityInfo.entityId : null; | |
1515 | + var entityName = entityInfo ? entityInfo.entityName : null; | |
1516 | + this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, item); | |
1517 | + } | |
1518 | + } | |
1481 | 1519 | } |
1482 | 1520 | |
1483 | 1521 | /* eslint-enable angular/angularelement */ | ... | ... |