Merge pull request #208 from thingsboard/feature/TB-70

TB-70: Improve timeseries table widget. Fix numeric value conversion …

application/src/main/data/json/system/widget_bundles/cards.json

@@ -109,9 +109,9 @@
         "sizeX": 8,
         "sizeY": 6.5,
         "resources": [],
-        "templateHtml": "<tb-timeseries-table-widget \n    config=\"config\"\n    table-id=\"tableId\"\n    datasources=\"datasources\"\n    data=\"data\">\n</tb-timeseries-table-widget>",
+        "templateHtml": "<tb-timeseries-table-widget \n    table-id=\"tableId\"\n    ctx=\"ctx\">\n</tb-timeseries-table-widget>",
         "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}"

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]);
                             }

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;
         }
     }
 

ui/src/app/widget/lib/timeseries-table-widget.js

@@ -36,9 +36,7 @@ function TimeseriesTableWidget() {
         scope: true,
         bindToController: {
             tableId: '=',
-            config: '=',
+            ctx: '='
-            datasources: '=',
-            data: '='
         },
         controller: TimeseriesTableWidgetController,
         controllerAs: 'vm',
@@ -53,10 +51,12 @@ function TimeseriesTableWidgetController($element, $scope, $filter) {
     vm.sources = [];
     vm.sourceIndex = 0;
 
-    $scope.$watch('vm.config', function() {
+    $scope.$watch('vm.ctx', function() {
-       if (vm.config) {
+       if (vm.ctx) {
-           vm.settings = vm.config.settings;
+           vm.settings = vm.ctx.settings;
-           vm.widgetConfig = vm.config.widgetConfig;
+           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
                     });
 
                 }