@c8y/ngx-components 1021.67.0 → 1021.71.0

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

@@ -1,65 +1,98 @@
 import * as i0 from '@angular/core';
-import { NgModule } from '@angular/core';
-import { hookRoute, ViewContext, gettext, hookNavigator, NavigatorNode } from '@c8y/ngx-components';
+import { inject, Injectable, NgModule } from '@angular/core';
+import { PreviewService, NavigatorNode, gettext, ViewContext, hookRoute, hookNavigator, hookPreview } from '@c8y/ngx-components';
+import { map } from 'rxjs';
+
+class DatapointExplorerNavigationFactory {
+    constructor() {
+        this.betaPreviewService = inject(PreviewService);
+    }
+    get() {
+        return this.betaPreviewService.getState$('ui.datapoint-explorer.v2').pipe(map(state => {
+            if (state) {
+                return [
+                    new NavigatorNode({
+                        label: gettext('Data explorer'),
+                        featureId: 'dataPointExplorer',
+                        path: 'datapointexplorer-v2',
+                        icon: 'c8y-data-explorer',
+                        routerLinkExact: false
+                    })
+                ];
+            }
+            return [];
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerNavigationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerNavigationFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerNavigationFactory, decorators: [{
+            type: Injectable
+        }] });
+
+class DatapointExplorerRouteFactory {
+    constructor() {
+        this.betaPreviewService = inject(PreviewService);
+    }
+    get() {
+        return this.betaPreviewService.getState$('ui.datapoint-explorer.v2').pipe(map(state => {
+            if (state) {
+                return [
+                    {
+                        path: 'datapointexplorer-v2',
+                        loadComponent: () => import('@c8y/ngx-components/datapoint-explorer/view').then(m => m.DatapointExplorerComponent)
+                    },
+                    {
+                        context: ViewContext.Group,
+                        path: 'data_explorer-v2',
+                        priority: 800,
+                        icon: 'c8y-data-explorer',
+                        label: gettext('Data Explorer'),
+                        loadComponent: () => import('@c8y/ngx-components/datapoint-explorer/view').then(m => m.DatapointExplorerComponent),
+                        featureId: 'dataExplorer'
+                    }
+                ];
+            }
+            return [];
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerRouteFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerRouteFactory }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerRouteFactory, decorators: [{
+            type: Injectable
+        }] });
 
 class DatapointExplorerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerModule, providers: [
-            hookRoute([
-                {
-                    path: 'datapointexplorer-v2',
-                    loadComponent: () => import('@c8y/ngx-components/datapoint-explorer/view').then(m => m.DatapointExplorerComponent)
-                },
-                {
-                    context: ViewContext.Group,
-                    path: 'data_explorer-v2',
-                    priority: 800,
-                    icon: 'c8y-data-explorer',
-                    label: gettext('Data Explorer "new"'),
-                    loadComponent: () => import('@c8y/ngx-components/datapoint-explorer/view').then(m => m.DatapointExplorerComponent),
-                    featureId: 'dataExplorer'
+            hookRoute(DatapointExplorerRouteFactory),
+            hookNavigator(DatapointExplorerNavigationFactory),
+            hookPreview({
+                key: 'ui.datapoint-explorer.v2',
+                label: 'Data point explorer',
+                description: () => import('@c8y/style/markdown-files/datapoint-explorer-preview.md').then(m => m.default),
+                settings: {
+                    reload: true
                 }
-            ]),
-            hookNavigator([
-                new NavigatorNode({
-                    label: gettext('Data explorer "new"'),
-                    featureId: 'dataPointExplorer',
-                    path: 'datapointexplorer-v2',
-                    icon: 'c8y-data-explorer',
-                    routerLinkExact: false
-                })
-            ])
+            })
         ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointExplorerModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [
-                        hookRoute([
-                            {
-                                path: 'datapointexplorer-v2',
-                                loadComponent: () => import('@c8y/ngx-components/datapoint-explorer/view').then(m => m.DatapointExplorerComponent)
-                            },
-                            {
-                                context: ViewContext.Group,
-                                path: 'data_explorer-v2',
-                                priority: 800,
-                                icon: 'c8y-data-explorer',
-                                label: gettext('Data Explorer "new"'),
-                                loadComponent: () => import('@c8y/ngx-components/datapoint-explorer/view').then(m => m.DatapointExplorerComponent),
-                                featureId: 'dataExplorer'
+                        hookRoute(DatapointExplorerRouteFactory),
+                        hookNavigator(DatapointExplorerNavigationFactory),
+                        hookPreview({
+                            key: 'ui.datapoint-explorer.v2',
+                            label: 'Data point explorer',
+                            description: () => import('@c8y/style/markdown-files/datapoint-explorer-preview.md').then(m => m.default),
+                            settings: {
+                                reload: true
                             }
-                        ]),
-                        hookNavigator([
-                            new NavigatorNode({
-                                label: gettext('Data explorer "new"'),
-                                featureId: 'dataPointExplorer',
-                                path: 'datapointexplorer-v2',
-                                icon: 'c8y-data-explorer',
-                                routerLinkExact: false
-                            })
-                        ])
+                        })
                     ]
                 }]
         }] });

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

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-datapoint-explorer.mjs","sources":["../../datapoint-explorer/datapoint-explorer.module.ts","../../datapoint-explorer/c8y-ngx-components-datapoint-explorer.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { gettext, hookNavigator, hookRoute, NavigatorNode, ViewContext } from '@c8y/ngx-components';\n\n@NgModule({\n  providers: [\n    hookRoute([\n      {\n        path: 'datapointexplorer-v2',\n        loadComponent: () =>\n          import('@c8y/ngx-components/datapoint-explorer/view').then(\n            m => m.DatapointExplorerComponent\n          )\n      },\n      {\n        context: ViewContext.Group,\n        path: 'data_explorer-v2',\n        priority: 800,\n        icon: 'c8y-data-explorer',\n        label: gettext('Data Explorer \"new\"'),\n        loadComponent: () =>\n          import('@c8y/ngx-components/datapoint-explorer/view').then(\n            m => m.DatapointExplorerComponent\n          ),\n        featureId: 'dataExplorer'\n      }\n    ]),\n    hookNavigator([\n      new NavigatorNode({\n        label: gettext('Data explorer \"new\"'),\n        featureId: 'dataPointExplorer',\n        path: 'datapointexplorer-v2',\n        icon: 'c8y-data-explorer',\n        routerLinkExact: false\n      })\n    ])\n  ]\n})\nexport class DatapointExplorerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAqCa,uBAAuB,CAAA;+GAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAvB,uBAAuB,EAAA,CAAA,CAAA,EAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,uBAAuB,EAjCvB,SAAA,EAAA;AACT,YAAA,SAAS,CAAC;AACR,gBAAA;AACE,oBAAA,IAAI,EAAE,sBAAsB;AAC5B,oBAAA,aAAa,EAAE,MACb,OAAO,6CAA6C,CAAC,CAAC,IAAI,CACxD,CAAC,IAAI,CAAC,CAAC,0BAA0B,CAClC;AACJ,iBAAA;AACD,gBAAA;oBACE,OAAO,EAAE,WAAW,CAAC,KAAK;AAC1B,oBAAA,IAAI,EAAE,kBAAkB;AACxB,oBAAA,QAAQ,EAAE,GAAG;AACb,oBAAA,IAAI,EAAE,mBAAmB;AACzB,oBAAA,KAAK,EAAE,OAAO,CAAC,qBAAqB,CAAC;AACrC,oBAAA,aAAa,EAAE,MACb,OAAO,6CAA6C,CAAC,CAAC,IAAI,CACxD,CAAC,IAAI,CAAC,CAAC,0BAA0B,CAClC;AACH,oBAAA,SAAS,EAAE,cAAc;AAC1B,iBAAA;aACF,CAAC;AACF,YAAA,aAAa,CAAC;AACZ,gBAAA,IAAI,aAAa,CAAC;AAChB,oBAAA,KAAK,EAAE,OAAO,CAAC,qBAAqB,CAAC;AACrC,oBAAA,SAAS,EAAE,mBAAmB;AAC9B,oBAAA,IAAI,EAAE,sBAAsB;AAC5B,oBAAA,IAAI,EAAE,mBAAmB;AACzB,oBAAA,eAAe,EAAE,KAAK;iBACvB,CAAC;aACH,CAAC;AACH,SAAA,EAAA,CAAA,CAAA,EAAA;;4FAEU,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAlCnC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,SAAS,EAAE;AACT,wBAAA,SAAS,CAAC;AACR,4BAAA;AACE,gCAAA,IAAI,EAAE,sBAAsB;AAC5B,gCAAA,aAAa,EAAE,MACb,OAAO,6CAA6C,CAAC,CAAC,IAAI,CACxD,CAAC,IAAI,CAAC,CAAC,0BAA0B,CAClC;AACJ,6BAAA;AACD,4BAAA;gCACE,OAAO,EAAE,WAAW,CAAC,KAAK;AAC1B,gCAAA,IAAI,EAAE,kBAAkB;AACxB,gCAAA,QAAQ,EAAE,GAAG;AACb,gCAAA,IAAI,EAAE,mBAAmB;AACzB,gCAAA,KAAK,EAAE,OAAO,CAAC,qBAAqB,CAAC;AACrC,gCAAA,aAAa,EAAE,MACb,OAAO,6CAA6C,CAAC,CAAC,IAAI,CACxD,CAAC,IAAI,CAAC,CAAC,0BAA0B,CAClC;AACH,gCAAA,SAAS,EAAE,cAAc;AAC1B,6BAAA;yBACF,CAAC;AACF,wBAAA,aAAa,CAAC;AACZ,4BAAA,IAAI,aAAa,CAAC;AAChB,gCAAA,KAAK,EAAE,OAAO,CAAC,qBAAqB,CAAC;AACrC,gCAAA,SAAS,EAAE,mBAAmB;AAC9B,gCAAA,IAAI,EAAE,sBAAsB;AAC5B,gCAAA,IAAI,EAAE,mBAAmB;AACzB,gCAAA,eAAe,EAAE,KAAK;6BACvB,CAAC;yBACH,CAAC;AACH,qBAAA;AACF,iBAAA,CAAA;;;ACpCD;;AAEG;;;;"}
+{"version":3,"file":"c8y-ngx-components-datapoint-explorer.mjs","sources":["../../datapoint-explorer/datapoint-explorer-navigation-factory.ts","../../datapoint-explorer/datapoint-explorer-route-factory.ts","../../datapoint-explorer/datapoint-explorer.module.ts","../../datapoint-explorer/c8y-ngx-components-datapoint-explorer.ts"],"sourcesContent":["import { inject, Injectable } from '@angular/core';\nimport { gettext, NavigatorNode, NavigatorNodeFactory, PreviewService } from '@c8y/ngx-components';\nimport { map, Observable } from 'rxjs';\n\n@Injectable()\nexport class DatapointExplorerNavigationFactory implements NavigatorNodeFactory {\n  private readonly betaPreviewService = inject(PreviewService);\n\n  get(): Observable<NavigatorNode[]> {\n    return this.betaPreviewService.getState$('ui.datapoint-explorer.v2').pipe(\n      map(state => {\n        if (state) {\n          return [\n            new NavigatorNode({\n              label: gettext('Data explorer'),\n              featureId: 'dataPointExplorer',\n              path: 'datapointexplorer-v2',\n              icon: 'c8y-data-explorer',\n              routerLinkExact: false\n            })\n          ];\n        }\n        return [];\n      })\n    );\n  }\n}\n","import { inject, Injectable } from '@angular/core';\nimport {\n  ExtensionFactory,\n  gettext,\n  PreviewService,\n  Route,\n  RouteWithComponent,\n  ViewContext\n} from '@c8y/ngx-components';\nimport { map, Observable } from 'rxjs';\n\n@Injectable()\nexport class DatapointExplorerRouteFactory implements ExtensionFactory<Route> {\n  private readonly betaPreviewService = inject(PreviewService);\n\n  get(): Observable<Route[]> {\n    return this.betaPreviewService.getState$('ui.datapoint-explorer.v2').pipe(\n      map(state => {\n        if (state) {\n          return [\n            {\n              path: 'datapointexplorer-v2',\n              loadComponent: () =>\n                import('@c8y/ngx-components/datapoint-explorer/view').then(\n                  m => m.DatapointExplorerComponent\n                )\n            } as RouteWithComponent,\n            {\n              context: ViewContext.Group,\n              path: 'data_explorer-v2',\n              priority: 800,\n              icon: 'c8y-data-explorer',\n              label: gettext('Data Explorer'),\n              loadComponent: () =>\n                import('@c8y/ngx-components/datapoint-explorer/view').then(\n                  m => m.DatapointExplorerComponent\n                ),\n              featureId: 'dataExplorer'\n            }\n          ];\n        }\n        return [];\n      })\n    );\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { hookNavigator, hookRoute, hookPreview } from '@c8y/ngx-components';\nimport { DatapointExplorerNavigationFactory } from './datapoint-explorer-navigation-factory';\nimport { DatapointExplorerRouteFactory } from './datapoint-explorer-route-factory';\n\n@NgModule({\n  providers: [\n    hookRoute(DatapointExplorerRouteFactory),\n    hookNavigator(DatapointExplorerNavigationFactory),\n    hookPreview({\n      key: 'ui.datapoint-explorer.v2',\n      label: 'Data point explorer',\n      description: () =>\n        import('@c8y/style/markdown-files/datapoint-explorer-preview.md').then(m => m.default),\n      settings: {\n        reload: true\n      }\n    })\n  ]\n})\nexport class DatapointExplorerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1496,12 +1496,14 @@ class ChartsComponent {
         this.chartEventsService = inject(ChartEventsService);
         this.chartAlarmsService = inject(ChartAlarmsService);
         this.widgetTimeContextDateRangeService = inject(WidgetTimeContextDateRangeService);
+        this.loadedTimeRange = null;
         this.chartOption$ = this.configChangedSubject.pipe(switchMap(() => this.loadAlarmsAndEvents()), switchMap(() => this.fetchSeriesForDatapoints$()), switchMap((datapointsWithValues) => {
             if (datapointsWithValues.length === 0) {
                 this.echartsInstance?.clear();
                 this.showLoadMore = false;
                 return of(this.getDefaultChartOptions());
             }
+            this.loadedTimeRange = { ...this.getTimeRange() };
             return this.getChartOptions(datapointsWithValues);
         }), tap(v => {
             if (v['empty']) {
@@ -1510,7 +1512,13 @@ class ChartsComponent {
             this.chartRealtimeService.stopRealtime();
             this.startRealtimeIfPossible();
             if (this.echartsInstance) {
-                this.echartsInstance.setOption(v, true);
+                /**
+                 * * Set the chart options
+                 * First parameter is the options to set
+                 * Second parameter is a boolean to indicate that the chart should be re-rendered as we do not want to merge.
+                 * Third parameter is a boolean to indicate that we want to lazy load the chart.
+                 */
+                this.echartsInstance.setOption(v, true, true);
                 const options = this.echartsInstance.getOption();
                 const dataZoom = options['dataZoom'][0];
                 if (dataZoom.start !== 0) {
@@ -1520,7 +1528,16 @@ class ChartsComponent {
             this.sliderZoomUsed = false;
         }));
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
+        const currentTimeRange = this.getTimeRange();
+        // Check if the current time range is within the loaded time range to avoid unnecessary updates
+        if (this.loadedTimeRange &&
+            new Date(currentTimeRange.dateFrom) >= new Date(this.loadedTimeRange.dateFrom) &&
+            new Date(currentTimeRange.dateTo) <= new Date(this.loadedTimeRange.dateTo) &&
+            changes.config.previousValue?.dateFrom !== changes.config.currentValue.dateFrom &&
+            changes.config.previousValue?.dateTo !== changes.config.currentValue.dateTo) {
+            return;
+        }
         this.configChangedSubject.next();
     }
     ngOnInit() {
@@ -1662,6 +1679,36 @@ class ChartsComponent {
             timeout = setTimeout(() => func(...args), wait);
         };
     }
+    /**
+     * Toggles the visibility of a series in the chart based on the provided datapoint.
+     * @param datapoint - The datapoint to toggle visibility for.
+     */
+    toggleDatapointSeriesVisibility(datapoint) {
+        const series = this.echartsInstance.getOption().series;
+        const seriesToUpdate = series.find(s => s.datapointLabel === datapoint.label);
+        if (seriesToUpdate) {
+            this.echartsInstance.dispatchAction({
+                type: 'legendToggleSelect',
+                name: seriesToUpdate.name
+            });
+        }
+    }
+    /**
+     * Toggles the visibility of a series in the chart based on the provided alarm or event.
+     * @param alarmOrEvent - The alarm or event to toggle visibility for.
+     */
+    toggleAlarmEventSeriesVisibility(alarmOrEvent) {
+        const series = this.echartsInstance.getOption().series;
+        const seriesToUpdate = series.filter(s => s.name === `${alarmOrEvent.label}-markPoint` || s.name === `${alarmOrEvent.label}-markLine`);
+        if (seriesToUpdate) {
+            seriesToUpdate.forEach(s => {
+                this.echartsInstance.dispatchAction({
+                    type: 'legendToggleSelect',
+                    name: s.name
+                });
+            });
+        }
+    }
     getDefaultChartOptions() {
         return {
             title: {