@acorex/charts 21.1.0-next.2 → 22.0.0-next.1
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 +73 -58
- package/fesm2022/acorex-charts-bar-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-legend.mjs +21 -13
- package/fesm2022/acorex-charts-chart-legend.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-tooltip.mjs +31 -21
- package/fesm2022/acorex-charts-chart-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-charts-donut-chart.mjs +57 -26
- package/fesm2022/acorex-charts-donut-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-funnel-chart.mjs +34 -16
- package/fesm2022/acorex-charts-funnel-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-gauge-chart.mjs +139 -23
- package/fesm2022/acorex-charts-gauge-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-heatmap-chart.mjs +34 -16
- package/fesm2022/acorex-charts-heatmap-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-hierarchy-chart.mjs +38 -21
- package/fesm2022/acorex-charts-hierarchy-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-line-chart.mjs +33 -33
- package/fesm2022/acorex-charts-line-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts.mjs +23 -30
- package/fesm2022/acorex-charts.mjs.map +1 -1
- package/package.json +1 -1
- package/types/acorex-charts-bar-chart.d.ts +1 -0
- package/types/acorex-charts-donut-chart.d.ts +1 -0
- package/types/acorex-charts-funnel-chart.d.ts +1 -0
- package/types/acorex-charts-gauge-chart.d.ts +24 -0
- package/types/acorex-charts-heatmap-chart.d.ts +1 -0
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { input, output, viewChild, computed, ViewEncapsulation,
|
|
4
|
+
import { input, output, viewChild, computed, ViewEncapsulation, Component } from '@angular/core';
|
|
5
5
|
|
|
6
6
|
class AXChartLegendComponent {
|
|
7
7
|
/**
|
|
8
8
|
* Chart component instance
|
|
9
9
|
* Must implement AXChartLegendCompatible interface
|
|
10
10
|
*/
|
|
11
|
-
chart = input.required(
|
|
11
|
+
chart = input.required(/* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []));
|
|
12
13
|
/**
|
|
13
14
|
* Configuration options for the legend
|
|
14
15
|
*/
|
|
15
|
-
options = input({},
|
|
16
|
+
options = input({}, /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
16
18
|
/**
|
|
17
19
|
* Event emitted when a legend item is clicked
|
|
18
20
|
* Returns the item that was clicked
|
|
@@ -29,10 +31,13 @@ class AXChartLegendComponent {
|
|
|
29
31
|
/**
|
|
30
32
|
* Reference to legend container for measuring dimensions
|
|
31
33
|
*/
|
|
32
|
-
legendContainer = viewChild('legendContainer',
|
|
34
|
+
legendContainer = viewChild('legendContainer', /* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [{ debugName: "legendContainer" }] : /* istanbul ignore next */ []));
|
|
33
36
|
// Computed values for the template
|
|
34
|
-
showValues = computed(() => this.options()?.showValues !== false,
|
|
35
|
-
|
|
37
|
+
showValues = computed(() => this.options()?.showValues !== false, /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
|
|
39
|
+
showPercentage = computed(() => this.options()?.showPercentage !== false, /* @ts-ignore */
|
|
40
|
+
...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
|
|
36
41
|
containerClass = computed(() => {
|
|
37
42
|
const opts = this.options();
|
|
38
43
|
const className = opts?.className || '';
|
|
@@ -42,13 +47,16 @@ class AXChartLegendComponent {
|
|
|
42
47
|
[className]: !!className,
|
|
43
48
|
[`ax-legend-${mode}`]: true,
|
|
44
49
|
};
|
|
45
|
-
},
|
|
50
|
+
}, /* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
|
|
46
52
|
// Track if the legend is interactive
|
|
47
|
-
isInteractive = computed(() => this.options()?.interactive !== false,
|
|
53
|
+
isInteractive = computed(() => this.options()?.interactive !== false, /* @ts-ignore */
|
|
54
|
+
...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
48
55
|
// Compute the items to display from the chart
|
|
49
56
|
displayItems = computed(() => {
|
|
50
57
|
return this.chart().getLegendItems();
|
|
51
|
-
},
|
|
58
|
+
}, /* @ts-ignore */
|
|
59
|
+
...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
|
|
52
60
|
/**
|
|
53
61
|
* Handle clicks on legend items
|
|
54
62
|
*/
|
|
@@ -90,12 +98,12 @@ class AXChartLegendComponent {
|
|
|
90
98
|
height: this.legendContainer().nativeElement.offsetHeight,
|
|
91
99
|
};
|
|
92
100
|
}
|
|
93
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
94
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
102
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXChartLegendComponent, isStandalone: true, selector: "ax-chart-legend", inputs: { chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", itemMouseLeave: "itemMouseLeave" }, viewQueries: [{ propertyName: "legendContainer", first: true, predicate: ["legendContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<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>", styles: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-chart-legend{@apply block h-full w-full;--ax-legend-bg: var(--ax-sys-color-lightest-surface, 255, 255, 255);--ax-legend-text: var(--ax-sys-color-on-lightest-surface, 51, 51, 51);--ax-legend-border: var(--ax-sys-color-border-surface, 0, 0, 0);--ax-legend-radius: .5rem;--ax-legend-padding: .75rem;--ax-legend-gap: .5rem;--ax-legend-item-height: 1.75rem}.ax-chart-legend{@apply flex w-full max-h-full flex-col overflow-y-auto;background-color:rgba(var(--ax-legend-bg));border-radius:var(--ax-legend-radius);border:1px solid rgba(var(--ax-legend-border));padding:var(--ax-legend-padding);gap:var(--ax-legend-gap)}.ax-chart-legend.ax-legend-horizontal{@apply flex-row flex-wrap items-center;}.ax-legend-item{@apply flex cursor-pointer items-baseline gap-2 whitespace-nowrap rounded px-2 py-1;height:var(--ax-legend-item-height);transition:all .15s ease;color:var(--ax-legend-text)}.ax-legend-item:hover{background-color:#0000000a}.ax-legend-item:active{transform:scale(.98)}.ax-legend-item.ax-legend-item-hidden{@apply opacity-75;}.ax-legend-item.ax-legend-item-hidden>.ax-legend-name{@apply line-through;}.ax-legend-item.ax-legend-item-hidden .ax-legend-color{@apply relative opacity-40;}.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{content:\"\";@apply absolute inset-0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.5),rgba(255,255,255,.5) 2px,transparent 2px,transparent 4px);border-radius:inherit}.ax-legend-color{@apply size-3 shrink-0 rounded-[3px];}.ax-legend-name{@apply text-sm font-medium;}.ax-legend-value{@apply ms-1 text-xs opacity-70;}.ax-legend-percentage{@apply ms-[.35rem] rounded-lg px-[.35rem] py-[.1rem] text-[.7rem] font-medium leading-none;background-color:#0000000d}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
|
|
95
103
|
}
|
|
96
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXChartLegendComponent, decorators: [{
|
|
97
105
|
type: Component,
|
|
98
|
-
args: [{ selector: 'ax-chart-legend', imports: [CommonModule],
|
|
106
|
+
args: [{ selector: 'ax-chart-legend', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<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>", styles: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-chart-legend{@apply block h-full w-full;--ax-legend-bg: var(--ax-sys-color-lightest-surface, 255, 255, 255);--ax-legend-text: var(--ax-sys-color-on-lightest-surface, 51, 51, 51);--ax-legend-border: var(--ax-sys-color-border-surface, 0, 0, 0);--ax-legend-radius: .5rem;--ax-legend-padding: .75rem;--ax-legend-gap: .5rem;--ax-legend-item-height: 1.75rem}.ax-chart-legend{@apply flex w-full max-h-full flex-col overflow-y-auto;background-color:rgba(var(--ax-legend-bg));border-radius:var(--ax-legend-radius);border:1px solid rgba(var(--ax-legend-border));padding:var(--ax-legend-padding);gap:var(--ax-legend-gap)}.ax-chart-legend.ax-legend-horizontal{@apply flex-row flex-wrap items-center;}.ax-legend-item{@apply flex cursor-pointer items-baseline gap-2 whitespace-nowrap rounded px-2 py-1;height:var(--ax-legend-item-height);transition:all .15s ease;color:var(--ax-legend-text)}.ax-legend-item:hover{background-color:#0000000a}.ax-legend-item:active{transform:scale(.98)}.ax-legend-item.ax-legend-item-hidden{@apply opacity-75;}.ax-legend-item.ax-legend-item-hidden>.ax-legend-name{@apply line-through;}.ax-legend-item.ax-legend-item-hidden .ax-legend-color{@apply relative opacity-40;}.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{content:\"\";@apply absolute inset-0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.5),rgba(255,255,255,.5) 2px,transparent 2px,transparent 4px);border-radius:inherit}.ax-legend-color{@apply size-3 shrink-0 rounded-[3px];}.ax-legend-name{@apply text-sm font-medium;}.ax-legend-value{@apply ms-1 text-xs opacity-70;}.ax-legend-percentage{@apply ms-[.35rem] rounded-lg px-[.35rem] py-[.1rem] text-[.7rem] font-medium leading-none;background-color:#0000000d}}\n"] }]
|
|
99
107
|
}], propDecorators: { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemMouseEnter: [{ type: i0.Output, args: ["itemMouseEnter"] }], itemMouseLeave: [{ type: i0.Output, args: ["itemMouseLeave"] }], legendContainer: [{ type: i0.ViewChild, args: ['legendContainer', { isSignal: true }] }] } });
|
|
100
108
|
|
|
101
109
|
/**
|
|
@@ -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 {
|
|
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 { Component, ElementRef, ViewEncapsulation, computed, input, output, viewChild } 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.css'],\n imports: [CommonModule],\n\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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"}
|
|
@@ -1,25 +1,31 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, NgZone, input, viewChild, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
4
|
+
import { inject, NgZone, input, viewChild, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
5
5
|
|
|
6
6
|
class AXChartTooltipComponent {
|
|
7
7
|
ngZone = inject(NgZone);
|
|
8
|
-
data = input(null,
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
data = input(null, /* @ts-ignore */
|
|
9
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
10
|
+
position = input({ x: 0, y: 0 }, /* @ts-ignore */
|
|
11
|
+
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
12
|
+
visible = input(false, /* @ts-ignore */
|
|
13
|
+
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
11
14
|
/**
|
|
12
15
|
* Whether to show the tooltip's percentage badge
|
|
13
16
|
*/
|
|
14
|
-
showPercentage = input(true,
|
|
17
|
+
showPercentage = input(true, /* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
|
|
15
19
|
/**
|
|
16
20
|
* Optional custom styling for the tooltip
|
|
17
21
|
*/
|
|
18
|
-
style = input({},
|
|
22
|
+
style = input({}, /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
|
|
19
24
|
/**
|
|
20
25
|
* Reference to tooltip container for measuring dimensions
|
|
21
26
|
*/
|
|
22
|
-
tooltipContainer = viewChild('tooltipContainer',
|
|
27
|
+
tooltipContainer = viewChild('tooltipContainer', /* @ts-ignore */
|
|
28
|
+
...(ngDevMode ? [{ debugName: "tooltipContainer" }] : /* istanbul ignore next */ []));
|
|
23
29
|
// Tooltip dimensions
|
|
24
30
|
tooltipWidth = 0;
|
|
25
31
|
tooltipHeight = 0;
|
|
@@ -70,17 +76,19 @@ class AXChartTooltipComponent {
|
|
|
70
76
|
* Updates tooltip dimensions after it's rendered
|
|
71
77
|
*/
|
|
72
78
|
updateTooltipDimensions() {
|
|
73
|
-
if (this.visible()
|
|
74
|
-
|
|
75
|
-
// Use requestAnimationFrame to ensure dimensions are calculated after render
|
|
76
|
-
requestAnimationFrame(() => {
|
|
77
|
-
if (this.tooltipContainer()?.nativeElement) {
|
|
78
|
-
this.tooltipWidth = this.tooltipContainer().nativeElement.offsetWidth;
|
|
79
|
-
this.tooltipHeight = this.tooltipContainer().nativeElement.offsetHeight;
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
});
|
|
79
|
+
if (!this.visible()) {
|
|
80
|
+
return;
|
|
83
81
|
}
|
|
82
|
+
this.ngZone.runOutsideAngular(() => {
|
|
83
|
+
requestAnimationFrame(() => {
|
|
84
|
+
const tooltipEl = this.tooltipContainer()?.nativeElement;
|
|
85
|
+
if (!tooltipEl) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
this.tooltipWidth = tooltipEl.offsetWidth;
|
|
89
|
+
this.tooltipHeight = tooltipEl.offsetHeight;
|
|
90
|
+
});
|
|
91
|
+
});
|
|
84
92
|
}
|
|
85
93
|
/**
|
|
86
94
|
* Get adjusted tooltip position
|
|
@@ -92,12 +100,14 @@ class AXChartTooltipComponent {
|
|
|
92
100
|
height: this.tooltipHeight,
|
|
93
101
|
};
|
|
94
102
|
}
|
|
95
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
96
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
103
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 } }, host: { classAttribute: "ax-chart-tooltip-host" }, 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 chart-tooltip-visible\"\n [style.background-color]=\"data()!.tooltipBgColor || null\"\n [style.color]=\"data()!.tooltipColor || null\"\n [style.left.px]=\"position().x\"\n [style.top.px]=\"position().y\"\n [ngStyle]=\"style()\"\n aria-hidden=\"false\"\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: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-chart-tooltip.ax-chart-tooltip-host{@apply pointer-events-none absolute top-0 left-0 z-10 size-0 overflow-visible;--ax-comp-chart-tooltip-bg-color: var(--ax-comp-tooltip-bg-color, var(--ax-sys-color-dark));--ax-comp-chart-tooltip-text-color: var(--ax-comp-tooltip-text-color, var(--ax-sys-color-light))}.chart-tooltip{@apply pointer-events-none invisible fixed z-[1000] w-max max-w-[250px] rounded-md border border-white/10 px-3 py-2 text-[.8rem] opacity-0 backdrop-blur-sm transition-opacity duration-150 ease-in;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;background-color:rgba(var(--ax-comp-chart-tooltip-bg-color));color:rgba(var(--ax-comp-chart-tooltip-text-color))}.chart-tooltip-visible{@apply visible opacity-100;}.chart-tooltip-content{@apply flex items-center justify-between gap-2;}.chart-tooltip-body{@apply flex flex-col overflow-hidden text-ellipsis;}.chart-tooltip-title-row{@apply flex items-center gap-1.5 pb-2;}.chart-tooltip-title-list .chart-tooltip-title-row{@apply pb-1;}.chart-tooltip-color{@apply size-2.5 shrink-0 rounded-[2px];}.chart-tooltip-title{@apply overflow-hidden leading-[1.2] font-semibold text-ellipsis whitespace-nowrap;}.chart-tooltip-value-row{@apply flex items-center gap-2 whitespace-nowrap;}.chart-tooltip-value{@apply grow font-medium;}.chart-tooltip-percentage{@apply shrink-0 rounded-full px-1.5 py-0.5 text-[.7rem] font-medium;background-color:#fff3}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
97
105
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXChartTooltipComponent, decorators: [{
|
|
99
107
|
type: Component,
|
|
100
|
-
args: [{ selector: 'ax-chart-tooltip', imports: [CommonModule],
|
|
108
|
+
args: [{ selector: 'ax-chart-tooltip', imports: [CommonModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
109
|
+
class: 'ax-chart-tooltip-host',
|
|
110
|
+
}, template: "@if (visible() && data()) {\n <div\n #tooltipContainer\n class=\"chart-tooltip chart-tooltip-visible\"\n [style.background-color]=\"data()!.tooltipBgColor || null\"\n [style.color]=\"data()!.tooltipColor || null\"\n [style.left.px]=\"position().x\"\n [style.top.px]=\"position().y\"\n [ngStyle]=\"style()\"\n aria-hidden=\"false\"\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: ["@reference \"../../../../styles/themes/default.css\";@layer components{ax-chart-tooltip.ax-chart-tooltip-host{@apply pointer-events-none absolute top-0 left-0 z-10 size-0 overflow-visible;--ax-comp-chart-tooltip-bg-color: var(--ax-comp-tooltip-bg-color, var(--ax-sys-color-dark));--ax-comp-chart-tooltip-text-color: var(--ax-comp-tooltip-text-color, var(--ax-sys-color-light))}.chart-tooltip{@apply pointer-events-none invisible fixed z-[1000] w-max max-w-[250px] rounded-md border border-white/10 px-3 py-2 text-[.8rem] opacity-0 backdrop-blur-sm transition-opacity duration-150 ease-in;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;background-color:rgba(var(--ax-comp-chart-tooltip-bg-color));color:rgba(var(--ax-comp-chart-tooltip-text-color))}.chart-tooltip-visible{@apply visible opacity-100;}.chart-tooltip-content{@apply flex items-center justify-between gap-2;}.chart-tooltip-body{@apply flex flex-col overflow-hidden text-ellipsis;}.chart-tooltip-title-row{@apply flex items-center gap-1.5 pb-2;}.chart-tooltip-title-list .chart-tooltip-title-row{@apply pb-1;}.chart-tooltip-color{@apply size-2.5 shrink-0 rounded-[2px];}.chart-tooltip-title{@apply overflow-hidden leading-[1.2] font-semibold text-ellipsis whitespace-nowrap;}.chart-tooltip-value-row{@apply flex items-center gap-2 whitespace-nowrap;}.chart-tooltip-value{@apply grow font-medium;}.chart-tooltip-percentage{@apply shrink-0 rounded-full px-1.5 py-0.5 text-[.7rem] font-medium;background-color:#fff3}}\n"] }]
|
|
101
111
|
}], 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 }] }] } });
|
|
102
112
|
|
|
103
113
|
/**
|
|
@@ -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.css'],\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()
|
|
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 ViewEncapsulation,\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.css'],\n imports: [CommonModule],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'ax-chart-tooltip-host',\n },\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()) {\n return;\n }\n\n this.ngZone.runOutsideAngular(() => {\n requestAnimationFrame(() => {\n const tooltipEl = this.tooltipContainer()?.nativeElement;\n if (!tooltipEl) {\n return;\n }\n\n this.tooltipWidth = tooltipEl.offsetWidth;\n this.tooltipHeight = tooltipEl.offsetHeight;\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 chart-tooltip-visible\"\n [style.background-color]=\"data()!.tooltipBgColor || null\"\n [style.color]=\"data()!.tooltipColor || null\"\n [style.left.px]=\"position().x\"\n [style.top.px]=\"position().y\"\n [ngStyle]=\"style()\"\n aria-hidden=\"false\"\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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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, AX_CHART_COLOR_PALETTE, mergeChartOptions, createChartInstanceId, mergeChartMessages, getChartColor, renderChartEmptyMessage, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
|
|
2
2
|
import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { InjectionToken, inject, ChangeDetectorRef, input, output, viewChild, signal, computed, afterNextRender, effect, untracked,
|
|
4
|
+
import { InjectionToken, inject, ChangeDetectorRef, input, output, viewChild, signal, computed, afterNextRender, effect, untracked, ViewEncapsulation, Component } from '@angular/core';
|
|
5
5
|
|
|
6
6
|
const AXDonutChartDefaultConfig = {
|
|
7
7
|
showTooltip: true,
|
|
@@ -39,9 +39,11 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
39
39
|
cdr = inject(ChangeDetectorRef);
|
|
40
40
|
// Inputs
|
|
41
41
|
/** Chart data input */
|
|
42
|
-
data = input([],
|
|
42
|
+
data = input([], /* @ts-ignore */
|
|
43
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
43
44
|
/** Chart options input */
|
|
44
|
-
options = input({},
|
|
45
|
+
options = input({}, /* @ts-ignore */
|
|
46
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
45
47
|
// Outputs
|
|
46
48
|
/** Emitted when a segment is clicked */
|
|
47
49
|
segmentClick = output();
|
|
@@ -50,7 +52,8 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
50
52
|
*/
|
|
51
53
|
segmentHover = output();
|
|
52
54
|
// Chart container reference
|
|
53
|
-
chartContainerEl = viewChild.required('chartContainer'
|
|
55
|
+
chartContainerEl = viewChild.required('chartContainer', /* @ts-ignore */
|
|
56
|
+
...(ngDevMode ? [{ debugName: "chartContainerEl" }] : /* istanbul ignore next */ []));
|
|
54
57
|
// D3 reference - loaded asynchronously
|
|
55
58
|
d3;
|
|
56
59
|
// Chart SVG reference (using 'any' since D3 is loaded dynamically at runtime)
|
|
@@ -60,19 +63,26 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
60
63
|
pieData = [];
|
|
61
64
|
// State management
|
|
62
65
|
hiddenSegments = new Set();
|
|
63
|
-
_initialized = signal(false,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
_initialized = signal(false, /* @ts-ignore */
|
|
67
|
+
...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
|
|
68
|
+
_rendered = signal(false, /* @ts-ignore */
|
|
69
|
+
...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
|
|
70
|
+
_isInitialAnimating = signal(false, /* @ts-ignore */
|
|
71
|
+
...(ngDevMode ? [{ debugName: "_isInitialAnimating" }] : /* istanbul ignore next */ []));
|
|
72
|
+
_currentlyHighlightedSegment = signal(null, /* @ts-ignore */
|
|
73
|
+
...(ngDevMode ? [{ debugName: "_currentlyHighlightedSegment" }] : /* istanbul ignore next */ []));
|
|
67
74
|
// Tooltip state
|
|
68
|
-
_tooltipVisible = signal(false,
|
|
69
|
-
|
|
75
|
+
_tooltipVisible = signal(false, /* @ts-ignore */
|
|
76
|
+
...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : /* istanbul ignore next */ []));
|
|
77
|
+
_tooltipPosition = signal({ x: 0, y: 0 }, /* @ts-ignore */
|
|
78
|
+
...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : /* istanbul ignore next */ []));
|
|
70
79
|
_tooltipData = signal({
|
|
71
80
|
title: '',
|
|
72
81
|
value: 0,
|
|
73
82
|
percentage: '0%',
|
|
74
83
|
color: '',
|
|
75
|
-
},
|
|
84
|
+
}, /* @ts-ignore */
|
|
85
|
+
...(ngDevMode ? [{ debugName: "_tooltipData" }] : /* istanbul ignore next */ []));
|
|
76
86
|
_tooltipRafId = null;
|
|
77
87
|
_pendingTooltipCoords = null;
|
|
78
88
|
// Public computed properties for the template
|
|
@@ -84,7 +94,8 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
84
94
|
// Inject the chart colors
|
|
85
95
|
chartColors = inject(AX_CHART_COLOR_PALETTE);
|
|
86
96
|
// Computed configuration options
|
|
87
|
-
effectiveOptions = computed(() => mergeChartOptions(this.configToken, this.options()),
|
|
97
|
+
effectiveOptions = computed(() => mergeChartOptions(this.configToken, this.options()), /* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
|
|
88
99
|
// Constants
|
|
89
100
|
TOOLTIP_GAP = 10;
|
|
90
101
|
HIGHLIGHT_TRANSITION_DURATION = 150;
|
|
@@ -101,11 +112,13 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
101
112
|
return `${this.instanceId}-segment-shadow`;
|
|
102
113
|
}
|
|
103
114
|
// Messages with defaults
|
|
104
|
-
effectiveMessages = computed(() => mergeChartMessages(this.configToken.messages, this.options()?.messages),
|
|
115
|
+
effectiveMessages = computed(() => mergeChartMessages(this.configToken.messages, this.options()?.messages), /* @ts-ignore */
|
|
116
|
+
...(ngDevMode ? [{ debugName: "effectiveMessages" }] : /* istanbul ignore next */ []));
|
|
105
117
|
// Data accessor for handling different incoming data formats
|
|
106
118
|
chartDataArray = computed(() => {
|
|
107
119
|
return this.data() || [];
|
|
108
|
-
},
|
|
120
|
+
}, /* @ts-ignore */
|
|
121
|
+
...(ngDevMode ? [{ debugName: "chartDataArray" }] : /* istanbul ignore next */ []));
|
|
109
122
|
// Color accessor method
|
|
110
123
|
getColor(index) {
|
|
111
124
|
return getChartColor(index, this.chartColors);
|
|
@@ -132,7 +145,8 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
132
145
|
this.updateChart();
|
|
133
146
|
}
|
|
134
147
|
});
|
|
135
|
-
},
|
|
148
|
+
}, /* @ts-ignore */
|
|
149
|
+
...(ngDevMode ? [{ debugName: "dataChangeEffect" }] : /* istanbul ignore next */ []));
|
|
136
150
|
/**
|
|
137
151
|
* Highlights a specific segment by ID
|
|
138
152
|
* @param id The segment ID to highlight, or null to clear highlight
|
|
@@ -301,7 +315,10 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
301
315
|
* Clears the chart container
|
|
302
316
|
*/
|
|
303
317
|
clearChart(container) {
|
|
304
|
-
this.d3
|
|
318
|
+
this.d3
|
|
319
|
+
.select(container)
|
|
320
|
+
.selectAll('svg, .ax-chart-empty, .ax-chart-message-container, .ax-donut-chart-no-data-message')
|
|
321
|
+
.remove();
|
|
305
322
|
this._tooltipVisible.set(false);
|
|
306
323
|
}
|
|
307
324
|
/**
|
|
@@ -652,8 +669,8 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
652
669
|
percentage: `${percentage}%`,
|
|
653
670
|
color,
|
|
654
671
|
});
|
|
655
|
-
this.updateTooltipPosition(event);
|
|
656
672
|
this._tooltipVisible.set(true);
|
|
673
|
+
this.updateTooltipPosition(event);
|
|
657
674
|
}
|
|
658
675
|
/**
|
|
659
676
|
* Handles mouse leave from segments
|
|
@@ -668,16 +685,27 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
668
685
|
this._pendingTooltipCoords = { x: event.clientX, y: event.clientY };
|
|
669
686
|
if (this._tooltipRafId != null)
|
|
670
687
|
return;
|
|
688
|
+
this.scheduleTooltipPosition(0);
|
|
689
|
+
}
|
|
690
|
+
scheduleTooltipPosition(attempt) {
|
|
671
691
|
this._tooltipRafId = requestAnimationFrame(() => {
|
|
672
|
-
this._tooltipRafId = null;
|
|
673
692
|
const coords = this._pendingTooltipCoords;
|
|
674
|
-
if (!coords)
|
|
693
|
+
if (!coords) {
|
|
694
|
+
this._tooltipRafId = null;
|
|
675
695
|
return;
|
|
696
|
+
}
|
|
676
697
|
const containerEl = this.chartContainerEl()?.nativeElement;
|
|
677
|
-
if (!containerEl)
|
|
698
|
+
if (!containerEl) {
|
|
699
|
+
this._tooltipRafId = null;
|
|
678
700
|
return;
|
|
679
|
-
|
|
701
|
+
}
|
|
680
702
|
const tooltipEl = containerEl.querySelector('.chart-tooltip');
|
|
703
|
+
if (!tooltipEl && this._tooltipVisible() && attempt < 3) {
|
|
704
|
+
this.scheduleTooltipPosition(attempt + 1);
|
|
705
|
+
return;
|
|
706
|
+
}
|
|
707
|
+
this._tooltipRafId = null;
|
|
708
|
+
const containerRect = containerEl.getBoundingClientRect();
|
|
681
709
|
const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
|
|
682
710
|
const pos = computeTooltipPosition(containerRect, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
|
|
683
711
|
this._tooltipPosition.set(pos);
|
|
@@ -736,7 +764,10 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
736
764
|
this._pendingTooltipCoords = null;
|
|
737
765
|
const container = this.chartContainerEl()?.nativeElement;
|
|
738
766
|
if (container) {
|
|
739
|
-
this.d3
|
|
767
|
+
this.d3
|
|
768
|
+
?.select(container)
|
|
769
|
+
.selectAll('svg, .ax-chart-empty, .ax-chart-message-container, .ax-donut-chart-no-data-message')
|
|
770
|
+
.remove();
|
|
740
771
|
}
|
|
741
772
|
this.svg = null;
|
|
742
773
|
this.pieData = [];
|
|
@@ -795,12 +826,12 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
795
826
|
return 0;
|
|
796
827
|
return (this.getSegmentLayoutValue(segmentValue) / layoutTotal) * 100;
|
|
797
828
|
}
|
|
798
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
829
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
830
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.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 }], 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: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-donut-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden rounded-lg;padding:clamp(.5rem,1.2vw,.875rem);background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{@apply block h-full max-h-full w-full max-w-full overflow-hidden;}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
800
831
|
}
|
|
801
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
832
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXDonutChartComponent, decorators: [{
|
|
802
833
|
type: Component,
|
|
803
|
-
args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent],
|
|
834
|
+
args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], 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: ["@reference \"../../../../styles/themes/default.css\";@import \"../../../src/lib/chart-empty-state.css\";@layer components{ax-donut-chart{@apply box-border block h-full w-full;min-height:clamp(220px,38vw,360px);--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{@apply relative box-border h-full min-h-0 w-full overflow-hidden rounded-lg;padding:clamp(.5rem,1.2vw,.875rem);background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{@apply block h-full max-h-full w-full max-w-full overflow-hidden;}ax-donut-chart .ax-donut-chart svg g:has(text){font-family:inherit}}\n"] }]
|
|
804
835
|
}], 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 }] }] } });
|
|
805
836
|
|
|
806
837
|
/**
|