@acorex/charts 22.0.0-next.9 → 22.1.0-next.0

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

@@ -1,4 +1,4 @@
-import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, AX_CHART_COLOR_PALETTE, mergeChartOptions, mergeChartMessages, resolveBarWidthFraction, formatLargeNumber, getEasingFunction, renderChartEmptyMessage, getChartColor } from '@acorex/charts';
+import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, AX_CHART_COLOR_PALETTE, mergeChartOptions, mergeChartMessages, resolveBarWidthFraction, formatLargeNumber, getEasingFunction, computeTooltipPosition, renderChartEmptyMessage, getChartColor } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, output, viewChild, signal, inject, computed, afterNextRender, effect, ViewEncapsulation, Component } from '@angular/core';
@@ -145,6 +145,9 @@ class AXBarChartComponent extends AXChartComponent {
     // Track hidden bars and series
     hiddenBars = new Set();
     hiddenSeries = new Set();
+    _legendStateVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_legendStateVersion" }] : /* istanbul ignore next */ []));
+    legendStateVersion = this._legendStateVersion.asReadonly();
     // Computed values for better performance
     isClusteredMode = computed(() => {
         const value = this.data();
@@ -199,10 +202,15 @@ class AXBarChartComponent extends AXChartComponent {
             // Only update if already rendered
             if (this._rendered()) {
                 this.updateChart();
+                this.bumpLegendState();
             }
         });
     }
+    bumpLegendState() {
+        this._legendStateVersion.update((version) => version + 1);
+    }
     ngOnDestroy() {
+        this.cancelTooltipPosition();
         this.cleanupChart();
     }
     /**
@@ -271,11 +279,7 @@ class AXBarChartComponent extends AXChartComponent {
      * Cleans up chart resources
      */
     cleanupChart() {
-        if (this._tooltipRafId != null) {
-            cancelAnimationFrame(this._tooltipRafId);
-            this._tooltipRafId = null;
-        }
-        this._pendingTooltipCoords = null;
+        this.cancelTooltipPosition();
         const container = this.chartContainerEl()?.nativeElement;
         if (container) {
             this.clearChartArea(container);
@@ -962,53 +966,17 @@ class AXBarChartComponent extends AXChartComponent {
                 return;
             }
             this._tooltipRafId = null;
-            const containerRect = containerEl.getBoundingClientRect();
             const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
-            const pos = this.computeEnhancedTooltipPosition(containerRect, tooltipRect, coords.x, coords.y);
+            const pos = computeTooltipPosition(containerEl, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
             this._tooltipPosition.set(pos);
         });
     }
-    /**
-     * Enhanced tooltip positioning that considers chart boundaries and prevents overflow
-     */
-    computeEnhancedTooltipPosition(containerRect, tooltipRect, clientX, clientY) {
-        const containerLeft = containerRect.left;
-        const containerTop = containerRect.top;
-        const containerRight = containerRect.right;
-        const containerBottom = containerRect.bottom;
-        if (!tooltipRect) {
-            return {
-                x: Math.min(clientX + this.TOOLTIP_GAP, containerRight - this.TOOLTIP_GAP),
-                y: Math.max(containerTop + this.TOOLTIP_GAP, Math.min(clientY + this.TOOLTIP_GAP, containerBottom - this.TOOLTIP_GAP)),
-            };
-        }
-        const spaceRight = containerRight - clientX;
-        const spaceLeft = clientX - containerLeft;
-        const spaceBelow = containerBottom - clientY;
-        const spaceAbove = clientY - containerTop;
-        let x;
-        if (spaceRight >= tooltipRect.width + this.TOOLTIP_GAP) {
-            x = clientX + this.TOOLTIP_GAP;
-        }
-        else if (spaceLeft >= tooltipRect.width + this.TOOLTIP_GAP) {
-            x = clientX - tooltipRect.width - this.TOOLTIP_GAP;
-        }
-        else {
-            x = Math.max(containerLeft + this.TOOLTIP_GAP, Math.min(containerLeft + (containerRect.width - tooltipRect.width) / 2, containerRight - tooltipRect.width - this.TOOLTIP_GAP));
-        }
-        let y;
-        if (spaceBelow >= tooltipRect.height + this.TOOLTIP_GAP) {
-            y = clientY + this.TOOLTIP_GAP;
-        }
-        else if (spaceAbove >= tooltipRect.height + this.TOOLTIP_GAP) {
-            y = clientY - tooltipRect.height - this.TOOLTIP_GAP;
-        }
-        else {
-            y = Math.max(containerTop + this.TOOLTIP_GAP, Math.min(containerTop + (containerRect.height - tooltipRect.height) / 2, containerBottom - tooltipRect.height - this.TOOLTIP_GAP));
+    cancelTooltipPosition() {
+        if (this._tooltipRafId != null) {
+            cancelAnimationFrame(this._tooltipRafId);
+            this._tooltipRafId = null;
         }
-        x = Math.max(containerLeft + this.TOOLTIP_GAP, Math.min(x, containerRight - tooltipRect.width - this.TOOLTIP_GAP));
-        y = Math.max(containerTop + this.TOOLTIP_GAP, Math.min(y, containerBottom - tooltipRect.height - this.TOOLTIP_GAP));
-        return { x, y };
+        this._pendingTooltipCoords = null;
     }
     /**
      * Handles bar click event
@@ -1206,6 +1174,7 @@ class AXBarChartComponent extends AXChartComponent {
                 this.hiddenBars.add(id);
                 this.updateChart();
             }
+            this.bumpLegendState();
             return !this.hiddenBars.has(id);
         }
         // Clustered mode: toggle series by label
@@ -1231,6 +1200,7 @@ class AXBarChartComponent extends AXChartComponent {
             this.hiddenSeries.add(id);
             this.updateChart();
         }
+        this.bumpLegendState();
         return !this.hiddenSeries.has(id);
     }
     // ===== Helper utilities for modularity and maintainability =====
@@ -1329,11 +1299,11 @@ class AXBarChartComponent extends AXChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-bar-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{@apply block h-full max-h-full w-full max-w-full;}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{@apply pointer-events-none select-none;}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}}\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: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\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-bar-chart{box-sizing:border-box;display:block;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{pointer-events:none;-webkit-user-select:none;user-select:none}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}}@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: AXBarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-bar-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{@apply block h-full max-h-full w-full max-w-full;}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{@apply pointer-events-none select-none;}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}}\n"] }]
+            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\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-bar-chart{box-sizing:border-box;display:block;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{position:relative;box-sizing:border-box;height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{display:block;height:100%;max-height:100%;width:100%;max-width:100%}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{pointer-events:none;-webkit-user-select:none;user-select:none}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}}@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"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
 
 /**