Merge pull request #15046 from thingsboard/lts-4.3

LTS to RC

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

@@ -11,7 +11,7 @@
     "resources": [],
     "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        embedActionsPanel: true,\n        supportsUnitConversion: 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.onLatestDataUpdated = function() {\n    self.ctx.$scope.barChartWidget.onLatestDataUpdated();\n}\n\nself.typeParameters = function() {\n    return {\n        previewWidth: '80%',\n        embedTitlePanel: true,\n        embedActionsPanel: true,\n        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'humidity', label: 'Humidity', type: 'timeseries' }];\n        }\n    };\n}\n",
     "settingsForm": [],
     "dataKeySettingsForm": [],
     "latestDataKeySettingsForm": [],

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

@@ -11,7 +11,7 @@
     "resources": [],
     "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        embedActionsPanel: true,\n        supportsUnitConversion: 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.onLatestDataUpdated = function() {\n    self.ctx.$scope.rangeChartWidget.onLatestDataUpdated();\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        supportsUnitConversion: true,\n        hasAdditionalLatestDataKeys: false,\n        defaultDataKeysFunction: function() {\n            return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n        }\n    };\n}\n",
     "settingsForm": [],
     "dataKeySettingsForm": [],
     "latestDataKeySettingsForm": [],

ui-ngx/patches/@iplab+ngx-color-picker+20.0.0.patch

@@ -1,46 +1,13 @@
 diff --git a/node_modules/@iplab/ngx-color-picker/fesm2022/iplab-ngx-color-picker.mjs b/node_modules/@iplab/ngx-color-picker/fesm2022/iplab-ngx-color-picker.mjs
-index a372799..a3d709a 100644
+index a372799..f64a6f8 100644
 --- a/node_modules/@iplab/ngx-color-picker/fesm2022/iplab-ngx-color-picker.mjs
 +++ b/node_modules/@iplab/ngx-color-picker/fesm2022/iplab-ngx-color-picker.mjs
-@@ -1129,11 +1129,11 @@ class RgbaComponent {
+@@ -516,7 +516,7 @@ class Color {
-         this.color.set(newColor);
+         const s = (color.saturation / 100) * (l <= 1 ? l : 2 - l);
+         const value = (l + s) / 2;
+         const saturation = (2 * s) / (l + s) || 0;
+-        return new Hsva(hue, saturation, value, color.alpha);
++        return new Hsva(hue, saturation * 100, value * 100, color.alpha);
      }
-     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RgbaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+     rgbaToHsva(color) {
--    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: RgbaComponent, isStandalone: true, selector: "rgba-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isAlphaVisible: { classPropertyName: "isAlphaVisible", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getRed().toString()\" (inputChange)=\"onInputChange($event, 'R')\" />\r\n    @if (labelVisible()) {\r\n        <span>R</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getGreen().toString()\" (inputChange)=\"onInputChange($event, 'G')\" />\r\n    @if (labelVisible()) {\r\n        <span>G</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getBlue().toString()\" (inputChange)=\"onInputChange($event, 'B')\" />\r\n    @if (labelVisible()) {\r\n        <span>B</span>\r\n    }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n    <div class=\"column\">\r\n        <input type=\"text\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n        @if (labelVisible()) {\r\n            <span>A</span>\r\n        }\r\n    </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], dependencies: [{ kind: "directive", type: ColorPickerInputDirective, selector: "[inputChange]", inputs: ["min", "max"], outputs: ["inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+         const red = color.red / 255;
-+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: RgbaComponent, isStandalone: true, selector: "rgba-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isAlphaVisible: { classPropertyName: "isAlphaVisible", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getRed().toString()\" (inputChange)=\"onInputChange($event, 'R')\" />\r\n    @if (labelVisible()) {\r\n        <span>R</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getGreen().toString()\" (inputChange)=\"onInputChange($event, 'G')\" />\r\n    @if (labelVisible()) {\r\n        <span>G</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getBlue().toString()\" (inputChange)=\"onInputChange($event, 'B')\" />\r\n    @if (labelVisible()) {\r\n        <span>B</span>\r\n    }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n    <div class=\"column\">\r\n        <input type=\"number\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n        @if (labelVisible()) {\r\n            <span>A</span>\r\n        }\r\n    </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], dependencies: [{ kind: "directive", type: ColorPickerInputDirective, selector: "[inputChange]", inputs: ["min", "max"], outputs: ["inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: RgbaComponent, decorators: [{
-             type: Component,
--            args: [{ selector: `rgba-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPickerInputDirective], template: "<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getRed().toString()\" (inputChange)=\"onInputChange($event, 'R')\" />\r\n    @if (labelVisible()) {\r\n        <span>R</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getGreen().toString()\" (inputChange)=\"onInputChange($event, 'G')\" />\r\n    @if (labelVisible()) {\r\n        <span>G</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getBlue().toString()\" (inputChange)=\"onInputChange($event, 'B')\" />\r\n    @if (labelVisible()) {\r\n        <span>B</span>\r\n    }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n    <div class=\"column\">\r\n        <input type=\"text\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n        @if (labelVisible()) {\r\n            <span>A</span>\r\n        }\r\n    </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
-+            args: [{ selector: `rgba-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPickerInputDirective], template: "<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getRed().toString()\" (inputChange)=\"onInputChange($event, 'R')\" />\r\n    @if (labelVisible()) {\r\n        <span>R</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getGreen().toString()\" (inputChange)=\"onInputChange($event, 'G')\" />\r\n    @if (labelVisible()) {\r\n        <span>G</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"255\" [value]=\"value?.getBlue().toString()\" (inputChange)=\"onInputChange($event, 'B')\" />\r\n    @if (labelVisible()) {\r\n        <span>B</span>\r\n    }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n    <div class=\"column\">\r\n        <input type=\"number\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n        @if (labelVisible()) {\r\n            <span>A</span>\r\n        }\r\n    </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
-         }] });
- 
- class HslaComponent {
-@@ -1155,11 +1155,11 @@ class HslaComponent {
-         this.color.set(newColor);
-     }
-     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HslaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
--    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HslaComponent, isStandalone: true, selector: "hsla-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isAlphaVisible: { classPropertyName: "isAlphaVisible", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [value]=\"value?.getHue().toString()\" (inputChange)=\"onInputChange($event, 'H')\" />\r\n    @if (labelVisible()) {\r\n        <span>H</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getSaturation() + '%'\" (inputChange)=\"onInputChange($event, 'S')\" />\r\n    @if (labelVisible()) {\r\n        <span>S</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getLightness() + '%'\" (inputChange)=\"onInputChange($event, 'L')\" />\r\n    @if (labelVisible()) {\r\n        <span>L</span>\r\n    }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n    <div class=\"column\">\r\n        <input type=\"text\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n        @if (labelVisible()) {\r\n            <span>A</span>\r\n        }\r\n    </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], dependencies: [{ kind: "directive", type: ColorPickerInputDirective, selector: "[inputChange]", inputs: ["min", "max"], outputs: ["inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HslaComponent, isStandalone: true, selector: "hsla-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isAlphaVisible: { classPropertyName: "isAlphaVisible", publicName: "alpha", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [value]=\"value?.getHue().toString()\" (inputChange)=\"onInputChange($event, 'H')\" />\r\n    @if (labelVisible()) {\r\n        <span>H</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getSaturation() + '%'\" (inputChange)=\"onInputChange($event, 'S')\" />\r\n    @if (labelVisible()) {\r\n        <span>S</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getLightness() + '%'\" (inputChange)=\"onInputChange($event, 'L')\" />\r\n    @if (labelVisible()) {\r\n        <span>L</span>\r\n    }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n    <div class=\"column\">\r\n        <input type=\"number\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n        @if (labelVisible()) {\r\n            <span>A</span>\r\n        }\r\n    </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], dependencies: [{ kind: "directive", type: ColorPickerInputDirective, selector: "[inputChange]", inputs: ["min", "max"], outputs: ["inputChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HslaComponent, decorators: [{
-             type: Component,
--            args: [{ selector: `hsla-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPickerInputDirective], template: "<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [value]=\"value?.getHue().toString()\" (inputChange)=\"onInputChange($event, 'H')\" />\r\n    @if (labelVisible()) {\r\n        <span>H</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getSaturation() + '%'\" (inputChange)=\"onInputChange($event, 'S')\" />\r\n    @if (labelVisible()) {\r\n        <span>S</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"text\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getLightness() + '%'\" (inputChange)=\"onInputChange($event, 'L')\" />\r\n    @if (labelVisible()) {\r\n        <span>L</span>\r\n    }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n    <div class=\"column\">\r\n        <input type=\"text\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n        @if (labelVisible()) {\r\n            <span>A</span>\r\n        }\r\n    </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
-+            args: [{ selector: `hsla-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ColorPickerInputDirective], template: "<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"360\" [value]=\"value?.getHue().toString()\" (inputChange)=\"onInputChange($event, 'H')\" />\r\n    @if (labelVisible()) {\r\n        <span>H</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getSaturation() + '%'\" (inputChange)=\"onInputChange($event, 'S')\" />\r\n    @if (labelVisible()) {\r\n        <span>S</span>\r\n    }\r\n</div>\r\n<div class=\"column\">\r\n    <input type=\"number\" pattern=\"[0-9]*\" min=\"0\" max=\"100\" [value]=\"value?.getLightness() + '%'\" (inputChange)=\"onInputChange($event, 'L')\" />\r\n    @if (labelVisible()) {\r\n        <span>L</span>\r\n    }\r\n</div>\r\n@if (isAlphaVisible()) {\r\n    <div class=\"column\">\r\n        <input type=\"number\" pattern=\"[0-9]+([\\.,][0-9]{1,2})?\" min=\"0\" max=\"1\" [value]=\"value?.getAlpha(true).toString()\" (inputChange)=\"onInputChange($event, 'A')\" />\r\n        @if (labelVisible()) {\r\n            <span>A</span>\r\n        }\r\n    </div>\r\n}", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
-         }] });
- 
- class HexComponent {
-@@ -1190,11 +1190,11 @@ class HexComponent {
-         }
-     }
-     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
--    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HexComponent, isStandalone: true, selector: "hex-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, prefixValue: { classPropertyName: "prefixValue", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n    <input #elRef type=\"text\" [value]=\"value\" (keyup)=\"onInputChange($event, elRef.value)\" />\r\n    @if (labelVisible()) {\r\n        <span>HEX</span>\r\n    }\r\n</div>", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: HexComponent, isStandalone: true, selector: "hex-input-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, labelVisible: { classPropertyName: "labelVisible", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, prefixValue: { classPropertyName: "prefixValue", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: "<div class=\"column\">\r\n    <input #elRef type=\"number\" [value]=\"value\" (keyup)=\"onInputChange($event, elRef.value)\" />\r\n    @if (labelVisible()) {\r\n        <span>HEX</span>\r\n    }\r\n</div>", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n", ""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
- }
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: HexComponent, decorators: [{
-             type: Component,
--            args: [{ selector: `hex-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"column\">\r\n    <input #elRef type=\"text\" [value]=\"value\" (keyup)=\"onInputChange($event, elRef.value)\" />\r\n    @if (labelVisible()) {\r\n        <span>HEX</span>\r\n    }\r\n</div>", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
-+            args: [{ selector: `hex-input-component`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"column\">\r\n    <input #elRef type=\"number\" [value]=\"value\" (keyup)=\"onInputChange($event, elRef.value)\" />\r\n    @if (labelVisible()) {\r\n        <span>HEX</span>\r\n    }\r\n</div>", styles: [":host,:host ::ng-deep *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}\n", ":host{display:table;width:100%;text-align:center;color:#b4b4b4;font-size:11px}.column{display:table-cell;padding:0 2px}input{width:100%;border:1px solid rgb(218,218,218);color:#272727;text-align:center;font-size:12px;-webkit-appearance:none;border-radius:0;margin:0 0 6px;height:26px;outline:none}\n"] }]
-         }] });
- 
- const OpacityAnimation = trigger('opacityAnimation', [

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

@@ -45,7 +45,10 @@ import {
   barChartWithLabelsDefaultSettings,
   BarChartWithLabelsWidgetSettings
 } from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models';
-import { TimeSeriesChartType } from '@home/components/widget/lib/chart/time-series-chart.models';
+import {
+  TimeSeriesChartType,
+  updateLatestDataKeys
+} from '@home/components/widget/lib/chart/time-series-chart.models';
 import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
 
 @Component({
@@ -76,7 +79,7 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
   tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this);
 
   predefinedValues = widgetTitleAutocompleteValues;
-  
+
   constructor(protected store: Store<AppState>,
               protected widgetConfigComponent: WidgetConfigComponent,
               private $injector: Injector,
@@ -167,6 +170,11 @@ export class BarChartWithLabelsBasicConfigComponent extends BasicWidgetConfigCom
     });
   }
 
+  protected onConfigChanged(widgetConfig: WidgetConfigComponentData) {
+    updateLatestDataKeys([widgetConfig.config.settings.yAxis], this.datasource, this.callbacks);
+    super.onConfigChanged(widgetConfig);
+  }
+
   protected prepareOutputConfig(config: any): WidgetConfigComponentData {
     setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig);
     this.widgetConfig.config.datasources = config.datasources;

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

@@ -47,7 +47,7 @@ import {
 } from '@home/components/widget/lib/chart/range-chart-widget.models';
 import {
   lineSeriesStepTypes,
-  lineSeriesStepTypeTranslations
+  lineSeriesStepTypeTranslations, updateLatestDataKeys
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import {
   chartLabelPositions,
@@ -289,6 +289,11 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
     return this.widgetConfig;
   }
 
+  protected onConfigChanged(widgetConfig: WidgetConfigComponentData) {
+    updateLatestDataKeys([widgetConfig.config.settings.yAxis], this.datasource, this.callbacks);
+    super.onConfigChanged(widgetConfig);
+  }
+
   protected validatorTriggers(): string[] {
     return ['showTitle', 'showIcon', 'showRangeThresholds', 'fillArea', 'showLine',
       'step', 'showPointLabel', 'enablePointLabelBackground', 'showLegend', 'showTooltip', 'tooltipShowDate'];

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

@@ -134,6 +134,12 @@ export class BarChartWithLabelsWidgetComponent implements OnInit, OnDestroy, Aft
     }
   }
 
+  public onLatestDataUpdated() {
+    if (this.timeSeriesChart) {
+      this.timeSeriesChart.latestUpdated();
+    }
+  }
+
   public onLegendKeyEnter(key: DataKey) {
     this.timeSeriesChart.keyEnter(key);
   }

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

@@ -162,6 +162,12 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
     }
   }
 
+  public onLatestDataUpdated() {
+    if (this.timeSeriesChart) {
+      this.timeSeriesChart.latestUpdated();
+    }
+  }
+
   public toggleRangeItem(item: RangeItem) {
     item.enabled = !item.enabled;
     this.timeSeriesChart.toggleVisualMapRange(item.index);

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

@@ -99,6 +99,8 @@ import {
   TimeSeriesChartTooltipWidgetSettings
 } from '@home/components/widget/lib/chart/time-series-chart-tooltip.models';
 import { TbUnit, TbUnitConverter } from '@shared/models/unit.models';
+import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
+import { DataKeysCallbacks } from '@home/components/widget/lib/settings/common/key/data-keys.component.models';
 
 type TimeSeriesChartDataEntry = [number, any, number, number];
 
@@ -1495,3 +1497,101 @@ const createSeriesLabelOption = (item: TimeSeriesChartDataItem, show: boolean,
   }
   return labelOption;
 };
+
+export const checkLatestDataKeys = (yAxes: TimeSeriesChartYAxes, datasource: Datasource): TimeSeriesChartYAxes => {
+  const latestKeys = datasource?.latestDataKeys || [];
+  const result: TimeSeriesChartYAxes = {};
+
+  for (const [id, axis] of Object.entries(yAxes)) {
+    axis.min = normalizeAxisLimit(axis.min);
+    axis.max = normalizeAxisLimit(axis.max);
+    const minCfg = axis.min;
+    const maxCfg = axis.max;
+
+    const minValid = !!minCfg && (
+      minCfg.type !== ValueSourceType.latestKey ||
+      latestKeys.some(k => isYAxisKey(k, minCfg))
+    );
+
+    const maxValid = !!maxCfg && (
+      maxCfg.type !== ValueSourceType.latestKey ||
+      latestKeys.some(k => isYAxisKey(k, maxCfg))
+    );
+
+    if (minValid && maxValid) {
+      result[id] = axis;
+    }
+  }
+
+  return result;
+}
+
+export const updateLatestDataKeys = (yAxes: TimeSeriesChartYAxisSettings[], datasource: Datasource, dataKeyCallbacks: DataKeysCallbacks)=> {
+  if (datasource) {
+    let latestKeys = datasource.latestDataKeys;
+    if (!latestKeys) {
+      latestKeys = [];
+      datasource.latestDataKeys = latestKeys;
+    }
+    const existingYAxisKeys = latestKeys.filter(k => k.settings?.__yAxisMinKey === true || k.settings?.__yAxisMaxKey === true);
+    const foundYAxisKeys: DataKey[] = [];
+
+    for(const yAxis of yAxes) {
+      const min = yAxis.min as ValueSourceConfig;
+      const max = yAxis.max as ValueSourceConfig;
+      if (min && min.type === ValueSourceType.latestKey) {
+        const found = existingYAxisKeys.find(k => isYAxisKey(k, min));
+        if (!found) {
+          const newKey = dataKeyCallbacks.generateDataKey(min.latestKey, min.latestKeyType,
+            null, true, null);
+          newKey.settings.__yAxisMinKey = true;
+          latestKeys.push(newKey);
+        } else if (foundYAxisKeys.indexOf(found) === -1) {
+          foundYAxisKeys.push(found);
+        }
+      }
+      if (max && max.type === ValueSourceType.latestKey) {
+        const found = existingYAxisKeys.find(k => isYAxisKey(k, max));
+        if (!found) {
+          const newKey = dataKeyCallbacks.generateDataKey(max.latestKey, max.latestKeyType,
+            null, true, null);
+          newKey.settings.__yAxisMaxKey = true;
+          latestKeys.push(newKey);
+        } else if (foundYAxisKeys.indexOf(found) === -1) {
+          foundYAxisKeys.push(found);
+        }
+      }
+    }
+    const toRemove = existingYAxisKeys.filter(k => foundYAxisKeys.indexOf(k) === -1);
+    for (const key of toRemove) {
+      const index = latestKeys.indexOf(key);
+      if (index > -1) {
+        latestKeys.splice(index, 1);
+      }
+    }
+  }
+}
+
+export const isYAxisKey = (d: DataKey, limit: ValueSourceConfig): boolean => {
+  return (d.type === DataKeyType.function && d.label === limit.latestKey) ||
+    (d.type !== DataKeyType.function && d.name === limit.latestKey &&
+      d.type === limit.latestKeyType);
+}
+
+export const normalizeAxisLimit = (limit: string | number | ValueSourceConfig): ValueSourceConfig => {
+  if (!limit) {
+    return {
+      type: ValueSourceType.constant,
+      value: null,
+      entityAlias: null
+    };
+  } else if (typeof limit === 'number' || typeof limit === 'string') {
+    return {
+      type: ValueSourceType.constant,
+      value: Number(limit),
+      entityAlias: null
+    };
+  }
+  return limit;
+}
+

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

@@ -23,7 +23,7 @@ import {
   createTimeSeriesYAxis,
   defaultTimeSeriesChartYAxisSettings,
   generateChartData,
-  LineSeriesStepType,
+  LineSeriesStepType, normalizeAxisLimit,
   parseThresholdData,
   TimeSeriesChartAxis,
   TimeSeriesChartDataItem,
@@ -581,8 +581,8 @@ export class TbTimeSeriesChart {
     yAxisSettingsList.sort((a1, a2) => a1.order - a2.order);
     const axisLimitDatasources: Datasource[] = [];
     for (const yAxisSettings of yAxisSettingsList) {
-      yAxisSettings.min = this.normalizeAxisLimit(yAxisSettings.min);
+      yAxisSettings.min = normalizeAxisLimit(yAxisSettings.min);
-      yAxisSettings.max = this.normalizeAxisLimit(yAxisSettings.max);
+      yAxisSettings.max = normalizeAxisLimit(yAxisSettings.max);
       const axisSettings = mergeDeep<TimeSeriesChartYAxisSettings>({} as TimeSeriesChartYAxisSettings,
         defaultTimeSeriesChartYAxisSettings, yAxisSettings);
       const units = isNotEmptyTbUnits(axisSettings.units) ? axisSettings.units : this.ctx.units;
@@ -1080,21 +1080,4 @@ export class TbTimeSeriesChart {
       this.timeSeriesChart.setOption(this.timeSeriesChartOptions);
     }
   }
-
-  private normalizeAxisLimit(limit: string | number | ValueSourceConfig): string | number | ValueSourceConfig  {
-    if (!limit) {
-      return {
-        type: ValueSourceType.constant,
-        value: null,
-        entityAlias: null
-      };
-    } else if (typeof limit === 'number' || typeof limit === 'string') {
-      return {
-        type: ValueSourceType.constant,
-        value: Number(limit),
-        entityAlias: null
-      };
-    }
-    return limit;
-  }
 }

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

@@ -31,6 +31,7 @@ import {
   barChartWithLabelsDefaultSettings
 } from '@home/components/widget/lib/chart/bar-chart-with-labels-widget.models';
 import { getSourceTbUnitSymbol } from '@shared/models/unit.models';
+import { updateLatestDataKeys } from '@home/components/widget/lib/chart/time-series-chart.models';
 
 @Component({
     selector: 'tb-bar-chart-with-labels-widget-settings',
@@ -123,6 +124,11 @@ export class BarChartWithLabelsWidgetSettingsComponent extends WidgetSettingsCom
     });
   }
 
+  protected onSettingsChanged(updated: WidgetSettings) {
+    updateLatestDataKeys([updated.yAxis], this.datasource, this.dataKeyCallbacks);
+    super.onSettingsChanged(updated);
+  }
+
   protected validatorTriggers(): string[] {
     return ['showBarLabel', 'showBarValue', 'showBarBorder', 'showLegend', 'showTooltip', 'tooltipShowDate'];
   }

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

@@ -30,7 +30,7 @@ import { rangeChartDefaultSettings } from '@home/components/widget/lib/chart/ran
 import { DateFormatProcessor, DateFormatSettings } from '@shared/models/widget-settings.models';
 import {
   lineSeriesStepTypes,
-  lineSeriesStepTypeTranslations
+  lineSeriesStepTypeTranslations, updateLatestDataKeys
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import {
   chartLabelPositions,
@@ -269,6 +269,11 @@ export class RangeChartWidgetSettingsComponent extends WidgetSettingsComponent {
     }
   }
 
+  protected onSettingsChanged(updated: WidgetSettings) {
+    updateLatestDataKeys([updated.yAxis], this.datasource, this.dataKeyCallbacks);
+    super.onSettingsChanged(updated);
+  }
+
   private _pointLabelPreviewFn(): string {
     const units = getSourceTbUnitSymbol(this.widgetConfig.config.units);
     const decimals: number = this.widgetConfig.config.decimals;

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/axis-scale-row.component.ts

@@ -97,7 +97,7 @@ export class AxisScaleRowComponent implements ControlValueAccessor, OnInit, Vali
     this.limitForm = this.fb.group({
       type: [ValueSourceType.constant],
       value: [null],
-      entityAlias: [null]
+      entityAlias: [null, [Validators.required]]
     });
     this.latestKeyFormControl = this.fb.control(null, [Validators.required]);
     this.entityKeyFormControl = this.fb.control(null, [Validators.required]);
@@ -169,23 +169,24 @@ export class AxisScaleRowComponent implements ControlValueAccessor, OnInit, Vali
   }
 
   private updateValidators() {
-    const axisTypeControl = this.limitForm.get('type');
+    const type = this.limitForm.get('type')?.value;
-    if (axisTypeControl && this.entityKeyFormControl && this.latestKeyFormControl) {
+    const entityAliasCtr = this.limitForm.get('entityAlias');
-      const type = axisTypeControl.value;
+
-      if (type === ValueSourceType.latestKey) {
+    const isLatestKey = type === ValueSourceType.latestKey;
-        this.latestKeyFormControl.setValidators([Validators.required]);
+    const isEntity = type === ValueSourceType.entity;
-        this.entityKeyFormControl.clearValidators();
+
-      } else if (type === ValueSourceType.entity) {
+    isLatestKey ? this.latestKeyFormControl.enable({ emitEvent: false })
-        this.latestKeyFormControl.clearValidators();
+      : this.latestKeyFormControl.disable({ emitEvent: false });
-        this.limitForm.get('entityAlias').setValidators([Validators.required]);
+
-        this.entityKeyFormControl.setValidators([Validators.required]);
+    isEntity ? this.entityKeyFormControl.enable({ emitEvent: false })
-      } else {
+      : this.entityKeyFormControl.disable({ emitEvent: false });
-        this.latestKeyFormControl.clearValidators();
+
-        this.entityKeyFormControl.clearValidators();
+    isEntity ? entityAliasCtr.enable({ emitEvent: false })
-      }
+      : entityAliasCtr.disable({ emitEvent: false });
-      this.latestKeyFormControl.updateValueAndValidity({ emitEvent: false });
+
-      this.entityKeyFormControl.updateValueAndValidity({ emitEvent: false });
+    this.latestKeyFormControl.updateValueAndValidity({ emitEvent: false });
-    }
+    this.entityKeyFormControl.updateValueAndValidity({ emitEvent: false });
+    entityAliasCtr.updateValueAndValidity({ emitEvent: false });
   }
 
   private updateModel() {

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

@@ -25,7 +25,7 @@ import {
   Validators
 } from '@angular/forms';
 import {
-  AxisPosition, defaultXAxisTicksFormat,
+  AxisPosition, defaultXAxisTicksFormat, normalizeAxisLimit,
   timeSeriesAxisPositionTranslations,
   TimeSeriesChartAxisSettings, TimeSeriesChartXAxisSettings,
   TimeSeriesChartYAxisSettings
@@ -138,8 +138,8 @@ export class TimeSeriesChartAxisSettingsComponent implements OnInit, ControlValu
       this.axisSettingsFormGroup.addControl('ticksGenerator', this.fb.control(null, []));
       this.axisSettingsFormGroup.addControl('interval', this.fb.control(null, [Validators.min(0)]));
       this.axisSettingsFormGroup.addControl('splitNumber', this.fb.control(null, [Validators.min(1)]));
-      this.axisSettingsFormGroup.addControl('min', this.fb.control(null, []));
+      this.axisSettingsFormGroup.addControl('min', this.fb.control(normalizeAxisLimit(null), []));
-      this.axisSettingsFormGroup.addControl('max', this.fb.control(null, []));
+      this.axisSettingsFormGroup.addControl('max', this.fb.control(normalizeAxisLimit(null), []));
     } else if (this.axisType === 'xAxis') {
       this.axisSettingsFormGroup.addControl('ticksFormat', this.fb.control(null, []));
     }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axes-panel.component.ts

@@ -36,13 +36,15 @@ import {
   Validator
 } from '@angular/forms';
 import {
+  checkLatestDataKeys,
   defaultTimeSeriesChartYAxisSettings,
   getNextTimeSeriesYAxisId,
   TimeSeriesChartYAxes,
   TimeSeriesChartYAxisId,
   TimeSeriesChartYAxisSettings,
   timeSeriesChartYAxisValid,
-  timeSeriesChartYAxisValidator
+  timeSeriesChartYAxisValidator,
+  updateLatestDataKeys
 } from '@home/components/widget/lib/chart/time-series-chart.models';
 import { mergeDeep } from '@core/utils';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
@@ -50,7 +52,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { IAliasController } from '@app/core/public-api';
 import { DataKeysCallbacks } from '@home/components/widget/lib/settings/common/key/data-keys.component.models';
-import { DataKey, DataKeyType, Datasource, ValueSourceConfig, ValueSourceType } from '@app/shared/public-api';
+import { Datasource } from '@app/shared/public-api';
 
 @Component({
     selector: 'tb-time-series-chart-y-axes-panel',
@@ -127,7 +129,7 @@ export class TimeSeriesChartYAxesPanelComponent implements ControlValueAccessor,
         for (const axis of axes) {
           yAxes[axis.id] = axis;
         }
-        this.updateLatestDataKeys(Object.values(yAxes));
+        updateLatestDataKeys(Object.values(yAxes), this.datasource, this.dataKeyCallbacks);
         this.propagateChange(yAxes);
       }
     );
@@ -150,7 +152,7 @@ export class TimeSeriesChartYAxesPanelComponent implements ControlValueAccessor,
   }
 
   writeValue(value: TimeSeriesChartYAxes | undefined): void {
-    const yAxes: TimeSeriesChartYAxes = this.checkLatestDataKeys(value || {});
+    const yAxes: TimeSeriesChartYAxes = checkLatestDataKeys(value || {}, this.datasource);
     if (!yAxes.default) {
       yAxes.default = mergeDeep({} as TimeSeriesChartYAxisSettings, defaultTimeSeriesChartYAxisSettings,
         {id: 'default', order: 0} as TimeSeriesChartYAxisSettings);
@@ -197,8 +199,6 @@ export class TimeSeriesChartYAxesPanelComponent implements ControlValueAccessor,
     const axes: TimeSeriesChartYAxisSettings[] = this.yAxesFormGroup.get('axes').value;
     axis.id = getNextTimeSeriesYAxisId(axes);
     axis.order = axes.length;
-    axis.min = this.normalizeAxisLimit(axis.min);
-    axis.max = this.normalizeAxisLimit(axis.max);
     const axesArray = this.yAxesFormGroup.get('axes') as UntypedFormArray;
     const axisControl = this.fb.control(axis, [timeSeriesChartYAxisValidator]);
     axesArray.push(axisControl);
@@ -212,100 +212,4 @@ export class TimeSeriesChartYAxesPanelComponent implements ControlValueAccessor,
     return this.fb.array(axesControls);
   }
 
-  private checkLatestDataKeys(yAxes: TimeSeriesChartYAxes): TimeSeriesChartYAxes {
-    const latestKeys = this.datasource?.latestDataKeys || [];
-    const result: TimeSeriesChartYAxes = {};
-
-    for (const [id, axis] of Object.entries(yAxes)) {
-      axis.min = this.normalizeAxisLimit(axis.min);
-      axis.max = this.normalizeAxisLimit(axis.max);
-      const minCfg = axis.min;
-      const maxCfg = axis.max;
-
-      const minValid = !!minCfg && (
-        minCfg.type !== ValueSourceType.latestKey ||
-        latestKeys.some(k => this.isYAxisKey(k, minCfg))
-      );
-
-      const maxValid = !!maxCfg && (
-        maxCfg.type !== ValueSourceType.latestKey ||
-        latestKeys.some(k => this.isYAxisKey(k, maxCfg))
-      );
-
-      if (minValid && maxValid) {
-        result[id] = axis;
-      }
-    }
-
-    return result;
-  }
-
-  private updateLatestDataKeys(yAxes: TimeSeriesChartYAxisSettings[]) {
-    if (this.datasource) {
-      let latestKeys = this.datasource.latestDataKeys;
-      if (!latestKeys) {
-        latestKeys = [];
-        this.datasource.latestDataKeys = latestKeys;
-      }
-      const existingYAxisKeys = latestKeys.filter(k => k.settings?.__yAxisMinKey === true || k.settings?.__yAxisMaxKey === true);
-      const foundYAxisKeys: DataKey[] = [];
-
-      for(const yAxis of yAxes) {
-        const min = yAxis.min as ValueSourceConfig;
-        const max = yAxis.max as ValueSourceConfig;
-        if (min.type === ValueSourceType.latestKey) {
-          const found = existingYAxisKeys.find(k => this.isYAxisKey(k, min));
-          if (!found) {
-            const newKey = this.dataKeyCallbacks.generateDataKey(min.latestKey, min.latestKeyType,
-              null, true, null);
-            newKey.settings.__yAxisMinKey = true;
-            latestKeys.push(newKey);
-          } else if (foundYAxisKeys.indexOf(found) === -1) {
-            foundYAxisKeys.push(found);
-          }
-        }
-        if (max.type === ValueSourceType.latestKey) {
-          const found = existingYAxisKeys.find(k => this.isYAxisKey(k, max));
-          if (!found) {
-            const newKey = this.dataKeyCallbacks.generateDataKey(max.latestKey, max.latestKeyType,
-              null, true, null);
-            newKey.settings.__yAxisMaxKey = true;
-            latestKeys.push(newKey);
-          } else if (foundYAxisKeys.indexOf(found) === -1) {
-            foundYAxisKeys.push(found);
-          }
-        }
-      }
-      const toRemove = existingYAxisKeys.filter(k => foundYAxisKeys.indexOf(k) === -1);
-      for (const key of toRemove) {
-        const index = latestKeys.indexOf(key);
-        if (index > -1) {
-          latestKeys.splice(index, 1);
-        }
-      }
-    }
-  }
-
-  private isYAxisKey(d: DataKey, limit: ValueSourceConfig): boolean {
-    return (d.type === DataKeyType.function && d.label === limit.latestKey) ||
-      (d.type !== DataKeyType.function && d.name === limit.latestKey &&
-        d.type === limit.latestKeyType);
-  }
-
-  private normalizeAxisLimit(limit: string | number | ValueSourceConfig): ValueSourceConfig {
-    if (!limit) {
-      return {
-        type: ValueSourceType.constant,
-        value: null,
-        entityAlias: null
-      };
-    } else if (typeof limit === 'number' || typeof limit === 'string') {
-      return {
-        type: ValueSourceType.constant,
-        value: Number(limit),
-        entityAlias: null
-      };
-    }
-    return limit;
-  }
 }

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/chart/time-series-chart-y-axis-row.component.ts

@@ -29,7 +29,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import {
-  AxisPosition,
+  AxisPosition, normalizeAxisLimit,
   timeSeriesAxisPositionTranslations,
   TimeSeriesChartYAxisSettings
 } from '@home/components/widget/lib/chart/time-series-chart.models';
@@ -136,8 +136,8 @@ export class TimeSeriesChartYAxisRowComponent implements ControlValueAccessor, O
 
   writeValue(value: TimeSeriesChartYAxisSettings): void {
     this.modelValue = value;
-    const min = this.normalizeLimit(value.min);
+    const min = normalizeAxisLimit(value.min);
-    const max = this.normalizeLimit(value.max);
+    const max = normalizeAxisLimit(value.max);
 
     this.axisFormGroup.patchValue({
       label: value.label,
@@ -252,27 +252,4 @@ export class TimeSeriesChartYAxisRowComponent implements ControlValueAccessor, O
       entityKeyType: [null, []]
     });
   }
-
-  private normalizeLimit(limit: any) {
-    const base = {
-      type: ValueSourceType.constant,
-      value: null,
-      latestKey: null,
-      latestKeyType: null,
-      entityAlias: null,
-      entityKey: null,
-      entityKeyType: null
-    };
-
-    if (limit == null) return base;
-
-    if (typeof limit === 'number' || typeof limit === 'string') {
-      return { ...base, type: ValueSourceType.constant, value: Number(limit) };
-    }
-
-    return {
-      ...base,
-      ...limit,
-    };
-  }
 }

ui-ngx/src/app/shared/components/color-picker/color-input.base.scss

@@ -0,0 +1,28 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+:host {
+  .color-input-container {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+  .color-input {
+    max-width: 72px;
+    margin-bottom: 4px;
+  }
+}
+
+

ui-ngx/src/app/shared/components/color-picker/color-picker-panel.component.scss

@@ -16,7 +16,7 @@
 @import "../scss/constants";
 
 .tb-color-picker-panel {
-  width: 342px;
+  width: 370px;
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 24px);

ui-ngx/src/app/shared/components/color-picker/color-picker.component.html

@@ -37,10 +37,8 @@
         <mat-option [value]="2">HSLA</mat-option>
       </mat-select>
       <div class="color-input" [ngSwitch]="presentations[presentationControl.value]">
-        <rgba-input-component *ngSwitchCase="'rgba'" label
+        <tb-rgba-input *ngSwitchCase="'rgba'" labelVisible [(color)]="control.value"></tb-rgba-input>
-                              [(color)]="control.value"></rgba-input-component>
+        <tb-hsla-input *ngSwitchCase="'hsla'" labelVisible [(color)]="control.value"></tb-hsla-input>
-        <hsla-input-component *ngSwitchCase="'hsla'" label
-                              [(color)]="control.value"></hsla-input-component>
         <tb-hex-input *ngSwitchCase="'hex'" [(color)]="control.value"></tb-hex-input>
       </div>
     </div>

ui-ngx/src/app/shared/components/color-picker/color-picker.component.scss

@@ -83,7 +83,7 @@
     height: 56px;
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 8px;
 
     .presentation-select {
       font-size: 14px;
@@ -104,7 +104,7 @@
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      justify-content: space-between;
+      justify-content: center;
       gap: 8px;
       @media #{$mat-xs} {
         flex-direction: column;

ui-ngx/src/app/shared/components/color-picker/hex-input.component.scss

@@ -19,11 +19,11 @@
     gap: 8px;
   }
   .hex-input {
-    max-width: 190px;
+    max-width: 220px;
   }
   .alpha-input {
-    min-width: 60px;
+    min-width: 72px;
-    max-width: 60px;
+    max-width: 72px;
   }
 
   ::ng-deep {

ui-ngx/src/app/shared/components/color-picker/hsla-input.component.html

@@ -0,0 +1,54 @@
+<!--
+
+    Copyright © 2016-2026 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.
+
+-->
+<div class="color-input-container">
+  <div class="tb-form-row tb-flex no-gap no-border no-padding column align-center">
+    <mat-form-field class="color-input number" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" [min]="0" [max]="360" [value]="value.getHue()" (inputChange)="onInputChange($event, 'H')"/>
+    </mat-form-field>
+    @if (labelVisible) {
+      <span>H</span>
+    }
+  </div>
+  <div class="tb-form-row tb-flex no-gap no-border no-padding column align-center">
+    <mat-form-field class="color-input number" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" [min]="0" [max]="100" [value]="value.getSaturation()" (inputChange)="onInputChange($event, 'S')" />
+      <span matSuffix>{{suffixValue}}</span>
+    </mat-form-field>
+    @if (labelVisible) {
+      <span>S</span>
+    }
+  </div>
+  <div class="tb-form-row tb-flex no-gap no-border no-padding column align-center">
+    <mat-form-field class="color-input number" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" [min]="0" [max]="100" [value]="value.getLightness()" (inputChange)="onInputChange($event,'L')" />
+      <span matSuffix>{{suffixValue}}</span>
+    </mat-form-field>
+    @if (labelVisible) {
+      <span>L</span>
+    }
+  </div>
+  <div class="tb-form-row tb-flex no-gap no-border no-padding column align-center">
+    <mat-form-field class="color-input number" appearance="outline" subscriptSizing="dynamic">
+      <input matInput type="number" [min]="0" [max]="100" [value]="alphaValue" (inputChange)="onAlphaInputChange($event)" />
+      <span matSuffix>{{suffixValue}}</span>
+    </mat-form-field>
+    @if (labelVisible) {
+      <span>A</span>
+    }
+  </div>
+</div>

ui-ngx/src/app/shared/components/color-picker/hsla-input.component.ts

@@ -0,0 +1,72 @@
+///
+/// Copyright © 2016-2026 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, EventEmitter, Input, Output } from '@angular/core';
+import { Color } from '@iplab/ngx-color-picker';
+import { coerceBoolean } from '@shared/decorators/coercion';
+
+type Channel = 'H' | 'S' | 'L';
+
+@Component({
+  selector: 'tb-hsla-input',
+  templateUrl: './hsla-input.component.html',
+  styleUrl: './color-input.base.scss',
+  standalone: false
+})
+export class HslaInputComponent {
+
+  @Input()
+  public color: Color;
+
+  @Output()
+  public colorChange = new EventEmitter<Color>(false);
+
+  @Input()
+  @coerceBoolean()
+  public labelVisible = false;
+
+  @Input()
+  public suffixValue = '%';
+
+  public get value() {
+    return this.color.getHsla();
+  }
+
+  public get alphaValue(): number {
+    return this.color ? Math.round(this.color.getHsla().getAlpha() * 100) : 0;
+  }
+
+  public onAlphaInputChange(inputValue: number): void {
+    if (!this.color) return;
+    const hsla = this.color.getHsla();
+    const alpha = +inputValue / 100;
+    if (hsla.alpha !== alpha) {
+      const newColor = new Color().setHsla(hsla.getHue(), hsla.getSaturation(), hsla.getLightness(), alpha);
+      this.colorChange.emit(newColor);
+    }
+  }
+
+  public onInputChange(newValue: number, channel: Channel): void {
+    if (!this.color) return;
+    const hsla = this.value;
+    const hue = channel === 'H' ? +newValue : hsla.getHue();
+    const saturation = channel === 'S' ? +newValue : hsla.getSaturation();
+    const lightness = channel === 'L' ? +newValue : hsla.getLightness();
+    if (hue === hsla.getHue() && saturation === hsla.getSaturation() && lightness === hsla.getLightness()) return;
+    const newColor = new Color().setHsla(hue, saturation, lightness, hsla.getAlpha());
+    this.colorChange.emit(newColor);
+  }
+}

ui-ngx/src/app/shared/components/color-picker/input-change.directive.ts

@@ -0,0 +1,46 @@
+///
+/// Copyright © 2016-2026 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 { Directive, EventEmitter, HostBinding, HostListener, Input, numberAttribute, Output } from '@angular/core';
+
+@Directive({
+  selector: '[inputChange]',
+  standalone: false
+})
+export class InputChangeDirective {
+
+  @Input({transform: numberAttribute})
+  @HostBinding('attr.min')
+  min = 0;
+
+  @Input({transform: numberAttribute})
+  @HostBinding('attr.max')
+  max = 255;
+
+  @Output()
+  public inputChange = new EventEmitter<number>();
+
+  @HostListener('input', ['$event'])
+  public inputChanges(event: any): void {
+    const element = event.target as HTMLInputElement || event.srcElement as HTMLInputElement;
+    const value = element.value;
+
+    const numeric = parseFloat(value);
+    if (!isNaN(numeric) && numeric >= this.min && numeric <= this.max) {
+      this.inputChange.emit(numeric);
+    }
+  }
+}

ui-ngx/src/app/shared/components/color-picker/rgba-input.component.html

@@ -0,0 +1,52 @@
+<!--
+
+    Copyright © 2016-2026 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.
+
+-->
+<div class="color-input-container">
+  <div class="tb-form-row tb-flex no-gap no-border no-padding column align-center">
+    <mat-form-field class="color-input number" subscriptSizing="dynamic" appearance="outline">
+      <input matInput  type="number" [min]="0" [max]="255" [value]="value?.getRed()" (inputChange)="onInputChange($event, 'R')" />
+    </mat-form-field>
+    @if (labelVisible) {
+      <span>R</span>
+    }
+  </div>
+  <div class="tb-form-row tb-flex no-gap no-border no-padding column align-center">
+    <mat-form-field class="color-input number" subscriptSizing="dynamic" appearance="outline">
+      <input matInput type="number" [min]="0" [max]="255" [value]="value?.getGreen()" (inputChange)="onInputChange($event, 'G')" />
+    </mat-form-field>
+    @if (labelVisible) {
+      <span>G</span>
+    }
+  </div>
+  <div class="tb-form-row tb-flex no-gap no-border no-padding column align-center">
+    <mat-form-field class="color-input number" subscriptSizing="dynamic" appearance="outline">
+      <input matInput type="number" [min]="0" [max]="255" [value]="value?.getBlue()" (inputChange)="onInputChange($event,'B')" />
+    </mat-form-field>
+  @if (labelVisible) {
+    <span>B</span>
+  }
+  </div>
+  <div class="tb-form-row tb-flex no-gap no-border no-padding column align-center">
+    <mat-form-field class="color-input number" subscriptSizing="dynamic" appearance="outline">
+      <input matInput type="number" [min]="0" [max]="100" [value]="alphaValue" (inputChange)="onAlphaInputChange($event)" />
+      <span matSuffix>{{suffixValue}}</span>
+    </mat-form-field>
+    @if (labelVisible) {
+      <span>A</span>
+    }
+  </div>
+</div>

ui-ngx/src/app/shared/components/color-picker/rgba-input.component.ts

@@ -0,0 +1,71 @@
+///
+/// Copyright © 2016-2026 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, EventEmitter, Input, Output } from '@angular/core';
+import { Color } from '@iplab/ngx-color-picker';
+import { coerceBoolean } from '@shared/decorators/coercion';
+
+type Channel = 'R' | 'G' | 'B';
+
+@Component({
+  selector: 'tb-rgba-input',
+  templateUrl: './rgba-input.component.html',
+  styleUrl: './color-input.base.scss',
+  standalone: false
+})
+export class RgbaInputComponent {
+
+  @Input()
+  public color: Color;
+
+  @Output()
+  public colorChange = new EventEmitter<Color>(false);
+
+  @Input()
+  @coerceBoolean()
+  public labelVisible = false;
+
+  @Input()
+  public suffixValue = '%';
+
+  public get value() {
+    return this.color.getRgba();
+  }
+
+  public get alphaValue(): string {
+    return this.color ? Math.round(this.color.getRgba().getAlpha() * 100).toString() : '';
+  }
+
+  public onAlphaInputChange(inputValue: number): void {
+    if (!this.color) return;
+    const color = this.color.getRgba();
+    const alpha = +inputValue / 100;
+    if (color.getAlpha() !== alpha) {
+      const newColor = new Color().setRgba(color.getRed(), color.getGreen(), color.getBlue(), alpha).toRgbaString();
+      this.colorChange.emit(new Color(newColor));
+    }
+  }
+
+  onInputChange(newValue: number, channel: Channel) {
+    if (!this.color) return;
+    const rgba = this.value;
+    const red   = channel === 'R' ? newValue : rgba.getRed();
+    const green = channel === 'G' ? newValue : rgba.getGreen();
+    const blue  = channel === 'B' ? newValue : rgba.getBlue();
+    if (red === rgba.getRed() && green === rgba.getGreen() && blue === rgba.getBlue()) return;
+    this.colorChange.emit(new Color().setRgba(red, green, blue, rgba.alpha));
+  }
+}

ui-ngx/src/app/shared/shared.module.ts

@@ -239,6 +239,9 @@ import { DateExpirationPipe } from '@shared/pipe/date-expiration.pipe';
 import { EntityLimitExceededDialogComponent } from '@shared/components/dialog/entity-limit-exceeded-dialog.component';
 import { DynamicMatDialogModule } from '@shared/components/dialog/dynamic/dynamic-dialog.module';
 import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS } from '@angular/material/button-toggle';
+import { RgbaInputComponent } from '@shared/components/color-picker/rgba-input.component';
+import { HslaInputComponent } from '@shared/components/color-picker/hsla-input.component';
+import { InputChangeDirective } from '@shared/components/color-picker/input-change.directive';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -466,7 +469,10 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     MqttVersionSelectComponent,
     PasswordRequirementsTooltipComponent,
     TimeUnitInputComponent,
-    StringPatternAutocompleteComponent
+    StringPatternAutocompleteComponent,
+    RgbaInputComponent,
+    HslaInputComponent,
+    InputChangeDirective
   ],
   imports: [
     CommonModule,