dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Add widget settings forms for 'Flot pie' and ChartJS widgets

Browse Source
This commit is contained in:
Igor Kulikov 2022-04-18 11:42:13 +03:00
parent 8fdf12bb2a
commit 0c0afc9242
25 changed files with 624 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
application/src/main/data/json/system/widget_bundles/charts.json
View File

@ -23,8 +23,9 @@
"templateHtml": "<canvas id=\"barChart\"></canvas>\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 barData = {\n labels: [],\n datasets: []\n };\n \n for (var i = 0; i < self.ctx.datasources.length; i++) {\n var datasource = self.ctx.datasources[i];\n for (var d = 0; d < datasource.dataKeys.length; d++) {\n var dataKey = datasource.dataKeys[d];\n var units = dataKey.units && dataKey.units.length ? dataKey.units : self.ctx.units;\n units = units ? (' (' + units + ')') : '';\n var dataset = {\n label: dataKey.label + units,\n data: [0],\n backgroundColor: [dataKey.color],\n borderColor: [dataKey.color],\n borderWidth: 1\n }\n barData.datasets.push(dataset);\n }\n }\n\n var ctx = $('#barChart', self.ctx.$container);\n self.ctx.chart = new Chart(ctx, {\n type: 'bar',\n data: barData,\n options: {\n responsive: false,\n maintainAspectRatio: false,\n scales: {\n yAxes: [{\n ticks: {\n beginAtZero:true\n }\n }]\n }\n }\n });\n \n self.onResize();\n}\n\nself.onDataUpdated = function() {\n var c = 0;\n for (var i = 0; i < self.ctx.chart.data.datasets.length; i++) {\n var dataset = self.ctx.chart.data.datasets[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 dataset.data[0] = 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",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"showTooltip\": {\n \"title\": \"Show Tooltip\",\n \"type\": \"boolean\",\n \"default\": true\n }\n },\n \"required\": []\n },\n \"form\": [\n \"showTooltip\"\n ]\n}",
"settingsSchema": "",
"dataKeySettingsSchema": "{}\n",
"settingsDirective": "tb-chart-widget-settings",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.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\":\"#f44336\",\"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\":\"#ffc107\",\"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\":{},\"title\":\"Bars\"}"
}
},
@ -45,8 +46,9 @@
"templateHtml": "<canvas id=\"pieChart\"></canvas>\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": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"showTooltip\": {\n \"title\": \"Show Tooltip\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"borderWidth\": {\n \"title\": \"Border width\",\n \"type\": \"number\",\n \"default\": 5\n },\n \"borderColor\": {\n \"title\": \"Border color\",\n \"type\": \"string\",\n \"default\": \"#fff\"\n },\n \"legend\": {\n \"title\": \"Legend settings\",\n \"type\": \"object\",\n \"properties\": {\n \"display\": {\n \"title\": \"Display legend\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"labelsFontColor\": {\n \"title\": \"Labels font color\",\n \"type\": \"string\",\n \"default\": \"#666\"\n }\n }\n }\n },\n \"required\": []\n },\n \"form\": [\n \"showTooltip\",\n \"borderWidth\", \n {\n \"key\": \"borderColor\",\n \"type\": \"color\"\n }, \n {\n \"key\": \"legend\",\n \"items\": [\n \"legend.display\",\n {\n \"key\": \"legend.labelsFontColor\",\n \"type\": \"color\"\n }\n ]\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}}"
}
},
@ -62,10 +64,12 @@
"resources": [],
"templateHtml": "",
"templateCss": ".legend {\n font-size: 13px;\n line-height: 10px;\n}\n\n.legend table { \n border-spacing: 0px;\n border-collapse: separate;\n}\n\n.pie-label {\n font-size: 12px;\n font-family: 'Roboto';\n font-weight: bold;\n text-align: center;\n padding: 2px;\n color: white;\n}\n",
"controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'pie'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.getSettingsSchema = function() {\n return TbFlot.pieSettingsSchema();\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbFlot.pieDatakeySettingsSchema();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\nself.actionSources = function() {\n return {\n 'sliceClick': {\n name: 'widget-action.pie-slice-click',\n multiple: false\n }\n };\n}\n",
"controllerScript": "self.onInit = function() {\n self.ctx.flot = new TbFlot(self.ctx, 'pie'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.flot.update();\n}\n\nself.onResize = function() {\n self.ctx.flot.resize();\n}\n\nself.onEditModeChanged = function() {\n self.ctx.flot.checkMouseEvents();\n}\n\nself.onDestroy = function() {\n self.ctx.flot.destroy();\n}\nself.actionSources = function() {\n return {\n 'sliceClick': {\n name: 'widget-action.pie-slice-click',\n multiple: false\n }\n };\n}\n",
"settingsSchema": "{}\n",
"dataKeySettingsSchema": "{}\n",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6114638304362894,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.9955906536344441,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.9430835931647599,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"radius\":1,\"fontColor\":\"#545454\",\"fontSize\":10,\"decimals\":1,\"legend\":{\"show\":true,\"position\":\"nw\",\"labelBoxBorderColor\":\"#CCCCCC\",\"backgroundColor\":\"#F0F0F0\",\"backgroundOpacity\":0.85},\"innerRadius\":0,\"showLabels\":true,\"showPercentages\":true,\"stroke\":{\"width\":5},\"tilt\":1,\"animatedPie\":false},\"title\":\"Pie - Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}"
"settingsDirective": "tb-flot-pie-widget-settings",
"dataKeySettingsDirective": "tb-flot-pie-key-settings",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.6114638304362894,\"funcBody\":\"var value = (prevValue-20) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+20;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Third\",\"color\":\"#f44336\",\"settings\":{},\"_hash\":0.9955906536344441,\"funcBody\":\"var value = (prevValue-40) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+40;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fourth\",\"color\":\"#ffc107\",\"settings\":{},\"_hash\":0.9430835931647599,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"radius\":1,\"fontColor\":\"#545454\",\"fontSize\":10,\"decimals\":1,\"legend\":{\"show\":true,\"position\":\"nw\",\"labelBoxBorderColor\":\"#CCCCCC\",\"backgroundColor\":\"#F0F0F0\",\"backgroundOpacity\":0.85},\"innerRadius\":0,\"showLabels\":true,\"showPercentages\":true,\"stroke\":{\"width\":5},\"tilt\":1,\"animatedPie\":false},\"title\":\"Pie- Flot\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400}}"
}
},
{
@ -85,8 +89,9 @@
"templateHtml": "<canvas id=\"pieChart\"></canvas>\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 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 var borderColor = tinycolor(dataKey.color).darken();\n dataset.backgroundColor.push(dataKey.color);\n dataset.borderColor.push('#fff');\n dataset.borderWidth.push(5);\n dataset.hoverBackgroundColor.push(hoverBackgroundColor.toRgbString());\n }\n\n var ctx = $('#pieChart', self.ctx.$container);\n self.ctx.chart = new Chart(ctx, {\n type: 'pie',\n data: pieData,\n options: {\n responsive: false,\n maintainAspectRatio: false\n }\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",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"showTooltip\": {\n \"title\": \"Show Tooltip\",\n \"type\": \"boolean\",\n \"default\": true\n }\n },\n \"required\": []\n },\n \"form\": [\n \"showTooltip\"\n ]\n}",
"settingsSchema": "",
"dataKeySettingsSchema": "{}\n",
"settingsDirective": "tb-chart-widget-settings",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.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\":\"#f44336\",\"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\":\"#ffc107\",\"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\":{},\"title\":\"Pie - Chart.js\"}"
}
},
@ -107,8 +112,9 @@
"templateHtml": "<canvas id=\"pieChart\"></canvas>\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 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 var borderColor = tinycolor(dataKey.color).darken();\n dataset.backgroundColor.push(dataKey.color);\n dataset.borderColor.push('#fff');\n dataset.borderWidth.push(5);\n dataset.hoverBackgroundColor.push(hoverBackgroundColor.toRgbString());\n }\n \n var floatingPoint;\n if (typeof self.ctx.decimals !== 'undefined' && self.ctx.decimals !== null) {\n floatingPoint = self.ctx.widget.config.decimals;\n } else {\n floatingPoint = 2;\n }\n\n\n var ctx = $('#pieChart', self.ctx.$container);\n self.ctx.chart = new Chart(ctx, {\n type: 'polarArea',\n data: pieData,\n options: {\n responsive: false,\n maintainAspectRatio: false,\n scale: {\n ticks: {\n callback: function(tick) {\n \treturn tick.toFixed(floatingPoint);\n }\n }\n }\n }\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 if (self.ctx.height >= 70) {\n try {\n self.ctx.chart.resize();\n } catch (e) {}\n }\n}\n\nself.onDestroy = function() {\n self.ctx.chart.destroy();\n self.ctx.chart = null;\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"showTooltip\": {\n \"title\": \"Show Tooltip\",\n \"type\": \"boolean\",\n \"default\": true\n }\n },\n \"required\": []\n },\n \"form\": [\n \"showTooltip\"\n ]\n}",
"settingsSchema": "",
"dataKeySettingsSchema": "{}\n",
"settingsDirective": "tb-chart-widget-settings",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.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\":\"#f44336\",\"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\":\"#ffc107\",\"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;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Fifth\",\"color\":\"#607d8b\",\"settings\":{},\"_hash\":0.2074391823443591,\"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\":{},\"title\":\"Polar Area\"}"
}
},
@ -129,8 +135,9 @@
"templateHtml": "<canvas id=\"radarChart\"></canvas>\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 barData = {\n labels: [],\n datasets: []\n };\n\n var backgroundColor = tinycolor(self.ctx.data[0].dataKey.color);\n backgroundColor.setAlpha(0.2);\n var borderColor = tinycolor(self.ctx.data[0].dataKey.color);\n borderColor.setAlpha(1);\n var dataset = {\n label: self.ctx.datasources[0].name,\n data: [],\n backgroundColor: backgroundColor.toRgbString(),\n borderColor: borderColor.toRgbString(),\n pointBackgroundColor: borderColor.toRgbString(),\n pointBorderColor: borderColor.darken().toRgbString(),\n borderWidth: 1\n }\n \n barData.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 barData.labels.push(dataKey.label + units);\n dataset.data.push(0);\n }\n \n var floatingPoint;\n if (typeof self.ctx.decimals !== 'undefined' && self.ctx.decimals !== null) {\n floatingPoint = self.ctx.widget.config.decimals;\n } else {\n floatingPoint = 2;\n }\n\n var ctx = $('#radarChart', self.ctx.$container);\n self.ctx.chart = new Chart(ctx, {\n type: 'radar',\n data: barData,\n options: {\n responsive: false,\n maintainAspectRatio: false,\n scale: {\n ticks: {\n callback: function(tick) {\n \treturn tick.toFixed(floatingPoint);\n }\n }\n }\n }\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 if (self.ctx.height >= 70) {\n self.ctx.chart.resize();\n }\n}\n\nself.onDestroy = function() {\n self.ctx.chart.destroy();\n self.ctx.chart = null;\n}\n",
"settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EntitiesTableSettings\",\n \"properties\": {\n \"showTooltip\": {\n \"title\": \"Show Tooltip\",\n \"type\": \"boolean\",\n \"default\": true\n }\n },\n \"required\": []\n },\n \"form\": [\n \"showTooltip\"\n ]\n}",
"settingsSchema": "",
"dataKeySettingsSchema": "{}\n",
"settingsDirective": "tb-chart-widget-settings",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = (prevValue-50) + Math.random() * 2 - 1;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value+50;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#4caf50\",\"settings\":{},\"_hash\":0.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\":\"#f44336\",\"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\":\"#ffc107\",\"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\":{},\"title\":\"Radar\"}"
}
},

119
ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.models.ts
View File

@ -241,122 +241,3 @@ export interface TbFlotLatestKeySettings {
thresholdLineWidth: number;
thresholdColor: string;
}
export const flotPieSettingsSchema: JsonSettingsSchema = {
schema: {
type: 'object',
title: 'Settings',
properties: {
radius: {
title: 'Radius',
type: 'number',
default: 1
},
innerRadius: {
title: 'Inner radius',
type: 'number',
default: 0
},
tilt: {
title: 'Tilt',
type: 'number',
default: 1
},
animatedPie: {
title: 'Enable pie animation (experimental)',
type: 'boolean',
default: false
},
stroke: {
title: 'Stroke',
type: 'object',
properties: {
color: {
title: 'Color',
type: 'string',
default: ''
},
width: {
title: 'Width (pixels)',
type: 'number',
default: 0
}
}
},
showTooltip: {
title: 'Show Tooltip',
type: 'boolean',
default: true,
},
showLabels: {
title: 'Show labels',
type: 'boolean',
default: false
},
fontColor: {
title: 'Font color',
type: 'string',
default: '#545454'
},
fontSize: {
title: 'Font size',
type: 'number',
default: 10
}
},
required: []
},
form: [
'radius',
'innerRadius',
'animatedPie',
'tilt',
{
key: 'stroke',
items: [
{
key: 'stroke.color',
type: 'color'
},
'stroke.width'
]
},
'showTooltip',
'showLabels',
{
key: 'fontColor',
type: 'color'
},
'fontSize'
]
};
export const flotPieDatakeySettingsSchema: JsonSettingsSchema = {
schema: {
type: 'object',
title: 'DataKeySettings',
properties: {
hideDataByDefault: {
title: 'Data is hidden by default',
type: 'boolean',
default: false
},
disableDataHiding: {
title: 'Disable data hiding',
type: 'boolean',
default: false
},
removeFromLegend: {
title: 'Remove datakey from legend',
type: 'boolean',
default: false
}
},
required: []
},
form: [
'hideDataByDefault',
'disableDataHiding',
'removeFromLegend'
]
};

13
ui-ngx/src/app/modules/home/components/widget/lib/flot-widget.ts
View File

@ -38,8 +38,6 @@ import {
} from '@app/shared/models/widget.models';
import {
ChartType,
flotPieDatakeySettingsSchema,
flotPieSettingsSchema,
TbFlotAxisOptions,
TbFlotHoverInfo,
TbFlotKeySettings, TbFlotLatestKeySettings,
@ -65,9 +63,6 @@ import Timeout = NodeJS.Timeout;
const tinycolor = tinycolor_;
const moment = moment_;
const flotPieSettingsSchemaValue = flotPieSettingsSchema;
const flotPieDatakeySettingsSchemaValue = flotPieDatakeySettingsSchema;
export class TbFlot {
private readonly utils: UtilsService;
@ -130,14 +125,6 @@ export class TbFlot {
private pieAnimationLastTime: number;
private pieAnimationCaf: CancelAnimationFrame;
static pieSettingsSchema(): JsonSettingsSchema {
return flotPieSettingsSchemaValue;
}
static pieDatakeySettingsSchema(): JsonSettingsSchema {
return flotPieDatakeySettingsSchemaValue;
}
constructor(private ctx: WidgetContext, private readonly chartType: ChartType) {
this.chartType = this.chartType || 'line';
this.settings = ctx.settings as TbFlotSettings;

1
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
View File

@ -53,6 +53,7 @@
</mat-form-field>
<tb-color-input
formControlName="defaultBackgroundColor"
icon="format_color_fill"
label="{{ 'widgets.dashboard-state.default-background-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-slide-toggle class="mat-slide" formControlName="syncParentStateParams">

1
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
View File

@ -60,6 +60,7 @@
</fieldset>
<tb-color-input
formControlName="backgroundColor"
icon="format_color_fill"
label="{{ 'widgets.label-widget.background-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<fieldset class="fields-group">

25
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.html Normal file
View File

@ -0,0 +1,25 @@
<!--
Copyright © 2016-2022 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.
-->
<section class="tb-widget-settings" [formGroup]="chartWidgetSettingsForm" fxLayout="column">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.chart.common-settings</legend>
<mat-slide-toggle formControlName="showTooltip" class="slide-block">
{{ 'widgets.chart.show-tooltip' | translate }}
</mat-slide-toggle>
</fieldset>
</section>

52
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/chart-widget-settings.component.ts Normal file
View File

@ -0,0 +1,52 @@
///
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@Component({
selector: 'tb-chart-widget-settings',
templateUrl: './chart-widget-settings.component.html',
styleUrls: ['./../widget-settings.scss']
})
export class ChartWidgetSettingsComponent extends WidgetSettingsComponent {
chartWidgetSettingsForm: FormGroup;
constructor(protected store: Store<AppState>,
private fb: FormBuilder) {
super(store);
}
protected settingsForm(): FormGroup {
return this.chartWidgetSettingsForm;
}
protected defaultSettings(): WidgetSettings {
return {
showTooltip: true
};
}
protected onSettingsSet(settings: WidgetSettings) {
this.chartWidgetSettingsForm = this.fb.group({
showTooltip: [settings.showTooltip, []]
});
}
}

64
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.html Normal file
View File

@ -0,0 +1,64 @@
<!--
Copyright © 2016-2022 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.
-->
<section class="tb-widget-settings" [formGroup]="doughnutChartWidgetSettingsForm" fxLayout="column">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.chart.common-settings</legend>
<mat-slide-toggle formControlName="showTooltip" class="slide-block">
{{ 'widgets.chart.show-tooltip' | translate }}
</mat-slide-toggle>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.chart.border-settings</legend>
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.chart.border-width</mat-label>
<input matInput type="number" min="0" formControlName="borderWidth">
</mat-form-field>
<tb-color-input fxFlex
formControlName="borderColor"
icon="format_color_fill"
label="{{ 'widgets.chart.border-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
</fieldset>
<fieldset class="fields-group fields-group-slider" formGroupName="legend">
<legend class="group-title" translate>widgets.chart.legend-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="doughnutChartWidgetSettingsForm.get('legend.display').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="display" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widgets.chart.display-legend' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column">
<tb-color-input fxFlex
formControlName="labelsFontColor"
icon="format_color_fill"
label="{{ 'widgets.chart.labels-font-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
</ng-template>
</mat-expansion-panel>
</fieldset>
</section>

87
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component.ts Normal file
View File

@ -0,0 +1,87 @@
///
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@Component({
selector: 'tb-doughnut-chart-widget-settings',
templateUrl: './doughnut-chart-widget-settings.component.html',
styleUrls: ['./../widget-settings.scss']
})
export class DoughnutChartWidgetSettingsComponent extends WidgetSettingsComponent {
doughnutChartWidgetSettingsForm: FormGroup;
constructor(protected store: Store<AppState>,
private fb: FormBuilder) {
super(store);
}
protected settingsForm(): FormGroup {
return this.doughnutChartWidgetSettingsForm;
}
protected defaultSettings(): WidgetSettings {
return {
showTooltip: true,
borderWidth: 5,
borderColor: '#fff',
legend: {
display: true,
labelsFontColor: '#666'
}
};
}
protected onSettingsSet(settings: WidgetSettings) {
this.doughnutChartWidgetSettingsForm = this.fb.group({
// Common settings
showTooltip: [settings.showTooltip, []],
// Border settings
borderWidth: [settings.borderWidth, [Validators.min(0)]],
borderColor: [settings.borderColor, []],
// Legend settings
legend: this.fb.group({
display: [settings.legend?.display, []],
labelsFontColor: [settings.legend?.labelsFontColor, []]
})
});
}
protected validatorTriggers(): string[] {
return ['legend.display'];
}
protected updateValidators(emitEvent: boolean) {
const displayLegend: boolean = this.doughnutChartWidgetSettingsForm.get('legend.display').value;
if (displayLegend) {
this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').enable();
} else {
this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').disable();
}
this.doughnutChartWidgetSettingsForm.get('legend.labelsFontColor').updateValueAndValidity({emitEvent});
}
}

1
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-key-settings.component.html
View File

@ -229,6 +229,7 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>

1
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-latest-key-settings.component.html
View File

@ -38,6 +38,7 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="thresholdColor"
icon="format_color_fill"
label="{{ 'widgets.chart.threshold-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>

31
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.html Normal file
View File

@ -0,0 +1,31 @@
<!--
Copyright © 2016-2022 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.
-->
<section class="tb-widget-settings" [formGroup]="flotPieKeySettingsForm" fxLayout="column">
<fieldset class="fields-group" fxLayout="column">
<legend class="group-title" translate>widgets.chart.common-settings</legend>
<mat-checkbox formControlName="hideDataByDefault" style="margin-bottom: 16px;">
{{ 'widgets.chart.data-is-hidden-by-default' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="disableDataHiding" style="margin-bottom: 16px;">
{{ 'widgets.chart.disable-data-hiding' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="removeFromLegend" style="margin-bottom: 16px;">
{{ 'widgets.chart.remove-from-legend' | translate }}
</mat-checkbox>
</fieldset>
</section>

60
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-key-settings.component.ts Normal file
View File

@ -0,0 +1,60 @@
///
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@Component({
selector: 'tb-flot-pie-key-settings',
templateUrl: './flot-pie-key-settings.component.html',
styleUrls: ['./../widget-settings.scss']
})
export class FlotPieKeySettingsComponent extends WidgetSettingsComponent {
flotPieKeySettingsForm: FormGroup;
constructor(protected store: Store<AppState>,
private fb: FormBuilder) {
super(store);
}
protected settingsForm(): FormGroup {
return this.flotPieKeySettingsForm;
}
protected defaultSettings(): WidgetSettings {
return {
hideDataByDefault: false,
disableDataHiding: false,
removeFromLegend: false
};
}
protected onSettingsSet(settings: WidgetSettings) {
this.flotPieKeySettingsForm = this.fb.group({
// Common settings
hideDataByDefault: [settings.hideDataByDefault, []],
disableDataHiding: [settings.disableDataHiding, []],
removeFromLegend: [settings.removeFromLegend, []]
});
}
}

62
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html Normal file
View File

@ -0,0 +1,62 @@
<!--
Copyright © 2016-2022 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.
-->
<section class="tb-widget-settings" [formGroup]="flotPieWidgetSettingsForm" fxLayout="column">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.chart.common-pie-settings</legend>
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.chart.radius</mat-label>
<input matInput type="number" min="0" formControlName="radius">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.chart.inner-radius</mat-label>
<input matInput type="number" min="0" formControlName="innerRadius">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.chart.tilt</mat-label>
<input matInput type="number" min="0" formControlName="tilt">
</mat-form-field>
</section>
<mat-slide-toggle formControlName="showLabels" class="slide-block">
{{ 'widgets.chart.show-labels' | translate }}
</mat-slide-toggle>
<mat-slide-toggle formControlName="showTooltip" class="slide-block">
{{ 'widgets.chart.show-tooltip' | translate }}
</mat-slide-toggle>
</fieldset>
<fieldset class="fields-group" formGroupName="stroke">
<legend class="group-title" translate>widgets.chart.stroke-settings</legend>
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.chart.width-pixels</mat-label>
<input matInput type="number" min="0" formControlName="width">
</mat-form-field>
<tb-color-input fxFlex
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.chart.animation-settings</legend>
<mat-slide-toggle formControlName="animatedPie" class="slide-block">
{{ 'widgets.chart.animated-pie' | translate }}
</mat-slide-toggle>
</fieldset>
</section>

79
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.ts Normal file
View File

@ -0,0 +1,79 @@
///
/// Copyright © 2016-2022 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 { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@Component({
selector: 'tb-flot-pie-widget-settings',
templateUrl: './flot-pie-widget-settings.component.html',
styleUrls: ['./../widget-settings.scss']
})
export class FlotPieWidgetSettingsComponent extends WidgetSettingsComponent {
flotPieWidgetSettingsForm: FormGroup;
constructor(protected store: Store<AppState>,
private fb: FormBuilder) {
super(store);
}
protected settingsForm(): FormGroup {
return this.flotPieWidgetSettingsForm;
}
protected defaultSettings(): WidgetSettings {
return {
radius: 1,
innerRadius: 0,
tilt: 1,
stroke: {
color: '',
width: 0
},
showLabels: false,
showTooltip: true,
animatedPie: false
};
}
protected onSettingsSet(settings: WidgetSettings) {
this.flotPieWidgetSettingsForm = this.fb.group({
// Common pie settings
radius: [settings.radius, [Validators.min(0)]],
innerRadius: [settings.innerRadius, [Validators.min(0)]],
tilt: [settings.tilt, [Validators.min(0)]],
// Stroke settings
stroke: this.fb.group({
color: [settings.stroke?.color, []],
width: [settings.stroke?.width, [Validators.min(0)]]
}),
showLabels: [settings.showLabels, []],
showTooltip: [settings.showTooltip, []],
animatedPie: [settings.animatedPie, []],
});
}
}

1
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-threshold.component.html
View File

@ -48,6 +48,7 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-widget-settings.component.html
View File

@ -57,6 +57,7 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="fontColor"
icon="format_color_fill"
label="{{ 'widgets.chart.default-font-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
@ -115,14 +116,17 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.chart.primary-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="backgroundColor"
icon="format_color_fill"
label="{{ 'widgets.chart.background-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="tickColor"
icon="format_color_fill"
label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</fieldset>
@ -149,6 +153,7 @@
<ng-template matExpansionPanelContent>
<tb-color-input fxFlex
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</ng-template>
@ -188,6 +193,7 @@
<ng-template matExpansionPanelContent>
<tb-color-input fxFlex
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px">

123
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
View File

@ -16,60 +16,71 @@
-->
<section [formGroup]="widgetFontFormGroup" fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.widget-font.font-family</mat-label>
<input matInput formControlName="family">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>{{ sizeTitle }}</mat-label>
<input matInput type="number" min="1" step="1" formControlName="size">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.widget-font.font-style</mat-label>
<mat-select formControlName="style">
<mat-option [value]="'normal'">
{{ 'widgets.widget-font.font-style-normal' | translate }}
</mat-option>
<mat-option [value]="'italic'">
{{ 'widgets.widget-font.font-style-italic' | translate }}
</mat-option>
<mat-option [value]="'oblique'">
{{ 'widgets.widget-font.font-style-oblique' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.widget-font.font-weight</mat-label>
<mat-select formControlName="weight">
<mat-option [value]="'normal'">
{{ 'widgets.widget-font.font-weight-normal' | translate }}
</mat-option>
<mat-option [value]="'bold'">
{{ 'widgets.widget-font.font-weight-bold' | translate }}
</mat-option>
<mat-option [value]="'bolder'">
{{ 'widgets.widget-font.font-weight-bolder' | translate }}
</mat-option>
<mat-option [value]="'lighter'">
{{ 'widgets.widget-font.font-weight-lighter' | translate }}
</mat-option>
<mat-option [value]="'100'">100</mat-option>
<mat-option [value]="'200'">200</mat-option>
<mat-option [value]="'300'">300</mat-option>
<mat-option [value]="'400'">400</mat-option>
<mat-option [value]="'500'">500</mat-option>
<mat-option [value]="'600'">600</mat-option>
<mat-option [value]="'700'">700</mat-option>
<mat-option [value]="'800'">800</mat-option>
<mat-option [value]="'900'">900</mat-option>
</mat-select>
</mat-form-field>
<tb-color-input
formControlName="color"
label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input *ngIf="hasShadowColor"
formControlName="shadowColor"
label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.widget-font.font-family</mat-label>
<input matInput formControlName="family">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>{{ sizeTitle }}</mat-label>
<input matInput type="number" min="1" step="1" formControlName="size">
</mat-form-field>
</section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.widget-font.font-style</mat-label>
<mat-select formControlName="style">
<mat-option [value]="'normal'">
{{ 'widgets.widget-font.font-style-normal' | translate }}
</mat-option>
<mat-option [value]="'italic'">
{{ 'widgets.widget-font.font-style-italic' | translate }}
</mat-option>
<mat-option [value]="'oblique'">
{{ 'widgets.widget-font.font-style-oblique' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.widget-font.font-weight</mat-label>
<mat-select formControlName="weight">
<mat-option [value]="'normal'">
{{ 'widgets.widget-font.font-weight-normal' | translate }}
</mat-option>
<mat-option [value]="'bold'">
{{ 'widgets.widget-font.font-weight-bold' | translate }}
</mat-option>
<mat-option [value]="'bolder'">
{{ 'widgets.widget-font.font-weight-bolder' | translate }}
</mat-option>
<mat-option [value]="'lighter'">
{{ 'widgets.widget-font.font-weight-lighter' | translate }}
</mat-option>
<mat-option [value]="'100'">100</mat-option>
<mat-option [value]="'200'">200</mat-option>
<mat-option [value]="'300'">300</mat-option>
<mat-option [value]="'400'">400</mat-option>
<mat-option [value]="'500'">500</mat-option>
<mat-option [value]="'600'">600</mat-option>
<mat-option [value]="'700'">700</mat-option>
<mat-option [value]="'800'">800</mat-option>
<mat-option [value]="'900'">900</mat-option>
</mat-select>
</mat-form-field>
</section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input
fxFlex
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input
*ngIf="hasShadowColor"
fxFlex
formControlName="shadowColor"
icon="format_color_fill"
label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
</section>

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html
View File

@ -39,6 +39,7 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorMajorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
@ -48,6 +49,7 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorMinorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
@ -63,6 +65,7 @@
<legend class="group-title" translate>widgets.gauge.plate-settings</legend>
<tb-color-input fxFlex
formControlName="colorPlate"
icon="format_color_fill"
label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-slide-toggle formControlName="showBorder" class="slide-block">
@ -71,6 +74,7 @@
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input fxFlex
formControlName="colorBorder"
icon="format_color_fill"
label="{{ 'widgets.gauge.border-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-form-field fxFlex class="mat-block">
@ -88,10 +92,12 @@
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input fxFlex
formControlName="colorNeedle"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorNeedleCircle"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-circle-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>

17
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html
View File

@ -26,6 +26,7 @@
</ng-container>
<tb-color-input
formControlName="defaultColor"
icon="format_color_fill"
label="{{ 'widgets.gauge.default-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<fieldset class="fields-group">
@ -47,6 +48,7 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorMajorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.major-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
@ -57,6 +59,7 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorMinorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.minor-ticks-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
@ -127,20 +130,24 @@
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input fxFlex
formControlName="colorValueBoxRect"
icon="format_color_fill"
label="{{ 'widgets.gauge.value-box-rect-stroke-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorValueBoxRectEnd"
icon="format_color_fill"
label="{{ 'widgets.gauge.value-box-rect-stroke-color-end' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input fxFlex
formControlName="colorValueBoxBackground"
icon="format_color_fill"
label="{{ 'widgets.gauge.value-box-background-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorValueBoxShadow"
icon="format_color_fill"
label="{{ 'widgets.gauge.value-box-shadow-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
@ -152,6 +159,7 @@
<legend class="group-title" translate>widgets.gauge.plate-settings</legend>
<tb-color-input fxFlex
formControlName="colorPlate"
icon="format_color_fill"
label="{{ 'widgets.gauge.plate-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-slide-toggle formControlName="showBorder">
@ -163,20 +171,24 @@
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input fxFlex
formControlName="colorNeedle"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorNeedleEnd"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color-end' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input fxFlex
formControlName="colorNeedleShadowUp"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color-shadow-up' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorNeedleShadowDown"
icon="format_color_fill"
label="{{ 'widgets.gauge.needle-color-shadow-down' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
@ -309,26 +321,31 @@
</mat-form-field>
<tb-color-input fxFlex
formControlName="colorBarStroke"
icon="format_color_fill"
label="{{ 'widgets.gauge.bar-stroke-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input fxFlex
formControlName="colorBar"
icon="format_color_fill"
label="{{ 'widgets.gauge.bar-background-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorBarEnd"
icon="format_color_fill"
label="{{ 'widgets.gauge.bar-background-color-end' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>
<section fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<tb-color-input fxFlex
formControlName="colorBarProgress"
icon="format_color_fill"
label="{{ 'widgets.gauge.progress-bar-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<tb-color-input fxFlex
formControlName="colorBarProgressEnd"
icon="format_color_fill"
label="{{ 'widgets.gauge.progress-bar-color-end' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>

4
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html
View File

@ -51,6 +51,7 @@
</mat-form-field>
<tb-color-input
formControlName="defaultColor"
icon="format_color_fill"
label="{{ 'widgets.gauge.default-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</fieldset>
@ -77,6 +78,7 @@
<legend class="group-title" translate>widgets.gauge.bar-color-settings</legend>
<tb-color-input
formControlName="gaugeColor"
icon="format_color_fill"
label="{{ 'widgets.gauge.bar-background-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<mat-slide-toggle class="slide-block" formControlName="useFixedLevelColor">
@ -95,6 +97,7 @@
</div>
<tb-color-input fxFlex
[formControl]="levelColorControl"
icon="format_color_fill"
label="{{ 'widgets.gauge.color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<button mat-icon-button style="min-width: 40px;"
@ -278,6 +281,7 @@
</mat-form-field>
<tb-color-input
formControlName="colorTicks"
icon="format_color_fill"
label="{{ 'widgets.gauge.tick-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
<fieldset class="fields-group">

1
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/fixed-color-level.component.html
View File

@ -51,6 +51,7 @@
<tb-color-input
required
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.gauge.color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>

1
ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html
View File

@ -52,6 +52,7 @@
</section>
<tb-color-input
formControlName="color"
icon="format_color_fill"
label="{{ 'widgets.gauge.highlight-color' | translate }}" openOnInput colorClearButton>
</tb-color-input>
</section>

30
ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
View File

@ -94,6 +94,18 @@ import {
import {
FlotLatestKeySettingsComponent
} from '@home/components/widget/lib/settings/chart/flot-latest-key-settings.component';
import {
FlotPieWidgetSettingsComponent
} from '@home/components/widget/lib/settings/chart/flot-pie-widget-settings.component';
import {
FlotPieKeySettingsComponent
} from '@home/components/widget/lib/settings/chart/flot-pie-key-settings.component';
import {
ChartWidgetSettingsComponent
} from '@home/components/widget/lib/settings/chart/chart-widget-settings.component';
import {
DoughnutChartWidgetSettingsComponent
} from '@home/components/widget/lib/settings/chart/doughnut-chart-widget-settings.component';
@NgModule({
declarations: [
@ -129,7 +141,11 @@ import {
FlotKeySettingsComponent,
FlotLineKeySettingsComponent,
FlotBarKeySettingsComponent,
FlotLatestKeySettingsComponent
FlotLatestKeySettingsComponent,
FlotPieWidgetSettingsComponent,
FlotPieKeySettingsComponent,
ChartWidgetSettingsComponent,
DoughnutChartWidgetSettingsComponent
],
imports: [
CommonModule,
@ -169,7 +185,11 @@ import {
FlotKeySettingsComponent,
FlotLineKeySettingsComponent,
FlotBarKeySettingsComponent,
FlotLatestKeySettingsComponent
FlotLatestKeySettingsComponent,
FlotPieWidgetSettingsComponent,
FlotPieKeySettingsComponent,
ChartWidgetSettingsComponent,
DoughnutChartWidgetSettingsComponent
]
})
export class WidgetSettingsModule {
@ -198,5 +218,9 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
'tb-flot-bar-widget-settings': FlotBarWidgetSettingsComponent,
'tb-flot-line-key-settings': FlotLineKeySettingsComponent,
'tb-flot-bar-key-settings': FlotBarKeySettingsComponent,
'tb-flot-latest-key-settings': FlotLatestKeySettingsComponent
'tb-flot-latest-key-settings': FlotLatestKeySettingsComponent,
'tb-flot-pie-widget-settings': FlotPieWidgetSettingsComponent,
'tb-flot-pie-key-settings': FlotPieKeySettingsComponent,
'tb-chart-widget-settings': ChartWidgetSettingsComponent,
'tb-doughnut-chart-widget-settings': DoughnutChartWidgetSettingsComponent
};

17
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3275,7 +3275,22 @@
"threshold-settings": "Threshold settings",
"use-as-threshold": "Use key value as threshold",
"threshold-line-width": "Threshold line width",
"threshold-color": "Threshold color"
"threshold-color": "Threshold color",
"common-pie-settings": "Common pie settings",
"radius": "Radius",
"inner-radius": "Inner radius",
"tilt": "Tilt",
"stroke-settings": "Stroke settings",
"width-pixels": "Width (pixels)",
"show-labels": "Show labels",
"animation-settings": "Animation settings",
"animated-pie": "Enable pie animation (experimental)",
"border-settings": "Border settings",
"border-width": "Border width",
"border-color": "Border color",
"legend-settings": "Legend settings",
"display-legend": "Display legend",
"labels-font-color": "Labels font color"
},
"dashboard-state": {
"dashboard-state-settings": "Dashboard state settings",