@acorex/charts 19.15.0-next.22 → 19.15.0-next.25

package/fesm2022/acorex-charts-line-chart.mjs

@@ -1,6 +1,7 @@
 import { NXComponent } from '@acorex/cdk/common';
 import { AX_CHART_COLOR_PALETTE, getChartColor } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
+import { AXPlatform } from '@acorex/core/platform';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, output, viewChild, signal, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
@@ -75,6 +76,8 @@ class AXLineChartComponent extends NXComponent {
     });
     _initialized = signal(false);
     _rendered = signal(false);
+    hiddenSeries = new Set();
+    _fullNormalizedData = [];
     tooltipVisible = this._tooltipVisible.asReadonly();
     tooltipPosition = this._tooltipPosition.asReadonly();
     tooltipData = this._tooltipData.asReadonly();
@@ -82,6 +85,8 @@ class AXLineChartComponent extends NXComponent {
     configToken = inject(AX_LINE_CHART_CONFIG);
     // Inject the chart colors
     chartColors = inject(AX_CHART_COLOR_PALETTE);
+    // Inject AXPlatform
+    platform = inject(AXPlatform);
     effectiveOptions = computed(() => {
         return {
             ...this.configToken,
@@ -92,7 +97,16 @@ class AXLineChartComponent extends NXComponent {
         this.loadD3();
     }
     #effect = effect(() => {
-        this.data();
+        const rawData = this.data();
+        if (Array.isArray(rawData)) {
+            this._fullNormalizedData = rawData.map((s, i) => ({ ...s, originalIndex: i }));
+        }
+        else if (rawData && 'data' in rawData) {
+            this._fullNormalizedData = [{ ...rawData, originalIndex: 0 }];
+        }
+        else {
+            this._fullNormalizedData = [];
+        }
         this.effectiveOptions();
         if (this._rendered()) {
             this.updateChart();
@@ -108,6 +122,68 @@ class AXLineChartComponent extends NXComponent {
     ngOnDestroy() {
         this.cleanupChart();
     }
+    // AXChartLegendCompatible Implementation
+    getLegendItems() {
+        const totalSum = this._fullNormalizedData.reduce((sum, series) => {
+            return sum + series.data.reduce((sSum, p) => sSum + p.y, 0);
+        }, 0);
+        return this._fullNormalizedData.map((series) => {
+            const seriesSum = series.data.reduce((sum, p) => sum + p.y, 0);
+            const percentage = totalSum > 0 ? (seriesSum / totalSum) * 100 : 0;
+            return {
+                id: series.id || series.label || `series-${series.originalIndex}`,
+                name: series.label || `Series ${series.originalIndex + 1}`,
+                value: seriesSum,
+                color: series.lineColor || getChartColor(series.originalIndex, this.chartColors),
+                hidden: this.hiddenSeries.has(series.id || series.label || `series-${series.originalIndex}`),
+                percentage: parseFloat(percentage.toFixed(2)),
+            };
+        });
+    }
+    highlightSegment(id) {
+        if (!this.svg)
+            return;
+        const allSeriesGroups = this.svg.selectAll('g.ax-line-chart-series');
+        const allPointsGroups = this.svg.selectAll('g.ax-line-chart-points');
+        if (id === null) {
+            allSeriesGroups.classed('ax-chart-dimmed', false).style('opacity', 1);
+            allPointsGroups.classed('ax-chart-dimmed', false).style('opacity', 1);
+            allSeriesGroups
+                .selectAll('.ax-line-chart-line')
+                .attr('stroke-width', this.effectiveOptions().lineWidth ?? 2)
+                .classed('ax-chart-highlighted-path', false);
+            allPointsGroups
+                .selectAll('circle.ax-line-chart-point')
+                .attr('r', this.effectiveOptions().pointRadius ?? 4)
+                .classed('ax-chart-highlighted-point', false);
+            return;
+        }
+        allSeriesGroups.classed('ax-chart-dimmed', true).style('opacity', 0.3);
+        allPointsGroups.classed('ax-chart-dimmed', true).style('opacity', 0.3);
+        const targetSeriesGroup = this.svg.selectAll(`g.ax-line-chart-series[data-series-identifier="${id}"]`);
+        const targetPointsGroup = this.svg.selectAll(`g.ax-line-chart-points[data-series-identifier="${id}"]`);
+        targetSeriesGroup.classed('ax-chart-dimmed', false).style('opacity', 1);
+        targetPointsGroup.classed('ax-chart-dimmed', false).style('opacity', 1);
+        targetSeriesGroup
+            .selectAll('.ax-line-chart-line')
+            .attr('stroke-width', (this.effectiveOptions().lineWidth ?? 2) * 1.5)
+            .classed('ax-chart-highlighted-path', true);
+        targetPointsGroup
+            .selectAll('circle.ax-line-chart-point')
+            .attr('r', (this.effectiveOptions().pointRadius ?? 4) * 1.5)
+            .classed('ax-chart-highlighted-point', true);
+    }
+    toggleSegment(id) {
+        const seriesId = id;
+        if (this.hiddenSeries.has(seriesId)) {
+            this.hiddenSeries.delete(seriesId);
+        }
+        else {
+            this.hiddenSeries.add(seriesId);
+        }
+        this.updateChart();
+        return !this.hiddenSeries.has(seriesId);
+    }
     async loadD3() {
         try {
             this.d3 = await import('d3');
@@ -124,24 +200,37 @@ class AXLineChartComponent extends NXComponent {
         if (!this.d3 || !this.chartContainerEl()?.nativeElement)
             return;
         const containerElement = this.chartContainerEl().nativeElement;
-        const chartData = this.data();
-        let normalizedData = [];
-        if (Array.isArray(chartData)) {
-            normalizedData = chartData;
-        }
-        else if (chartData && 'data' in chartData) {
-            normalizedData = [chartData];
-        }
-        this.d3.select(containerElement).selectAll('svg').remove();
-        if (normalizedData.length === 0 || normalizedData.some((series) => !series.data || series.data.length === 0)) {
+        const allSeriesData = this._fullNormalizedData;
+        this.d3.select(containerElement).selectAll('*').remove();
+        if (allSeriesData.length === 0 || allSeriesData.every((series) => !series.data || series.data.length === 0)) {
             this.showNoDataMessage(containerElement);
             return;
         }
+        const visibleDataForRendering = allSeriesData.filter((series) => !this.hiddenSeries.has(series.id || series.label || `series-${series.originalIndex}`));
+        if (visibleDataForRendering.length === 0) {
+            // All data is present, but all series are hidden by the legend
+            this.showAllSeriesHiddenMessage(containerElement);
+            // Still setup basic SVG and chart group for consistency if needed, or return
+            // For now, we will show the message and return, as scales/axes can't be drawn.
+            return;
+        }
+        // Scales should be based on potentially visible data to avoid errors with empty domains
+        // If all are hidden, scales might become an issue. Let's use all data for scales,
+        // and rendering will handle visibility.
+        const dataForScales = allSeriesData.flatMap((s) => s.data).length > 0 ? allSeriesData : [{ data: [{ x: 0, y: 0 }] }];
         const chartOptions = this.effectiveOptions();
         this.setupDimensions(containerElement, chartOptions);
-        this.setupScales(normalizedData);
+        // Use allSeriesData for domain calculation to keep scales consistent even if some series are hidden
+        // but filter out series with no data points for scale calculation.
+        const dataForScaleSetup = allSeriesData.filter((s) => s.data && s.data.length > 0);
+        if (dataForScaleSetup.length === 0) {
+            // If after filtering, there's no data with points (e.g. all series have empty data arrays)
+            this.showNoDataMessage(containerElement);
+            return;
+        }
+        this.setupScales(dataForScaleSetup);
         this.createAxes(chartOptions);
-        this.renderLines(normalizedData);
+        this.renderLines(allSeriesData); // RenderLines will handle hiding based on hiddenSeries
     }
     updateChart() {
         this.createChart();
@@ -213,15 +302,21 @@ class AXLineChartComponent extends NXComponent {
         }
     }
     setupScales(data) {
+        // Expects already filtered data for scales
         const chartOptions = this.effectiveOptions();
         const padding = chartOptions.axisPadding ?? 0;
         const paddingMultiplier = padding / 100;
-        const allDataPoints = data.flatMap((series) => series.data);
+        // Ensure data is not empty for scale domain calculation
+        const allDataPoints = data.length > 0 ? data.flatMap((series) => series.data) : [{ x: 0, y: 0 }];
+        if (allDataPoints.length === 0) {
+            // Should ideally not happen if createChart filters correctly
+            allDataPoints.push({ x: 0, y: 0 }); // Default fallback to prevent crash with empty domain
+        }
         const allNumericX = allDataPoints.every((d) => typeof d.x === 'number');
         const allDates = !allNumericX && allDataPoints.every((d) => !isNaN(new Date(d.x).getTime()));
         if (allNumericX) {
-            const xMin = this.d3.min(allDataPoints, (d) => d.x) || 0;
-            const xMax = this.d3.max(allDataPoints, (d) => d.x) || 0;
+            const xMin = this.d3.min(allDataPoints, (d) => d.x) ?? 0;
+            const xMax = this.d3.max(allDataPoints, (d) => d.x) ?? 0;
             if (xMin === xMax) {
                 this.xScale = this.d3
                     .scaleLinear()
@@ -233,8 +328,8 @@ class AXLineChartComponent extends NXComponent {
             }
         }
         else if (allDates) {
-            const xMin = this.d3.min(allDataPoints, (d) => new Date(d.x)) || new Date();
-            const xMax = this.d3.max(allDataPoints, (d) => new Date(d.x)) || new Date();
+            const xMin = this.d3.min(allDataPoints, (d) => new Date(d.x)) ?? new Date();
+            const xMax = this.d3.max(allDataPoints, (d) => new Date(d.x)) ?? new Date();
             if (xMin.getTime() === xMax.getTime()) {
                 const oneDayMs = 86400000;
                 this.xScale = this.d3
@@ -255,8 +350,11 @@ class AXLineChartComponent extends NXComponent {
                 .paddingOuter(0);
         }
         const yAxisStartsAtZero = chartOptions.yAxisStartsAtZero !== false;
-        const yMin = yAxisStartsAtZero ? 0 : this.d3.min(allDataPoints, (d) => d.y) || 0;
-        const yMax = this.d3.max(allDataPoints, (d) => d.y) || 0;
+        let yMin = this.d3.min(allDataPoints, (d) => d.y) ?? 0;
+        if (yAxisStartsAtZero) {
+            yMin = Math.min(0, yMin);
+        }
+        const yMax = this.d3.max(allDataPoints, (d) => d.y) ?? 0;
         const yRange = yMax - yMin;
         this.yScale = this.d3
             .scaleLinear()
@@ -269,6 +367,7 @@ class AXLineChartComponent extends NXComponent {
         const showYAxis = options.showYAxis !== false;
         const showGrid = options.showGrid !== false;
         const isBandScale = this.xScale.bandwidth !== undefined;
+        const isRtl = this.platform.isRtl();
         const axesGroup = this.chart.append('g').attr('class', 'ax-line-chart-axes');
         if (showXAxis) {
             this.xAxis = axesGroup
@@ -283,13 +382,14 @@ class AXLineChartComponent extends NXComponent {
                 .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.2)')
                 .attr('stroke-dasharray', '2,2')
                 .attr('stroke-opacity', '0.5');
+            const dynamicXAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.width / 45)));
             this.xAxis.selectAll('text').attr('style', `
-          font-size: 11px;
+          font-size: ${dynamicXAxisTickFontSize}px;
           font-weight: 400;
           fill: rgba(var(--ax-comp-line-chart-labels-color), 0.7);
         `);
             if (options.xAxisLabel) {
-                const labelY = this.height + this.margin.bottom * 0.65;
+                const labelY = this.height + this.margin.bottom * 0.8;
                 axesGroup
                     .append('text')
                     .attr('class', 'ax-line-chart-axis-label ax-x-axis-label')
@@ -298,9 +398,8 @@ class AXLineChartComponent extends NXComponent {
                     .attr('x', this.width / 2)
                     .attr('y', labelY)
                     .attr('transform', 'translate(0, 5)')
-                    .attr('font-family', 'var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)')
                     .attr('style', `
-            font-size: 13px;
+            font-size: 14px;
             font-weight: 500;
             fill: rgb(var(--ax-comp-line-chart-text-color));
             pointer-events: none;
@@ -320,14 +419,18 @@ class AXLineChartComponent extends NXComponent {
                 .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.2)')
                 .attr('stroke-dasharray', '2,2')
                 .attr('stroke-opacity', '0.5');
-            this.yAxis.selectAll('text').attr('style', `
-          font-size: 11px;
+            const dynamicYAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.height / 30)));
+            const yTickTexts = this.yAxis.selectAll('text').attr('style', `
+          font-size: ${dynamicYAxisTickFontSize}px;
           font-weight: 400;
           fill: rgba(var(--ax-comp-line-chart-labels-color), 0.7);
         `);
+            if (isRtl) {
+                yTickTexts.attr('text-anchor', 'start');
+            }
             if (options.yAxisLabel) {
                 const labelX = -this.height / 2;
-                const labelY = -this.margin.left * 0.65;
+                const labelY = -this.margin.left * 0.8;
                 axesGroup
                     .append('text')
                     .attr('class', 'ax-line-chart-axis-label ax-y-axis-label')
@@ -336,9 +439,8 @@ class AXLineChartComponent extends NXComponent {
                     .attr('transform', 'rotate(-90) translate(-5, 0)')
                     .attr('x', labelX)
                     .attr('y', labelY)
-                    .attr('font-family', 'var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)')
                     .attr('style', `
-            font-size: 13px;
+            font-size: 14px;
             font-weight: 500;
             fill: rgb(var(--ax-comp-line-chart-text-color));
             pointer-events: none;
@@ -388,7 +490,7 @@ class AXLineChartComponent extends NXComponent {
             }
         }
     }
-    renderLines(data) {
+    renderLines(allSeriesData) {
         const isBandScale = this.xScale.bandwidth !== undefined;
         const getX = (d) => {
             if (isBandScale) {
@@ -413,34 +515,35 @@ class AXLineChartComponent extends NXComponent {
         if (this.effectiveOptions().smoothLine !== false) {
             areaGenerator.curve(this.d3.curveMonotoneX);
         }
-        // Add class to chart container to disable pointer events during animation
         this.svg.attr('class', 'ax-line-chart-animating');
         const allSeriesGroup = this.chart
             .append('g')
             .attr('class', 'ax-line-chart-all-series')
-            .attr('pointer-events', 'none'); // Disable pointer events during animation
+            .attr('pointer-events', 'none');
         const allPointsGroup = this.chart
             .append('g')
             .attr('class', 'ax-line-chart-all-points')
-            .attr('pointer-events', 'none'); // Disable pointer events during animation
+            .attr('pointer-events', 'none');
         if (this.effectiveOptions().showCrosshair === true) {
-            const crosshairGroup = this.chart
-                .append('g')
-                .attr('class', 'ax-line-chart-crosshair')
-                .attr('pointer-events', 'none');
+            this.chart.append('g').attr('class', 'ax-line-chart-crosshair').attr('pointer-events', 'none');
         }
-        // Get animation options
         const animationDuration = this.effectiveOptions().animationDuration;
         const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
-        data.forEach((series, seriesIndex) => {
+        allSeriesData.forEach((series) => {
+            const seriesIdentifier = series.id || series.label || `series-${series.originalIndex}`;
+            if (this.hiddenSeries.has(seriesIdentifier)) {
+                this.chart.selectAll(`.ax-line-chart-series[data-series-identifier="${seriesIdentifier}"]`).remove();
+                this.chart.selectAll(`.ax-line-chart-points[data-series-identifier="${seriesIdentifier}"]`).remove();
+                return;
+            }
             if (!series.data || series.data.length === 0)
                 return;
             const seriesGroup = allSeriesGroup
                 .append('g')
-                .attr('class', `ax-line-chart-series ax-line-chart-series-${seriesIndex}`)
-                .attr('data-series', series.label || `series-${seriesIndex}`)
-                .attr('pointer-events', 'none'); // Disable pointer events during animation
-            const lineColor = series.lineColor || getChartColor(seriesIndex, this.chartColors);
+                .attr('class', `ax-line-chart-series ax-line-chart-series-${series.originalIndex}`)
+                .attr('data-series-identifier', seriesIdentifier)
+                .attr('pointer-events', 'none');
+            const lineColor = series.lineColor || getChartColor(series.originalIndex, this.chartColors);
             const fillColor = series.fillColor || lineColor;
             const line = seriesGroup
                 .append('path')
@@ -453,8 +556,7 @@ class AXLineChartComponent extends NXComponent {
                 .attr('d', lineGenerator)
                 .attr('fill', 'none')
                 .attr('style', 'transition: stroke-width 0.3s ease;')
-                .attr('pointer-events', 'none'); // Disable pointer events during animation
-            // Setup hover listener
+                .attr('pointer-events', 'none');
             line
                 .on('mouseenter', () => {
                 line
@@ -477,7 +579,6 @@ class AXLineChartComponent extends NXComponent {
                 .ease(animationEasing)
                 .attr('stroke-dashoffset', 0)
                 .on('end', function () {
-                // Enable pointer events after animation completes
                 line.attr('pointer-events', 'all');
             });
             if (this.effectiveOptions().fillArea) {
@@ -489,8 +590,7 @@ class AXLineChartComponent extends NXComponent {
                     .attr('opacity', 0)
                     .attr('d', areaGenerator)
                     .attr('style', 'transition: opacity 0.3s ease;')
-                    .attr('pointer-events', 'none'); // Disable pointer events during animation
-                // Setup hover listener
+                    .attr('pointer-events', 'none');
                 area
                     .on('mouseenter', () => {
                     area
@@ -510,17 +610,18 @@ class AXLineChartComponent extends NXComponent {
                     .ease(animationEasing)
                     .attr('opacity', (this.effectiveOptions().fillOpacity ?? 20) / 100)
                     .on('end', function () {
-                    // Enable pointer events after animation completes
                     area.attr('pointer-events', 'all');
                 });
             }
         });
         if (this.effectiveOptions().showPoints !== false) {
             const pointMap = new Map();
-            data.forEach((series, seriesIndex) => {
-                if (!series.data || series.data.length === 0)
+            allSeriesData.forEach((series) => {
+                const seriesIdentifier = series.id || series.label || `series-${series.originalIndex}`;
+                if (this.hiddenSeries.has(seriesIdentifier) || !series.data || series.data.length === 0) {
                     return;
-                const lineColor = series.lineColor || getChartColor(seriesIndex, this.chartColors);
+                }
+                const lineColor = series.lineColor || getChartColor(series.originalIndex, this.chartColors);
                 const maxPoints = 100;
                 const pointData = series.data.length > maxPoints ? this.getReducedDataPoints(series.data, maxPoints) : series.data;
                 pointData.forEach((point) => {
@@ -530,26 +631,24 @@ class AXLineChartComponent extends NXComponent {
                     if (!pointMap.has(key)) {
                         pointMap.set(key, []);
                     }
-                    pointMap.get(key)?.push({
-                        point,
-                        series,
-                        seriesIndex,
-                    });
+                    pointMap.get(key)?.push({ point, series, originalIndex: series.originalIndex });
                 });
             });
-            // Create a counter to track animation completion
             let animationCounter = 0;
-            const totalSeriesCount = data.length;
-            data.forEach((series, seriesIndex) => {
-                if (!series.data || series.data.length === 0)
+            const totalVisibleSeriesCount = allSeriesData.filter((s) => !this.hiddenSeries.has(s.id || s.label || `series-${s.originalIndex}`) && s.data && s.data.length > 0).length;
+            allSeriesData.forEach((series) => {
+                const seriesIdentifier = series.id || series.label || `series-${series.originalIndex}`;
+                if (this.hiddenSeries.has(seriesIdentifier) || !series.data || series.data.length === 0) {
                     return;
-                const lineColor = series.lineColor || getChartColor(seriesIndex, this.chartColors);
+                }
+                const lineColor = series.lineColor || getChartColor(series.originalIndex, this.chartColors);
                 const pointsGroup = allPointsGroup
                     .append('g')
-                    .attr('class', `ax-line-chart-points ax-line-chart-points-${seriesIndex}`)
-                    .attr('pointer-events', 'none'); // Disable pointer events during animation
+                    .attr('class', `ax-line-chart-points ax-line-chart-points-${series.originalIndex}`)
+                    .attr('data-series-identifier', seriesIdentifier)
+                    .attr('pointer-events', 'none');
                 pointsGroup
-                    .on('mouseenter', () => this.handlePointGroupEnter(seriesIndex, lineColor))
+                    .on('mouseenter', () => this.handlePointGroupEnter(series.originalIndex, lineColor))
                     .on('mouseleave', () => this.handlePointGroupLeave());
                 const maxPoints = 100;
                 const pointData = series.data.length > maxPoints ? this.getReducedDataPoints(series.data, maxPoints) : series.data;
@@ -568,7 +667,7 @@ class AXLineChartComponent extends NXComponent {
                     .attr('data-x', (d) => d.x)
                     .attr('data-y', (d) => d.y)
                     .style('cursor', 'pointer')
-                    .attr('pointer-events', 'none') // Disable pointer events during animation
+                    .attr('pointer-events', 'none')
                     .on('mouseenter', (event, d) => {
                     const x = getX(d);
                     const y = this.yScale(d.y);
@@ -578,7 +677,7 @@ class AXLineChartComponent extends NXComponent {
                         this.handleOverlappingPointsHover(event, overlappingPoints);
                     }
                     else {
-                        this.handlePointHover(event, d, series, seriesIndex);
+                        this.handlePointHover(event, d, series, series.originalIndex);
                     }
                     this.d3
                         .select(event.target)
@@ -614,17 +713,14 @@ class AXLineChartComponent extends NXComponent {
                     }
                 })
                     .transition()
-                    .delay((d, i) => i * Math.min(50, animationDuration * 0.05) + animationDuration * 0.5)
-                    .duration(animationDuration * 0.3)
+                    .delay((d, i) => i * Math.min(50, (animationDuration || 0) * 0.05) + (animationDuration || 0) * 0.5)
+                    .duration((animationDuration || 0) * 0.3)
                     .ease(animationEasing)
                     .attr('r', this.effectiveOptions().pointRadius ?? 4)
                     .on('end', (d, i, nodes) => {
-                    // When the last point finishes animating
                     if (i === nodes.length - 1) {
                         animationCounter++;
-                        // If this is the last series, enable all pointer events
-                        if (animationCounter >= totalSeriesCount) {
-                            // Enable pointer events for all elements after all animations have completed
+                        if (animationCounter >= totalVisibleSeriesCount) {
                             this.enablePointerEventsAfterAnimation();
                         }
                     }
@@ -632,18 +728,14 @@ class AXLineChartComponent extends NXComponent {
             });
         }
         else {
-            // If not showing points, wait for line animations to complete
             setTimeout(() => {
-                // Enable pointer events for all elements after animation duration
                 this.enablePointerEventsAfterAnimation();
-            }, animationDuration + 100);
+            }, animationDuration || 0 + 100);
         }
     }
     enablePointerEventsAfterAnimation() {
-        // Guard against null chart or svg
         if (!this.chart || !this.svg)
             return;
-        // Enable pointer events for all chart elements after animation completes
         this.chart.selectAll('.ax-line-chart-all-series').attr('pointer-events', 'all');
         this.chart.selectAll('.ax-line-chart-series').attr('pointer-events', 'all');
         this.chart.selectAll('.ax-line-chart-line').attr('pointer-events', 'all');
@@ -651,12 +743,11 @@ class AXLineChartComponent extends NXComponent {
         this.chart.selectAll('.ax-line-chart-all-points').attr('pointer-events', 'all');
         this.chart.selectAll('.ax-line-chart-points').attr('pointer-events', 'all');
         this.chart.selectAll('.ax-line-chart-point').attr('pointer-events', 'all');
-        // Remove the animating class from the SVG
         this.svg.classed('ax-line-chart-animating', false);
     }
-    handlePointGroupEnter(seriesIndex, color) {
+    handlePointGroupEnter(originalIndex, color) {
         this.chart
-            .select(`.ax-line-chart-series-${seriesIndex} .ax-line-chart-line`)
+            .select(`.ax-line-chart-series-${originalIndex} .ax-line-chart-line`)
             .transition()
             .duration(150)
             .attr('stroke-width', (this.effectiveOptions().lineWidth ?? 2) * 1.5);
@@ -684,11 +775,11 @@ class AXLineChartComponent extends NXComponent {
         }
         return result;
     }
-    handlePointHover(event, dataPoint, series, seriesIndex) {
+    handlePointHover(event, dataPoint, series, originalIndex) {
         if (this.effectiveOptions().showTooltip !== false) {
-            const color = series.lineColor || getChartColor(seriesIndex, this.chartColors);
+            const color = series.lineColor || getChartColor(originalIndex, this.chartColors);
             this._tooltipData.set({
-                title: dataPoint.tooltipLabel || series.tooltipLabel || series.label || `Series ${seriesIndex + 1}`,
+                title: dataPoint.tooltipLabel || series.tooltipLabel || series.label || `Series ${originalIndex + 1}`,
                 value: dataPoint.y.toString(),
                 seriesName: `x: ${dataPoint.x}`,
                 color: color,
@@ -755,16 +846,11 @@ class AXLineChartComponent extends NXComponent {
         if (x + tooltipRect.width + 20 > container.width) {
             x = x - tooltipRect.width - 15;
         }
-        // if (y + tooltipRect.height / 2 > container.height) {
-        //   y = container.height - tooltipRect.height / 2;
-        // } else if (y - tooltipRect.height / 2 < 0) {
-        //   y = tooltipRect.height / 2;
-        // }
         this._tooltipPosition.set({ x, y });
     }
     handlePointClick(event, dataPoint, series) {
         this.pointClick.emit({
-            series: series,
+            series: series, // series still refers to the full series data with originalIndex
             point: dataPoint,
             event: {
                 nativeEvent: event,
@@ -773,7 +859,6 @@ class AXLineChartComponent extends NXComponent {
         });
     }
     showNoDataMessage(containerElement) {
-        // Clear existing contents first
         this.d3.select(containerElement).selectAll('*').remove();
         const messageContainer = this.d3
             .select(containerElement)
@@ -790,14 +875,12 @@ class AXLineChartComponent extends NXComponent {
             .style('box-shadow', '0 2px 12px rgba(0, 0, 0, 0.08)')
             .style('width', '80%')
             .style('max-width', '300px');
-        // Add an icon
         messageContainer
             .append('div')
             .attr('class', 'ax-line-chart-no-data-icon')
             .style('opacity', '0.6')
             .style('margin-bottom', '0.75rem')
             .html('<i class="fa-light fa-chart-line fa-2x"></i>');
-        // Add text message
         messageContainer
             .append('div')
             .attr('class', 'ax-line-chart-no-data-text')
@@ -805,7 +888,6 @@ class AXLineChartComponent extends NXComponent {
             .style('font-weight', '600')
             .style('margin-bottom', '0.5rem')
             .text('No data available');
-        // Add help text
         messageContainer
             .append('div')
             .attr('class', 'ax-line-chart-no-data-help')
@@ -813,6 +895,43 @@ class AXLineChartComponent extends NXComponent {
             .style('opacity', '0.6')
             .text('Please provide data to display the chart');
     }
+    showAllSeriesHiddenMessage(containerElement) {
+        this.d3.select(containerElement).selectAll('*').remove(); // Clear existing chart elements
+        const messageContainer = this.d3
+            .select(containerElement)
+            .append('div')
+            .attr('class', 'ax-line-chart-all-hidden-message') // Different class
+            .style('position', 'absolute')
+            .style('left', '50%')
+            .style('top', '50%')
+            .style('transform', 'translate(-50%, -50%)')
+            .style('text-align', 'center')
+            .style('background-color', 'rgb(var(--ax-comp-line-chart-bg-color))')
+            .style('padding', '1.5rem')
+            .style('border-radius', '0.5rem')
+            .style('box-shadow', '0 2px 12px rgba(0, 0, 0, 0.08)')
+            .style('width', '80%')
+            .style('max-width', '350px'); // Slightly wider for longer text
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-line-chart-all-hidden-icon')
+            .style('opacity', '0.6')
+            .style('margin-bottom', '0.75rem')
+            .html('<i class="fa-light fa-eye-slash fa-2x"></i>'); // Different icon
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-line-chart-all-hidden-text')
+            .style('font-size', '1rem')
+            .style('font-weight', '600')
+            .style('margin-bottom', '0.5rem')
+            .text('All series are hidden');
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-line-chart-all-hidden-help')
+            .style('font-size', '0.8rem')
+            .style('opacity', '0.6')
+            .text('Click legend items to show series in the chart.');
+    }
     handleOverlappingPointsHover(event, overlappingPoints) {
         if (this.effectiveOptions().showTooltip === false)
             return;
@@ -821,10 +940,10 @@ class AXLineChartComponent extends NXComponent {
             value: overlappingPoints[0].point.y.toString(),
             seriesName: '',
             color: '',
-            items: overlappingPoints.map(({ point, series, seriesIndex }) => {
-                const color = series.lineColor || getChartColor(seriesIndex, this.chartColors);
+            items: overlappingPoints.map(({ point, series, originalIndex }) => {
+                const color = series.lineColor || getChartColor(originalIndex, this.chartColors);
                 return {
-                    label: series.label || `Series ${seriesIndex + 1}`,
+                    label: series.label || `Series ${originalIndex + 1}`,
                     value: point.y.toString(),
                     color: color,
                 };
@@ -837,9 +956,6 @@ class AXLineChartComponent extends NXComponent {
             this.showCrosshairLines(overlappingPoints[0].point);
         }
     }
-    /**
-     * Gets the appropriate D3 easing function based on the option string
-     */
     getEasingFunction(easing) {
         switch (easing) {
             case 'linear':
@@ -861,13 +977,13 @@ class AXLineChartComponent extends NXComponent {
             case 'cubic-in-out':
                 return this.d3.easeCubicInOut;
             default:
-                return this.d3.easeCubicOut; // Default easing
+                return this.d3.easeCubicOut;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.13", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-line-chart .ax-line-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: AXLineChartComponent, isStandalone: true, selector: "ax-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-line-chart .ax-line-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AXLineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AXLineChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-line-chart', standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-line-chart\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"false\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-line-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-line-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-axis-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-line-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-line-chart-text-color: var(--ax-sys-color-on-lightest-surface)}ax-line-chart .ax-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-line-chart .ax-line-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-line-chart .ax-line-chart-no-data-message .ax-line-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
         }] });