Add onSliceClick action source to Pie-Flot charts widget (#1934)

Paolo Cristiani · Igor Kulikov
1 parent 16df4100
Showing 7 changed files with 39 additions and 6 deletions
application/src/main/data/json/system/widget_bundles/charts.json
ui/src/app/components/widget/widget.controller.js
ui/src/app/locale/locale.constant-en_US.json
ui/src/app/locale/locale.constant-es_ES.json
ui/src/app/locale/locale.constant-fr_FR.json
ui/src/app/locale/locale.constant-it_IT.json
ui/src/app/widget/lib/flot-widget.js
--- a/application/src/main/data/json/system/widget_bundles/charts.json
View file @a20808d
+++ b/application/src/main/data/json/system/widget_bundles/charts.json
View file @a20808d
@@ -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}}"
--- a/ui/src/app/components/widget/widget.controller.js
View file @a20808d
+++ b/ui/src/app/components/widget/widget.controller.js
View file @a20808d
@@ -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
--- a/ui/src/app/locale/locale.constant-en_US.json
View file @a20808d
+++ b/ui/src/app/locale/locale.constant-en_US.json
View file @a20808d
@@ -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": {
--- a/ui/src/app/locale/locale.constant-es_ES.json
View file @a20808d
+++ b/ui/src/app/locale/locale.constant-es_ES.json
View file @a20808d
@@ -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": {
--- a/ui/src/app/locale/locale.constant-fr_FR.json
View file @a20808d
+++ b/ui/src/app/locale/locale.constant-fr_FR.json
View file @a20808d
@@ -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": {
--- a/ui/src/app/locale/locale.constant-it_IT.json
View file @a20808d
+++ b/ui/src/app/locale/locale.constant-it_IT.json
View file @a20808d
@@ -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": {
--- a/ui/src/app/widget/lib/flot-widget.js
View file @a20808d
+++ b/ui/src/app/widget/lib/flot-widget.js
View file @a20808d
@@ -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 */