UI: Embed action for chart widgets

application/src/main/data/json/system/widget_types/bar_chart.json

@@ -9,9 +9,9 @@
     "sizeX": 8,
     "sizeY": 5,
     "resources": [],
-    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-time-series-chart-widget>",
+    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'bar',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('bar'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'bar',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('bar'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}",
     "latestDataKeySettingsSchema": "{}",

application/src/main/data/json/system/widget_types/bar_chart_with_labels.json

@@ -9,9 +9,9 @@
     "sizeX": 8,
     "sizeY": 5,
     "resources": [],
-    "templateHtml": "<tb-bar-chart-with-labels-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-bar-chart-with-labels-widget>",
+    "templateHtml": "<tb-bar-chart-with-labels-widget \n    [ctx]=\"ctx\">\n</tb-bar-chart-with-labels-widget>",
     "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.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}",
     "latestDataKeySettingsSchema": "{}",

application/src/main/data/json/system/widget_types/bars.json

@@ -9,9 +9,9 @@
     "sizeX": 5,
     "sizeY": 4,
     "resources": [],
-    "templateHtml": "<tb-bar-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-bar-chart-widget>",
+    "templateHtml": "<tb-bar-chart-widget \n    [ctx]=\"ctx\">\n</tb-bar-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.barChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-bar-chart-widget-settings",

application/src/main/data/json/system/widget_types/doughnut.json

@@ -9,9 +9,9 @@
     "sizeX": 4,
     "sizeY": 3,
     "resources": [],
-    "templateHtml": "<tb-doughnut-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-doughnut-widget>",
+    "templateHtml": "<tb-doughnut-widget \n    [ctx]=\"ctx\">\n</tb-doughnut-widget>",
     "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: '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",
+    "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        embedActionsPanel: 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",

application/src/main/data/json/system/widget_types/horizontal_doughnut.json

@@ -9,9 +9,9 @@
     "sizeX": 4,
     "sizeY": 2.5,
     "resources": [],
-    "templateHtml": "<tb-doughnut-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-doughnut-widget>",
+    "templateHtml": "<tb-doughnut-widget \n    [ctx]=\"ctx\">\n</tb-doughnut-widget>",
     "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",
+    "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        embedActionsPanel: 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",

application/src/main/data/json/system/widget_types/line_chart.json

@@ -9,9 +9,9 @@
     "sizeX": 8,
     "sizeY": 5,
     "resources": [],
-    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-time-series-chart-widget>",
+    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'line',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('line'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'line',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('line'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}",
     "latestDataKeySettingsSchema": "{}",

application/src/main/data/json/system/widget_types/pie.json

@@ -9,9 +9,9 @@
     "sizeX": 5,
     "sizeY": 4,
     "resources": [],
-    "templateHtml": "<tb-pie-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-pie-chart-widget>",
+    "templateHtml": "<tb-pie-chart-widget \n    [ctx]=\"ctx\">\n</tb-pie-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.pieChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.pieChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\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.$scope.pieChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.pieChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\nself.actionSources = function() {\n    return {\n        'sliceClick': {\n            name: 'widget-action.pie-slice-click',\n            multiple: false\n        }\n    };\n}\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-pie-chart-widget-settings",

application/src/main/data/json/system/widget_types/point_chart.json

@@ -9,9 +9,9 @@
     "sizeX": 8,
     "sizeY": 5,
     "resources": [],
-    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-time-series-chart-widget>",
+    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'point',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('point'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        chartType: 'point',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('point'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}",
     "latestDataKeySettingsSchema": "{}",

application/src/main/data/json/system/widget_types/polar_area.json

@@ -9,9 +9,9 @@
     "sizeX": 5,
     "sizeY": 4,
     "resources": [],
-    "templateHtml": "<tb-polar-area-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-polar-area-chart-widget>",
+    "templateHtml": "<tb-polar-area-chart-widget \n    [ctx]=\"ctx\">\n</tb-polar-area-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.polarAreaChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.polarAreaChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.polarAreaChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.polarAreaChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-polar-area-chart-widget-settings",

application/src/main/data/json/system/widget_types/radar.json

@@ -9,9 +9,9 @@
     "sizeX": 5,
     "sizeY": 4,
     "resources": [],
-    "templateHtml": "<tb-radar-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-radar-chart-widget>",
+    "templateHtml": "<tb-radar-chart-widget \n    [ctx]=\"ctx\">\n</tb-radar-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.radarChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.radarChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.radarChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.radarChartWidget.onDataUpdated();\n};\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '500px',\n        previewHeight: '380px',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'windPower', label: 'Wind', type: 'timeseries', color: '#08872B' },\n                    { name: 'solarPower', label: 'Solar', type: 'timeseries', color: '#FF4D5A' },\n                    { name: 'hydroelectricPower', label: 'Hydroelectric', type: 'timeseries', color: '#FFDE30' }];\n        }\n    };\n};\n\nself.onDestroy = function() {\n};\n\n",
     "settingsSchema": "",
     "dataKeySettingsSchema": "",
     "settingsDirective": "tb-radar-chart-widget-settings",

application/src/main/data/json/system/widget_types/range_chart.json

@@ -9,9 +9,9 @@
     "sizeX": 8,
     "sizeY": 5,
     "resources": [],
-    "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-range-chart-widget>",
+    "templateHtml": "<tb-range-chart-widget \n    [ctx]=\"ctx\">\n</tb-range-chart-widget>",
     "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.mouse-events .flot-overlay {\n    cursor: crosshair; \n}\n\n",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.rangeChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        maxDatasources: 1,\n        maxDataKeys: 1,\n        singleEntity: true,\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}",
     "latestDataKeySettingsSchema": "{}",

application/src/main/data/json/system/widget_types/state_chart.json

@@ -9,9 +9,9 @@
     "sizeX": 8,
     "sizeY": 5,
     "resources": [],
-    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-time-series-chart-widget>",
+    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        stateData: true,\n        chartType: 'state',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('state'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'state', label: 'State', type: 'timeseries', units: '', decimals: 0 }];\n        }\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        stateData: true,\n        chartType: 'state',\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings('state'),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'state', label: 'State', type: 'timeseries', units: '', decimals: 0 }];\n        }\n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}",
     "latestDataKeySettingsSchema": "{}",

application/src/main/data/json/system/widget_types/time_series_chart.json

@@ -9,9 +9,9 @@
     "sizeX": 8,
     "sizeY": 5,
     "resources": [],
-    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\"\n    [widgetTitlePanel]=\"widgetTitlePanel\">\n</tb-time-series-chart-widget>",
+    "templateHtml": "<tb-time-series-chart-widget \n    [ctx]=\"ctx\">\n</tb-time-series-chart-widget>",
     "templateCss": "",
-    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings(),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
+    "controllerScript": "self.onInit = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onInit();\n};\n\nself.onDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onDataUpdated();\n}\n\nself.onLatestDataUpdated = function() {\n    self.ctx.$scope.timeSeriesChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        hasAdditionalLatestDataKeys: true,\n        dataKeySettingsFunction: TbTimeSeriesChart.dataKeySettings(),\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries', units: '°C', decimals: 0 }];\n        }\n    };\n}\n",
     "settingsSchema": "{}",
     "dataKeySettingsSchema": "{}",
     "latestDataKeySettingsSchema": "{}",

ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.html

@@ -17,7 +17,14 @@
 -->
 <div class="tb-bar-chart-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-bar-chart-overlay" [style]="overlayStyle"></div>
-  <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
+  @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) {
+    <div class="tb-widget-title-row flex justify-between">
+      <ng-container *ngTemplateOutlet="widgetComponent.widgetTitlePanel"></ng-container>
+      <ng-container *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel"></ng-container>
+    </div>
+  } @else {
+    <ng-container class="tb-widget-actions-absolute" *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel; context: {absolute: true}"></ng-container>
+  }
   <div class="tb-bar-chart-content" [class]="legendClass">
     <div #chartShape class="tb-bar-chart-shape">
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.scss

@@ -104,4 +104,11 @@
       }
     }
   }
+
+  .tb-widget-title-row .tb-widget-actions {
+    margin: 0;
+  }
+  .tb-widget-actions.tb-widget-actions-absolute {
+    z-index: 2;
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/chart/bar-chart-with-labels-widget.component.ts

@@ -40,6 +40,7 @@ import {
 } from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models';
 import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart';
 import { DataKey } from '@shared/models/widget.models';
+import { WidgetComponent } from '@home/components/widget/widget.component';
 
 @Component({
   selector: 'tb-bar-chart-with-labels-widget',
@@ -57,9 +58,6 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
   @Input()
   ctx: WidgetContext;
 
-  @Input()
-  widgetTitlePanel: TemplateRef<any>;
-
   showLegend: boolean;
   legendClass: string;
 
@@ -73,7 +71,8 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
 
   private timeSeriesChart: TbTimeSeriesChart;
 
-  constructor(private imagePipe: ImagePipe,
+  constructor(public widgetComponent: WidgetComponent,
+              private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
               private renderer: Renderer2,
               private cd: ChangeDetectorRef) {

ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart-widget.component.html

@@ -19,6 +19,5 @@
     #latestChart
     [ctx]="ctx"
     [settings]="settings"
-    [widgetTitlePanel]="widgetTitlePanel"
     [callbacks]="callbacks"
 ></tb-latest-chart>

ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.html

@@ -17,7 +17,14 @@
 -->
 <div class="tb-latest-chart-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-latest-chart-overlay" [style]="overlayStyle"></div>
-  <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
+  @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) {
+    <div class="tb-widget-title-row flex justify-between">
+      <ng-container *ngTemplateOutlet="widgetComponent.widgetTitlePanel"></ng-container>
+      <ng-container *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel"></ng-container>
+    </div>
+  } @else {
+    <ng-container class="tb-widget-actions-absolute" *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel; context: {absolute: true}"></ng-container>
+  }
   <div #chartContent class="tb-latest-chart-content" [class]="legendClass">
     <div #chartShape class="tb-latest-chart-shape">
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.scss

@@ -106,4 +106,11 @@
       }
     }
   }
+
+  .tb-widget-title-row .tb-widget-actions {
+    margin: 0;
+  }
+  .tb-widget-actions.tb-widget-actions-absolute {
+    z-index: 2;
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/chart/latest-chart.component.ts

@@ -68,9 +68,6 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input()
   ctx: WidgetContext;
 
-  @Input()
-  widgetTitlePanel: TemplateRef<any>;
-
   @Input()
   callbacks: LatestChartComponentCallbacks;
 
@@ -98,9 +95,9 @@ export class LatestChartComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private latestChart: TbLatestChart<LatestChartSettings>;
 
-  constructor(private imagePipe: ImagePipe,
+  constructor(public widgetComponent: WidgetComponent,
+              private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
-              private widgetComponent: WidgetComponent,
               private renderer: Renderer2,
               private translate: TranslateService,
               private cd: ChangeDetectorRef) {

ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html

@@ -17,7 +17,14 @@
 -->
 <div class="tb-range-chart-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-range-chart-overlay" [style]="overlayStyle"></div>
-  <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
+  @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) {
+    <div class="tb-widget-title-row flex justify-between">
+      <ng-container *ngTemplateOutlet="widgetComponent.widgetTitlePanel"></ng-container>
+      <ng-container *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel"></ng-container>
+    </div>
+  } @else {
+    <ng-container class="tb-widget-actions-absolute" *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel; context: {absolute: true}"></ng-container>
+  }
   <div class="tb-range-chart-content" [class]="legendClass">
     <div #chartShape class="tb-range-chart-shape">
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.scss

@@ -104,4 +104,10 @@
       }
     }
   }
+  .tb-widget-title-row .tb-widget-actions {
+    margin: 0;
+  }
+  .tb-widget-actions.tb-widget-actions-absolute {
+    z-index: 2;
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts

@@ -48,6 +48,7 @@ import { Observable } from 'rxjs';
 import { ImagePipe } from '@shared/pipe/image.pipe';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TbTimeSeriesChart } from '@home/components/widget/lib/chart/time-series-chart';
+import { WidgetComponent } from '@home/components/widget/widget.component';
 
 @Component({
   selector: 'tb-range-chart-widget',
@@ -65,9 +66,6 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
   @Input()
   ctx: WidgetContext;
 
-  @Input()
-  widgetTitlePanel: TemplateRef<any>;
-
   showLegend: boolean;
   legendClass: string;
 
@@ -86,7 +84,8 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
 
   private timeSeriesChart: TbTimeSeriesChart;
 
-  constructor(private imagePipe: ImagePipe,
+  constructor(public widgetComponent: WidgetComponent,
+              private imagePipe: ImagePipe,
               private sanitizer: DomSanitizer,
               private renderer: Renderer2,
               private cd: ChangeDetectorRef) {

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.html

@@ -17,9 +17,14 @@
 -->
 <div class="tb-time-series-chart-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-time-series-chart-overlay" [style]="overlayStyle"></div>
-  <ng-container *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel">
-    <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
-  </ng-container>
+  @if (widgetComponent.dashboardWidget.showWidgetTitlePanel) {
+    <div class="tb-widget-title-row flex justify-between">
+      <ng-container *ngTemplateOutlet="widgetComponent.widgetTitlePanel"></ng-container>
+      <ng-container *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel"></ng-container>
+    </div>
+  } @else {
+    <ng-container class="tb-widget-actions-absolute" *ngTemplateOutlet="widgetComponent.widgetHeaderActionsPanel; context: {absolute: true}"></ng-container>
+  }
   <div class="tb-time-series-chart-content" [class]="legendClass">
     <div #chartShape class="tb-time-series-chart-shape">
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.scss

@@ -156,4 +156,10 @@ $maxLegendHeight: 35%;
       }
     }
   }
+  .tb-widget-title-row .tb-widget-actions {
+    margin: 0;
+  }
+  .tb-widget-actions.tb-widget-actions-absolute {
+    z-index: 2;
+  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/chart/time-series-chart-widget.component.ts

@@ -61,9 +61,6 @@ export class TimeSeriesChartWidgetComponent implements OnInit, OnDestroy, AfterV
   @Input()
   ctx: WidgetContext;
 
-  @Input()
-  widgetTitlePanel: TemplateRef<any>;
-
   horizontalLegendPosition = false;
 
   showLegend: boolean;