@c8y/ngx-components 1023.14.220 → 1023.14.222

package/fesm2022/c8y-ngx-components-echart.mjs

@@ -4,7 +4,7 @@ import { gettext } from '@c8y/ngx-components/gettext';
 import { from, merge, interval, BehaviorSubject, of, lastValueFrom, defer, forkJoin } from 'rxjs';
 import { mergeMap, map, tap, throttleTime, buffer, switchMap } from 'rxjs/operators';
 import * as i1$1 from '@c8y/ngx-components';
-import { CommonModule, FormsModule, IconDirective, C8yTranslatePipe, WidgetTimeContextMediatorService, WidgetTimeContextDateRangeService, ThemeSwitcherService, DismissAlertStrategy, DynamicComponentAlert, CoreModule, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService } from '@c8y/ngx-components';
+import { translateDatapointUnit, translateDatapointLabel, CommonModule, FormsModule, IconDirective, C8yTranslatePipe, WidgetTimeContextMediatorService, WidgetTimeContextDateRangeService, ThemeSwitcherService, DismissAlertStrategy, DynamicComponentAlert, CoreModule, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService } from '@c8y/ngx-components';
 import * as echarts from 'echarts';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
@@ -15,7 +15,7 @@ import * as i4 from '@c8y/ngx-components/alarms';
 import { AlarmsModule, AlarmSeverityToIconPipe, AlarmSeverityToLabelPipe } from '@c8y/ngx-components/alarms';
 import { INTERVALS } from '@c8y/ngx-components/interval-picker';
 import * as i1$2 from '@angular/common';
-import { NgIf, NgForOf, CommonModule as CommonModule$1 } from '@angular/common';
+import { CommonModule as CommonModule$1 } from '@angular/common';
 import * as i2$1 from 'ngx-echarts';
 import { NgxEchartsModule, NGX_ECHARTS_CONFIG } from 'ngx-echarts';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
@@ -26,6 +26,7 @@ import * as i2 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import * as i3 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import { DatapointLabelPipe } from '@c8y/ngx-components/datapoint-selector';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 var DATE_SELECTION_EXTENDED;
@@ -105,7 +106,7 @@ class YAxisService {
         if (YAxisOptions.forceMergeDatapoints) {
             return {
                 name: Array.from(datapointsWithValues)
-                    .map((dp, index) => `{${index}|${dp.unit}}`)
+                    .map((dp, index) => `{${index}|${translateDatapointUnit(dp, this.translate)}}`)
                     .join(' /'),
                 nameLocation: 'middle',
                 nameTruncate: {
@@ -276,9 +277,11 @@ class YAxisService {
             return '';
         }
         if (!options.mergeMatchingDatapoints || !isFirstOccurrence) {
-            return `${dp.label} [${dp.unit}]`;
+            return `${translateDatapointLabel(dp, this.translate)} [${translateDatapointUnit(dp, this.translate)}]`;
         }
-        return uniqueUnitDps.map((dp, index) => `{${index}|${dp.unit}}`).join(' / ');
+        return uniqueUnitDps
+            .map((dp, index) => `{${index}|${translateDatapointUnit(dp, this.translate)}}`)
+            .join(' / ');
     }
     getDecimalPlaces(num) {
         const numStr = num.toString();
@@ -1459,6 +1462,14 @@ class EchartsOptionsService {
             }
         }, []);
     }
+    /**
+     * Builds the display name of a datapoint. Passing the whole datapoint lets `translateDatapointLabel`
+     * apply its `fragment → series` fallback, so an unlabeled datapoint still gets an informative
+     * name.
+     */
+    getTranslatedLabel(dp) {
+        return translateDatapointLabel(dp, this.translate);
+    }
     getSingleSeries(dp, renderType, idx, isMinMaxChart = false, displayOptions, seriesType = '') {
         const datapointId = dp.__target?.id + dp.fragment + dp.series;
         const isAggr = seriesType === this.AGGREGATED_SERIES_TYPE;
@@ -1470,13 +1481,13 @@ class EchartsOptionsService {
             ]);
         return {
             datapointId,
-            datapointUnit: renderType !== 'count' ? dp.unit : '',
+            datapointUnit: renderType !== 'count' ? translateDatapointUnit(dp, this.translate) : '',
             // 'id' property is needed as 'seriesId' in tooltip formatter
             id: isMinMaxChart
                 ? `${datapointId}/${renderType}${seriesType}`
                 : `${datapointId}${seriesType}`,
-            name: `${dp.label} (${dp.__target?.['name']})`,
-            datapointLabel: dp.label || '',
+            name: `${this.getTranslatedLabel(dp)} (${dp.__target?.['name']})`,
+            datapointLabel: this.getTranslatedLabel(dp),
             data,
             ...(displayOptions.forceMergeDatapoints ? {} : { yAxisIndex: idx }),
             ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType)
@@ -2068,6 +2079,7 @@ class SelectAggregatedDatapointComponent {
         this.value = null;
         this.valueChange = new EventEmitter();
         this.chartHelpersService = inject(ChartHelpersService);
+        this.translate = inject(TranslateService);
         this.selectedDatapointLabel = gettext('Select data point');
         this.selectedDatapointColor = '';
     }
@@ -2090,15 +2102,15 @@ class SelectAggregatedDatapointComponent {
         }
         const found = this.chartHelpersService.findMatchingDatapoint(this.activeDatapoints, this.value);
         if (this.value && !found) {
-            this.selectedDatapointLabel = this.value.label || '';
+            this.selectedDatapointLabel = translateDatapointLabel(this.value, this.translate);
             this.selectedDatapointColor = this.value.color || '';
             return;
         }
-        this.selectedDatapointLabel = found?.label || '';
+        this.selectedDatapointLabel = translateDatapointLabel(found, this.translate);
         this.selectedDatapointColor = found?.color || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectAggregatedDatapointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SelectAggregatedDatapointComponent, isStandalone: true, selector: "c8y-select-aggregated-datapoint", inputs: { activeDatapoints: "activeDatapoints", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "d-contents" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"dropdown dropup\"\n  dropdown\n  #datapointDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"datapointDropdown.isOpen\"\n  *ngIf=\"activeDatapoints?.length > 0\"\n>\n  <ng-template #selectedDatapoint>\n    <div class=\"text-left\">\n      <strong>{{ selectedDatapointLabel }}</strong>\n      <br />\n      {{ 'Click to change' | translate }}\n    </div>\n  </ng-template>\n  <button\n    class=\"btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown\"\n    title=\"{{'Select a data point to view its aggregated values in the time slider.' | translate }}\"\n    type=\"button\"\n    dropdownToggle\n    >\n    <span\n      [style.background-color]=\"selectedDatapointColor\"\n      style=\"display: inline-block; width: 16px; height: 16px; border-radius: 50%\"\n    ></span>\n    <span class=\"caret\"></span>\n  </button>\n  <ul\n    class=\"dropdown-menu dropdown-menu-right\"\n    *dropdownMenu\n  >\n    <li *ngFor=\"let datapoint of activeDatapoints\">\n      <button\n        class=\"p-r-8\"\n        type=\"button\"\n        (click)=\"changeDatapointSelection(datapoint)\"\n      >\n        <span\n          class=\"d-inline-block m-r-4\"\n          [style.background-color]=\"datapoint?.color\"\n          style=\"width: 16px; height: 16px; border-radius: 50%\"\n        ></span>\n        <span class=\"text-truncate\" style=\"max-width:220px!important\" title=\"{{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\">\n          {{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\n        </span>\n        <span\n          class=\"m-l-auto flex-no-shrink\"\n          *ngIf=\"\n            datapoint.__target.id === value?.__target.id &&\n            datapoint.fragment === value?.fragment &&\n            datapoint.series === value?.series\n          \"\n        >\n          <i\n            class=\"text-success h4\"\n            [c8yIcon]=\"'check'\"\n          ></i>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n<button\n  class=\"btn-help\"\n  [attr.aria-label]=\"'Help' | translate\"\n  popover=\"{{\n    'Select a data point to view its aggregated values in the time slider.' | translate\n  }}\"\n  placement=\"left\"\n  triggers=\"focus\"\n  container=\"body\"\n></button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SelectAggregatedDatapointComponent, isStandalone: true, selector: "c8y-select-aggregated-datapoint", inputs: { activeDatapoints: "activeDatapoints", value: "value" }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "d-contents" }, usesOnChanges: true, ngImport: i0, template: "@if (activeDatapoints?.length > 0) {\n  <div\n    class=\"dropdown dropup\"\n    dropdown\n    #datapointDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"datapointDropdown.isOpen\"\n  >\n    <ng-template #selectedDatapoint>\n      <div class=\"text-left\">\n        <strong>{{ selectedDatapointLabel }}</strong>\n        <br />\n        {{ 'Click to change' | translate }}\n      </div>\n    </ng-template>\n    <button\n      class=\"btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown\"\n      title=\"{{\n        'Select a data point to view its aggregated values in the time slider.' | translate\n      }}\"\n      type=\"button\"\n      dropdownToggle\n    >\n      <span\n        [style.background-color]=\"selectedDatapointColor\"\n        style=\"display: inline-block; width: 16px; height: 16px; border-radius: 50%\"\n      ></span>\n      <span class=\"caret\"></span>\n    </button>\n    <ul\n      class=\"dropdown-menu dropdown-menu-right\"\n      *dropdownMenu\n    >\n      @for (datapoint of activeDatapoints; track datapoint) {\n        <li>\n          <button\n            class=\"p-r-8\"\n            type=\"button\"\n            (click)=\"changeDatapointSelection(datapoint)\"\n          >\n            <span\n              class=\"d-inline-block m-r-4\"\n              [style.background-color]=\"datapoint?.color\"\n              style=\"width: 16px; height: 16px; border-radius: 50%\"\n            ></span>\n            <span\n              class=\"text-truncate\"\n              style=\"max-width: 220px !important\"\n              title=\"{{ datapoint | datapointLabel }}\"\n            >\n              {{ datapoint | datapointLabel }}\n            </span>\n            @if (\n              datapoint.__target.id === value?.__target.id &&\n              datapoint.fragment === value?.fragment &&\n              datapoint.series === value?.series\n            ) {\n              <span class=\"m-l-auto flex-no-shrink\">\n                <i\n                  class=\"text-success h4\"\n                  [c8yIcon]=\"'check'\"\n                ></i>\n              </span>\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  </div>\n}\n<button\n  class=\"btn-help\"\n  [attr.aria-label]=\"'Help' | translate\"\n  popover=\"{{\n    'Select a data point to view its aggregated values in the time slider.' | translate\n  }}\"\n  placement=\"left\"\n  triggers=\"focus\"\n  container=\"body\"\n></button>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i1$4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i2.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i2.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i2.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatapointLabelPipe, name: "datapointLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectAggregatedDatapointComponent, decorators: [{
             type: Component,
@@ -2112,9 +2124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         BsDropdownModule,
                         A11yModule,
                         IconDirective,
-                        NgIf,
-                        NgForOf
-                    ], template: "<div\n  class=\"dropdown dropup\"\n  dropdown\n  #datapointDropdown=\"bs-dropdown\"\n  [cdkTrapFocus]=\"datapointDropdown.isOpen\"\n  *ngIf=\"activeDatapoints?.length > 0\"\n>\n  <ng-template #selectedDatapoint>\n    <div class=\"text-left\">\n      <strong>{{ selectedDatapointLabel }}</strong>\n      <br />\n      {{ 'Click to change' | translate }}\n    </div>\n  </ng-template>\n  <button\n    class=\"btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown\"\n    title=\"{{'Select a data point to view its aggregated values in the time slider.' | translate }}\"\n    type=\"button\"\n    dropdownToggle\n    >\n    <span\n      [style.background-color]=\"selectedDatapointColor\"\n      style=\"display: inline-block; width: 16px; height: 16px; border-radius: 50%\"\n    ></span>\n    <span class=\"caret\"></span>\n  </button>\n  <ul\n    class=\"dropdown-menu dropdown-menu-right\"\n    *dropdownMenu\n  >\n    <li *ngFor=\"let datapoint of activeDatapoints\">\n      <button\n        class=\"p-r-8\"\n        type=\"button\"\n        (click)=\"changeDatapointSelection(datapoint)\"\n      >\n        <span\n          class=\"d-inline-block m-r-4\"\n          [style.background-color]=\"datapoint?.color\"\n          style=\"width: 16px; height: 16px; border-radius: 50%\"\n        ></span>\n        <span class=\"text-truncate\" style=\"max-width:220px!important\" title=\"{{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\">\n          {{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}\n        </span>\n        <span\n          class=\"m-l-auto flex-no-shrink\"\n          *ngIf=\"\n            datapoint.__target.id === value?.__target.id &&\n            datapoint.fragment === value?.fragment &&\n            datapoint.series === value?.series\n          \"\n        >\n          <i\n            class=\"text-success h4\"\n            [c8yIcon]=\"'check'\"\n          ></i>\n        </span>\n      </button>\n    </li>\n  </ul>\n</div>\n<button\n  class=\"btn-help\"\n  [attr.aria-label]=\"'Help' | translate\"\n  popover=\"{{\n    'Select a data point to view its aggregated values in the time slider.' | translate\n  }}\"\n  placement=\"left\"\n  triggers=\"focus\"\n  container=\"body\"\n></button>\n" }]
+                        DatapointLabelPipe
+                    ], template: "@if (activeDatapoints?.length > 0) {\n  <div\n    class=\"dropdown dropup\"\n    dropdown\n    #datapointDropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"datapointDropdown.isOpen\"\n  >\n    <ng-template #selectedDatapoint>\n      <div class=\"text-left\">\n        <strong>{{ selectedDatapointLabel }}</strong>\n        <br />\n        {{ 'Click to change' | translate }}\n      </div>\n    </ng-template>\n    <button\n      class=\"btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown\"\n      title=\"{{\n        'Select a data point to view its aggregated values in the time slider.' | translate\n      }}\"\n      type=\"button\"\n      dropdownToggle\n    >\n      <span\n        [style.background-color]=\"selectedDatapointColor\"\n        style=\"display: inline-block; width: 16px; height: 16px; border-radius: 50%\"\n      ></span>\n      <span class=\"caret\"></span>\n    </button>\n    <ul\n      class=\"dropdown-menu dropdown-menu-right\"\n      *dropdownMenu\n    >\n      @for (datapoint of activeDatapoints; track datapoint) {\n        <li>\n          <button\n            class=\"p-r-8\"\n            type=\"button\"\n            (click)=\"changeDatapointSelection(datapoint)\"\n          >\n            <span\n              class=\"d-inline-block m-r-4\"\n              [style.background-color]=\"datapoint?.color\"\n              style=\"width: 16px; height: 16px; border-radius: 50%\"\n            ></span>\n            <span\n              class=\"text-truncate\"\n              style=\"max-width: 220px !important\"\n              title=\"{{ datapoint | datapointLabel }}\"\n            >\n              {{ datapoint | datapointLabel }}\n            </span>\n            @if (\n              datapoint.__target.id === value?.__target.id &&\n              datapoint.fragment === value?.fragment &&\n              datapoint.series === value?.series\n            ) {\n              <span class=\"m-l-auto flex-no-shrink\">\n                <i\n                  class=\"text-success h4\"\n                  [c8yIcon]=\"'check'\"\n                ></i>\n              </span>\n            }\n          </button>\n        </li>\n      }\n    </ul>\n  </div>\n}\n<button\n  class=\"btn-help\"\n  [attr.aria-label]=\"'Help' | translate\"\n  popover=\"{{\n    'Select a data point to view its aggregated values in the time slider.' | translate\n  }}\"\n  placement=\"left\"\n  triggers=\"focus\"\n  container=\"body\"\n></button>\n" }]
         }], propDecorators: { activeDatapoints: [{
                 type: Input
             }], value: [{