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,10 +71,10 @@ | ||
71 | "resources": [], | 71 | "resources": [], |
72 | "templateHtml": "", | 72 | "templateHtml": "", |
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", | 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 | "settingsSchema": "{}\n", | 75 | "settingsSchema": "{}\n", |
76 | "dataKeySettingsSchema": "{}\n", | 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,4 +170,4 @@ | ||
170 | } | 170 | } |
171 | } | 171 | } |
172 | ] | 172 | ] |
173 | -} | ||
173 | +} |
@@ -292,6 +292,7 @@ export default class Subscription { | @@ -292,6 +292,7 @@ export default class Subscription { | ||
292 | deferred.resolve(); | 292 | deferred.resolve(); |
293 | }, | 293 | }, |
294 | function fail() { | 294 | function fail() { |
295 | + subscription.notifyDataLoaded(); | ||
295 | deferred.reject(); | 296 | deferred.reject(); |
296 | } | 297 | } |
297 | ); | 298 | ); |
@@ -132,7 +132,8 @@ export default function WidgetController($scope, $state, $timeout, $window, $ocL | @@ -132,7 +132,8 @@ export default function WidgetController($scope, $state, $timeout, $window, $ocL | ||
132 | actionDescriptorsBySourceId: actionDescriptorsBySourceId, | 132 | actionDescriptorsBySourceId: actionDescriptorsBySourceId, |
133 | getActionDescriptors: getActionDescriptors, | 133 | getActionDescriptors: getActionDescriptors, |
134 | handleWidgetAction: handleWidgetAction, | 134 | handleWidgetAction: handleWidgetAction, |
135 | - elementClick: elementClick | 135 | + elementClick: elementClick, |
136 | + getActiveEntityInfo: getActiveEntityInfo | ||
136 | }, | 137 | }, |
137 | stateController: stateController, | 138 | stateController: stateController, |
138 | aliasController: aliasController | 139 | aliasController: aliasController |
@@ -1700,7 +1700,8 @@ | @@ -1700,7 +1700,8 @@ | ||
1700 | "marker-click": "On marker click", | 1700 | "marker-click": "On marker click", |
1701 | "tooltip-tag-action": "Tooltip tag action", | 1701 | "tooltip-tag-action": "Tooltip tag action", |
1702 | "node-selected": "On node selected", | 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 | "language": { | 1707 | "language": { |
@@ -1699,7 +1699,8 @@ | @@ -1699,7 +1699,8 @@ | ||
1699 | "marker-click": "Clic en el polígono", | 1699 | "marker-click": "Clic en el polígono", |
1700 | "tooltip-tag-action": "Acción de etiqueta para globo de ayuda", | 1700 | "tooltip-tag-action": "Acción de etiqueta para globo de ayuda", |
1701 | "node-selected": "Clic en el nodo seleccionado", | 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 | "language": { | 1706 | "language": { |
@@ -340,7 +340,8 @@ | @@ -340,7 +340,8 @@ | ||
340 | "polygon-click": "On polygon click", | 340 | "polygon-click": "On polygon click", |
341 | "tooltip-tag-action": "Tooltip tag action", | 341 | "tooltip-tag-action": "Tooltip tag action", |
342 | "node-selected": "On node selected", | 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 | "customer": { | 347 | "customer": { |
@@ -1639,7 +1639,8 @@ | @@ -1639,7 +1639,8 @@ | ||
1639 | "marker-click": "Click sul marker", | 1639 | "marker-click": "Click sul marker", |
1640 | "tooltip-tag-action": "Azione tooltip", | 1640 | "tooltip-tag-action": "Azione tooltip", |
1641 | "node-selected": "Click su nodo selezionato", | 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 | "language": { | 1646 | "language": { |
@@ -350,7 +350,7 @@ export default class TbFlot { | @@ -350,7 +350,7 @@ export default class TbFlot { | ||
350 | pie: { | 350 | pie: { |
351 | show: true, | 351 | show: true, |
352 | label: { | 352 | label: { |
353 | - show: settings.showLabels === true | 353 | + show: settings.showLabels || settings.showPercentages |
354 | }, | 354 | }, |
355 | radius: settings.radius || 1, | 355 | radius: settings.radius || 1, |
356 | innerRadius: settings.innerRadius || 0, | 356 | innerRadius: settings.innerRadius || 0, |
@@ -366,6 +366,8 @@ export default class TbFlot { | @@ -366,6 +366,8 @@ export default class TbFlot { | ||
366 | } | 366 | } |
367 | } | 367 | } |
368 | } | 368 | } |
369 | + options.grid.clickable = true; | ||
370 | + | ||
369 | if (settings.stroke) { | 371 | if (settings.stroke) { |
370 | options.series.pie.stroke.color = settings.stroke.color || '#fff'; | 372 | options.series.pie.stroke.color = settings.stroke.color || '#fff'; |
371 | options.series.pie.stroke.width = settings.stroke.width || 0; | 373 | options.series.pie.stroke.width = settings.stroke.width || 0; |
@@ -373,7 +375,11 @@ export default class TbFlot { | @@ -373,7 +375,11 @@ export default class TbFlot { | ||
373 | 375 | ||
374 | if (options.series.pie.label.show) { | 376 | if (options.series.pie.label.show) { |
375 | options.series.pie.label.formatter = function (label, series) { | 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 | options.series.pie.label.radius = 3/4; | 384 | options.series.pie.label.radius = 3/4; |
379 | options.series.pie.label.background = { | 385 | options.series.pie.label.background = { |
@@ -791,6 +797,11 @@ export default class TbFlot { | @@ -791,6 +797,11 @@ export default class TbFlot { | ||
791 | "type": "boolean", | 797 | "type": "boolean", |
792 | "default": false | 798 | "default": false |
793 | }, | 799 | }, |
800 | + "showPercentages": { | ||
801 | + "title": "Show percentages", | ||
802 | + "type": "boolean", | ||
803 | + "default": false | ||
804 | + }, | ||
794 | "fontColor": { | 805 | "fontColor": { |
795 | "title": "Font color", | 806 | "title": "Font color", |
796 | "type": "string", | 807 | "type": "string", |
@@ -820,6 +831,7 @@ export default class TbFlot { | @@ -820,6 +831,7 @@ export default class TbFlot { | ||
820 | ] | 831 | ] |
821 | }, | 832 | }, |
822 | "showLabels", | 833 | "showLabels", |
834 | + "showPercentages", | ||
823 | { | 835 | { |
824 | "key": "fontColor", | 836 | "key": "fontColor", |
825 | "type": "color" | 837 | "type": "color" |
@@ -1296,6 +1308,17 @@ export default class TbFlot { | @@ -1296,6 +1308,17 @@ export default class TbFlot { | ||
1296 | }; | 1308 | }; |
1297 | this.$element.bind('mouseleave', this.mouseleaveHandler); | 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 | disableMouseEvents() { | 1324 | disableMouseEvents() { |
@@ -1328,6 +1351,10 @@ export default class TbFlot { | @@ -1328,6 +1351,10 @@ export default class TbFlot { | ||
1328 | this.$element.unbind('mouseleave', this.mouseleaveHandler); | 1351 | this.$element.unbind('mouseleave', this.mouseleaveHandler); |
1329 | this.mouseleaveHandler = null; | 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,6 +1505,17 @@ export default class TbFlot { | ||
1478 | this.ctx.plot.setData(this.pieData); | 1505 | this.ctx.plot.setData(this.pieData); |
1479 | this.ctx.plot.draw(); | 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 | /* eslint-enable angular/angularelement */ | 1521 | /* eslint-enable angular/angularelement */ |