@acorex/charts 0.0.1

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

@@ -0,0 +1,995 @@
+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 * as i0 from '@angular/core';
+import { InjectionToken, inject, input, output, viewChild, signal, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
+import { set } from 'lodash-es';
+
+const AXLineChartDefaultConfig = {
+    margins: {
+        top: 20,
+        right: 25,
+        bottom: 40,
+        left: 50,
+    },
+    showXAxis: true,
+    showYAxis: true,
+    showGrid: true,
+    showVerticalGrid: false,
+    yAxisStartsAtZero: true,
+    axisPadding: 5,
+    showTooltip: true,
+    lineWidth: 2,
+    showPoints: true,
+    pointRadius: 4,
+    smoothLine: false,
+    fillArea: false,
+    fillOpacity: 20,
+    showCrosshair: false,
+    animationDuration: 1000,
+    animationEasing: 'cubic-out',
+};
+const AX_LINE_CHART_CONFIG = new InjectionToken('AX_LINE_CHART_CONFIG', {
+    providedIn: 'root',
+    factory: () => {
+        const global = inject(AX_GLOBAL_CONFIG);
+        set(global, 'chart.lineChart', AXLineChartDefaultConfig);
+        return AXLineChartDefaultConfig;
+    },
+});
+function lineChartConfig(config = {}) {
+    const result = {
+        ...AXLineChartDefaultConfig,
+        ...config,
+    };
+    return result;
+}
+
+/**
+ * Line Chart Component for rendering data as lines with interactive hover effects and animations
+ */
+class AXLineChartComponent extends NXComponent {
+    data = input([]);
+    options = input({});
+    pointClick = output();
+    chartContainerEl = viewChild.required('chartContainer');
+    d3;
+    svg;
+    chart;
+    xScale;
+    yScale;
+    xAxis;
+    yAxis;
+    width;
+    height;
+    margin = { top: 20, right: 25, bottom: 40, left: 50 };
+    _tooltipVisible = signal(false);
+    _tooltipPosition = signal({ x: 0, y: 0 });
+    _tooltipData = signal({
+        title: '',
+        value: '0',
+        percentage: '0%',
+        color: '',
+    });
+    _initialized = signal(false);
+    _rendered = signal(false);
+    hiddenSeries = new Set();
+    _fullNormalizedData = [];
+    tooltipVisible = this._tooltipVisible.asReadonly();
+    tooltipPosition = this._tooltipPosition.asReadonly();
+    tooltipData = this._tooltipData.asReadonly();
+    // Inject configuration
+    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,
+            ...this.options(),
+        };
+    });
+    ngOnInit() {
+        this.loadD3();
+    }
+    #effect = effect(() => {
+        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();
+        }
+    });
+    ngAfterViewInit() {
+        this._initialized.set(true);
+        if (this.d3 && this.chartContainerEl()) {
+            this.createChart();
+            this._rendered.set(true);
+        }
+    }
+    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');
+            if (this._initialized() && this.chartContainerEl()) {
+                this.createChart();
+                this._rendered.set(true);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load D3.js:', error);
+        }
+    }
+    createChart() {
+        if (!this.d3 || !this.chartContainerEl()?.nativeElement)
+            return;
+        const containerElement = this.chartContainerEl().nativeElement;
+        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);
+        // 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(allSeriesData); // RenderLines will handle hiding based on hiddenSeries
+    }
+    updateChart() {
+        this.createChart();
+    }
+    cleanupChart() {
+        if (this.svg) {
+            this.d3?.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
+            this.svg = null;
+            this.chart = null;
+        }
+        this._tooltipVisible.set(false);
+    }
+    setupDimensions(containerElement, options) {
+        this.calculateMargins(options);
+        const containerWidth = containerElement.clientWidth;
+        const containerHeight = containerElement.clientHeight;
+        const minDim = Math.min(200, containerWidth, containerHeight);
+        if (options.width && options.height) {
+            this.width = options.width - this.margin.left - this.margin.right;
+            this.height = options.height - this.margin.top - this.margin.bottom;
+        }
+        else {
+            this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
+            this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
+        }
+        this.width = Math.max(this.width, 100);
+        this.height = Math.max(this.height, 100);
+        const totalWidth = this.width + this.margin.left + this.margin.right;
+        const totalHeight = this.height + this.margin.top + this.margin.bottom;
+        const svg = this.d3
+            .select(containerElement)
+            .append('svg')
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`)
+            .attr('preserveAspectRatio', 'xMidYMid meet')
+            .attr('style', `
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        overflow: visible;
+      `);
+        this.svg = svg;
+        this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
+    }
+    calculateMargins(options) {
+        this.margin = {
+            top: options.margins?.top ?? 20,
+            right: options.margins?.right ?? 25,
+            bottom: options.margins?.bottom ?? 40,
+            left: options.margins?.left ?? 50,
+        };
+        if (options.xAxisLabel) {
+            const xLabelLength = options.xAxisLabel.length;
+            const extraBottomMargin = Math.min(20, Math.max(10, xLabelLength * 0.8));
+            this.margin.bottom = Math.max(this.margin.bottom, 40 + extraBottomMargin);
+        }
+        if (options.yAxisLabel) {
+            const yLabelLength = options.yAxisLabel.length;
+            const extraLeftMargin = Math.min(20, Math.max(10, yLabelLength * 0.8));
+            this.margin.left = Math.max(this.margin.left, 50 + extraLeftMargin);
+        }
+        if (options.showXAxis !== false) {
+            this.margin.bottom = Math.max(this.margin.bottom, 45);
+        }
+        if (options.showYAxis !== false) {
+            this.margin.left = Math.max(this.margin.left, 55);
+        }
+    }
+    setupScales(data) {
+        // Expects already filtered data for scales
+        const chartOptions = this.effectiveOptions();
+        const padding = chartOptions.axisPadding ?? 0;
+        const paddingMultiplier = padding / 100;
+        // 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;
+            if (xMin === xMax) {
+                this.xScale = this.d3
+                    .scaleLinear()
+                    .domain([xMin - 1, xMax + 1])
+                    .range([0, this.width]);
+            }
+            else {
+                this.xScale = this.d3.scaleLinear().domain([xMin, xMax]).range([0, this.width]);
+            }
+        }
+        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();
+            if (xMin.getTime() === xMax.getTime()) {
+                const oneDayMs = 86400000;
+                this.xScale = this.d3
+                    .scaleTime()
+                    .domain([new Date(xMin.getTime() - oneDayMs), new Date(xMax.getTime() + oneDayMs)])
+                    .range([0, this.width]);
+            }
+            else {
+                this.xScale = this.d3.scaleTime().domain([xMin, xMax]).range([0, this.width]);
+            }
+        }
+        else {
+            this.xScale = this.d3
+                .scaleBand()
+                .domain(allDataPoints.map((d) => String(d.x)))
+                .range([0, this.width])
+                .paddingInner(0.2)
+                .paddingOuter(0);
+        }
+        const yAxisStartsAtZero = chartOptions.yAxisStartsAtZero !== false;
+        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()
+            .domain([yMin, yMax + yRange * paddingMultiplier])
+            .nice()
+            .range([this.height, 0]);
+    }
+    createAxes(options) {
+        const showXAxis = options.showXAxis !== false;
+        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
+                .append('g')
+                .attr('class', 'ax-line-chart-axis-x')
+                .attr('transform', `translate(0,${this.height})`)
+                .call(this.d3.axisBottom(this.xScale).tickSize(5).tickPadding(8));
+            // Style the x-axis path and lines
+            this.xAxis.selectAll('path').attr('stroke', 'rgba(var(--ax-comp-line-chart-axis-color), 0.2)');
+            this.xAxis
+                .selectAll('line')
+                .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: ${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.8;
+                axesGroup
+                    .append('text')
+                    .attr('class', 'ax-line-chart-axis-label ax-x-axis-label')
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'middle')
+                    .attr('x', this.width / 2)
+                    .attr('y', labelY)
+                    .attr('transform', 'translate(0, 5)')
+                    .attr('style', `
+            font-size: 14px;
+            font-weight: 500;
+            fill: rgb(var(--ax-comp-line-chart-text-color));
+            pointer-events: none;
+          `)
+                    .text(options.xAxisLabel);
+            }
+        }
+        if (showYAxis) {
+            this.yAxis = axesGroup
+                .append('g')
+                .attr('class', 'ax-line-chart-axis-y')
+                .call(this.d3.axisLeft(this.yScale).tickSize(5).tickPadding(8));
+            // Style the y-axis path and lines
+            this.yAxis.selectAll('path').attr('stroke', 'rgba(var(--ax-comp-line-chart-axis-color), 0.2)');
+            this.yAxis
+                .selectAll('line')
+                .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.2)')
+                .attr('stroke-dasharray', '2,2')
+                .attr('stroke-opacity', '0.5');
+            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.8;
+                axesGroup
+                    .append('text')
+                    .attr('class', 'ax-line-chart-axis-label ax-y-axis-label')
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'middle')
+                    .attr('transform', 'rotate(-90) translate(-5, 0)')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('style', `
+            font-size: 14px;
+            font-weight: 500;
+            fill: rgb(var(--ax-comp-line-chart-text-color));
+            pointer-events: none;
+          `)
+                    .text(options.yAxisLabel);
+            }
+        }
+        if (showGrid) {
+            const gridGroup = this.chart
+                .append('g')
+                .attr('class', 'ax-line-chart-grid-container')
+                .attr('pointer-events', 'none');
+            const yGrid = gridGroup
+                .append('g')
+                .attr('class', 'ax-line-chart-grid')
+                .call(this.d3
+                .axisLeft(this.yScale)
+                .tickSize(-this.width)
+                .tickFormat(() => '')
+                .tickValues(this.yScale.ticks()));
+            // Style the grid path and lines
+            yGrid.selectAll('path').attr('stroke-width', '0');
+            yGrid
+                .selectAll('.tick')
+                .selectAll('line')
+                .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.2)')
+                .attr('stroke-dasharray', '2,2')
+                .attr('stroke-opacity', '0.5');
+            if (options.showVerticalGrid) {
+                const xGrid = gridGroup
+                    .append('g')
+                    .attr('class', 'ax-line-chart-grid-vertical')
+                    .attr('transform', `translate(0,${this.height})`)
+                    .call(this.d3
+                    .axisBottom(this.xScale)
+                    .tickSize(-this.height)
+                    .tickFormat(() => '')
+                    .tickValues(isBandScale ? undefined : this.xScale.ticks()));
+                // Style the vertical grid path and lines
+                xGrid.selectAll('path').attr('stroke-width', '0');
+                xGrid
+                    .selectAll('.tick')
+                    .selectAll('line')
+                    .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.15)')
+                    .attr('stroke-dasharray', '2,2')
+                    .attr('stroke-opacity', '0.5');
+            }
+        }
+    }
+    renderLines(allSeriesData) {
+        const isBandScale = this.xScale.bandwidth !== undefined;
+        const getX = (d) => {
+            if (isBandScale) {
+                return this.xScale(String(d.x)) + this.xScale.bandwidth() / 2;
+            }
+            else {
+                return this.xScale(typeof d.x === 'number' ? d.x : new Date(d.x));
+            }
+        };
+        const lineGenerator = this.d3
+            .line()
+            .x(getX)
+            .y((d) => this.yScale(d.y));
+        if (this.effectiveOptions().smoothLine !== false) {
+            lineGenerator.curve(this.d3.curveMonotoneX);
+        }
+        const areaGenerator = this.d3
+            .area()
+            .x(getX)
+            .y0(this.height)
+            .y1((d) => this.yScale(d.y));
+        if (this.effectiveOptions().smoothLine !== false) {
+            areaGenerator.curve(this.d3.curveMonotoneX);
+        }
+        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');
+        const allPointsGroup = this.chart
+            .append('g')
+            .attr('class', 'ax-line-chart-all-points')
+            .attr('pointer-events', 'none');
+        if (this.effectiveOptions().showCrosshair === true) {
+            this.chart.append('g').attr('class', 'ax-line-chart-crosshair').attr('pointer-events', 'none');
+        }
+        const animationDuration = this.effectiveOptions().animationDuration;
+        const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
+        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-${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')
+                .datum(series.data)
+                .attr('class', 'ax-line-chart-line')
+                .attr('stroke', lineColor)
+                .attr('stroke-width', this.effectiveOptions().lineWidth ?? 2)
+                .attr('stroke-linejoin', 'round')
+                .attr('stroke-linecap', 'round')
+                .attr('d', lineGenerator)
+                .attr('fill', 'none')
+                .attr('style', 'transition: stroke-width 0.3s ease;')
+                .attr('pointer-events', 'none');
+            line
+                .on('mouseenter', () => {
+                line
+                    .transition()
+                    .duration(150)
+                    .attr('stroke-width', (this.effectiveOptions().lineWidth ?? 2) * 1.5);
+            })
+                .on('mouseleave', () => {
+                line
+                    .transition()
+                    .duration(150)
+                    .attr('stroke-width', this.effectiveOptions().lineWidth ?? 2);
+            });
+            const totalLength = line.node().getTotalLength();
+            line
+                .attr('stroke-dasharray', totalLength + ' ' + totalLength)
+                .attr('stroke-dashoffset', totalLength)
+                .transition()
+                .duration(animationDuration)
+                .ease(animationEasing)
+                .attr('stroke-dashoffset', 0)
+                .on('end', function () {
+                line.attr('pointer-events', 'all');
+            });
+            if (this.effectiveOptions().fillArea) {
+                const area = seriesGroup
+                    .append('path')
+                    .datum(series.data)
+                    .attr('class', 'ax-line-chart-area')
+                    .attr('fill', fillColor)
+                    .attr('opacity', 0)
+                    .attr('d', areaGenerator)
+                    .attr('style', 'transition: opacity 0.3s ease;')
+                    .attr('pointer-events', 'none');
+                area
+                    .on('mouseenter', () => {
+                    area
+                        .transition()
+                        .duration(150)
+                        .attr('opacity', ((this.effectiveOptions().fillOpacity ?? 20) / 100) * 1.5);
+                })
+                    .on('mouseleave', () => {
+                    area
+                        .transition()
+                        .duration(150)
+                        .attr('opacity', (this.effectiveOptions().fillOpacity ?? 20) / 100);
+                });
+                area
+                    .transition()
+                    .duration(animationDuration)
+                    .ease(animationEasing)
+                    .attr('opacity', (this.effectiveOptions().fillOpacity ?? 20) / 100)
+                    .on('end', function () {
+                    area.attr('pointer-events', 'all');
+                });
+            }
+        });
+        if (this.effectiveOptions().showPoints !== false) {
+            const pointMap = new Map();
+            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(series.originalIndex, this.chartColors);
+                const maxPoints = 100;
+                const pointData = series.data.length > maxPoints ? this.getReducedDataPoints(series.data, maxPoints) : series.data;
+                pointData.forEach((point) => {
+                    const x = getX(point);
+                    const y = this.yScale(point.y);
+                    const key = `${Math.round(x * 10) / 10},${Math.round(y * 10) / 10}`;
+                    if (!pointMap.has(key)) {
+                        pointMap.set(key, []);
+                    }
+                    pointMap.get(key)?.push({ point, series, originalIndex: series.originalIndex });
+                });
+            });
+            let animationCounter = 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(series.originalIndex, this.chartColors);
+                const pointsGroup = allPointsGroup
+                    .append('g')
+                    .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(series.originalIndex, lineColor))
+                    .on('mouseleave', () => this.handlePointGroupLeave());
+                const maxPoints = 100;
+                const pointData = series.data.length > maxPoints ? this.getReducedDataPoints(series.data, maxPoints) : series.data;
+                pointsGroup
+                    .selectAll('circle')
+                    .data(pointData)
+                    .enter()
+                    .append('circle')
+                    .attr('class', 'ax-line-chart-point')
+                    .attr('cx', getX)
+                    .attr('cy', (d) => this.yScale(d.y))
+                    .attr('r', 0)
+                    .attr('fill', lineColor)
+                    .attr('stroke', '#fff')
+                    .attr('stroke-width', 1)
+                    .attr('data-x', (d) => d.x)
+                    .attr('data-y', (d) => d.y)
+                    .style('cursor', 'pointer')
+                    .attr('pointer-events', 'none')
+                    .on('mouseenter', (event, d) => {
+                    const x = getX(d);
+                    const y = this.yScale(d.y);
+                    const key = `${Math.round(x * 10) / 10},${Math.round(y * 10) / 10}`;
+                    const overlappingPoints = pointMap.get(key) || [];
+                    if (overlappingPoints.length > 1) {
+                        this.handleOverlappingPointsHover(event, overlappingPoints);
+                    }
+                    else {
+                        this.handlePointHover(event, d, series, series.originalIndex);
+                    }
+                    this.d3
+                        .select(event.target)
+                        .transition()
+                        .duration(150)
+                        .attr('r', (this.effectiveOptions().pointRadius ?? 4) * 1.5)
+                        .attr('stroke-width', 2)
+                        .attr('stroke', `rgb(var(--ax-comp-line-chart-bg-color))`);
+                })
+                    .on('mousemove', (event) => this.updateTooltipPosition(event))
+                    .on('mouseleave', (event) => {
+                    this._tooltipVisible.set(false);
+                    this.d3
+                        .select(event.target)
+                        .transition()
+                        .duration(150)
+                        .attr('r', this.effectiveOptions().pointRadius ?? 4)
+                        .attr('stroke-width', 1)
+                        .attr('stroke', '#fff');
+                })
+                    .on('click', (event, d) => {
+                    const x = getX(d);
+                    const y = this.yScale(d.y);
+                    const key = `${Math.round(x * 10) / 10},${Math.round(y * 10) / 10}`;
+                    const overlappingPoints = pointMap.get(key) || [];
+                    if (overlappingPoints.length > 1) {
+                        overlappingPoints.forEach(({ point, series }) => {
+                            this.handlePointClick(event, point, series);
+                        });
+                    }
+                    else {
+                        this.handlePointClick(event, d, series);
+                    }
+                })
+                    .transition()
+                    .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) => {
+                    if (i === nodes.length - 1) {
+                        animationCounter++;
+                        if (animationCounter >= totalVisibleSeriesCount) {
+                            this.enablePointerEventsAfterAnimation();
+                        }
+                    }
+                });
+            });
+        }
+        else {
+            setTimeout(() => {
+                this.enablePointerEventsAfterAnimation();
+            }, animationDuration || 0 + 100);
+        }
+    }
+    enablePointerEventsAfterAnimation() {
+        if (!this.chart || !this.svg)
+            return;
+        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');
+        this.chart.selectAll('.ax-line-chart-area').attr('pointer-events', 'all');
+        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');
+        this.svg.classed('ax-line-chart-animating', false);
+    }
+    handlePointGroupEnter(originalIndex, color) {
+        this.chart
+            .select(`.ax-line-chart-series-${originalIndex} .ax-line-chart-line`)
+            .transition()
+            .duration(150)
+            .attr('stroke-width', (this.effectiveOptions().lineWidth ?? 2) * 1.5);
+    }
+    handlePointGroupLeave() {
+        this.chart
+            .selectAll('.ax-line-chart-line')
+            .transition()
+            .duration(150)
+            .attr('stroke-width', this.effectiveOptions().lineWidth ?? 2);
+        if (this.effectiveOptions().showCrosshair === true) {
+            this.chart.select('.ax-line-chart-crosshair').selectAll('*').remove();
+        }
+    }
+    getReducedDataPoints(data, maxPoints) {
+        if (data.length <= maxPoints)
+            return data;
+        const result = [];
+        const step = Math.ceil(data.length / maxPoints);
+        for (let i = 0; i < data.length; i += step) {
+            result.push(data[i]);
+        }
+        if (result[result.length - 1] !== data[data.length - 1]) {
+            result.push(data[data.length - 1]);
+        }
+        return result;
+    }
+    handlePointHover(event, dataPoint, series, originalIndex) {
+        if (this.effectiveOptions().showTooltip !== false) {
+            const color = series.lineColor || getChartColor(originalIndex, this.chartColors);
+            this._tooltipData.set({
+                title: dataPoint.tooltipLabel || series.tooltipLabel || series.label || `Series ${originalIndex + 1}`,
+                value: dataPoint.y.toString(),
+                seriesName: `x: ${dataPoint.x}`,
+                color: color,
+            });
+            this._tooltipVisible.set(true);
+            this.updateTooltipPosition(event);
+            if (this.effectiveOptions().showCrosshair === true) {
+                this.showCrosshairLines(dataPoint);
+            }
+        }
+    }
+    showCrosshairLines(dataPoint) {
+        const isBandScale = this.xScale.bandwidth !== undefined;
+        let x;
+        if (isBandScale) {
+            x = this.xScale(String(dataPoint.x)) + this.xScale.bandwidth() / 2;
+        }
+        else {
+            x = this.xScale(typeof dataPoint.x === 'number' ? dataPoint.x : new Date(dataPoint.x));
+        }
+        const y = this.yScale(dataPoint.y);
+        let crosshairGroup = this.chart.select('.ax-line-chart-crosshair');
+        if (crosshairGroup.empty()) {
+            crosshairGroup = this.chart.append('g').attr('class', 'ax-line-chart-crosshair').attr('pointer-events', 'none');
+        }
+        crosshairGroup.selectAll('*').remove();
+        crosshairGroup
+            .append('line')
+            .attr('class', 'ax-line-chart-crosshair-vertical')
+            .attr('x1', x)
+            .attr('y1', 0)
+            .attr('x2', x)
+            .attr('y2', this.height)
+            .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.5)')
+            .attr('stroke-width', 1)
+            .attr('stroke-dasharray', '3,3')
+            .attr('opacity', 0.7)
+            .attr('pointer-events', 'none');
+        crosshairGroup
+            .append('line')
+            .attr('class', 'ax-line-chart-crosshair-horizontal')
+            .attr('x1', 0)
+            .attr('y1', y)
+            .attr('x2', this.width)
+            .attr('y2', y)
+            .attr('stroke', 'rgba(var(--ax-comp-line-chart-grid-lines-color), 0.5)')
+            .attr('stroke-width', 1)
+            .attr('stroke-dasharray', '3,3')
+            .attr('opacity', 0.7)
+            .attr('pointer-events', 'none');
+    }
+    updateTooltipPosition(event) {
+        const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
+        const tooltipEl = this.chartContainerEl().nativeElement.querySelector('.chart-tooltip');
+        if (!tooltipEl) {
+            const x = event.clientX - container.left;
+            const y = event.clientY - container.top;
+            this._tooltipPosition.set({ x, y });
+            return;
+        }
+        const tooltipRect = tooltipEl.getBoundingClientRect();
+        let x = event.clientX - container.left;
+        const y = event.clientY - container.top;
+        if (x + tooltipRect.width + 20 > container.width) {
+            x = x - tooltipRect.width - 15;
+        }
+        this._tooltipPosition.set({ x, y });
+    }
+    handlePointClick(event, dataPoint, series) {
+        this.pointClick.emit({
+            series: series, // series still refers to the full series data with originalIndex
+            point: dataPoint,
+            event: {
+                nativeEvent: event,
+                sender: this,
+            },
+        });
+    }
+    showNoDataMessage(containerElement) {
+        this.d3.select(containerElement).selectAll('*').remove();
+        const messageContainer = this.d3
+            .select(containerElement)
+            .append('div')
+            .attr('class', 'ax-line-chart-no-data-message')
+            .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', '300px');
+        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>');
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-line-chart-no-data-text')
+            .style('font-size', '1rem')
+            .style('font-weight', '600')
+            .style('margin-bottom', '0.5rem')
+            .text('No data available');
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-line-chart-no-data-help')
+            .style('font-size', '0.8rem')
+            .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;
+        const tooltipData = {
+            title: 'Multiple Series',
+            value: overlappingPoints[0].point.y.toString(),
+            seriesName: '',
+            color: '',
+            items: overlappingPoints.map(({ point, series, originalIndex }) => {
+                const color = series.lineColor || getChartColor(originalIndex, this.chartColors);
+                return {
+                    label: series.label || `Series ${originalIndex + 1}`,
+                    value: point.y.toString(),
+                    color: color,
+                };
+            }),
+        };
+        this._tooltipData.set(tooltipData);
+        this._tooltipVisible.set(true);
+        this.updateTooltipPosition(event);
+        if (this.effectiveOptions().showCrosshair === true && overlappingPoints.length > 0) {
+            this.showCrosshairLines(overlappingPoints[0].point);
+        }
+    }
+    getEasingFunction(easing) {
+        switch (easing) {
+            case 'linear':
+                return this.d3.easeLinear;
+            case 'ease':
+                return this.d3.easePolyInOut;
+            case 'ease-in':
+                return this.d3.easePolyIn;
+            case 'ease-out':
+                return this.d3.easePolyOut;
+            case 'ease-in-out':
+                return this.d3.easePolyInOut;
+            case 'cubic':
+                return this.d3.easeCubic;
+            case 'cubic-in':
+                return this.d3.easeCubicIn;
+            case 'cubic-out':
+                return this.d3.easeCubicOut;
+            case 'cubic-in-out':
+                return this.d3.easeCubicInOut;
+            default:
+                return this.d3.easeCubicOut;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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: "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: "20.0.4", ngImport: i0, type: AXLineChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-line-chart', standalone: true, encapsulation: ViewEncapsulation.None, imports: [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"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXLineChartComponent, AXLineChartDefaultConfig, AX_LINE_CHART_CONFIG, lineChartConfig };
+//# sourceMappingURL=acorex-charts-line-chart.mjs.map