@ojiepermana/angular-chart 22.0.43 → 22.0.45
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/ojiepermana-angular-chart-area.mjs +21 -14
- package/fesm2022/ojiepermana-angular-chart-bar.mjs +26 -17
- package/fesm2022/ojiepermana-angular-chart-core.mjs +23 -25
- package/fesm2022/ojiepermana-angular-chart-line.mjs +21 -14
- package/fesm2022/ojiepermana-angular-chart-pie.mjs +23 -14
- package/fesm2022/ojiepermana-angular-chart-primitives.mjs +142 -89
- package/fesm2022/ojiepermana-angular-chart-radar.mjs +57 -24
- package/fesm2022/ojiepermana-angular-chart-radial.mjs +23 -14
- package/fesm2022/ojiepermana-angular-chart-scatter.mjs +13 -10
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, output, computed, effect,
|
|
2
|
+
import { inject, input, output, computed, effect, Component } from '@angular/core';
|
|
3
3
|
import { ChartContext, CartesianContext, CategoricalViewportContext, sliceByIndexRange, computeAreaLayout, provideCartesianFromLineLayout, elementClientCenter } from '@ojiepermana/angular-chart/core';
|
|
4
4
|
import { ChartPointerTracker } from '@ojiepermana/angular-chart/primitives';
|
|
5
5
|
|
|
@@ -117,15 +117,16 @@ class AreaChart {
|
|
|
117
117
|
const label = this.root.config()[p.seriesKey]?.label ?? p.seriesKey;
|
|
118
118
|
return `${label} at ${p.category}: ${p.value}`;
|
|
119
119
|
}
|
|
120
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
121
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: AreaChart, isStandalone: true, selector: "ChartArea", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
|
|
122
122
|
<svg:svg
|
|
123
123
|
ChartPointerTracker
|
|
124
124
|
class="block h-full w-full overflow-visible"
|
|
125
125
|
[attr.viewBox]="viewBox()"
|
|
126
126
|
preserveAspectRatio="none"
|
|
127
127
|
role="img"
|
|
128
|
-
[attr.aria-label]="ariaSummary()"
|
|
128
|
+
[attr.aria-label]="ariaSummary()"
|
|
129
|
+
>
|
|
129
130
|
@if (gradient()) {
|
|
130
131
|
<svg:defs>
|
|
131
132
|
@for (s of series(); track s.seriesKey) {
|
|
@@ -144,7 +145,8 @@ class AreaChart {
|
|
|
144
145
|
class="chart-area"
|
|
145
146
|
[attr.d]="s.areaPath"
|
|
146
147
|
[attr.fill]="areaFill(s.seriesKey, s.color)"
|
|
147
|
-
stroke="none"
|
|
148
|
+
stroke="none"
|
|
149
|
+
/>
|
|
148
150
|
<svg:path
|
|
149
151
|
class="chart-area-stroke"
|
|
150
152
|
[attr.d]="s.linePath"
|
|
@@ -152,7 +154,8 @@ class AreaChart {
|
|
|
152
154
|
[attr.stroke-width]="strokeWidth()"
|
|
153
155
|
fill="none"
|
|
154
156
|
stroke-linecap="round"
|
|
155
|
-
stroke-linejoin="round"
|
|
157
|
+
stroke-linejoin="round"
|
|
158
|
+
/>
|
|
156
159
|
@if (showDots()) {
|
|
157
160
|
@for (p of s.points; track p.datumIndex) {
|
|
158
161
|
<svg:circle
|
|
@@ -167,7 +170,8 @@ class AreaChart {
|
|
|
167
170
|
(blur)="clearActivePoint()"
|
|
168
171
|
(click)="emitClick(p)"
|
|
169
172
|
(keydown.enter)="emitClick(p)"
|
|
170
|
-
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
173
|
+
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
174
|
+
/>
|
|
171
175
|
}
|
|
172
176
|
}
|
|
173
177
|
}
|
|
@@ -181,13 +185,12 @@ class AreaChart {
|
|
|
181
185
|
<ng-content select="ChartTooltip" />
|
|
182
186
|
<ng-content select="ChartLegend" />
|
|
183
187
|
<ng-content select="ChartZoomControls" />
|
|
184
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }]
|
|
188
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
|
|
185
189
|
}
|
|
186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AreaChart, decorators: [{
|
|
187
191
|
type: Component,
|
|
188
192
|
args: [{
|
|
189
193
|
selector: 'ChartArea',
|
|
190
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
191
194
|
providers: [CartesianContext, CategoricalViewportContext],
|
|
192
195
|
imports: [ChartPointerTracker],
|
|
193
196
|
host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
|
|
@@ -198,7 +201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
198
201
|
[attr.viewBox]="viewBox()"
|
|
199
202
|
preserveAspectRatio="none"
|
|
200
203
|
role="img"
|
|
201
|
-
[attr.aria-label]="ariaSummary()"
|
|
204
|
+
[attr.aria-label]="ariaSummary()"
|
|
205
|
+
>
|
|
202
206
|
@if (gradient()) {
|
|
203
207
|
<svg:defs>
|
|
204
208
|
@for (s of series(); track s.seriesKey) {
|
|
@@ -217,7 +221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
217
221
|
class="chart-area"
|
|
218
222
|
[attr.d]="s.areaPath"
|
|
219
223
|
[attr.fill]="areaFill(s.seriesKey, s.color)"
|
|
220
|
-
stroke="none"
|
|
224
|
+
stroke="none"
|
|
225
|
+
/>
|
|
221
226
|
<svg:path
|
|
222
227
|
class="chart-area-stroke"
|
|
223
228
|
[attr.d]="s.linePath"
|
|
@@ -225,7 +230,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
225
230
|
[attr.stroke-width]="strokeWidth()"
|
|
226
231
|
fill="none"
|
|
227
232
|
stroke-linecap="round"
|
|
228
|
-
stroke-linejoin="round"
|
|
233
|
+
stroke-linejoin="round"
|
|
234
|
+
/>
|
|
229
235
|
@if (showDots()) {
|
|
230
236
|
@for (p of s.points; track p.datumIndex) {
|
|
231
237
|
<svg:circle
|
|
@@ -240,7 +246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
240
246
|
(blur)="clearActivePoint()"
|
|
241
247
|
(click)="emitClick(p)"
|
|
242
248
|
(keydown.enter)="emitClick(p)"
|
|
243
|
-
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
249
|
+
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
250
|
+
/>
|
|
244
251
|
}
|
|
245
252
|
}
|
|
246
253
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, output, computed, effect,
|
|
2
|
+
import { inject, input, output, computed, effect, Component } from '@angular/core';
|
|
3
3
|
import { seriesColorVar, ChartContext, CartesianContext, ChartThemeRadius, elementClientCenter } from '@ojiepermana/angular-chart/core';
|
|
4
4
|
import { scaleBand, scaleLinear } from 'd3-scale';
|
|
5
5
|
import { min, max } from 'd3-array';
|
|
@@ -414,7 +414,7 @@ class BarChart {
|
|
|
414
414
|
});
|
|
415
415
|
}, /* @ts-ignore */
|
|
416
416
|
...(ngDevMode ? [{ debugName: "dotLayout" }] : /* istanbul ignore next */ []));
|
|
417
|
-
dotTrackCells = computed(() =>
|
|
417
|
+
dotTrackCells = computed(() => this.showDotTrack() ? (this.dotLayout()?.track ?? []) : [], /* @ts-ignore */
|
|
418
418
|
...(ngDevMode ? [{ debugName: "dotTrackCells" }] : /* istanbul ignore next */ []));
|
|
419
419
|
dotValueCells = computed(() => this.dotLayout()?.values ?? [], /* @ts-ignore */
|
|
420
420
|
...(ngDevMode ? [{ debugName: "dotValueCells" }] : /* istanbul ignore next */ []));
|
|
@@ -526,15 +526,16 @@ class BarChart {
|
|
|
526
526
|
}
|
|
527
527
|
}
|
|
528
528
|
}
|
|
529
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
530
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
529
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
530
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: BarChart, isStandalone: true, selector: "ChartBar", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, bandPadding: { classPropertyName: "bandPadding", publicName: "bandPadding", isSignal: true, isRequired: false, transformFunction: null }, groupPadding: { classPropertyName: "groupPadding", publicName: "groupPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null }, dotSize: { classPropertyName: "dotSize", publicName: "dotSize", isSignal: true, isRequired: false, transformFunction: null }, dotGap: { classPropertyName: "dotGap", publicName: "dotGap", isSignal: true, isRequired: false, transformFunction: null }, dotCornerRadius: { classPropertyName: "dotCornerRadius", publicName: "dotCornerRadius", isSignal: true, isRequired: false, transformFunction: null }, showDotTrack: { classPropertyName: "showDotTrack", publicName: "showDotTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext], ngImport: i0, template: `
|
|
531
531
|
<svg:svg
|
|
532
532
|
ChartPointerTracker
|
|
533
533
|
class="block h-full w-full overflow-visible"
|
|
534
534
|
[attr.viewBox]="viewBox()"
|
|
535
535
|
preserveAspectRatio="none"
|
|
536
536
|
role="img"
|
|
537
|
-
[attr.aria-label]="ariaSummary()"
|
|
537
|
+
[attr.aria-label]="ariaSummary()"
|
|
538
|
+
>
|
|
538
539
|
<svg:g [attr.transform]="innerTransform()">
|
|
539
540
|
<ng-content select="svg\\:g[ChartGrid]" />
|
|
540
541
|
<svg:g class="chart-bars">
|
|
@@ -549,7 +550,8 @@ class BarChart {
|
|
|
549
550
|
[attr.height]="cell.height"
|
|
550
551
|
[attr.rx]="resolvedDotCornerRadius()"
|
|
551
552
|
[attr.ry]="resolvedDotCornerRadius()"
|
|
552
|
-
fill="hsl(var(--muted))"
|
|
553
|
+
fill="hsl(var(--muted))"
|
|
554
|
+
/>
|
|
553
555
|
}
|
|
554
556
|
@for (cell of dotValueCells(); track cell.key) {
|
|
555
557
|
<svg:rect
|
|
@@ -561,7 +563,8 @@ class BarChart {
|
|
|
561
563
|
[attr.rx]="resolvedDotCornerRadius()"
|
|
562
564
|
[attr.ry]="resolvedDotCornerRadius()"
|
|
563
565
|
[attr.fill]="cell.color"
|
|
564
|
-
[attr.opacity]="dotCellOpacity(cell)"
|
|
566
|
+
[attr.opacity]="dotCellOpacity(cell)"
|
|
567
|
+
/>
|
|
565
568
|
}
|
|
566
569
|
</svg:g>
|
|
567
570
|
}
|
|
@@ -585,14 +588,16 @@ class BarChart {
|
|
|
585
588
|
(click)="emitClick(bar)"
|
|
586
589
|
(keydown.enter)="emitClick(bar)"
|
|
587
590
|
(keydown.space)="emitClick(bar); $event.preventDefault()"
|
|
588
|
-
(keydown)="onKeydown($event, idx)"
|
|
591
|
+
(keydown)="onKeydown($event, idx)"
|
|
592
|
+
/>
|
|
589
593
|
@if (showValueLabels() && bar.height > 0 && bar.width > 0) {
|
|
590
594
|
<svg:text
|
|
591
595
|
class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
|
|
592
596
|
[attr.x]="barLabelX(bar)"
|
|
593
597
|
[attr.y]="barLabelY(bar)"
|
|
594
598
|
[attr.text-anchor]="barLabelAnchor(bar)"
|
|
595
|
-
dominant-baseline="middle"
|
|
599
|
+
dominant-baseline="middle"
|
|
600
|
+
>
|
|
596
601
|
{{ formatValueLabel(bar) }}
|
|
597
602
|
</svg:text>
|
|
598
603
|
}
|
|
@@ -627,13 +632,12 @@ class BarChart {
|
|
|
627
632
|
}
|
|
628
633
|
</tbody>
|
|
629
634
|
</table>
|
|
630
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }]
|
|
635
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
|
|
631
636
|
}
|
|
632
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
637
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: BarChart, decorators: [{
|
|
633
638
|
type: Component,
|
|
634
639
|
args: [{
|
|
635
640
|
selector: 'ChartBar',
|
|
636
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
637
641
|
providers: [CartesianContext],
|
|
638
642
|
imports: [ChartPointerTracker],
|
|
639
643
|
host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
|
|
@@ -644,7 +648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
644
648
|
[attr.viewBox]="viewBox()"
|
|
645
649
|
preserveAspectRatio="none"
|
|
646
650
|
role="img"
|
|
647
|
-
[attr.aria-label]="ariaSummary()"
|
|
651
|
+
[attr.aria-label]="ariaSummary()"
|
|
652
|
+
>
|
|
648
653
|
<svg:g [attr.transform]="innerTransform()">
|
|
649
654
|
<ng-content select="svg\\:g[ChartGrid]" />
|
|
650
655
|
<svg:g class="chart-bars">
|
|
@@ -659,7 +664,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
659
664
|
[attr.height]="cell.height"
|
|
660
665
|
[attr.rx]="resolvedDotCornerRadius()"
|
|
661
666
|
[attr.ry]="resolvedDotCornerRadius()"
|
|
662
|
-
fill="hsl(var(--muted))"
|
|
667
|
+
fill="hsl(var(--muted))"
|
|
668
|
+
/>
|
|
663
669
|
}
|
|
664
670
|
@for (cell of dotValueCells(); track cell.key) {
|
|
665
671
|
<svg:rect
|
|
@@ -671,7 +677,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
671
677
|
[attr.rx]="resolvedDotCornerRadius()"
|
|
672
678
|
[attr.ry]="resolvedDotCornerRadius()"
|
|
673
679
|
[attr.fill]="cell.color"
|
|
674
|
-
[attr.opacity]="dotCellOpacity(cell)"
|
|
680
|
+
[attr.opacity]="dotCellOpacity(cell)"
|
|
681
|
+
/>
|
|
675
682
|
}
|
|
676
683
|
</svg:g>
|
|
677
684
|
}
|
|
@@ -695,14 +702,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
695
702
|
(click)="emitClick(bar)"
|
|
696
703
|
(keydown.enter)="emitClick(bar)"
|
|
697
704
|
(keydown.space)="emitClick(bar); $event.preventDefault()"
|
|
698
|
-
(keydown)="onKeydown($event, idx)"
|
|
705
|
+
(keydown)="onKeydown($event, idx)"
|
|
706
|
+
/>
|
|
699
707
|
@if (showValueLabels() && bar.height > 0 && bar.width > 0) {
|
|
700
708
|
<svg:text
|
|
701
709
|
class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
|
|
702
710
|
[attr.x]="barLabelX(bar)"
|
|
703
711
|
[attr.y]="barLabelY(bar)"
|
|
704
712
|
[attr.text-anchor]="barLabelAnchor(bar)"
|
|
705
|
-
dominant-baseline="middle"
|
|
713
|
+
dominant-baseline="middle"
|
|
714
|
+
>
|
|
706
715
|
{{ formatValueLabel(bar) }}
|
|
707
716
|
</svg:text>
|
|
708
717
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect,
|
|
2
|
+
import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender, Service } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, DOCUMENT } from '@angular/common';
|
|
4
4
|
import { scalePoint, scaleLinear, scaleBand } from 'd3-scale';
|
|
5
5
|
import { max } from 'd3-array';
|
|
@@ -103,10 +103,10 @@ class ChartContext {
|
|
|
103
103
|
return next;
|
|
104
104
|
});
|
|
105
105
|
}
|
|
106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
107
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
107
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartContext });
|
|
108
108
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartContext, decorators: [{
|
|
110
110
|
type: Injectable
|
|
111
111
|
}] });
|
|
112
112
|
|
|
@@ -139,14 +139,13 @@ class ChartStyle {
|
|
|
139
139
|
this.styleEl.textContent = css;
|
|
140
140
|
});
|
|
141
141
|
}
|
|
142
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
143
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.
|
|
142
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
143
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: ChartStyle, isStandalone: true, selector: "ChartStyle", ngImport: i0, template: '', isInline: true });
|
|
144
144
|
}
|
|
145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartStyle, decorators: [{
|
|
146
146
|
type: Component,
|
|
147
147
|
args: [{
|
|
148
148
|
selector: 'ChartStyle',
|
|
149
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
150
149
|
template: '',
|
|
151
150
|
}]
|
|
152
151
|
}], ctorParameters: () => [] });
|
|
@@ -225,20 +224,19 @@ class ChartContainer {
|
|
|
225
224
|
observer.observe(el);
|
|
226
225
|
this.destroyRef.onDestroy(() => observer.disconnect());
|
|
227
226
|
}
|
|
228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.
|
|
227
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.4", type: ChartContainer, isStandalone: true, selector: "Chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, chartId: { classPropertyName: "chartId", publicName: "chartId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-chart": "ctx.id()" }, classAttribute: "relative flex flex-col text-xs" }, providers: [ChartContext], viewQueries: [{ propertyName: "areaRef", first: true, predicate: ["area"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
230
229
|
<ChartStyle />
|
|
231
230
|
<div #area data-chart-area [class]="areaClass()">
|
|
232
231
|
<ng-content />
|
|
233
232
|
</div>
|
|
234
233
|
<ng-content select="ChartLegend" />
|
|
235
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ChartStyle" }]
|
|
234
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ChartStyle" }] });
|
|
236
235
|
}
|
|
237
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartContainer, decorators: [{
|
|
238
237
|
type: Component,
|
|
239
238
|
args: [{
|
|
240
239
|
selector: 'Chart',
|
|
241
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
242
240
|
providers: [ChartContext],
|
|
243
241
|
imports: [ChartStyle],
|
|
244
242
|
host: {
|
|
@@ -285,10 +283,10 @@ class CartesianContext {
|
|
|
285
283
|
/** Ordered category domain (e.g. x labels for vertical, y labels for horizontal). */
|
|
286
284
|
categories = signal([], /* @ts-ignore */
|
|
287
285
|
...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
|
|
288
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
289
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
286
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CartesianContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
287
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CartesianContext });
|
|
290
288
|
}
|
|
291
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CartesianContext, decorators: [{
|
|
292
290
|
type: Injectable
|
|
293
291
|
}] });
|
|
294
292
|
/** Resolve the scale that maps to the X axis for a given orientation. */
|
|
@@ -317,10 +315,10 @@ class CategoricalViewportContext {
|
|
|
317
315
|
this.brushRange.set(null);
|
|
318
316
|
this.zoomRange.set(null);
|
|
319
317
|
}
|
|
320
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
321
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
318
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CategoricalViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
319
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CategoricalViewportContext });
|
|
322
320
|
}
|
|
323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: CategoricalViewportContext, decorators: [{
|
|
324
322
|
type: Injectable
|
|
325
323
|
}] });
|
|
326
324
|
|
|
@@ -347,10 +345,10 @@ class ScatterViewportContext {
|
|
|
347
345
|
this.zoomXDomain.set(null);
|
|
348
346
|
this.zoomYDomain.set(null);
|
|
349
347
|
}
|
|
350
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
351
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
348
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ScatterViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
349
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ScatterViewportContext });
|
|
352
350
|
}
|
|
353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ScatterViewportContext, decorators: [{
|
|
354
352
|
type: Injectable
|
|
355
353
|
}] });
|
|
356
354
|
|
|
@@ -809,10 +807,10 @@ class ChartThemeRadius {
|
|
|
809
807
|
// 'px' and the 9999px 'full' extreme parse directly.
|
|
810
808
|
return numeric;
|
|
811
809
|
}
|
|
812
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
813
|
-
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.
|
|
810
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartThemeRadius, deps: [], target: i0.ɵɵFactoryTarget.Service });
|
|
811
|
+
static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: ChartThemeRadius });
|
|
814
812
|
}
|
|
815
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
813
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartThemeRadius, decorators: [{
|
|
816
814
|
type: Service
|
|
817
815
|
}], ctorParameters: () => [] });
|
|
818
816
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, output, computed, effect,
|
|
2
|
+
import { inject, input, output, computed, effect, Component } from '@angular/core';
|
|
3
3
|
import { ChartContext, CartesianContext, CategoricalViewportContext, sliceByIndexRange, computeLineLayout, provideCartesianFromLineLayout, elementClientCenter } from '@ojiepermana/angular-chart/core';
|
|
4
4
|
export { buildCartesianScales, cloneLinear, computeAreaLayout, computeLineLayout, pointToBandAdapter, provideCartesianFromLineLayout } from '@ojiepermana/angular-chart/core';
|
|
5
5
|
import { ChartPointerTracker } from '@ojiepermana/angular-chart/primitives';
|
|
@@ -138,15 +138,16 @@ class LineChart {
|
|
|
138
138
|
const label = this.root.config()[p.seriesKey]?.label ?? p.seriesKey;
|
|
139
139
|
return `${label} at ${p.category}: ${p.value}`;
|
|
140
140
|
}
|
|
141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: LineChart, isStandalone: true, selector: "ChartLine", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, dotColorKey: { classPropertyName: "dotColorKey", publicName: "dotColorKey", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeColor: { classPropertyName: "dotStrokeColor", publicName: "dotStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeWidth: { classPropertyName: "dotStrokeWidth", publicName: "dotStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
|
|
143
143
|
<svg:svg
|
|
144
144
|
ChartPointerTracker
|
|
145
145
|
class="block h-full w-full overflow-visible"
|
|
146
146
|
[attr.viewBox]="viewBox()"
|
|
147
147
|
preserveAspectRatio="none"
|
|
148
148
|
role="img"
|
|
149
|
-
[attr.aria-label]="ariaSummary()"
|
|
149
|
+
[attr.aria-label]="ariaSummary()"
|
|
150
|
+
>
|
|
150
151
|
<svg:g [attr.transform]="innerTransform()">
|
|
151
152
|
<ng-content select="svg\\:g[ChartGrid]" />
|
|
152
153
|
<svg:g class="chart-lines">
|
|
@@ -158,7 +159,8 @@ class LineChart {
|
|
|
158
159
|
stroke-linejoin="round"
|
|
159
160
|
[attr.stroke]="s.color"
|
|
160
161
|
[attr.stroke-width]="strokeWidth()"
|
|
161
|
-
[attr.d]="s.linePath"
|
|
162
|
+
[attr.d]="s.linePath"
|
|
163
|
+
/>
|
|
162
164
|
@if (showDots()) {
|
|
163
165
|
@for (p of s.points; track p.datumIndex) {
|
|
164
166
|
<svg:circle
|
|
@@ -175,14 +177,16 @@ class LineChart {
|
|
|
175
177
|
(blur)="clearActivePoint()"
|
|
176
178
|
(click)="emitClick(p)"
|
|
177
179
|
(keydown.enter)="emitClick(p)"
|
|
178
|
-
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
180
|
+
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
181
|
+
/>
|
|
179
182
|
@if (showValueLabels()) {
|
|
180
183
|
<svg:text
|
|
181
184
|
class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
|
|
182
185
|
[attr.x]="labelX(p)"
|
|
183
186
|
[attr.y]="labelY(p)"
|
|
184
187
|
[attr.text-anchor]="labelAnchor()"
|
|
185
|
-
dominant-baseline="middle"
|
|
188
|
+
dominant-baseline="middle"
|
|
189
|
+
>
|
|
186
190
|
{{ formatValueLabel(p) }}
|
|
187
191
|
</svg:text>
|
|
188
192
|
}
|
|
@@ -199,13 +203,12 @@ class LineChart {
|
|
|
199
203
|
<ng-content select="ChartTooltip" />
|
|
200
204
|
<ng-content select="ChartLegend" />
|
|
201
205
|
<ng-content select="ChartZoomControls" />
|
|
202
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }]
|
|
206
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }] });
|
|
203
207
|
}
|
|
204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LineChart, decorators: [{
|
|
205
209
|
type: Component,
|
|
206
210
|
args: [{
|
|
207
211
|
selector: 'ChartLine',
|
|
208
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
209
212
|
providers: [CartesianContext, CategoricalViewportContext],
|
|
210
213
|
imports: [ChartPointerTracker],
|
|
211
214
|
host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
|
|
@@ -216,7 +219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
216
219
|
[attr.viewBox]="viewBox()"
|
|
217
220
|
preserveAspectRatio="none"
|
|
218
221
|
role="img"
|
|
219
|
-
[attr.aria-label]="ariaSummary()"
|
|
222
|
+
[attr.aria-label]="ariaSummary()"
|
|
223
|
+
>
|
|
220
224
|
<svg:g [attr.transform]="innerTransform()">
|
|
221
225
|
<ng-content select="svg\\:g[ChartGrid]" />
|
|
222
226
|
<svg:g class="chart-lines">
|
|
@@ -228,7 +232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
228
232
|
stroke-linejoin="round"
|
|
229
233
|
[attr.stroke]="s.color"
|
|
230
234
|
[attr.stroke-width]="strokeWidth()"
|
|
231
|
-
[attr.d]="s.linePath"
|
|
235
|
+
[attr.d]="s.linePath"
|
|
236
|
+
/>
|
|
232
237
|
@if (showDots()) {
|
|
233
238
|
@for (p of s.points; track p.datumIndex) {
|
|
234
239
|
<svg:circle
|
|
@@ -245,14 +250,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
245
250
|
(blur)="clearActivePoint()"
|
|
246
251
|
(click)="emitClick(p)"
|
|
247
252
|
(keydown.enter)="emitClick(p)"
|
|
248
|
-
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
253
|
+
(keydown.space)="emitClick(p); $event.preventDefault()"
|
|
254
|
+
/>
|
|
249
255
|
@if (showValueLabels()) {
|
|
250
256
|
<svg:text
|
|
251
257
|
class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
|
|
252
258
|
[attr.x]="labelX(p)"
|
|
253
259
|
[attr.y]="labelY(p)"
|
|
254
260
|
[attr.text-anchor]="labelAnchor()"
|
|
255
|
-
dominant-baseline="middle"
|
|
261
|
+
dominant-baseline="middle"
|
|
262
|
+
>
|
|
256
263
|
{{ formatValueLabel(p) }}
|
|
257
264
|
</svg:text>
|
|
258
265
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { pie, arc } from 'd3-shape';
|
|
2
2
|
import { seriesColorVar, ChartContext, ChartThemeRadius } from '@ojiepermana/angular-chart/core';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { inject, input, output, computed,
|
|
4
|
+
import { inject, input, output, computed, Component } from '@angular/core';
|
|
5
5
|
|
|
6
6
|
function computePieLayout(input) {
|
|
7
7
|
const { data, valueKey, nameKey, seriesKeys, innerWidth, innerHeight, innerRadius, padAngle, cornerRadius, startAngle, endAngle, activeIndex, activeOffset = 12, } = input;
|
|
@@ -125,8 +125,12 @@ class PieChart {
|
|
|
125
125
|
});
|
|
126
126
|
}
|
|
127
127
|
setActive(event, s) {
|
|
128
|
-
const clientX = event instanceof PointerEvent
|
|
129
|
-
|
|
128
|
+
const clientX = event instanceof PointerEvent
|
|
129
|
+
? event.clientX
|
|
130
|
+
: event.target.getBoundingClientRect().left;
|
|
131
|
+
const clientY = event instanceof PointerEvent
|
|
132
|
+
? event.clientY
|
|
133
|
+
: event.target.getBoundingClientRect().top;
|
|
130
134
|
this.root.activePoint.set({
|
|
131
135
|
index: s.datumIndex,
|
|
132
136
|
datumIndex: s.datumIndex,
|
|
@@ -138,14 +142,15 @@ class PieChart {
|
|
|
138
142
|
clearActive() {
|
|
139
143
|
this.root.activePoint.set(null);
|
|
140
144
|
}
|
|
141
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
145
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PieChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
146
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PieChart, isStandalone: true, selector: "ChartPie", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, innerRadius: { classPropertyName: "innerRadius", publicName: "innerRadius", isSignal: true, isRequired: false, transformFunction: null }, padAngle: { classPropertyName: "padAngle", publicName: "padAngle", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, activeOffset: { classPropertyName: "activeOffset", publicName: "activeOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliceClick: "sliceClick" }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
|
|
143
147
|
<svg:svg
|
|
144
148
|
class="block h-full w-full overflow-visible"
|
|
145
149
|
[attr.viewBox]="viewBox()"
|
|
146
150
|
preserveAspectRatio="xMidYMid meet"
|
|
147
151
|
role="img"
|
|
148
|
-
[attr.aria-label]="ariaSummary()"
|
|
152
|
+
[attr.aria-label]="ariaSummary()"
|
|
153
|
+
>
|
|
149
154
|
<svg:g [attr.transform]="innerTransform()">
|
|
150
155
|
<svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
|
|
151
156
|
@for (s of layout().slices; track s.seriesKey) {
|
|
@@ -163,7 +168,8 @@ class PieChart {
|
|
|
163
168
|
(pointermove)="setActive($event, s)"
|
|
164
169
|
(pointerleave)="clearActive()"
|
|
165
170
|
(focus)="setActive($event, s)"
|
|
166
|
-
(blur)="clearActive()"
|
|
171
|
+
(blur)="clearActive()"
|
|
172
|
+
/>
|
|
167
173
|
}
|
|
168
174
|
@if (showLabels()) {
|
|
169
175
|
@for (s of layout().slices; track s.seriesKey) {
|
|
@@ -172,7 +178,8 @@ class PieChart {
|
|
|
172
178
|
text-anchor="middle"
|
|
173
179
|
dominant-baseline="middle"
|
|
174
180
|
[attr.x]="s.centroid[0] + s.translateX"
|
|
175
|
-
[attr.y]="s.centroid[1] + s.translateY"
|
|
181
|
+
[attr.y]="s.centroid[1] + s.translateY"
|
|
182
|
+
>
|
|
176
183
|
{{ s.value }}
|
|
177
184
|
</svg:text>
|
|
178
185
|
}
|
|
@@ -185,13 +192,12 @@ class PieChart {
|
|
|
185
192
|
</div>
|
|
186
193
|
<ng-content select="ChartTooltip" />
|
|
187
194
|
<ng-content select="ChartLegend" />
|
|
188
|
-
`, isInline: true
|
|
195
|
+
`, isInline: true });
|
|
189
196
|
}
|
|
190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PieChart, decorators: [{
|
|
191
198
|
type: Component,
|
|
192
199
|
args: [{
|
|
193
200
|
selector: 'ChartPie',
|
|
194
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
195
201
|
host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
|
|
196
202
|
template: `
|
|
197
203
|
<svg:svg
|
|
@@ -199,7 +205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
199
205
|
[attr.viewBox]="viewBox()"
|
|
200
206
|
preserveAspectRatio="xMidYMid meet"
|
|
201
207
|
role="img"
|
|
202
|
-
[attr.aria-label]="ariaSummary()"
|
|
208
|
+
[attr.aria-label]="ariaSummary()"
|
|
209
|
+
>
|
|
203
210
|
<svg:g [attr.transform]="innerTransform()">
|
|
204
211
|
<svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
|
|
205
212
|
@for (s of layout().slices; track s.seriesKey) {
|
|
@@ -217,7 +224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
217
224
|
(pointermove)="setActive($event, s)"
|
|
218
225
|
(pointerleave)="clearActive()"
|
|
219
226
|
(focus)="setActive($event, s)"
|
|
220
|
-
(blur)="clearActive()"
|
|
227
|
+
(blur)="clearActive()"
|
|
228
|
+
/>
|
|
221
229
|
}
|
|
222
230
|
@if (showLabels()) {
|
|
223
231
|
@for (s of layout().slices; track s.seriesKey) {
|
|
@@ -226,7 +234,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
226
234
|
text-anchor="middle"
|
|
227
235
|
dominant-baseline="middle"
|
|
228
236
|
[attr.x]="s.centroid[0] + s.translateX"
|
|
229
|
-
[attr.y]="s.centroid[1] + s.translateY"
|
|
237
|
+
[attr.y]="s.centroid[1] + s.translateY"
|
|
238
|
+
>
|
|
230
239
|
{{ s.value }}
|
|
231
240
|
</svg:text>
|
|
232
241
|
}
|