@acorex/charts 21.0.1-next.7 → 21.0.1-next.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-charts-bar-chart.mjs +37 -23
- package/fesm2022/acorex-charts-bar-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-legend.mjs +3 -3
- package/fesm2022/acorex-charts-chart-legend.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-tooltip.mjs +13 -4
- package/fesm2022/acorex-charts-chart-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-charts-donut-chart.mjs +83 -99
- package/fesm2022/acorex-charts-donut-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-funnel-chart.mjs +275 -0
- package/fesm2022/acorex-charts-funnel-chart.mjs.map +1 -0
- package/fesm2022/acorex-charts-gauge-chart.mjs +157 -86
- package/fesm2022/acorex-charts-gauge-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-heatmap-chart.mjs +281 -0
- package/fesm2022/acorex-charts-heatmap-chart.mjs.map +1 -0
- package/fesm2022/acorex-charts-hierarchy-chart.mjs +3 -3
- package/fesm2022/acorex-charts-hierarchy-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-line-chart.mjs +37 -23
- package/fesm2022/acorex-charts-line-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts.mjs +3 -3
- package/fesm2022/acorex-charts.mjs.map +1 -1
- package/funnel-chart/README.md +3 -0
- package/heatmap-chart/README.md +3 -0
- package/package.json +19 -13
- package/{bar-chart/index.d.ts → types/acorex-charts-bar-chart.d.ts} +7 -6
- package/{chart-tooltip/index.d.ts → types/acorex-charts-chart-tooltip.d.ts} +1 -0
- package/{donut-chart/index.d.ts → types/acorex-charts-donut-chart.d.ts} +12 -11
- package/types/acorex-charts-funnel-chart.d.ts +108 -0
- package/{gauge-chart/index.d.ts → types/acorex-charts-gauge-chart.d.ts} +16 -5
- package/types/acorex-charts-heatmap-chart.d.ts +111 -0
- package/{hierarchy-chart/index.d.ts → types/acorex-charts-hierarchy-chart.d.ts} +4 -3
- package/{line-chart/index.d.ts → types/acorex-charts-line-chart.d.ts} +5 -1
- /package/{chart-legend/index.d.ts → types/acorex-charts-chart-legend.d.ts} +0 -0
- /package/{index.d.ts → types/acorex-charts.d.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-charts-chart-legend.mjs","sources":["../../../../packages/charts/chart-legend/src/lib/chart-legend.component.ts","../../../../packages/charts/chart-legend/src/lib/chart-legend.component.html","../../../../packages/charts/chart-legend/src/acorex-charts-chart-legend.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n ViewEncapsulation,\n computed,\n input,\n output,\n viewChild,\n} from '@angular/core';\nimport { AXChartLegendCompatible, AXChartLegendItem, AXChartLegendOptions } from './chart-legend.type';\n\n@Component({\n selector: 'ax-chart-legend',\n templateUrl: './chart-legend.component.html',\n styleUrls: ['./chart-legend.component.scss'],\n standalone: true,\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXChartLegendComponent {\n /**\n * Chart component instance\n * Must implement AXChartLegendCompatible interface\n */\n chart = input.required<AXChartLegendCompatible>();\n\n /**\n * Configuration options for the legend\n */\n options = input<AXChartLegendOptions>({});\n\n /**\n * Event emitted when a legend item is clicked\n * Returns the item that was clicked\n */\n itemClick = output<AXChartLegendItem>();\n\n /**\n * Event emitted when the mouse enters a legend item\n */\n itemMouseEnter = output<AXChartLegendItem>();\n\n /**\n * Event emitted when the mouse leaves a legend item\n */\n itemMouseLeave = output<AXChartLegendItem>();\n\n /**\n * Reference to legend container for measuring dimensions\n */\n legendContainer = viewChild<ElementRef<HTMLDivElement>>('legendContainer');\n\n // Computed values for the template\n protected showValues = computed(() => this.options()?.showValues !== false);\n protected showPercentage = computed(() => this.options()?.showPercentage !== false);\n protected containerClass = computed(() => {\n const opts = this.options();\n const className = opts?.className || '';\n const mode = opts?.mode || 'vertical';\n return {\n 'ax-chart-legend': true,\n [className]: !!className,\n [`ax-legend-${mode}`]: true,\n };\n });\n\n // Track if the legend is interactive\n protected isInteractive = computed(() => this.options()?.interactive !== false);\n\n // Compute the items to display from the chart\n protected displayItems = computed(() => {\n return this.chart().getLegendItems();\n });\n\n /**\n * Handle clicks on legend items\n */\n protected onItemClick(item: AXChartLegendItem): void {\n const chartInstance = this.chart();\n\n // If we have a chart and it's interactive, toggle the segment\n if (this.isInteractive()) {\n const isVisible = chartInstance.toggleSegment(item.id);\n // Update the item's hidden state to reflect the current state\n item.hidden = !isVisible;\n }\n\n // Always emit the item click event\n this.itemClick.emit(item);\n }\n\n /**\n * Handle mouse enter on legend items\n */\n protected onItemMouseEnter(item: AXChartLegendItem): void {\n this.chart().highlightSegment(null);\n this.itemMouseEnter.emit(item);\n this.chart().highlightSegment(item.id);\n }\n\n /**\n * Handle mouse leave on legend items\n */\n protected onItemMouseLeave(item: AXChartLegendItem): void {\n this.itemMouseLeave.emit(item);\n this.chart().highlightSegment(null);\n }\n\n /**\n * Get legend container dimensions\n */\n getDimensions(): { width: number; height: number } {\n if (!this.legendContainer()?.nativeElement) {\n return { width: 0, height: 0 };\n }\n\n return {\n width: this.legendContainer().nativeElement.offsetWidth,\n height: this.legendContainer().nativeElement.offsetHeight,\n };\n }\n}\n","<div #legendContainer [ngClass]=\"containerClass()\">\n @for (item of displayItems(); track item.id) {\n <div class=\"ax-legend-item\" [class.ax-legend-item-hidden]=\"item.hidden\" (click)=\"onItemClick(item)\"\n (mouseenter)=\"onItemMouseEnter(item)\" (mouseleave)=\"onItemMouseLeave(item)\">\n <span class=\"ax-legend-color\" [style.background-color]=\"item.color\"></span>\n <span class=\"ax-legend-name\">{{ item.name }}</span>\n @if (showValues()) {\n <span class=\"ax-legend-value\">{{ item.value | number: '1.0-2' }}</span>\n }\n @if (showPercentage()) {\n <span class=\"ax-legend-percentage\">{{ item.percentage | number: '1.0-2' }}%</span>\n }\n </div>\n }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAsBa,sBAAsB,CAAA;AACjC;;;AAGG;AACH,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAA2B;AAEjD;;AAEG;AACH,IAAA,OAAO,GAAG,KAAK,CAAuB,EAAE,mDAAC;AAEzC;;;AAGG;IACH,SAAS,GAAG,MAAM,EAAqB;AAEvC;;AAEG;IACH,cAAc,GAAG,MAAM,EAAqB;AAE5C;;AAEG;IACH,cAAc,GAAG,MAAM,EAAqB;AAE5C;;AAEG;AACH,IAAA,eAAe,GAAG,SAAS,CAA6B,iBAAiB,2DAAC;;AAGhE,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,UAAU,KAAK,KAAK,sDAAC;AACjE,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,cAAc,KAAK,KAAK,0DAAC;AACzE,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AACvC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC3B,QAAA,MAAM,SAAS,GAAG,IAAI,EAAE,SAAS,IAAI,EAAE;AACvC,QAAA,MAAM,IAAI,GAAG,IAAI,EAAE,IAAI,IAAI,UAAU;QACrC,OAAO;AACL,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS;AACxB,YAAA,CAAC,CAAA,UAAA,EAAa,IAAI,CAAA,CAAE,GAAG,IAAI;SAC5B;AACH,IAAA,CAAC,0DAAC;;AAGQ,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,WAAW,KAAK,KAAK,yDAAC;;AAGrE,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AACrC,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,cAAc,EAAE;AACtC,IAAA,CAAC,wDAAC;AAEF;;AAEG;AACO,IAAA,WAAW,CAAC,IAAuB,EAAA;AAC3C,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE;;AAGlC,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;YACxB,MAAM,SAAS,GAAG,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC;;AAEtD,YAAA,IAAI,CAAC,MAAM,GAAG,CAAC,SAAS;QAC1B;;AAGA,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3B;AAEA;;AAEG;AACO,IAAA,gBAAgB,CAAC,IAAuB,EAAA;QAChD,IAAI,CAAC,KAAK,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,KAAK,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC;IACxC;AAEA;;AAEG;AACO,IAAA,gBAAgB,CAAC,IAAuB,EAAA;AAChD,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,IAAI,CAAC,KAAK,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACrC;AAEA;;AAEG;IACH,aAAa,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,aAAa,EAAE;YAC1C,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QAChC;QAEA,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,aAAa,CAAC,WAAW;YACvD,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,aAAa,CAAC,YAAY;SAC1D;IACH;
|
|
1
|
+
{"version":3,"file":"acorex-charts-chart-legend.mjs","sources":["../../../../packages/charts/chart-legend/src/lib/chart-legend.component.ts","../../../../packages/charts/chart-legend/src/lib/chart-legend.component.html","../../../../packages/charts/chart-legend/src/acorex-charts-chart-legend.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n ViewEncapsulation,\n computed,\n input,\n output,\n viewChild,\n} from '@angular/core';\nimport { AXChartLegendCompatible, AXChartLegendItem, AXChartLegendOptions } from './chart-legend.type';\n\n@Component({\n selector: 'ax-chart-legend',\n templateUrl: './chart-legend.component.html',\n styleUrls: ['./chart-legend.component.scss'],\n standalone: true,\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n})\nexport class AXChartLegendComponent {\n /**\n * Chart component instance\n * Must implement AXChartLegendCompatible interface\n */\n chart = input.required<AXChartLegendCompatible>();\n\n /**\n * Configuration options for the legend\n */\n options = input<AXChartLegendOptions>({});\n\n /**\n * Event emitted when a legend item is clicked\n * Returns the item that was clicked\n */\n itemClick = output<AXChartLegendItem>();\n\n /**\n * Event emitted when the mouse enters a legend item\n */\n itemMouseEnter = output<AXChartLegendItem>();\n\n /**\n * Event emitted when the mouse leaves a legend item\n */\n itemMouseLeave = output<AXChartLegendItem>();\n\n /**\n * Reference to legend container for measuring dimensions\n */\n legendContainer = viewChild<ElementRef<HTMLDivElement>>('legendContainer');\n\n // Computed values for the template\n protected showValues = computed(() => this.options()?.showValues !== false);\n protected showPercentage = computed(() => this.options()?.showPercentage !== false);\n protected containerClass = computed(() => {\n const opts = this.options();\n const className = opts?.className || '';\n const mode = opts?.mode || 'vertical';\n return {\n 'ax-chart-legend': true,\n [className]: !!className,\n [`ax-legend-${mode}`]: true,\n };\n });\n\n // Track if the legend is interactive\n protected isInteractive = computed(() => this.options()?.interactive !== false);\n\n // Compute the items to display from the chart\n protected displayItems = computed(() => {\n return this.chart().getLegendItems();\n });\n\n /**\n * Handle clicks on legend items\n */\n protected onItemClick(item: AXChartLegendItem): void {\n const chartInstance = this.chart();\n\n // If we have a chart and it's interactive, toggle the segment\n if (this.isInteractive()) {\n const isVisible = chartInstance.toggleSegment(item.id);\n // Update the item's hidden state to reflect the current state\n item.hidden = !isVisible;\n }\n\n // Always emit the item click event\n this.itemClick.emit(item);\n }\n\n /**\n * Handle mouse enter on legend items\n */\n protected onItemMouseEnter(item: AXChartLegendItem): void {\n this.chart().highlightSegment(null);\n this.itemMouseEnter.emit(item);\n this.chart().highlightSegment(item.id);\n }\n\n /**\n * Handle mouse leave on legend items\n */\n protected onItemMouseLeave(item: AXChartLegendItem): void {\n this.itemMouseLeave.emit(item);\n this.chart().highlightSegment(null);\n }\n\n /**\n * Get legend container dimensions\n */\n getDimensions(): { width: number; height: number } {\n if (!this.legendContainer()?.nativeElement) {\n return { width: 0, height: 0 };\n }\n\n return {\n width: this.legendContainer().nativeElement.offsetWidth,\n height: this.legendContainer().nativeElement.offsetHeight,\n };\n }\n}\n","<div #legendContainer [ngClass]=\"containerClass()\">\n @for (item of displayItems(); track item.id) {\n <div class=\"ax-legend-item\" [class.ax-legend-item-hidden]=\"item.hidden\" (click)=\"onItemClick(item)\"\n (mouseenter)=\"onItemMouseEnter(item)\" (mouseleave)=\"onItemMouseLeave(item)\">\n <span class=\"ax-legend-color\" [style.background-color]=\"item.color\"></span>\n <span class=\"ax-legend-name\">{{ item.name }}</span>\n @if (showValues()) {\n <span class=\"ax-legend-value\">{{ item.value | number: '1.0-2' }}</span>\n }\n @if (showPercentage()) {\n <span class=\"ax-legend-percentage\">{{ item.percentage | number: '1.0-2' }}%</span>\n }\n </div>\n }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -57,6 +57,15 @@ class AXChartTooltipComponent {
|
|
|
57
57
|
}
|
|
58
58
|
return typeof c === 'string' ? c : null;
|
|
59
59
|
}
|
|
60
|
+
formattedValue() {
|
|
61
|
+
const v = this.data()?.value;
|
|
62
|
+
if (v == null)
|
|
63
|
+
return '';
|
|
64
|
+
if (typeof v === 'number')
|
|
65
|
+
return v.toLocaleString();
|
|
66
|
+
const num = Number(v);
|
|
67
|
+
return isNaN(num) ? v : num.toLocaleString();
|
|
68
|
+
}
|
|
60
69
|
/**
|
|
61
70
|
* Updates tooltip dimensions after it's rendered
|
|
62
71
|
*/
|
|
@@ -83,12 +92,12 @@ class AXChartTooltipComponent {
|
|
|
83
92
|
height: this.tooltipHeight,
|
|
84
93
|
};
|
|
85
94
|
}
|
|
86
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
87
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
95
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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\"\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\">\n <div class=\"chart-tooltip-body\">\n @if (!isTitleArray()) {\n <div class=\"chart-tooltip-title-row\">\n @if (singleColor()) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n }\n <div class=\"chart-tooltip-title\">\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\">\n @if (colorAt(i)) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n }\n <div class=\"chart-tooltip-title\">\n {{ t }}\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"chart-tooltip-value-row\">\n <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n @if (showPercentage() && data()!.percentage) {\n <div class=\"chart-tooltip-percentage\">\n {{ data()!.percentage }}\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [".chart-tooltip{pointer-events:none;position:absolute;z-index:10;max-width:250px;transform:translateY(-50%) translate(10px);border-radius:6px;border:1px solid rgba(255,255,255,.1);padding:8px 12px;font-size:.8rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .15s ease-in-out}.chart-tooltip-content{display:flex;align-items:center;justify-content:space-between;gap:8px}.chart-tooltip-body{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-title-row{display:flex;align-items:center;gap:6px;padding-bottom:8px}.chart-tooltip-title-list .chart-tooltip-title-row{padding-bottom:4px}.chart-tooltip-color{height:10px;width:10px;flex-shrink:0;border-radius:2px}.chart-tooltip-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.2}.chart-tooltip-value-row{display:flex;align-items:center;gap:8px}.chart-tooltip-value{flex-grow:1;font-weight:500}.chart-tooltip-percentage{flex-shrink:0;border-radius:9999px;background-color:#fff3;padding:2px 6px;font-size:.7rem;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
88
97
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXChartTooltipComponent, decorators: [{
|
|
90
99
|
type: Component,
|
|
91
|
-
args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data()) {\n <div\n #tooltipContainer\n class=\"chart-tooltip\"\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\">\n <div class=\"chart-tooltip-body\">\n @if (!isTitleArray()) {\n <div class=\"chart-tooltip-title-row\">\n @if (singleColor()) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n }\n <div class=\"chart-tooltip-title\">\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\">\n @if (colorAt(i)) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n }\n <div class=\"chart-tooltip-title\">\n {{ t }}\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"chart-tooltip-value-row\">\n <div class=\"chart-tooltip-value\">{{
|
|
100
|
+
args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible() && data()) {\n <div\n #tooltipContainer\n class=\"chart-tooltip\"\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\">\n <div class=\"chart-tooltip-body\">\n @if (!isTitleArray()) {\n <div class=\"chart-tooltip-title-row\">\n @if (singleColor()) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n }\n <div class=\"chart-tooltip-title\">\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\">\n @if (colorAt(i)) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n }\n <div class=\"chart-tooltip-title\">\n {{ t }}\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"chart-tooltip-value-row\">\n <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n @if (showPercentage() && data()!.percentage) {\n <div class=\"chart-tooltip-percentage\">\n {{ data()!.percentage }}\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n}\n", styles: [".chart-tooltip{pointer-events:none;position:absolute;z-index:10;max-width:250px;transform:translateY(-50%) translate(10px);border-radius:6px;border:1px solid rgba(255,255,255,.1);padding:8px 12px;font-size:.8rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:all .15s ease-in-out}.chart-tooltip-content{display:flex;align-items:center;justify-content:space-between;gap:8px}.chart-tooltip-body{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-title-row{display:flex;align-items:center;gap:6px;padding-bottom:8px}.chart-tooltip-title-list .chart-tooltip-title-row{padding-bottom:4px}.chart-tooltip-color{height:10px;width:10px;flex-shrink:0;border-radius:2px}.chart-tooltip-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;line-height:1.2}.chart-tooltip-value-row{display:flex;align-items:center;gap:8px}.chart-tooltip-value{flex-grow:1;font-weight:500}.chart-tooltip-percentage{flex-shrink:0;border-radius:9999px;background-color:#fff3;padding:2px 6px;font-size:.7rem;font-weight:500}\n"] }]
|
|
92
101
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], tooltipContainer: [{ type: i0.ViewChild, args: ['tooltipContainer', { isSignal: true }] }] } });
|
|
93
102
|
|
|
94
103
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-charts-chart-tooltip.mjs","sources":["../../../../packages/charts/chart-tooltip/src/lib/chart-tooltip.component.ts","../../../../packages/charts/chart-tooltip/src/lib/chart-tooltip.component.html","../../../../packages/charts/chart-tooltip/src/acorex-charts-chart-tooltip.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n NgZone,\n afterNextRender,\n inject,\n input,\n viewChild,\n} from '@angular/core';\nimport { AXChartTooltipData } from './chart-tooltip.type';\n\n@Component({\n selector: 'ax-chart-tooltip',\n templateUrl: './chart-tooltip.component.html',\n styleUrls: ['./chart-tooltip.component.scss'],\n standalone: true,\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXChartTooltipComponent {\n private ngZone = inject(NgZone);\n\n data = input<AXChartTooltipData | null>(null);\n position = input<{ x: number; y: number }>({ x: 0, y: 0 });\n visible = input<boolean>(false);\n\n /**\n * Whether to show the tooltip's percentage badge\n */\n showPercentage = input<boolean>(true);\n\n /**\n * Optional custom styling for the tooltip\n */\n style = input<{ [key: string]: string }>({});\n\n /**\n * Reference to tooltip container for measuring dimensions\n */\n tooltipContainer = viewChild<ElementRef<HTMLDivElement>>('tooltipContainer');\n\n // Tooltip dimensions\n protected tooltipWidth = 0;\n protected tooltipHeight = 0;\n\n constructor() {\n afterNextRender(() => {\n // Update tooltip dimensions when visible changes\n this.updateTooltipDimensions();\n });\n }\n\n // Helpers to support color as string | string[]\n protected isColorArray(): boolean {\n const color = this.data()?.color as unknown;\n return Array.isArray(color);\n }\n\n protected colorList(): string[] {\n const color = this.data()?.color as unknown;\n return Array.isArray(color) ? (color as string[]) : [];\n }\n\n protected singleColor(): string | null {\n const color = this.data()?.color as unknown;\n return typeof color === 'string' ? (color as string) : null;\n }\n\n protected isTitleArray(): boolean {\n const t = this.data()?.title as unknown;\n return Array.isArray(t);\n }\n\n protected titleList(): string[] {\n const t = this.data()?.title as unknown;\n return Array.isArray(t) ? (t as string[]) : [];\n }\n\n protected colorAt(index: number): string | null {\n const c = this.data()?.color as unknown;\n if (Array.isArray(c)) {\n return (c as string[])[index] ?? null;\n }\n return typeof c === 'string' ? (c as string) : null;\n }\n\n /**\n * Updates tooltip dimensions after it's rendered\n */\n protected updateTooltipDimensions(): void {\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 /**\n * Get adjusted tooltip position\n * Exposes properties for parent components to query tooltip dimensions\n */\n getDimensions(): { width: number; height: number } {\n return {\n width: this.tooltipWidth,\n height: this.tooltipHeight,\n };\n }\n}\n","@if (visible() && data()) {\n <div\n #tooltipContainer\n class=\"chart-tooltip\"\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\">\n <div class=\"chart-tooltip-body\">\n @if (!isTitleArray()) {\n <div class=\"chart-tooltip-title-row\">\n @if (singleColor()) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n }\n <div class=\"chart-tooltip-title\">\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\">\n @if (colorAt(i)) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n }\n <div class=\"chart-tooltip-title\">\n {{ t }}\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"chart-tooltip-value-row\">\n <div class=\"chart-tooltip-value\">{{
|
|
1
|
+
{"version":3,"file":"acorex-charts-chart-tooltip.mjs","sources":["../../../../packages/charts/chart-tooltip/src/lib/chart-tooltip.component.ts","../../../../packages/charts/chart-tooltip/src/lib/chart-tooltip.component.html","../../../../packages/charts/chart-tooltip/src/acorex-charts-chart-tooltip.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n NgZone,\n afterNextRender,\n inject,\n input,\n viewChild,\n} from '@angular/core';\nimport { AXChartTooltipData } from './chart-tooltip.type';\n\n@Component({\n selector: 'ax-chart-tooltip',\n templateUrl: './chart-tooltip.component.html',\n styleUrls: ['./chart-tooltip.component.scss'],\n standalone: true,\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AXChartTooltipComponent {\n private ngZone = inject(NgZone);\n\n data = input<AXChartTooltipData | null>(null);\n position = input<{ x: number; y: number }>({ x: 0, y: 0 });\n visible = input<boolean>(false);\n\n /**\n * Whether to show the tooltip's percentage badge\n */\n showPercentage = input<boolean>(true);\n\n /**\n * Optional custom styling for the tooltip\n */\n style = input<{ [key: string]: string }>({});\n\n /**\n * Reference to tooltip container for measuring dimensions\n */\n tooltipContainer = viewChild<ElementRef<HTMLDivElement>>('tooltipContainer');\n\n // Tooltip dimensions\n protected tooltipWidth = 0;\n protected tooltipHeight = 0;\n\n constructor() {\n afterNextRender(() => {\n // Update tooltip dimensions when visible changes\n this.updateTooltipDimensions();\n });\n }\n\n // Helpers to support color as string | string[]\n protected isColorArray(): boolean {\n const color = this.data()?.color as unknown;\n return Array.isArray(color);\n }\n\n protected colorList(): string[] {\n const color = this.data()?.color as unknown;\n return Array.isArray(color) ? (color as string[]) : [];\n }\n\n protected singleColor(): string | null {\n const color = this.data()?.color as unknown;\n return typeof color === 'string' ? (color as string) : null;\n }\n\n protected isTitleArray(): boolean {\n const t = this.data()?.title as unknown;\n return Array.isArray(t);\n }\n\n protected titleList(): string[] {\n const t = this.data()?.title as unknown;\n return Array.isArray(t) ? (t as string[]) : [];\n }\n\n protected colorAt(index: number): string | null {\n const c = this.data()?.color as unknown;\n if (Array.isArray(c)) {\n return (c as string[])[index] ?? null;\n }\n return typeof c === 'string' ? (c as string) : null;\n }\n\n protected formattedValue(): string {\n const v = this.data()?.value;\n if (v == null) return '';\n if (typeof v === 'number') return v.toLocaleString();\n const num = Number(v);\n return isNaN(num) ? v : num.toLocaleString();\n }\n\n /**\n * Updates tooltip dimensions after it's rendered\n */\n protected updateTooltipDimensions(): void {\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 /**\n * Get adjusted tooltip position\n * Exposes properties for parent components to query tooltip dimensions\n */\n getDimensions(): { width: number; height: number } {\n return {\n width: this.tooltipWidth,\n height: this.tooltipHeight,\n };\n }\n}\n","@if (visible() && data()) {\n <div\n #tooltipContainer\n class=\"chart-tooltip\"\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\">\n <div class=\"chart-tooltip-body\">\n @if (!isTitleArray()) {\n <div class=\"chart-tooltip-title-row\">\n @if (singleColor()) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"singleColor()!\"></div>\n }\n <div class=\"chart-tooltip-title\">\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\">\n @if (colorAt(i)) {\n <div class=\"chart-tooltip-color\" [style.background-color]=\"colorAt(i)!\"></div>\n }\n <div class=\"chart-tooltip-title\">\n {{ t }}\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"chart-tooltip-value-row\">\n <div class=\"chart-tooltip-value\">{{ formattedValue() }}</div>\n @if (showPercentage() && data()!.percentage) {\n <div class=\"chart-tooltip-percentage\">\n {{ data()!.percentage }}\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -74,6 +74,8 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
74
74
|
percentage: '0%',
|
|
75
75
|
color: '',
|
|
76
76
|
}, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : []));
|
|
77
|
+
_tooltipRafId = null;
|
|
78
|
+
_pendingTooltipCoords = null;
|
|
77
79
|
// Public computed properties for the template
|
|
78
80
|
tooltipVisible = this._tooltipVisible.asReadonly();
|
|
79
81
|
tooltipPosition = this._tooltipPosition.asReadonly();
|
|
@@ -97,6 +99,7 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
97
99
|
LABEL_ANIMATION_DELAY = 200;
|
|
98
100
|
MIN_CHART_DIMENSION = 200;
|
|
99
101
|
MIN_CHART_FOR_LABELS = 260;
|
|
102
|
+
CHART_INSET = 12;
|
|
100
103
|
DIMMED_OPACITY = 0.5;
|
|
101
104
|
VISIBLE_OPACITY = 1;
|
|
102
105
|
// Messages with defaults
|
|
@@ -340,8 +343,14 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
340
343
|
setupDimensions(container, options) {
|
|
341
344
|
const containerWidth = container.clientWidth || 400;
|
|
342
345
|
const containerHeight = container.clientHeight || 400;
|
|
343
|
-
const
|
|
344
|
-
const
|
|
346
|
+
const desiredWidth = options?.width || containerWidth;
|
|
347
|
+
const desiredHeight = options?.height || containerHeight;
|
|
348
|
+
const boundedWidth = Math.max(this.MIN_CHART_DIMENSION, desiredWidth);
|
|
349
|
+
const boundedHeight = Math.max(this.MIN_CHART_DIMENSION, desiredHeight);
|
|
350
|
+
// Keep donut geometry square so side spacing stays visually balanced.
|
|
351
|
+
const chartSize = Math.max(this.MIN_CHART_DIMENSION, Math.min(boundedWidth, boundedHeight));
|
|
352
|
+
const width = chartSize;
|
|
353
|
+
const height = chartSize;
|
|
345
354
|
return { width, height };
|
|
346
355
|
}
|
|
347
356
|
/**
|
|
@@ -398,21 +407,22 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
398
407
|
.sort(null)
|
|
399
408
|
.padAngle(0.02);
|
|
400
409
|
// Calculate the radius of the donut chart
|
|
401
|
-
const
|
|
410
|
+
const maxRadius = Math.min(chartWidth, chartHeight) / 2;
|
|
411
|
+
const radius = Math.max(0, maxRadius - this.CHART_INSET);
|
|
402
412
|
// Calculate inner radius based on donutWidth percentage
|
|
403
413
|
const donutWidthPercent = this.effectiveOptions().donutWidth / 100;
|
|
404
414
|
const innerRadius = radius * (1 - donutWidthPercent);
|
|
405
|
-
|
|
415
|
+
const outerRadius = radius * 0.95;
|
|
416
|
+
const ringWidth = outerRadius - innerRadius;
|
|
406
417
|
const arc = this.d3
|
|
407
418
|
.arc()
|
|
408
419
|
.innerRadius(innerRadius)
|
|
409
|
-
.outerRadius(
|
|
420
|
+
.outerRadius(outerRadius)
|
|
410
421
|
.cornerRadius(this.effectiveOptions().cornerRadius);
|
|
411
|
-
// Create label arc generator for placing labels (middle of the donut ring)
|
|
412
422
|
const labelArc = this.d3
|
|
413
423
|
.arc()
|
|
414
|
-
.innerRadius(innerRadius +
|
|
415
|
-
.outerRadius(innerRadius +
|
|
424
|
+
.innerRadius(innerRadius + ringWidth / 2)
|
|
425
|
+
.outerRadius(innerRadius + ringWidth / 2);
|
|
416
426
|
// Get animation options
|
|
417
427
|
const animationDuration = this.effectiveOptions().animationDuration;
|
|
418
428
|
const animationEasing = getEasingFunction(this.d3, this.effectiveOptions().animationEasing);
|
|
@@ -477,7 +487,7 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
477
487
|
});
|
|
478
488
|
// Add data labels if enabled and chart size is sufficient
|
|
479
489
|
if (this.effectiveOptions().showDataLabels && this.isChartLargeEnoughForLabels(chartWidth, chartHeight)) {
|
|
480
|
-
this.addDataLabels(labelArc,
|
|
490
|
+
this.addDataLabels(labelArc, outerRadius, innerRadius, total, animationDuration);
|
|
481
491
|
}
|
|
482
492
|
// Determine when all segment animations are complete (handle empty case)
|
|
483
493
|
if (numSegments === 0) {
|
|
@@ -489,14 +499,11 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
489
499
|
return Math.min(width, height) >= this.MIN_CHART_FOR_LABELS;
|
|
490
500
|
}
|
|
491
501
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
492
|
-
addDataLabels(labelArc,
|
|
502
|
+
addDataLabels(labelArc, outerRadius, innerRadius, total, animationDuration) {
|
|
493
503
|
if (!this.svg)
|
|
494
504
|
return;
|
|
495
|
-
const labelRadius = innerRadius + (radius * 0.95 - innerRadius) / 2;
|
|
496
|
-
// Show labels for all segments with valid font size
|
|
497
505
|
const dataWithLabels = this.pieData.filter((d) => {
|
|
498
|
-
|
|
499
|
-
return fontSize > 0; // Only show if font size is valid
|
|
506
|
+
return this.calculateLabelFontSize(d, outerRadius, innerRadius, total) > 0;
|
|
500
507
|
});
|
|
501
508
|
const labels = this.svg
|
|
502
509
|
.selectAll('.ax-donut-chart-data-label')
|
|
@@ -513,9 +520,9 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
513
520
|
})
|
|
514
521
|
.attr('text-anchor', 'middle')
|
|
515
522
|
.attr('dominant-baseline', 'middle')
|
|
516
|
-
.style('font-size', (d) => `${this.calculateLabelFontSize(d,
|
|
523
|
+
.style('font-size', (d) => `${this.calculateLabelFontSize(d, outerRadius, innerRadius, total)}px`)
|
|
517
524
|
.style('font-weight', (d) => ((d.data.value / total) * 100 >= 15 ? '600' : '500'))
|
|
518
|
-
.text((d) => this.getTruncatedLabelText(d,
|
|
525
|
+
.text((d) => this.getTruncatedLabelText(d, outerRadius, innerRadius, total));
|
|
519
526
|
labels
|
|
520
527
|
.transition()
|
|
521
528
|
.duration(animationDuration)
|
|
@@ -523,38 +530,34 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
523
530
|
.style('opacity', this.VISIBLE_OPACITY);
|
|
524
531
|
}
|
|
525
532
|
/**
|
|
526
|
-
* Calculates
|
|
527
|
-
*
|
|
533
|
+
* Calculates font size for data labels using the donut ring's physical dimensions.
|
|
534
|
+
*
|
|
535
|
+
* Primary driver is the ring width (radial space), with chord length as an
|
|
536
|
+
* overflow guard and a gentle scale-down for smaller segments to create
|
|
537
|
+
* visual hierarchy.
|
|
528
538
|
*/
|
|
529
539
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
530
|
-
calculateLabelFontSize(d,
|
|
540
|
+
calculateLabelFontSize(d, outerRadius, innerRadius, total) {
|
|
531
541
|
const angle = d.endAngle - d.startAngle;
|
|
532
542
|
const segmentPercentage = (d.data.value / total) * 100;
|
|
533
|
-
|
|
534
|
-
if (segmentPercentage < 1)
|
|
543
|
+
if (segmentPercentage < 2)
|
|
535
544
|
return 0;
|
|
536
|
-
|
|
545
|
+
const ringWidth = outerRadius - innerRadius;
|
|
546
|
+
const labelRadius = innerRadius + ringWidth / 2;
|
|
537
547
|
const chordLength = 2 * labelRadius * Math.sin(angle / 2);
|
|
538
|
-
|
|
539
|
-
const
|
|
540
|
-
|
|
541
|
-
const MIN_CHORD_FOR_LABEL = 20; // Minimum space needed for any text
|
|
542
|
-
// Don't show labels if space is too small
|
|
543
|
-
if (chordLength < MIN_CHORD_FOR_LABEL)
|
|
548
|
+
const MIN_CHORD = 22;
|
|
549
|
+
const MIN_RING = 16;
|
|
550
|
+
if (chordLength < MIN_CHORD || ringWidth < MIN_RING)
|
|
544
551
|
return 0;
|
|
545
|
-
|
|
546
|
-
//
|
|
547
|
-
const
|
|
548
|
-
//
|
|
549
|
-
const
|
|
550
|
-
|
|
551
|
-
const
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
// Apply min/max constraints
|
|
555
|
-
const finalSize = Math.max(MIN_FONT_SIZE, Math.min(calculatedSize, MAX_FONT_SIZE));
|
|
556
|
-
// Round to .5 for crisp rendering
|
|
557
|
-
return Math.round(finalSize * 2) / 2;
|
|
552
|
+
const ringBasedSize = ringWidth * 0.48;
|
|
553
|
+
// Segments >= 20% get full size; smaller ones scale from 0.75 → 1.0
|
|
554
|
+
const segmentScale = Math.min(1, 0.75 + 0.25 * (segmentPercentage / 20));
|
|
555
|
+
// At least 2 characters ("X%") must fit horizontally
|
|
556
|
+
const maxByChord = chordLength / (2 * 0.65);
|
|
557
|
+
const fontSize = Math.min(ringBasedSize * segmentScale, maxByChord);
|
|
558
|
+
const MIN_FONT_SIZE = 11;
|
|
559
|
+
const MAX_FONT_SIZE = 20;
|
|
560
|
+
return Math.round(Math.max(MIN_FONT_SIZE, Math.min(fontSize, MAX_FONT_SIZE)) * 2) / 2;
|
|
558
561
|
}
|
|
559
562
|
formatPercentage(value) {
|
|
560
563
|
if (value < 1)
|
|
@@ -563,60 +566,34 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
563
566
|
return `${value.toFixed(1)}%`;
|
|
564
567
|
return `${Math.round(value)}%`;
|
|
565
568
|
}
|
|
566
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
567
|
-
buildLabelText(d, total) {
|
|
568
|
-
const percentage = (d.data.value / total) * 100;
|
|
569
|
-
if (percentage < 1)
|
|
570
|
-
return '';
|
|
571
|
-
const label = d.data.label || '';
|
|
572
|
-
const percentageText = this.formatPercentage(percentage);
|
|
573
|
-
return label ? `${label} (${percentageText})` : percentageText;
|
|
574
|
-
}
|
|
575
569
|
/**
|
|
576
|
-
*
|
|
577
|
-
*
|
|
578
|
-
* Calculates chord length (straight line) since text is rendered horizontally, not along the arc
|
|
570
|
+
* Returns the best-fit label text for a segment, progressively truncating
|
|
571
|
+
* from "Label (XX%)" → "Label" → "XX%" → truncated label → truncated percentage.
|
|
579
572
|
*/
|
|
580
573
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
581
|
-
getTruncatedLabelText(d,
|
|
582
|
-
const fontSize = this.calculateLabelFontSize(d,
|
|
583
|
-
// If font size is 0, segment is too small for labels
|
|
574
|
+
getTruncatedLabelText(d, outerRadius, innerRadius, total) {
|
|
575
|
+
const fontSize = this.calculateLabelFontSize(d, outerRadius, innerRadius, total);
|
|
584
576
|
if (fontSize === 0)
|
|
585
577
|
return '';
|
|
586
|
-
|
|
587
|
-
|
|
578
|
+
const ringWidth = outerRadius - innerRadius;
|
|
579
|
+
const labelRadius = innerRadius + ringWidth / 2;
|
|
588
580
|
const angle = d.endAngle - d.startAngle;
|
|
589
581
|
const chordLength = 2 * labelRadius * Math.sin(angle / 2);
|
|
590
|
-
|
|
591
|
-
// Smaller segments need larger safety margins (percentage-based)
|
|
592
|
-
const safetyMarginPercent = Math.max(0.15, Math.min(0.3, 1 / angle)); // 15-30% margin
|
|
593
|
-
const availableWidth = chordLength * (1 - safetyMarginPercent);
|
|
582
|
+
const availableWidth = chordLength * 0.8;
|
|
594
583
|
const percentage = (d.data.value / total) * 100;
|
|
595
|
-
if (percentage <
|
|
584
|
+
if (percentage < 2)
|
|
596
585
|
return '';
|
|
597
586
|
const label = d.data.label || '';
|
|
598
587
|
const percentageText = this.formatPercentage(percentage);
|
|
599
|
-
// Try different label formats in order of preference
|
|
600
588
|
const fullText = label ? `${label} (${percentageText})` : percentageText;
|
|
601
|
-
|
|
602
|
-
const percentageOnly = percentageText;
|
|
603
|
-
// 1. Try full text (label + percentage)
|
|
604
|
-
if (this.doesTextFit(fullText, fontSize, availableWidth)) {
|
|
589
|
+
if (this.doesTextFit(fullText, fontSize, availableWidth))
|
|
605
590
|
return fullText;
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
if (
|
|
609
|
-
return
|
|
610
|
-
|
|
611
|
-
// 3. Try percentage only
|
|
612
|
-
if (this.doesTextFit(percentageOnly, fontSize, availableWidth)) {
|
|
613
|
-
return percentageOnly;
|
|
614
|
-
}
|
|
615
|
-
// 4. Truncate the label with ellipsis
|
|
616
|
-
if (label) {
|
|
591
|
+
if (label && this.doesTextFit(label, fontSize, availableWidth))
|
|
592
|
+
return label;
|
|
593
|
+
if (this.doesTextFit(percentageText, fontSize, availableWidth))
|
|
594
|
+
return percentageText;
|
|
595
|
+
if (label)
|
|
617
596
|
return this.truncateTextToFit(label, fontSize, availableWidth);
|
|
618
|
-
}
|
|
619
|
-
// 5. Last resort: truncate percentage (very small segments)
|
|
620
597
|
return this.truncateTextToFit(percentageText, fontSize, availableWidth);
|
|
621
598
|
}
|
|
622
599
|
/**
|
|
@@ -693,25 +670,27 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
693
670
|
handleSegmentLeave() {
|
|
694
671
|
if (this._isInitialAnimating())
|
|
695
672
|
return;
|
|
696
|
-
// Hide tooltip
|
|
697
673
|
this._tooltipVisible.set(false);
|
|
698
|
-
this.cdr.detectChanges();
|
|
699
|
-
// Clear all highlights to ensure segments return to normal state
|
|
700
674
|
this.highlightSegment(null);
|
|
701
675
|
}
|
|
702
|
-
/**
|
|
703
|
-
* Updates tooltip position
|
|
704
|
-
* Ensures the tooltip is visible by adjusting position when near edges
|
|
705
|
-
*/
|
|
706
676
|
updateTooltipPosition(event) {
|
|
707
|
-
|
|
708
|
-
if (
|
|
677
|
+
this._pendingTooltipCoords = { x: event.clientX, y: event.clientY };
|
|
678
|
+
if (this._tooltipRafId != null)
|
|
709
679
|
return;
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
680
|
+
this._tooltipRafId = requestAnimationFrame(() => {
|
|
681
|
+
this._tooltipRafId = null;
|
|
682
|
+
const coords = this._pendingTooltipCoords;
|
|
683
|
+
if (!coords)
|
|
684
|
+
return;
|
|
685
|
+
const containerEl = this.chartContainerEl()?.nativeElement;
|
|
686
|
+
if (!containerEl)
|
|
687
|
+
return;
|
|
688
|
+
const containerRect = containerEl.getBoundingClientRect();
|
|
689
|
+
const tooltipEl = containerEl.querySelector('.chart-tooltip');
|
|
690
|
+
const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
|
|
691
|
+
const pos = computeTooltipPosition(containerRect, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
|
|
692
|
+
this._tooltipPosition.set(pos);
|
|
693
|
+
});
|
|
715
694
|
}
|
|
716
695
|
/**
|
|
717
696
|
* Adds center display with total value
|
|
@@ -759,6 +738,11 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
759
738
|
* Cleans up chart resources
|
|
760
739
|
*/
|
|
761
740
|
cleanupChart() {
|
|
741
|
+
if (this._tooltipRafId != null) {
|
|
742
|
+
cancelAnimationFrame(this._tooltipRafId);
|
|
743
|
+
this._tooltipRafId = null;
|
|
744
|
+
}
|
|
745
|
+
this._pendingTooltipCoords = null;
|
|
762
746
|
if (!this.svg)
|
|
763
747
|
return;
|
|
764
748
|
this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
|
|
@@ -817,12 +801,12 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
817
801
|
hidden: this.isSegmentHidden(item.id),
|
|
818
802
|
}));
|
|
819
803
|
}
|
|
820
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
821
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
804
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
805
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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 }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\">\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%;min-height:clamp(220px,38vw,360px);--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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));border:1px solid rgba(var(--ax-sys-color-surface));padding:1.5rem;border-radius:.5rem;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 });
|
|
822
806
|
}
|
|
823
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
807
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDonutChartComponent, decorators: [{
|
|
824
808
|
type: Component,
|
|
825
|
-
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()\">\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
|
|
809
|
+
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()\">\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%;min-height:clamp(220px,38vw,360px);--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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));border:1px solid rgba(var(--ax-sys-color-surface));padding:1.5rem;border-radius:.5rem;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"] }]
|
|
826
810
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], segmentClick: [{ type: i0.Output, args: ["segmentClick"] }], segmentHover: [{ type: i0.Output, args: ["segmentHover"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
|
|
827
811
|
|
|
828
812
|
/**
|