diff --git a/application/src/main/data/json/system/widget_bundles/charts.json b/application/src/main/data/json/system/widget_bundles/charts.json index aeb743ad0d..2ecd90be28 100644 --- a/application/src/main/data/json/system/widget_bundles/charts.json +++ b/application/src/main/data/json/system/widget_bundles/charts.json @@ -71,7 +71,7 @@ "resources": [], "templateHtml": "", "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", - "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", + "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", "settingsSchema": "{}\n", "dataKeySettingsSchema": "{}\n", "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}}" diff --git a/ui/src/app/components/widget/widget.controller.js b/ui/src/app/components/widget/widget.controller.js index 91c8ecd76d..126c793425 100644 --- a/ui/src/app/components/widget/widget.controller.js +++ b/ui/src/app/components/widget/widget.controller.js @@ -132,7 +132,8 @@ export default function WidgetController($scope, $state, $timeout, $window, $ocL actionDescriptorsBySourceId: actionDescriptorsBySourceId, getActionDescriptors: getActionDescriptors, handleWidgetAction: handleWidgetAction, - elementClick: elementClick + elementClick: elementClick, + getActiveEntityInfo: getActiveEntityInfo }, stateController: stateController, aliasController: aliasController diff --git a/ui/src/app/locale/locale.constant-en_US.json b/ui/src/app/locale/locale.constant-en_US.json index af49a7b0b3..65765af614 100644 --- a/ui/src/app/locale/locale.constant-en_US.json +++ b/ui/src/app/locale/locale.constant-en_US.json @@ -1699,7 +1699,8 @@ "marker-click": "On marker click", "tooltip-tag-action": "Tooltip tag action", "node-selected": "On node selected", - "element-click": "On HTML element click" + "element-click": "On HTML element click", + "pie-slice-click": "On slice click" } }, "language": { diff --git a/ui/src/app/locale/locale.constant-es_ES.json b/ui/src/app/locale/locale.constant-es_ES.json index fbda6661af..ca116e63f4 100644 --- a/ui/src/app/locale/locale.constant-es_ES.json +++ b/ui/src/app/locale/locale.constant-es_ES.json @@ -1698,7 +1698,8 @@ "marker-click": "Clic en el polígono", "tooltip-tag-action": "Acción de etiqueta para globo de ayuda", "node-selected": "Clic en el nodo seleccionado", - "element-click": "Clic en el elemento HTML" + "element-click": "Clic en el elemento HTML", + "pie-slice-click": "Clic en la rebanada" } }, "language": { diff --git a/ui/src/app/locale/locale.constant-fr_FR.json b/ui/src/app/locale/locale.constant-fr_FR.json index 9713de7626..3b197c9546 100644 --- a/ui/src/app/locale/locale.constant-fr_FR.json +++ b/ui/src/app/locale/locale.constant-fr_FR.json @@ -340,7 +340,8 @@ "polygon-click": "On polygon click", "tooltip-tag-action": "Tooltip tag action", "node-selected": "On node selected", - "element-click": "On HTML element click" + "element-click": "On HTML element click", + "pie-slice-click": "On slice click" } }, "customer": { diff --git a/ui/src/app/locale/locale.constant-it_IT.json b/ui/src/app/locale/locale.constant-it_IT.json index f2f04c47a9..faaf4549c9 100644 --- a/ui/src/app/locale/locale.constant-it_IT.json +++ b/ui/src/app/locale/locale.constant-it_IT.json @@ -1638,7 +1638,8 @@ "marker-click": "Click sul marker", "tooltip-tag-action": "Azione tooltip", "node-selected": "Click su nodo selezionato", - "element-click": "Click su elemento HTML" + "element-click": "Click su elemento HTML", + "pie-slice-click": "Click sulla fetta" } }, "language": { diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js index 9a1d095291..a3ef5aff1c 100644 --- a/ui/src/app/widget/lib/flot-widget.js +++ b/ui/src/app/widget/lib/flot-widget.js @@ -366,6 +366,8 @@ export default class TbFlot { } } } + options.grid.clickable = true; + if (settings.stroke) { options.series.pie.stroke.color = settings.stroke.color || '#fff'; options.series.pie.stroke.width = settings.stroke.width || 0; @@ -1306,6 +1308,17 @@ export default class TbFlot { }; this.$element.bind('mouseleave', this.mouseleaveHandler); } + + if (!this.flotClickHandler) { + this.flotClickHandler = function (event, pos, item) { + if (!tbFlot.ctx.plot) { + return; + } + tbFlot.onPieSliceClick(event, item); + }; + this.$element.bind('plotclick', this.flotClickHandler); + } + } disableMouseEvents() { @@ -1338,6 +1351,10 @@ export default class TbFlot { this.$element.unbind('mouseleave', this.mouseleaveHandler); this.mouseleaveHandler = null; } + if (this.flotClickHandler) { + this.$element.unbind('plotclick', this.flotClickHandler); + this.flotClickHandler = null; + } } @@ -1488,6 +1505,17 @@ export default class TbFlot { this.ctx.plot.setData(this.pieData); this.ctx.plot.draw(); } + + onPieSliceClick($event, item) { + var descriptors = this.ctx.actionsApi.getActionDescriptors('sliceClick'); + if ($event && descriptors.length) { + $event.stopPropagation(); + var entityInfo = this.ctx.actionsApi.getActiveEntityInfo(); + var entityId = entityInfo ? entityInfo.entityId : null; + var entityName = entityInfo ? entityInfo.entityName : null; + this.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName, item); + } + } } /* eslint-enable angular/angularelement */