From 914264b031cc415047f50825649f89eab64028b0 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 17 Jul 2017 20:34:56 +0300 Subject: [PATCH] TB-70: Improve timeseries table widget. Fix numeric value conversion for latest values. --- .../json/system/widget_bundles/cards.json | 4 +-- ui/src/app/api/datasource.service.js | 2 +- .../components/widget/widget.controller.js | 4 +-- .../app/widget/lib/timeseries-table-widget.js | 25 ++++++++++--------- 4 files changed, 18 insertions(+), 17 deletions(-) diff --git a/application/src/main/data/json/system/widget_bundles/cards.json b/application/src/main/data/json/system/widget_bundles/cards.json index c341f24c1f..f5ff706cb6 100644 --- a/application/src/main/data/json/system/widget_bundles/cards.json +++ b/application/src/main/data/json/system/widget_bundles/cards.json @@ -109,9 +109,9 @@ "sizeX": 8, "sizeY": 6.5, "resources": [], - "templateHtml": "\n", + "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n \n var scope = self.ctx.$scope;\n var id = self.ctx.$scope.$injector.get('utils').guid();\n\n scope.config = {\n settings: self.ctx.settings,\n widgetConfig: self.ctx.widgetConfig\n }\n\n scope.datasources = self.ctx.datasources;\n scope.data = self.ctx.data;\n scope.tableId = \"table-\"+id;\n \n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.data = self.ctx.data;\n self.ctx.$scope.$broadcast('timeseries-table-data-updated', self.ctx.$scope.tableId);\n}\n\nself.onDestroy = function() {\n}", + "controllerScript": "self.onInit = function() {\n var scope = self.ctx.$scope;\n var id = self.ctx.$scope.$injector.get('utils').guid();\n scope.tableId = \"table-\"+id;\n scope.ctx = self.ctx;\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.$broadcast('timeseries-table-data-updated', self.ctx.$scope.tableId);\n}\n\nself.onDestroy = function() {\n}", "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"TimeseriesTableSettings\",\n \"properties\": {\n \"showTimestamp\": {\n \"title\": \"Display timestamp column\",\n \"type\": \"boolean\",\n \"default\": true\n }\n },\n \"required\": []\n },\n \"form\": [\n \"showTimestamp\"\n ]\n}", "dataKeySettingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"DataKeySettings\",\n \"properties\": {\n \"useCellStyleFunction\": {\n \"title\": \"Use cell style function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellStyleFunction\": {\n \"title\": \"Cell style function: f(value)\",\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"useCellContentFunction\": {\n \"title\": \"Use cell content function\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"cellContentFunction\": {\n \"title\": \"Cell content function: f(value, rowData, filter)\",\n \"type\": \"string\",\n \"default\": \"\"\n }\n },\n \"required\": []\n },\n \"form\": [\n \"useCellStyleFunction\",\n {\n \"key\": \"cellStyleFunction\",\n \"type\": \"javascript\"\n },\n \"useCellContentFunction\",\n {\n \"key\": \"cellContentFunction\",\n \"type\": \"javascript\"\n }\n ]\n}", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature °C\",\"color\":\"#2196f3\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n var percent = (value + 60)/120 * 100;\\n var color = tinycolor.mix('blue', 'red', amount = percent);\\n color.setAlpha(.5);\\n return {\\n paddingLeft: '20px',\\n color: '#ffffff',\\n background: color.toRgbString(),\\n fontSize: '18px'\\n };\\n} else {\\n return {};\\n}\"},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Humidity, %\",\"color\":\"#ffc107\",\"settings\":{\"useCellStyleFunction\":true,\"cellStyleFunction\":\"if (value) {\\n var percent = value;\\n var backgroundColor = tinycolor('blue');\\n backgroundColor.setAlpha(value/100);\\n var color = 'blue';\\n if (value > 50) {\\n color = 'white';\\n }\\n \\n return {\\n paddingLeft: '20px',\\n color: color,\\n background: backgroundColor.toRgbString(),\\n fontSize: '18px'\\n };\\n} else {\\n return {};\\n}\",\"useCellContentFunction\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 20 - 10;\\nvar multiplier = Math.pow(10, 1 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < 5) {\\n\\tvalue = 5;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":60000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"showTimestamp\":true},\"title\":\"Timeseries table\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":false,\"showLegend\":false}" diff --git a/ui/src/app/api/datasource.service.js b/ui/src/app/api/datasource.service.js index bfa31849f2..a45eb30c7a 100644 --- a/ui/src/app/api/datasource.service.js +++ b/ui/src/app/api/datasource.service.js @@ -589,7 +589,7 @@ function DatasourceSubscription(datasourceSubscription, telemetryWebsocketServic if (keyData.length > 0) { series = keyData[0]; time = series[0]; - value = series[1]; + value = convertValue(series[1]); if (dataKey.postFunc) { value = dataKey.postFunc(time, value, prevSeries[1]); } diff --git a/ui/src/app/components/widget/widget.controller.js b/ui/src/app/components/widget/widget.controller.js index 7ed79aece9..1efbf7f8ea 100644 --- a/ui/src/app/components/widget/widget.controller.js +++ b/ui/src/app/components/widget/widget.controller.js @@ -814,7 +814,7 @@ export default function WidgetController($scope, $state, $timeout, $window, $ele function formatValue(value, dec, units) { if (angular.isDefined(value) && value !== null && isNumeric(value)) { - var formatted = value; + var formatted = Number(value); if (angular.isDefined(dec)) { formatted = formatted.toFixed(dec); } @@ -824,7 +824,7 @@ export default function WidgetController($scope, $state, $timeout, $window, $ele } return formatted; } else { - return ''; + return value; } } diff --git a/ui/src/app/widget/lib/timeseries-table-widget.js b/ui/src/app/widget/lib/timeseries-table-widget.js index c55c519879..0c23e027fe 100644 --- a/ui/src/app/widget/lib/timeseries-table-widget.js +++ b/ui/src/app/widget/lib/timeseries-table-widget.js @@ -36,9 +36,7 @@ function TimeseriesTableWidget() { scope: true, bindToController: { tableId: '=', - config: '=', - datasources: '=', - data: '=' + ctx: '=' }, controller: TimeseriesTableWidgetController, controllerAs: 'vm', @@ -53,10 +51,12 @@ function TimeseriesTableWidgetController($element, $scope, $filter) { vm.sources = []; vm.sourceIndex = 0; - $scope.$watch('vm.config', function() { - if (vm.config) { - vm.settings = vm.config.settings; - vm.widgetConfig = vm.config.widgetConfig; + $scope.$watch('vm.ctx', function() { + if (vm.ctx) { + vm.settings = vm.ctx.settings; + vm.widgetConfig = vm.ctx.widgetConfig; + vm.data = vm.ctx.data; + vm.datasources = vm.ctx.datasources; initialize(); } }); @@ -119,11 +119,8 @@ function TimeseriesTableWidgetController($element, $scope, $filter) { } return hash; } - } - - $scope.$watch('vm.datasources', function() { updateDatasources(); - }); + } $scope.$on('timeseries-table-data-updated', function(event, tableId) { if (vm.tableId == tableId) { @@ -186,6 +183,8 @@ function TimeseriesTableWidgetController($element, $scope, $filter) { } catch (e) { content = strContent; } + } else { + content = vm.ctx.utils.formatValue(value, contentInfo.decimals, contentInfo.units); } return content; } @@ -271,7 +270,9 @@ function TimeseriesTableWidgetController($element, $scope, $filter) { source.ts.contentsInfo.push({ useCellContentFunction: useCellContentFunction, - cellContentFunction: cellContentFunction + cellContentFunction: cellContentFunction, + units: dataKey.units, + decimals: dataKey.decimals }); }