@acorex/charts 19.13.2

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

@@ -0,0 +1,738 @@
+import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
+import { NXComponent } from '@acorex/components/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, output, viewChild, signal, computed, effect, ChangeDetectionStrategy, 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;
+}
+
+const AXPLineChartColors = {
+    defaultColors: [
+        '#4361ee',
+        '#3a0ca3',
+        '#7209b7',
+        '#f72585',
+        '#4cc9f0',
+        '#4895ef',
+        '#560bad',
+        '#f15bb5',
+        '#00bbf9',
+        '#00f5d4',
+    ],
+    getColor: (index, customPalette) => {
+        const palette = customPalette || AXPLineChartColors.defaultColors;
+        return palette[index % palette.length];
+    },
+};
+/**
+ * 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);
+    tooltipVisible = this._tooltipVisible.asReadonly();
+    tooltipPosition = this._tooltipPosition.asReadonly();
+    tooltipData = this._tooltipData.asReadonly();
+    // Inject configuration
+    configToken = inject(AX_LINE_CHART_CONFIG);
+    effectiveOptions = computed(() => {
+        return {
+            ...this.configToken,
+            ...this.options(),
+        };
+    });
+    ngOnInit() {
+        this.loadD3();
+    }
+    #effect = effect(() => {
+        this.data();
+        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();
+    }
+    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 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)) {
+            this.showNoDataMessage(containerElement);
+            return;
+        }
+        const chartOptions = this.effectiveOptions();
+        this.setupDimensions(containerElement, chartOptions);
+        this.setupScales(normalizedData);
+        this.createAxes(chartOptions);
+        this.renderLines(normalizedData);
+    }
+    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');
+        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) {
+        const chartOptions = this.effectiveOptions();
+        const padding = chartOptions.axisPadding ?? 0;
+        const paddingMultiplier = padding / 100;
+        const allDataPoints = data.flatMap((series) => series.data);
+        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;
+        const yMin = yAxisStartsAtZero ? 0 : this.d3.min(allDataPoints, (d) => d.y) || 0;
+        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 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));
+            this.xAxis.selectAll('text').style('font-size', '11px').style('font-weight', '400').style('fill', '#666');
+            if (options.xAxisLabel) {
+                const labelY = this.height + this.margin.bottom * 0.65;
+                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)
+                    .style('font-size', '13px')
+                    .style('font-weight', '500')
+                    .style('fill', '#555')
+                    .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));
+            this.yAxis.selectAll('text').style('font-size', '11px').style('font-weight', '400').style('fill', '#666');
+            if (options.yAxisLabel) {
+                const labelX = -this.height / 2;
+                const labelY = -this.margin.left * 0.65;
+                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)')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .style('font-size', '13px')
+                    .style('font-weight', '500')
+                    .style('fill', '#555')
+                    .text(options.yAxisLabel);
+            }
+        }
+        if (showGrid) {
+            const gridGroup = this.chart.append('g').attr('class', 'ax-line-chart-grid-container');
+            gridGroup
+                .append('g')
+                .attr('class', 'ax-line-chart-grid')
+                .call(this.d3
+                .axisLeft(this.yScale)
+                .tickSize(-this.width)
+                .tickFormat(() => '')
+                .tickValues(this.yScale.ticks()))
+                .selectAll('.tick')
+                .style('color', 'rgb(153 153 153 / 30%)');
+            if (options.showVerticalGrid) {
+                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()))
+                    .selectAll('.tick')
+                    .style('color', 'rgb(153 153 153 / 20%)');
+            }
+        }
+    }
+    renderLines(data) {
+        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);
+        }
+        const allSeriesGroup = this.chart.append('g').attr('class', 'ax-line-chart-all-series');
+        const allPointsGroup = this.chart.append('g').attr('class', 'ax-line-chart-all-points');
+        if (this.effectiveOptions().showCrosshair === true) {
+            const crosshairGroup = this.chart
+                .append('g')
+                .attr('class', 'ax-line-chart-crosshair')
+                .style('pointer-events', 'none');
+        }
+        // Get animation options
+        const animationDuration = this.effectiveOptions().animationDuration;
+        const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
+        data.forEach((series, seriesIndex) => {
+            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}`);
+            const lineColor = series.lineColor || AXPLineChartColors.getColor(seriesIndex);
+            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('d', lineGenerator)
+                .attr('fill', 'none');
+            const totalLength = line.node().getTotalLength();
+            line
+                .attr('stroke-dasharray', totalLength + ' ' + totalLength)
+                .attr('stroke-dashoffset', totalLength)
+                .transition()
+                .duration(animationDuration)
+                .ease(animationEasing)
+                .attr('stroke-dashoffset', 0);
+            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);
+                area
+                    .transition()
+                    .duration(animationDuration)
+                    .ease(animationEasing)
+                    .attr('opacity', (this.effectiveOptions().fillOpacity ?? 20) / 100);
+            }
+        });
+        if (this.effectiveOptions().showPoints !== false) {
+            const pointMap = new Map();
+            data.forEach((series, seriesIndex) => {
+                if (!series.data || series.data.length === 0)
+                    return;
+                const lineColor = series.lineColor || AXPLineChartColors.getColor(seriesIndex);
+                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,
+                        seriesIndex,
+                    });
+                });
+            });
+            data.forEach((series, seriesIndex) => {
+                if (!series.data || series.data.length === 0)
+                    return;
+                const lineColor = series.lineColor || AXPLineChartColors.getColor(seriesIndex);
+                const pointsGroup = allPointsGroup
+                    .append('g')
+                    .attr('class', `ax-line-chart-points ax-line-chart-points-${seriesIndex}`);
+                pointsGroup
+                    .on('mouseenter', () => this.handlePointGroupEnter(seriesIndex, 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')
+                    .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, seriesIndex);
+                    }
+                    this.d3
+                        .select(event.target)
+                        .transition()
+                        .duration(150)
+                        .attr('r', (this.effectiveOptions().pointRadius ?? 4) * 1.5);
+                })
+                    .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);
+                })
+                    .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.05) + animationDuration * 0.5)
+                    .duration(animationDuration * 0.3)
+                    .ease(animationEasing)
+                    .attr('r', this.effectiveOptions().pointRadius ?? 4);
+            });
+        }
+    }
+    handlePointGroupEnter(seriesIndex, color) {
+        this.chart
+            .select(`.ax-line-chart-series-${seriesIndex} .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, seriesIndex) {
+        if (this.effectiveOptions().showTooltip !== false) {
+            const color = series.lineColor || AXPLineChartColors.getColor(seriesIndex);
+            this._tooltipData.set({
+                title: series.label || `Series ${seriesIndex + 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').style('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', '#999')
+            .attr('stroke-width', 1)
+            .attr('stroke-dasharray', '3,3')
+            .attr('opacity', 0.7)
+            .style('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', '#999')
+            .attr('stroke-width', 1)
+            .attr('stroke-dasharray', '3,3')
+            .attr('opacity', 0.7)
+            .style('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;
+        let y = event.clientY - container.top;
+        if (x + tooltipRect.width + 10 > container.width) {
+            x = x - tooltipRect.width - 10;
+        }
+        else {
+            x = x + 10;
+        }
+        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,
+            point: dataPoint,
+            event: {
+                nativeEvent: event,
+                sender: this,
+            },
+        });
+    }
+    showNoDataMessage(containerElement) {
+        const messageContainer = this.d3
+            .select(containerElement)
+            .append('div')
+            .attr('class', 'axp-line-chart-no-data-message')
+            .style('width', '100%')
+            .style('height', '100%')
+            .style('display', 'flex')
+            .style('flex-direction', 'column')
+            .style('align-items', 'center')
+            .style('justify-content', 'center')
+            .style('text-align', 'center');
+        messageContainer
+            .append('div')
+            .attr('class', 'axp-line-chart-no-data-icon')
+            .style('margin-bottom', '10px')
+            .style('color', 'var(--ax-text-muted, #999)')
+            .html('<i class="fa-light fa-chart-line fa-2x"></i>');
+        messageContainer
+            .append('div')
+            .attr('class', 'axp-line-chart-no-data-text')
+            .style('font-size', '16px')
+            .style('font-weight', '600')
+            .style('color', 'var(--ax-text-color, #333)')
+            .text('No data available');
+    }
+    handleOverlappingPointsHover(event, overlappingPoints) {
+        if (this.effectiveOptions().showTooltip === false)
+            return;
+        const tooltipData = {
+            title: 'Multiple Series',
+            value: '',
+            seriesName: '',
+            color: '',
+            items: overlappingPoints.map(({ point, series, seriesIndex }) => {
+                const color = series.lineColor || AXPLineChartColors.getColor(seriesIndex);
+                return {
+                    label: series.label || `Series ${seriesIndex + 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);
+        }
+    }
+    /**
+     * Gets the appropriate D3 easing function based on the option string
+     */
+    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; // Default easing
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.9", 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: [":host{display:block;width:100%;height:100%;min-height:200px}.ax-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.ax-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.ax-line-chart-line{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .3s ease}.ax-line-chart-line:hover{stroke-width:3px}.ax-line-chart-area{opacity:.2;transition:opacity .3s ease}.ax-line-chart-area:hover{opacity:.3}.ax-line-chart-point{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.ax-line-chart-point:hover{r:6;stroke-width:2;stroke:var(--ax-background-color, #fff)}.ax-line-chart-axis-x path,.ax-line-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.ax-line-chart-axis-x line,.ax-line-chart-axis-y line,.ax-line-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.ax-line-chart-grid path{stroke-width:0}.ax-line-chart-axis-x text,.ax-line-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:11px;font-weight:400}.ax-line-chart-axis-label{font-family:var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:13px;font-weight:500;fill:var(--ax-text-color, #555);pointer-events:none}.ax-x-axis-label{transform:translateY(5px)}.ax-y-axis-label{transform:translate(-5px)}.ax-line-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.ax-line-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.ax-line-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXLineChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-line-chart', standalone: true, 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: [":host{display:block;width:100%;height:100%;min-height:200px}.ax-line-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.ax-line-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.ax-line-chart-line{fill:none;stroke-width:2px;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .3s ease}.ax-line-chart-line:hover{stroke-width:3px}.ax-line-chart-area{opacity:.2;transition:opacity .3s ease}.ax-line-chart-area:hover{opacity:.3}.ax-line-chart-point{cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.ax-line-chart-point:hover{r:6;stroke-width:2;stroke:var(--ax-background-color, #fff)}.ax-line-chart-axis-x path,.ax-line-chart-axis-y path{stroke:var(--ax-border-color, #e0e0e0)}.ax-line-chart-axis-x line,.ax-line-chart-axis-y line,.ax-line-chart-grid line{stroke:var(--ax-border-color, #e0e0e0);stroke-dasharray:2,2;stroke-opacity:.5}.ax-line-chart-grid path{stroke-width:0}.ax-line-chart-axis-x text,.ax-line-chart-axis-y text{fill:var(--ax-text-muted, #666);font-size:11px;font-weight:400}.ax-line-chart-axis-label{font-family:var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:13px;font-weight:500;fill:var(--ax-text-color, #555);pointer-events:none}.ax-x-axis-label{transform:translateY(5px)}.ax-y-axis-label{transform:translate(-5px)}.ax-line-chart-no-data-message{font-family:var(--ax-font-family, system-ui, sans-serif);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%}.ax-line-chart-no-data-icon{margin-bottom:.75rem;color:var(--ax-text-muted, #999)}.ax-line-chart-no-data-text{font-weight:600;color:var(--ax-text-color, #333)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXLineChartComponent, AXLineChartDefaultConfig, AXPLineChartColors, AX_LINE_CHART_CONFIG, lineChartConfig };
+//# sourceMappingURL=acorex-charts-line-chart.mjs.map