@c8y/ngx-components 1023.14.219 → 1023.14.222

package/fesm2022/c8y-ngx-components-widgets-implementations-info-gauge.mjs

@@ -1,20 +1,21 @@
 import * as i0 from '@angular/core';
 import { Pipe, Injectable, inject, ViewChild, Input, Component, Optional, EventEmitter, forwardRef, Output } from '@angular/core';
+import * as i5 from '@c8y/ngx-components/datapoint-selector';
+import { DatapointLabelPipe, DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
 import * as i1 from '@c8y/ngx-components';
-import { ThemeSwitcherService, MeasurementRealtimeService, DatePipe, CommonModule, FormGroupComponent, MessagesComponent, FormsModule } from '@c8y/ngx-components';
+import { translateDatapointUnit, ThemeSwitcherService, MeasurementRealtimeService, DatePipe, DatapointUnitPipe, CommonModule, FormGroupComponent, MessagesComponent, FormsModule } from '@c8y/ngx-components';
 import * as i1$2 from '@angular/common';
 import { AsyncPipe, NgStyle, DecimalPipe } from '@angular/common';
 import { of, BehaviorSubject, switchMap, tap, Subject, takeUntil, debounceTime } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
-import * as i2 from '@c8y/ngx-components/context-dashboard';
+import * as i2$1 from '@c8y/ngx-components/context-dashboard';
 import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
 import * as i1$1 from 'ngx-echarts';
 import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
 import { gettext } from '@c8y/ngx-components/gettext';
+import * as i2 from '@ngx-translate/core';
 import * as i1$3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, Validators, NgForm, ControlContainer, ReactiveFormsModule } from '@angular/forms';
-import * as i5 from '@c8y/ngx-components/datapoint-selector';
-import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
 import { EditorComponent, MonacoEditorMarkerValidatorDirective } from '@c8y/ngx-components/editor';
 import * as i4 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
@@ -385,8 +386,9 @@ const GAUGE_PRESETS = [
 ];
 
 class RadialGaugeService {
-    constructor(c8yDatePipe) {
+    constructor(c8yDatePipe, translate) {
         this.c8yDatePipe = c8yDatePipe;
+        this.translate = translate;
         this.containerSize = 400;
     }
     setChart(chart) {
@@ -532,7 +534,7 @@ class RadialGaugeService {
                             : gaugeOptions?.detailOffsetCenter || [0, 0],
                         formatter: () => {
                             const value = measurement?.value.toFixed(fractionSize) || 0;
-                            const unit = activeDatapointGauge?.unit || measurement?.unit || '';
+                            const unit = translateDatapointUnit(activeDatapointGauge?.unit || measurement?.unit, this.translate);
                             const date = new Date(measurement?.date);
                             const formattedDate = this.c8yDatePipe.transform(date);
                             return `{value|${value}}{unit|${unit}} \n {date|${formattedDate}} `;
@@ -585,7 +587,7 @@ class RadialGaugeService {
                                     show: gaugeOptions?.showMarkPoint,
                                     formatter: () => {
                                         const value = measurement?.value.toFixed(fractionSize) || 0;
-                                        const unit = activeDatapointGauge?.unit || measurement?.unit || '';
+                                        const unit = translateDatapointUnit(activeDatapointGauge?.unit || measurement?.unit, this.translate);
                                         // use -- as fallback in case date is not set (e.g. no measurement yet available for datapoint)
                                         let formattedDate = '--';
                                         if (measurement?.date) {
@@ -743,7 +745,7 @@ class RadialGaugeService {
             return clampedValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeService, deps: [{ token: i1.DatePipe }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RadialGaugeService, decorators: [{
@@ -751,7 +753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.DatePipe }] });
+        }], ctorParameters: () => [{ type: i1.DatePipe }, { type: i2.TranslateService }] });
 
 class RadialGaugeViewComponent {
     constructor() {
@@ -886,8 +888,8 @@ class InfoGaugeWidgetViewComponent {
             datapoint.__target = { name, id };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetViewComponent, deps: [{ token: i2.ContextDashboardComponent, optional: true }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: InfoGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-info-gauge-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "@if (isInfoGauge) {\n  <div class=\"label-value-unit-gauge new-radial\">\n    @if (activeDatapointLabels?.length && isInfoGauge) {\n      <div class=\"gauge-legend\">\n        @for (dp of activeDatapointLabels; track dp) {\n          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {\n            <label\n              class=\"text-truncate\"\n              title=\"{{ dp.label }}\"\n            >\n              {{ dp.label }}\n            </label>\n            @if (!measurement.notFound) {\n              <h3\n                class=\"text-truncate\"\n                title=\"{{ measurement.value | number: fractionSize }} {{\n                  dp.unit || measurement.unit\n                }}\"\n              >\n                {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\n              </h3>\n            } @else {\n              <h3>--</h3>\n            }\n            <p class=\"text-muted m-b-8\">\n              <small>\n                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </small>\n            </p>\n          }\n        }\n      </div>\n    }\n    @if (activeDatapointGauge && isInfoGauge) {\n      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {\n        <div class=\"gauge-svg\">\n          <svg\n            height=\"214px\"\n            width=\"214px\"\n            viewBox=\"0 0 214 214\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <desc>radial gauge</desc>\n            <g\n              id=\"scale\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n              stroke-dasharray=\"1,5\"\n            >\n              <circle\n                id=\"Oval\"\n                stroke=\"#CACECE\"\n                stroke-width=\"7\"\n                cx=\"107\"\n                cy=\"107\"\n                r=\"103\"\n              ></circle>\n              <rect\n                id=\"mask\"\n                height=\"214\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                x=\"0\"\n                y=\"0\"\n                width=\"214\"\n                transform=\"rotate(-45 290 182)\"\n              ></rect>\n            </g>\n            <path\n              class=\"track\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <path\n              class=\"track-value\"\n              [ngStyle]=\"{\n                stroke: measurement.color,\n                'stroke-dashoffset': -measurement.strokeDashOffset\n              }\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <foreignObject\n              class=\"d-flex a-i-center j-c-center\"\n              height=\"100%\"\n              width=\"100%\"\n              requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n            >\n              <div\n                class=\"d-flex d-col fit-h a-i-center j-c-center\"\n                style=\"padding: 3rem\"\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n              >\n                <p\n                  class=\"text-truncate text-center\"\n                  title=\"{{ activeDatapointGauge.label }}\"\n                >\n                  {{ activeDatapointGauge.label }}\n                </p>\n                @if (!measurement.notFound) {\n                  <p\n                    class=\"center-value text-truncate\"\n                    title=\"{{ measurement.value | number: fractionSize }}\"\n                  >\n                    {{ measurement.value | number: fractionSize }}\n                  </p>\n                } @else {\n                  <p class=\"center-value\">--</p>\n                }\n                <p class=\"center-unit strong\">\n                  {{ activeDatapointGauge.unit || measurement.unit }}\n                </p>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </div>\n            </foreignObject>\n          </svg>\n        </div>\n      }\n    }\n    <div class=\"clearfix\"></div>\n  </div>\n}\n@if (!isInfoGauge) {\n  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {\n    <c8y-radial-gauge\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"config.fractionSize\"\n      [gaugeOptions]=\"config.gaugeOptions\"\n      [selectedPresetId]=\"config.selectedPresetId\"\n    ></c8y-radial-gauge>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: InfoGaugeCurrentMeasurementPipe, name: "infoGaugeCurrentMeasurement" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetViewComponent, deps: [{ token: i2$1.ContextDashboardComponent, optional: true }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: InfoGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-info-gauge-widget-view", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "@if (isInfoGauge) {\n  <div class=\"label-value-unit-gauge new-radial\">\n    @if (activeDatapointLabels?.length && isInfoGauge) {\n      <div class=\"gauge-legend\">\n        @for (dp of activeDatapointLabels; track dp) {\n          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {\n            <label\n              class=\"text-truncate\"\n              title=\"{{ dp | datapointLabel }}\"\n            >\n              {{ dp | datapointLabel }}\n            </label>\n            @if (!measurement.notFound) {\n              <h3\n                class=\"text-truncate\"\n                title=\"{{ measurement.value | number: fractionSize }} {{\n                  dp.unit || measurement.unit | datapointUnit\n                }}\"\n              >\n                {{ measurement.value | number: fractionSize }}\n                {{ dp.unit || measurement.unit | datapointUnit }}\n              </h3>\n            } @else {\n              <h3>--</h3>\n            }\n            <p class=\"text-muted m-b-8\">\n              <small>\n                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </small>\n            </p>\n          }\n        }\n      </div>\n    }\n    @if (activeDatapointGauge && isInfoGauge) {\n      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {\n        <div class=\"gauge-svg\">\n          <svg\n            height=\"214px\"\n            width=\"214px\"\n            viewBox=\"0 0 214 214\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <desc>radial gauge</desc>\n            <g\n              id=\"scale\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n              stroke-dasharray=\"1,5\"\n            >\n              <circle\n                id=\"Oval\"\n                stroke=\"#CACECE\"\n                stroke-width=\"7\"\n                cx=\"107\"\n                cy=\"107\"\n                r=\"103\"\n              ></circle>\n              <rect\n                id=\"mask\"\n                height=\"214\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                x=\"0\"\n                y=\"0\"\n                width=\"214\"\n                transform=\"rotate(-45 290 182)\"\n              ></rect>\n            </g>\n            <path\n              class=\"track\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <path\n              class=\"track-value\"\n              [ngStyle]=\"{\n                stroke: measurement.color,\n                'stroke-dashoffset': -measurement.strokeDashOffset\n              }\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <foreignObject\n              class=\"d-flex a-i-center j-c-center\"\n              height=\"100%\"\n              width=\"100%\"\n              requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n            >\n              <div\n                class=\"d-flex d-col fit-h a-i-center j-c-center\"\n                style=\"padding: 3rem\"\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n              >\n                <p\n                  class=\"text-truncate text-center\"\n                  title=\"{{ activeDatapointGauge | datapointLabel }}\"\n                >\n                  {{ activeDatapointGauge | datapointLabel }}\n                </p>\n                @if (!measurement.notFound) {\n                  <p\n                    class=\"center-value text-truncate\"\n                    title=\"{{ measurement.value | number: fractionSize }}\"\n                  >\n                    {{ measurement.value | number: fractionSize }}\n                  </p>\n                } @else {\n                  <p class=\"center-value\">--</p>\n                }\n                <p class=\"center-unit strong\">\n                  {{ activeDatapointGauge.unit || measurement.unit | datapointUnit }}\n                </p>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </div>\n            </foreignObject>\n          </svg>\n        </div>\n      }\n    }\n    <div class=\"clearfix\"></div>\n  </div>\n}\n@if (!isInfoGauge) {\n  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {\n    <c8y-radial-gauge\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"config.fractionSize\"\n      [gaugeOptions]=\"config.gaugeOptions\"\n      [selectedPresetId]=\"config.selectedPresetId\"\n    ></c8y-radial-gauge>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }, { kind: "pipe", type: InfoGaugeCurrentMeasurementPipe, name: "infoGaugeCurrentMeasurement" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }, { kind: "pipe", type: DatapointUnitPipe, name: "datapointUnit" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetViewComponent, decorators: [{
             type: Component,
@@ -897,9 +899,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AsyncPipe,
                         DecimalPipe,
                         DatePipe,
-                        RadialGaugeViewComponent
-                    ], template: "@if (isInfoGauge) {\n  <div class=\"label-value-unit-gauge new-radial\">\n    @if (activeDatapointLabels?.length && isInfoGauge) {\n      <div class=\"gauge-legend\">\n        @for (dp of activeDatapointLabels; track dp) {\n          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {\n            <label\n              class=\"text-truncate\"\n              title=\"{{ dp.label }}\"\n            >\n              {{ dp.label }}\n            </label>\n            @if (!measurement.notFound) {\n              <h3\n                class=\"text-truncate\"\n                title=\"{{ measurement.value | number: fractionSize }} {{\n                  dp.unit || measurement.unit\n                }}\"\n              >\n                {{ measurement.value | number: fractionSize }} {{ dp.unit || measurement.unit }}\n              </h3>\n            } @else {\n              <h3>--</h3>\n            }\n            <p class=\"text-muted m-b-8\">\n              <small>\n                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </small>\n            </p>\n          }\n        }\n      </div>\n    }\n    @if (activeDatapointGauge && isInfoGauge) {\n      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {\n        <div class=\"gauge-svg\">\n          <svg\n            height=\"214px\"\n            width=\"214px\"\n            viewBox=\"0 0 214 214\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <desc>radial gauge</desc>\n            <g\n              id=\"scale\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n              stroke-dasharray=\"1,5\"\n            >\n              <circle\n                id=\"Oval\"\n                stroke=\"#CACECE\"\n                stroke-width=\"7\"\n                cx=\"107\"\n                cy=\"107\"\n                r=\"103\"\n              ></circle>\n              <rect\n                id=\"mask\"\n                height=\"214\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                x=\"0\"\n                y=\"0\"\n                width=\"214\"\n                transform=\"rotate(-45 290 182)\"\n              ></rect>\n            </g>\n            <path\n              class=\"track\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <path\n              class=\"track-value\"\n              [ngStyle]=\"{\n                stroke: measurement.color,\n                'stroke-dashoffset': -measurement.strokeDashOffset\n              }\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <foreignObject\n              class=\"d-flex a-i-center j-c-center\"\n              height=\"100%\"\n              width=\"100%\"\n              requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n            >\n              <div\n                class=\"d-flex d-col fit-h a-i-center j-c-center\"\n                style=\"padding: 3rem\"\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n              >\n                <p\n                  class=\"text-truncate text-center\"\n                  title=\"{{ activeDatapointGauge.label }}\"\n                >\n                  {{ activeDatapointGauge.label }}\n                </p>\n                @if (!measurement.notFound) {\n                  <p\n                    class=\"center-value text-truncate\"\n                    title=\"{{ measurement.value | number: fractionSize }}\"\n                  >\n                    {{ measurement.value | number: fractionSize }}\n                  </p>\n                } @else {\n                  <p class=\"center-value\">--</p>\n                }\n                <p class=\"center-unit strong\">\n                  {{ activeDatapointGauge.unit || measurement.unit }}\n                </p>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </div>\n            </foreignObject>\n          </svg>\n        </div>\n      }\n    }\n    <div class=\"clearfix\"></div>\n  </div>\n}\n@if (!isInfoGauge) {\n  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {\n    <c8y-radial-gauge\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"config.fractionSize\"\n      [gaugeOptions]=\"config.gaugeOptions\"\n      [selectedPresetId]=\"config.selectedPresetId\"\n    ></c8y-radial-gauge>\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: i2.ContextDashboardComponent, decorators: [{
+                        RadialGaugeViewComponent,
+                        DatapointLabelPipe,
+                        DatapointUnitPipe
+                    ], template: "@if (isInfoGauge) {\n  <div class=\"label-value-unit-gauge new-radial\">\n    @if (activeDatapointLabels?.length && isInfoGauge) {\n      <div class=\"gauge-legend\">\n        @for (dp of activeDatapointLabels; track dp) {\n          @if (dp | infoGaugeCurrentMeasurement | async; as measurement) {\n            <label\n              class=\"text-truncate\"\n              title=\"{{ dp | datapointLabel }}\"\n            >\n              {{ dp | datapointLabel }}\n            </label>\n            @if (!measurement.notFound) {\n              <h3\n                class=\"text-truncate\"\n                title=\"{{ measurement.value | number: fractionSize }} {{\n                  dp.unit || measurement.unit | datapointUnit\n                }}\"\n              >\n                {{ measurement.value | number: fractionSize }}\n                {{ dp.unit || measurement.unit | datapointUnit }}\n              </h3>\n            } @else {\n              <h3>--</h3>\n            }\n            <p class=\"text-muted m-b-8\">\n              <small>\n                <div>{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div>{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </small>\n            </p>\n          }\n        }\n      </div>\n    }\n    @if (activeDatapointGauge && isInfoGauge) {\n      @if (activeDatapointGauge | infoGaugeCurrentMeasurement: true | async; as measurement) {\n        <div class=\"gauge-svg\">\n          <svg\n            height=\"214px\"\n            width=\"214px\"\n            viewBox=\"0 0 214 214\"\n            version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          >\n            <desc>radial gauge</desc>\n            <g\n              id=\"scale\"\n              stroke=\"none\"\n              stroke-width=\"1\"\n              fill=\"none\"\n              fill-rule=\"evenodd\"\n              stroke-dasharray=\"1,5\"\n            >\n              <circle\n                id=\"Oval\"\n                stroke=\"#CACECE\"\n                stroke-width=\"7\"\n                cx=\"107\"\n                cy=\"107\"\n                r=\"103\"\n              ></circle>\n              <rect\n                id=\"mask\"\n                height=\"214\"\n                stroke=\"none\"\n                fill-rule=\"evenodd\"\n                x=\"0\"\n                y=\"0\"\n                width=\"214\"\n                transform=\"rotate(-45 290 182)\"\n              ></rect>\n            </g>\n            <path\n              class=\"track\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <path\n              class=\"track-value\"\n              [ngStyle]=\"{\n                stroke: measurement.color,\n                'stroke-dashoffset': -measurement.strokeDashOffset\n              }\"\n              d=\"M 107 27 a 80 80 0 1 0.1 0 Z\"\n              transform=\"rotate(-135 107 107)\"\n            ></path>\n            <foreignObject\n              class=\"d-flex a-i-center j-c-center\"\n              height=\"100%\"\n              width=\"100%\"\n              requiredFeatures=\"http://www.w3.org/TR/SVG11/feature#Extensibility\"\n            >\n              <div\n                class=\"d-flex d-col fit-h a-i-center j-c-center\"\n                style=\"padding: 3rem\"\n                xmlns=\"http://www.w3.org/1999/xhtml\"\n              >\n                <p\n                  class=\"text-truncate text-center\"\n                  title=\"{{ activeDatapointGauge | datapointLabel }}\"\n                >\n                  {{ activeDatapointGauge | datapointLabel }}\n                </p>\n                @if (!measurement.notFound) {\n                  <p\n                    class=\"center-value text-truncate\"\n                    title=\"{{ measurement.value | number: fractionSize }}\"\n                  >\n                    {{ measurement.value | number: fractionSize }}\n                  </p>\n                } @else {\n                  <p class=\"center-value\">--</p>\n                }\n                <p class=\"center-unit strong\">\n                  {{ activeDatapointGauge.unit || measurement.unit | datapointUnit }}\n                </p>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumDate' }}</div>\n                <div class=\"center-date-time\">{{ measurement.date | c8yDate: 'mediumTime' }}</div>\n              </div>\n            </foreignObject>\n          </svg>\n        </div>\n      }\n    }\n    <div class=\"clearfix\"></div>\n  </div>\n}\n@if (!isInfoGauge) {\n  @if (activeDatapointGauge | infoGaugeCurrentMeasurement | async; as measurement) {\n    <c8y-radial-gauge\n      [activeDatapointGauge]=\"activeDatapointGauge\"\n      [measurement]=\"measurement\"\n      [fractionSize]=\"config.fractionSize\"\n      [gaugeOptions]=\"config.gaugeOptions\"\n      [selectedPresetId]=\"config.selectedPresetId\"\n    ></c8y-radial-gauge>\n  }\n}\n" }]
+        }], ctorParameters: () => [{ type: i2$1.ContextDashboardComponent, decorators: [{
                     type: Optional
                 }] }, { type: i1.DynamicComponentComponent, decorators: [{
                     type: Optional
@@ -1193,7 +1197,7 @@ class InfoGaugeWidgetConfigComponent {
             ]
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetConfigComponent, deps: [{ token: i1$3.FormBuilder }, { token: i1$3.NgForm }, { token: i2.WidgetConfigComponent }, { token: i2.WidgetConfigService }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetConfigComponent, deps: [{ token: i1$3.FormBuilder }, { token: i1$3.NgForm }, { token: i2$1.WidgetConfigComponent }, { token: i2$1.WidgetConfigService }, { token: i1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: InfoGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-info-gauge-widget-config", inputs: { config: "config" }, providers: [MeasurementRealtimeService], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: EditorComponent, descendants: true }, { propertyName: "previewMapSet", first: true, predicate: ["gaugePreview"], descendants: true }], ngImport: i0, template: "<form\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n        <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n      </c8y-form-group>\n      @if (formGroup.errors?.noActiveDatapoint) {\n        <div\n          class=\"alert alert-info\"\n          role=\"alert\"\n          translate\n        >\n          At least one data point for the labels or the gauge needs to be selected.\n        </div>\n      }\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Multiple label and value pairs' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        formControlName=\"datapointsLabels\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Gauge`display`' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        [maxActiveCount]=\"1\"\n        formControlName=\"datapointsGauge\"\n      ></c8y-datapoint-selection-list>\n    </div>\n  } @else {\n    <c8y-datapoint-selection-list\n      class=\"bg-inherit d-block\"\n      listTitle=\"{{ 'Data points`display`' | translate }}\"\n      name=\"datapoints\"\n      [defaultFormOptions]=\"defaultFormOptions\"\n      [config]=\"datapointSelectionConfig\"\n      [minActiveCount]=\"0\"\n      [maxActiveCount]=\"1\"\n      formControlName=\"datapointsGauge\"\n    ></c8y-datapoint-selection-list>\n\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (this.formGroup.value.datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (this.formGroup.value.datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div style=\"height: 300px\">\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small translate>\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: i1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i4.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: EditorComponent, selector: "c8y-editor", inputs: ["editorOptions", "theme"], outputs: ["editorInit"] }, { kind: "directive", type: MonacoEditorMarkerValidatorDirective, selector: "c8y-editor [monacoEditorMarkerValidator]" }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i5.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "component", type: PresetPreviewComponent, selector: "c8y-preset-preview", inputs: ["ALL_GAUGE_PRESETS"], outputs: ["onPresetChange"] }, { kind: "component", type: InfoGaugeWidgetViewComponent, selector: "c8y-info-gauge-widget-view", inputs: ["config"] }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: InfoGaugeWidgetConfigComponent, decorators: [{
@@ -1211,7 +1215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         PresetPreviewComponent,
                         InfoGaugeWidgetViewComponent
                     ], template: "<form\n  class=\"fit-h\"\n  [formGroup]=\"formGroup\"\n>\n  @if (isInfoGauge) {\n    <div class=\"m-l-16 m-r-16\">\n      <c8y-form-group class=\"p-t-8\">\n        <label translate>Decimal places</label>\n        <input\n          class=\"form-control\"\n          name=\"fractionSize\"\n          type=\"number\"\n          formControlName=\"fractionSize\"\n          step=\"1\"\n        />\n        <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n      </c8y-form-group>\n      @if (formGroup.errors?.noActiveDatapoint) {\n        <div\n          class=\"alert alert-info\"\n          role=\"alert\"\n          translate\n        >\n          At least one data point for the labels or the gauge needs to be selected.\n        </div>\n      }\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Multiple label and value pairs' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        formControlName=\"datapointsLabels\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top p-t-16 d-block\"\n        listTitle=\"{{ 'Gauge`display`' | translate }}\"\n        name=\"datapoints\"\n        [defaultFormOptions]=\"defaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        [minActiveCount]=\"0\"\n        [maxActiveCount]=\"1\"\n        formControlName=\"datapointsGauge\"\n      ></c8y-datapoint-selection-list>\n    </div>\n  } @else {\n    <c8y-datapoint-selection-list\n      class=\"bg-inherit d-block\"\n      listTitle=\"{{ 'Data points`display`' | translate }}\"\n      name=\"datapoints\"\n      [defaultFormOptions]=\"defaultFormOptions\"\n      [config]=\"datapointSelectionConfig\"\n      [minActiveCount]=\"0\"\n      [maxActiveCount]=\"1\"\n      formControlName=\"datapointsGauge\"\n    ></c8y-datapoint-selection-list>\n\n    <c8y-form-group class=\"p-t-8 p-r-16 p-l-16\">\n      <label translate>Decimal places</label>\n      <input\n        class=\"form-control\"\n        name=\"fractionSize\"\n        type=\"number\"\n        formControlName=\"fractionSize\"\n        step=\"1\"\n      />\n      <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n    </c8y-form-group>\n\n    <div class=\"form-group p-r-16 p-l-16 m-b-0\">\n      <legend>\n        {{ 'Presets' | translate }}\n      </legend>\n      <c8y-preset-preview\n        formControlName=\"gaugePresetId\"\n        [ALL_GAUGE_PRESETS]=\"ALL_GAUGE_PRESETS\"\n        (onPresetChange)=\"onRadioPresetChange($event)\"\n      ></c8y-preset-preview>\n    </div>\n\n    <div class=\"p-16\">\n      <button\n        class=\"btn btn-default\"\n        aria-controls=\"advancedCollapse\"\n        [attr.aria-expanded]=\"showAdvancedOptions\"\n        type=\"button\"\n        (click)=\"showAdvancedOptions = !showAdvancedOptions\"\n      >\n        {{ showAdvancedOptions ? hideAdvancedOptionsLabel : showAdvancedOptionsLabel }}\n      </button>\n    </div>\n\n    <div\n      class=\"collapse\"\n      id=\"advancedCollapse\"\n      [collapse]=\"!showAdvancedOptions\"\n      [isAnimated]=\"true\"\n    >\n      <div\n        class=\"fit-h\"\n        style=\"min-height: 400px\"\n      >\n        <c8y-editor\n          [ngModel]=\"gaugeOptionsString\"\n          (ngModelChange)=\"gaugeJSONChange($event)\"\n          (editorInit)=\"assignSchema()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          monacoEditorMarkerValidator\n        ></c8y-editor>\n      </div>\n    </div>\n  }\n</form>\n\n<ng-template #gaugePreview>\n  @if (\n    (this.formGroup.value.datapointsGauge?.length > 0 && activeDatapointGauge) ||\n    (this.formGroup.value.datapointsLabels?.length > 0 && activeDatapointLabel)\n  ) {\n    <div style=\"height: 300px\">\n      <c8y-info-gauge-widget-view [config]=\"previewConfig\"></c8y-info-gauge-widget-view>\n    </div>\n  } @else {\n    <div class=\"d-col a-i-start j-c-center\">\n      <c8y-ui-empty-state\n        [icon]=\"'c8y-data-points'\"\n        [title]=\"'No data points selected' | translate\"\n        [subtitle]=\"'Select data point to render content' | translate\"\n        [horizontal]=\"false\"\n        data-cy=\"info-gauge--empty-state-no-data-point-selected\"\n      >\n        <p c8y-guide-docs>\n          <small translate>\n            Find out more in the\n            <a c8y-guide-href=\"/docs/cockpit/widgets-collection/#info-gauge\">user documentation</a>\n            .\n          </small>\n        </p>\n      </c8y-ui-empty-state>\n    </div>\n  }\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i1$3.NgForm }, { type: i2.WidgetConfigComponent }, { type: i2.WidgetConfigService }, { type: i1.DynamicComponentComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i1$3.NgForm }, { type: i2$1.WidgetConfigComponent }, { type: i2$1.WidgetConfigService }, { type: i1.DynamicComponentComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { config: [{
                 type: Input