@c8y/ngx-components 1024.15.13 → 1024.16.10

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

@@ -461,7 +461,6 @@ class WorkspaceConfigComponent {
         this.activatedRoute = inject(ActivatedRoute);
         this.router = inject(Router);
         this.nameGeneratorService = inject(NameGeneratorService);
-        this.datapointSyncService = inject(DatapointSyncService);
         this.dataExplorerService = inject(DataExplorerService);
     }
     ngOnInit() {
@@ -534,22 +533,26 @@ class WorkspaceConfigComponent {
     async shareConfig(configuration) {
         await this.clipboardService.writeText(JSON.stringify(configuration.config));
     }
-    async addConfigFromUrl(queryParams) {
-        const id = queryParams.id || new Date().toISOString();
-        const label = queryParams.label || this.nameGeneratorService.generateName();
+    /**
+     * Adds the workspace encoded in the URL and emits it exactly once, via addConfig.
+     * Managed-object enrichment is left to the parent, which performs it on every emission.
+     * Returns false when the URL config cannot be decoded (decodeConfig already alerts).
+     */
+    addConfigFromUrl(queryParams) {
         const config = this.workspaceConfigurationService.getConfigurationFromUrl(queryParams.config || {});
-        this.addConfig(config, id, label);
+        if (!config) {
+            return false;
+        }
         if (config.datapoints?.length) {
             this.dataExplorerService.processDatapoints(config);
         }
-        const uniqueIds = this.datapointSyncService.getManagedObjectIds(config.datapoints || []);
-        if (uniqueIds.length) {
-            await this.dataExplorerService.loadAndAssignManagedObjects(config, uniqueIds);
-        }
         if (config.alarmsEventsConfigs?.length) {
             this.dataExplorerService.processAlarmEventConfigs(config);
         }
-        this.onConfigurationChange.emit(config);
+        const id = queryParams.id || new Date().toISOString();
+        const label = queryParams.label || this.nameGeneratorService.generateName();
+        this.addConfig(config, id, label);
+        return true;
     }
     updateConfigurations() {
         const config = { ...this.updatedConfig };
@@ -586,23 +589,22 @@ class WorkspaceConfigComponent {
             this.configurations = configurations;
             this.currentConfiguration =
                 this.configurations.find(c => c.id === defaultId) || this.configurations[0];
-            this.onConfigurationChange.emit(this.currentConfiguration.config);
-            if (queryParams?.id && !this.configurations.find(c => c.id === queryParams.id)) {
-                this.addConfigFromUrl(queryParams);
-            }
-            else if (queryParams?.id &&
-                this.configurations.find(c => c.id === queryParams.id) &&
-                this.currentConfiguration.id !== queryParams.id) {
-                this.currentConfiguration = this.configurations.find(c => c.id === queryParams.id);
-                this.changeConfiguration(true, this.currentConfiguration);
+            const urlConfiguration = queryParams?.id
+                ? this.configurations.find(c => c.id === queryParams.id)
+                : undefined;
+            // A new workspace in the URL supersedes the stored default — emit only the URL one.
+            if (queryParams?.id && !urlConfiguration && this.addConfigFromUrl(queryParams)) {
+                return;
             }
-        }
-        if (!this.currentConfiguration) {
-            if (Object.keys(queryParams).length === 0) {
-                this.addConfig();
+            if (urlConfiguration && this.currentConfiguration.id !== urlConfiguration.id) {
+                this.changeConfiguration(true, urlConfiguration);
                 return;
             }
-            this.addConfigFromUrl(queryParams);
+            this.onConfigurationChange.emit(this.currentConfiguration.config);
+            return;
+        }
+        if (Object.keys(queryParams).length === 0 || !this.addConfigFromUrl(queryParams)) {
+            this.addConfig();
         }
     }
     initWorkspaceForm() {
@@ -655,7 +657,7 @@ class WorkspaceConfigComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WorkspaceConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: WorkspaceConfigComponent, isStandalone: true, selector: "c8y-workspace-config", inputs: { updatedConfig: "updatedConfig", silent: "silent", defaultConfigurationId: "defaultConfigurationId" }, outputs: { onConfigurationChange: "onConfigurationChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      style=\"max-width: 240px\"\n      [attr.aria-label]=\"currentConfiguration?.label\"\n      tooltip=\"{{ 'Selected configuration' | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"current-configuration-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-8\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w min-width-0\">\n        <span class=\"text-muted fit-w text-10 l-h-1\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-bold text-12 fit-w l-h-1 text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4 flex-no-shrink\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            @for (\n              configuration of configurationsFormGroup.controls.configurations['controls'];\n              track $index\n            ) {\n              <c8y-li\n                class=\"p-0\"\n                [dense]=\"true\"\n              >\n                <c8y-li-radio\n                  style=\"min-height: 48px\"\n                  [selected]=\"configuration.value.id === currentConfiguration.id\"\n                  (onSelect)=\"changeConfiguration($event, configuration.value)\"\n                ></c8y-li-radio>\n\n                <div class=\"d-flex a-i-center gap-8\">\n                  <div\n                    class=\"min-width-0 flex-grow\"\n                    [formGroupName]=\"$index\"\n                  >\n                    <c8y-input-group-editable\n                      formGroupClass=\"m-b-0\"\n                      size=\"sm\"\n                      [ariaLabel]=\"'Configuration label' | translate\"\n                      [placeholder]=\"'Configuration 1' | translate\"\n                      formControlName=\"label\"\n                      [validators]=\"labelValidators\"\n                      (save)=\"updateConfigurationLabel({ ...configuration.value, label: $event })\"\n                    ></c8y-input-group-editable>\n                  </div>\n\n                  <div class=\"m-l-auto flex-nogrow d-flex gap-8\">\n                    <button\n                      class=\"btn-dot btn m-0\"\n                      [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                      tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                      placement=\"left\"\n                      (click)=\"addConfig(configuration.value.config)\"\n                      [delay]=\"500\"\n                    >\n                      <i c8yIcon=\"copy\"></i>\n                    </button>\n\n                    <button\n                      class=\"btn-dot btn btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove configurations' | translate\"\n                      tooltip=\"{{\n                        (configuration.value.id === currentConfiguration.id\n                          ? activeConfigTooltip\n                          : removeConfigTooltip\n                        ) | translate\n                      }}\"\n                      placement=\"left\"\n                      [delay]=\"500\"\n                      (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                      [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                    >\n                      <i c8yIcon=\"minus-circle\"></i>\n                    </button>\n                  </div>\n                </div>\n              </c8y-li>\n            }\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete"], outputs: ["save", "cancel"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: WorkspaceConfigComponent, isStandalone: true, selector: "c8y-workspace-config", inputs: { updatedConfig: "updatedConfig", silent: "silent", defaultConfigurationId: "defaultConfigurationId" }, outputs: { onConfigurationChange: "onConfigurationChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!silent) {\n  <div\n    class=\"dropdown\"\n    #actionbar_dropdown=\"bs-dropdown\"\n    [cdkTrapFocus]=\"actionbar_dropdown.isOpen\"\n    dropdown\n    [insideClick]=\"true\"\n  >\n    <button\n      class=\"dropdown-toggle form-control l-h-tight d-flex a-i-center\"\n      style=\"max-width: 240px\"\n      [attr.aria-label]=\"currentConfiguration?.label\"\n      tooltip=\"{{ 'Selected configuration' | translate }}\"\n      placement=\"top\"\n      container=\"body\"\n      data-cy=\"current-configuration-dropdown-button\"\n      [adaptivePosition]=\"false\"\n      [delay]=\"500\"\n      dropdownToggle\n    >\n      <i\n        class=\"m-r-8\"\n        c8yIcon=\"list\"\n      ></i>\n      <div class=\"d-col text-left fit-w min-width-0\">\n        <span class=\"text-muted fit-w text-10 l-h-1\">\n          {{ 'Configuration' | translate }}\n        </span>\n        <span class=\"text-bold text-12 fit-w l-h-1 text-truncate\">\n          {{ currentConfiguration?.label }}\n        </span>\n      </div>\n      <span class=\"caret m-r-16 m-l-4 flex-no-shrink\"></span>\n    </button>\n    <div\n      class=\"dropdown-menu dropdown-menu-wide dropdown-menu-action-bar\"\n      *dropdownMenu\n    >\n      <div class=\"sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16\">\n        <p>\n          <strong>{{ 'Data explorer configurations' | translate }}</strong>\n        </p>\n        <p>\n          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>\n        </p>\n      </div>\n      <c8y-list-group class=\"no-border-last\">\n        <form [formGroup]=\"configurationsFormGroup\">\n          <div formArrayName=\"configurations\">\n            @for (\n              configuration of configurationsFormGroup.controls.configurations['controls'];\n              track $index\n            ) {\n              <c8y-li\n                class=\"p-0\"\n                [dense]=\"true\"\n              >\n                <c8y-li-radio\n                  style=\"min-height: 48px\"\n                  [selected]=\"configuration.value.id === currentConfiguration.id\"\n                  (onSelect)=\"changeConfiguration($event, configuration.value)\"\n                ></c8y-li-radio>\n\n                <div class=\"d-flex a-i-center gap-8\">\n                  <div\n                    class=\"min-width-0 flex-grow\"\n                    [formGroupName]=\"$index\"\n                  >\n                    <c8y-input-group-editable\n                      formGroupClass=\"m-b-0\"\n                      size=\"sm\"\n                      [ariaLabel]=\"'Configuration label' | translate\"\n                      [placeholder]=\"'Configuration 1' | translate\"\n                      formControlName=\"label\"\n                      [validators]=\"labelValidators\"\n                      (save)=\"updateConfigurationLabel({ ...configuration.value, label: $event })\"\n                    ></c8y-input-group-editable>\n                  </div>\n\n                  <div class=\"m-l-auto flex-nogrow d-flex gap-8\">\n                    <button\n                      class=\"btn-dot btn m-0\"\n                      [attr.aria-label]=\"'Duplicate configuration' | translate\"\n                      tooltip=\"{{ 'Duplicate configuration' | translate }}\"\n                      placement=\"left\"\n                      (click)=\"addConfig(configuration.value.config)\"\n                      [delay]=\"500\"\n                    >\n                      <i c8yIcon=\"copy\"></i>\n                    </button>\n\n                    <button\n                      class=\"btn-dot btn btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove configurations' | translate\"\n                      tooltip=\"{{\n                        (configuration.value.id === currentConfiguration.id\n                          ? activeConfigTooltip\n                          : removeConfigTooltip\n                        ) | translate\n                      }}\"\n                      placement=\"left\"\n                      [delay]=\"500\"\n                      (click)=\"$event.stopPropagation(); deleteConfiguration(configuration.value)\"\n                      [disabled]=\"configuration.value.id === currentConfiguration.id\"\n                    >\n                      <i c8yIcon=\"minus-circle\"></i>\n                    </button>\n                  </div>\n                </div>\n              </c8y-li>\n            }\n          </div>\n        </form>\n      </c8y-list-group>\n      <div class=\"sticky-bottom separator-top\">\n        <div class=\"d-flex p-l-16 p-r-16 p-t-8 p-b-8\">\n          <button\n            class=\"btn btn-danger btn-sm flex-grow m-r-4\"\n            (click)=\"clearAll()\"\n            [disabled]=\"configurations.length < 2\"\n          >\n            <i [c8yIcon]=\"'delete'\"></i>\n            {{ 'Delete all configurations' | translate }}\n          </button>\n          <button\n            class=\"btn btn-default btn-sm flex-grow\"\n            type=\"button\"\n            (click)=\"addConfig()\"\n          >\n            <i [c8yIcon]=\"'add-circle-outline'\"></i>\n            {{ 'Add configuration' | translate }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.InputGroupEditableComponent, selector: "c8y-input-group-editable", inputs: ["ariaLabel", "name", "size", "placeholder", "title", "multiline", "maxHeight", "maxLength", "noSaveButton", "formGroupClass", "validators", "asyncValidators", "autocomplete", "required"], outputs: ["save", "cancel"] }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemRadioComponent, selector: "c8y-list-item-radio, c8y-li-radio", inputs: ["selected", "name", "disabled", "value"], outputs: ["onSelect"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.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: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: WorkspaceConfigComponent, decorators: [{
             type: Component,
@@ -821,7 +823,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 class DatapointExplorerComponent {
     #destroyRef;
     constructor() {
-        this.config = { datapoints: [], alarmsEventsConfigs: [] };
+        this.config = signal({
+            datapoints: [],
+            alarmsEventsConfigs: []
+        }, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
         this.alerts = new DynamicComponentAlertAggregator();
         this.alarms = [];
         this.events = [];
@@ -831,11 +836,11 @@ class DatapointExplorerComponent {
         this.isMarkedAreaEnabled = false;
         this.alarmsOrEventsHaveNoMatchingDps = false;
         this.canAddReport = false;
-        this.datapointSelectDefaultFormOptions = {
+        this.datapointSelectDefaultFormOptions = signal({
             showRange: true,
             showChart: true,
             showAdvancedChartOptions: false
-        };
+        }, ...(ngDevMode ? [{ debugName: "datapointSelectDefaultFormOptions" }] : /* istanbul ignore next */ []));
         this.inFullScreen$ = fromEvent(document, 'fullscreenchange').pipe(takeUntilDestroyed(), map$1(() => this.fullScreen()), startWith(this.fullScreen()));
         this.fullScreenToggleTooltipText = {
             enter: gettext('Full screen'),
@@ -843,7 +848,6 @@ class DatapointExplorerComponent {
         };
         /** Flag to skip onTimeContextChange during zoom handling */
         this.isHandlingZoom = false;
-        this.isMigrated = false;
         this.chartViewContext = CHART_VIEW_CONTEXT.DATAPOINT_EXPLORER;
         this.TIME_PICKER_CONFIG = {
             showMinutes: true,
@@ -865,6 +869,7 @@ class DatapointExplorerComponent {
         this.measurementService = inject(MeasurementService);
         this.showSettings = false;
         this.formGroup = this.initForm();
+        this.formDefaults = this.formGroup.value;
         this.settings$ = this.activatedRoute.data.pipe(map$1(data => data.settings));
     }
     ngOnInit() {
@@ -877,43 +882,37 @@ class DatapointExplorerComponent {
             Permissions.ROLE_MANAGED_OBJECT_CREATE
         ]);
         // Initialize timeProps from config if available
-        if (this.config.dateFrom && this.config.dateTo) {
+        const config = this.config();
+        if (config.dateFrom && config.dateTo) {
             this.timeProps = {
-                dateFrom: new Date(this.config.dateFrom),
-                dateTo: new Date(this.config.dateTo),
-                interval: (this.config.interval === 'none' ? null : this.config.interval),
-                realtime: this.config.realtime,
-                aggregation: this.config.aggregation,
-                autoAggregation: this.config.autoAggregation ?? null
+                dateFrom: new Date(config.dateFrom),
+                dateTo: new Date(config.dateTo),
+                interval: (config.interval === 'none' ? null : config.interval),
+                realtime: config.realtime,
+                aggregation: config.aggregation,
+                autoAggregation: config.autoAggregation ?? null
             };
         }
-        // If datapoints already exist in config, run migration check immediately so
-        // showAdvancedChartOptions reflects the correct state on first render.
-        const existingDatapoints = this.config.datapoints || [];
-        if (existingDatapoints.length > 0) {
-            this.detectTimeSeriesMigration(existingDatapoints[0]).then(isMigrated => {
-                this.isMigrated = isMigrated;
-                this.updateAdvancedChartOptions();
-            });
-        }
+        // Datapoints added to an empty workspace never pass through onConfigurationChange,
+        // so resolve migration here too (cached) to keep showAdvancedChartOptions correct.
         this.formGroup.controls.datapoints.valueChanges
             .pipe(takeUntilDestroyed(this.#destroyRef), filter(value => value.length > 0), take(1))
             .subscribe(async (value) => {
-            this.isMigrated = await this.detectTimeSeriesMigration(value[0]);
+            await this.resolveMigrationStatus(value[0]);
             this.updateAdvancedChartOptions();
         });
         this.formGroup.valueChanges
             .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe(configChange => {
             const { alarms, events, ...configValues } = configChange;
-            this.config = {
+            this.config.set({
                 ...configValues,
                 alarmsEventsConfigs: [...(alarms || []), ...(events || [])]
-            };
+            });
             this.updateExportConfig();
             this.checkForMatchingDatapoints();
         });
-        const configSummaryGS = this.chartHelpersService.getConfigSummaryForGainsight(this.config);
+        const configSummaryGS = this.chartHelpersService.getConfigSummaryForGainsight(this.config());
         this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH.EVENTS.DATA_EXPLORER_AND_GRAPH, {
             component: PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH.COMPONENTS.DATA_EXPLORER_DETAILS,
             action: PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH.ACTIONS.DATA_EXPLORER_CONFIG_INIT,
@@ -979,6 +978,9 @@ class DatapointExplorerComponent {
             const errors = managedObjectsResult.errors;
             config.datapoints = this.datapointSyncService.assignUpdatedValues(config.datapoints, managedObjects, errors);
         }
+        // Resolve migration before patching so the chart's first fetch already uses the correct
+        // aggregation shape, instead of fetching once and refetching when the async probe resolves.
+        await this.resolveMigrationStatus(config.datapoints?.[0]);
         // Calculate date range based on interval if not provided
         const hasExplicitDates = this.isActualDate(config.dateFrom) && this.isActualDate(config.dateTo);
         let dateFrom, dateTo;
@@ -1007,9 +1009,10 @@ class DatapointExplorerComponent {
             action: PRODUCT_EXPERIENCE_DATA_EXPLORER_AND_GRAPH.ACTIONS.DATA_EXPLORER_CONFIG_CHANGE,
             ...configSummaryGS
         });
-        // Ensure realtime properties and dates are set correctly
-        // formGroup.valueChanges subscription will update this.config
+        // formDefaults first so any control the incoming config omits resets to its default, instead of
+        // keeping the previously shown workspace's value. The valueChanges subscription updates config.
         this.formGroup.patchValue({
+            ...this.formDefaults,
             alarms: this.alarms,
             events: this.events,
             ...config,
@@ -1018,6 +1021,7 @@ class DatapointExplorerComponent {
             isAutoRefreshEnabled: config.realtime ? true : config.isAutoRefreshEnabled || false,
             refreshInterval: config.realtime ? 5000 : config.refreshInterval || 0
         });
+        this.updateAdvancedChartOptions();
     }
     onSliderZoom(timeProps) {
         this.isHandlingZoom = true;
@@ -1064,7 +1068,7 @@ class DatapointExplorerComponent {
     }
     handleDatapointOutOfSync(dpOutOfSync) {
         const key = (dp) => dp.__target?.id + dp.fragment + dp.series;
-        const dpMatch = this.config.datapoints?.find(dp => key(dp) === key(dpOutOfSync));
+        const dpMatch = this.config().datapoints?.find(dp => key(dp) === key(dpOutOfSync));
         if (!dpMatch) {
             return;
         }
@@ -1072,7 +1076,7 @@ class DatapointExplorerComponent {
     }
     handleDatapointBackInSync(dpBackInSync) {
         const key = (dp) => dp.__target?.id + dp.fragment + dp.series;
-        const dpMatch = this.config.datapoints?.find(dp => key(dp) === key(dpBackInSync));
+        const dpMatch = this.config().datapoints?.find(dp => key(dp) === key(dpBackInSync));
         if (!dpMatch) {
             return;
         }
@@ -1209,12 +1213,19 @@ class DatapointExplorerComponent {
     }
     updateAdvancedChartOptions() {
         const hasAggregation = !!(this.timeProps?.aggregation || this.timeProps?.autoAggregation);
-        const showAdvancedChartOptions = this.isMigrated && hasAggregation;
-        this.datapointSelectDefaultFormOptions = {
-            ...this.datapointSelectDefaultFormOptions,
-            showAdvancedChartOptions
-        };
-        this.formGroup.patchValue({ showAdvancedChartOptions });
+        const showAdvancedChartOptions = !!this.isMigrated && hasAggregation;
+        // Guard the signal and the form control independently: a saved config can set the form control
+        // before this runs while the signal still holds its initial value, so they may differ.
+        if (this.datapointSelectDefaultFormOptions().showAdvancedChartOptions !== showAdvancedChartOptions) {
+            this.datapointSelectDefaultFormOptions.update(options => ({
+                ...options,
+                showAdvancedChartOptions
+            }));
+        }
+        // patchValue emits valueChanges even for an unchanged value, which would trigger a redundant reload.
+        if (this.formGroup.value.showAdvancedChartOptions !== showAdvancedChartOptions) {
+            this.formGroup.patchValue({ showAdvancedChartOptions });
+        }
     }
     /**
      * DEPRECATED: to be removed when there is another way to identify time series migration.
@@ -1235,6 +1246,12 @@ class DatapointExplorerComponent {
             return err?.res?.status === 405;
         }
     }
+    /** Probe the tenant migration state at most once; migration is tenant-wide and stable. */
+    async resolveMigrationStatus(firstDp) {
+        if (this.isMigrated === undefined && firstDp) {
+            this.isMigrated = await this.detectTimeSeriesMigration(firstDp);
+        }
+    }
     isActualDate(val) {
         if (!val)
             return false;
@@ -1251,13 +1268,14 @@ class DatapointExplorerComponent {
         return alarms.length > 0 && alarms.some(alarm => alarm.__active);
     }
     checkForMatchingDatapoints() {
-        const allMatch = this.config?.alarmsEventsConfigs?.every(ae => this.formGroup.value.datapoints?.some(dp => dp.__target?.id === ae.__target?.id));
+        const allMatch = this.config().alarmsEventsConfigs?.every(ae => this.formGroup.value.datapoints?.some(dp => dp.__target?.id === ae.__target?.id));
         queueMicrotask(() => {
             this.alarmsOrEventsHaveNoMatchingDps = !allMatch;
         });
     }
     updateExportConfig() {
-        const datapointDetails = this.config.datapoints
+        const config = this.config();
+        const datapointDetails = config.datapoints
             .filter(({ __active }) => __active)
             .map(({ __target, fragment, series }) => ({
             deviceName: __target.name,
@@ -1270,9 +1288,9 @@ class DatapointExplorerComponent {
         }
         else {
             this.exportConfig = {
-                aggregation: this.config.aggregation,
-                dateFrom: new Date(this.config.dateFrom).toISOString(),
-                dateTo: new Date(this.config.dateTo).toISOString(),
+                aggregation: config.aggregation,
+                dateFrom: new Date(config.dateFrom).toISOString(),
+                dateTo: new Date(config.dateTo).toISOString(),
                 datapointDetails: datapointDetails
             };
         }
@@ -1294,23 +1312,24 @@ class DatapointExplorerComponent {
             title: gettext('Data points'),
             _width: 24,
             _height: 12,
-            config: this.config
+            config: this.config()
         };
     }
     initForm() {
+        const config = this.config();
         return this.formBuilder.group({
-            datapoints: [this.config.datapoints || []],
-            aggregatedDatapoint: [this.config.aggregatedDatapoint || null],
+            datapoints: [config.datapoints || []],
+            aggregatedDatapoint: [config.aggregatedDatapoint || null],
             alarms: [this.alarms || []],
             events: [this.events || []],
-            dateFrom: [this.config.dateFrom || null],
-            dateTo: [this.config.dateTo || null],
-            interval: [this.config.interval || 'hours'],
-            aggregation: [this.config.aggregation || null],
-            autoAggregation: [this.config.autoAggregation || null],
-            realtime: [this.config.realtime || false],
-            isAutoRefreshEnabled: [this.config.isAutoRefreshEnabled || false],
-            refreshInterval: [this.config.refreshInterval || 5000],
+            dateFrom: [config.dateFrom || null],
+            dateTo: [config.dateTo || null],
+            interval: [config.interval || 'hours'],
+            aggregation: [config.aggregation || null],
+            autoAggregation: [config.autoAggregation || null],
+            realtime: [config.realtime || false],
+            isAutoRefreshEnabled: [config.isAutoRefreshEnabled || false],
+            refreshInterval: [config.refreshInterval || 5000],
             displayMarkedLine: [true, []],
             displayMarkedPoint: [true, []],
             mergeMatchingDatapoints: [true, []],
@@ -1332,7 +1351,7 @@ class DatapointExplorerComponent {
             ChartAlarmsService,
             ChartHelpersService,
             WidgetTimeContextDateRangeService
-        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }, { propertyName: "timeContext", first: true, predicate: ["timeContext"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n  [enableAutoAggregation]=\"true\"\n  [timePickerConfig]=\"TIME_PICKER_CONFIG\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    [tooltip]=\"\n      ((inFullScreen$ | async)\n        ? fullScreenToggleTooltipText.exit\n        : fullScreenToggleTooltipText.enter\n      ) | translate\n    \"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"datapoint-explorer--full-screen\"\n  >\n    <i\n      [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{\n        ((inFullScreen$ | async)\n          ? fullScreenToggleTooltipText.exit\n          : fullScreenToggleTooltipText.enter\n        ) | translate\n      }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (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\n          c8yIcon=\"th\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<c8y-resizable-grid\n  class=\"content-fullpage\"\n  [leftColumnWidth]=\"'calc(100% - 360px)'\"\n  [collapseThreshold]=\"360\"\n  [trackId]=\"'datapoint-explorer'\"\n>\n  <div\n    class=\"d-col gap-16 inner-scroll\"\n    left-pane\n  >\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      style=\"min-height: 340px\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"flex-shrink p-16 p-r-16 p-relative\"\n      [class.bg-level-1]=\"showSettings\"\n      [class.p-b-0]=\"!showSettings\"\n      style=\"z-index: 1\"\n      [formGroup]=\"formGroup\"\n    >\n      <button\n        class=\"legend form-block center btn-clean m-b-0 m-t-0\"\n        aria-controls=\"chart-settings-panel\"\n        [attr.aria-expanded]=\"showSettings\"\n        (click)=\"showSettings = !showSettings; triggerResize()\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'combo-chart'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ 'Display settings' | translate }}\n        </span>\n        <i\n          class=\"m-l-4\"\n          [c8yIcon]=\"showSettings ? 'chevron-up' : 'chevron-down'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n      <div\n        class=\"collapse bg-level-1\"\n        id=\"chart-settings-panel\"\n        [collapse]=\"!showSettings\"\n        [isAnimated]=\"true\"\n      >\n        <div class=\"bg-level-1 responsive-grid-table-wrapper--600\">\n          <div\n            class=\"responsive-grid-table responsive-grid-table--padded responsive-grid-table__body\"\n          >\n            <div class=\"col-5 d-col a-s-start p-b-0\">\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                  @if (alarmsOrEventsHaveNoMatchingDps) {\n                    <button\n                      class=\"btn-dot m-l-4\"\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                      [popover]=\"\n                        'Some alarms or events have no matching data points. No icons will be shown for them.'\n                          | translate\n                      \"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <i\n                        class=\"text-warning\"\n                        c8yIcon=\"warning\"\n                      ></i>\n                    </button>\n                  }\n                </label>\n              </fieldset>\n\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                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show smooth lines' | translate\"\n                >\n                  <input\n                    name=\"smoothLines\"\n                    type=\"checkbox\"\n                    formControlName=\"smoothLines\"\n                  />\n                  <span></span>\n                  <span translate>Show smooth lines</span>\n                </label>\n              </fieldset>\n            </div>\n            <div class=\"col-7 a-s-start p-b-0\">\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 a 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 a single axis</span>\n                  <button\n                    class=\"btn-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Force merge all data points into a 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 a single axis</span>\n                  <button\n                    class=\"btn-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Set Y-axis start to 0' | translate\"\n                >\n                  <input\n                    name=\"setYaxisStartToZero\"\n                    type=\"checkbox\"\n                    formControlName=\"setYaxisStartToZero\"\n                  />\n                  <span></span>\n                  <span translate>Set Y-axis start to 0</span>\n                  <button\n                    class=\"btn-help\"\n                    [attr.aria-label]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    [popover]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    right-pane\n  >\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</c8y-resizable-grid>\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: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i3$2.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle", "removeTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i4$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: i5.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: "ngmodule", type: CollapseModule }, { kind: "directive", type: i7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "timePickerConfig", "enableAutoAggregation", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "datapointBackInSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint", "duplicateAggregationsDetected"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["displayMode", "containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WorkspaceConfigComponent, selector: "c8y-workspace-config", inputs: ["updatedConfig", "silent", "defaultConfigurationId"], outputs: ["onConfigurationChange"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true }, { propertyName: "timeContext", first: true, predicate: ["timeContext"], descendants: true }], ngImport: i0, template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n  [enableAutoAggregation]=\"true\"\n  [timePickerConfig]=\"TIME_PICKER_CONFIG\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config()\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    [tooltip]=\"\n      ((inFullScreen$ | async)\n        ? fullScreenToggleTooltipText.exit\n        : fullScreenToggleTooltipText.enter\n      ) | translate\n    \"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"datapoint-explorer--full-screen\"\n  >\n    <i\n      [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{\n        ((inFullScreen$ | async)\n          ? fullScreenToggleTooltipText.exit\n          : fullScreenToggleTooltipText.enter\n        ) | translate\n      }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (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\n          c8yIcon=\"th\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<c8y-resizable-grid\n  class=\"content-fullpage\"\n  [leftColumnWidth]=\"'calc(100% - 360px)'\"\n  [collapseThreshold]=\"360\"\n  [trackId]=\"'datapoint-explorer'\"\n>\n  <div\n    class=\"d-col gap-16 inner-scroll\"\n    left-pane\n  >\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      style=\"min-height: 340px\"\n      #chart\n      [config]=\"config()\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"flex-shrink p-16 p-r-16 p-relative\"\n      [class.bg-level-1]=\"showSettings\"\n      [class.p-b-0]=\"!showSettings\"\n      style=\"z-index: 1\"\n      [formGroup]=\"formGroup\"\n    >\n      <button\n        class=\"legend form-block center btn-clean m-b-0 m-t-0\"\n        aria-controls=\"chart-settings-panel\"\n        [attr.aria-expanded]=\"showSettings\"\n        (click)=\"showSettings = !showSettings; triggerResize()\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'combo-chart'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ 'Display settings' | translate }}\n        </span>\n        <i\n          class=\"m-l-4\"\n          [c8yIcon]=\"showSettings ? 'chevron-up' : 'chevron-down'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n      <div\n        class=\"collapse bg-level-1\"\n        id=\"chart-settings-panel\"\n        [collapse]=\"!showSettings\"\n        [isAnimated]=\"true\"\n      >\n        <div class=\"bg-level-1 responsive-grid-table-wrapper--600\">\n          <div\n            class=\"responsive-grid-table responsive-grid-table--padded responsive-grid-table__body\"\n          >\n            <div class=\"col-5 d-col a-s-start p-b-0\">\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                  @if (alarmsOrEventsHaveNoMatchingDps) {\n                    <button\n                      class=\"btn-dot m-l-4\"\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                      [popover]=\"\n                        'Some alarms or events have no matching data points. No icons will be shown for them.'\n                          | translate\n                      \"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <i\n                        class=\"text-warning\"\n                        c8yIcon=\"warning\"\n                      ></i>\n                    </button>\n                  }\n                </label>\n              </fieldset>\n\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                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show smooth lines' | translate\"\n                >\n                  <input\n                    name=\"smoothLines\"\n                    type=\"checkbox\"\n                    formControlName=\"smoothLines\"\n                  />\n                  <span></span>\n                  <span translate>Show smooth lines</span>\n                </label>\n              </fieldset>\n            </div>\n            <div class=\"col-7 a-s-start p-b-0\">\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 a 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 a single axis</span>\n                  <button\n                    class=\"btn-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Force merge all data points into a 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 a single axis</span>\n                  <button\n                    class=\"btn-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Set Y-axis start to 0' | translate\"\n                >\n                  <input\n                    name=\"setYaxisStartToZero\"\n                    type=\"checkbox\"\n                    formControlName=\"setYaxisStartToZero\"\n                  />\n                  <span></span>\n                  <span translate>Set Y-axis start to 0</span>\n                  <button\n                    class=\"btn-help\"\n                    [attr.aria-label]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    [popover]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    right-pane\n  >\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</c8y-resizable-grid>\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: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i3$2.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle", "removeTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: AlarmEventSelectorModule }, { kind: "component", type: i4$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: i5.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: "ngmodule", type: CollapseModule }, { kind: "directive", type: i7.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "component", type: TimeContextComponent, selector: "c8y-time-context", inputs: ["changedDateContext", "controlsAvailable", "timeContext", "timePickerConfig", "enableAutoAggregation", "context"], outputs: ["contextChange"] }, { kind: "component", type: ChartsComponent, selector: "c8y-charts", inputs: ["config", "alerts", "chartViewContext"], outputs: ["configChangeOnZoomOut", "timeRangeChangeOnRealtime", "datapointOutOfSync", "datapointBackInSync", "updateAlarmsAndEvents", "isMarkedAreaEnabled", "finishLoading", "updateActiveDatapoints", "updateAggregatedSliderDatapoint", "duplicateAggregationsDetected"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: DatapointsExportSelectorComponent, selector: "c8y-datapoints-export-selector", inputs: ["displayMode", "containerClass", "exportConfig"], outputs: ["isOpen"] }, { kind: "component", type: WorkspaceConfigComponent, selector: "c8y-workspace-config", inputs: ["updatedConfig", "silent", "defaultConfigurationId"], outputs: ["onConfigurationChange"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DatapointExplorerComponent, decorators: [{
             type: Component,
@@ -1358,7 +1377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         ChartAlarmsService,
                         ChartHelpersService,
                         WidgetTimeContextDateRangeService
-                    ], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n  [enableAutoAggregation]=\"true\"\n  [timePickerConfig]=\"TIME_PICKER_CONFIG\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    [tooltip]=\"\n      ((inFullScreen$ | async)\n        ? fullScreenToggleTooltipText.exit\n        : fullScreenToggleTooltipText.enter\n      ) | translate\n    \"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"datapoint-explorer--full-screen\"\n  >\n    <i\n      [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{\n        ((inFullScreen$ | async)\n          ? fullScreenToggleTooltipText.exit\n          : fullScreenToggleTooltipText.enter\n        ) | translate\n      }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (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\n          c8yIcon=\"th\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<c8y-resizable-grid\n  class=\"content-fullpage\"\n  [leftColumnWidth]=\"'calc(100% - 360px)'\"\n  [collapseThreshold]=\"360\"\n  [trackId]=\"'datapoint-explorer'\"\n>\n  <div\n    class=\"d-col gap-16 inner-scroll\"\n    left-pane\n  >\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      style=\"min-height: 340px\"\n      #chart\n      [config]=\"config\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"flex-shrink p-16 p-r-16 p-relative\"\n      [class.bg-level-1]=\"showSettings\"\n      [class.p-b-0]=\"!showSettings\"\n      style=\"z-index: 1\"\n      [formGroup]=\"formGroup\"\n    >\n      <button\n        class=\"legend form-block center btn-clean m-b-0 m-t-0\"\n        aria-controls=\"chart-settings-panel\"\n        [attr.aria-expanded]=\"showSettings\"\n        (click)=\"showSettings = !showSettings; triggerResize()\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'combo-chart'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ 'Display settings' | translate }}\n        </span>\n        <i\n          class=\"m-l-4\"\n          [c8yIcon]=\"showSettings ? 'chevron-up' : 'chevron-down'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n      <div\n        class=\"collapse bg-level-1\"\n        id=\"chart-settings-panel\"\n        [collapse]=\"!showSettings\"\n        [isAnimated]=\"true\"\n      >\n        <div class=\"bg-level-1 responsive-grid-table-wrapper--600\">\n          <div\n            class=\"responsive-grid-table responsive-grid-table--padded responsive-grid-table__body\"\n          >\n            <div class=\"col-5 d-col a-s-start p-b-0\">\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                  @if (alarmsOrEventsHaveNoMatchingDps) {\n                    <button\n                      class=\"btn-dot m-l-4\"\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                      [popover]=\"\n                        'Some alarms or events have no matching data points. No icons will be shown for them.'\n                          | translate\n                      \"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <i\n                        class=\"text-warning\"\n                        c8yIcon=\"warning\"\n                      ></i>\n                    </button>\n                  }\n                </label>\n              </fieldset>\n\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                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show smooth lines' | translate\"\n                >\n                  <input\n                    name=\"smoothLines\"\n                    type=\"checkbox\"\n                    formControlName=\"smoothLines\"\n                  />\n                  <span></span>\n                  <span translate>Show smooth lines</span>\n                </label>\n              </fieldset>\n            </div>\n            <div class=\"col-7 a-s-start p-b-0\">\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 a 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 a single axis</span>\n                  <button\n                    class=\"btn-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Force merge all data points into a 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 a single axis</span>\n                  <button\n                    class=\"btn-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Set Y-axis start to 0' | translate\"\n                >\n                  <input\n                    name=\"setYaxisStartToZero\"\n                    type=\"checkbox\"\n                    formControlName=\"setYaxisStartToZero\"\n                  />\n                  <span></span>\n                  <span translate>Set Y-axis start to 0</span>\n                  <button\n                    class=\"btn-help\"\n                    [attr.aria-label]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    [popover]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    right-pane\n  >\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</c8y-resizable-grid>\n" }]
+                    ], template: "<c8y-title>{{ 'Data explorer' | translate }}</c8y-title>\n\n<c8y-time-context\n  #timeContext\n  (contextChange)=\"onTimeContextChange($event)\"\n  [changedDateContext]=\"timeProps\"\n  [timeContext]=\"(settings$ | async)?.timeContext\"\n  [enableAutoAggregation]=\"true\"\n  [timePickerConfig]=\"TIME_PICKER_CONFIG\"\n></c8y-time-context>\n\n<c8y-action-bar-item\n  [placement]=\"'left'\"\n  itemClass=\"navbar-form\"\n>\n  <c8y-workspace-config\n    [updatedConfig]=\"config()\"\n    [silent]=\"(settings$ | async)?.hideWorkspaceConfig\"\n    (onConfigurationChange)=\"onConfigurationChange($event)\"\n  ></c8y-workspace-config>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item\n  [placement]=\"'right'\"\n  [priority]=\"-5000\"\n  itemClass=\"pull-right\"\n>\n  <button\n    class=\"btn btn-link\"\n    [attr.aria-label]=\"'Full screen' | translate\"\n    [tooltip]=\"\n      ((inFullScreen$ | async)\n        ? fullScreenToggleTooltipText.exit\n        : fullScreenToggleTooltipText.enter\n      ) | translate\n    \"\n    placement=\"left\"\n    container=\"body\"\n    type=\"button\"\n    [delay]=\"500\"\n    (click)=\"toggleFullscreen()\"\n    data-cy=\"datapoint-explorer--full-screen\"\n  >\n    <i\n      [c8yIcon]=\"(inFullScreen$ | async) ? 'compress' : 'expand'\"\n      aria-hidden=\"true\"\n    ></i>\n    <span class=\"visible-xs-inline hidden-sm visible-md-inline visibile-lg-inline\">\n      {{\n        ((inFullScreen$ | async)\n          ? fullScreenToggleTooltipText.exit\n          : fullScreenToggleTooltipText.enter\n        ) | translate\n      }}\n    </span>\n  </button>\n</c8y-action-bar-item>\n\n@if (!(settings$ | async)?.hideExportSelector) {\n  <c8y-action-bar-item [placement]=\"'right'\">\n    <c8y-datapoints-export-selector\n      [exportConfig]=\"exportConfig\"\n      [containerClass]=\"'d-contents'\"\n    ></c8y-datapoints-export-selector>\n  </c8y-action-bar-item>\n}\n\n@if (!(settings$ | async)?.hideWidgetActions) {\n  @if (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\n          c8yIcon=\"th\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Send as widget to dashboard' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  } @else {\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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></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\n          c8yIcon=\"c8y-reports\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>{{ 'Create a new report with widget' | translate }}</span>\n      </button>\n    </c8y-action-bar-item>\n  }\n}\n\n<c8y-resizable-grid\n  class=\"content-fullpage\"\n  [leftColumnWidth]=\"'calc(100% - 360px)'\"\n  [collapseThreshold]=\"360\"\n  [trackId]=\"'datapoint-explorer'\"\n>\n  <div\n    class=\"d-col gap-16 inner-scroll\"\n    left-pane\n  >\n    <c8y-charts\n      class=\"flex-grow data-point-explorer\"\n      style=\"min-height: 340px\"\n      #chart\n      [config]=\"config()\"\n      [alerts]=\"alerts\"\n      [chartViewContext]=\"chartViewContext\"\n      (updateAlarmsAndEvents)=\"updateAlarmsAndEvents($event)\"\n      (configChangeOnZoomOut)=\"onSliderZoom($event)\"\n      (datapointOutOfSync)=\"handleDatapointOutOfSync($event)\"\n      (datapointBackInSync)=\"handleDatapointBackInSync($event)\"\n      (timeRangeChangeOnRealtime)=\"updateTimeRangeOnRealtime($event)\"\n      (isMarkedAreaEnabled)=\"isMarkedAreaEnabled = $event\"\n      (updateActiveDatapoints)=\"updateActiveDatapoints($event)\"\n      (updateAggregatedSliderDatapoint)=\"updateAggregatedSliderDatapoint($event)\"\n    ></c8y-charts>\n    <form\n      class=\"flex-shrink p-16 p-r-16 p-relative\"\n      [class.bg-level-1]=\"showSettings\"\n      [class.p-b-0]=\"!showSettings\"\n      style=\"z-index: 1\"\n      [formGroup]=\"formGroup\"\n    >\n      <button\n        class=\"legend form-block center btn-clean m-b-0 m-t-0\"\n        aria-controls=\"chart-settings-panel\"\n        [attr.aria-expanded]=\"showSettings\"\n        (click)=\"showSettings = !showSettings; triggerResize()\"\n      >\n        <i\n          class=\"m-r-4\"\n          [c8yIcon]=\"'combo-chart'\"\n          aria-hidden=\"true\"\n        ></i>\n        <span>\n          {{ 'Display settings' | translate }}\n        </span>\n        <i\n          class=\"m-l-4\"\n          [c8yIcon]=\"showSettings ? 'chevron-up' : 'chevron-down'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n      <div\n        class=\"collapse bg-level-1\"\n        id=\"chart-settings-panel\"\n        [collapse]=\"!showSettings\"\n        [isAnimated]=\"true\"\n      >\n        <div class=\"bg-level-1 responsive-grid-table-wrapper--600\">\n          <div\n            class=\"responsive-grid-table responsive-grid-table--padded responsive-grid-table__body\"\n          >\n            <div class=\"col-5 d-col a-s-start p-b-0\">\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                  @if (alarmsOrEventsHaveNoMatchingDps) {\n                    <button\n                      class=\"btn-dot m-l-4\"\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                      [popover]=\"\n                        'Some alarms or events have no matching data points. No icons will be shown for them.'\n                          | translate\n                      \"\n                      triggers=\"focus\"\n                      container=\"body\"\n                      type=\"button\"\n                      (click)=\"$event.stopPropagation()\"\n                    >\n                      <i\n                        class=\"text-warning\"\n                        c8yIcon=\"warning\"\n                      ></i>\n                    </button>\n                  }\n                </label>\n              </fieldset>\n\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                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Show smooth lines' | translate\"\n                >\n                  <input\n                    name=\"smoothLines\"\n                    type=\"checkbox\"\n                    formControlName=\"smoothLines\"\n                  />\n                  <span></span>\n                  <span translate>Show smooth lines</span>\n                </label>\n              </fieldset>\n            </div>\n            <div class=\"col-7 a-s-start p-b-0\">\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 a 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 a single axis</span>\n                  <button\n                    class=\"btn-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Force merge all data points into a 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 a single axis</span>\n                  <button\n                    class=\"btn-help\"\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                    [popover]=\"\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                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n                <label\n                  class=\"c8y-checkbox\"\n                  [title]=\"'Set Y-axis start to 0' | translate\"\n                >\n                  <input\n                    name=\"setYaxisStartToZero\"\n                    type=\"checkbox\"\n                    formControlName=\"setYaxisStartToZero\"\n                  />\n                  <span></span>\n                  <span translate>Set Y-axis start to 0</span>\n                  <button\n                    class=\"btn-help\"\n                    [attr.aria-label]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    [popover]=\"\n                      'Sets the Y-axis minimum to 0 for all data points with positive values. If any data point includes negative values, the axis may still extend below 0. Explicitly configured minimum and maximum values take precedence over this option.'\n                        | translate\n                    \"\n                    triggers=\"focus\"\n                    container=\"body\"\n                    type=\"button\"\n                    (click)=\"$event.stopPropagation()\"\n                  ></button>\n                </label>\n              </fieldset>\n            </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>\n  <div\n    class=\"inner-scroll bg-level-1\"\n    right-pane\n  >\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</c8y-resizable-grid>\n" }]
         }], ctorParameters: () => [], propDecorators: { chart: [{
                 type: ViewChild,
                 args: ['chart']