@c8y/ngx-components 1022.33.0 → 1022.35.1

package/fesm2022/c8y-ngx-components-widgets-implementations-datapoints-graph.mjs

@@ -3,7 +3,8 @@ import { inject, ViewChild, Input, Optional, Component } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { FormBuilder, NgForm, Validators } from '@angular/forms';
 import * as i2 from '@c8y/ngx-components';
-import { WidgetTimeContextDateRangeService, GainsightService, gettext, CommonModule, CoreModule, FormsModule, AGGREGATION_ICONS, AGGREGATION_TEXTS } from '@c8y/ngx-components';
+import { WidgetTimeContextDateRangeService, GainsightService, CommonModule, CoreModule, FormsModule, AGGREGATION_ICONS, AGGREGATION_TEXTS } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
 import * as i2$1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
@@ -19,7 +20,7 @@ import * as i5$1 from 'ngx-bootstrap/tooltip';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import * as i6 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
-import { ChartHelpersService, DATE_SELECTION_EXTENDED, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, ChartsComponent, ChartEventsService, ChartAlarmsService } from '@c8y/ngx-components/echart';
+import { ChartHelpersService, DATE_SELECTION_EXTENDED, CHART_VIEW_CONTEXT, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH, ChartsComponent, ChartEventsService, ChartAlarmsService } from '@c8y/ngx-components/echart';
 import { TimeContextComponent } from '@c8y/ngx-components/time-context';
 import * as i5 from '@angular/common';
 import { CommonModule as CommonModule$1 } from '@angular/common';
@@ -70,6 +71,7 @@ class DatapointsGraphWidgetConfigComponent {
         this.datapointSelectionConfig = {};
         this.activeDatapointsExists = false;
         this.alarmsOrEventsHaveNoMatchingDps = false;
+        this.chartViewContext = CHART_VIEW_CONTEXT.WIDGET_CONFIG;
         this.destroy$ = new Subject();
         this.formGroup = this.initForm();
     }
@@ -176,6 +178,10 @@ class DatapointsGraphWidgetConfigComponent {
             displayDateSelection: false
         });
     }
+    updateAggregatedSliderDatapoint(selectedDatapoint) {
+        const aggregatedDatapoint = this.chartHelpersService.findMatchingDatapoint(this.config?.datapoints, selectedDatapoint);
+        this.formGroup.patchValue({ aggregatedDatapoint });
+    }
     assignContextFromContextDashboard(datapoint) {
         if (!this.dashboardContextComponent?.isDeviceTypeDashboard) {
             return;
@@ -223,7 +229,8 @@ class DatapointsGraphWidgetConfigComponent {
             showSlider: [true, [Validators.required]],
             yAxisSplitLines: [false, [Validators.required]],
             xAxisSplitLines: [false, [Validators.required]],
-            numberOfDecimalPlaces: [2, [Validators.required, Validators.min(0), Validators.max(10)]]
+            numberOfDecimalPlaces: [2, [Validators.required, Validators.min(0), Validators.max(10)]],
+            aggregatedDatapoint: [this.config?.aggregatedDatapoint || null]
         });
         return form;
     }
@@ -240,7 +247,7 @@ class DatapointsGraphWidgetConfigComponent {
             (this.config?.datapoints?.filter(dp => dp.__active)?.length || 0) > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, deps: [{ token: i1.WidgetConfigComponent, optional: true }, { token: i1.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], ngImport: i0, template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i8.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatapointsGraphWidgetConfigComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-config", inputs: { config: "config" }, host: { classAttribute: "d-contents" }, providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], viewQueries: [{ propertyName: "previewMapSet", first: true, predicate: ["dataPointsGraphPreview"], descendants: true }], ngImport: i0, template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    [chartViewContext]=\"chartViewContext\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n    (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i7.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i8.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatapointsGraphWidgetConfigComponent, decorators: [{
             type: Component,
@@ -254,7 +261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         DatapointSelectorModule,
                         AlarmEventSelectorModule,
                         TimeContextComponent
-                    ], providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
+                    ], providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], template: "<div class=\"no-card-context\">\n  <div class=\"conf-col\">\n    <form [formGroup]=\"formGroup\">\n      <c8y-datapoint-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"1\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"datapointSelectionConfig\"\n        formControlName=\"datapoints\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"separator-bottom d-block\"\n        name=\"alarms\"\n        formControlName=\"alarms\"\n        [timelineType]=\"'ALARM'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\n        name=\"events\"\n        formControlName=\"events\"\n        [timelineType]=\"'EVENT'\"\n        [datapoints]=\"config?.datapoints\"\n      ></c8y-alarm-event-selection-list>\n\n      <label\n        [title]=\"'Number of decimal places' | translate\"\n        translate\n      >\n        Number of decimal places\n      </label>\n      <input\n        class=\"form-control\"\n        name=\"numberOfDecimalPlaces\"\n        type=\"number\"\n        formControlName=\"numberOfDecimalPlaces\"\n        [placeholder]=\"'e.g. {{ example }}' | translate: { example: 1 }\"\n      />\n      <c8y-messages\n        [show]=\"\n          formGroup.controls?.numberOfDecimalPlaces?.touched &&\n          formGroup?.controls?.numberOfDecimalPlaces?.errors\n        \"\n      ></c8y-messages>\n    </form>\n  </div>\n\n  <div class=\"p-t-32 separator-top\">\n    <div class=\"d-col fit-h\">\n      <div class=\"form-group p-t-8 form-group-sm d-flex a-i-center m-b-8\">\n        <div class=\"d-flex a-i-center m-r-4\">\n          <label\n            class=\"m-b-0\"\n            translate\n          >\n            Date selection\n          </label>\n          <button\n            class=\"btn-help btn-help--sm\"\n            [attr.aria-label]=\"'Help' | translate\"\n            [popover]=\"dateSelectionHelpTemplate\"\n            placement=\"bottom\"\n            triggers=\"focus\"\n            container=\"body\"\n            [adaptivePosition]=\"false\"\n          ></button>\n        </div>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control input-sm\"\n            [ngModel]=\"dateSelection\"\n            (ngModelChange)=\"dateSelectionChange($event)\"\n            [ngModelOptions]=\"{ standalone: true }\"\n          >\n            <option\n              title=\"{{ 'Dashboard time range' | translate }}\"\n              [value]=\"DATE_SELECTION.DASHBOARD_CONTEXT\"\n            >\n              {{ 'Dashboard time range' | translate }}\n            </option>\n            <option\n              title=\"{{ 'Widget configuration' | translate }}\"\n              [value]=\"DATE_SELECTION.CONFIG\"\n            >\n              {{ 'Widget configuration' | translate }}\n            </option>\n          </select>\n          <span></span>\n        </div>\n      </div>\n      <label\n        class=\"text-12\"\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n      >\n        {{ 'Options' | translate }}\n      </label>\n      <c8y-time-context\n        *ngIf=\"dateSelection === DATE_SELECTION.CONFIG\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: true,\n          interval: true,\n          aggregation: true\n        }\"\n        (contextChange)=\"timePropsChanged($event)\"\n      ></c8y-time-context>\n\n      <form\n        class=\"d-block p-t-16\"\n        [formGroup]=\"formGroup\"\n      >\n        <label>{{ 'Display options' | translate }}</label>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Axis' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Y-axis helper lines' | translate\"\n            >\n              <input\n                name=\"yAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"yAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>Y-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'X-axis helper lines' | translate\"\n            >\n              <input\n                name=\"xAxisSplitLines\"\n                type=\"checkbox\"\n                formControlName=\"xAxisSplitLines\"\n              />\n              <span></span>\n              <span translate>X-axis helper lines</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Merge matching data points into single axis' | translate\"\n            >\n              <input\n                name=\"mergeMatchingDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"mergeMatchingDatapoints\"\n              />\n              <span></span>\n              <span translate>Merge matching data points into single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Data points with the same min and max values will be merged into a single axis. The values must be defined in the data point configuration.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Force merge all data points into single axis' | translate\"\n            >\n              <input\n                name=\"forceMergeDatapoints\"\n                type=\"checkbox\"\n                formControlName=\"forceMergeDatapoints\"\n              />\n              <span></span>\n              <span translate>Force merge all datapoints into a single axis</span>\n              <button\n                class=\"btn-dot m-l-8\"\n                [attr.aria-label]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'All axes will be force merged to a single axis with the scale being set to the max and min value of all axes. It\\'s recommended to use this option for data points with similar values.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show vertical line on every occurrence' | translate\"\n            >\n              <input\n                name=\"displayMarkedLine\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedLine\"\n              />\n              <span></span>\n              <span translate>Show vertical line on every occurrence</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show icon when triggered' | translate\"\n            >\n              <input\n                name=\"displayMarkedPoint\"\n                type=\"checkbox\"\n                formControlName=\"displayMarkedPoint\"\n              />\n              <span></span>\n              <span translate>Show icon when triggered</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Some alarms or events have no matching data points. No icons will be shown for them.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"alarmsOrEventsHaveNoMatchingDps\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-warning\"\n                  c8yIcon=\"exclamation-triangle\"\n                ></i>\n              </button>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset m-b-24 m-t-0\">\n          <legend>{{ 'Chart' | translate }}</legend>\n          <c8y-form-group class=\"p-b-16 m-b-0 p-t-8 form-group-sm\">\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Enable date selection in the widget view.' | translate\"\n            >\n              <input\n                name=\"displayDateSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayDateSelection\"\n              />\n              <span></span>\n              <span translate>Date selection in the widget view.</span>\n              <button\n                class=\"btn-clean m-l-8\"\n                [attr.aria-label]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                [tooltip]=\"\n                  'Date selection in widget view is not possible when using dashboard time range.'\n                    | translate\n                \"\n                container=\"body\"\n                type=\"button\"\n                *ngIf=\"dateSelection === DATE_SELECTION.DASHBOARD_CONTEXT\"\n                (click)=\"$event.stopPropagation()\"\n                [adaptivePosition]=\"false\"\n              >\n                <i\n                  class=\"text-info\"\n                  c8yIcon=\"info\"\n                ></i>\n              </button>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Aggregation selection' | translate\"\n            >\n              <input\n                name=\"displayAggregationSelection\"\n                type=\"checkbox\"\n                formControlName=\"displayAggregationSelection\"\n              />\n              <span></span>\n              <span translate>Aggregation selection</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show labels and units' | translate\"\n            >\n              <input\n                name=\"showLabelAndUnit\"\n                type=\"checkbox\"\n                formControlName=\"showLabelAndUnit\"\n              />\n              <span></span>\n              <span translate>Display labels and units on Y-axis</span>\n            </label>\n            <label\n              class=\"c8y-checkbox\"\n              [title]=\"'Show slider' | translate\"\n            >\n              <input\n                name=\"showSlider\"\n                type=\"checkbox\"\n                formControlName=\"showSlider\"\n              />\n              <span></span>\n              <span translate>Show slider</span>\n            </label>\n          </c8y-form-group>\n        </fieldset>\n      </form>\n    </div>\n  </div>\n</div>\n\n<ng-template #dataPointsGraphPreview>\n  <c8y-charts\n    class=\"d-block p-relative\"\n    *ngIf=\"activeDatapointsExists\"\n    [config]=\"config\"\n    [alerts]=\"alerts\"\n    [chartViewContext]=\"chartViewContext\"\n    (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n    (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n    (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n  ></c8y-charts>\n\n  <c8y-ui-empty-state\n    class=\"d-block m-t-24\"\n    [icon]=\"'search'\"\n    [title]=\"'No data points selected' | translate\"\n    [subtitle]=\"'Select data point to render chart' | translate\"\n    *ngIf=\"!activeDatapointsExists\"\n  ></c8y-ui-empty-state>\n</ng-template>\n\n<ng-template #dateSelectionHelpTemplate>\n  <div [innerHTML]=\"dateSelectionHelp\"></div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.WidgetConfigComponent, decorators: [{
                     type: Optional
                 }] }, { type: i1.ContextDashboardComponent, decorators: [{
@@ -288,6 +295,7 @@ class DatapointsGraphWidgetViewComponent {
         this.isMarkedAreaEnabled = false;
         this.loadedDatapoints = [];
         this.loadedAlarmsOrEvents = [];
+        this.chartViewContext = CHART_VIEW_CONTEXT.WIDGET_VIEW;
         this.legendHelp = this.translate.instant(gettext(`<ul class="m-l-0 p-l-8 m-t-8 m-b-0">
     <li>
       <b>Visibility:</b>
@@ -480,7 +488,7 @@ class DatapointsGraphWidgetViewComponent {
         return form;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatapointsGraphWidgetViewComponent, deps: [{ token: i4.FormBuilder }, { token: i2$1.TranslateService }, { token: i2.WidgetTimeContextDateRangeService }, { token: i1.ContextDashboardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-16 p-r-16\">\n  <div class=\"d-flex gap-16 a-i-start\">\n    <div\n      class=\"btn-group btn-group-sm flex-no-shrink\"\n      *ngIf=\"\n        !displayConfig?.widgetInstanceGlobalTimeContext && displayConfig?.datapoints.length > 0 && displayConfig?.displayDateSelection || displayConfig?.displayAggregationSelection\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Aggregation' | translate\"\n        tooltip=\"{{\n          (displayConfig?.aggregation\n            ? AGGREGATION_TEXTS[displayConfig.aggregation]\n            : AGGREGATION_TEXTS.undefined\n          ) | translate\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            displayConfig?.aggregation\n              ? AGGREGATION_ICONS[displayConfig.aggregation]\n              : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n      </button>\n\n      <c8y-time-context\n        class=\"d-contents\"\n        (contextChange)=\"timePropsChanged($event)\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: displayConfig?.displayDateSelection,\n          interval: displayConfig?.displayDateSelection,\n          aggregation: displayConfig?.displayAggregationSelection\n        }\"\n      ></c8y-time-context>\n    </div>\n    <c8y-alarms-filter\n      class=\"d-contents form-group-sm\"\n      *ngIf=\"hasAtLeastOneAlarmActive\"\n      (filterApplied)=\"filterSeverity($event)\"\n    ></c8y-alarms-filter>\n\n    <div class=\"m-l-auto btn-group btn-group-sm flex-no-shrink\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Save as image' | translate\"\n        tooltip=\"{{ 'Save as image' | translate }}\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"chart.saveAsImage()\"\n        [adaptivePosition]=\"false\"\n      >\n        <i\n          class=\"icon-14\"\n          c8yIcon=\"image-file-checked\"\n        ></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"d-flex\"\n    style=\"align-items: center\"\n    *ngIf=\"displayConfig?.datapoints.length > 0\"\n  >\n    <button\n      class=\"btn-help btn-help--sm m-r-8\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"legendHelpTemplate\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      [adaptivePosition]=\"false\"\n    ></button>\n    <div class=\"inner-scroll\">\n      <div class=\"flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4\">\n        <div\n          class=\"c8y-datapoint-pill flex-no-shrink\"\n          title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n          *ngFor=\"let datapoint of displayConfig.datapoints\"\n          [ngClass]=\"{ active: datapoint.__active }\"\n        >\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'At least 1 data point must be active.' | translate\"\n            container=\"body\"\n            *ngIf=\"!hasAtLeastOneDatapointActive && datapoint.__active\"\n            [adaptivePosition]=\"false\"\n          ></i>\n          <button\n            class=\"c8y-datapoint-pill__btn\"\n            title=\"{{\n              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n            }} \"\n            type=\"button\"\n            (click)=\"toggleChart(datapoint)\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n            ></i>\n          </button>\n          <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n            <i\n              class=\"m-r-4 icon-14\"\n              c8yIcon=\"circle\"\n              [ngStyle]=\"{\n                color: datapoint.color\n              }\"\n            ></i>\n            <span\n              class=\"text-truncate\"\n              [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n            >\n              <span class=\"text-truncate\">\n                {{ datapoint.label }}\n              </span>\n              <small class=\"text-muted text-10\">\n                {{ datapoint.__target.name }}\n              </small>\n            </span>\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Measurements received for this data point may be out of sync.' | translate\n              \"\n              container=\"body\"\n              *ngIf=\"datapointsOutOfSync.get(datapoint)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n          </div>\n        </div>\n        <!-- Alarms  -->\n\n        <ng-container *ngFor=\"let alarm of alarms\">\n          <div\n            class=\"c8y-alarm-pill flex-no-shrink\"\n            title=\"{{ alarm.filters.type }} \"\n            *ngIf=\"alarm.__active\"\n          >\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Alarm of this type is currently active and outside of the selected time range'\n                  | translate\n              \"\n              container=\"body\"\n              *ngIf=\"displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n            <button\n              class=\"c8y-alarm-pill__btn\"\n              title=\"{{ alarm.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(alarm)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <button\n              class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n              (click)=\"toggleMarkedArea(alarm)\"\n              [ngClass]=\"{\n                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n              }\"\n            >\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [style.background-color]=\"alarm.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ alarm.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ alarm.__target.name }}\n                </small>\n              </span>\n            </button>\n          </div>\n        </ng-container>\n\n        <!-- Events -->\n        <ng-container *ngFor=\"let event of events\">\n          <div\n            class=\"c8y-event-pill flex-no-shrink\"\n            title=\"{{ event.filters.type }}\"\n            *ngIf=\"event.__active\"\n          >\n            <button\n              class=\"c8y-event-pill__btn\"\n              title=\"{{ event.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(event)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [ngStyle]=\"{ 'background-color': event.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"online1\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': event.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ event.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ event.__target.name }}\n                </small>\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-charts\n  #chart\n  [config]=\"displayConfig\"\n  [alerts]=\"alerts\"\n  (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n  (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n  (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n  (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n></c8y-charts>\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.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: AlarmsModule }, { kind: "component", type: i8$1.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DatapointsGraphWidgetViewComponent, isStandalone: true, selector: "c8y-datapoints-graph-widget-view", inputs: { config: "config" }, providers: [ChartEventsService, ChartAlarmsService], viewQueries: [{ propertyName: "chartComponent", first: true, predicate: ChartsComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"p-l-16 p-r-16\">\n  <div class=\"d-flex gap-16 a-i-start\">\n    <div\n      class=\"btn-group btn-group-sm flex-no-shrink\"\n      *ngIf=\"\n        !displayConfig?.widgetInstanceGlobalTimeContext && displayConfig?.datapoints.length > 0 && displayConfig?.displayDateSelection || displayConfig?.displayAggregationSelection\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Aggregation' | translate\"\n        tooltip=\"{{\n          (displayConfig?.aggregation\n            ? AGGREGATION_TEXTS[displayConfig.aggregation]\n            : AGGREGATION_TEXTS.undefined\n          ) | translate\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            displayConfig?.aggregation\n              ? AGGREGATION_ICONS[displayConfig.aggregation]\n              : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n      </button>\n\n      <c8y-time-context\n        class=\"d-contents\"\n        (contextChange)=\"timePropsChanged($event)\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: displayConfig?.displayDateSelection,\n          interval: displayConfig?.displayDateSelection,\n          aggregation: displayConfig?.displayAggregationSelection\n        }\"\n      ></c8y-time-context>\n    </div>\n    <c8y-alarms-filter\n      class=\"d-contents form-group-sm\"\n      *ngIf=\"hasAtLeastOneAlarmActive\"\n      (filterApplied)=\"filterSeverity($event)\"\n    ></c8y-alarms-filter>\n\n    <div class=\"m-l-auto btn-group btn-group-sm flex-no-shrink\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Save as image' | translate\"\n        tooltip=\"{{ 'Save as image' | translate }}\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"chart.saveAsImage()\"\n        [adaptivePosition]=\"false\"\n      >\n        <i\n          class=\"icon-14\"\n          c8yIcon=\"image-file-checked\"\n        ></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"d-flex\"\n    style=\"align-items: center\"\n    *ngIf=\"displayConfig?.datapoints.length > 0\"\n  >\n    <button\n      class=\"btn-help btn-help--sm m-r-8\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"legendHelpTemplate\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      [adaptivePosition]=\"false\"\n    ></button>\n    <div class=\"inner-scroll\">\n      <div class=\"flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4\">\n        <div\n          class=\"c8y-datapoint-pill flex-no-shrink\"\n          title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n          *ngFor=\"let datapoint of displayConfig.datapoints\"\n          [ngClass]=\"{ active: datapoint.__active }\"\n        >\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'At least 1 data point must be active.' | translate\"\n            container=\"body\"\n            *ngIf=\"!hasAtLeastOneDatapointActive && datapoint.__active\"\n            [adaptivePosition]=\"false\"\n          ></i>\n          <button\n            class=\"c8y-datapoint-pill__btn\"\n            title=\"{{\n              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n            }} \"\n            type=\"button\"\n            (click)=\"toggleChart(datapoint)\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n            ></i>\n          </button>\n          <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n            <i\n              class=\"m-r-4 icon-14\"\n              c8yIcon=\"circle\"\n              [ngStyle]=\"{\n                color: datapoint.color\n              }\"\n            ></i>\n            <span\n              class=\"text-truncate\"\n              [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n            >\n              <span class=\"text-truncate\">\n                {{ datapoint.label }}\n              </span>\n              <small class=\"text-muted text-10\">\n                {{ datapoint.__target.name }}\n              </small>\n            </span>\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Measurements received for this data point may be out of sync.' | translate\n              \"\n              container=\"body\"\n              *ngIf=\"datapointsOutOfSync.get(datapoint)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n          </div>\n        </div>\n        <!-- Alarms  -->\n\n        <ng-container *ngFor=\"let alarm of alarms\">\n          <div\n            class=\"c8y-alarm-pill flex-no-shrink\"\n            title=\"{{ alarm.filters.type }} \"\n            *ngIf=\"alarm.__active\"\n          >\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Alarm of this type is currently active and outside of the selected time range'\n                  | translate\n              \"\n              container=\"body\"\n              *ngIf=\"displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n            <button\n              class=\"c8y-alarm-pill__btn\"\n              title=\"{{ alarm.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(alarm)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <button\n              class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n              (click)=\"toggleMarkedArea(alarm)\"\n              [ngClass]=\"{\n                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n              }\"\n            >\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [style.background-color]=\"alarm.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ alarm.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ alarm.__target.name }}\n                </small>\n              </span>\n            </button>\n          </div>\n        </ng-container>\n\n        <!-- Events -->\n        <ng-container *ngFor=\"let event of events\">\n          <div\n            class=\"c8y-event-pill flex-no-shrink\"\n            title=\"{{ event.filters.type }}\"\n            *ngIf=\"event.__active\"\n          >\n            <button\n              class=\"c8y-event-pill__btn\"\n              title=\"{{ event.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(event)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [ngStyle]=\"{ 'background-color': event.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"online1\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': event.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ event.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ event.__target.name }}\n                </small>\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-charts\n  #chart\n  [config]=\"displayConfig\"\n  [alerts]=\"alerts\"\n  [chartViewContext]=\"chartViewContext\"\n  (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n  (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n  (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n  (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n></c8y-charts>\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: CommonModule$1 }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i6.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: AlarmsModule }, { kind: "component", type: i8$1.AlarmsFilterComponent, selector: "c8y-alarms-filter", inputs: ["contextSourceId"], outputs: ["onFilterApplied"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatapointsGraphWidgetViewComponent, decorators: [{
             type: Component,
@@ -494,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         PopoverModule,
                         AlarmsModule,
                         TimeContextComponent
-                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<div class=\"p-l-16 p-r-16\">\n  <div class=\"d-flex gap-16 a-i-start\">\n    <div\n      class=\"btn-group btn-group-sm flex-no-shrink\"\n      *ngIf=\"\n        !displayConfig?.widgetInstanceGlobalTimeContext && displayConfig?.datapoints.length > 0 && displayConfig?.displayDateSelection || displayConfig?.displayAggregationSelection\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Aggregation' | translate\"\n        tooltip=\"{{\n          (displayConfig?.aggregation\n            ? AGGREGATION_TEXTS[displayConfig.aggregation]\n            : AGGREGATION_TEXTS.undefined\n          ) | translate\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            displayConfig?.aggregation\n              ? AGGREGATION_ICONS[displayConfig.aggregation]\n              : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n      </button>\n\n      <c8y-time-context\n        class=\"d-contents\"\n        (contextChange)=\"timePropsChanged($event)\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: displayConfig?.displayDateSelection,\n          interval: displayConfig?.displayDateSelection,\n          aggregation: displayConfig?.displayAggregationSelection\n        }\"\n      ></c8y-time-context>\n    </div>\n    <c8y-alarms-filter\n      class=\"d-contents form-group-sm\"\n      *ngIf=\"hasAtLeastOneAlarmActive\"\n      (filterApplied)=\"filterSeverity($event)\"\n    ></c8y-alarms-filter>\n\n    <div class=\"m-l-auto btn-group btn-group-sm flex-no-shrink\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Save as image' | translate\"\n        tooltip=\"{{ 'Save as image' | translate }}\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"chart.saveAsImage()\"\n        [adaptivePosition]=\"false\"\n      >\n        <i\n          class=\"icon-14\"\n          c8yIcon=\"image-file-checked\"\n        ></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"d-flex\"\n    style=\"align-items: center\"\n    *ngIf=\"displayConfig?.datapoints.length > 0\"\n  >\n    <button\n      class=\"btn-help btn-help--sm m-r-8\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"legendHelpTemplate\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      [adaptivePosition]=\"false\"\n    ></button>\n    <div class=\"inner-scroll\">\n      <div class=\"flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4\">\n        <div\n          class=\"c8y-datapoint-pill flex-no-shrink\"\n          title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n          *ngFor=\"let datapoint of displayConfig.datapoints\"\n          [ngClass]=\"{ active: datapoint.__active }\"\n        >\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'At least 1 data point must be active.' | translate\"\n            container=\"body\"\n            *ngIf=\"!hasAtLeastOneDatapointActive && datapoint.__active\"\n            [adaptivePosition]=\"false\"\n          ></i>\n          <button\n            class=\"c8y-datapoint-pill__btn\"\n            title=\"{{\n              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n            }} \"\n            type=\"button\"\n            (click)=\"toggleChart(datapoint)\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n            ></i>\n          </button>\n          <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n            <i\n              class=\"m-r-4 icon-14\"\n              c8yIcon=\"circle\"\n              [ngStyle]=\"{\n                color: datapoint.color\n              }\"\n            ></i>\n            <span\n              class=\"text-truncate\"\n              [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n            >\n              <span class=\"text-truncate\">\n                {{ datapoint.label }}\n              </span>\n              <small class=\"text-muted text-10\">\n                {{ datapoint.__target.name }}\n              </small>\n            </span>\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Measurements received for this data point may be out of sync.' | translate\n              \"\n              container=\"body\"\n              *ngIf=\"datapointsOutOfSync.get(datapoint)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n          </div>\n        </div>\n        <!-- Alarms  -->\n\n        <ng-container *ngFor=\"let alarm of alarms\">\n          <div\n            class=\"c8y-alarm-pill flex-no-shrink\"\n            title=\"{{ alarm.filters.type }} \"\n            *ngIf=\"alarm.__active\"\n          >\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Alarm of this type is currently active and outside of the selected time range'\n                  | translate\n              \"\n              container=\"body\"\n              *ngIf=\"displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n            <button\n              class=\"c8y-alarm-pill__btn\"\n              title=\"{{ alarm.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(alarm)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <button\n              class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n              (click)=\"toggleMarkedArea(alarm)\"\n              [ngClass]=\"{\n                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n              }\"\n            >\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [style.background-color]=\"alarm.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ alarm.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ alarm.__target.name }}\n                </small>\n              </span>\n            </button>\n          </div>\n        </ng-container>\n\n        <!-- Events -->\n        <ng-container *ngFor=\"let event of events\">\n          <div\n            class=\"c8y-event-pill flex-no-shrink\"\n            title=\"{{ event.filters.type }}\"\n            *ngIf=\"event.__active\"\n          >\n            <button\n              class=\"c8y-event-pill__btn\"\n              title=\"{{ event.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(event)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [ngStyle]=\"{ 'background-color': event.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"online1\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': event.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ event.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ event.__target.name }}\n                </small>\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-charts\n  #chart\n  [config]=\"displayConfig\"\n  [alerts]=\"alerts\"\n  (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n  (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n  (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n  (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n></c8y-charts>\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n" }]
+                    ], providers: [ChartEventsService, ChartAlarmsService], template: "<div class=\"p-l-16 p-r-16\">\n  <div class=\"d-flex gap-16 a-i-start\">\n    <div\n      class=\"btn-group btn-group-sm flex-no-shrink\"\n      *ngIf=\"\n        !displayConfig?.widgetInstanceGlobalTimeContext && displayConfig?.datapoints.length > 0 && displayConfig?.displayDateSelection || displayConfig?.displayAggregationSelection\n      \"\n    >\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Aggregation' | translate\"\n        tooltip=\"{{\n          (displayConfig?.aggregation\n            ? AGGREGATION_TEXTS[displayConfig.aggregation]\n            : AGGREGATION_TEXTS.undefined\n          ) | translate\n        }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [adaptivePosition]=\"false\"\n        [delay]=\"500\"\n      >\n        <i\n          class=\"icon-14\"\n          [c8yIcon]=\"\n            displayConfig?.aggregation\n              ? AGGREGATION_ICONS[displayConfig.aggregation]\n              : AGGREGATION_ICONS.undefined\n          \"\n        ></i>\n      </button>\n\n      <c8y-time-context\n        class=\"d-contents\"\n        (contextChange)=\"timePropsChanged($event)\"\n        [changedDateContext]=\"timeProps\"\n        [controlsAvailable]=\"{\n          realtime: true,\n          timeRange: displayConfig?.displayDateSelection,\n          interval: displayConfig?.displayDateSelection,\n          aggregation: displayConfig?.displayAggregationSelection\n        }\"\n      ></c8y-time-context>\n    </div>\n    <c8y-alarms-filter\n      class=\"d-contents form-group-sm\"\n      *ngIf=\"hasAtLeastOneAlarmActive\"\n      (filterApplied)=\"filterSeverity($event)\"\n    ></c8y-alarms-filter>\n\n    <div class=\"m-l-auto btn-group btn-group-sm flex-no-shrink\">\n      <button\n        class=\"btn btn-default\"\n        [attr.aria-label]=\"'Save as image' | translate\"\n        tooltip=\"{{ 'Save as image' | translate }}\"\n        container=\"body\"\n        type=\"button\"\n        (click)=\"chart.saveAsImage()\"\n        [adaptivePosition]=\"false\"\n      >\n        <i\n          class=\"icon-14\"\n          c8yIcon=\"image-file-checked\"\n        ></i>\n      </button>\n    </div>\n  </div>\n  <div\n    class=\"d-flex\"\n    style=\"align-items: center\"\n    *ngIf=\"displayConfig?.datapoints.length > 0\"\n  >\n    <button\n      class=\"btn-help btn-help--sm m-r-8\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"legendHelpTemplate\"\n      placement=\"bottom\"\n      triggers=\"focus\"\n      container=\"body\"\n      [adaptivePosition]=\"false\"\n    ></button>\n    <div class=\"inner-scroll\">\n      <div class=\"flex-grow p-t-8 d-flex a-i-start gap-8 p-b-4\">\n        <div\n          class=\"c8y-datapoint-pill flex-no-shrink\"\n          title=\"{{ datapoint.label }} - {{ datapoint.__target.name }}\"\n          *ngFor=\"let datapoint of displayConfig.datapoints\"\n          [ngClass]=\"{ active: datapoint.__active }\"\n        >\n          <i\n            class=\"text-warning m-l-4\"\n            c8yIcon=\"exclamation-triangle\"\n            [tooltip]=\"'At least 1 data point must be active.' | translate\"\n            container=\"body\"\n            *ngIf=\"!hasAtLeastOneDatapointActive && datapoint.__active\"\n            [adaptivePosition]=\"false\"\n          ></i>\n          <button\n            class=\"c8y-datapoint-pill__btn\"\n            title=\"{{\n              (datapoint.__active ? hideDatapointLabel : showDatapointLabel) | translate\n            }} \"\n            type=\"button\"\n            (click)=\"toggleChart(datapoint)\"\n          >\n            <i\n              class=\"icon-14\"\n              [c8yIcon]=\"datapoint.__active ? 'eye text-primary' : 'eye-slash text-muted'\"\n            ></i>\n          </button>\n          <div class=\"c8y-datapoint-pill__label c8y-datapoint-pill__btn\">\n            <i\n              class=\"m-r-4 icon-14\"\n              c8yIcon=\"circle\"\n              [ngStyle]=\"{\n                color: datapoint.color\n              }\"\n            ></i>\n            <span\n              class=\"text-truncate\"\n              [ngClass]=\"{ 'text-muted': !datapoint.__active }\"\n            >\n              <span class=\"text-truncate\">\n                {{ datapoint.label }}\n              </span>\n              <small class=\"text-muted text-10\">\n                {{ datapoint.__target.name }}\n              </small>\n            </span>\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Measurements received for this data point may be out of sync.' | translate\n              \"\n              container=\"body\"\n              *ngIf=\"datapointsOutOfSync.get(datapoint)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n          </div>\n        </div>\n        <!-- Alarms  -->\n\n        <ng-container *ngFor=\"let alarm of alarms\">\n          <div\n            class=\"c8y-alarm-pill flex-no-shrink\"\n            title=\"{{ alarm.filters.type }} \"\n            *ngIf=\"alarm.__active\"\n          >\n            <i\n              class=\"text-warning m-l-4\"\n              c8yIcon=\"exclamation-triangle\"\n              [tooltip]=\"\n                'Alarm of this type is currently active and outside of the selected time range'\n                  | translate\n              \"\n              container=\"body\"\n              *ngIf=\"displayConfig?.activeAlarmTypesOutOfRange?.includes(alarm.filters.type)\"\n              [adaptivePosition]=\"false\"\n            ></i>\n            <button\n              class=\"c8y-alarm-pill__btn\"\n              title=\"{{ alarm.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(alarm)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"alarm.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <button\n              class=\"c8y-alarm-pill__label c8y-alarm-pill__btn\"\n              (click)=\"toggleMarkedArea(alarm)\"\n              [ngClass]=\"{\n                active: !isMarkedAreaEnabled && alarm.filters.type === enabledMarkedAreaAlarmType\n              }\"\n            >\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [style.background-color]=\"alarm.color\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"bell\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': alarm.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ alarm.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ alarm.__target.name }}\n                </small>\n              </span>\n            </button>\n          </div>\n        </ng-container>\n\n        <!-- Events -->\n        <ng-container *ngFor=\"let event of events\">\n          <div\n            class=\"c8y-event-pill flex-no-shrink\"\n            title=\"{{ event.filters.type }}\"\n            *ngIf=\"event.__active\"\n          >\n            <button\n              class=\"c8y-event-pill__btn\"\n              title=\"{{ event.filters.type }} \"\n              type=\"button\"\n              (click)=\"toggleAlarmEventType(event)\"\n            >\n              <i\n                class=\"icon-14\"\n                [c8yIcon]=\"event.__hidden ? 'eye-slash text-muted' : 'eye text-primary'\"\n              ></i>\n            </button>\n            <div class=\"c8y-event-pill__label c8y-event-pill__btn\">\n              <span\n                class=\"circle-icon-wrapper circle-icon-wrapper--small m-r-4\"\n                [ngStyle]=\"{ 'background-color': event.color }\"\n              >\n                <i\n                  class=\"stroked-icon\"\n                  c8yIcon=\"online1\"\n                ></i>\n              </span>\n              <span\n                class=\"text-truncate\"\n                [ngClass]=\"{ 'text-muted': event.__hidden }\"\n              >\n                <span class=\"text-truncate\">\n                  {{ event.filters.type }}\n                </span>\n                <small class=\"text-muted text-10\">\n                  {{ event.__target.name }}\n                </small>\n              </span>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n\n<c8y-charts\n  #chart\n  [config]=\"displayConfig\"\n  [alerts]=\"alerts\"\n  [chartViewContext]=\"chartViewContext\"\n  (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n  (configChangeOnZoomOut)=\"updateDashboardTimeContext($event)\"\n  (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n  (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n  (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n></c8y-charts>\n\n<ng-template #legendHelpTemplate>\n  <div [innerHTML]=\"legendHelp\"></div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i4.FormBuilder }, { type: i2$1.TranslateService }, { type: i2.WidgetTimeContextDateRangeService }, { type: i1.ContextDashboardComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { config: [{