@acorex/charts 19.14.0-next.2 → 19.14.0

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

@@ -2,7 +2,7 @@ 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 { 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';
 
@@ -192,7 +192,14 @@ class AXLineChartComponent extends NXComponent {
             .attr('width', '100%')
             .attr('height', '100%')
             .attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`)
-            .attr('preserveAspectRatio', 'xMidYMid meet');
+            .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})`);
     }
@@ -284,7 +291,18 @@ class AXLineChartComponent extends NXComponent {
                 .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');
+            // 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');
+            this.xAxis.selectAll('text').attr('style', `
+          font-size: 11px;
+          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;
                 axesGroup
@@ -294,9 +312,14 @@ class AXLineChartComponent extends NXComponent {
                     .attr('dominant-baseline', 'middle')
                     .attr('x', this.width / 2)
                     .attr('y', labelY)
-                    .style('font-size', '13px')
-                    .style('font-weight', '500')
-                    .style('fill', '#555')
+                    .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-weight: 500;
+            fill: rgb(var(--ax-comp-line-chart-text-color));
+            pointer-events: none;
+          `)
                     .text(options.xAxisLabel);
             }
         }
@@ -305,7 +328,18 @@ class AXLineChartComponent extends NXComponent {
                 .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');
+            // 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');
+            this.yAxis.selectAll('text').attr('style', `
+          font-size: 11px;
+          font-weight: 400;
+          fill: rgba(var(--ax-comp-line-chart-labels-color), 0.7);
+        `);
             if (options.yAxisLabel) {
                 const labelX = -this.height / 2;
                 const labelY = -this.margin.left * 0.65;
@@ -314,29 +348,42 @@ class AXLineChartComponent extends NXComponent {
                     .attr('class', 'ax-line-chart-axis-label ax-y-axis-label')
                     .attr('text-anchor', 'middle')
                     .attr('dominant-baseline', 'middle')
-                    .attr('transform', 'rotate(-90)')
+                    .attr('transform', 'rotate(-90) translate(-5, 0)')
                     .attr('x', labelX)
                     .attr('y', labelY)
-                    .style('font-size', '13px')
-                    .style('font-weight', '500')
-                    .style('fill', '#555')
+                    .attr('font-family', 'var(--ax-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)')
+                    .attr('style', `
+            font-size: 13px;
+            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');
-            gridGroup
+            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()))
+                .tickValues(this.yScale.ticks()));
+            // Style the grid path and lines
+            yGrid.selectAll('path').attr('stroke-width', '0');
+            yGrid
                 .selectAll('.tick')
-                .style('color', 'rgb(153 153 153 / 30%)');
+                .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) {
-                gridGroup
+                const xGrid = gridGroup
                     .append('g')
                     .attr('class', 'ax-line-chart-grid-vertical')
                     .attr('transform', `translate(0,${this.height})`)
@@ -344,9 +391,15 @@ class AXLineChartComponent extends NXComponent {
                     .axisBottom(this.xScale)
                     .tickSize(-this.height)
                     .tickFormat(() => '')
-                    .tickValues(isBandScale ? undefined : this.xScale.ticks()))
+                    .tickValues(isBandScale ? undefined : this.xScale.ticks()));
+                // Style the vertical grid path and lines
+                xGrid.selectAll('path').attr('stroke-width', '0');
+                xGrid
                     .selectAll('.tick')
-                    .style('color', 'rgb(153 153 153 / 20%)');
+                    .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');
             }
         }
     }
@@ -375,13 +428,21 @@ class AXLineChartComponent extends NXComponent {
         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');
+        // 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
+        const allPointsGroup = this.chart
+            .append('g')
+            .attr('class', 'ax-line-chart-all-points')
+            .attr('pointer-events', 'none'); // Disable pointer events during animation
         if (this.effectiveOptions().showCrosshair === true) {
             const crosshairGroup = this.chart
                 .append('g')
                 .attr('class', 'ax-line-chart-crosshair')
-                .style('pointer-events', 'none');
+                .attr('pointer-events', 'none');
         }
         // Get animation options
         const animationDuration = this.effectiveOptions().animationDuration;
@@ -392,7 +453,8 @@ class AXLineChartComponent extends NXComponent {
             const seriesGroup = allSeriesGroup
                 .append('g')
                 .attr('class', `ax-line-chart-series ax-line-chart-series-${seriesIndex}`)
-                .attr('data-series', series.label || `series-${seriesIndex}`);
+                .attr('data-series', series.label || `series-${seriesIndex}`)
+                .attr('pointer-events', 'none'); // Disable pointer events during animation
             const lineColor = series.lineColor || AXPLineChartColors.getColor(seriesIndex);
             const fillColor = series.fillColor || lineColor;
             const line = seriesGroup
@@ -401,8 +463,26 @@ class AXLineChartComponent extends NXComponent {
                 .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('fill', 'none')
+                .attr('style', 'transition: stroke-width 0.3s ease;')
+                .attr('pointer-events', 'none'); // Disable pointer events during animation
+            // Setup hover listener
+            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)
@@ -410,7 +490,11 @@ class AXLineChartComponent extends NXComponent {
                 .transition()
                 .duration(animationDuration)
                 .ease(animationEasing)
-                .attr('stroke-dashoffset', 0);
+                .attr('stroke-dashoffset', 0)
+                .on('end', function () {
+                // Enable pointer events after animation completes
+                line.attr('pointer-events', 'all');
+            });
             if (this.effectiveOptions().fillArea) {
                 const area = seriesGroup
                     .append('path')
@@ -418,12 +502,32 @@ class AXLineChartComponent extends NXComponent {
                     .attr('class', 'ax-line-chart-area')
                     .attr('fill', fillColor)
                     .attr('opacity', 0)
-                    .attr('d', areaGenerator);
+                    .attr('d', areaGenerator)
+                    .attr('style', 'transition: opacity 0.3s ease;')
+                    .attr('pointer-events', 'none'); // Disable pointer events during animation
+                // Setup hover listener
+                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);
+                    .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) {
@@ -448,13 +552,17 @@ class AXLineChartComponent extends NXComponent {
                     });
                 });
             });
+            // 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)
                     return;
                 const lineColor = series.lineColor || AXPLineChartColors.getColor(seriesIndex);
                 const pointsGroup = allPointsGroup
                     .append('g')
-                    .attr('class', `ax-line-chart-points ax-line-chart-points-${seriesIndex}`);
+                    .attr('class', `ax-line-chart-points ax-line-chart-points-${seriesIndex}`)
+                    .attr('pointer-events', 'none'); // Disable pointer events during animation
                 pointsGroup
                     .on('mouseenter', () => this.handlePointGroupEnter(seriesIndex, lineColor))
                     .on('mouseleave', () => this.handlePointGroupLeave());
@@ -475,6 +583,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
                     .on('mouseenter', (event, d) => {
                     const x = getX(d);
                     const y = this.yScale(d.y);
@@ -490,7 +599,9 @@ class AXLineChartComponent extends NXComponent {
                         .select(event.target)
                         .transition()
                         .duration(150)
-                        .attr('r', (this.effectiveOptions().pointRadius ?? 4) * 1.5);
+                        .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) => {
@@ -499,7 +610,9 @@ class AXLineChartComponent extends NXComponent {
                         .select(event.target)
                         .transition()
                         .duration(150)
-                        .attr('r', this.effectiveOptions().pointRadius ?? 4);
+                        .attr('r', this.effectiveOptions().pointRadius ?? 4)
+                        .attr('stroke-width', 1)
+                        .attr('stroke', '#fff');
                 })
                     .on('click', (event, d) => {
                     const x = getX(d);
@@ -519,9 +632,39 @@ class AXLineChartComponent extends NXComponent {
                     .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);
+                    .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
+                            this.enablePointerEventsAfterAnimation();
+                        }
+                    }
+                });
             });
         }
+        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);
+        }
+    }
+    enablePointerEventsAfterAnimation() {
+        // 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');
+        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');
+        // Remove the animating class from the SVG
+        this.svg.classed('ax-line-chart-animating', false);
     }
     handlePointGroupEnter(seriesIndex, color) {
         this.chart
@@ -581,7 +724,7 @@ class AXLineChartComponent extends NXComponent {
         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 = this.chart.append('g').attr('class', 'ax-line-chart-crosshair').attr('pointer-events', 'none');
         }
         crosshairGroup.selectAll('*').remove();
         crosshairGroup
@@ -591,11 +734,11 @@ class AXLineChartComponent extends NXComponent {
             .attr('y1', 0)
             .attr('x2', x)
             .attr('y2', this.height)
-            .attr('stroke', '#999')
+            .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)
-            .style('pointer-events', 'none');
+            .attr('pointer-events', 'none');
         crosshairGroup
             .append('line')
             .attr('class', 'ax-line-chart-crosshair-horizontal')
@@ -603,11 +746,11 @@ class AXLineChartComponent extends NXComponent {
             .attr('y1', y)
             .attr('x2', this.width)
             .attr('y2', y)
-            .attr('stroke', '#999')
+            .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)
-            .style('pointer-events', 'none');
+            .attr('pointer-events', 'none');
     }
     updateTooltipPosition(event) {
         const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
@@ -620,19 +763,15 @@ class AXLineChartComponent extends NXComponent {
         }
         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;
-        }
+        const y = event.clientY - container.top;
+        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) {
@@ -649,26 +788,25 @@ class AXLineChartComponent extends NXComponent {
         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');
+            .attr('class', 'ax-line-chart-no-data-message')
+            .attr('style', `
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        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)')
+            .attr('class', 'ax-line-chart-no-data-icon')
+            .attr('style', 'margin-bottom: 0.75rem;')
             .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)')
+            .attr('class', 'ax-line-chart-no-data-text')
+            .attr('style', 'font-size: 16px; font-weight: 600;')
             .text('No data available');
     }
     handleOverlappingPointsHover(event, overlappingPoints) {
@@ -676,7 +814,7 @@ class AXLineChartComponent extends NXComponent {
             return;
         const tooltipData = {
             title: 'Multiple Series',
-            value: '',
+            value: overlappingPoints[0].point.y.toString(),
             seriesName: '',
             color: '',
             items: overlappingPoints.map(({ point, series, seriesIndex }) => {
@@ -723,11 +861,11 @@ class AXLineChartComponent extends NXComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", 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{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-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}.ax-line-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-line-chart-text-color),.6)}.ax-line-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-line-chart-text-color))}\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.10", 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"] }]
+            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{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-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-line-chart-text-color));background-color:rgb(var(--ax-comp-line-chart-bg-color))}.ax-line-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-line-chart-text-color),.6)}.ax-line-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-line-chart-text-color))}\n"] }]
         }] });
 
 /**