@acorex/charts 20.2.0-next.8 → 20.2.0

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

@@ -1,5 +1,5 @@
 import { NXComponent } from '@acorex/cdk/common';
-import { AX_CHART_COLOR_PALETTE, getChartColor } from '@acorex/charts';
+import { AX_CHART_COLOR_PALETTE, getChartColor, computeTooltipPosition } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import { AXPlatform } from '@acorex/core/platform';
 import * as i0 from '@angular/core';
@@ -30,6 +30,14 @@ const AXLineChartDefaultConfig = {
     showCrosshair: false,
     animationDuration: 1000,
     animationEasing: 'cubic-out',
+    messages: {
+        noData: 'No data available',
+        noDataHelp: 'Please provide data to display the chart',
+        allHidden: 'All series are hidden',
+        allHiddenHelp: 'Click legend items to show series in the chart',
+        noDataIcon: 'fa-light fa-chart-line',
+        allHiddenIcon: 'fa-light fa-eye-slash',
+    },
 };
 const AX_LINE_CHART_CONFIG = new InjectionToken('AX_LINE_CHART_CONFIG', {
     providedIn: 'root',
@@ -92,6 +100,23 @@ class AXLineChartComponent extends NXComponent {
             ...this.options(),
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    // Messages with defaults
+    effectiveMessages = computed(() => {
+        const defaultMessages = {
+            noData: 'No data available',
+            noDataHelp: 'Please provide data to display the chart',
+            allHidden: 'All series are hidden',
+            allHiddenHelp: 'Click legend items to show series in the chart',
+            noDataIcon: 'fa-light fa-chart-line',
+            allHiddenIcon: 'fa-light fa-eye-slash',
+        };
+        return {
+            ...defaultMessages,
+            ...this.effectiveOptions().messages,
+        };
+    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
+    // Tooltip gap in pixels for consistent spacing
+    TOOLTIP_GAP = 10;
     ngOnInit() {
         this.loadD3();
     }
@@ -200,7 +225,11 @@ class AXLineChartComponent extends NXComponent {
             return;
         const containerElement = this.chartContainerEl().nativeElement;
         const allSeriesData = this._fullNormalizedData;
-        this.d3.select(containerElement).select('svg').remove();
+        // Clear previous SVG and any empty-state messages (preserve tooltip component)
+        this.d3
+            .select(containerElement)
+            .selectAll('svg, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
+            .remove();
         if (allSeriesData.length === 0 || allSeriesData.every((series) => !series.data || series.data.length === 0)) {
             this.showNoDataMessage(containerElement);
             return;
@@ -262,13 +291,13 @@ class AXLineChartComponent extends NXComponent {
         const svg = this.d3
             .select(containerElement)
             .append('svg')
-            .attr('width', '100%')
-            .attr('height', '100%')
+            .attr('width', totalWidth)
+            .attr('height', totalHeight)
             .attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`)
             .attr('preserveAspectRatio', 'xMidYMid meet')
             .attr('style', `
-        width: 100%;
-        height: 100%;
+        width: ${totalWidth}px;
+        height: ${totalHeight}px;
         max-width: 100%;
         max-height: 100%;
         overflow: visible;
@@ -802,7 +831,6 @@ class AXLineChartComponent extends NXComponent {
             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);
@@ -853,22 +881,16 @@ class AXLineChartComponent extends NXComponent {
             .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 });
+        const containerEl = this.chartContainerEl()?.nativeElement;
+        if (!containerEl)
             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 });
+        const rect = containerEl.getBoundingClientRect();
+        const tooltipEl = containerEl.querySelector('.chart-tooltip');
+        const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
+        const pos = computeTooltipPosition(rect, tooltipRect, event.clientX, event.clientY, this.TOOLTIP_GAP);
+        this._tooltipPosition.set(pos);
     }
+    // computeTooltipPosition moved to shared chart utils
     handlePointClick(event, dataPoint, series) {
         this.pointClick.emit({
             series: series, // series still refers to the full series data with originalIndex
@@ -880,7 +902,11 @@ class AXLineChartComponent extends NXComponent {
         });
     }
     showNoDataMessage(containerElement) {
-        this.d3.select(containerElement).selectAll('*').remove();
+        // Remove only chart SVG and previous empty-state messages to avoid removing tooltip
+        this.d3
+            .select(containerElement)
+            .selectAll('svg, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
+            .remove();
         const messageContainer = this.d3
             .select(containerElement)
             .append('div')
@@ -888,36 +914,33 @@ class AXLineChartComponent extends NXComponent {
             .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');
+            .style('transform', 'translate(-50%, -50%)');
         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>');
+            .html(`<i class="${this.effectiveMessages().noDataIcon} 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');
+            .text(this.effectiveMessages().noData);
         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');
+            .text(this.effectiveMessages().noDataHelp);
     }
     showAllSeriesHiddenMessage(containerElement) {
-        this.d3.select(containerElement).selectAll('*').remove(); // Clear existing chart elements
+        // Remove only chart SVG and previous empty-state messages to avoid removing tooltip
+        this.d3
+            .select(containerElement)
+            .selectAll('svg, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
+            .remove();
         const messageContainer = this.d3
             .select(containerElement)
             .append('div')
@@ -925,50 +948,34 @@ class AXLineChartComponent extends NXComponent {
             .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
+            .style('transform', 'translate(-50%, -50%)');
         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
+            .html(`<i class="${this.effectiveMessages().allHiddenIcon} 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');
+            .text(this.effectiveMessages().allHidden);
         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.');
+            .text(this.effectiveMessages().allHiddenHelp);
     }
     handleOverlappingPointsHover(event, overlappingPoints) {
         if (this.effectiveOptions().showTooltip === false)
             return;
         const tooltipData = {
-            title: 'Multiple Series',
+            title: overlappingPoints.map(({ series }) => series.label),
             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,
-                };
-            }),
+            color: overlappingPoints.map(({ series }) => series.lineColor || getChartColor(series.originalIndex, this.chartColors)),
         };
         this._tooltipData.set(tooltipData);
         this._tooltipVisible.set(true);
@@ -1001,12 +1008,12 @@ class AXLineChartComponent extends NXComponent {
                 return this.d3.easeCubicOut;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", 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: 0, 0, 0, 0;--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:rgba(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 svg g:has(text){font-family:inherit}ax-line-chart .ax-line-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));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.1.3", ngImport: i0, type: AXLineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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"] }]
+            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: 0, 0, 0, 0;--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:rgba(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 svg g:has(text){font-family:inherit}ax-line-chart .ax-line-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-line-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));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"] }]
         }] });
 
 /**