@acorex/charts 20.1.28 → 20.1.29

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

@@ -84,11 +84,11 @@ class AXChartTooltipComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXChartTooltipComponent, isStandalone: true, selector: "ax-chart-tooltip", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible() && data()) {\n<div #tooltipContainer\n  class=\"chart-tooltip ax-absolute ax-pointer-events-none ax-py-2 ax-px-3 ax-rounded-md ax-text-[0.8rem] ax-z-10 ax-shadow-lg ax-backdrop-blur-[4px] ax-border ax-border-white/10 ax-transform ax-translate-x-[10px] ax--translate-y-1/2 ax-max-w-[400px] ax-transition ax-duration-150 ax-ease-in-out\"\n  [style.background-color]=\"data()!.tooltipBgColor || 'rgba(33,33,33,0.9)'\"\n  [style.color]=\"data()!.tooltipColor || 'white'\" [style.left.px]=\"position().x\" [style.top.px]=\"position().y\"\n  [ngStyle]=\"style()\">\n  <div class=\"chart-tooltip-content ax-flex ax-justify-between ax-items-center ax-gap-2\">\n    <div class=\"chart-tooltip-body ax-flex ax-flex-col\">\n      @if (!isTitleArray()) {\n      <div class=\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\">\n        @if (singleColor()) {\n        <div class=\"chart-tooltip-color ax-w-[10px] ax-h-[10px] ax-rounded-[2px] ax-flex-shrink-0\"\n          [style.background-color]=\"singleColor()!\"></div>\n        }\n        <div\n          class=\"chart-tooltip-title ax-font-semibold ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-leading-[1.2]\">\n          {{ data()!.title }}</div>\n      </div>\n      } @else {\n      <div class=\"chart-tooltip-title-list\">\n        @for (t of titleList(); let i = $index; track $index) {\n        <div class=\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\">\n          @if (colorAt(i)) {\n          <div class=\"chart-tooltip-color ax-w-[10px] ax-h-[10px] ax-rounded-[2px] ax-flex-shrink-0\"\n            [style.background-color]=\"colorAt(i)!\"></div>\n          }\n          <div\n            class=\"chart-tooltip-title ax-font-semibold ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-leading-[1.2]\">\n            {{ t }}</div>\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"chart-tooltip-value-row ax-flex ax-gap-2 ax-items-center\">\n        <div class=\"chart-tooltip-value ax-font-medium ax-flex-grow\">{{ data()!.value }}</div>\n        @if (showPercentage() && data()!.percentage) {\n        <div\n          class=\"chart-tooltip-percentage ax-bg-white/20 ax-py-[0.125rem] ax-px-[0.375rem] ax-rounded-full ax-text-[0.7rem] ax-font-medium ax-flex-shrink-0\">\n          {{ data()!.percentage }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXChartTooltipComponent, isStandalone: true, selector: "ax-chart-tooltip", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip ax-pointer-events-none ax-absolute ax-z-10 ax-max-w-[200px] ax--translate-y-1/2 ax-translate-x-[10px] ax-transform ax-rounded-md ax-border ax-border-white/10 ax-px-3 ax-py-2 ax-text-[0.8rem] ax-shadow-lg ax-backdrop-blur-[4px] ax-transition ax-duration-150 ax-ease-in-out\"\n    [style.background-color]=\"data()!.tooltipBgColor || 'rgba(33,33,33,0.9)'\"\n    [style.color]=\"data()!.tooltipColor || 'white'\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n  >\n    <div class=\"chart-tooltip-content ax-flex ax-items-center ax-justify-between ax-gap-2\">\n      <div class=\"chart-tooltip-body ax-flex ax-flex-col ax-truncate\">\n        @if (!isTitleArray()) {\n          <div class=\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\">\n            @if (singleColor()) {\n              <div\n                class=\"chart-tooltip-color ax-h-[10px] ax-w-[10px] ax-flex-shrink-0 ax-rounded-[2px]\"\n                [style.background-color]=\"singleColor()!\"\n              ></div>\n            }\n            <div\n              class=\"chart-tooltip-title ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap ax-font-semibold ax-leading-[1.2]\"\n            >\n              {{ data()!.title }}\n            </div>\n          </div>\n        } @else {\n          <div class=\"chart-tooltip-title-list\">\n            @for (t of titleList(); let i = $index; track $index) {\n              <div class=\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\">\n                @if (colorAt(i)) {\n                  <div\n                    class=\"chart-tooltip-color ax-h-[10px] ax-w-[10px] ax-flex-shrink-0 ax-rounded-[2px]\"\n                    [style.background-color]=\"colorAt(i)!\"\n                  ></div>\n                }\n                <div\n                  class=\"chart-tooltip-title ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap ax-font-semibold ax-leading-[1.2]\"\n                >\n                  {{ t }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"chart-tooltip-value-row ax-flex ax-items-center ax-gap-2\">\n          <div class=\"chart-tooltip-value ax-flex-grow ax-font-medium\">{{ data()!.value }}</div>\n          @if (showPercentage() && data()!.percentage) {\n            <div\n              class=\"chart-tooltip-percentage ax-flex-shrink-0 ax-rounded-full ax-bg-white/20 ax-px-[0.375rem] ax-py-[0.125rem] ax-text-[0.7rem] ax-font-medium\"\n            >\n              {{ data()!.percentage }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXChartTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data()) {\n<div #tooltipContainer\n  class=\"chart-tooltip ax-absolute ax-pointer-events-none ax-py-2 ax-px-3 ax-rounded-md ax-text-[0.8rem] ax-z-10 ax-shadow-lg ax-backdrop-blur-[4px] ax-border ax-border-white/10 ax-transform ax-translate-x-[10px] ax--translate-y-1/2 ax-max-w-[400px] ax-transition ax-duration-150 ax-ease-in-out\"\n  [style.background-color]=\"data()!.tooltipBgColor || 'rgba(33,33,33,0.9)'\"\n  [style.color]=\"data()!.tooltipColor || 'white'\" [style.left.px]=\"position().x\" [style.top.px]=\"position().y\"\n  [ngStyle]=\"style()\">\n  <div class=\"chart-tooltip-content ax-flex ax-justify-between ax-items-center ax-gap-2\">\n    <div class=\"chart-tooltip-body ax-flex ax-flex-col\">\n      @if (!isTitleArray()) {\n      <div class=\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\">\n        @if (singleColor()) {\n        <div class=\"chart-tooltip-color ax-w-[10px] ax-h-[10px] ax-rounded-[2px] ax-flex-shrink-0\"\n          [style.background-color]=\"singleColor()!\"></div>\n        }\n        <div\n          class=\"chart-tooltip-title ax-font-semibold ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-leading-[1.2]\">\n          {{ data()!.title }}</div>\n      </div>\n      } @else {\n      <div class=\"chart-tooltip-title-list\">\n        @for (t of titleList(); let i = $index; track $index) {\n        <div class=\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\">\n          @if (colorAt(i)) {\n          <div class=\"chart-tooltip-color ax-w-[10px] ax-h-[10px] ax-rounded-[2px] ax-flex-shrink-0\"\n            [style.background-color]=\"colorAt(i)!\"></div>\n          }\n          <div\n            class=\"chart-tooltip-title ax-font-semibold ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-leading-[1.2]\">\n            {{ t }}</div>\n        </div>\n        }\n      </div>\n      }\n\n      <div class=\"chart-tooltip-value-row ax-flex ax-gap-2 ax-items-center\">\n        <div class=\"chart-tooltip-value ax-font-medium ax-flex-grow\">{{ data()!.value }}</div>\n        @if (showPercentage() && data()!.percentage) {\n        <div\n          class=\"chart-tooltip-percentage ax-bg-white/20 ax-py-[0.125rem] ax-px-[0.375rem] ax-rounded-full ax-text-[0.7rem] ax-font-medium ax-flex-shrink-0\">\n          {{ data()!.percentage }}</div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n}" }]
+            args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data()) {\n  <div\n    #tooltipContainer\n    class=\"chart-tooltip ax-pointer-events-none ax-absolute ax-z-10 ax-max-w-[200px] ax--translate-y-1/2 ax-translate-x-[10px] ax-transform ax-rounded-md ax-border ax-border-white/10 ax-px-3 ax-py-2 ax-text-[0.8rem] ax-shadow-lg ax-backdrop-blur-[4px] ax-transition ax-duration-150 ax-ease-in-out\"\n    [style.background-color]=\"data()!.tooltipBgColor || 'rgba(33,33,33,0.9)'\"\n    [style.color]=\"data()!.tooltipColor || 'white'\"\n    [style.left.px]=\"position().x\"\n    [style.top.px]=\"position().y\"\n    [ngStyle]=\"style()\"\n  >\n    <div class=\"chart-tooltip-content ax-flex ax-items-center ax-justify-between ax-gap-2\">\n      <div class=\"chart-tooltip-body ax-flex ax-flex-col ax-truncate\">\n        @if (!isTitleArray()) {\n          <div class=\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\">\n            @if (singleColor()) {\n              <div\n                class=\"chart-tooltip-color ax-h-[10px] ax-w-[10px] ax-flex-shrink-0 ax-rounded-[2px]\"\n                [style.background-color]=\"singleColor()!\"\n              ></div>\n            }\n            <div\n              class=\"chart-tooltip-title ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap ax-font-semibold ax-leading-[1.2]\"\n            >\n              {{ data()!.title }}\n            </div>\n          </div>\n        } @else {\n          <div class=\"chart-tooltip-title-list\">\n            @for (t of titleList(); let i = $index; track $index) {\n              <div class=\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\">\n                @if (colorAt(i)) {\n                  <div\n                    class=\"chart-tooltip-color ax-h-[10px] ax-w-[10px] ax-flex-shrink-0 ax-rounded-[2px]\"\n                    [style.background-color]=\"colorAt(i)!\"\n                  ></div>\n                }\n                <div\n                  class=\"chart-tooltip-title ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap ax-font-semibold ax-leading-[1.2]\"\n                >\n                  {{ t }}\n                </div>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"chart-tooltip-value-row ax-flex ax-items-center ax-gap-2\">\n          <div class=\"chart-tooltip-value ax-flex-grow ax-font-medium\">{{ data()!.value }}</div>\n          @if (showPercentage() && data()!.percentage) {\n            <div\n              class=\"chart-tooltip-percentage ax-flex-shrink-0 ax-rounded-full ax-bg-white/20 ax-px-[0.375rem] ax-py-[0.125rem] ax-text-[0.7rem] ax-font-medium\"\n            >\n              {{ data()!.percentage }}\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n" }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/acorex-charts-chart-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-charts-chart-tooltip.mjs","sources":["../tmp-esm2022/chart-tooltip/lib/chart-tooltip.component.js","../tmp-esm2022/chart-tooltip/acorex-charts-chart-tooltip.js"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, NgZone, afterNextRender, inject, input, viewChild, } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nimport * as i1 from \"@angular/common\";\nexport class AXChartTooltipComponent {\n    ngZone = inject(NgZone);\n    data = input(null, ...(ngDevMode ? [{ debugName: \"data\" }] : []));\n    position = input({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: \"position\" }] : []));\n    visible = input(false, ...(ngDevMode ? [{ debugName: \"visible\" }] : []));\n    /**\n     * Whether to show the tooltip's percentage badge\n     */\n    showPercentage = input(true, ...(ngDevMode ? [{ debugName: \"showPercentage\" }] : []));\n    /**\n     * Optional custom styling for the tooltip\n     */\n    style = input({}, ...(ngDevMode ? [{ debugName: \"style\" }] : []));\n    /**\n     * Reference to tooltip container for measuring dimensions\n     */\n    tooltipContainer = viewChild('tooltipContainer', ...(ngDevMode ? [{ debugName: \"tooltipContainer\" }] : []));\n    // Tooltip dimensions\n    tooltipWidth = 0;\n    tooltipHeight = 0;\n    constructor() {\n        afterNextRender(() => {\n            // Update tooltip dimensions when visible changes\n            this.updateTooltipDimensions();\n        });\n    }\n    // Helpers to support color as string | string[]\n    isColorArray() {\n        const color = this.data()?.color;\n        return Array.isArray(color);\n    }\n    colorList() {\n        const color = this.data()?.color;\n        return Array.isArray(color) ? color : [];\n    }\n    singleColor() {\n        const color = this.data()?.color;\n        return typeof color === 'string' ? color : null;\n    }\n    isTitleArray() {\n        const t = this.data()?.title;\n        return Array.isArray(t);\n    }\n    titleList() {\n        const t = this.data()?.title;\n        return Array.isArray(t) ? t : [];\n    }\n    colorAt(index) {\n        const c = this.data()?.color;\n        if (Array.isArray(c)) {\n            return c[index] ?? null;\n        }\n        return typeof c === 'string' ? c : null;\n    }\n    /**\n     * Updates tooltip dimensions after it's rendered\n     */\n    updateTooltipDimensions() {\n        if (this.visible() && this.tooltipContainer) {\n            this.ngZone.runOutsideAngular(() => {\n                // Use requestAnimationFrame to ensure dimensions are calculated after render\n                requestAnimationFrame(() => {\n                    if (this.tooltipContainer()?.nativeElement) {\n                        this.tooltipWidth = this.tooltipContainer().nativeElement.offsetWidth;\n                        this.tooltipHeight = this.tooltipContainer().nativeElement.offsetHeight;\n                    }\n                });\n            });\n        }\n    }\n    /**\n     * Get adjusted tooltip position\n     * Exposes properties for parent components to query tooltip dimensions\n     */\n    getDimensions() {\n        return {\n            width: this.tooltipWidth,\n            height: this.tooltipHeight,\n        };\n    }\n    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: AXChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });\n    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"20.1.8\", type: AXChartTooltipComponent, isStandalone: true, selector: \"ax-chart-tooltip\", inputs: { data: { classPropertyName: \"data\", publicName: \"data\", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: \"position\", publicName: \"position\", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: \"visible\", publicName: \"visible\", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: \"showPercentage\", publicName: \"showPercentage\", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: \"style\", publicName: \"style\", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: \"tooltipContainer\", first: true, predicate: [\"tooltipContainer\"], descendants: true, isSignal: true }], ngImport: i0, template: \"@if (visible() && data()) {\\n<div #tooltipContainer\\n  class=\\\"chart-tooltip ax-absolute ax-pointer-events-none ax-py-2 ax-px-3 ax-rounded-md ax-text-[0.8rem] ax-z-10 ax-shadow-lg ax-backdrop-blur-[4px] ax-border ax-border-white/10 ax-transform ax-translate-x-[10px] ax--translate-y-1/2 ax-max-w-[400px] ax-transition ax-duration-150 ax-ease-in-out\\\"\\n  [style.background-color]=\\\"data()!.tooltipBgColor || 'rgba(33,33,33,0.9)'\\\"\\n  [style.color]=\\\"data()!.tooltipColor || 'white'\\\" [style.left.px]=\\\"position().x\\\" [style.top.px]=\\\"position().y\\\"\\n  [ngStyle]=\\\"style()\\\">\\n  <div class=\\\"chart-tooltip-content ax-flex ax-justify-between ax-items-center ax-gap-2\\\">\\n    <div class=\\\"chart-tooltip-body ax-flex ax-flex-col\\\">\\n      @if (!isTitleArray()) {\\n      <div class=\\\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\\\">\\n        @if (singleColor()) {\\n        <div class=\\\"chart-tooltip-color ax-w-[10px] ax-h-[10px] ax-rounded-[2px] ax-flex-shrink-0\\\"\\n          [style.background-color]=\\\"singleColor()!\\\"></div>\\n        }\\n        <div\\n          class=\\\"chart-tooltip-title ax-font-semibold ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-leading-[1.2]\\\">\\n          {{ data()!.title }}</div>\\n      </div>\\n      } @else {\\n      <div class=\\\"chart-tooltip-title-list\\\">\\n        @for (t of titleList(); let i = $index; track $index) {\\n        <div class=\\\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\\\">\\n          @if (colorAt(i)) {\\n          <div class=\\\"chart-tooltip-color ax-w-[10px] ax-h-[10px] ax-rounded-[2px] ax-flex-shrink-0\\\"\\n            [style.background-color]=\\\"colorAt(i)!\\\"></div>\\n          }\\n          <div\\n            class=\\\"chart-tooltip-title ax-font-semibold ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-leading-[1.2]\\\">\\n            {{ t }}</div>\\n        </div>\\n        }\\n      </div>\\n      }\\n\\n      <div class=\\\"chart-tooltip-value-row ax-flex ax-gap-2 ax-items-center\\\">\\n        <div class=\\\"chart-tooltip-value ax-font-medium ax-flex-grow\\\">{{ data()!.value }}</div>\\n        @if (showPercentage() && data()!.percentage) {\\n        <div\\n          class=\\\"chart-tooltip-percentage ax-bg-white/20 ax-py-[0.125rem] ax-px-[0.375rem] ax-rounded-full ax-text-[0.7rem] ax-font-medium ax-flex-shrink-0\\\">\\n          {{ data()!.percentage }}</div>\\n        }\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n}\", styles: [\"\"], dependencies: [{ kind: \"ngmodule\", type: CommonModule }, { kind: \"directive\", type: i1.NgStyle, selector: \"[ngStyle]\", inputs: [\"ngStyle\"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: AXChartTooltipComponent, decorators: [{\n            type: Component,\n            args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: \"@if (visible() && data()) {\\n<div #tooltipContainer\\n  class=\\\"chart-tooltip ax-absolute ax-pointer-events-none ax-py-2 ax-px-3 ax-rounded-md ax-text-[0.8rem] ax-z-10 ax-shadow-lg ax-backdrop-blur-[4px] ax-border ax-border-white/10 ax-transform ax-translate-x-[10px] ax--translate-y-1/2 ax-max-w-[400px] ax-transition ax-duration-150 ax-ease-in-out\\\"\\n  [style.background-color]=\\\"data()!.tooltipBgColor || 'rgba(33,33,33,0.9)'\\\"\\n  [style.color]=\\\"data()!.tooltipColor || 'white'\\\" [style.left.px]=\\\"position().x\\\" [style.top.px]=\\\"position().y\\\"\\n  [ngStyle]=\\\"style()\\\">\\n  <div class=\\\"chart-tooltip-content ax-flex ax-justify-between ax-items-center ax-gap-2\\\">\\n    <div class=\\\"chart-tooltip-body ax-flex ax-flex-col\\\">\\n      @if (!isTitleArray()) {\\n      <div class=\\\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\\\">\\n        @if (singleColor()) {\\n        <div class=\\\"chart-tooltip-color ax-w-[10px] ax-h-[10px] ax-rounded-[2px] ax-flex-shrink-0\\\"\\n          [style.background-color]=\\\"singleColor()!\\\"></div>\\n        }\\n        <div\\n          class=\\\"chart-tooltip-title ax-font-semibold ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-leading-[1.2]\\\">\\n          {{ data()!.title }}</div>\\n      </div>\\n      } @else {\\n      <div class=\\\"chart-tooltip-title-list\\\">\\n        @for (t of titleList(); let i = $index; track $index) {\\n        <div class=\\\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\\\">\\n          @if (colorAt(i)) {\\n          <div class=\\\"chart-tooltip-color ax-w-[10px] ax-h-[10px] ax-rounded-[2px] ax-flex-shrink-0\\\"\\n            [style.background-color]=\\\"colorAt(i)!\\\"></div>\\n          }\\n          <div\\n            class=\\\"chart-tooltip-title ax-font-semibold ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-leading-[1.2]\\\">\\n            {{ t }}</div>\\n        </div>\\n        }\\n      </div>\\n      }\\n\\n      <div class=\\\"chart-tooltip-value-row ax-flex ax-gap-2 ax-items-center\\\">\\n        <div class=\\\"chart-tooltip-value ax-font-medium ax-flex-grow\\\">{{ data()!.value }}</div>\\n        @if (showPercentage() && data()!.percentage) {\\n        <div\\n          class=\\\"chart-tooltip-percentage ax-bg-white/20 ax-py-[0.125rem] ax-px-[0.375rem] ax-rounded-full ax-text-[0.7rem] ax-font-medium ax-flex-shrink-0\\\">\\n          {{ data()!.percentage }}</div>\\n        }\\n      </div>\\n    </div>\\n  </div>\\n</div>\\n}\" }]\n        }], ctorParameters: () => [] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtdG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jaGFydHMvY2hhcnQtdG9vbHRpcC9zcmMvbGliL2NoYXJ0LXRvb2x0aXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY2hhcnRzL2NoYXJ0LXRvb2x0aXAvc3JjL2xpYi9jaGFydC10b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxNQUFNLEVBRU4sZUFBZSxFQUNmLE1BQU0sRUFDTixLQUFLLEVBQ0wsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDOzs7QUFXdkIsTUFBTSxPQUFPLHVCQUF1QjtJQUMxQixNQUFNLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRWhDLElBQUksR0FBRyxLQUFLLENBQTRCLElBQUksZ0RBQUMsQ0FBQztJQUM5QyxRQUFRLEdBQUcsS0FBSyxDQUEyQixFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxvREFBQyxDQUFDO0lBQzNELE9BQU8sR0FBRyxLQUFLLENBQVUsS0FBSyxtREFBQyxDQUFDO0lBRWhDOztPQUVHO0lBQ0gsY0FBYyxHQUFHLEtBQUssQ0FBVSxJQUFJLDBEQUFDLENBQUM7SUFFdEM7O09BRUc7SUFDSCxLQUFLLEdBQUcsS0FBSyxDQUE0QixFQUFFLGlEQUFDLENBQUM7SUFFN0M7O09BRUc7SUFDSCxnQkFBZ0IsR0FBRyxTQUFTLENBQTZCLGtCQUFrQiw0REFBQyxDQUFDO0lBRTdFLHFCQUFxQjtJQUNYLFlBQVksR0FBRyxDQUFDLENBQUM7SUFDakIsYUFBYSxHQUFHLENBQUMsQ0FBQztJQUU1QjtRQUNFLGVBQWUsQ0FBQyxHQUFHLEVBQUU7WUFDbkIsaURBQWlEO1lBQ2pELElBQUksQ0FBQyx1QkFBdUIsRUFBRSxDQUFDO1FBQ2pDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELGdEQUFnRDtJQUN0QyxZQUFZO1FBQ3BCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxLQUFnQixDQUFDO1FBQzVDLE9BQU8sS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM5QixDQUFDO0lBRVMsU0FBUztRQUNqQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsS0FBZ0IsQ0FBQztRQUM1QyxPQUFPLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFFLEtBQWtCLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUN6RCxDQUFDO0lBRVMsV0FBVztRQUNuQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsS0FBZ0IsQ0FBQztRQUM1QyxPQUFPLE9BQU8sS0FBSyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUUsS0FBZ0IsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO0lBQzlELENBQUM7SUFFUyxZQUFZO1FBQ3BCLE1BQU0sQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxLQUFnQixDQUFDO1FBQ3hDLE9BQU8sS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRVMsU0FBUztRQUNqQixNQUFNLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsS0FBZ0IsQ0FBQztRQUN4QyxPQUFPLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFFLENBQWMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQ2pELENBQUM7SUFFUyxPQUFPLENBQUMsS0FBYTtRQUM3QixNQUFNLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsS0FBZ0IsQ0FBQztRQUN4QyxJQUFJLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztZQUNyQixPQUFRLENBQWMsQ0FBQyxLQUFLLENBQUMsSUFBSSxJQUFJLENBQUM7UUFDeEMsQ0FBQztRQUNELE9BQU8sT0FBTyxDQUFDLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBRSxDQUFZLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUN0RCxDQUFDO0lBRUQ7O09BRUc7SUFDTyx1QkFBdUI7UUFDL0IsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDNUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLEVBQUU7Z0JBQ2pDLDZFQUE2RTtnQkFDN0UscUJBQXFCLENBQUMsR0FBRyxFQUFFO29CQUN6QixJQUFJLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxFQUFFLGFBQWEsRUFBRSxDQUFDO3dCQUMzQyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUM7d0JBQ3RFLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQztvQkFDMUUsQ0FBQztnQkFDSCxDQUFDLENBQUMsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7SUFFRDs7O09BR0c7SUFDSCxhQUFhO1FBQ1gsT0FBTztZQUNMLEtBQUssRUFBRSxJQUFJLENBQUMsWUFBWTtZQUN4QixNQUFNLEVBQUUsSUFBSSxDQUFDLGFBQWE7U0FDM0IsQ0FBQztJQUNKLENBQUM7dUdBN0ZVLHVCQUF1QjsyRkFBdkIsdUJBQXVCLDYxQkN0QnBDLHMzRUE2Q0MseUREMUJXLFlBQVk7OzJGQUdYLHVCQUF1QjtrQkFSbkMsU0FBUzsrQkFDRSxrQkFBa0IsY0FHaEIsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDLG1CQUNOLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgTmdab25lLFxuICBWaWV3Q2hpbGQsXG4gIGFmdGVyTmV4dFJlbmRlcixcbiAgaW5qZWN0LFxuICBpbnB1dCxcbiAgdmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFYQ2hhcnRUb29sdGlwRGF0YSB9IGZyb20gJy4vY2hhcnQtdG9vbHRpcC50eXBlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtY2hhcnQtdG9vbHRpcCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGFydC10b29sdGlwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2hhcnQtdG9vbHRpcC5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEFYQ2hhcnRUb29sdGlwQ29tcG9uZW50IHtcbiAgcHJpdmF0ZSBuZ1pvbmUgPSBpbmplY3QoTmdab25lKTtcblxuICBkYXRhID0gaW5wdXQ8QVhDaGFydFRvb2x0aXBEYXRhIHwgbnVsbD4obnVsbCk7XG4gIHBvc2l0aW9uID0gaW5wdXQ8eyB4OiBudW1iZXI7IHk6IG51bWJlciB9Pih7IHg6IDAsIHk6IDAgfSk7XG4gIHZpc2libGUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdG8gc2hvdyB0aGUgdG9vbHRpcCdzIHBlcmNlbnRhZ2UgYmFkZ2VcbiAgICovXG4gIHNob3dQZXJjZW50YWdlID0gaW5wdXQ8Ym9vbGVhbj4odHJ1ZSk7XG5cbiAgLyoqXG4gICAqIE9wdGlvbmFsIGN1c3RvbSBzdHlsaW5nIGZvciB0aGUgdG9vbHRpcFxuICAgKi9cbiAgc3R5bGUgPSBpbnB1dDx7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9Pih7fSk7XG5cbiAgLyoqXG4gICAqIFJlZmVyZW5jZSB0byB0b29sdGlwIGNvbnRhaW5lciBmb3IgbWVhc3VyaW5nIGRpbWVuc2lvbnNcbiAgICovXG4gIHRvb2x0aXBDb250YWluZXIgPSB2aWV3Q2hpbGQ8RWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD4+KCd0b29sdGlwQ29udGFpbmVyJyk7XG5cbiAgLy8gVG9vbHRpcCBkaW1lbnNpb25zXG4gIHByb3RlY3RlZCB0b29sdGlwV2lkdGggPSAwO1xuICBwcm90ZWN0ZWQgdG9vbHRpcEhlaWdodCA9IDA7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgYWZ0ZXJOZXh0UmVuZGVyKCgpID0+IHtcbiAgICAgIC8vIFVwZGF0ZSB0b29sdGlwIGRpbWVuc2lvbnMgd2hlbiB2aXNpYmxlIGNoYW5nZXNcbiAgICAgIHRoaXMudXBkYXRlVG9vbHRpcERpbWVuc2lvbnMoKTtcbiAgICB9KTtcbiAgfVxuXG4gIC8vIEhlbHBlcnMgdG8gc3VwcG9ydCBjb2xvciBhcyBzdHJpbmcgfCBzdHJpbmdbXVxuICBwcm90ZWN0ZWQgaXNDb2xvckFycmF5KCk6IGJvb2xlYW4ge1xuICAgIGNvbnN0IGNvbG9yID0gdGhpcy5kYXRhKCk/LmNvbG9yIGFzIHVua25vd247XG4gICAgcmV0dXJuIEFycmF5LmlzQXJyYXkoY29sb3IpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGNvbG9yTGlzdCgpOiBzdHJpbmdbXSB7XG4gICAgY29uc3QgY29sb3IgPSB0aGlzLmRhdGEoKT8uY29sb3IgYXMgdW5rbm93bjtcbiAgICByZXR1cm4gQXJyYXkuaXNBcnJheShjb2xvcikgPyAoY29sb3IgYXMgc3RyaW5nW10pIDogW107XG4gIH1cblxuICBwcm90ZWN0ZWQgc2luZ2xlQ29sb3IoKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgY29uc3QgY29sb3IgPSB0aGlzLmRhdGEoKT8uY29sb3IgYXMgdW5rbm93bjtcbiAgICByZXR1cm4gdHlwZW9mIGNvbG9yID09PSAnc3RyaW5nJyA/IChjb2xvciBhcyBzdHJpbmcpIDogbnVsbDtcbiAgfVxuXG4gIHByb3RlY3RlZCBpc1RpdGxlQXJyYXkoKTogYm9vbGVhbiB7XG4gICAgY29uc3QgdCA9IHRoaXMuZGF0YSgpPy50aXRsZSBhcyB1bmtub3duO1xuICAgIHJldHVybiBBcnJheS5pc0FycmF5KHQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIHRpdGxlTGlzdCgpOiBzdHJpbmdbXSB7XG4gICAgY29uc3QgdCA9IHRoaXMuZGF0YSgpPy50aXRsZSBhcyB1bmtub3duO1xuICAgIHJldHVybiBBcnJheS5pc0FycmF5KHQpID8gKHQgYXMgc3RyaW5nW10pIDogW107XG4gIH1cblxuICBwcm90ZWN0ZWQgY29sb3JBdChpbmRleDogbnVtYmVyKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgY29uc3QgYyA9IHRoaXMuZGF0YSgpPy5jb2xvciBhcyB1bmtub3duO1xuICAgIGlmIChBcnJheS5pc0FycmF5KGMpKSB7XG4gICAgICByZXR1cm4gKGMgYXMgc3RyaW5nW10pW2luZGV4XSA/PyBudWxsO1xuICAgIH1cbiAgICByZXR1cm4gdHlwZW9mIGMgPT09ICdzdHJpbmcnID8gKGMgYXMgc3RyaW5nKSA6IG51bGw7XG4gIH1cblxuICAvKipcbiAgICogVXBkYXRlcyB0b29sdGlwIGRpbWVuc2lvbnMgYWZ0ZXIgaXQncyByZW5kZXJlZFxuICAgKi9cbiAgcHJvdGVjdGVkIHVwZGF0ZVRvb2x0aXBEaW1lbnNpb25zKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnZpc2libGUoKSAmJiB0aGlzLnRvb2x0aXBDb250YWluZXIpIHtcbiAgICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgICAgLy8gVXNlIHJlcXVlc3RBbmltYXRpb25GcmFtZSB0byBlbnN1cmUgZGltZW5zaW9ucyBhcmUgY2FsY3VsYXRlZCBhZnRlciByZW5kZXJcbiAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHtcbiAgICAgICAgICBpZiAodGhpcy50b29sdGlwQ29udGFpbmVyKCk/Lm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgICAgICAgIHRoaXMudG9vbHRpcFdpZHRoID0gdGhpcy50b29sdGlwQ29udGFpbmVyKCkubmF0aXZlRWxlbWVudC5vZmZzZXRXaWR0aDtcbiAgICAgICAgICAgIHRoaXMudG9vbHRpcEhlaWdodCA9IHRoaXMudG9vbHRpcENvbnRhaW5lcigpLm5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0O1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogR2V0IGFkanVzdGVkIHRvb2x0aXAgcG9zaXRpb25cbiAgICogRXhwb3NlcyBwcm9wZXJ0aWVzIGZvciBwYXJlbnQgY29tcG9uZW50cyB0byBxdWVyeSB0b29sdGlwIGRpbWVuc2lvbnNcbiAgICovXG4gIGdldERpbWVuc2lvbnMoKTogeyB3aWR0aDogbnVtYmVyOyBoZWlnaHQ6IG51bWJlciB9IHtcbiAgICByZXR1cm4ge1xuICAgICAgd2lkdGg6IHRoaXMudG9vbHRpcFdpZHRoLFxuICAgICAgaGVpZ2h0OiB0aGlzLnRvb2x0aXBIZWlnaHQsXG4gICAgfTtcbiAgfVxufVxuIiwiQGlmICh2aXNpYmxlKCkgJiYgZGF0YSgpKSB7XG48ZGl2ICN0b29sdGlwQ29udGFpbmVyXG4gIGNsYXNzPVwiY2hhcnQtdG9vbHRpcCBheC1hYnNvbHV0ZSBheC1wb2ludGVyLWV2ZW50cy1ub25lIGF4LXB5LTIgYXgtcHgtMyBheC1yb3VuZGVkLW1kIGF4LXRleHQtWzAuOHJlbV0gYXgtei0xMCBheC1zaGFkb3ctbGcgYXgtYmFja2Ryb3AtYmx1ci1bNHB4XSBheC1ib3JkZXIgYXgtYm9yZGVyLXdoaXRlLzEwIGF4LXRyYW5zZm9ybSBheC10cmFuc2xhdGUteC1bMTBweF0gYXgtLXRyYW5zbGF0ZS15LTEvMiBheC1tYXgtdy1bNDAwcHhdIGF4LXRyYW5zaXRpb24gYXgtZHVyYXRpb24tMTUwIGF4LWVhc2UtaW4tb3V0XCJcbiAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiZGF0YSgpIS50b29sdGlwQmdDb2xvciB8fCAncmdiYSgzMywzMywzMywwLjkpJ1wiXG4gIFtzdHlsZS5jb2xvcl09XCJkYXRhKCkhLnRvb2x0aXBDb2xvciB8fCAnd2hpdGUnXCIgW3N0eWxlLmxlZnQucHhdPVwicG9zaXRpb24oKS54XCIgW3N0eWxlLnRvcC5weF09XCJwb3NpdGlvbigpLnlcIlxuICBbbmdTdHlsZV09XCJzdHlsZSgpXCI+XG4gIDxkaXYgY2xhc3M9XCJjaGFydC10b29sdGlwLWNvbnRlbnQgYXgtZmxleCBheC1qdXN0aWZ5LWJldHdlZW4gYXgtaXRlbXMtY2VudGVyIGF4LWdhcC0yXCI+XG4gICAgPGRpdiBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtYm9keSBheC1mbGV4IGF4LWZsZXgtY29sXCI+XG4gICAgICBAaWYgKCFpc1RpdGxlQXJyYXkoKSkge1xuICAgICAgPGRpdiBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtdGl0bGUtcm93IGF4LWZsZXggYXgtaXRlbXMtY2VudGVyIGF4LWdhcC0xLjUgYXgtcGItMlwiPlxuICAgICAgICBAaWYgKHNpbmdsZUNvbG9yKCkpIHtcbiAgICAgICAgPGRpdiBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtY29sb3IgYXgtdy1bMTBweF0gYXgtaC1bMTBweF0gYXgtcm91bmRlZC1bMnB4XSBheC1mbGV4LXNocmluay0wXCJcbiAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJzaW5nbGVDb2xvcigpIVwiPjwvZGl2PlxuICAgICAgICB9XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtdGl0bGUgYXgtZm9udC1zZW1pYm9sZCBheC13aGl0ZXNwYWNlLW5vd3JhcCBheC1vdmVyZmxvdy1oaWRkZW4gYXgtdGV4dC1lbGxpcHNpcyBheC1sZWFkaW5nLVsxLjJdXCI+XG4gICAgICAgICAge3sgZGF0YSgpIS50aXRsZSB9fTwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICB9IEBlbHNlIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJjaGFydC10b29sdGlwLXRpdGxlLWxpc3RcIj5cbiAgICAgICAgQGZvciAodCBvZiB0aXRsZUxpc3QoKTsgbGV0IGkgPSAkaW5kZXg7IHRyYWNrICRpbmRleCkge1xuICAgICAgICA8ZGl2IGNsYXNzPVwiY2hhcnQtdG9vbHRpcC10aXRsZS1yb3cgYXgtZmxleCBheC1pdGVtcy1jZW50ZXIgYXgtZ2FwLTEuNSBheC1wYi0yXCI+XG4gICAgICAgICAgQGlmIChjb2xvckF0KGkpKSB7XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtY29sb3IgYXgtdy1bMTBweF0gYXgtaC1bMTBweF0gYXgtcm91bmRlZC1bMnB4XSBheC1mbGV4LXNocmluay0wXCJcbiAgICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImNvbG9yQXQoaSkhXCI+PC9kaXY+XG4gICAgICAgICAgfVxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNsYXNzPVwiY2hhcnQtdG9vbHRpcC10aXRsZSBheC1mb250LXNlbWlib2xkIGF4LXdoaXRlc3BhY2Utbm93cmFwIGF4LW92ZXJmbG93LWhpZGRlbiBheC10ZXh0LWVsbGlwc2lzIGF4LWxlYWRpbmctWzEuMl1cIj5cbiAgICAgICAgICAgIHt7IHQgfX08L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgICAgfVxuXG4gICAgICA8ZGl2IGNsYXNzPVwiY2hhcnQtdG9vbHRpcC12YWx1ZS1yb3cgYXgtZmxleCBheC1nYXAtMiBheC1pdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtdmFsdWUgYXgtZm9udC1tZWRpdW0gYXgtZmxleC1ncm93XCI+e3sgZGF0YSgpIS52YWx1ZSB9fTwvZGl2PlxuICAgICAgICBAaWYgKHNob3dQZXJjZW50YWdlKCkgJiYgZGF0YSgpIS5wZXJjZW50YWdlKSB7XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtcGVyY2VudGFnZSBheC1iZy13aGl0ZS8yMCBheC1weS1bMC4xMjVyZW1dIGF4LXB4LVswLjM3NXJlbV0gYXgtcm91bmRlZC1mdWxsIGF4LXRleHQtWzAuN3JlbV0gYXgtZm9udC1tZWRpdW0gYXgtZmxleC1zaHJpbmstMFwiPlxuICAgICAgICAgIHt7IGRhdGEoKSEucGVyY2VudGFnZSB9fTwvZGl2PlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbn0iXX0=","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNoYXJ0cy1jaGFydC10b29sdGlwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY2hhcnRzL2NoYXJ0LXRvb2x0aXAvc3JjL2Fjb3JleC1jaGFydHMtY2hhcnQtdG9vbHRpcC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-charts-chart-tooltip.mjs","sources":["../tmp-esm2022/chart-tooltip/lib/chart-tooltip.component.js","../tmp-esm2022/chart-tooltip/acorex-charts-chart-tooltip.js"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, NgZone, afterNextRender, inject, input, viewChild, } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nimport * as i1 from \"@angular/common\";\nexport class AXChartTooltipComponent {\n    ngZone = inject(NgZone);\n    data = input(null, ...(ngDevMode ? [{ debugName: \"data\" }] : []));\n    position = input({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: \"position\" }] : []));\n    visible = input(false, ...(ngDevMode ? [{ debugName: \"visible\" }] : []));\n    /**\n     * Whether to show the tooltip's percentage badge\n     */\n    showPercentage = input(true, ...(ngDevMode ? [{ debugName: \"showPercentage\" }] : []));\n    /**\n     * Optional custom styling for the tooltip\n     */\n    style = input({}, ...(ngDevMode ? [{ debugName: \"style\" }] : []));\n    /**\n     * Reference to tooltip container for measuring dimensions\n     */\n    tooltipContainer = viewChild('tooltipContainer', ...(ngDevMode ? [{ debugName: \"tooltipContainer\" }] : []));\n    // Tooltip dimensions\n    tooltipWidth = 0;\n    tooltipHeight = 0;\n    constructor() {\n        afterNextRender(() => {\n            // Update tooltip dimensions when visible changes\n            this.updateTooltipDimensions();\n        });\n    }\n    // Helpers to support color as string | string[]\n    isColorArray() {\n        const color = this.data()?.color;\n        return Array.isArray(color);\n    }\n    colorList() {\n        const color = this.data()?.color;\n        return Array.isArray(color) ? color : [];\n    }\n    singleColor() {\n        const color = this.data()?.color;\n        return typeof color === 'string' ? color : null;\n    }\n    isTitleArray() {\n        const t = this.data()?.title;\n        return Array.isArray(t);\n    }\n    titleList() {\n        const t = this.data()?.title;\n        return Array.isArray(t) ? t : [];\n    }\n    colorAt(index) {\n        const c = this.data()?.color;\n        if (Array.isArray(c)) {\n            return c[index] ?? null;\n        }\n        return typeof c === 'string' ? c : null;\n    }\n    /**\n     * Updates tooltip dimensions after it's rendered\n     */\n    updateTooltipDimensions() {\n        if (this.visible() && this.tooltipContainer) {\n            this.ngZone.runOutsideAngular(() => {\n                // Use requestAnimationFrame to ensure dimensions are calculated after render\n                requestAnimationFrame(() => {\n                    if (this.tooltipContainer()?.nativeElement) {\n                        this.tooltipWidth = this.tooltipContainer().nativeElement.offsetWidth;\n                        this.tooltipHeight = this.tooltipContainer().nativeElement.offsetHeight;\n                    }\n                });\n            });\n        }\n    }\n    /**\n     * Get adjusted tooltip position\n     * Exposes properties for parent components to query tooltip dimensions\n     */\n    getDimensions() {\n        return {\n            width: this.tooltipWidth,\n            height: this.tooltipHeight,\n        };\n    }\n    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: AXChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });\n    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"20.1.8\", type: AXChartTooltipComponent, isStandalone: true, selector: \"ax-chart-tooltip\", inputs: { data: { classPropertyName: \"data\", publicName: \"data\", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: \"position\", publicName: \"position\", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: \"visible\", publicName: \"visible\", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: \"showPercentage\", publicName: \"showPercentage\", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: \"style\", publicName: \"style\", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: \"tooltipContainer\", first: true, predicate: [\"tooltipContainer\"], descendants: true, isSignal: true }], ngImport: i0, template: \"@if (visible() && data()) {\\n  <div\\n    #tooltipContainer\\n    class=\\\"chart-tooltip ax-pointer-events-none ax-absolute ax-z-10 ax-max-w-[200px] ax--translate-y-1/2 ax-translate-x-[10px] ax-transform ax-rounded-md ax-border ax-border-white/10 ax-px-3 ax-py-2 ax-text-[0.8rem] ax-shadow-lg ax-backdrop-blur-[4px] ax-transition ax-duration-150 ax-ease-in-out\\\"\\n    [style.background-color]=\\\"data()!.tooltipBgColor || 'rgba(33,33,33,0.9)'\\\"\\n    [style.color]=\\\"data()!.tooltipColor || 'white'\\\"\\n    [style.left.px]=\\\"position().x\\\"\\n    [style.top.px]=\\\"position().y\\\"\\n    [ngStyle]=\\\"style()\\\"\\n  >\\n    <div class=\\\"chart-tooltip-content ax-flex ax-items-center ax-justify-between ax-gap-2\\\">\\n      <div class=\\\"chart-tooltip-body ax-flex ax-flex-col ax-truncate\\\">\\n        @if (!isTitleArray()) {\\n          <div class=\\\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\\\">\\n            @if (singleColor()) {\\n              <div\\n                class=\\\"chart-tooltip-color ax-h-[10px] ax-w-[10px] ax-flex-shrink-0 ax-rounded-[2px]\\\"\\n                [style.background-color]=\\\"singleColor()!\\\"\\n              ></div>\\n            }\\n            <div\\n              class=\\\"chart-tooltip-title ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap ax-font-semibold ax-leading-[1.2]\\\"\\n            >\\n              {{ data()!.title }}\\n            </div>\\n          </div>\\n        } @else {\\n          <div class=\\\"chart-tooltip-title-list\\\">\\n            @for (t of titleList(); let i = $index; track $index) {\\n              <div class=\\\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\\\">\\n                @if (colorAt(i)) {\\n                  <div\\n                    class=\\\"chart-tooltip-color ax-h-[10px] ax-w-[10px] ax-flex-shrink-0 ax-rounded-[2px]\\\"\\n                    [style.background-color]=\\\"colorAt(i)!\\\"\\n                  ></div>\\n                }\\n                <div\\n                  class=\\\"chart-tooltip-title ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap ax-font-semibold ax-leading-[1.2]\\\"\\n                >\\n                  {{ t }}\\n                </div>\\n              </div>\\n            }\\n          </div>\\n        }\\n\\n        <div class=\\\"chart-tooltip-value-row ax-flex ax-items-center ax-gap-2\\\">\\n          <div class=\\\"chart-tooltip-value ax-flex-grow ax-font-medium\\\">{{ data()!.value }}</div>\\n          @if (showPercentage() && data()!.percentage) {\\n            <div\\n              class=\\\"chart-tooltip-percentage ax-flex-shrink-0 ax-rounded-full ax-bg-white/20 ax-px-[0.375rem] ax-py-[0.125rem] ax-text-[0.7rem] ax-font-medium\\\"\\n            >\\n              {{ data()!.percentage }}\\n            </div>\\n          }\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n}\\n\", styles: [\"\"], dependencies: [{ kind: \"ngmodule\", type: CommonModule }, { kind: \"directive\", type: i1.NgStyle, selector: \"[ngStyle]\", inputs: [\"ngStyle\"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.1.8\", ngImport: i0, type: AXChartTooltipComponent, decorators: [{\n            type: Component,\n            args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: \"@if (visible() && data()) {\\n  <div\\n    #tooltipContainer\\n    class=\\\"chart-tooltip ax-pointer-events-none ax-absolute ax-z-10 ax-max-w-[200px] ax--translate-y-1/2 ax-translate-x-[10px] ax-transform ax-rounded-md ax-border ax-border-white/10 ax-px-3 ax-py-2 ax-text-[0.8rem] ax-shadow-lg ax-backdrop-blur-[4px] ax-transition ax-duration-150 ax-ease-in-out\\\"\\n    [style.background-color]=\\\"data()!.tooltipBgColor || 'rgba(33,33,33,0.9)'\\\"\\n    [style.color]=\\\"data()!.tooltipColor || 'white'\\\"\\n    [style.left.px]=\\\"position().x\\\"\\n    [style.top.px]=\\\"position().y\\\"\\n    [ngStyle]=\\\"style()\\\"\\n  >\\n    <div class=\\\"chart-tooltip-content ax-flex ax-items-center ax-justify-between ax-gap-2\\\">\\n      <div class=\\\"chart-tooltip-body ax-flex ax-flex-col ax-truncate\\\">\\n        @if (!isTitleArray()) {\\n          <div class=\\\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\\\">\\n            @if (singleColor()) {\\n              <div\\n                class=\\\"chart-tooltip-color ax-h-[10px] ax-w-[10px] ax-flex-shrink-0 ax-rounded-[2px]\\\"\\n                [style.background-color]=\\\"singleColor()!\\\"\\n              ></div>\\n            }\\n            <div\\n              class=\\\"chart-tooltip-title ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap ax-font-semibold ax-leading-[1.2]\\\"\\n            >\\n              {{ data()!.title }}\\n            </div>\\n          </div>\\n        } @else {\\n          <div class=\\\"chart-tooltip-title-list\\\">\\n            @for (t of titleList(); let i = $index; track $index) {\\n              <div class=\\\"chart-tooltip-title-row ax-flex ax-items-center ax-gap-1.5 ax-pb-2\\\">\\n                @if (colorAt(i)) {\\n                  <div\\n                    class=\\\"chart-tooltip-color ax-h-[10px] ax-w-[10px] ax-flex-shrink-0 ax-rounded-[2px]\\\"\\n                    [style.background-color]=\\\"colorAt(i)!\\\"\\n                  ></div>\\n                }\\n                <div\\n                  class=\\\"chart-tooltip-title ax-overflow-hidden ax-text-ellipsis ax-whitespace-nowrap ax-font-semibold ax-leading-[1.2]\\\"\\n                >\\n                  {{ t }}\\n                </div>\\n              </div>\\n            }\\n          </div>\\n        }\\n\\n        <div class=\\\"chart-tooltip-value-row ax-flex ax-items-center ax-gap-2\\\">\\n          <div class=\\\"chart-tooltip-value ax-flex-grow ax-font-medium\\\">{{ data()!.value }}</div>\\n          @if (showPercentage() && data()!.percentage) {\\n            <div\\n              class=\\\"chart-tooltip-percentage ax-flex-shrink-0 ax-rounded-full ax-bg-white/20 ax-px-[0.375rem] ax-py-[0.125rem] ax-text-[0.7rem] ax-font-medium\\\"\\n            >\\n              {{ data()!.percentage }}\\n            </div>\\n          }\\n        </div>\\n      </div>\\n    </div>\\n  </div>\\n}\\n\" }]\n        }], ctorParameters: () => [] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhcnQtdG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jaGFydHMvY2hhcnQtdG9vbHRpcC9zcmMvbGliL2NoYXJ0LXRvb2x0aXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY2hhcnRzL2NoYXJ0LXRvb2x0aXAvc3JjL2xpYi9jaGFydC10b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFFVCxNQUFNLEVBRU4sZUFBZSxFQUNmLE1BQU0sRUFDTixLQUFLLEVBQ0wsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDOzs7QUFXdkIsTUFBTSxPQUFPLHVCQUF1QjtJQUMxQixNQUFNLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRWhDLElBQUksR0FBRyxLQUFLLENBQTRCLElBQUksZ0RBQUMsQ0FBQztJQUM5QyxRQUFRLEdBQUcsS0FBSyxDQUEyQixFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxvREFBQyxDQUFDO0lBQzNELE9BQU8sR0FBRyxLQUFLLENBQVUsS0FBSyxtREFBQyxDQUFDO0lBRWhDOztPQUVHO0lBQ0gsY0FBYyxHQUFHLEtBQUssQ0FBVSxJQUFJLDBEQUFDLENBQUM7SUFFdEM7O09BRUc7SUFDSCxLQUFLLEdBQUcsS0FBSyxDQUE0QixFQUFFLGlEQUFDLENBQUM7SUFFN0M7O09BRUc7SUFDSCxnQkFBZ0IsR0FBRyxTQUFTLENBQTZCLGtCQUFrQiw0REFBQyxDQUFDO0lBRTdFLHFCQUFxQjtJQUNYLFlBQVksR0FBRyxDQUFDLENBQUM7SUFDakIsYUFBYSxHQUFHLENBQUMsQ0FBQztJQUU1QjtRQUNFLGVBQWUsQ0FB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QUNOLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgTmdab25lLFxuICBWaWV3Q2hpbGQsXG4gIGFmdGVyTmV4dFJlbmRlcixcbiAgaW5qZWN0LFxuICBpbnB1dCxcbiAgdmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFYQ2hhcnRUb29sdGlwRGF0YSB9IGZyb20gJy4vY2hhcnQtdG9vbHRpcC50eXBlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXgtY2hhcnQtdG9vbHRpcCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGFydC10b29sdGlwLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2hhcnQtdG9vbHRpcC5jb21wb25lbnQuc2NzcyddLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEFYQ2hhcnRUb29sdGlwQ29tcG9uZW50IHtcbiAgcHJpdmF0ZSBuZ1pvbmUgPSBpbmplY3QoTmdab25lKTtcblxuICBkYXRhID0gaW5wdXQ8QVhDaGFydFRvb2x0aXBEYXRhIHwgbnVsbD4obnVsbCk7XG4gIHBvc2l0aW9uID0gaW5wdXQ8eyB4OiBudW1iZXI7IHk6IG51bWJlciB9Pih7IHg6IDAsIHk6IDAgfSk7XG4gIHZpc2libGUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG5cbiAgLyoqXG4gICAqIFdoZXRoZXIgdG8gc2hvdyB0aGUgdG9vbHRpcCdzIHBlcmNlbnRhZ2UgYmFkZ2VcbiAgICovXG4gIHNob3dQZXJjZW50YWdlID0gaW5wdXQ8Ym9vbGVhbj4odHJ1ZSk7XG5cbiAgLyoqXG4gICAqIE9wdGlvbmFsIGN1c3RvbSBzdHlsaW5nIGZvciB0aGUgdG9vbHRpcFxuICAgKi9cbiAgc3R5bGUgPSBpbnB1dDx7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9Pih7fSk7XG5cbiAgLyoqXG4gICAqIFJlZmVyZW5jZSB0byB0b29sdGlwIGNvbnRhaW5lciBmb3IgbWVhc3VyaW5nIGRpbWVuc2lvbnNcbiAgICovXG4gIHRvb2x0aXBDb250YWluZXIgPSB2aWV3Q2hpbGQ8RWxlbWVudFJlZjxIVE1MRGl2RWxlbWVudD4+KCd0b29sdGlwQ29udGFpbmVyJyk7XG5cbiAgLy8gVG9vbHRpcCBkaW1lbnNpb25zXG4gIHByb3RlY3RlZCB0b29sdGlwV2lkdGggPSAwO1xuICBwcm90ZWN0ZWQgdG9vbHRpcEhlaWdodCA9IDA7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgYWZ0ZXJOZXh0UmVuZGVyKCgpID0+IHtcbiAgICAgIC8vIFVwZGF0ZSB0b29sdGlwIGRpbWVuc2lvbnMgd2hlbiB2aXNpYmxlIGNoYW5nZXNcbiAgICAgIHRoaXMudXBkYXRlVG9vbHRpcERpbWVuc2lvbnMoKTtcbiAgICB9KTtcbiAgfVxuXG4gIC8vIEhlbHBlcnMgdG8gc3VwcG9ydCBjb2xvciBhcyBzdHJpbmcgfCBzdHJpbmdbXVxuICBwcm90ZWN0ZWQgaXNDb2xvckFycmF5KCk6IGJvb2xlYW4ge1xuICAgIGNvbnN0IGNvbG9yID0gdGhpcy5kYXRhKCk/LmNvbG9yIGFzIHVua25vd247XG4gICAgcmV0dXJuIEFycmF5LmlzQXJyYXkoY29sb3IpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGNvbG9yTGlzdCgpOiBzdHJpbmdbXSB7XG4gICAgY29uc3QgY29sb3IgPSB0aGlzLmRhdGEoKT8uY29sb3IgYXMgdW5rbm93bjtcbiAgICByZXR1cm4gQXJyYXkuaXNBcnJheShjb2xvcikgPyAoY29sb3IgYXMgc3RyaW5nW10pIDogW107XG4gIH1cblxuICBwcm90ZWN0ZWQgc2luZ2xlQ29sb3IoKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgY29uc3QgY29sb3IgPSB0aGlzLmRhdGEoKT8uY29sb3IgYXMgdW5rbm93bjtcbiAgICByZXR1cm4gdHlwZW9mIGNvbG9yID09PSAnc3RyaW5nJyA/IChjb2xvciBhcyBzdHJpbmcpIDogbnVsbDtcbiAgfVxuXG4gIHByb3RlY3RlZCBpc1RpdGxlQXJyYXkoKTogYm9vbGVhbiB7XG4gICAgY29uc3QgdCA9IHRoaXMuZGF0YSgpPy50aXRsZSBhcyB1bmtub3duO1xuICAgIHJldHVybiBBcnJheS5pc0FycmF5KHQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIHRpdGxlTGlzdCgpOiBzdHJpbmdbXSB7XG4gICAgY29uc3QgdCA9IHRoaXMuZGF0YSgpPy50aXRsZSBhcyB1bmtub3duO1xuICAgIHJldHVybiBBcnJheS5pc0FycmF5KHQpID8gKHQgYXMgc3RyaW5nW10pIDogW107XG4gIH1cblxuICBwcm90ZWN0ZWQgY29sb3JBdChpbmRleDogbnVtYmVyKTogc3RyaW5nIHwgbnVsbCB7XG4gICAgY29uc3QgYyA9IHRoaXMuZGF0YSgpPy5jb2xvciBhcyB1bmtub3duO1xuICAgIGlmIChBcnJheS5pc0FycmF5KGMpKSB7XG4gICAgICByZXR1cm4gKGMgYXMgc3RyaW5nW10pW2luZGV4XSA/PyBudWxsO1xuICAgIH1cbiAgICByZXR1cm4gdHlwZW9mIGMgPT09ICdzdHJpbmcnID8gKGMgYXMgc3RyaW5nKSA6IG51bGw7XG4gIH1cblxuICAvKipcbiAgICogVXBkYXRlcyB0b29sdGlwIGRpbWVuc2lvbnMgYWZ0ZXIgaXQncyByZW5kZXJlZFxuICAgKi9cbiAgcHJvdGVjdGVkIHVwZGF0ZVRvb2x0aXBEaW1lbnNpb25zKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnZpc2libGUoKSAmJiB0aGlzLnRvb2x0aXBDb250YWluZXIpIHtcbiAgICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgICAgLy8gVXNlIHJlcXVlc3RBbmltYXRpb25GcmFtZSB0byBlbnN1cmUgZGltZW5zaW9ucyBhcmUgY2FsY3VsYXRlZCBhZnRlciByZW5kZXJcbiAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHtcbiAgICAgICAgICBpZiAodGhpcy50b29sdGlwQ29udGFpbmVyKCk/Lm5hdGl2ZUVsZW1lbnQpIHtcbiAgICAgICAgICAgIHRoaXMudG9vbHRpcFdpZHRoID0gdGhpcy50b29sdGlwQ29udGFpbmVyKCkubmF0aXZlRWxlbWVudC5vZmZzZXRXaWR0aDtcbiAgICAgICAgICAgIHRoaXMudG9vbHRpcEhlaWdodCA9IHRoaXMudG9vbHRpcENvbnRhaW5lcigpLm5hdGl2ZUVsZW1lbnQub2Zmc2V0SGVpZ2h0O1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogR2V0IGFkanVzdGVkIHRvb2x0aXAgcG9zaXRpb25cbiAgICogRXhwb3NlcyBwcm9wZXJ0aWVzIGZvciBwYXJlbnQgY29tcG9uZW50cyB0byBxdWVyeSB0b29sdGlwIGRpbWVuc2lvbnNcbiAgICovXG4gIGdldERpbWVuc2lvbnMoKTogeyB3aWR0aDogbnVtYmVyOyBoZWlnaHQ6IG51bWJlciB9IHtcbiAgICByZXR1cm4ge1xuICAgICAgd2lkdGg6IHRoaXMudG9vbHRpcFdpZHRoLFxuICAgICAgaGVpZ2h0OiB0aGlzLnRvb2x0aXBIZWlnaHQsXG4gICAgfTtcbiAgfVxufVxuIiwiQGlmICh2aXNpYmxlKCkgJiYgZGF0YSgpKSB7XG4gIDxkaXZcbiAgICAjdG9vbHRpcENvbnRhaW5lclxuICAgIGNsYXNzPVwiY2hhcnQtdG9vbHRpcCBheC1wb2ludGVyLWV2ZW50cy1ub25lIGF4LWFic29sdXRlIGF4LXotMTAgYXgtbWF4LXctWzIwMHB4XSBheC0tdHJhbnNsYXRlLXktMS8yIGF4LXRyYW5zbGF0ZS14LVsxMHB4XSBheC10cmFuc2Zvcm0gYXgtcm91bmRlZC1tZCBheC1ib3JkZXIgYXgtYm9yZGVyLXdoaXRlLzEwIGF4LXB4LTMgYXgtcHktMiBheC10ZXh0LVswLjhyZW1dIGF4LXNoYWRvdy1sZyBheC1iYWNrZHJvcC1ibHVyLVs0cHhdIGF4LXRyYW5zaXRpb24gYXgtZHVyYXRpb24tMTUwIGF4LWVhc2UtaW4tb3V0XCJcbiAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJkYXRhKCkhLnRvb2x0aXBCZ0NvbG9yIHx8ICdyZ2JhKDMzLDMzLDMzLDAuOSknXCJcbiAgICBbc3R5bGUuY29sb3JdPVwiZGF0YSgpIS50b29sdGlwQ29sb3IgfHwgJ3doaXRlJ1wiXG4gICAgW3N0eWxlLmxlZnQucHhdPVwicG9zaXRpb24oKS54XCJcbiAgICBbc3R5bGUudG9wLnB4XT1cInBvc2l0aW9uKCkueVwiXG4gICAgW25nU3R5bGVdPVwic3R5bGUoKVwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwiY2hhcnQtdG9vbHRpcC1jb250ZW50IGF4LWZsZXggYXgtaXRlbXMtY2VudGVyIGF4LWp1c3RpZnktYmV0d2VlbiBheC1nYXAtMlwiPlxuICAgICAgPGRpdiBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtYm9keSBheC1mbGV4IGF4LWZsZXgtY29sIGF4LXRydW5jYXRlXCI+XG4gICAgICAgIEBpZiAoIWlzVGl0bGVBcnJheSgpKSB7XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtdGl0bGUtcm93IGF4LWZsZXggYXgtaXRlbXMtY2VudGVyIGF4LWdhcC0xLjUgYXgtcGItMlwiPlxuICAgICAgICAgICAgQGlmIChzaW5nbGVDb2xvcigpKSB7XG4gICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICBjbGFzcz1cImNoYXJ0LXRvb2x0aXAtY29sb3IgYXgtaC1bMTBweF0gYXgtdy1bMTBweF0gYXgtZmxleC1zaHJpbmstMCBheC1yb3VuZGVkLVsycHhdXCJcbiAgICAgICAgICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJzaW5nbGVDb2xvcigpIVwiXG4gICAgICAgICAgICAgID48L2Rpdj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY2xhc3M9XCJjaGFydC10b29sdGlwLXRpdGxlIGF4LW92ZXJmbG93LWhpZGRlbiBheC10ZXh0LWVsbGlwc2lzIGF4LXdoaXRlc3BhY2Utbm93cmFwIGF4LWZvbnQtc2VtaWJvbGQgYXgtbGVhZGluZy1bMS4yXVwiXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIHt7IGRhdGEoKSEudGl0bGUgfX1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9IEBlbHNlIHtcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2hhcnQtdG9vbHRpcC10aXRsZS1saXN0XCI+XG4gICAgICAgICAgICBAZm9yICh0IG9mIHRpdGxlTGlzdCgpOyBsZXQgaSA9ICRpbmRleDsgdHJhY2sgJGluZGV4KSB7XG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaGFydC10b29sdGlwLXRpdGxlLXJvdyBheC1mbGV4IGF4LWl0ZW1zLWNlbnRlciBheC1nYXAtMS41IGF4LXBiLTJcIj5cbiAgICAgICAgICAgICAgICBAaWYgKGNvbG9yQXQoaSkpIHtcbiAgICAgICAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJjaGFydC10b29sdGlwLWNvbG9yIGF4LWgtWzEwcHhdIGF4LXctWzEwcHhdIGF4LWZsZXgtc2hyaW5rLTAgYXgtcm91bmRlZC1bMnB4XVwiXG4gICAgICAgICAgICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImNvbG9yQXQoaSkhXCJcbiAgICAgICAgICAgICAgICAgID48L2Rpdj5cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgY2xhc3M9XCJjaGFydC10b29sdGlwLXRpdGxlIGF4LW92ZXJmbG93LWhpZGRlbiBheC10ZXh0LWVsbGlwc2lzIGF4LXdoaXRlc3BhY2Utbm93cmFwIGF4LWZvbnQtc2VtaWJvbGQgYXgtbGVhZGluZy1bMS4yXVwiXG4gICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAge3sgdCB9fVxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgfVxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjaGFydC10b29sdGlwLXZhbHVlLXJvdyBheC1mbGV4IGF4LWl0ZW1zLWNlbnRlciBheC1nYXAtMlwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJjaGFydC10b29sdGlwLXZhbHVlIGF4LWZsZXgtZ3JvdyBheC1mb250LW1lZGl1bVwiPnt7IGRhdGEoKSEudmFsdWUgfX08L2Rpdj5cbiAgICAgICAgICBAaWYgKHNob3dQZXJjZW50YWdlKCkgJiYgZGF0YSgpIS5wZXJjZW50YWdlKSB7XG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgIGNsYXNzPVwiY2hhcnQtdG9vbHRpcC1wZXJjZW50YWdlIGF4LWZsZXgtc2hyaW5rLTAgYXgtcm91bmRlZC1mdWxsIGF4LWJnLXdoaXRlLzIwIGF4LXB4LVswLjM3NXJlbV0gYXgtcHktWzAuMTI1cmVtXSBheC10ZXh0LVswLjdyZW1dIGF4LWZvbnQtbWVkaXVtXCJcbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3sgZGF0YSgpIS5wZXJjZW50YWdlIH19XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICB9XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxufVxuIl19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNoYXJ0cy1jaGFydC10b29sdGlwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY2hhcnRzL2NoYXJ0LXRvb2x0aXAvc3JjL2Fjb3JleC1jaGFydHMtY2hhcnQtdG9vbHRpcC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { AX_CHART_COLOR_PALETTE, getChartColor } from '@acorex/charts';
+import { AX_CHART_COLOR_PALETTE, getChartColor, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ChangeDetectorRef, input, output, viewChild, signal, computed, afterNextRender, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
@@ -93,6 +93,8 @@ class AXDonutChartComponent {
             ...this.options(),
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    // Tooltip positioning gap in pixels
+    TOOLTIP_GAP = 10;
     // Messages with defaults
     effectiveMessages = computed(() => {
         const defaultMessages = {
@@ -315,27 +317,7 @@ class AXDonutChartComponent {
         if (!this.chartContainerEl()?.nativeElement)
             return;
         const container = this.chartContainerEl().nativeElement;
-        this.d3.select(container).selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
-        const messageContainer = this.d3
-            .select(container)
-            .append('div')
-            // Apply generic container class and specific donut chart background class
-            .attr('class', 'ax-chart-message-container ax-donut-chart-message-background ax-donut-chart-no-data-message');
-        messageContainer
-            .append('div')
-            // Apply generic icon class and specific donut chart icon class
-            .attr('class', 'ax-chart-message-icon ax-donut-chart-no-data-icon')
-            .html(`<i class="${this.effectiveMessages().noDataIcon} fa-2x"></i>`); // Donut chart icon
-        messageContainer
-            .append('div')
-            // Apply generic text class and specific donut chart text class
-            .attr('class', 'ax-chart-message-text ax-donut-chart-no-data-text')
-            .text(this.effectiveMessages().noData);
-        messageContainer
-            .append('div')
-            // Apply generic help class and specific donut chart help class
-            .attr('class', 'ax-chart-message-help ax-donut-chart-no-data-help')
-            .text(this.effectiveMessages().noDataHelp);
+        this.renderMessage(container, this.effectiveMessages().noDataIcon, this.effectiveMessages().noData, this.effectiveMessages().noDataHelp, 'ax-donut-chart-no-data-message');
     }
     /**
      * Shows a message when all segments are hidden
@@ -344,27 +326,7 @@ class AXDonutChartComponent {
         if (!this.chartContainerEl()?.nativeElement)
             return;
         const container = this.chartContainerEl().nativeElement;
-        this.d3.select(container).selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
-        const messageContainer = this.d3
-            .select(container)
-            .append('div')
-            // Apply generic container class and specific donut chart background class
-            .attr('class', 'ax-chart-message-container ax-donut-chart-message-background ax-donut-chart-no-data-message');
-        messageContainer
-            .append('div')
-            // Apply generic icon class and specific donut chart icon class if any distinction is needed later
-            .attr('class', 'ax-chart-message-icon ax-donut-chart-no-data-icon')
-            .html(`<i class="${this.effectiveMessages().allHiddenIcon} fa-2x"></i>`);
-        messageContainer
-            .append('div')
-            // Apply generic text class and specific donut chart text class if needed
-            .attr('class', 'ax-chart-message-text ax-donut-chart-no-data-text')
-            .text(this.effectiveMessages().allHidden);
-        messageContainer
-            .append('div')
-            // Apply generic help class and specific donut chart help class if needed
-            .attr('class', 'ax-chart-message-help ax-donut-chart-no-data-help')
-            .text(this.effectiveMessages().allHiddenHelp);
+        this.renderMessage(container, this.effectiveMessages().allHiddenIcon, this.effectiveMessages().allHidden, this.effectiveMessages().allHiddenHelp, 'ax-donut-chart-no-data-message');
     }
     /**
      * Setups chart dimensions based on container and options
@@ -448,7 +410,7 @@ class AXDonutChartComponent {
             .outerRadius(innerRadius + (radius * 0.95 - innerRadius) / 2);
         // Get animation options
         const animationDuration = this.effectiveOptions().animationDuration;
-        const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
+        const animationEasing = getEasingFunction(this.d3, this.effectiveOptions().animationEasing);
         // Generate pie data
         this.pieData = pie(data);
         // Add segments with animation
@@ -515,67 +477,80 @@ class AXDonutChartComponent {
                 this.cdr.detectChanges();
             }
         });
-        // Add data labels if enabled
+        // Add data labels if enabled and chart size is sufficient
         if (this.effectiveOptions().showDataLabels) {
-            // Calculate optimal font size based on segment size and chart dimensions
-            const calculateFontSize = (d) => {
-                // Calculate angle size in radians for the segment
-                const angleSize = d.endAngle - d.startAngle;
-                // Calculate the segment's percentage of the whole
-                const segmentPercentage = (d.data.value / total) * 100;
-                // Base minimum font size on segment size
-                const minFontSize = segmentPercentage < 5
-                    ? 0 // Hide very small segments
-                    : segmentPercentage < 10
-                        ? 7 // Smaller font for small segments
-                        : segmentPercentage < 15
-                            ? 8 // Medium font for medium segments
-                            : 9; // Regular font for large segments
-                // Adjust font size based on chart size
-                return Math.min(Math.max(minFontSize, (angleSize * radius) / 10), 12);
-            };
-            // Format percentage value with appropriate precision
-            const formatPercentage = (value) => {
-                if (value < 1)
-                    return '<1%';
-                if (value < 10)
-                    return `${value.toFixed(1)}%`;
-                return `${Math.round(value)}%`;
-            };
-            const labels = this.svg
-                .selectAll('.ax-donut-chart-data-label')
-                .data(this.pieData)
-                .enter()
-                .append('text')
-                .attr('class', 'ax-donut-chart-data-label')
-                .style('opacity', 0)
-                .style('pointer-events', 'none')
-                .style('fill', 'rgb(var(--ax-comp-donut-chart-data-labels-color))')
-                .attr('transform', (d) => {
-                // Calculate the centroid position for the label
-                const centroid = labelArc.centroid(d);
-                return `translate(${centroid[0]}, ${centroid[1]})`;
-            })
-                .attr('text-anchor', 'middle')
-                .attr('dominant-baseline', 'middle')
-                .style('font-size', (d) => `${calculateFontSize(d)}px`)
-                .style('font-weight', (d) => ((d.data.value / total) * 100 >= 15 ? '600' : '500'))
-                .text((d) => {
-                // Calculate percentage for labels
-                const percentage = (d.data.value / total) * 100;
-                // Only show if segment is large enough to display text
-                if (percentage < 1)
-                    return '';
-                const label = d.data.label || '';
-                const percentageText = formatPercentage(percentage);
-                return label ? `${label} (${percentageText})` : percentageText;
-            });
-            // Animate labels
-            labels
-                .transition()
-                .duration(animationDuration)
-                .delay((d, i) => i * 50 + 200)
-                .style('opacity', 1);
+            const minChartDimension = Math.min(chartWidth, chartHeight);
+            const isTooSmallChartForLabels = minChartDimension < 260; // Hide labels entirely on small charts
+            if (!isTooSmallChartForLabels) {
+                // Calculate optimal font size based on segment size and chart dimensions
+                const calculateFontSize = (d) => {
+                    const angleSize = d.endAngle - d.startAngle; // radians
+                    const segmentPercentage = (d.data.value / total) * 100;
+                    // Drop labels for very small segments
+                    if (segmentPercentage < 2)
+                        return 0;
+                    // Minimum readable font size; avoid tiny unreadable text
+                    const minReadable = segmentPercentage < 8 ? 0 : 9;
+                    // Base size scaled by arc angle and radius, capped
+                    const scaled = (angleSize * radius) / 9;
+                    return Math.min(Math.max(minReadable, scaled), 13);
+                };
+                const formatPercentage = (value) => {
+                    if (value < 1)
+                        return '<1%';
+                    if (value < 10)
+                        return `${value.toFixed(1)}%`;
+                    return `${Math.round(value)}%`;
+                };
+                const labelRadius = innerRadius + (radius * 0.95 - innerRadius) / 2;
+                const approximateTextWidth = (text, fontSize) => {
+                    // Approximate width: 0.55em per char
+                    return text.length * fontSize * 0.55;
+                };
+                const arcLength = (d) => (d.endAngle - d.startAngle) * labelRadius;
+                const buildLabelText = (d) => {
+                    const percentage = (d.data.value / total) * 100;
+                    if (percentage < 1)
+                        return '';
+                    const label = d.data.label || '';
+                    const percentageText = formatPercentage(percentage);
+                    return label ? `${label} (${percentageText})` : percentageText;
+                };
+                const dataThatFits = this.pieData.filter((d) => {
+                    const fontSize = calculateFontSize(d);
+                    if (!fontSize)
+                        return false;
+                    const text = buildLabelText(d);
+                    if (!text)
+                        return false;
+                    const available = arcLength(d);
+                    const needed = approximateTextWidth(text, fontSize) + 6; // small padding
+                    return needed <= available;
+                });
+                const labels = this.svg
+                    .selectAll('.ax-donut-chart-data-label')
+                    .data(dataThatFits)
+                    .enter()
+                    .append('text')
+                    .attr('class', 'ax-donut-chart-data-label')
+                    .style('opacity', 0)
+                    .style('pointer-events', 'none')
+                    .style('fill', 'rgb(var(--ax-comp-donut-chart-data-labels-color))')
+                    .attr('transform', (d) => {
+                    const centroid = labelArc.centroid(d);
+                    return `translate(${centroid[0]}, ${centroid[1]})`;
+                })
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'middle')
+                    .style('font-size', (d) => `${calculateFontSize(d)}px`)
+                    .style('font-weight', (d) => ((d.data.value / total) * 100 >= 15 ? '600' : '500'))
+                    .text((d) => buildLabelText(d));
+                labels
+                    .transition()
+                    .duration(animationDuration)
+                    .delay((d, i) => i * 50 + 200)
+                    .style('opacity', 1);
+            }
         }
         // Determine when all segment animations are complete (handle empty case)
         if (numSegments === 0) {
@@ -586,30 +561,7 @@ class AXDonutChartComponent {
     /**
      * Gets the appropriate D3 easing function based on the option string
      */
-    getEasingFunction(easing) {
-        switch (easing) {
-            case 'linear':
-                return this.d3.easeLinear;
-            case 'ease':
-                return this.d3.easePolyInOut;
-            case 'ease-in':
-                return this.d3.easePolyIn;
-            case 'ease-out':
-                return this.d3.easePolyOut;
-            case 'ease-in-out':
-                return this.d3.easePolyInOut;
-            case 'cubic':
-                return this.d3.easeCubic;
-            case 'cubic-in':
-                return this.d3.easeCubicIn;
-            case 'cubic-out':
-                return this.d3.easeCubicOut;
-            case 'cubic-in-out':
-                return this.d3.easeCubicInOut;
-            default:
-                return this.d3.easeCubicOut; // Default easing
-        }
-    }
+    // getEasingFunction moved to shared chart utils
     /**
      * Handle hover effects on a segment
      */
@@ -652,28 +604,14 @@ class AXDonutChartComponent {
      * Ensures the tooltip is visible by adjusting position when near edges
      */
     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();
-        const cursorX = event.clientX - container.left;
-        const cursorY = event.clientY - container.top;
-        const gap = 20; // Gap between cursor and tooltip
-        // Position tooltip to the right by default
-        let x = cursorX + gap / 3;
-        // If tooltip would go off the right edge, position it to the left
-        if (x + tooltipRect.width > container.width) {
-            x = cursorX - tooltipRect.width - gap;
-        }
-        // Keep tooltip within container bounds
-        x = Math.max(gap, Math.min(x, container.width - tooltipRect.width - gap));
-        const y = Math.max(gap, Math.min(cursorY, container.height - tooltipRect.height - gap));
-        this._tooltipPosition.set({ x, y });
+        const containerRect = containerEl.getBoundingClientRect();
+        const tooltipEl = containerEl.querySelector('.chart-tooltip');
+        const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
+        const pos = computeTooltipPosition(containerRect, tooltipRect, event.clientX, event.clientY, this.TOOLTIP_GAP);
+        this._tooltipPosition.set(pos);
     }
     /**
      * Adds center display with total value
@@ -730,6 +668,22 @@ class AXDonutChartComponent {
         this._tooltipVisible.set(false);
         this._currentlyHighlightedSegment.set(null);
     }
+    // ===== Helper utilities for modularity and maintainability =====
+    renderMessage(container, iconClass, messageText, helpText, specificClass) {
+        // Clear container area first (preserve tooltip component)
+        this.d3.select(container).selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
+        const messageContainer = this.d3
+            .select(container)
+            .append('div')
+            .attr('class', `ax-chart-message-container ax-donut-chart-message-background ${specificClass}`);
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-chart-message-icon ax-donut-chart-no-data-icon')
+            .html(`<i class="${iconClass} fa-2x"></i>`);
+        messageContainer.append('div').attr('class', 'ax-chart-message-text ax-donut-chart-no-data-text').text(messageText);
+        messageContainer.append('div').attr('class', 'ax-chart-message-help ax-donut-chart-no-data-help').text(helpText);
+    }
+    // computeTooltipPosition moved to shared chart utils
     /**
      * Gets an accessibility label describing the donut chart for screen readers
      */
@@ -766,11 +720,11 @@ class AXDonutChartComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: AXDonutChartComponent, isStandalone: true, selector: "ax-donut-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: { segmentClick: "segmentClick", segmentHover: "segmentHover" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\" tabindex=\"0\">\n  <!-- 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: ["ax-donut-chart{display:block;width:100%;height:100%;--ax-comp-donut-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-dark);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-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-donut-chart-data-labels-color));background-color:rgb(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.8", type: AXDonutChartComponent, isStandalone: true, selector: "ax-donut-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: { segmentClick: "segmentClick", segmentHover: "segmentHover" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\" tabindex=\"0\">\n  <!-- 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: ["ax-donut-chart{display:block;width:100%;height:100%;--ax-comp-donut-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;background-color:rgb(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-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.8", ngImport: i0, type: AXDonutChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\" tabindex=\"0\">\n  <!-- 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: ["ax-donut-chart{display:block;width:100%;height:100%;--ax-comp-donut-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-dark);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-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-donut-chart-data-labels-color));background-color:rgb(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
+            args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\" tabindex=\"0\">\n  <!-- 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: ["ax-donut-chart{display:block;width:100%;height:100%;--ax-comp-donut-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;background-color:rgb(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
         }], ctorParameters: () => [] });
 
 /**