From 134a32344eda0fec00530abf48e9ce50772a1ab0 Mon Sep 17 00:00:00 2001
From: Mirco Pizzichini <52463156+mircopz@users.noreply.github.com>
Date: Fri, 16 Aug 2019 11:37:37 +0200
Subject: [PATCH 1/3] Add two separate options to enable labels and/or
percentages in 'flot-pie' widget (#1882)
---
.../data/json/system/widget_bundles/charts.json | 4 ++--
ui/src/app/widget/lib/flot-widget.js | 14 ++++++++++++--
2 files changed, 14 insertions(+), 4 deletions(-)
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 71e9fa7ace..aeb743ad0d 100644
--- a/application/src/main/data/json/system/widget_bundles/charts.json
+++ b/application/src/main/data/json/system/widget_bundles/charts.json
@@ -74,7 +74,7 @@
"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",
"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,\"stroke\":{\"width\":5},\"tilt\":1,\"animatedPie\":false},\"title\":\"Pie - Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}"
+ "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}}"
}
},
{
@@ -170,4 +170,4 @@
}
}
]
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/widget/lib/flot-widget.js b/ui/src/app/widget/lib/flot-widget.js
index af8ce9e7eb..9a1d095291 100644
--- a/ui/src/app/widget/lib/flot-widget.js
+++ b/ui/src/app/widget/lib/flot-widget.js
@@ -350,7 +350,7 @@ export default class TbFlot {
pie: {
show: true,
label: {
- show: settings.showLabels === true
+ show: settings.showLabels || settings.showPercentages
},
radius: settings.radius || 1,
innerRadius: settings.innerRadius || 0,
@@ -373,7 +373,11 @@ export default class TbFlot {
if (options.series.pie.label.show) {
options.series.pie.label.formatter = function (label, series) {
- return "" + series.dataKey.label + "
" + Math.round(series.percent) + "%
";
+ return "" +
+ (settings.showLabels ? series.dataKey.label : "") +
+ (settings.showLabels && settings.showPercentages ? "
" : "") +
+ (settings.showPercentages ? Math.round(series.percent) + "%" : "") +
+ "
";
}
options.series.pie.label.radius = 3/4;
options.series.pie.label.background = {
@@ -791,6 +795,11 @@ export default class TbFlot {
"type": "boolean",
"default": false
},
+ "showPercentages": {
+ "title": "Show percentages",
+ "type": "boolean",
+ "default": false
+ },
"fontColor": {
"title": "Font color",
"type": "string",
@@ -820,6 +829,7 @@ export default class TbFlot {
]
},
"showLabels",
+ "showPercentages",
{
"key": "fontColor",
"type": "color"
From 16df4100301628b4206c4304146caa1f7d1afb10 Mon Sep 17 00:00:00 2001
From: Mirco Pizzichini <52463156+mircopz@users.noreply.github.com>
Date: Fri, 16 Aug 2019 11:38:09 +0200
Subject: [PATCH 2/3] Add notifyDataLoaded callback even when resolved entities
list is empty (#1883)
---
ui/src/app/api/subscription.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/ui/src/app/api/subscription.js b/ui/src/app/api/subscription.js
index 0927c5ce66..2e041762a8 100644
--- a/ui/src/app/api/subscription.js
+++ b/ui/src/app/api/subscription.js
@@ -292,6 +292,7 @@ export default class Subscription {
deferred.resolve();
},
function fail() {
+ subscription.notifyDataLoaded();
deferred.reject();
}
);
From a20808dc9b96a25daa07117d9cae68c7ef7033cb Mon Sep 17 00:00:00 2001
From: Paolo Cristiani <42511852+pgrisu@users.noreply.github.com>
Date: Fri, 16 Aug 2019 11:39:22 +0200
Subject: [PATCH 3/3] Add onSliceClick action source to Pie-Flot charts widget
(#1934)
---
.../json/system/widget_bundles/charts.json | 2 +-
.../components/widget/widget.controller.js | 3 +-
ui/src/app/locale/locale.constant-en_US.json | 3 +-
ui/src/app/locale/locale.constant-es_ES.json | 3 +-
ui/src/app/locale/locale.constant-fr_FR.json | 3 +-
ui/src/app/locale/locale.constant-it_IT.json | 3 +-
ui/src/app/widget/lib/flot-widget.js | 28 +++++++++++++++++++
7 files changed, 39 insertions(+), 6 deletions(-)
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 */