From e069b66219d835382fe6037a9f8d0797fd7f1231 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 7 Nov 2023 13:57:27 +0200 Subject: [PATCH] UI: Charts: Add new Doughnut widgets. --- .../json/system/widget_bundles/charts.json | 6 +- .../json/system/widget_types/doughnut.json | 31 +- .../widget_types/doughnut_deprecated.json | 30 + .../widget_types/horizontal_doughnut.json | 29 + ui-ngx/package.json | 1 + .../src/app/core/api/widget-subscription.ts | 4 +- .../dashboard-widget-select.component.ts | 4 +- .../components/grid/scroll-grid.component.ts | 2 +- .../basic/basic-widget-config.module.ts | 12 +- .../progress-bar-basic-config.component.html | 5 +- .../value-card-basic-config.component.html | 6 +- ...lue-chart-card-basic-config.component.html | 5 +- .../doughnut-basic-config.component.html | 244 ++++++++ .../chart/doughnut-basic-config.component.ts | 339 +++++++++++ .../common/data-keys-panel.component.html | 2 + .../basic/common/data-keys-panel.component.ts | 8 + .../battery-level-basic-config.component.html | 6 +- ...uid-level-card-basic-config.component.html | 13 +- ...ignal-strength-basic-config.component.html | 5 +- ...peed-direction-basic-config.component.html | 6 +- .../lib/chart/doughnut-widget.component.html | 37 ++ .../lib/chart/doughnut-widget.component.scss | 110 ++++ .../lib/chart/doughnut-widget.component.ts | 535 ++++++++++++++++++ .../lib/chart/doughnut-widget.models.ts | 159 ++++++ ...rogress-bar-widget-settings.component.html | 5 +- .../value-card-widget-settings.component.html | 6 +- ...-chart-card-widget-settings.component.html | 5 +- .../doughnut-widget-settings.component.html | 153 +++++ .../doughnut-widget-settings.component.ts | 204 +++++++ .../count-widget-settings.component.html | 8 +- .../common/image-cards-select.component.ts | 75 ++- ...ttery-level-widget-settings.component.html | 6 +- ...-level-card-widget-settings.component.html | 13 +- ...al-strength-widget-settings.component.html | 5 +- ...d-direction-widget-settings.component.html | 6 +- .../lib/settings/widget-settings.module.ts | 8 +- .../widget/widget-components.module.ts | 7 +- .../datasource/scroll-grid-datasource.ts | 26 +- ui-ngx/src/app/shared/models/constants.ts | 7 + ui-ngx/src/app/shared/models/widget.models.ts | 4 +- .../assets/locale/locale.constant-en_US.json | 21 + .../assets/widget/doughnut/default-layout.svg | 29 + .../doughnut/horizontal-default-layout.svg | 29 + .../doughnut/horizontal-with-total-layout.svg | 28 + .../widget/doughnut/with-total-layout.svg | 28 + ui-ngx/yarn.lock | 20 + 46 files changed, 2197 insertions(+), 95 deletions(-) create mode 100644 application/src/main/data/json/system/widget_types/doughnut_deprecated.json create mode 100644 application/src/main/data/json/system/widget_types/horizontal_doughnut.json create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts create mode 100644 ui-ngx/src/assets/widget/doughnut/default-layout.svg create mode 100644 ui-ngx/src/assets/widget/doughnut/horizontal-default-layout.svg create mode 100644 ui-ngx/src/assets/widget/doughnut/horizontal-with-total-layout.svg create mode 100644 ui-ngx/src/assets/widget/doughnut/with-total-layout.svg 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 5119d01671..0829c612d0 100644 --- a/application/src/main/data/json/system/widget_bundles/charts.json +++ b/application/src/main/data/json/system/widget_bundles/charts.json @@ -16,8 +16,10 @@ "charts.bars", "charts.pie", "charts.pie_chart_js", - "charts.doughnut_chart_js", + "doughnut", + "horizontal_doughnut", "charts.polar_area_chart_js", - "charts.radar_chart_js" + "charts.radar_chart_js", + "charts.doughnut_chart_js" ] } \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/doughnut.json b/application/src/main/data/json/system/widget_types/doughnut.json index 6056cb5a44..f5a890ad3a 100644 --- a/application/src/main/data/json/system/widget_types/doughnut.json +++ b/application/src/main/data/json/system/widget_types/doughnut.json @@ -1,30 +1,29 @@ { - "fqn": "charts.doughnut_chart_js", + "fqn": "doughnut", "name": "Doughnut", "deprecated": false, - "image": "data:image/png;base64,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", - "description": "Displays the latest values of the attributes or time-series data for multiple entities in a doughnut chart. Supports numeric values only.", + "image": "data:image/png;base64,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", + "description": "Displays the latest values of the attributes or time-series data in a doughnut chart. Supports numeric values only.", "descriptor": { "type": "latest", - "sizeX": 7, - "sizeY": 5, - "resources": [ - { - "url": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js" - } - ], - "templateHtml": "\n", + "sizeX": 4, + "sizeY": 3, + "resources": [], + "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n $scope = self.ctx.$scope;\n utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n settings = utils.deepClone(self.ctx.settings) || {};\n settings.showTooltip = utils.defaultValue(settings.showTooltip, true);\n \n Chart.defaults.global.tooltips.enabled = settings.showTooltip;\n \n var pieData = {\n labels: [],\n datasets: []\n };\n\n var dataset = {\n data: [],\n backgroundColor: [],\n borderColor: [],\n borderWidth: [],\n hoverBackgroundColor: []\n }\n \n var borderColor = self.ctx.settings.borderColor || '#fff';\n var borderWidth = typeof self.ctx.settings.borderWidth !== 'undefined' ? self.ctx.settings.borderWidth : 5;\n \n pieData.datasets.push(dataset);\n \n for (var i=0; i < self.ctx.data.length; i++) {\n var dataKey = self.ctx.data[i].dataKey;\n var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n units = units ? (' (' + units + ')') : '';\n pieData.labels.push(dataKey.label + units);\n dataset.data.push(0);\n var hoverBackgroundColor = tinycolor(dataKey.color).lighten(15);\n dataset.backgroundColor.push(dataKey.color);\n dataset.borderColor.push(borderColor);\n dataset.borderWidth.push(borderWidth);\n dataset.hoverBackgroundColor.push(hoverBackgroundColor.toRgbString());\n }\n\n var options = {\n responsive: false,\n maintainAspectRatio: false,\n legend: {\n display: true,\n labels: {\n fontColor: '#666'\n }\n },\n tooltips: {\n callbacks: {\n label: function(tooltipItem, data) {\n var label = data.labels[tooltipItem.index];\n var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];\n var content = label + ': ' + value;\n var units = self.ctx.settings.units ? self.ctx.settings.units : self.ctx.units;\n if (units) {\n content += ' ' + units;\n } \n return content;\n }\n }\n }\n };\n\n if (self.ctx.settings.legend) {\n options.legend.display = self.ctx.settings.legend.display !== false;\n options.legend.labels.fontColor = self.ctx.settings.legend.labelsFontColor || '#666';\n }\n\n var ctx = $('#pieChart', self.ctx.$container);\n self.ctx.chart = new Chart(ctx, {\n type: 'doughnut',\n data: pieData,\n options: options\n });\n \n self.onResize();\n}\n\nself.onDataUpdated = function() {\n for (var i = 0; i < self.ctx.data.length; i++) {\n var cellData = self.ctx.data[i];\n if (cellData.data.length > 0) {\n var decimals;\n if (typeof cellData.dataKey.decimals !== 'undefined' \n && cellData.dataKey.decimals !== null ) {\n decimals = cellData.dataKey.decimals; \n } else {\n decimals = self.ctx.decimals;\n }\n var tvPair = cellData.data[cellData.data.length - 1];\n var value = self.ctx.utils.formatValue(tvPair[1], decimals);\n self.ctx.chart.data.datasets[0].data[i] = parseFloat(value);\n }\n }\n self.ctx.chart.update();\n}\n\nself.onResize = function() {\n self.ctx.chart.resize();\n}\n\nself.onDestroy = function() {\n self.ctx.chart.destroy();\n self.ctx.chart = null;\n}\n\n", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.doughnutWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n self.ctx.$scope.doughnutWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n return {\n previewWidth: '380px',\n previewHeight: '300px',\n embedTitlePanel: true,\n defaultDataKeysFunction: function() {\n return [{ name: 'windPower', label: 'Wind power', type: 'timeseries', color: '#08872B' },\n { name: 'solarPower', label: 'Solar power', type: 'timeseries', color: '#FF4D5A' }];\n }\n };\n};\n\nself.onDestroy = function() {\n};\n", "settingsSchema": "", - "dataKeySettingsSchema": "{}\n", - "settingsDirective": "tb-doughnut-chart-widget-settings", - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#26a69a\",\"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\":\"#f57c00\",\"settings\":{},\"_hash\":0.545701115289893,\"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\":\"#afb42b\",\"settings\":{},\"_hash\":0.2592906835158064,\"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\":\"#673ab7\",\"settings\":{},\"_hash\":0.12880275585455747,\"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\":{\"borderWidth\":5,\"borderColor\":\"#fff\",\"legend\":{\"display\":true,\"labelsFontColor\":\"#666666\"}},\"title\":\"Doughnut\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" + "dataKeySettingsSchema": "", + "settingsDirective": "tb-doughnut-widget-settings", + "hasBasicMode": true, + "basicModeDirective": "tb-doughnut-basic-config", + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Wind power\",\"color\":\"#08872B\",\"settings\":{},\"_hash\":0.7227918773301678,\"funcBody\":\"if (prevValue === 0) {\\n prevValue = Math.random() * 200;\\n}\\nvar value = prevValue + Math.random() * 20 - 10;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 200) {\\n\\tvalue = 200;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Solar power\",\"color\":\"#FF4D5A\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"if (prevValue === 0) {\\n prevValue = Math.random() * 200;\\n}\\nvar value = prevValue + Math.random() * 20 - 10;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 200) {\\n\\tvalue = 200;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"layout\":\"default\",\"autoScale\":true,\"totalValueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1\"},\"totalValueColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showLegend\":true,\"legendPosition\":\"bottom\",\"legendLabelFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"legendLabelColor\":\"rgba(0, 0, 0, 0.38)\",\"legendValueFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"20px\"},\"legendValueColor\":\"rgba(0, 0, 0, 0.87)\",\"showTooltip\":true,\"tooltipValueType\":\"percentage\",\"tooltipValueDecimals\":0,\"tooltipValueFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"16px\"},\"tooltipValueColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":4,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Doughnut\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":null,\"decimals\":0,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{\"headerButton\":[]},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"titleIcon\":\"donut_large\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null},\"titleColor\":\"rgba(0, 0, 0, 0.87)\"}" }, "externalId": null, "tags": [ "ring", "circle", - "pie chart" + "pie chart", + "donut" ] } \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/doughnut_deprecated.json b/application/src/main/data/json/system/widget_types/doughnut_deprecated.json new file mode 100644 index 0000000000..f0fc4e30c0 --- /dev/null +++ b/application/src/main/data/json/system/widget_types/doughnut_deprecated.json @@ -0,0 +1,30 @@ +{ + "fqn": "charts.doughnut_chart_js", + "name": "Doughnut", + "deprecated": true, + "image": "data:image/png;base64,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", + "description": "Displays the latest values of the attributes or time-series data for multiple entities in a doughnut chart. Supports numeric values only.", + "descriptor": { + "type": "latest", + "sizeX": 7, + "sizeY": 5, + "resources": [ + { + "url": "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js" + } + ], + "templateHtml": "\n", + "templateCss": "", + "controllerScript": "self.onInit = function() {\n $scope = self.ctx.$scope;\n utils = $scope.$injector.get(self.ctx.servicesMap.get('utils'));\n settings = utils.deepClone(self.ctx.settings) || {};\n settings.showTooltip = utils.defaultValue(settings.showTooltip, true);\n \n Chart.defaults.global.tooltips.enabled = settings.showTooltip;\n \n var pieData = {\n labels: [],\n datasets: []\n };\n\n var dataset = {\n data: [],\n backgroundColor: [],\n borderColor: [],\n borderWidth: [],\n hoverBackgroundColor: []\n }\n \n var borderColor = self.ctx.settings.borderColor || '#fff';\n var borderWidth = typeof self.ctx.settings.borderWidth !== 'undefined' ? self.ctx.settings.borderWidth : 5;\n \n pieData.datasets.push(dataset);\n \n for (var i=0; i < self.ctx.data.length; i++) {\n var dataKey = self.ctx.data[i].dataKey;\n var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n units = units ? (' (' + units + ')') : '';\n pieData.labels.push(dataKey.label + units);\n dataset.data.push(0);\n var hoverBackgroundColor = tinycolor(dataKey.color).lighten(15);\n dataset.backgroundColor.push(dataKey.color);\n dataset.borderColor.push(borderColor);\n dataset.borderWidth.push(borderWidth);\n dataset.hoverBackgroundColor.push(hoverBackgroundColor.toRgbString());\n }\n\n var options = {\n responsive: false,\n maintainAspectRatio: false,\n legend: {\n display: true,\n labels: {\n fontColor: '#666'\n }\n },\n tooltips: {\n callbacks: {\n label: function(tooltipItem, data) {\n var label = data.labels[tooltipItem.index];\n var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];\n var content = label + ': ' + value;\n var units = self.ctx.settings.units ? self.ctx.settings.units : self.ctx.units;\n if (units) {\n content += ' ' + units;\n } \n return content;\n }\n }\n }\n };\n\n if (self.ctx.settings.legend) {\n options.legend.display = self.ctx.settings.legend.display !== false;\n options.legend.labels.fontColor = self.ctx.settings.legend.labelsFontColor || '#666';\n }\n\n var ctx = $('#pieChart', self.ctx.$container);\n self.ctx.chart = new Chart(ctx, {\n type: 'doughnut',\n data: pieData,\n options: options\n });\n \n self.onResize();\n}\n\nself.onDataUpdated = function() {\n for (var i = 0; i < self.ctx.data.length; i++) {\n var cellData = self.ctx.data[i];\n if (cellData.data.length > 0) {\n var decimals;\n if (typeof cellData.dataKey.decimals !== 'undefined' \n && cellData.dataKey.decimals !== null ) {\n decimals = cellData.dataKey.decimals; \n } else {\n decimals = self.ctx.decimals;\n }\n var tvPair = cellData.data[cellData.data.length - 1];\n var value = self.ctx.utils.formatValue(tvPair[1], decimals);\n self.ctx.chart.data.datasets[0].data[i] = parseFloat(value);\n }\n }\n self.ctx.chart.update();\n}\n\nself.onResize = function() {\n self.ctx.chart.resize();\n}\n\nself.onDestroy = function() {\n self.ctx.chart.destroy();\n self.ctx.chart = null;\n}\n\n", + "settingsSchema": "", + "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-doughnut-chart-widget-settings", + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#26a69a\",\"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\":\"#f57c00\",\"settings\":{},\"_hash\":0.545701115289893,\"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\":\"#afb42b\",\"settings\":{},\"_hash\":0.2592906835158064,\"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\":\"#673ab7\",\"settings\":{},\"_hash\":0.12880275585455747,\"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\":{\"borderWidth\":5,\"borderColor\":\"#fff\",\"legend\":{\"display\":true,\"labelsFontColor\":\"#666666\"}},\"title\":\"Doughnut\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}" + }, + "externalId": null, + "tags": [ + "ring", + "circle", + "pie chart" + ] +} \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/horizontal_doughnut.json b/application/src/main/data/json/system/widget_types/horizontal_doughnut.json new file mode 100644 index 0000000000..1eeffcae6e --- /dev/null +++ b/application/src/main/data/json/system/widget_types/horizontal_doughnut.json @@ -0,0 +1,29 @@ +{ + "fqn": "horizontal_doughnut", + "name": "Horizontal doughnut", + "deprecated": false, + "image": "data:image/png;base64,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", + "description": "Displays the latest values of the attributes or time-series data in a doughnut chart using horizontal layout. Supports numeric values only.", + "descriptor": { + "type": "latest", + "sizeX": 4, + "sizeY": 2.5, + "resources": [], + "templateHtml": "\n", + "templateCss": "", + "controllerScript": "self.onInit = function() {\n self.ctx.$scope.doughnutWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n self.ctx.$scope.doughnutWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n return {\n previewWidth: '380px',\n previewHeight: '220px',\n embedTitlePanel: true,\n horizontal: true,\n defaultDataKeysFunction: function() {\n return [{ name: 'windPower', label: 'Wind power', type: 'timeseries', color: '#08872B' },\n { name: 'solarPower', label: 'Solar power', type: 'timeseries', color: '#FF4D5A' }];\n }\n };\n};\n\nself.onDestroy = function() {\n};\n", + "settingsSchema": "", + "dataKeySettingsSchema": "", + "settingsDirective": "tb-doughnut-widget-settings", + "hasBasicMode": true, + "basicModeDirective": "tb-doughnut-basic-config", + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Wind power\",\"color\":\"#08872B\",\"settings\":{},\"_hash\":0.7227918773301678,\"funcBody\":\"if (prevValue === 0) {\\n prevValue = Math.random() * 200;\\n}\\nvar value = prevValue + Math.random() * 20 - 10;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 200) {\\n\\tvalue = 200;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Solar power\",\"color\":\"#FF4D5A\",\"settings\":{},\"_hash\":0.2392660816082064,\"funcBody\":\"if (prevValue === 0) {\\n prevValue = Math.random() * 200;\\n}\\nvar value = prevValue + Math.random() * 20 - 10;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 200) {\\n\\tvalue = 200;\\n}\\nreturn value;\",\"aggregationType\":null,\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}],\"alarmFilterConfig\":{\"statusList\":[\"ACTIVE\"]}}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{\"layout\":\"default\",\"autoScale\":true,\"totalValueFont\":{\"family\":\"Roboto\",\"size\":24,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"1\"},\"totalValueColor\":{\"type\":\"constant\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"colorFunction\":\"var temperature = value;\\nif (typeof temperature !== undefined) {\\n var percent = (temperature + 60)/120 * 100;\\n return tinycolor.mix('blue', 'red', percent).toHexString();\\n}\\nreturn 'blue';\"},\"showLegend\":true,\"legendPosition\":\"right\",\"legendLabelFont\":{\"family\":\"Roboto\",\"size\":12,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"400\",\"lineHeight\":\"16px\"},\"legendLabelColor\":\"rgba(0, 0, 0, 0.38)\",\"legendValueFont\":{\"family\":\"Roboto\",\"size\":14,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"20px\"},\"legendValueColor\":\"rgba(0, 0, 0, 0.87)\",\"showTooltip\":true,\"tooltipValueType\":\"percentage\",\"tooltipValueDecimals\":0,\"tooltipValueFont\":{\"family\":\"Roboto\",\"size\":13,\"sizeUnit\":\"px\",\"style\":\"normal\",\"weight\":\"500\",\"lineHeight\":\"16px\"},\"tooltipValueColor\":\"rgba(0, 0, 0, 0.76)\",\"tooltipBackgroundColor\":\"rgba(255, 255, 255, 0.76)\",\"tooltipBackgroundBlur\":4,\"background\":{\"type\":\"color\",\"color\":\"#fff\",\"overlay\":{\"enabled\":false,\"color\":\"rgba(255,255,255,0.72)\",\"blur\":3}}},\"title\":\"Doughnut\",\"dropShadow\":true,\"enableFullscreen\":false,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"units\":null,\"decimals\":0,\"useDashboardTimewindow\":true,\"showLegend\":false,\"widgetStyle\":{},\"actions\":{\"headerButton\":[]},\"configMode\":\"basic\",\"displayTimewindow\":true,\"margin\":\"0px\",\"borderRadius\":\"0px\",\"widgetCss\":\"\",\"pageSize\":1024,\"noDataDisplayMessage\":\"\",\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":\"normal\",\"lineHeight\":\"24px\"},\"titleIcon\":\"donut_large\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"timewindowStyle\":{\"showIcon\":true,\"iconSize\":\"14px\",\"icon\":\"query_builder\",\"iconPosition\":\"left\",\"font\":{\"size\":12,\"sizeUnit\":\"px\",\"family\":null,\"weight\":null,\"style\":null,\"lineHeight\":\"1\"},\"color\":null},\"titleColor\":\"rgba(0, 0, 0, 0.87)\"}" + }, + "externalId": null, + "tags": [ + "ring", + "circle", + "pie chart", + "donut" + ] +} \ No newline at end of file diff --git a/ui-ngx/package.json b/ui-ngx/package.json index 8a6ffbf0f7..4a2e869dab 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -54,6 +54,7 @@ "core-js": "^3.29.1", "date-fns": "2.0.0-alpha.27", "dayjs": "1.11.4", + "echarts": "^5.4.3", "flot": "https://github.com/thingsboard/flot.git#0.9-work", "flot.curvedlines": "https://github.com/MichaelZinsmaier/CurvedLines.git#master", "font-awesome": "^4.7.0", diff --git a/ui-ngx/src/app/core/api/widget-subscription.ts b/ui-ngx/src/app/core/api/widget-subscription.ts index 374775bdd0..0381aae63b 100644 --- a/ui-ngx/src/app/core/api/widget-subscription.ts +++ b/ui-ngx/src/app/core/api/widget-subscription.ts @@ -1537,7 +1537,7 @@ export class WidgetSubscription implements IWidgetSubscription { } if (this.type === widgetType.latest) { const prevData = currentData.data; - if (!data.data.length) { + if (!data.data.length && !prevData.length) { update = false; } else if (prevData && prevData[0] && prevData[0].length > 1 && data.data.length > 0) { const prevTs = prevData[0][0]; @@ -1560,6 +1560,8 @@ export class WidgetSubscription implements IWidgetSubscription { } this.notifyDataLoaded(); this.onDataUpdated(detectChanges); + } else if (this.loadingData) { + this.notifyDataLoaded(); } } diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts index 8b60fe9aca..149a64b856 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts @@ -142,8 +142,8 @@ export class DashboardWidgetSelectComponent implements OnInit { columns: 2, breakpoints: { 'screen and (min-width: 2000px)': 5, - 'screen and (min-width: 1280px)': 4, - 'screen and (min-width: 600px)': 3 + 'gt-md': 4, + 'gt-xs': 3 } }; diff --git a/ui-ngx/src/app/modules/home/components/grid/scroll-grid.component.ts b/ui-ngx/src/app/modules/home/components/grid/scroll-grid.component.ts index 3ca42bba07..e0eea202ff 100644 --- a/ui-ngx/src/app/modules/home/components/grid/scroll-grid.component.ts +++ b/ui-ngx/src/app/modules/home/components/grid/scroll-grid.component.ts @@ -47,7 +47,7 @@ export class ScrollGridComponent implements OnInit, AfterViewInit, OnChang viewport: CdkVirtualScrollViewport; @Input() - columns: ScrollGridColumns = {columns: 1}; + columns: ScrollGridColumns | number = 1; @Input() fetchFunction: GridEntitiesFetchFunction; diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts index 3d303b01b7..5bb6d9ea52 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts @@ -82,6 +82,9 @@ import { import { LiquidLevelCardBasicConfigComponent } from '@home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component'; +import { + DoughnutBasicConfigComponent +} from '@home/components/widget/config/basic/chart/doughnut-basic-config.component'; @NgModule({ declarations: [ @@ -107,7 +110,8 @@ import { RadialGaugeBasicConfigComponent, ThermometerScaleGaugeBasicConfigComponent, CompassGaugeBasicConfigComponent, - LiquidLevelCardBasicConfigComponent + LiquidLevelCardBasicConfigComponent, + DoughnutBasicConfigComponent ], imports: [ CommonModule, @@ -137,7 +141,8 @@ import { RadialGaugeBasicConfigComponent, ThermometerScaleGaugeBasicConfigComponent, CompassGaugeBasicConfigComponent, - LiquidLevelCardBasicConfigComponent + LiquidLevelCardBasicConfigComponent, + DoughnutBasicConfigComponent ] }) export class BasicWidgetConfigModule { @@ -161,5 +166,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type
widget-config.appearance
widget-config.appearance
widget-config.appearance
+ + + + + + + +
+
widget-config.card-appearance
+ + + {{ doughnutLayoutTranslationMap.get(layout) | translate }} + + +
+ + {{ 'widgets.value-card.auto-scale' | translate }} + +
+
+ + {{ 'widget-config.card-title' | translate }} + +
+ + + + + + + +
+
+
+ + {{ 'widget-config.card-icon' | translate }} + +
+ + + + +
+
+
+
{{ 'widgets.doughnut.central-total-value' | translate }}
+
+ + + + +
+
+
+
widget-config.units-short
+ + +
+
+
widget-config.decimals-short
+ + + +
+
+
+ + + + + {{ 'widget-config.legend' | translate }} + + + + +
+
{{ 'legend.position' | translate }}
+ + + + {{ doughnutLegendPositionTranslationMap.get(pos) | translate }} + + + +
+
+
{{ 'widgets.doughnut.legend-label' | translate }}
+
+ + + + +
+
+
+
{{ 'widgets.doughnut.legend-value' | translate }}
+
+ + + + +
+
+ + +
+
+ + + + + {{ 'widgets.doughnut.tooltip' | translate }} + + + + +
+
{{ 'widgets.doughnut.tooltip-value' | translate }}
+
+ + + + {{ doughnutTooltipValueTypeTranslationMap.get(type) | translate }} + + + + + +
widget-config.decimals-suffix
+ + + + + +
+
+
+
{{ 'widgets.doughnut.tooltip-background-color' | translate }}
+ + +
+
+
{{ 'widgets.doughnut.tooltip-background-blur' | translate }}
+ + +
px
+ +
+ + +
+
+
widget-config.card-appearance
+
+
{{ 'widgets.background.background' | translate }}
+ + +
+
+
widget-config.show-card-buttons
+ + {{ 'fullscreen.fullscreen' | translate }} + +
+
+
{{ 'widget-config.card-border-radius' | translate }}
+ + + +
+
+ + + diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts new file mode 100644 index 0000000000..2feb44615d --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/doughnut-basic-config.component.ts @@ -0,0 +1,339 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; +import { + DataKey, + Datasource, + datasourcesHasAggregation, + datasourcesHasOnlyComparisonAggregation, + WidgetConfig +} from '@shared/models/widget.models'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; +import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils'; +import { + getTimewindowConfig, + setTimewindowConfig +} from '@home/components/widget/config/timewindow-config-panel.component'; +import { + doughnutDefaultSettings, + DoughnutLayout, + doughnutLayoutImages, + doughnutLayouts, + doughnutLayoutTranslations, + DoughnutLegendPosition, + doughnutLegendPositionTranslations, + DoughnutTooltipValueType, + doughnutTooltipValueTypes, + doughnutTooltipValueTypeTranslations, + DoughnutWidgetSettings, + horizontalDoughnutLayoutImages +} from '@home/components/widget/lib/chart/doughnut-widget.models'; + +@Component({ + selector: 'tb-doughnut-basic-config', + templateUrl: './doughnut-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class DoughnutBasicConfigComponent extends BasicWidgetConfigComponent { + + public get datasource(): Datasource { + const datasources: Datasource[] = this.doughnutWidgetConfigForm.get('datasources').value; + if (datasources && datasources.length) { + return datasources[0]; + } else { + return null; + } + } + + public get displayTimewindowConfig(): boolean { + const datasources = this.doughnutWidgetConfigForm.get('datasources').value; + return datasourcesHasAggregation(datasources); + } + + public onlyHistoryTimewindow(): boolean { + const datasources = this.doughnutWidgetConfigForm.get('datasources').value; + return datasourcesHasOnlyComparisonAggregation(datasources); + } + + doughnutLayouts = doughnutLayouts; + + doughnutLayoutTranslationMap = doughnutLayoutTranslations; + + horizontal = false; + + doughnutLayoutImageMap: Map; + + doughnutLegendPositions: DoughnutLegendPosition[]; + + doughnutLegendPositionTranslationMap = doughnutLegendPositionTranslations; + + doughnutTooltipValueTypes = doughnutTooltipValueTypes; + + doughnutTooltipValueTypeTranslationMap = doughnutTooltipValueTypeTranslations; + + doughnutWidgetConfigForm: UntypedFormGroup; + + valuePreviewFn = this._valuePreviewFn.bind(this); + + tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); + + get totalEnabled(): boolean { + const layout: DoughnutLayout = this.doughnutWidgetConfigForm.get('layout').value; + return layout === DoughnutLayout.with_total; + } + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + private fb: UntypedFormBuilder) { + super(store, widgetConfigComponent); + } + + protected configForm(): UntypedFormGroup { + return this.doughnutWidgetConfigForm; + } + + protected setupConfig(widgetConfig: WidgetConfigComponentData) { + const params = widgetConfig.typeParameters as any; + this.horizontal = isDefinedAndNotNull(params.horizontal) ? params.horizontal : false; + this.doughnutLayoutImageMap = this.horizontal ? horizontalDoughnutLayoutImages : doughnutLayoutImages; + this.doughnutLegendPositions = this.horizontal ? [DoughnutLegendPosition.left, DoughnutLegendPosition.right] : + [DoughnutLegendPosition.top, DoughnutLegendPosition.bottom]; + super.setupConfig(widgetConfig); + } + + protected defaultDataKeys(configData: WidgetConfigComponentData): DataKey[] { + return [{ name: 'windPower', label: 'Wind power', type: DataKeyType.timeseries, units: '', decimals: 0, color: '#08872B' }, + { name: 'solarPower', label: 'Solar power', type: DataKeyType.timeseries, units: '', decimals: 0, color: '#FF4D5A' }]; + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + const settings: DoughnutWidgetSettings = {...doughnutDefaultSettings(this.horizontal), ...(configData.config.settings || {})}; + this.doughnutWidgetConfigForm = this.fb.group({ + timewindowConfig: [getTimewindowConfig(configData.config), []], + datasources: [configData.config.datasources, []], + + series: [this.getSeries(configData.config.datasources), []], + + layout: [settings.layout, []], + autoScale: [settings.autoScale, []], + + showTitle: [configData.config.showTitle, []], + title: [configData.config.title, []], + titleFont: [configData.config.titleFont, []], + titleColor: [configData.config.titleColor, []], + showTitleIcon: [configData.config.showTitleIcon, []], + titleIcon: [configData.config.titleIcon, []], + iconColor: [configData.config.iconColor, []], + + totalValueFont: [settings.totalValueFont, []], + totalValueColor: [settings.totalValueColor, []], + + units: [configData.config.units, []], + decimals: [configData.config.decimals, []], + + showLegend: [settings.showLegend, []], + legendPosition: [settings.legendPosition, []], + legendLabelFont: [settings.legendLabelFont, []], + legendLabelColor: [settings.legendLabelColor, []], + legendValueFont: [settings.legendValueFont, []], + legendValueColor: [settings.legendValueColor, []], + + showTooltip: [settings.showTooltip, []], + tooltipValueType: [settings.tooltipValueType, []], + tooltipValueDecimals: [settings.tooltipValueDecimals, []], + tooltipValueFont: [settings.tooltipValueFont, []], + tooltipValueColor: [settings.tooltipValueColor, []], + tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], + tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], + + background: [settings.background, []], + + cardButtons: [this.getCardButtons(configData.config), []], + borderRadius: [configData.config.borderRadius, []], + + actions: [configData.config.actions || {}, []] + }); + } + + protected prepareOutputConfig(config: any): WidgetConfigComponentData { + setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); + this.widgetConfig.config.datasources = config.datasources; + this.setSeries(config.series, this.widgetConfig.config.datasources); + + this.widgetConfig.config.showTitle = config.showTitle; + this.widgetConfig.config.title = config.title; + this.widgetConfig.config.titleFont = config.titleFont; + this.widgetConfig.config.titleColor = config.titleColor; + + this.widgetConfig.config.showTitleIcon = config.showTitleIcon; + this.widgetConfig.config.titleIcon = config.titleIcon; + this.widgetConfig.config.iconColor = config.iconColor; + + this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; + + this.widgetConfig.config.settings.layout = config.layout; + this.widgetConfig.config.settings.autoScale = config.autoScale; + + this.widgetConfig.config.settings.totalValueFont = config.totalValueFont; + this.widgetConfig.config.settings.totalValueColor = config.totalValueColor; + + this.widgetConfig.config.units = config.units; + this.widgetConfig.config.decimals = config.decimals; + + this.widgetConfig.config.settings.showLegend = config.showLegend; + this.widgetConfig.config.settings.legendPosition = config.legendPosition; + this.widgetConfig.config.settings.legendLabelFont = config.legendLabelFont; + this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor; + this.widgetConfig.config.settings.legendValueFont = config.legendValueFont; + this.widgetConfig.config.settings.legendValueColor = config.legendValueColor; + + this.widgetConfig.config.settings.showTooltip = config.showTooltip; + this.widgetConfig.config.settings.tooltipValueType = config.tooltipValueType; + this.widgetConfig.config.settings.tooltipValueDecimals = config.tooltipValueDecimals; + this.widgetConfig.config.settings.tooltipValueFont = config.tooltipValueFont; + this.widgetConfig.config.settings.tooltipValueColor = config.tooltipValueColor; + this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor; + this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur; + + this.widgetConfig.config.settings.background = config.background; + + this.setCardButtons(config.cardButtons, this.widgetConfig.config); + this.widgetConfig.config.borderRadius = config.borderRadius; + + this.widgetConfig.config.actions = config.actions; + + return this.widgetConfig; + } + + protected validatorTriggers(): string[] { + return ['layout', 'showTitle', 'showTitleIcon', 'showLegend', 'showTooltip']; + } + + protected updateValidators(emitEvent: boolean, trigger?: string) { + const layout: DoughnutLayout = this.doughnutWidgetConfigForm.get('layout').value; + const showTitle: boolean = this.doughnutWidgetConfigForm.get('showTitle').value; + const showTitleIcon: boolean = this.doughnutWidgetConfigForm.get('showTitleIcon').value; + const showLegend: boolean = this.doughnutWidgetConfigForm.get('showLegend').value; + const showTooltip: boolean = this.doughnutWidgetConfigForm.get('showTooltip').value; + + const totalEnabled = layout === DoughnutLayout.with_total; + + if (showTitle) { + this.doughnutWidgetConfigForm.get('title').enable(); + this.doughnutWidgetConfigForm.get('titleFont').enable(); + this.doughnutWidgetConfigForm.get('titleColor').enable(); + this.doughnutWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false}); + if (showTitleIcon) { + this.doughnutWidgetConfigForm.get('titleIcon').enable(); + this.doughnutWidgetConfigForm.get('iconColor').enable(); + } else { + this.doughnutWidgetConfigForm.get('titleIcon').disable(); + this.doughnutWidgetConfigForm.get('iconColor').disable(); + } + } else { + this.doughnutWidgetConfigForm.get('title').disable(); + this.doughnutWidgetConfigForm.get('titleFont').disable(); + this.doughnutWidgetConfigForm.get('titleColor').disable(); + this.doughnutWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false}); + this.doughnutWidgetConfigForm.get('titleIcon').disable(); + this.doughnutWidgetConfigForm.get('iconColor').disable(); + } + if (showLegend) { + this.doughnutWidgetConfigForm.get('legendPosition').enable(); + this.doughnutWidgetConfigForm.get('legendLabelFont').enable(); + this.doughnutWidgetConfigForm.get('legendLabelColor').enable(); + this.doughnutWidgetConfigForm.get('legendValueFont').enable(); + this.doughnutWidgetConfigForm.get('legendValueColor').enable(); + } else { + this.doughnutWidgetConfigForm.get('legendPosition').disable(); + this.doughnutWidgetConfigForm.get('legendLabelFont').disable(); + this.doughnutWidgetConfigForm.get('legendLabelColor').disable(); + this.doughnutWidgetConfigForm.get('legendValueFont').disable(); + this.doughnutWidgetConfigForm.get('legendValueColor').disable(); + } + if (showTooltip) { + this.doughnutWidgetConfigForm.get('tooltipValueType').enable(); + this.doughnutWidgetConfigForm.get('tooltipValueDecimals').enable(); + this.doughnutWidgetConfigForm.get('tooltipValueFont').enable(); + this.doughnutWidgetConfigForm.get('tooltipValueColor').enable(); + this.doughnutWidgetConfigForm.get('tooltipBackgroundColor').enable(); + this.doughnutWidgetConfigForm.get('tooltipBackgroundBlur').enable(); + } else { + this.doughnutWidgetConfigForm.get('tooltipValueType').disable(); + this.doughnutWidgetConfigForm.get('tooltipValueDecimals').disable(); + this.doughnutWidgetConfigForm.get('tooltipValueFont').disable(); + this.doughnutWidgetConfigForm.get('tooltipValueColor').disable(); + this.doughnutWidgetConfigForm.get('tooltipBackgroundColor').disable(); + this.doughnutWidgetConfigForm.get('tooltipBackgroundBlur').disable(); + } + if (totalEnabled) { + this.doughnutWidgetConfigForm.get('totalValueFont').enable(); + this.doughnutWidgetConfigForm.get('totalValueColor').enable(); + } else { + this.doughnutWidgetConfigForm.get('totalValueFont').disable(); + this.doughnutWidgetConfigForm.get('totalValueColor').disable(); + } + } + + private getSeries(datasources?: Datasource[]): DataKey[] { + if (datasources && datasources.length) { + return datasources[0].dataKeys || []; + } + return []; + } + + private setSeries(series: DataKey[], datasources?: Datasource[]) { + if (datasources && datasources.length) { + datasources[0].dataKeys = series; + } + } + + private getCardButtons(config: WidgetConfig): string[] { + const buttons: string[] = []; + if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { + buttons.push('fullscreen'); + } + return buttons; + } + + private setCardButtons(buttons: string[], config: WidgetConfig) { + config.enableFullscreen = buttons.includes('fullscreen'); + } + + private _valuePreviewFn(): string { + const units: string = this.doughnutWidgetConfigForm.get('units').value; + const decimals: number = this.doughnutWidgetConfigForm.get('decimals').value; + return formatValue(110, decimals, units, false); + } + + private _tooltipValuePreviewFn(): string { + const tooltipValueType: DoughnutTooltipValueType = this.doughnutWidgetConfigForm.get('tooltipValueType').value; + const decimals: number = this.doughnutWidgetConfigForm.get('tooltipValueDecimals').value; + if (tooltipValueType === DoughnutTooltipValueType.percentage) { + return formatValue(35, decimals, '%', false); + } else { + const units: string = this.doughnutWidgetConfigForm.get('units').value; + return formatValue(110, decimals, units, false); + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html index 07e9d5c2fc..e7a738dc82 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.html @@ -44,6 +44,8 @@ [hideDataKeyColor]="hideDataKeyColor" [hideDecimals]="hideDecimals" [hideUnits]="hideUnits" + [hideDataKeyDecimals]="hideDataKeyDecimals" + [hideDataKeyUnits]="hideDataKeyUnits" [dataKeyType]="dataKeyType" [singleRow]="false" [keySettingsTitle]="keySettingsTitle" diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts index 3eb7de9a11..00684f6d53 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/common/data-keys-panel.component.ts @@ -107,6 +107,14 @@ export class DataKeysPanelComponent implements ControlValueAccessor, OnInit, OnC @coerceBoolean() hideDecimals = false; + @Input() + @coerceBoolean() + hideDataKeyUnits = false; + + @Input() + @coerceBoolean() + hideDataKeyDecimals = false; + @Input() @coerceBoolean() hideSourceSelection = false; diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html index 1d67d587fe..8bcbc75911 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/battery-level-basic-config.component.html @@ -31,8 +31,10 @@
widget-config.appearance
-
widget-config.appearance
widget-config.appearance
+
+
+ +
+
+
+
+
+
+
+
{{ legendItem.label }}
+
+
{{ legendItem.value }}
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.scss new file mode 100644 index 0000000000..60c5f81191 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.scss @@ -0,0 +1,110 @@ +/** + * Copyright © 2016-2023 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.tb-doughnut-panel { + width: 100%; + height: 100%; + position: relative; + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px 24px 24px 24px; + > div:not(.tb-doughnut-overlay) { + z-index: 1; + } + .tb-doughnut-overlay { + position: absolute; + top: 12px; + left: 12px; + bottom: 12px; + right: 12px; + } + div.tb-widget-title { + padding: 0; + } + .tb-doughnut-content { + flex: 1; + min-width: 0; + min-height: 0; + display: flex; + flex-direction: column; + gap: 16px; + &.legend-top { + flex-direction: column-reverse; + } + &.legend-right { + flex-direction: row; + } + &.legend-left { + flex-direction: row-reverse; + } + .tb-doughnut-shape { + flex: 1; + min-width: 0; + min-height: 0; + display: flex; + align-items: center; + justify-content: center; + } + .tb-doughnut-legend { + display: flex; + justify-content: space-around; + align-items: center; + align-self: stretch; + flex-wrap: wrap; + gap: 8px; + .tb-doughnut-legend-item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + user-select: none; + &.pointer { + cursor: pointer; + } + .tb-doughnut-legend-item-label { + display: flex; + align-items: center; + gap: 4px; + color: #ccc; + .tb-doughnut-legend-item-label-circle { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #ccc; + } + } + .tb-doughnut-legend-item-value { + padding-left: 12px; + color: #ccc; + } + } + } + &.legend-right, &.legend-left { + gap: 24px; + .tb-doughnut-legend { + flex-direction: column; + justify-content: center; + align-items: stretch; + .tb-doughnut-legend-item { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts new file mode 100644 index 0000000000..c4f32f89c9 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts @@ -0,0 +1,535 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { + AfterViewInit, + ChangeDetectorRef, + Component, + ElementRef, + Input, + OnDestroy, + OnInit, + Renderer2, + TemplateRef, + ViewChild, + ViewEncapsulation +} from '@angular/core'; +import { + doughnutDefaultSettings, + DoughnutLayout, + DoughnutLegendPosition, + DoughnutTooltipValueType, + DoughnutWidgetSettings +} from '@home/components/widget/lib/chart/doughnut-widget.models'; +import { WidgetContext } from '@home/models/widget-component.models'; +import { + backgroundStyle, + ColorProcessor, + ComponentStyle, + overlayStyle, + textStyle +} from '@shared/models/widget-settings.models'; +import { ResizeObserver } from '@juggle/resize-observer'; +import { WidgetComponent } from '@home/components/widget/widget.component'; +import * as echarts from 'echarts/core'; +import { TranslateService } from '@ngx-translate/core'; +import { PieDataItemOption } from 'echarts/types/src/chart/pie/PieSeries'; +import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils'; +import { SVG, Svg, Text } from '@svgdotjs/svg.js'; +import { DataKey } from '@shared/models/widget.models'; +import { TooltipComponent, TooltipComponentOption } from 'echarts/components'; +import { PieChart, PieSeriesOption } from 'echarts/charts'; +import { SVGRenderer } from 'echarts/renderers'; + +echarts.use([ + TooltipComponent, + PieChart, + SVGRenderer +]); + +type EChartsOption = echarts.ComposeOption< + | TooltipComponentOption + | PieSeriesOption +>; +type ECharts = echarts.ECharts; + +const shapeSize = 134; +const shapeSegmentWidth = 13.4; + +interface DoughnutDataItem { + id: number; + dataKey: DataKey; + value: number; + hasValue: boolean; + enabled: boolean; +} + +interface DoughnutLegendItem { + id: number; + color: string; + label: string; + value: string; + hasValue: boolean; + enabled: boolean; + total?: boolean; +} + +@Component({ + selector: 'tb-doughnut-widget', + templateUrl: './doughnut-widget.component.html', + styleUrls: ['./doughnut-widget.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit { + + @ViewChild('doughnutContent', {static: false}) + doughnutContent: ElementRef; + + @ViewChild('doughnutShape', {static: false}) + doughnutShape: ElementRef; + + @ViewChild('doughnutLegend', {static: false}) + doughnutLegend: ElementRef; + + settings: DoughnutWidgetSettings; + + @Input() + ctx: WidgetContext; + + @Input() + widgetTitlePanel: TemplateRef; + + showLegend: boolean; + legendClass: string; + + totalValueColor: ColorProcessor; + + backgroundStyle: ComponentStyle = {}; + overlayStyle: ComponentStyle = {}; + + legendItems: DoughnutLegendItem[]; + legendLabelStyle: ComponentStyle; + legendValueStyle: ComponentStyle; + disabledLegendLabelStyle: ComponentStyle; + disabledLegendValueStyle: ComponentStyle; + + private shapeResize$: ResizeObserver; + private legendHorizontal: boolean; + + private decimals = 0; + private units = ''; + + private total = 0; + private totalText = 'N/A'; + private scale = 1; + + private dataItems: DoughnutDataItem[] = []; + + private drawDoughnutPending = false; + private showTotal = false; + private doughnutChart: ECharts; + private doughnutOptions: EChartsOption; + private svgShape: Svg; + private totalTextNode: Text; + + constructor(private widgetComponent: WidgetComponent, + private renderer: Renderer2, + private translate: TranslateService, + private cd: ChangeDetectorRef) { + } + + ngOnInit(): void { + const params = this.widgetComponent.typeParameters as any; + const horizontal = isDefinedAndNotNull(params.horizontal) ? params.horizontal : false; + this.ctx.$scope.doughnutWidget = this; + this.settings = {...doughnutDefaultSettings(horizontal), ...this.ctx.settings}; + + this.decimals = this.ctx.decimals; + this.units = this.ctx.units; + + this.showLegend = this.settings.showLegend; + this.showTotal = this.settings.layout === DoughnutLayout.with_total; + + if (this.showTotal) { + this.totalValueColor = ColorProcessor.fromSettings(this.settings.totalValueColor); + } + + this.backgroundStyle = backgroundStyle(this.settings.background); + this.overlayStyle = overlayStyle(this.settings.background.overlay); + + if (this.showLegend) { + this.legendItems = []; + this.legendClass = `legend-${this.settings.legendPosition}`; + this.legendHorizontal = [DoughnutLegendPosition.left, DoughnutLegendPosition.right].includes(this.settings.legendPosition); + this.legendLabelStyle = textStyle(this.settings.legendLabelFont); + this.disabledLegendLabelStyle = textStyle(this.settings.legendLabelFont); + this.legendLabelStyle.color = this.settings.legendLabelColor; + this.legendValueStyle = textStyle(this.settings.legendValueFont); + this.disabledLegendValueStyle = textStyle(this.settings.legendValueFont); + this.legendValueStyle.color = this.settings.legendValueColor; + } + let counter = 0; + if (this.ctx.datasources.length) { + for (const datasource of this.ctx.datasources) { + const dataKeys = datasource.dataKeys; + for (const dataKey of dataKeys) { + const id = counter++; + this.dataItems.push({ + id, + dataKey, + value: 0, + hasValue: false, + enabled: true + }); + if (this.showLegend) { + this.legendItems.push( + { + id, + value: '--', + label: dataKey.label, + color: dataKey.color, + enabled: true, + hasValue: false + } + ); + } + } + } + } + if (!this.showTotal && this.showLegend) { + this.legendItems.push( + { + id: null, + value: '--', + label: this.translate.instant('widgets.doughnut.total'), + color: 'rgba(0, 0, 0, 0.06)', + enabled: true, + hasValue: false, + total: true + } + ); + } + } + + ngAfterViewInit() { + if (this.drawDoughnutPending) { + this.drawDoughnut(); + } + } + + ngOnDestroy() { + if (this.shapeResize$) { + this.shapeResize$.disconnect(); + } + if (this.doughnutChart) { + this.doughnutChart.dispose(); + } + } + + public onInit() { + const borderRadius = this.ctx.$widgetElement.css('borderRadius'); + this.overlayStyle = {...this.overlayStyle, ...{borderRadius}}; + if (this.doughnutShape) { + this.drawDoughnut(); + } else { + this.drawDoughnutPending = true; + } + this.cd.detectChanges(); + } + + public onDataUpdated() { + for (let i=0; i < this.ctx.data.length; i++) { + const dsData = this.ctx.data[i]; + let value = 0; + const tsValue = dsData.data[0]; + if (tsValue && isDefinedAndNotNull(tsValue[1]) && isNumeric(tsValue[1])) { + value = tsValue[1]; + this.dataItems[i].hasValue = true; + this.dataItems[i].value = value; + } else { + this.dataItems[i].hasValue = false; + this.dataItems[i].value = 0; + } + } + this.updateSeriesData(); + if (this.showLegend) { + this.cd.detectChanges(); + if (this.legendHorizontal) { + setTimeout(() => { + this.onResize(); + }); + } + } + } + + private updateSeriesData(renderTotal = true) { + this.total = 0; + this.totalText = 'N/A'; + let hasValue = false; + const seriesData: PieDataItemOption[] = []; + const enabledDataItems = this.dataItems.filter(item => item.enabled && item.hasValue); + for (let i=0; i < this.dataItems.length; i++) { + const dataItem = this.dataItems[i]; + if (dataItem.enabled && dataItem.hasValue) { + hasValue = true; + this.total += dataItem.value; + seriesData.push( + {id: dataItem.id, value: dataItem.value, name: dataItem.dataKey.label, itemStyle: {color: dataItem.dataKey.color}} + ); + if (enabledDataItems.length > 1) { + seriesData.push({ + value: 0, name: '', itemStyle: {color: 'transparent'}, emphasis: {disabled: true} + }); + } + } + if (this.showLegend) { + if (dataItem.hasValue) { + this.legendItems[i].hasValue = true; + this.legendItems[i].value = formatValue(dataItem.value, this.decimals, this.units, false); + } else { + this.legendItems[i].hasValue = false; + this.legendItems[i].value = '--'; + } + } + } + for (let i= 1; i < seriesData.length; i+=2) { + seriesData[i].value = this.total / 100; + } + if (this.showTotal || this.showLegend) { + if (hasValue) { + this.totalText = formatValue(this.total, this.decimals, this.units, false); + if (this.showLegend && !this.showTotal) { + this.legendItems[this.legendItems.length - 1].hasValue = true; + this.legendItems[this.legendItems.length - 1].value = this.totalText; + } + } else if (this.showLegend && !this.showTotal) { + this.legendItems[this.legendItems.length - 1].hasValue = false; + this.legendItems[this.legendItems.length - 1].value = '--'; + } + } + this.doughnutOptions.series[0].data = seriesData; + this.doughnutChart.setOption(this.doughnutOptions); + if (this.showTotal) { + this.totalValueColor.update(this.total); + if (renderTotal) { + this.renderTotal(); + } + } + } + + public onLegendItemEnter(item: DoughnutLegendItem) { + if (!item.total && item.enabled && item.hasValue) { + const dataIndex = this.doughnutOptions.series[0].data.findIndex(d => d.id === item.id); + if (dataIndex > -1) { + this.doughnutChart.dispatchAction({ + type: 'highlight', + dataIndex + }); + } + } + } + + public onLegendItemLeave(item: DoughnutLegendItem) { + if (!item.total && item.enabled && item.hasValue) { + const dataIndex = this.doughnutOptions.series[0].data.findIndex(d => d.id === item.id); + if (dataIndex > -1) { + this.doughnutChart.dispatchAction({ + type: 'downplay', + dataIndex + }); + } + } + } + + public toggleLegendItem(item: DoughnutLegendItem) { + if (!item.total && item.hasValue) { + const enable = !item.enabled; + const dataItem = this.dataItems.find(d => d.id === item.id); + if (dataItem) { + dataItem.enabled = enable; + this.updateSeriesData(); + item.enabled = enable; + if (enable) { + const dataIndex = this.doughnutOptions.series[0].data.findIndex(d => d.id === item.id); + if (dataIndex > -1) { + this.doughnutChart.dispatchAction({ + type: 'highlight', + dataIndex + }); + } + } + } + } + } + + private drawDoughnut() { + const shapeWidth = this.doughnutShape.nativeElement.getBoundingClientRect().width; + const shapeHeight = this.doughnutShape.nativeElement.getBoundingClientRect().height; + const size = this.settings.autoScale ? shapeSize : Math.min(shapeWidth, shapeHeight); + const innerRadius = size / 2 - shapeSegmentWidth; + const outerRadius = size / 2; + this.doughnutChart = echarts.init(this.doughnutShape.nativeElement, null, { + renderer: 'svg', + width: this.settings.autoScale ? shapeSize : undefined, + height: this.settings.autoScale ? shapeSize : undefined, + }); + this.doughnutOptions = { + tooltip: { + trigger: this.settings.showTooltip ? 'item' : 'none', + confine: false, + appendToBody: true + }, + series: [ + { + type: 'pie', + clockwise: false, + radius: [innerRadius, outerRadius], + avoidLabelOverlap: false, + itemStyle: { + borderRadius: '50%', + borderWidth: 0, + borderColor: '#fff' + }, + label: { + show: false + }, + emphasis: { + scale: false, + itemStyle: { + borderColor: '#fff', + borderWidth: 2, + shadowColor: 'rgba(0, 0, 0, 0.24)', + shadowBlur: 8 + }, + label: { + show: false + } + } + } + ] + }; + if (this.settings.showTooltip) { + this.doughnutOptions.series[0].tooltip = { + formatter: (params) => { + let value: string; + if (this.settings.tooltipValueType === DoughnutTooltipValueType.percentage) { + const percents = params.value / this.total * 100; + value = formatValue(percents, this.settings.tooltipValueDecimals, '%', false); + } else { + value = formatValue(params.value, this.settings.tooltipValueDecimals, this.units, false); + } + const textElement: HTMLElement = this.renderer.createElement('div'); + this.renderer.setStyle(textElement, 'display', 'inline-flex'); + this.renderer.setStyle(textElement, 'align-items', 'center'); + this.renderer.setStyle(textElement, 'gap', '8px'); + const labelElement: HTMLElement = this.renderer.createElement('div'); + this.renderer.appendChild(labelElement, this.renderer.createText(params.name)); + this.renderer.setStyle(labelElement, 'font-family', 'Roboto'); + this.renderer.setStyle(labelElement, 'font-size', '11px'); + this.renderer.setStyle(labelElement, 'font-style', 'normal'); + this.renderer.setStyle(labelElement, 'font-weight', '400'); + this.renderer.setStyle(labelElement, 'line-height', '16px'); + this.renderer.setStyle(labelElement, 'letter-spacing', '0.25px'); + this.renderer.setStyle(labelElement, 'color', 'rgba(0, 0, 0, 0.38)'); + const valueElement: HTMLElement = this.renderer.createElement('div'); + this.renderer.appendChild(valueElement, this.renderer.createText(value)); + this.renderer.setStyle(valueElement, 'font-family', this.settings.tooltipValueFont.family); + this.renderer.setStyle(valueElement, 'font-size', this.settings.tooltipValueFont.size + this.settings.tooltipValueFont.sizeUnit); + this.renderer.setStyle(valueElement, 'font-style', this.settings.tooltipValueFont.style); + this.renderer.setStyle(valueElement, 'font-weight', this.settings.tooltipValueFont.weight); + this.renderer.setStyle(valueElement, 'line-height', this.settings.tooltipValueFont.lineHeight); + this.renderer.setStyle(valueElement, 'color', this.settings.tooltipValueColor); + this.renderer.appendChild(textElement, labelElement); + this.renderer.appendChild(textElement, valueElement); + return textElement; + }, + padding: [4, 8], + backgroundColor: this.settings.tooltipBackgroundColor, + extraCssText: `line-height: 1; backdrop-filter: blur(${this.settings.tooltipBackgroundBlur}px);` + }; + this.doughnutOptions.series[0].tooltip.position = (pos) => [pos[0] + 10, pos[1] + 10]; + } + this.updateSeriesData(false); + + this.renderer.setStyle(this.doughnutChart.getDom().firstChild, 'overflow', 'visible'); + if (this.settings.autoScale) { + this.renderer.setStyle(this.doughnutChart.getDom().firstChild, 'position', 'absolute'); + } + this.renderer.setStyle(this.doughnutChart.getDom().firstChild.firstChild, 'overflow', 'visible'); + + this.svgShape = SVG(this.doughnutChart.getDom().firstChild.firstChild).toRoot(); + + if (this.showTotal) { + this.totalTextNode = this.svgShape.text('').font({ + family: 'Roboto', + leading: 1 + }).attr({'text-anchor': 'middle'}); + this.renderTotal(); + } + + this.shapeResize$ = new ResizeObserver(() => { + this.onResize(); + }); + this.shapeResize$.observe(this.doughnutContent.nativeElement); + this.onResize(); + } + + private renderTotal() { + this.totalTextNode.text(add => { + add.tspan(this.translate.instant('widgets.doughnut.total')).font({size: '12px', weight: 400}).fill('rgba(0, 0, 0, 0.38)'); + add.tspan('').newLine().font({size: '4px'}); + add.tspan(this.totalText).newLine().font( + {family: this.settings.totalValueFont.family, + size: this.settings.totalValueFont.size + this.settings.totalValueFont.sizeUnit, + weight: this.settings.totalValueFont.weight, + style: this.settings.totalValueFont.style} + ).fill(this.totalValueColor.color); + }).center(this.svgShape.bbox().width / 2, this.svgShape.bbox().height / 2); + } + + private onResize() { + if (this.legendHorizontal) { + this.renderer.setStyle(this.doughnutShape.nativeElement, 'max-width', null); + this.renderer.setStyle(this.doughnutShape.nativeElement, 'min-width', null); + this.renderer.setStyle(this.doughnutLegend.nativeElement, 'flex', null); + } + const shapeWidth = this.doughnutShape.nativeElement.getBoundingClientRect().width; + const shapeHeight = this.doughnutShape.nativeElement.getBoundingClientRect().height; + const size = Math.min(shapeWidth, shapeHeight); + if (this.legendHorizontal) { + this.renderer.setStyle(this.doughnutShape.nativeElement, 'max-width', `${size}px`); + this.renderer.setStyle(this.doughnutShape.nativeElement, 'min-width', `${size}px`); + this.renderer.setStyle(this.doughnutLegend.nativeElement, 'flex', '1'); + } + if (!this.settings.autoScale) { + const innerRadius = size / 2 - shapeSegmentWidth; + const outerRadius = size / 2; + this.doughnutOptions.series[0].radius = [innerRadius, outerRadius]; + this.doughnutChart.setOption(this.doughnutOptions); + } else { + this.scale = size / shapeSize; + this.renderer.setStyle(this.doughnutChart.getDom().firstChild, 'transform', `scale(${this.scale})`); + } + if (!this.settings.autoScale) { + this.doughnutChart.resize(); + } + if (this.showTotal) { + this.totalTextNode.center((this.settings.autoScale ? shapeSize : shapeWidth) / 2, + (this.settings.autoScale ? shapeSize : shapeHeight) / 2); + } + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts new file mode 100644 index 0000000000..1e3c323cb6 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.models.ts @@ -0,0 +1,159 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { + BackgroundSettings, + BackgroundType, + ColorSettings, + constantColor, + Font +} from '@shared/models/widget-settings.models'; + +export enum DoughnutLayout { + default = 'default', + with_total = 'with_total' +} + +export const doughnutLayouts = Object.keys(DoughnutLayout) as DoughnutLayout[]; + +export const doughnutLayoutTranslations = new Map( + [ + [DoughnutLayout.default, 'widgets.doughnut.layout-default'], + [DoughnutLayout.with_total, 'widgets.doughnut.layout-with-total'] + ] +); + +export const doughnutLayoutImages = new Map( + [ + [DoughnutLayout.default, 'assets/widget/doughnut/default-layout.svg'], + [DoughnutLayout.with_total, 'assets/widget/doughnut/with-total-layout.svg'] + ] +); + +export const horizontalDoughnutLayoutImages = new Map( + [ + [DoughnutLayout.default, 'assets/widget/doughnut/horizontal-default-layout.svg'], + [DoughnutLayout.with_total, 'assets/widget/doughnut/horizontal-with-total-layout.svg'] + ] +); + +export enum DoughnutLegendPosition { + top = 'top', + bottom = 'bottom', + left = 'left', + right = 'right' +} + +export const doughnutLegendPositionTranslations = new Map( + [ + [DoughnutLegendPosition.top, 'widgets.doughnut.legend-position-top'], + [DoughnutLegendPosition.bottom, 'widgets.doughnut.legend-position-bottom'], + [DoughnutLegendPosition.left, 'widgets.doughnut.legend-position-left'], + [DoughnutLegendPosition.right, 'widgets.doughnut.legend-position-right'] + ] +); + +export enum DoughnutTooltipValueType { + absolute = 'absolute', + percentage = 'percentage' +} + +export const doughnutTooltipValueTypes = Object.keys(DoughnutTooltipValueType) as DoughnutTooltipValueType[]; + +export const doughnutTooltipValueTypeTranslations = new Map( + [ + [DoughnutTooltipValueType.absolute, 'widgets.doughnut.tooltip-value-type-absolute'], + [DoughnutTooltipValueType.percentage, 'widgets.doughnut.tooltip-value-type-percentage'] + ] +); + +export interface DoughnutWidgetSettings { + layout: DoughnutLayout; + autoScale: boolean; + totalValueFont: Font; + totalValueColor: ColorSettings; + showLegend: boolean; + legendPosition: DoughnutLegendPosition; + legendLabelFont: Font; + legendLabelColor: string; + legendValueFont: Font; + legendValueColor: string; + showTooltip: boolean; + tooltipValueType: DoughnutTooltipValueType; + tooltipValueDecimals: number; + tooltipValueFont: Font; + tooltipValueColor: string; + tooltipBackgroundColor: string; + tooltipBackgroundBlur: number; + background: BackgroundSettings; +} + +export const doughnutDefaultSettings = (horizontal: boolean): DoughnutWidgetSettings => ({ + layout: DoughnutLayout.default, + autoScale: true, + totalValueFont: { + family: 'Roboto', + size: 24, + sizeUnit: 'px', + style: 'normal', + weight: '500', + lineHeight: '1' + }, + totalValueColor: constantColor('rgba(0, 0, 0, 0.87)'), + showLegend: true, + legendPosition: horizontal ? DoughnutLegendPosition.right : DoughnutLegendPosition.bottom, + legendLabelFont: { + family: 'Roboto', + size: 12, + sizeUnit: 'px', + style: 'normal', + weight: '400', + lineHeight: '16px' + }, + legendLabelColor: 'rgba(0, 0, 0, 0.38)', + legendValueFont: { + family: 'Roboto', + size: 14, + sizeUnit: 'px', + style: 'normal', + weight: '500', + lineHeight: '20px' + }, + legendValueColor: 'rgba(0, 0, 0, 0.87)', + showTooltip: true, + tooltipValueType: DoughnutTooltipValueType.percentage, + tooltipValueDecimals: 0, + tooltipValueFont: { + family: 'Roboto', + size: 13, + sizeUnit: 'px', + style: 'normal', + weight: '500', + lineHeight: '16px' + }, + tooltipValueColor: 'rgba(0, 0, 0, 0.76)', + tooltipBackgroundColor: 'rgba(255, 255, 255, 0.76)', + tooltipBackgroundBlur: 4, + background: { + type: BackgroundType.color, + color: '#fff', + overlay: { + enabled: false, + color: 'rgba(255,255,255,0.72)', + blur: 3 + } + } +}); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html index bb7089991d..6c4559a0d5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html @@ -19,7 +19,10 @@
widgets.progress-bar.progress-bar-card-style
widgets.value-card.value-card-style
widgets.value-chart-card.value-chart-card-style
+ +
+
widgets.doughnut.doughnut-card-style
+ + + {{ doughnutLayoutTranslationMap.get(layout) | translate }} + + +
+ + {{ 'widgets.value-card.auto-scale' | translate }} + +
+
+
{{ 'widgets.doughnut.central-total-value' | translate }}
+
+ + + + +
+
+
+ + + + + {{ 'widget-config.legend' | translate }} + + + + +
+
{{ 'legend.position' | translate }}
+ + + + {{ doughnutLegendPositionTranslationMap.get(pos) | translate }} + + + +
+
+
{{ 'widgets.doughnut.legend-label' | translate }}
+
+ + + + +
+
+
+
{{ 'widgets.doughnut.legend-value' | translate }}
+
+ + + + +
+
+ + +
+
+ + + + + {{ 'widgets.doughnut.tooltip' | translate }} + + + + +
+
{{ 'widgets.doughnut.tooltip-value' | translate }}
+
+ + + + {{ doughnutTooltipValueTypeTranslationMap.get(type) | translate }} + + + + + +
widget-config.decimals-suffix
+ + + + + +
+
+
+
{{ 'widgets.doughnut.tooltip-background-color' | translate }}
+ + +
+
+
{{ 'widgets.doughnut.tooltip-background-blur' | translate }}
+ + +
px
+ +
+ + +
+
+
{{ 'widgets.background.background' | translate }}
+ + +
+
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts new file mode 100644 index 0000000000..a2822bf774 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-widget-settings.component.ts @@ -0,0 +1,204 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component, Injector } from '@angular/core'; +import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { formatValue, isDefinedAndNotNull } from '@core/utils'; +import { getDataKey } from '@shared/models/widget-settings.models'; +import { + doughnutDefaultSettings, + DoughnutLayout, + doughnutLayoutImages, + doughnutLayouts, + doughnutLayoutTranslations, + DoughnutLegendPosition, + doughnutLegendPositionTranslations, + DoughnutTooltipValueType, + doughnutTooltipValueTypes, + doughnutTooltipValueTypeTranslations, + horizontalDoughnutLayoutImages +} from '@home/components/widget/lib/chart/doughnut-widget.models'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; + +@Component({ + selector: 'tb-doughnut-widget-settings', + templateUrl: './doughnut-widget-settings.component.html', + styleUrls: [] +}) +export class DoughnutWidgetSettingsComponent extends WidgetSettingsComponent { + + get totalEnabled(): boolean { + const layout: DoughnutLayout = this.doughnutWidgetSettingsForm.get('layout').value; + return layout === DoughnutLayout.with_total; + } + + doughnutLayouts = doughnutLayouts; + + doughnutLayoutTranslationMap = doughnutLayoutTranslations; + + horizontal = false; + + doughnutLayoutImageMap: Map; + + doughnutLegendPositions: DoughnutLegendPosition[]; + + doughnutLegendPositionTranslationMap = doughnutLegendPositionTranslations; + + doughnutTooltipValueTypes = doughnutTooltipValueTypes; + + doughnutTooltipValueTypeTranslationMap = doughnutTooltipValueTypeTranslations; + + doughnutWidgetSettingsForm: UntypedFormGroup; + + valuePreviewFn = this._valuePreviewFn.bind(this); + + tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); + + constructor(protected store: Store, + private $injector: Injector, + private fb: UntypedFormBuilder) { + super(store); + } + + protected settingsForm(): UntypedFormGroup { + return this.doughnutWidgetSettingsForm; + } + + protected onWidgetConfigSet(widgetConfig: WidgetConfigComponentData) { + const params = widgetConfig.typeParameters as any; + this.horizontal = isDefinedAndNotNull(params.horizontal) ? params.horizontal : false; + this.doughnutLayoutImageMap = this.horizontal ? horizontalDoughnutLayoutImages : doughnutLayoutImages; + this.doughnutLegendPositions = this.horizontal ? [DoughnutLegendPosition.left, DoughnutLegendPosition.right] : + [DoughnutLegendPosition.top, DoughnutLegendPosition.bottom]; + } + + protected defaultSettings(): WidgetSettings { + return doughnutDefaultSettings(this.horizontal); + } + + protected onSettingsSet(settings: WidgetSettings) { + this.doughnutWidgetSettingsForm = this.fb.group({ + layout: [settings.layout, []], + autoScale: [settings.autoScale, []], + + totalValueFont: [settings.totalValueFont, []], + totalValueColor: [settings.totalValueColor, []], + + showLegend: [settings.showLegend, []], + legendPosition: [settings.legendPosition, []], + legendLabelFont: [settings.legendLabelFont, []], + legendLabelColor: [settings.legendLabelColor, []], + legendValueFont: [settings.legendValueFont, []], + legendValueColor: [settings.legendValueColor, []], + + showTooltip: [settings.showTooltip, []], + tooltipValueType: [settings.tooltipValueType, []], + tooltipValueDecimals: [settings.tooltipValueDecimals, []], + tooltipValueFont: [settings.tooltipValueFont, []], + tooltipValueColor: [settings.tooltipValueColor, []], + tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], + tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], + + background: [settings.background, []] + }); + } + + protected validatorTriggers(): string[] { + return ['layout', 'showLegend', 'showTooltip']; + } + + protected updateValidators(emitEvent: boolean) { + const layout: DoughnutLayout = this.doughnutWidgetSettingsForm.get('layout').value; + const showLegend: boolean = this.doughnutWidgetSettingsForm.get('showLegend').value; + const showTooltip: boolean = this.doughnutWidgetSettingsForm.get('showTooltip').value; + + const totalEnabled = layout === DoughnutLayout.with_total; + + if (showLegend) { + this.doughnutWidgetSettingsForm.get('legendPosition').enable(); + this.doughnutWidgetSettingsForm.get('legendLabelFont').enable(); + this.doughnutWidgetSettingsForm.get('legendLabelColor').enable(); + this.doughnutWidgetSettingsForm.get('legendValueFont').enable(); + this.doughnutWidgetSettingsForm.get('legendValueColor').enable(); + } else { + this.doughnutWidgetSettingsForm.get('legendPosition').disable(); + this.doughnutWidgetSettingsForm.get('legendLabelFont').disable(); + this.doughnutWidgetSettingsForm.get('legendLabelColor').disable(); + this.doughnutWidgetSettingsForm.get('legendValueFont').disable(); + this.doughnutWidgetSettingsForm.get('legendValueColor').disable(); + } + if (showTooltip) { + this.doughnutWidgetSettingsForm.get('tooltipValueType').enable(); + this.doughnutWidgetSettingsForm.get('tooltipValueDecimals').enable(); + this.doughnutWidgetSettingsForm.get('tooltipValueFont').enable(); + this.doughnutWidgetSettingsForm.get('tooltipValueColor').enable(); + this.doughnutWidgetSettingsForm.get('tooltipBackgroundColor').enable(); + this.doughnutWidgetSettingsForm.get('tooltipBackgroundBlur').enable(); + } else { + this.doughnutWidgetSettingsForm.get('tooltipValueType').disable(); + this.doughnutWidgetSettingsForm.get('tooltipValueDecimals').disable(); + this.doughnutWidgetSettingsForm.get('tooltipValueFont').disable(); + this.doughnutWidgetSettingsForm.get('tooltipValueColor').disable(); + this.doughnutWidgetSettingsForm.get('tooltipBackgroundColor').disable(); + this.doughnutWidgetSettingsForm.get('tooltipBackgroundBlur').disable(); + } + if (totalEnabled) { + this.doughnutWidgetSettingsForm.get('totalValueFont').enable(); + this.doughnutWidgetSettingsForm.get('totalValueColor').enable(); + } else { + this.doughnutWidgetSettingsForm.get('totalValueFont').disable(); + this.doughnutWidgetSettingsForm.get('totalValueColor').disable(); + } + } + + private _centerValuePreviewFn(): string { + const centerValueDataKey = getDataKey(this.widgetConfig.config.datasources, 1); + if (centerValueDataKey) { + let units: string = this.widgetConfig.config.units; + let decimals: number = this.widgetConfig.config.decimals; + if (isDefinedAndNotNull(centerValueDataKey?.decimals)) { + decimals = centerValueDataKey.decimals; + } + if (centerValueDataKey?.units) { + units = centerValueDataKey.units; + } + return formatValue(25, decimals, units, true); + } else { + return '225°'; + } + } + + private _valuePreviewFn(): string { + const units: string = this.widgetConfig.config.units; + const decimals: number = this.widgetConfig.config.decimals; + return formatValue(110, decimals, units, false); + } + + private _tooltipValuePreviewFn(): string { + const tooltipValueType: DoughnutTooltipValueType = this.doughnutWidgetSettingsForm.get('tooltipValueType').value; + const decimals: number = this.doughnutWidgetSettingsForm.get('tooltipValueDecimals').value; + if (tooltipValueType === DoughnutTooltipValueType.percentage) { + return formatValue(35, decimals, '%', false); + } else { + const units: string = this.widgetConfig.config.units; + return formatValue(110, decimals, units, false); + } + } + +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html index d9baff69fa..60559721d6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/count-widget-settings.component.html @@ -16,9 +16,11 @@ --> - (); - private _colsChanged = new BehaviorSubject(null); - constructor(private breakpointObserver: BreakpointObserver) { this.valueFormControl = new UntypedFormControl(''); } ngOnInit(): void { - const gridColumns = this.breakpointObserver.isMatched(MediaBreakpoints['lt-md']) ? this.colsLtMd : this.cols; - this.cols$ = combineLatest({state: this.breakpointObserver - .observe(MediaBreakpoints['lt-md']), colsChanged: this._colsChanged.asObservable()}).pipe( - map((data) => data.state.matches ? this.colsLtMd : this.cols), - startWith(gridColumns), - share() - ); + this._initCols(); } ngOnChanges(changes: SimpleChanges): void { for (const propName of Object.keys(changes)) { const change = changes[propName]; if (!change.firstChange && change.currentValue !== change.previousValue) { - if (['cols', 'colsLtMd'].includes(propName)) { - this._colsChanged.next(null); + if (['cols'].includes(propName)) { + this._initCols(); } } } @@ -146,6 +143,40 @@ export class ImageCardsSelectComponent implements ControlValueAccessor, OnInit, this._destroyed.complete(); } + private _initCols() { + const gridColumns = this._detectColumns(); + let state: Observable; + if (typeof this.cols === 'object' && this.cols.breakpoints) { + const breakpoints = Object.keys(this.cols.breakpoints); + state = this.breakpointObserver.observe(breakpoints.map(breakpoint => resolveBreakpoint(breakpoint))); + } else { + state = EMPTY; + } + this.cols$ = state.pipe( + map(() => this._detectColumns()), + startWith(gridColumns), + share() + ); + } + + private _detectColumns(): number { + if (typeof this.cols !== 'object') { + return this.cols; + } else { + let columns = this.cols.columns; + if (this.cols.breakpoints) { + for (const breakpoint of Object.keys(this.cols.breakpoints)) { + const breakpointValue = resolveBreakpoint(breakpoint); + if (this.breakpointObserver.isMatched(breakpointValue)) { + columns = this.cols.breakpoints[breakpoint]; + break; + } + } + } + return columns; + } + } + private syncImageCardsSelectOptions() { if (this.imageCardsSelectOptions?.length) { this.options.length = 0; @@ -165,7 +196,7 @@ export class ImageCardsSelectComponent implements ControlValueAccessor, OnInit, this.propagateChange = fn; } - registerOnTouched(fn: any): void { + registerOnTouched(_fn: any): void { } setDisabledState(isDisabled: boolean): void { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html index 2b841ca9f8..3bd7055728 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html @@ -19,8 +19,10 @@
widgets.battery-level.battery-level-card-style
widgets.liquid-level-card.layout
widgets.signal-strength.signal-strength-card-style
widgets.wind-speed-direction.wind-speed-direction-card-style
= (pageSize: number, page: number, filter: F) => Observable>; @@ -48,7 +49,7 @@ export class ScrollGridDatasource extends DataSource<(T | GridCellType)[]> private _subscription: Subscription; constructor(private breakpointObserver: BreakpointObserver, - private columns: ScrollGridColumns, + private columns: ScrollGridColumns | number, private fetchFunction: GridEntitiesFetchFunction, private filter: F) { super(); @@ -58,9 +59,9 @@ export class ScrollGridDatasource extends DataSource<(T | GridCellType)[]> this._viewport = (collectionViewer as any)._viewport; this._init(); - if (this.columns.breakpoints) { + if (typeof this.columns === 'object' && this.columns.breakpoints) { const breakpoints = Object.keys(this.columns.breakpoints); - this._subscription.add(this.breakpointObserver.observe(breakpoints).subscribe( + this._subscription.add(this.breakpointObserver.observe(breakpoints.map(breakpoint => resolveBreakpoint(breakpoint))).subscribe( () => { this._columnsChanged(this._detectColumns()); } @@ -119,16 +120,21 @@ export class ScrollGridDatasource extends DataSource<(T | GridCellType)[]> } private _detectColumns(): number { - let columns = this.columns.columns; - if (this.columns.breakpoints) { - for (const breakpont of Object.keys(this.columns.breakpoints)) { - if (this.breakpointObserver.isMatched(breakpont)) { - columns = this.columns.breakpoints[breakpont]; - break; + if (typeof this.columns !== 'object') { + return this.columns; + } else { + let columns = this.columns.columns; + if (this.columns.breakpoints) { + for (const breakpoint of Object.keys(this.columns.breakpoints)) { + const breakpointValue = resolveBreakpoint(breakpoint); + if (this.breakpointObserver.isMatched(breakpointValue)) { + columns = this.columns.breakpoints[breakpoint]; + break; + } } } + return columns; } - return columns; } private _init() { diff --git a/ui-ngx/src/app/shared/models/constants.ts b/ui-ngx/src/app/shared/models/constants.ts index 12469d6b90..4f904a4bf3 100644 --- a/ui-ngx/src/app/shared/models/constants.ts +++ b/ui-ngx/src/app/shared/models/constants.ts @@ -71,6 +71,13 @@ export const MediaBreakpoints = { 'md-lg': 'screen and (min-width: 960px) and (max-width: 1819px)' }; +export const resolveBreakpoint = (breakpoint: string): string => { + if (MediaBreakpoints[breakpoint]) { + return MediaBreakpoints[breakpoint]; + } + return breakpoint; +}; + export const helpBaseUrl = 'https://thingsboard.io'; export const HelpLinks = { diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index fd99eb37ee..34829dd850 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -409,8 +409,8 @@ export interface Datasource { export const datasourcesHasAggregation = (datasources?: Array): boolean => { if (datasources) { const foundDatasource = datasources.find(datasource => { - const found = datasource.dataKeys && datasource.dataKeys.find(key => key.type === DataKeyType.timeseries && - key.aggregationType && key.aggregationType !== AggregationType.NONE); + const found = datasource.dataKeys && datasource.dataKeys.find(key => key?.type === DataKeyType.timeseries && + key?.aggregationType && key.aggregationType !== AggregationType.NONE); return !!found; }); if (foundDatasource) { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index c81b6f2c11..a15108e1b4 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5338,6 +5338,27 @@ "Ok": "Ok" } }, + "doughnut": { + "total": "Total", + "layout": "Layout", + "layout-default": "Default", + "layout-with-total": "With total", + "auto-scale": "Auto scale", + "central-total-value": "Central total value", + "legend-position-top": "Top", + "legend-position-bottom": "Bottom", + "legend-position-left": "Left", + "legend-position-right": "Right", + "legend-label": "Label", + "legend-value": "Value", + "tooltip": "Tooltip", + "tooltip-value": "Value", + "tooltip-value-type-absolute": "Absolute", + "tooltip-value-type-percentage": "Percentage", + "tooltip-background-color": "Background color", + "tooltip-background-blur": "Background blur", + "doughnut-card-style": "Doughnut card style" + }, "entities-hierarchy": { "hierarchy-data-settings": "Hierarchy data settings", "relations-query-function": "Node relations query function", diff --git a/ui-ngx/src/assets/widget/doughnut/default-layout.svg b/ui-ngx/src/assets/widget/doughnut/default-layout.svg new file mode 100644 index 0000000000..8402b596fd --- /dev/null +++ b/ui-ngx/src/assets/widget/doughnut/default-layout.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/widget/doughnut/horizontal-default-layout.svg b/ui-ngx/src/assets/widget/doughnut/horizontal-default-layout.svg new file mode 100644 index 0000000000..4730aba3a0 --- /dev/null +++ b/ui-ngx/src/assets/widget/doughnut/horizontal-default-layout.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/widget/doughnut/horizontal-with-total-layout.svg b/ui-ngx/src/assets/widget/doughnut/horizontal-with-total-layout.svg new file mode 100644 index 0000000000..20cbbdbf3e --- /dev/null +++ b/ui-ngx/src/assets/widget/doughnut/horizontal-with-total-layout.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-ngx/src/assets/widget/doughnut/with-total-layout.svg b/ui-ngx/src/assets/widget/doughnut/with-total-layout.svg new file mode 100644 index 0000000000..bf3b9cf2d6 --- /dev/null +++ b/ui-ngx/src/assets/widget/doughnut/with-total-layout.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock index 37ae52a5ec..50815ce794 100644 --- a/ui-ngx/yarn.lock +++ b/ui-ngx/yarn.lock @@ -5360,6 +5360,14 @@ ecc-jsbn@~0.1.1: jsbn "~0.1.0" safer-buffer "^2.1.0" +echarts@^5.4.3: + version "5.4.3" + resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c" + integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA== + dependencies: + tslib "2.3.0" + zrender "5.4.4" + editorconfig@^0.15.3: version "0.15.3" resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5" @@ -10329,6 +10337,11 @@ tsconfig-paths@^4.1.0: minimist "^1.2.6" strip-bom "^3.0.0" +tslib@2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e" + integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg== + tslib@2.5.0, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.4.1, tslib@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" @@ -11075,3 +11088,10 @@ zone.js@~0.13.0: integrity sha512-7m3hNNyswsdoDobCkYNAy5WiUulkMd3+fWaGT9ij6iq3Zr/IwJo4RMCYPSDjT+r7tnPErmY9sZpKhWQ8S5k6XQ== dependencies: tslib "^2.3.0" + +zrender@5.4.4: + version "5.4.4" + resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.4.4.tgz#8854f1d95ecc82cf8912f5a11f86657cb8c9e261" + integrity sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw== + dependencies: + tslib "2.3.0"