@c8y/ngx-components 1022.34.0 → 1022.35.1

package/fesm2022/c8y-ngx-components-datapoint-explorer-view.mjs

@@ -15,7 +15,8 @@ import { ContextDashboardService, ContextDashboardType, ContextDashboardModule }
 import * as i4$1 from '@c8y/ngx-components/datapoint-selector';
 import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
 import { DatapointsExportSelectorComponent } from '@c8y/ngx-components/datapoints-export-selector';
-import { PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH } from '@c8y/ngx-components/echart/models';
+import { gettext as gettext$1 } from '@c8y/ngx-components/gettext';
+import { CHART_VIEW_CONTEXT, PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH } from '@c8y/ngx-components/echart/models';
 import { ChartHelpersService, ChartsComponent, ChartEventsService, ChartAlarmsService } from '@c8y/ngx-components/echart';
 import * as i4 from 'ngx-bootstrap/dropdown';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@@ -478,7 +479,7 @@ class DatapointExplorerComponent {
         this.alarms = [];
         this.events = [];
         this.datapointsOutOfSync = new Map();
-        this.hasAtLeastOneDatapointActive = true;
+        this.activeDatapoints = [];
         this.hasAtLeastOneAlarmActive = true;
         this.isMarkedAreaEnabled = false;
         this.alarmsOrEventsHaveNoMatchingDps = false;
@@ -487,6 +488,7 @@ class DatapointExplorerComponent {
             showRange: true,
             showChart: true
         };
+        this.chartViewContext = CHART_VIEW_CONTEXT.DATAPOINT_EXPLORER;
         this.#destroyRef = inject(DestroyRef);
         this.dataExplorerService = inject(DataExplorerService);
         this.formBuilder = inject(FormBuilder);
@@ -586,6 +588,13 @@ class DatapointExplorerComponent {
         }
         this.datapointsOutOfSync.set(dpMatch, true);
     }
+    updateActiveDatapoints(activeDatapoints) {
+        this.activeDatapoints = [...activeDatapoints];
+    }
+    updateAggregatedSliderDatapoint(selectedDatapoint) {
+        const aggregatedDatapoint = this.chartHelpersService.findMatchingDatapoint(this.activeDatapoints, selectedDatapoint);
+        this.formGroup.patchValue({ aggregatedDatapoint });
+    }
     async createNewReportWithWidget() {
         const modal = this.bsModalService.show(CreateNewReportModalComponent, {
             ignoreBackdropClick: true,
@@ -599,11 +608,11 @@ class DatapointExplorerComponent {
             const widget = this.createWidgetConfig();
             reportDashboard.c8y_Dashboard.children = { [widget.id]: widget };
             await this.contextDashboardService.update(reportDashboard);
-            this.alertService.success(gettext('Report and widget created.'));
+            this.alertService.success(gettext$1('Report and widget created.'));
         }
         catch (e) {
             if (e) {
-                this.alertService.danger(gettext('Failed to create report and widget.'));
+                this.alertService.danger(gettext$1('Failed to create report and widget.'));
                 this.alertService.addServerFailure(e);
             }
             // else: modal was closed
@@ -627,11 +636,11 @@ class DatapointExplorerComponent {
                 await this.contextDashboardService.update(reportDashboard);
             });
             await Promise.all(reportPromises);
-            this.alertService.success(gettext('Widget created.'));
+            this.alertService.success(gettext$1('Widget created.'));
         }
         catch (e) {
             if (e) {
-                this.alertService.danger(gettext('Failed to create widget.'));
+                this.alertService.danger(gettext$1('Failed to create widget.'));
                 this.alertService.addServerFailure(e);
             }
             // else: modal was closed
@@ -658,11 +667,11 @@ class DatapointExplorerComponent {
                 await this.contextDashboardService.update(dashboard);
             });
             await Promise.all(dashboardPromises);
-            this.alertService.success(gettext('Widget created.'));
+            this.alertService.success(gettext$1('Widget created.'));
         }
         catch (e) {
             if (e) {
-                this.alertService.danger(gettext('Failed to create widget.'));
+                this.alertService.danger(gettext$1('Failed to create widget.'));
                 this.alertService.addServerFailure(e);
             }
             // else: modal was closed
@@ -716,8 +725,8 @@ class DatapointExplorerComponent {
     }
     createWidgetConfig() {
         return {
-            name: gettext('Data points graph'),
-            title: gettext('Data points'),
+            name: gettext$1('Data points graph'),
+            title: gettext$1('Data points'),
             _width: 24,
             _height: 12,
             config: this.config
@@ -726,6 +735,7 @@ class DatapointExplorerComponent {
     initForm() {
         return this.formBuilder.group({
             datapoints: [this.config.datapoints || []],
+            aggregatedDatapoint: [this.config.aggregatedDatapoint || null],
             alarms: [this.alarms || []],
             events: [this.events || []],
             dateFrom: [this.config.dateFrom || null],
@@ -746,7 +756,7 @@ class DatapointExplorerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatapointExplorerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatapointExplorerComponent, isStandalone: true, selector: "c8y-datapoint-explorer", providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideWorkspaceConfig\"\n  [placement]=\"'left'\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideExportSelector\"\n  [placement]=\"'right'\"\n>\n  <c8y-datapoints-export-selector\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  <ng-container *ngIf=\"contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"th\"></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n\n  <ng-container *ngIf=\"!contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Send as widget to report' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Create a new report with widget' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"createNewReportWithWidget()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n}\n\n<div class=\"content-fullpage d-grid grid__col--auto-360 gap-24\">\n  <div class=\"d-col gap-16\">\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-md grid__col--4-4-4 gap-16\">\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Axis' | translate }}</legend>\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 data points into 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        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show vertical line when alarm occurs' | 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\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show icon when alarm or event occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedPoint\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedPoint\"\n            />\n            <span></span>\n            <span>\n              {{\n                'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                  | translate\n              }}\n            </span>\n            <button\n              class=\"btn-dot 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-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Chart' | translate }}</legend>\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        </fieldset>\n      </div>\n    </form>\n  </div>\n  <div class=\"card inner-scroll bg-level-1\">\n    <form\n      class=\"bg-inherit\"\n      [formGroup]=\"formGroup\"\n    >\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"0\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"{ contextAsset: contextAsset }\"\n        formControlName=\"datapoints\"\n        [allowDragAndDrop]=\"true\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\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      <div class=\"p-l-16 p-r-16 form-group p-b-16\">\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      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i4$1.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: i5$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WorkspaceConfigComponent, selector: "c8y-workspace-config", inputs: ["updatedConfig"], outputs: ["onConfigurationChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DatapointExplorerComponent, isStandalone: true, selector: "c8y-datapoint-explorer", providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideWorkspaceConfig\"\n  [placement]=\"'left'\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideExportSelector\"\n  [placement]=\"'right'\"\n>\n  <c8y-datapoints-export-selector\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  <ng-container *ngIf=\"contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"th\"></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n\n  <ng-container *ngIf=\"!contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Send as widget to report' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Create a new report with widget' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"createNewReportWithWidget()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n}\n\n<div class=\"content-fullpage d-grid grid__col--auto-360 gap-24\">\n  <div class=\"d-col gap-16\">\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-lg grid__col--4-4-4 gap-16\">\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Axis' | translate }}</legend>\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 data points into 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        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show vertical line when alarm occurs' | 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\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show icon when alarm or event occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedPoint\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedPoint\"\n            />\n            <span></span>\n            <span>\n              {{\n                'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                  | translate\n              }}\n            </span>\n            <button\n              class=\"btn-dot 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-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Chart' | translate }}</legend>\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        </fieldset>\n      </div>\n    </form>\n  </div>\n  <div class=\"card inner-scroll bg-level-1\">\n    <form\n      class=\"bg-inherit\"\n      [formGroup]=\"formGroup\"\n    >\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"0\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"{ contextAsset: contextAsset }\"\n        formControlName=\"datapoints\"\n        [allowDragAndDrop]=\"true\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\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      <div class=\"p-l-16 p-r-16 form-group p-b-16\">\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      </div>\n    </form>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId", "inGroupPriority"] }, { 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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i4$1.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: i5$1.AlarmEventSelectionListComponent, selector: "c8y-alarm-event-selection-list", inputs: ["timelineType", "canRemove", "canEdit", "canDragAndDrop", "title", "addButtonLabel", "hideSource", "inline", "activeToggleAsSwitch", "omitProperties", "datapoints", "config"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.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: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "updateActiveDatapoints", "updateAggregatedSliderDatapoint"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WorkspaceConfigComponent, selector: "c8y-workspace-config", inputs: ["updatedConfig"], outputs: ["onConfigurationChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatapointExplorerComponent, decorators: [{
             type: Component,
@@ -764,7 +774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         A11yModule,
                         DatapointsExportSelectorComponent,
                         WorkspaceConfigComponent
-                    ], providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideWorkspaceConfig\"\n  [placement]=\"'left'\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideExportSelector\"\n  [placement]=\"'right'\"\n>\n  <c8y-datapoints-export-selector\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  <ng-container *ngIf=\"contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"th\"></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n\n  <ng-container *ngIf=\"!contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Send as widget to report' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Create a new report with widget' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"createNewReportWithWidget()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n}\n\n<div class=\"content-fullpage d-grid grid__col--auto-360 gap-24\">\n  <div class=\"d-col gap-16\">\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-md grid__col--4-4-4 gap-16\">\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Axis' | translate }}</legend>\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 data points into 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        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show vertical line when alarm occurs' | 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\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show icon when alarm or event occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedPoint\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedPoint\"\n            />\n            <span></span>\n            <span>\n              {{\n                'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                  | translate\n              }}\n            </span>\n            <button\n              class=\"btn-dot 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-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Chart' | translate }}</legend>\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        </fieldset>\n      </div>\n    </form>\n  </div>\n  <div class=\"card inner-scroll bg-level-1\">\n    <form\n      class=\"bg-inherit\"\n      [formGroup]=\"formGroup\"\n    >\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"0\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"{ contextAsset: contextAsset }\"\n        formControlName=\"datapoints\"\n        [allowDragAndDrop]=\"true\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\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      <div class=\"p-l-16 p-r-16 form-group p-b-16\">\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      </div>\n    </form>\n  </div>\n</div>\n" }]
+                    ], providers: [ChartEventsService, ChartAlarmsService, ChartHelpersService], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideWorkspaceConfig\"\n  [placement]=\"'left'\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  *ngIf=\"!(settings$ | async)?.hideExportSelector\"\n  [placement]=\"'right'\"\n>\n  <c8y-datapoints-export-selector\n    [exportConfig]=\"exportConfig\"\n    [containerClass]=\"'d-contents'\"\n  ></c8y-datapoints-export-selector>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  <ng-container *ngIf=\"contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        class=\"btn btn-link\"\n        title=\"{{ 'Send as widget to dashboard' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToDashboard()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"th\"></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n\n  <ng-container *ngIf=\"!contextAsset\">\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Send as widget to report' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"sendAsWidgetToReport()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Send as widget to report' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n\n    <c8y-action-bar-item\n      [placement]=\"'more'\"\n      [priority]=\"-2000\"\n    >\n      <button\n        title=\"{{ 'Create a new report with widget' | translate }}\"\n        type=\"button\"\n        data-cy=\"widgets-dashboard--copy-dashboard\"\n        (click)=\"createNewReportWithWidget()\"\n        [disabled]=\"config?.datapoints?.length === 0 || !canAddReport\"\n      >\n        <i c8yIcon=\"c8y-reports\"></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  </ng-container>\n}\n\n<div class=\"content-fullpage d-grid grid__col--auto-360 gap-24\">\n  <div class=\"d-col gap-16\">\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"m-l-48 m-r-48\"\n      [formGroup]=\"formGroup\"\n    >\n      <div class=\"d-grid-lg grid__col--4-4-4 gap-16\">\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Axis' | translate }}</legend>\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 data points into 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        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Alarms & events' | translate }}</legend>\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show vertical line when alarm occurs' | 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\n          <label\n            class=\"c8y-checkbox\"\n            [title]=\"'Show icon when alarm or event occurs' | translate\"\n          >\n            <input\n              name=\"displayMarkedPoint\"\n              type=\"checkbox\"\n              formControlName=\"displayMarkedPoint\"\n            />\n            <span></span>\n            <span>\n              {{\n                'Show icon when triggered`When alarms and events occur the icon will be shown`'\n                  | translate\n              }}\n            </span>\n            <button\n              class=\"btn-dot 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-info\"\n                c8yIcon=\"info\"\n              ></i>\n            </button>\n          </label>\n        </fieldset>\n        <fieldset class=\"c8y-fieldset form-group-sm m-t-md-0 p-b-8\">\n          <legend>{{ 'Chart' | translate }}</legend>\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        </fieldset>\n      </div>\n    </form>\n  </div>\n  <div class=\"card inner-scroll bg-level-1\">\n    <form\n      class=\"bg-inherit\"\n      [formGroup]=\"formGroup\"\n    >\n      <c8y-datapoint-selection-list\n        class=\"bg-inherit separator-top d-block\"\n        name=\"datapoints\"\n        [minActiveCount]=\"0\"\n        [defaultFormOptions]=\"datapointSelectDefaultFormOptions\"\n        [config]=\"{ contextAsset: contextAsset }\"\n        formControlName=\"datapoints\"\n        [allowDragAndDrop]=\"true\"\n      ></c8y-datapoint-selection-list>\n\n      <c8y-alarm-event-selection-list\n        class=\"bg-inherit\"\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      <div class=\"p-l-16 p-r-16 form-group p-b-16\">\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      </div>\n    </form>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { chart: [{
                 type: ViewChild,
                 args: ['chart']