@acorex/charts 21.0.2-next.4 → 21.0.2-next.40
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 +16 -16
- package/fesm2022/acorex-charts-bar-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-legend.mjs +11 -11
- package/fesm2022/acorex-charts-chart-legend.mjs.map +1 -1
- package/fesm2022/acorex-charts-chart-tooltip.mjs +10 -10
- package/fesm2022/acorex-charts-chart-tooltip.mjs.map +1 -1
- package/fesm2022/acorex-charts-donut-chart.mjs +21 -20
- package/fesm2022/acorex-charts-donut-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-funnel-chart.mjs +12 -12
- package/fesm2022/acorex-charts-funnel-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-gauge-chart.mjs +13 -13
- package/fesm2022/acorex-charts-gauge-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-heatmap-chart.mjs +32 -17
- package/fesm2022/acorex-charts-heatmap-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-hierarchy-chart.mjs +34 -27
- package/fesm2022/acorex-charts-hierarchy-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts-line-chart.mjs +55 -29
- package/fesm2022/acorex-charts-line-chart.mjs.map +1 -1
- package/fesm2022/acorex-charts.mjs +4 -4
- package/fesm2022/acorex-charts.mjs.map +1 -1
- package/package.json +2 -1
- package/types/acorex-charts-heatmap-chart.d.ts +14 -0
- package/types/acorex-charts-hierarchy-chart.d.ts +5 -2
- package/types/acorex-charts-line-chart.d.ts +1 -0
|
@@ -8,11 +8,11 @@ class AXChartLegendComponent {
|
|
|
8
8
|
* Chart component instance
|
|
9
9
|
* Must implement AXChartLegendCompatible interface
|
|
10
10
|
*/
|
|
11
|
-
chart = input.required(...(ngDevMode ? [{ debugName: "chart" }] : []));
|
|
11
|
+
chart = input.required(...(ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []));
|
|
12
12
|
/**
|
|
13
13
|
* Configuration options for the legend
|
|
14
14
|
*/
|
|
15
|
-
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
15
|
+
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
16
16
|
/**
|
|
17
17
|
* Event emitted when a legend item is clicked
|
|
18
18
|
* Returns the item that was clicked
|
|
@@ -29,10 +29,10 @@ class AXChartLegendComponent {
|
|
|
29
29
|
/**
|
|
30
30
|
* Reference to legend container for measuring dimensions
|
|
31
31
|
*/
|
|
32
|
-
legendContainer = viewChild('legendContainer', ...(ngDevMode ? [{ debugName: "legendContainer" }] : []));
|
|
32
|
+
legendContainer = viewChild('legendContainer', ...(ngDevMode ? [{ debugName: "legendContainer" }] : /* istanbul ignore next */ []));
|
|
33
33
|
// Computed values for the template
|
|
34
|
-
showValues = computed(() => this.options()?.showValues !== false, ...(ngDevMode ? [{ debugName: "showValues" }] : []));
|
|
35
|
-
showPercentage = computed(() => this.options()?.showPercentage !== false, ...(ngDevMode ? [{ debugName: "showPercentage" }] : []));
|
|
34
|
+
showValues = computed(() => this.options()?.showValues !== false, ...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
|
|
35
|
+
showPercentage = computed(() => this.options()?.showPercentage !== false, ...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
|
|
36
36
|
containerClass = computed(() => {
|
|
37
37
|
const opts = this.options();
|
|
38
38
|
const className = opts?.className || '';
|
|
@@ -42,13 +42,13 @@ class AXChartLegendComponent {
|
|
|
42
42
|
[className]: !!className,
|
|
43
43
|
[`ax-legend-${mode}`]: true,
|
|
44
44
|
};
|
|
45
|
-
}, ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
|
|
45
|
+
}, ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
|
|
46
46
|
// Track if the legend is interactive
|
|
47
|
-
isInteractive = computed(() => this.options()?.interactive !== false, ...(ngDevMode ? [{ debugName: "isInteractive" }] : []));
|
|
47
|
+
isInteractive = computed(() => this.options()?.interactive !== false, ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
48
48
|
// Compute the items to display from the chart
|
|
49
49
|
displayItems = computed(() => {
|
|
50
50
|
return this.chart().getLegendItems();
|
|
51
|
-
}, ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
|
|
51
|
+
}, ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
|
|
52
52
|
/**
|
|
53
53
|
* Handle clicks on legend items
|
|
54
54
|
*/
|
|
@@ -90,10 +90,10 @@ class AXChartLegendComponent {
|
|
|
90
90
|
height: this.legendContainer().nativeElement.offsetHeight,
|
|
91
91
|
};
|
|
92
92
|
}
|
|
93
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
94
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
93
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXChartLegendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
94
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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: ["ax-chart-legend{display:block;width:100%;height:100%;--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{display:flex;flex-direction:column;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);overflow-y:auto;max-height:100%;width:100%}.ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center}.ax-legend-item{display:flex;align-items:baseline;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;cursor:pointer;white-space:nowrap;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{opacity:.75}.ax-legend-item.ax-legend-item-hidden>.ax-legend-name{text-decoration:line-through}.ax-legend-item.ax-legend-item-hidden .ax-legend-color{opacity:.4;position:relative}.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom: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{width:12px;height:12px;border-radius:3px;flex-shrink:0}.ax-legend-name{font-size:.875rem;font-weight:500}.ax-legend-value{font-size:.75rem;opacity:.7;margin-left:.25rem}.ax-legend-percentage{font-size:.7rem;font-weight:500;margin-left:.35rem;padding:.1rem .35rem;border-radius:.5rem;background-color:#0000000d;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
95
95
|
}
|
|
96
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXChartLegendComponent, decorators: [{
|
|
97
97
|
type: Component,
|
|
98
98
|
args: [{ selector: 'ax-chart-legend', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, 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: ["ax-chart-legend{display:block;width:100%;height:100%;--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{display:flex;flex-direction:column;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);overflow-y:auto;max-height:100%;width:100%}.ax-chart-legend.ax-legend-horizontal{flex-direction:row;flex-wrap:wrap;align-items:center}.ax-legend-item{display:flex;align-items:baseline;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;cursor:pointer;white-space:nowrap;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{opacity:.75}.ax-legend-item.ax-legend-item-hidden>.ax-legend-name{text-decoration:line-through}.ax-legend-item.ax-legend-item-hidden .ax-legend-color{opacity:.4;position:relative}.ax-legend-item.ax-legend-item-hidden .ax-legend-color:after{content:\"\";position:absolute;top:0;left:0;right:0;bottom: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{width:12px;height:12px;border-radius:3px;flex-shrink:0}.ax-legend-name{font-size:.875rem;font-weight:500}.ax-legend-value{font-size:.75rem;opacity:.7;margin-left:.25rem}.ax-legend-percentage{font-size:.7rem;font-weight:500;margin-left:.35rem;padding:.1rem .35rem;border-radius:.5rem;background-color:#0000000d;line-height:1}\n"] }]
|
|
99
99
|
}], 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 }] }] } });
|
|
@@ -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.css'],\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,
|
|
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.css'],\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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"}
|
|
@@ -5,21 +5,21 @@ import { inject, NgZone, input, viewChild, afterNextRender, ChangeDetectionStrat
|
|
|
5
5
|
|
|
6
6
|
class AXChartTooltipComponent {
|
|
7
7
|
ngZone = inject(NgZone);
|
|
8
|
-
data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
9
|
-
position = input({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : []));
|
|
10
|
-
visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
8
|
+
data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
9
|
+
position = input({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
10
|
+
visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
11
11
|
/**
|
|
12
12
|
* Whether to show the tooltip's percentage badge
|
|
13
13
|
*/
|
|
14
|
-
showPercentage = input(true, ...(ngDevMode ? [{ debugName: "showPercentage" }] : []));
|
|
14
|
+
showPercentage = input(true, ...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
|
|
15
15
|
/**
|
|
16
16
|
* Optional custom styling for the tooltip
|
|
17
17
|
*/
|
|
18
|
-
style = input({}, ...(ngDevMode ? [{ debugName: "style" }] : []));
|
|
18
|
+
style = input({}, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
|
|
19
19
|
/**
|
|
20
20
|
* Reference to tooltip container for measuring dimensions
|
|
21
21
|
*/
|
|
22
|
-
tooltipContainer = viewChild('tooltipContainer', ...(ngDevMode ? [{ debugName: "tooltipContainer" }] : []));
|
|
22
|
+
tooltipContainer = viewChild('tooltipContainer', ...(ngDevMode ? [{ debugName: "tooltipContainer" }] : /* istanbul ignore next */ []));
|
|
23
23
|
// Tooltip dimensions
|
|
24
24
|
tooltipWidth = 0;
|
|
25
25
|
tooltipHeight = 0;
|
|
@@ -92,12 +92,12 @@ class AXChartTooltipComponent {
|
|
|
92
92
|
height: this.tooltipHeight,
|
|
93
93
|
};
|
|
94
94
|
}
|
|
95
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
96
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
95
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXChartTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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 (data()) {\n <div\n #tooltipContainer\n class=\"chart-tooltip\"\n [class.chart-tooltip-visible]=\"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 [attr.aria-hidden]=\"!visible()\"\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: [":host{position:absolute;top:0;left:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:10;--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{pointer-events:none;position:absolute;z-index:10;max-width:250px;width:max-content;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);background-color:rgba(var(--ax-comp-chart-tooltip-bg-color));color:rgba(var(--ax-comp-chart-tooltip-text-color));opacity:0;visibility:hidden;transition:opacity .15s ease}.chart-tooltip-visible{opacity:1;visibility:visible}.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;white-space:nowrap}.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 });
|
|
97
97
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXChartTooltipComponent, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
|
-
args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (
|
|
100
|
+
args: [{ selector: 'ax-chart-tooltip', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (data()) {\n <div\n #tooltipContainer\n class=\"chart-tooltip\"\n [class.chart-tooltip-visible]=\"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 [attr.aria-hidden]=\"!visible()\"\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: [":host{position:absolute;top:0;left:0;width:0;height:0;overflow:visible;pointer-events:none;z-index:10;--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{pointer-events:none;position:absolute;z-index:10;max-width:250px;width:max-content;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);background-color:rgba(var(--ax-comp-chart-tooltip-bg-color));color:rgba(var(--ax-comp-chart-tooltip-text-color));opacity:0;visibility:hidden;transition:opacity .15s ease}.chart-tooltip-visible{opacity:1;visibility:visible}.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;white-space:nowrap}.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"] }]
|
|
101
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 }] }] } });
|
|
102
102
|
|
|
103
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.css'],\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 (
|
|
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 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 (data()) {\n <div\n #tooltipContainer\n class=\"chart-tooltip\"\n [class.chart-tooltip-visible]=\"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 [attr.aria-hidden]=\"!visible()\"\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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"}
|
|
@@ -40,9 +40,9 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
40
40
|
cdr = inject(ChangeDetectorRef);
|
|
41
41
|
// Inputs
|
|
42
42
|
/** Chart data input */
|
|
43
|
-
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
43
|
+
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
44
44
|
/** Chart options input */
|
|
45
|
-
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
45
|
+
options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
46
46
|
// Outputs
|
|
47
47
|
/** Emitted when a segment is clicked */
|
|
48
48
|
segmentClick = output();
|
|
@@ -61,19 +61,19 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
61
61
|
pieData = [];
|
|
62
62
|
// State management
|
|
63
63
|
hiddenSegments = new Set();
|
|
64
|
-
_initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
|
|
65
|
-
_rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
|
|
66
|
-
_isInitialAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isInitialAnimating" }] : []));
|
|
67
|
-
_currentlyHighlightedSegment = signal(null, ...(ngDevMode ? [{ debugName: "_currentlyHighlightedSegment" }] : []));
|
|
64
|
+
_initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
|
|
65
|
+
_rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
|
|
66
|
+
_isInitialAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isInitialAnimating" }] : /* istanbul ignore next */ []));
|
|
67
|
+
_currentlyHighlightedSegment = signal(null, ...(ngDevMode ? [{ debugName: "_currentlyHighlightedSegment" }] : /* istanbul ignore next */ []));
|
|
68
68
|
// Tooltip state
|
|
69
|
-
_tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
|
|
70
|
-
_tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
|
|
69
|
+
_tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : /* istanbul ignore next */ []));
|
|
70
|
+
_tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : /* istanbul ignore next */ []));
|
|
71
71
|
_tooltipData = signal({
|
|
72
72
|
title: '',
|
|
73
73
|
value: 0,
|
|
74
74
|
percentage: '0%',
|
|
75
75
|
color: '',
|
|
76
|
-
}, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : []));
|
|
76
|
+
}, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : /* istanbul ignore next */ []));
|
|
77
77
|
_tooltipRafId = null;
|
|
78
78
|
_pendingTooltipCoords = null;
|
|
79
79
|
// Public computed properties for the template
|
|
@@ -90,7 +90,7 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
90
90
|
...this.configToken,
|
|
91
91
|
...this.options(),
|
|
92
92
|
};
|
|
93
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
|
|
93
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
|
|
94
94
|
// Constants
|
|
95
95
|
TOOLTIP_GAP = 10;
|
|
96
96
|
HIGHLIGHT_TRANSITION_DURATION = 150;
|
|
@@ -116,11 +116,11 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
116
116
|
...defaultMessages,
|
|
117
117
|
...this.effectiveOptions().messages,
|
|
118
118
|
};
|
|
119
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
|
|
119
|
+
}, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : /* istanbul ignore next */ []));
|
|
120
120
|
// Data accessor for handling different incoming data formats
|
|
121
121
|
chartDataArray = computed(() => {
|
|
122
122
|
return this.data() || [];
|
|
123
|
-
}, ...(ngDevMode ? [{ debugName: "chartDataArray" }] : []));
|
|
123
|
+
}, ...(ngDevMode ? [{ debugName: "chartDataArray" }] : /* istanbul ignore next */ []));
|
|
124
124
|
// Color accessor method
|
|
125
125
|
getColor(index) {
|
|
126
126
|
return getChartColor(index, this.chartColors);
|
|
@@ -147,7 +147,7 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
147
147
|
this.updateChart();
|
|
148
148
|
}
|
|
149
149
|
});
|
|
150
|
-
}, ...(ngDevMode ? [{ debugName: "dataChangeEffect" }] : []));
|
|
150
|
+
}, ...(ngDevMode ? [{ debugName: "dataChangeEffect" }] : /* istanbul ignore next */ []));
|
|
151
151
|
/**
|
|
152
152
|
* Highlights a specific segment by ID
|
|
153
153
|
* @param id The segment ID to highlight, or null to clear highlight
|
|
@@ -743,9 +743,10 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
743
743
|
this._tooltipRafId = null;
|
|
744
744
|
}
|
|
745
745
|
this._pendingTooltipCoords = null;
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
746
|
+
const container = this.chartContainerEl()?.nativeElement;
|
|
747
|
+
if (container) {
|
|
748
|
+
this.d3?.select(container).selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
|
|
749
|
+
}
|
|
749
750
|
this.svg = null;
|
|
750
751
|
this.pieData = [];
|
|
751
752
|
this.hiddenSegments.clear();
|
|
@@ -801,12 +802,12 @@ class AXDonutChartComponent extends AXChartComponent {
|
|
|
801
802
|
hidden: this.isSegmentHidden(item.id),
|
|
802
803
|
}));
|
|
803
804
|
}
|
|
804
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
805
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.
|
|
805
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
806
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", 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:0;box-sizing:border-box;--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{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 });
|
|
806
807
|
}
|
|
807
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
808
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDonutChartComponent, decorators: [{
|
|
808
809
|
type: Component,
|
|
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:0;box-sizing:border-box;--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"] }]
|
|
810
|
+
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:0;box-sizing:border-box;--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{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"] }]
|
|
810
811
|
}], 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 }] }] } });
|
|
811
812
|
|
|
812
813
|
/**
|