@acorex/charts 21.0.2-next.32 → 21.0.2-next.33

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

@@ -51,8 +51,8 @@ function lineChartConfig(config = {}) {
  * Line Chart Component for rendering data as lines with interactive hover effects and animations
  */
 class AXLineChartComponent extends AXChartComponent {
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
-    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     pointClick = output();
     chartContainerEl = viewChild.required('chartContainer');
     d3;
@@ -65,18 +65,18 @@ class AXLineChartComponent extends AXChartComponent {
     width;
     height;
     margin = { top: 20, right: 25, bottom: 40, left: 50 };
-    _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
-    _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
+    _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : /* istanbul ignore next */ []));
+    _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : /* istanbul ignore next */ []));
     _tooltipData = signal({
         title: '',
         value: '0',
         percentage: '0%',
         color: '',
-    }, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : /* istanbul ignore next */ []));
     _tooltipRafId = null;
     _pendingTooltipCoords = null;
-    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
-    _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
+    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
+    _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
     hiddenSeries = new Set();
     _fullNormalizedData = [];
     tooltipVisible = this._tooltipVisible.asReadonly();
@@ -91,7 +91,7 @@ class AXLineChartComponent extends AXChartComponent {
             ...this.configToken,
             ...this.options(),
         };
-    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
     // Messages with defaults
     effectiveMessages = computed(() => {
         const defaultMessages = {
@@ -106,7 +106,7 @@ class AXLineChartComponent extends AXChartComponent {
             ...defaultMessages,
             ...this.effectiveOptions().messages,
         };
-    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : /* istanbul ignore next */ []));
     // Layout & Dimensions
     MIN_DIMENSION = 100;
     MIN_CONTAINER_DIMENSION = 200;
@@ -230,7 +230,7 @@ class AXLineChartComponent extends AXChartComponent {
         if (this._rendered()) {
             this.updateChart();
         }
-    }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
     ngAfterViewInit() {
         this._initialized.set(true);
         if (this.d3 && this.chartContainerEl()) {
@@ -359,7 +359,10 @@ class AXLineChartComponent extends AXChartComponent {
         }
         this._pendingTooltipCoords = null;
         if (this.svg) {
-            this.d3?.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
+            this.d3
+                ?.select(this.chartContainerEl()?.nativeElement)
+                .selectAll('svg, .ax-line-chart-no-data-message, .ax-line-chart-all-hidden-message')
+                .remove();
             this.svg = null;
             this.chart = null;
         }
@@ -472,10 +475,7 @@ class AXLineChartComponent extends AXChartComponent {
             const xMax = this.d3.max(allDataPoints, (d) => d.x) ?? 0;
             if (xMax === 0) {
                 // If all values are 0, show -1 to 1 range
-                this.xScale = this.d3
-                    .scaleLinear()
-                    .domain([-1, 1])
-                    .range([0, this.width]);
+                this.xScale = this.d3.scaleLinear().domain([-1, 1]).range([0, this.width]);
             }
             else {
                 // Always start X axis from 0 for numeric data
@@ -483,9 +483,18 @@ class AXLineChartComponent extends AXChartComponent {
             }
         }
         else {
+            const xDomain = [];
+            const seenX = new Set();
+            for (const point of allDataPoints) {
+                const key = String(point.x);
+                if (!seenX.has(key)) {
+                    seenX.add(key);
+                    xDomain.push(key);
+                }
+            }
             this.xScale = this.d3
                 .scaleBand()
-                .domain(allDataPoints.map((d) => String(d.x)))
+                .domain(xDomain)
                 .range([0, this.width])
                 .paddingInner(0.2)
                 .paddingOuter(0);
@@ -901,23 +910,23 @@ class AXLineChartComponent extends AXChartComponent {
                     else {
                         this.handlePointHover(event, d, series, series.originalIndex);
                     }
+                    const pointRadius = this.effectiveOptions().pointRadius ?? this.DEFAULT_POINT_RADIUS;
                     this.d3
                         .select(event.target)
-                        .transition()
-                        .duration(this.HOVER_TRANSITION_DURATION)
-                        .attr('r', (this.effectiveOptions().pointRadius ?? 4) * 1.5)
-                        .attr('stroke-width', 2)
+                        .interrupt()
+                        .attr('r', pointRadius * this.POINT_HIGHLIGHT_MULTIPLIER)
+                        .attr('stroke-width', this.POINT_HOVER_STROKE_WIDTH)
                         .attr('stroke', `rgb(var(--ax-comp-line-chart-bg-color))`);
                 })
                     .on('mousemove', (event) => this.updateTooltipPosition(event))
                     .on('mouseleave', (event) => {
                     this._tooltipVisible.set(false);
+                    const pointRadius = this.effectiveOptions().pointRadius ?? this.DEFAULT_POINT_RADIUS;
                     this.d3
                         .select(event.target)
-                        .transition()
-                        .duration(this.HOVER_TRANSITION_DURATION)
-                        .attr('r', this.effectiveOptions().pointRadius ?? this.DEFAULT_POINT_RADIUS)
-                        .attr('stroke-width', 1)
+                        .interrupt()
+                        .attr('r', pointRadius)
+                        .attr('stroke-width', this.POINT_STROKE_WIDTH)
                         .attr('stroke', '#fff');
                 })
                     .on('click', (event, d) => {
@@ -1055,19 +1064,33 @@ class AXLineChartComponent extends AXChartComponent {
         this._pendingTooltipCoords = { x: event.clientX, y: event.clientY };
         if (this._tooltipRafId != null)
             return;
+        this.scheduleTooltipPosition(0);
+    }
+    scheduleTooltipPosition(attempt) {
         this._tooltipRafId = requestAnimationFrame(() => {
-            this._tooltipRafId = null;
             const coords = this._pendingTooltipCoords;
-            if (!coords)
+            if (!coords) {
+                this._tooltipRafId = null;
                 return;
+            }
             const containerEl = this.chartContainerEl()?.nativeElement;
-            if (!containerEl)
+            if (!containerEl) {
+                this._tooltipRafId = null;
                 return;
-            const rect = containerEl.getBoundingClientRect();
+            }
             const tooltipEl = containerEl.querySelector('.chart-tooltip');
+            if (!tooltipEl && this._tooltipVisible() && attempt < 3) {
+                this.scheduleTooltipPosition(attempt + 1);
+                return;
+            }
+            this._tooltipRafId = null;
+            const rect = containerEl.getBoundingClientRect();
             const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
             const pos = computeTooltipPosition(rect, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
-            this._tooltipPosition.set(pos);
+            const prev = this._tooltipPosition();
+            if (prev.x !== pos.x || prev.y !== pos.y) {
+                this._tooltipPosition.set(pos);
+            }
         });
     }
     // computeTooltipPosition moved to shared chart utils
@@ -1164,13 +1187,13 @@ class AXLineChartComponent extends AXChartComponent {
             this.showCrosshairLines(overlappingPoints[0].point);
         }
     }
-    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:0;box-sizing:border-box;--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.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: ["ax-line-chart{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;contain:layout style;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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}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.3.3", ngImport: i0, type: AXLineChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXLineChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-line-chart', 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:0;box-sizing:border-box;--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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"] }]
-        }] });
+            args: [{ selector: 'ax-line-chart', 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:0;box-sizing:border-box;--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;contain:layout style;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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;flex-shrink:0}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"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.