@c8y/ngx-components 1024.19.3 → 1024.19.10

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

@@ -5,7 +5,7 @@ import { isEqual, cloneDeep } from 'lodash-es';
 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, DatapointLabelPipe, WidgetTimeContextMediatorService, WidgetTimeContextDateRangeService, ThemeSwitcherService, DismissAlertStrategy, DynamicComponentAlert, CoreModule, MeasurementRealtimeService, AlarmRealtimeService, EventRealtimeService } from '@c8y/ngx-components';
 import chroma from 'chroma-js';
 import * as echarts from 'echarts';
 import * as i1 from '@ngx-translate/core';
@@ -17,7 +17,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';
@@ -120,7 +120,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: {
@@ -295,9 +295,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();
@@ -412,6 +414,7 @@ class ChartTypesService {
                 color: color
             },
             emphasis: {
+                disabled: true,
                 scale: 1.2,
                 itemStyle: {
                     color: color
@@ -1629,6 +1632,15 @@ 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. `DatapointsGraphWidgetViewComponent` derives the same string the same way, since
+     * `toggleSeriesByName` matches series on exact string equality.
+     */
+    getTranslatedLabel(dp) {
+        return translateDatapointLabel(dp, this.translate);
+    }
     getSingleSeries(dp, renderType, idx, isMinMaxChart = false, displayOptions, seriesType = '', multiRenderTypeLabel) {
         const datapointId = dp.__target?.id + dp.fragment + dp.series;
         const isLine = dp.lineType === 'line' ||
@@ -1654,15 +1666,17 @@ class EchartsOptionsService {
         const displayType = isMinMaxChart && renderType === 'min' ? 'min — max' : effectiveLabel;
         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}${renderTypeSuffix}`,
             name: displayType
-                ? `[${displayType}] ${dp.label} (${dp.__target?.['name']})`
-                : `${dp.label} (${dp.__target?.['name']})`,
-            datapointLabel: displayType ? `[${displayType}] ${dp.label || ''}` : dp.label || '',
+                ? `[${displayType}] ${this.getTranslatedLabel(dp)} (${dp.__target?.['name']})`
+                : `${this.getTranslatedLabel(dp)} (${dp.__target?.['name']})`,
+            datapointLabel: displayType
+                ? `[${displayType}] ${this.getTranslatedLabel(dp)}`
+                : this.getTranslatedLabel(dp),
             data,
             ...(displayOptions.forceMergeDatapoints ? {} : { yAxisIndex: idx }),
             ...this.chartTypesService.getSeriesOptions(dpForSeries, isMinMaxChart, renderType),
@@ -1713,7 +1727,7 @@ class EchartsOptionsService {
             datapointId,
             datapointUnit: '',
             id: `${datapointId}/band-max`,
-            name: `[band-max] ${dp.label} (${dp.__target?.['name']})`,
+            name: `[band-max] ${this.getTranslatedLabel(dp)} (${dp.__target?.['name']})`,
             datapointLabel: '',
             typeOfSeries: 'fake',
             type: 'line',
@@ -1729,10 +1743,10 @@ class EchartsOptionsService {
         // a negative diff on a positive sum (or vice versa), leaving it at its raw value.
         const bandMinSeries = {
             datapointId,
-            datapointUnit: dp.unit || '',
+            datapointUnit: translateDatapointUnit(dp, this.translate),
             id: `${datapointId}/band-area`,
-            name: `[band] ${dp.label} (${dp.__target?.['name']})`,
-            datapointLabel: `[band] ${dp.label || ''}`,
+            name: `[band] ${this.getTranslatedLabel(dp)} (${dp.__target?.['name']})`,
+            datapointLabel: `[band] ${this.getTranslatedLabel(dp)}`,
             typeOfSeries: 'fake',
             type: 'line',
             stack: stackId,
@@ -1747,10 +1761,10 @@ class EchartsOptionsService {
         // Visible max line — not stacked, drawn at actual maxVal.
         const maxSeries = {
             datapointId,
-            datapointUnit: dp.unit || '',
+            datapointUnit: translateDatapointUnit(dp, this.translate),
             id: `${datapointId}/max`,
-            name: `[max] ${dp.label} (${dp.__target?.['name']})`,
-            datapointLabel: `[max] ${dp.label || ''}`,
+            name: `[max] ${this.getTranslatedLabel(dp)} (${dp.__target?.['name']})`,
+            datapointLabel: `[max] ${this.getTranslatedLabel(dp)}`,
             data: maxData,
             ...this.chartTypesService.getSeriesOptions({ ...dp, color: maxColor }, true, 'max'),
             ...yAxisIndex
@@ -1758,10 +1772,10 @@ class EchartsOptionsService {
         // Visible min line — not stacked, drawn at actual minVal. Tooltip shows combined [min — max].
         const minSeries = {
             datapointId,
-            datapointUnit: dp.unit || '',
+            datapointUnit: translateDatapointUnit(dp, this.translate),
             id: `${datapointId}/min`,
-            name: `[min — max] ${dp.label} (${dp.__target?.['name']})`,
-            datapointLabel: `[min — max] ${dp.label || ''}`,
+            name: `[min — max] ${this.getTranslatedLabel(dp)} (${dp.__target?.['name']})`,
+            datapointLabel: `[min — max] ${this.getTranslatedLabel(dp)}`,
             tooltipColor: bandColor,
             data: minData,
             ...this.chartTypesService.getSeriesOptions({ ...dp, color: minColor }, true, 'min'),
@@ -2624,6 +2638,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 = '';
     }
@@ -2646,15 +2661,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: "21.2.19", ngImport: i0, type: SelectAggregatedDatapointComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SelectAggregatedDatapointComponent, decorators: [{
             type: Component,
@@ -2668,9 +2683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         BsDropdownModule,
                         A11yModule,
                         IconDirective,
-                        NgIf,
-                        NgForOf
-                    ], changeDetection: ChangeDetectionStrategy.Eager, 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
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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: [{