@acorex/charts 22.0.0-next.2 → 22.0.0-next.21

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

@@ -90,6 +90,9 @@ class AXLineChartComponent extends AXChartComponent {
     _rendered = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
     hiddenSeries = new Set();
+    _legendStateVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_legendStateVersion" }] : /* istanbul ignore next */ []));
+    legendStateVersion = this._legendStateVersion.asReadonly();
     _fullNormalizedData = [];
     tooltipVisible = this._tooltipVisible.asReadonly();
     tooltipPosition = this._tooltipPosition.asReadonly();
@@ -416,9 +419,13 @@ class AXLineChartComponent extends AXChartComponent {
         this.effectiveOptions();
         if (this._rendered()) {
             this.updateChart();
+            this.bumpLegendState();
         }
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
+    bumpLegendState() {
+        this._legendStateVersion.update((version) => version + 1);
+    }
     ngAfterViewInit() {
         this._initialized.set(true);
         if (this.d3 && this.chartContainerEl()) {
@@ -427,6 +434,7 @@ class AXLineChartComponent extends AXChartComponent {
         }
     }
     ngOnDestroy() {
+        this.cancelTooltipPosition();
         this.cleanupChart();
     }
     // AXChartLegendCompatible Implementation
@@ -489,6 +497,7 @@ class AXLineChartComponent extends AXChartComponent {
             this.hiddenSeries.add(id);
         }
         this.updateChart();
+        this.bumpLegendState();
         return !this.hiddenSeries.has(id);
     }
     async loadD3() {
@@ -541,11 +550,7 @@ class AXLineChartComponent extends AXChartComponent {
         this.createChart();
     }
     cleanupChart() {
-        if (this._tooltipRafId != null) {
-            cancelAnimationFrame(this._tooltipRafId);
-            this._tooltipRafId = null;
-        }
-        this._pendingTooltipCoords = null;
+        this.cancelTooltipPosition();
         if (this.svg) {
             this.d3
                 ?.select(this.chartContainerEl()?.nativeElement)
@@ -1197,16 +1202,18 @@ class AXLineChartComponent extends AXChartComponent {
                 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);
-            const prev = this._tooltipPosition();
-            if (prev.x !== pos.x || prev.y !== pos.y) {
-                this._tooltipPosition.set(pos);
-            }
+            const pos = computeTooltipPosition(containerEl, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
+            this._tooltipPosition.set(pos);
         });
     }
-    // computeTooltipPosition moved to shared chart utils
+    cancelTooltipPosition() {
+        if (this._tooltipRafId != null) {
+            cancelAnimationFrame(this._tooltipRafId);
+            this._tooltipRafId = null;
+        }
+        this._pendingTooltipCoords = null;
+    }
     handlePointClick(event, dataPoint, series) {
         this.pointClick.emit({
             series: series, // series still refers to the full series data with originalIndex
@@ -1249,11 +1256,11 @@ class AXLineChartComponent extends AXChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLineChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", 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: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-line-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--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{@apply relative box-border h-full min-h-0 w-full overflow-hidden rounded-lg;padding:clamp(.25rem,.6vw,.5rem);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{@apply block h-full max-h-full w-full max-w-full shrink-0 overflow-hidden;}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", 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: ["@layer properties;@layer components{.ax-chart-empty{pointer-events:none;position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__card{box-sizing:border-box;max-width:300px;border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 6);text-align:center;width:80%;border:1px solid rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__icon{margin-bottom:calc(var(--spacing, .25rem) * 3);opacity:60%}.ax-chart-empty__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__help{font-size:.8rem;opacity:60%;color:rgba(var(--ax-sys-color-on-lightest-surface))}}@layer components{ax-line-chart{box-sizing:border-box;display:block;height:100%;width:100%;min-height:clamp(220px,38vw,360px);--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{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;border-radius:var(--radius-lg, .5rem);padding:clamp(.25rem,.6vw,.5rem);contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgba(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%;flex-shrink:0;overflow:hidden}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLineChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-line-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], 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: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-line-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--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{@apply relative box-border h-full min-h-0 w-full overflow-hidden rounded-lg;padding:clamp(.25rem,.6vw,.5rem);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{@apply block h-full max-h-full w-full max-w-full shrink-0 overflow-hidden;}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}}\n"] }]
+            args: [{ selector: 'ax-line-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], 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: ["@layer properties;@layer components{.ax-chart-empty{pointer-events:none;position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__card{box-sizing:border-box;max-width:300px;border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 6);text-align:center;width:80%;border:1px solid rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__icon{margin-bottom:calc(var(--spacing, .25rem) * 3);opacity:60%}.ax-chart-empty__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-lightest-surface))}.ax-chart-empty__help{font-size:.8rem;opacity:60%;color:rgba(var(--ax-sys-color-on-lightest-surface))}}@layer components{ax-line-chart{box-sizing:border-box;display:block;height:100%;width:100%;min-height:clamp(220px,38vw,360px);--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{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;border-radius:var(--radius-lg, .5rem);padding:clamp(.25rem,.6vw,.5rem);contain:layout style;color:rgba(var(--ax-comp-line-chart-text-color));background-color:rgba(var(--ax-comp-line-chart-bg-color))}ax-line-chart .ax-line-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%;flex-shrink:0;overflow:hidden}ax-line-chart .ax-line-chart svg g:has(text){font-family:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\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 }] }] } });
 
 /**