@c8y/ngx-components 1023.82.8 → 1023.83.3

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

@@ -456,6 +456,7 @@ class EchartsOptionsService {
         this.severityLabelPipe = severityLabelPipe;
         this.translate = translate;
         this.router = router;
+        this.highlightedSeriesName = null;
         this.AGGREGATED_SERIES_TYPE = 'aggr';
         this.TOOLTIP_WIDTH = 300;
     }
@@ -828,8 +829,11 @@ class EchartsOptionsService {
         const XAxisValue = tooltipParams[0].data[0];
         const YAxisReadings = [];
         const allSeries = this.echartsInstance?.getOption()['series'];
-        // filter out alarm and event series
-        const allDataPointSeries = allSeries.filter(series => series['typeOfSeries'] !== 'alarm' && series['typeOfSeries'] !== 'event');
+        const legendSelected = this.echartsInstance?.getOption()['legend']?.[0]?.selected;
+        // filter out alarm, event, and hidden series
+        const allDataPointSeries = allSeries.filter(series => series['typeOfSeries'] !== 'alarm' &&
+            series['typeOfSeries'] !== 'event' &&
+            legendSelected?.[series['name']] !== false);
         this.processSeries(allDataPointSeries, XAxisValue, YAxisReadings, displayOptions);
         // find event and alarm of the same type as the hovered markedLine or markedPoint
         const event = allEvents.find(e => e.type === params.data.itemType && params.data.value === e.time);
@@ -1464,7 +1468,7 @@ class EchartsOptionsService {
             data,
             ...(displayOptions.forceMergeDatapoints ? {} : { yAxisIndex: idx }),
             ...this.chartTypesService.getSeriesOptions(dp, isMinMaxChart, renderType),
-            ...(isLine && { smooth: displayOptions.smoothLines ?? false })
+            ...(isLine && { smooth: displayOptions.smoothLines ?? false, triggerLineEvent: true })
         };
     }
     /**
@@ -1480,9 +1484,11 @@ class EchartsOptionsService {
             const XAxisValue = data[0];
             const YAxisReadings = [];
             const allSeries = this.echartsInstance?.getOption()['series'];
+            const legendSelected = this.echartsInstance?.getOption()['legend']?.[0]?.selected;
             const allDataPointSeries = allSeries.filter(series => series['typeOfSeries'] !== 'alarm' &&
                 series['typeOfSeries'] !== 'event' &&
-                series['typeOfSeries'] !== 'fake');
+                series['typeOfSeries'] !== 'fake' &&
+                legendSelected?.[series['name']] !== false);
             allDataPointSeries.forEach((series) => {
                 let value;
                 const id = series['id'];
@@ -1527,10 +1533,12 @@ class EchartsOptionsService {
                             `</div></div>`;
                 }
                 const itemStyle = series['itemStyle'];
-                YAxisReadings.push(`<div class="d-flex a-i-center p-b-8 text-default"><span class='dlt-c8y-icon-circle m-r-4' style='color: ${echarts.format.encodeHTML(itemStyle.color)}'></span>` + // color circle
+                const isDimmed = this.highlightedSeriesName !== null && series['name'] !== this.highlightedSeriesName;
+                YAxisReadings.push(`<div style="opacity: ${isDimmed ? 0.4 : 1}">` +
+                    `<div class="d-flex a-i-center p-b-8 text-default"><span class='dlt-c8y-icon-circle m-r-4' style='color: ${echarts.format.encodeHTML(itemStyle.color)}'></span>` + // color circle
                     `<strong class="text-truncate">${echarts.format.encodeHTML(series['datapointLabel'])}</strong></div>` + // name
-                    `${value}` // single value or min-max range
-                );
+                    `${value}` + // single value or min-max range
+                    `</div>`);
             });
             return `<div inner-e-cbg-component style="width: ${this.TOOLTIP_WIDTH}px">${YAxisReadings.join('')}</div>`;
         };
@@ -2151,6 +2159,8 @@ class ChartsComponent {
         this.isChangeFromZoom = false;
         /** Tracks if the slider is being dragged — suppresses config updates mid-drag */
         this.isSliderDragging = false;
+        /** Tracks the currently highlighted series name, null when nothing is highlighted */
+        this.highlightedSeriesName = null;
         this.chartOption$ = this.configChangedSubject.pipe(tap(() => (this.isFetching = true)), switchMap(() => this.loadAlarmsAndEvents()), switchMap(() => this.fetchSeriesForDatapoints$()), switchMap((datapointsWithValues) => {
             if (datapointsWithValues.length === 0 && this.config.alarmsEventsConfigs?.length === 0) {
                 this.echartsInstance?.clear();
@@ -2160,22 +2170,28 @@ class ChartsComponent {
             // Use padded range since data is fetched with 60s padding
             this.loadedTimeRange = { ...this.getTimeRange(60_000) };
             return this.getChartOptions(datapointsWithValues);
-        }), tap(v => {
+        }), tap(options => {
             this.isFetching = false;
             this.finishLoading.emit(false);
-            if (v['empty']) {
+            if (options['empty']) {
                 return;
             }
             this.chartRealtimeService.stopRealtime();
             this.startRealtimeIfPossible();
             if (this.echartsInstance) {
+                // If a series is highlighted, set the opacity into the chart options before
+                // rendering so the lazy setOption already carries the correct visual state.
+                // This avoids any async race — the render itself is the source of truth.
+                if (this.highlightedSeriesName) {
+                    this.applyHighlightToChartOptions(options, this.highlightedSeriesName);
+                }
                 /**
                  * * 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);
+                this.echartsInstance.setOption(options, true, true);
             }
         }));
         this.widgetTimeContextDateRangeService.fullReload$
@@ -2315,6 +2331,12 @@ class ChartsComponent {
                 tooltip: { triggerOn: 'mousemove' },
                 series: [{ markArea: { data: [] }, markLine: { data: [] } }]
             });
+            if (params.componentType === 'series' && params.seriesName) {
+                this.toggleStickyHighlight(params.seriesName);
+            }
+            else {
+                this.setStickyHighlight(null);
+            }
             return;
         }
         const clickedAlarms = this.alarms.filter(alarm => alarm.type === params.data.itemType);
@@ -2352,8 +2374,8 @@ class ChartsComponent {
         this.echartsInstance.setOption(updatedOptions);
     }
     isAlarmOrEventClick(params) {
-        return (this.alarms.some(alarm => alarm.type === params.data.itemType) ||
-            this.events.some(event => event.type === params.data.itemType));
+        return (this.alarms.some(alarm => alarm.type === params.data?.itemType) ||
+            this.events.some(event => event.type === params.data?.itemType));
     }
     hasMarkArea(options) {
         return options?.series?.[0]?.markArea?.data?.length > 0;
@@ -2461,15 +2483,91 @@ class ChartsComponent {
         }
         const type = alarmOrEvent.filters.type;
         const actionType = alarmOrEvent.__hidden ? 'legendUnSelect' : 'legendSelect';
-        const matchingSeries = allSeries.filter(s => s.name?.startsWith(`${type}/`) &&
-            (s.name?.endsWith('-markLine') || s.name?.endsWith('-markPoint')));
+        const matchingSeries = allSeries.filter(s => typeof s.name === 'string' &&
+            s.name.startsWith(`${type}/`) &&
+            (s.name.endsWith('-markLine') || s.name.endsWith('-markPoint')));
         matchingSeries.forEach(series => {
+            if (typeof series.name !== 'string') {
+                return;
+            }
             this.echartsInstance.dispatchAction({
                 type: actionType,
                 name: series.name
             });
         });
     }
+    getDataSeriesNames() {
+        const series = this.echartsInstance.getOption().series;
+        const allSeries = Array.isArray(series) ? series : [series];
+        return allSeries
+            .filter(s => s.name &&
+            s['typeOfSeries'] !== 'alarm' &&
+            s['typeOfSeries'] !== 'event' &&
+            s['typeOfSeries'] !== 'fake' &&
+            s['datapointId'] !== 'aggregated')
+            .map(s => s.name);
+    }
+    /**
+     * Applies highlight opacity directly to an EChartsOption object's series array.
+     * Used to set the highlight into chart options before setOption.
+     * @param options - The chart options object to mutate in-place.
+     * @param highlightedName - The series name that should remain at full opacity.
+     */
+    applyHighlightToChartOptions(options, highlightedName) {
+        if (!Array.isArray(options.series)) {
+            return;
+        }
+        const series = options.series;
+        const dataSeriesNames = this.getDataSeriesNames();
+        series.forEach(s => {
+            const updatedSeries = this.changeSeriesOpacity(dataSeriesNames, highlightedName, s);
+            Object.assign(s, updatedSeries);
+        });
+    }
+    /**
+     * Applies or removes a sticky highlight by directly setting opacity on series styles.
+     * @param seriesName - The series to pin as highlighted, or null to restore all.
+     */
+    setStickyHighlight(seriesName) {
+        this.highlightedSeriesName = seriesName;
+        this.echartsOptionsService.highlightedSeriesName = seriesName;
+        const allSeries = this.echartsInstance.getOption().series;
+        const dataSeriesNames = this.getDataSeriesNames();
+        this.echartsInstance.setOption({
+            series: allSeries.map(s => {
+                return this.changeSeriesOpacity(dataSeriesNames, seriesName, s);
+            })
+        });
+    }
+    changeSeriesOpacity(dataSeriesName, seriesName, series) {
+        const dataSeriesNames = new Set(dataSeriesName);
+        if (typeof series.name !== 'string' || !dataSeriesNames.has(series.name)) {
+            return series;
+        }
+        const isDimmed = seriesName !== null && series.name !== seriesName;
+        const opacity = isDimmed ? 0.2 : 1;
+        return {
+            ...series,
+            lineStyle: { ...(series.lineStyle ?? {}), opacity },
+            itemStyle: { ...(series.itemStyle ?? {}), opacity },
+            emphasis: {
+                ...(series.emphasis ?? {}),
+                // Disable ECharts' automatic focus-blur so hovering other series
+                // does not override the pinned opacity we set here.
+                focus: 'none',
+                lineStyle: { ...(series.emphasis?.lineStyle ?? {}), opacity },
+                itemStyle: { ...(series.emphasis?.itemStyle ?? {}), opacity }
+            }
+        };
+    }
+    toggleStickyHighlight(seriesName) {
+        if (this.highlightedSeriesName === seriesName) {
+            // Same series clicked again — remove the lock
+            this.setStickyHighlight(null);
+            return;
+        }
+        this.setStickyHighlight(seriesName);
+    }
     get displayOptions() {
         const chartDefaults = CHART_DISPLAY_OPTION_DEFAULTS;
         return {
@@ -2724,7 +2822,7 @@ class ChartsComponent {
         }
         this.updateActiveDatapoints.emit(this.activeDatapoints);
         const datapointsWithValuesRequests = [];
-        const timeRange = this.getTimeRange(60_000);
+        const timeRange = this.getTimeRange();
         for (const dp of this.activeDatapoints) {
             const request = defer(() => this.measurementService.listSeries({
                 revert: true,
@@ -2770,7 +2868,9 @@ class ChartsComponent {
         }));
     }
     fetchAggregatedSeriesForSelectedDatapoint$(customTimeRange, aggregatedDatapoint) {
-        const timeRange = this.getTimeRange(60_000);
+        const { dateTo: unpaddedDateTo } = this.getTimeRange();
+        const { dateFrom: paddedDateFrom } = this.getTimeRange(60_000);
+        const timeRange = { dateFrom: paddedDateFrom, dateTo: unpaddedDateTo };
         aggregatedDatapoint = aggregatedDatapoint
             ? aggregatedDatapoint
             : this.config?.datapoints?.filter(dp => dp.__active)[0];