@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, computed,
|
|
2
|
+
import { inject, input, computed, Component, viewChild, signal, Directive, ElementRef, contentChild, TemplateRef } from '@angular/core';
|
|
3
3
|
import { CartesianContext, linearTicks, bandTicks, ChartContext, CategoricalViewportContext, ScatterViewportContext, nearestCategoryIndex, normalizeIndexRange, panIndexRange, panNumericDomain, indexRangeSize, normalizeNumericDomain, zoomNumericDomain, zoomIndexRange, seriesColorVar } from '@ojiepermana/angular-chart/core';
|
|
4
4
|
import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
|
|
5
5
|
|
|
@@ -32,8 +32,8 @@ class ChartAxisX {
|
|
|
32
32
|
return scale ? bandTicks(scale) : [];
|
|
33
33
|
}, /* @ts-ignore */
|
|
34
34
|
...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
|
|
35
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
36
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartAxisX, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartAxisX, isStandalone: true, selector: "svg:g[ChartAxisX]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null }, tickLine: { classPropertyName: "tickLine", publicName: "tickLine", isSignal: true, isRequired: false, transformFunction: null }, tickFormat: { classPropertyName: "tickFormat", publicName: "tickFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.transform": "transform()" }, classAttribute: "chart-axis chart-axis-x text-muted-foreground" }, ngImport: i0, template: `
|
|
37
37
|
<svg:line class="stroke-border" [attr.x1]="0" [attr.x2]="innerWidth()" y1="0" y2="0" />
|
|
38
38
|
@for (t of ticks(); track t.value) {
|
|
39
39
|
<svg:g [attr.transform]="'translate(' + t.offset + ',0)'">
|
|
@@ -44,18 +44,18 @@ class ChartAxisX {
|
|
|
44
44
|
class="fill-current"
|
|
45
45
|
y="18"
|
|
46
46
|
text-anchor="middle"
|
|
47
|
-
style="font-size: var(--text-xs); font-family: var(--font-sans)"
|
|
47
|
+
style="font-size: var(--text-xs); font-family: var(--font-sans)"
|
|
48
|
+
>
|
|
48
49
|
{{ t.label }}
|
|
49
50
|
</svg:text>
|
|
50
51
|
</svg:g>
|
|
51
52
|
}
|
|
52
|
-
`, isInline: true
|
|
53
|
+
`, isInline: true });
|
|
53
54
|
}
|
|
54
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartAxisX, decorators: [{
|
|
55
56
|
type: Component,
|
|
56
57
|
args: [{
|
|
57
58
|
selector: 'svg:g[ChartAxisX]',
|
|
58
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
59
59
|
host: {
|
|
60
60
|
class: 'chart-axis chart-axis-x text-muted-foreground',
|
|
61
61
|
'[attr.transform]': 'transform()',
|
|
@@ -71,7 +71,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
71
71
|
class="fill-current"
|
|
72
72
|
y="18"
|
|
73
73
|
text-anchor="middle"
|
|
74
|
-
style="font-size: var(--text-xs); font-family: var(--font-sans)"
|
|
74
|
+
style="font-size: var(--text-xs); font-family: var(--font-sans)"
|
|
75
|
+
>
|
|
75
76
|
{{ t.label }}
|
|
76
77
|
</svg:text>
|
|
77
78
|
</svg:g>
|
|
@@ -104,8 +105,8 @@ class ChartAxisY {
|
|
|
104
105
|
return scale ? linearTicks(scale, this.tickCount(), this.tickFormat()) : [];
|
|
105
106
|
}, /* @ts-ignore */
|
|
106
107
|
...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
|
|
107
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartAxisY, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartAxisY, isStandalone: true, selector: "svg:g[ChartAxisY]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null }, tickLine: { classPropertyName: "tickLine", publicName: "tickLine", isSignal: true, isRequired: false, transformFunction: null }, tickFormat: { classPropertyName: "tickFormat", publicName: "tickFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "chart-axis chart-axis-y text-muted-foreground" }, ngImport: i0, template: `
|
|
109
110
|
<svg:line class="stroke-border" x1="0" x2="0" [attr.y1]="0" [attr.y2]="innerHeight()" />
|
|
110
111
|
@for (t of ticks(); track t.value) {
|
|
111
112
|
<svg:g [attr.transform]="'translate(0,' + t.offset + ')'">
|
|
@@ -117,18 +118,18 @@ class ChartAxisY {
|
|
|
117
118
|
x="-8"
|
|
118
119
|
dy="0.32em"
|
|
119
120
|
text-anchor="end"
|
|
120
|
-
style="font-size: var(--text-xs); font-family: var(--font-sans)"
|
|
121
|
+
style="font-size: var(--text-xs); font-family: var(--font-sans)"
|
|
122
|
+
>
|
|
121
123
|
{{ t.label }}
|
|
122
124
|
</svg:text>
|
|
123
125
|
</svg:g>
|
|
124
126
|
}
|
|
125
|
-
`, isInline: true
|
|
127
|
+
`, isInline: true });
|
|
126
128
|
}
|
|
127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartAxisY, decorators: [{
|
|
128
130
|
type: Component,
|
|
129
131
|
args: [{
|
|
130
132
|
selector: 'svg:g[ChartAxisY]',
|
|
131
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
132
133
|
host: {
|
|
133
134
|
class: 'chart-axis chart-axis-y text-muted-foreground',
|
|
134
135
|
},
|
|
@@ -144,7 +145,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
144
145
|
x="-8"
|
|
145
146
|
dy="0.32em"
|
|
146
147
|
text-anchor="end"
|
|
147
|
-
style="font-size: var(--text-xs); font-family: var(--font-sans)"
|
|
148
|
+
style="font-size: var(--text-xs); font-family: var(--font-sans)"
|
|
149
|
+
>
|
|
148
150
|
{{ t.label }}
|
|
149
151
|
</svg:text>
|
|
150
152
|
</svg:g>
|
|
@@ -176,8 +178,8 @@ class ChartGrid {
|
|
|
176
178
|
}
|
|
177
179
|
return { x1: offset, x2: offset, y1: 0, y2: this.ctx.innerHeight() };
|
|
178
180
|
};
|
|
179
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
180
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
181
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
182
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartGrid, isStandalone: true, selector: "svg:g[ChartGrid]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "chart-grid text-border" }, ngImport: i0, template: `
|
|
181
183
|
@for (t of ticks(); track t.value) {
|
|
182
184
|
<svg:line
|
|
183
185
|
class="stroke-border"
|
|
@@ -185,15 +187,15 @@ class ChartGrid {
|
|
|
185
187
|
[attr.x1]="line(t.offset).x1"
|
|
186
188
|
[attr.x2]="line(t.offset).x2"
|
|
187
189
|
[attr.y1]="line(t.offset).y1"
|
|
188
|
-
[attr.y2]="line(t.offset).y2"
|
|
190
|
+
[attr.y2]="line(t.offset).y2"
|
|
191
|
+
/>
|
|
189
192
|
}
|
|
190
|
-
`, isInline: true
|
|
193
|
+
`, isInline: true });
|
|
191
194
|
}
|
|
192
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartGrid, decorators: [{
|
|
193
196
|
type: Component,
|
|
194
197
|
args: [{
|
|
195
198
|
selector: 'svg:g[ChartGrid]',
|
|
196
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
197
199
|
host: {
|
|
198
200
|
class: 'chart-grid text-border',
|
|
199
201
|
},
|
|
@@ -205,7 +207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
205
207
|
[attr.x1]="line(t.offset).x1"
|
|
206
208
|
[attr.x2]="line(t.offset).x2"
|
|
207
209
|
[attr.y1]="line(t.offset).y1"
|
|
208
|
-
[attr.y2]="line(t.offset).y2"
|
|
210
|
+
[attr.y2]="line(t.offset).y2"
|
|
211
|
+
/>
|
|
209
212
|
}
|
|
210
213
|
`,
|
|
211
214
|
}]
|
|
@@ -236,8 +239,8 @@ class ChartCrosshair {
|
|
|
236
239
|
return { x1: 0, x2: this.cart.innerWidth(), y1: pos, y2: pos };
|
|
237
240
|
}, /* @ts-ignore */
|
|
238
241
|
...(ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []));
|
|
239
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
240
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
242
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartCrosshair, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartCrosshair, isStandalone: true, selector: "svg:g[ChartCrosshair]", host: { classAttribute: "chart-crosshair" }, ngImport: i0, template: `
|
|
241
244
|
@if (line(); as l) {
|
|
242
245
|
<svg:line
|
|
243
246
|
class="stroke-border"
|
|
@@ -245,15 +248,15 @@ class ChartCrosshair {
|
|
|
245
248
|
[attr.x1]="l.x1"
|
|
246
249
|
[attr.x2]="l.x2"
|
|
247
250
|
[attr.y1]="l.y1"
|
|
248
|
-
[attr.y2]="l.y2"
|
|
251
|
+
[attr.y2]="l.y2"
|
|
252
|
+
/>
|
|
249
253
|
}
|
|
250
|
-
`, isInline: true
|
|
254
|
+
`, isInline: true });
|
|
251
255
|
}
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
256
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartCrosshair, decorators: [{
|
|
253
257
|
type: Component,
|
|
254
258
|
args: [{
|
|
255
259
|
selector: 'svg:g[ChartCrosshair]',
|
|
256
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
257
260
|
host: { class: 'chart-crosshair' },
|
|
258
261
|
template: `
|
|
259
262
|
@if (line(); as l) {
|
|
@@ -263,7 +266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
263
266
|
[attr.x1]="l.x1"
|
|
264
267
|
[attr.x2]="l.x2"
|
|
265
268
|
[attr.y1]="l.y1"
|
|
266
|
-
[attr.y2]="l.y2"
|
|
269
|
+
[attr.y2]="l.y2"
|
|
270
|
+
/>
|
|
267
271
|
}
|
|
268
272
|
`,
|
|
269
273
|
}]
|
|
@@ -314,9 +318,19 @@ class ChartBrush {
|
|
|
314
318
|
const first = scale(categories[startVisible]) ?? 0;
|
|
315
319
|
const last = (scale(categories[endVisible]) ?? 0) + scale.bandwidth();
|
|
316
320
|
if (cart.orientation() === 'vertical') {
|
|
317
|
-
return {
|
|
321
|
+
return {
|
|
322
|
+
x: Math.min(first, last),
|
|
323
|
+
y: 0,
|
|
324
|
+
width: Math.abs(last - first),
|
|
325
|
+
height: cart.innerHeight(),
|
|
326
|
+
};
|
|
318
327
|
}
|
|
319
|
-
return {
|
|
328
|
+
return {
|
|
329
|
+
x: 0,
|
|
330
|
+
y: Math.min(first, last),
|
|
331
|
+
width: cart.innerWidth(),
|
|
332
|
+
height: Math.abs(last - first),
|
|
333
|
+
};
|
|
320
334
|
}, /* @ts-ignore */
|
|
321
335
|
...(ngDevMode ? [{ debugName: "categoryPreview" }] : /* istanbul ignore next */ []));
|
|
322
336
|
scatterPreviewRect = computed(() => {
|
|
@@ -368,7 +382,10 @@ class ChartBrush {
|
|
|
368
382
|
const absoluteIndex = visibleStart + index;
|
|
369
383
|
if (event.pointerType === 'touch' && this.categorical.hasZoom()) {
|
|
370
384
|
this.mode.set('category-pan');
|
|
371
|
-
this.categoryPanStart.set({
|
|
385
|
+
this.categoryPanStart.set({
|
|
386
|
+
coord: this.pointerAxis(local),
|
|
387
|
+
range: this.categorical.zoomRange(),
|
|
388
|
+
});
|
|
372
389
|
return;
|
|
373
390
|
}
|
|
374
391
|
this.mode.set('category-brush');
|
|
@@ -571,8 +588,8 @@ class ChartBrush {
|
|
|
571
588
|
pointerAxis(local) {
|
|
572
589
|
return this.cart?.orientation() === 'horizontal' ? local.y : local.x;
|
|
573
590
|
}
|
|
574
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
575
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
591
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartBrush, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
592
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartBrush, isStandalone: true, selector: "svg:g[ChartBrush]", host: { listeners: { "window:pointermove": "onPointerMove($event)", "window:pointerup": "onPointerUp($event)", "window:pointercancel": "onPointerCancel($event)" }, classAttribute: "chart-brush" }, viewQueries: [{ propertyName: "hitbox", first: true, predicate: ["hitbox"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
576
593
|
<svg:rect
|
|
577
594
|
#hitbox
|
|
578
595
|
class="fill-transparent touch-none"
|
|
@@ -585,7 +602,8 @@ class ChartBrush {
|
|
|
585
602
|
(pointerup)="onPointerUp($event)"
|
|
586
603
|
(pointercancel)="onPointerCancel($event)"
|
|
587
604
|
(wheel)="onWheel($event)"
|
|
588
|
-
(dblclick)="resetZoom()"
|
|
605
|
+
(dblclick)="resetZoom()"
|
|
606
|
+
/>
|
|
589
607
|
|
|
590
608
|
@if (categoryPreview(); as rect) {
|
|
591
609
|
<svg:rect
|
|
@@ -594,7 +612,8 @@ class ChartBrush {
|
|
|
594
612
|
[attr.y]="rect.y"
|
|
595
613
|
[attr.width]="rect.width"
|
|
596
614
|
[attr.height]="rect.height"
|
|
597
|
-
stroke-dasharray="4 3"
|
|
615
|
+
stroke-dasharray="4 3"
|
|
616
|
+
/>
|
|
598
617
|
}
|
|
599
618
|
|
|
600
619
|
@if (scatterPreviewRect(); as rect) {
|
|
@@ -604,15 +623,15 @@ class ChartBrush {
|
|
|
604
623
|
[attr.y]="rect.y"
|
|
605
624
|
[attr.width]="rect.width"
|
|
606
625
|
[attr.height]="rect.height"
|
|
607
|
-
stroke-dasharray="4 3"
|
|
626
|
+
stroke-dasharray="4 3"
|
|
627
|
+
/>
|
|
608
628
|
}
|
|
609
|
-
`, isInline: true
|
|
629
|
+
`, isInline: true });
|
|
610
630
|
}
|
|
611
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartBrush, decorators: [{
|
|
612
632
|
type: Component,
|
|
613
633
|
args: [{
|
|
614
634
|
selector: 'svg:g[ChartBrush]',
|
|
615
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
616
635
|
host: {
|
|
617
636
|
class: 'chart-brush',
|
|
618
637
|
'(window:pointermove)': 'onPointerMove($event)',
|
|
@@ -632,7 +651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
632
651
|
(pointerup)="onPointerUp($event)"
|
|
633
652
|
(pointercancel)="onPointerCancel($event)"
|
|
634
653
|
(wheel)="onWheel($event)"
|
|
635
|
-
(dblclick)="resetZoom()"
|
|
654
|
+
(dblclick)="resetZoom()"
|
|
655
|
+
/>
|
|
636
656
|
|
|
637
657
|
@if (categoryPreview(); as rect) {
|
|
638
658
|
<svg:rect
|
|
@@ -641,7 +661,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
641
661
|
[attr.y]="rect.y"
|
|
642
662
|
[attr.width]="rect.width"
|
|
643
663
|
[attr.height]="rect.height"
|
|
644
|
-
stroke-dasharray="4 3"
|
|
664
|
+
stroke-dasharray="4 3"
|
|
665
|
+
/>
|
|
645
666
|
}
|
|
646
667
|
|
|
647
668
|
@if (scatterPreviewRect(); as rect) {
|
|
@@ -651,7 +672,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
651
672
|
[attr.y]="rect.y"
|
|
652
673
|
[attr.width]="rect.width"
|
|
653
674
|
[attr.height]="rect.height"
|
|
654
|
-
stroke-dasharray="4 3"
|
|
675
|
+
stroke-dasharray="4 3"
|
|
676
|
+
/>
|
|
655
677
|
}
|
|
656
678
|
`,
|
|
657
679
|
}]
|
|
@@ -705,10 +727,10 @@ class ChartPointerTracker {
|
|
|
705
727
|
onLeave() {
|
|
706
728
|
this.root.activePoint.set(null);
|
|
707
729
|
}
|
|
708
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
709
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.
|
|
730
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartPointerTracker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
731
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: ChartPointerTracker, isStandalone: true, selector: "svg:svg[ChartPointerTracker]", host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
|
|
710
732
|
}
|
|
711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartPointerTracker, decorators: [{
|
|
712
734
|
type: Directive,
|
|
713
735
|
args: [{
|
|
714
736
|
selector: 'svg:svg[ChartPointerTracker]',
|
|
@@ -790,7 +812,9 @@ class ChartTooltip {
|
|
|
790
812
|
const rows = this.data();
|
|
791
813
|
if (!active || !rows)
|
|
792
814
|
return null;
|
|
793
|
-
const dataIndex = active.datumIndex != null && active.datumIndex < rows.length
|
|
815
|
+
const dataIndex = active.datumIndex != null && active.datumIndex < rows.length
|
|
816
|
+
? active.datumIndex
|
|
817
|
+
: active.index;
|
|
794
818
|
if (dataIndex < 0 || dataIndex >= rows.length)
|
|
795
819
|
return null;
|
|
796
820
|
const cfg = this.root.config();
|
|
@@ -860,14 +884,15 @@ class ChartTooltip {
|
|
|
860
884
|
return { x, y };
|
|
861
885
|
}, /* @ts-ignore */
|
|
862
886
|
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
863
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
864
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
887
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
888
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartTooltip, isStandalone: true, selector: "ChartTooltip", inputs: { xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "!visible()" }, classAttribute: "pointer-events-none absolute inset-0 z-10" }, queries: [{ propertyName: "customTpl", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
865
889
|
@if (payload(); as p) {
|
|
866
890
|
<div
|
|
867
891
|
role="tooltip"
|
|
868
892
|
class="pointer-events-none absolute grid min-w-32 max-w-72 -translate-x-1/2 -translate-y-full gap-1.5 rounded-lg border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-3 py-1.5 text-xs shadow-md"
|
|
869
893
|
[style.left.px]="position().x"
|
|
870
|
-
[style.top.px]="position().y"
|
|
894
|
+
[style.top.px]="position().y"
|
|
895
|
+
>
|
|
871
896
|
@if (customTpl(); as tpl) {
|
|
872
897
|
<ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }" />
|
|
873
898
|
} @else {
|
|
@@ -883,15 +908,20 @@ class ChartTooltip {
|
|
|
883
908
|
<span
|
|
884
909
|
class="h-2.5 w-2.5 shrink-0 rounded-sm"
|
|
885
910
|
[style.background]="row.color"
|
|
886
|
-
[style.borderColor]="row.color"
|
|
911
|
+
[style.borderColor]="row.color"
|
|
912
|
+
></span>
|
|
887
913
|
}
|
|
888
914
|
@case ('line') {
|
|
889
|
-
<span
|
|
915
|
+
<span
|
|
916
|
+
class="h-full min-h-4 w-1 shrink-0 rounded-sm"
|
|
917
|
+
[style.background]="row.color"
|
|
918
|
+
></span>
|
|
890
919
|
}
|
|
891
920
|
@case ('dashed') {
|
|
892
921
|
<span
|
|
893
922
|
class="h-0 w-3 shrink-0 self-center border-t-2 border-dashed"
|
|
894
|
-
[style.borderColor]="row.color"
|
|
923
|
+
[style.borderColor]="row.color"
|
|
924
|
+
></span>
|
|
895
925
|
}
|
|
896
926
|
}
|
|
897
927
|
@if (row.icon; as icon) {
|
|
@@ -917,13 +947,12 @@ class ChartTooltip {
|
|
|
917
947
|
{{ p.category }}
|
|
918
948
|
}
|
|
919
949
|
</div>
|
|
920
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }]
|
|
950
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
|
|
921
951
|
}
|
|
922
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartTooltip, decorators: [{
|
|
923
953
|
type: Component,
|
|
924
954
|
args: [{
|
|
925
955
|
selector: 'ChartTooltip',
|
|
926
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
927
956
|
imports: [NgTemplateOutlet, NgComponentOutlet],
|
|
928
957
|
host: {
|
|
929
958
|
class: 'pointer-events-none absolute inset-0 z-10',
|
|
@@ -935,7 +964,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
935
964
|
role="tooltip"
|
|
936
965
|
class="pointer-events-none absolute grid min-w-32 max-w-72 -translate-x-1/2 -translate-y-full gap-1.5 rounded-lg border border-[hsl(var(--border)/var(--opacity-60))] bg-background px-3 py-1.5 text-xs shadow-md"
|
|
937
966
|
[style.left.px]="position().x"
|
|
938
|
-
[style.top.px]="position().y"
|
|
967
|
+
[style.top.px]="position().y"
|
|
968
|
+
>
|
|
939
969
|
@if (customTpl(); as tpl) {
|
|
940
970
|
<ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }" />
|
|
941
971
|
} @else {
|
|
@@ -951,15 +981,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
951
981
|
<span
|
|
952
982
|
class="h-2.5 w-2.5 shrink-0 rounded-sm"
|
|
953
983
|
[style.background]="row.color"
|
|
954
|
-
[style.borderColor]="row.color"
|
|
984
|
+
[style.borderColor]="row.color"
|
|
985
|
+
></span>
|
|
955
986
|
}
|
|
956
987
|
@case ('line') {
|
|
957
|
-
<span
|
|
988
|
+
<span
|
|
989
|
+
class="h-full min-h-4 w-1 shrink-0 rounded-sm"
|
|
990
|
+
[style.background]="row.color"
|
|
991
|
+
></span>
|
|
958
992
|
}
|
|
959
993
|
@case ('dashed') {
|
|
960
994
|
<span
|
|
961
995
|
class="h-0 w-3 shrink-0 self-center border-t-2 border-dashed"
|
|
962
|
-
[style.borderColor]="row.color"
|
|
996
|
+
[style.borderColor]="row.color"
|
|
997
|
+
></span>
|
|
963
998
|
}
|
|
964
999
|
}
|
|
965
1000
|
@if (row.icon; as icon) {
|
|
@@ -1017,9 +1052,12 @@ class ChartLegend {
|
|
|
1017
1052
|
toggle(key) {
|
|
1018
1053
|
this.root.toggleSeries(key);
|
|
1019
1054
|
}
|
|
1020
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1021
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1022
|
-
<ul
|
|
1055
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1056
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartLegend, isStandalone: true, selector: "ChartLegend", host: { classAttribute: "block pt-3" }, ngImport: i0, template: `
|
|
1057
|
+
<ul
|
|
1058
|
+
class="flex flex-wrap items-center justify-center gap-3 text-xs"
|
|
1059
|
+
aria-label="Toggle chart series visibility"
|
|
1060
|
+
>
|
|
1023
1061
|
@for (item of items(); track item.seriesKey) {
|
|
1024
1062
|
<li>
|
|
1025
1063
|
<button
|
|
@@ -1028,23 +1066,29 @@ class ChartLegend {
|
|
|
1028
1066
|
[class.opacity-50]="item.hidden"
|
|
1029
1067
|
[attr.aria-pressed]="!item.hidden"
|
|
1030
1068
|
[attr.aria-label]="(item.hidden ? 'Show ' : 'Hide ') + item.label"
|
|
1031
|
-
(click)="toggle(item.seriesKey)"
|
|
1032
|
-
|
|
1069
|
+
(click)="toggle(item.seriesKey)"
|
|
1070
|
+
>
|
|
1071
|
+
<span
|
|
1072
|
+
class="inline-block h-2.5 w-2.5 rounded-sm"
|
|
1073
|
+
[style.background]="item.color"
|
|
1074
|
+
></span>
|
|
1033
1075
|
<span class="text-muted-foreground">{{ item.label }}</span>
|
|
1034
1076
|
</button>
|
|
1035
1077
|
</li>
|
|
1036
1078
|
}
|
|
1037
1079
|
</ul>
|
|
1038
|
-
`, isInline: true
|
|
1080
|
+
`, isInline: true });
|
|
1039
1081
|
}
|
|
1040
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1082
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartLegend, decorators: [{
|
|
1041
1083
|
type: Component,
|
|
1042
1084
|
args: [{
|
|
1043
1085
|
selector: 'ChartLegend',
|
|
1044
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1045
1086
|
host: { class: 'block pt-3' },
|
|
1046
1087
|
template: `
|
|
1047
|
-
<ul
|
|
1088
|
+
<ul
|
|
1089
|
+
class="flex flex-wrap items-center justify-center gap-3 text-xs"
|
|
1090
|
+
aria-label="Toggle chart series visibility"
|
|
1091
|
+
>
|
|
1048
1092
|
@for (item of items(); track item.seriesKey) {
|
|
1049
1093
|
<li>
|
|
1050
1094
|
<button
|
|
@@ -1053,8 +1097,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
1053
1097
|
[class.opacity-50]="item.hidden"
|
|
1054
1098
|
[attr.aria-pressed]="!item.hidden"
|
|
1055
1099
|
[attr.aria-label]="(item.hidden ? 'Show ' : 'Hide ') + item.label"
|
|
1056
|
-
(click)="toggle(item.seriesKey)"
|
|
1057
|
-
|
|
1100
|
+
(click)="toggle(item.seriesKey)"
|
|
1101
|
+
>
|
|
1102
|
+
<span
|
|
1103
|
+
class="inline-block h-2.5 w-2.5 rounded-sm"
|
|
1104
|
+
[style.background]="item.color"
|
|
1105
|
+
></span>
|
|
1058
1106
|
<span class="text-muted-foreground">{{ item.label }}</span>
|
|
1059
1107
|
</button>
|
|
1060
1108
|
</li>
|
|
@@ -1101,43 +1149,50 @@ class ChartZoomControls {
|
|
|
1101
1149
|
this.categorical?.resetZoom();
|
|
1102
1150
|
this.scatter?.resetZoom();
|
|
1103
1151
|
}
|
|
1104
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
1152
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartZoomControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: ChartZoomControls, isStandalone: true, selector: "ChartZoomControls", host: { classAttribute: "mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground" }, ngImport: i0, template: `
|
|
1106
1154
|
<p>{{ hint() }}</p>
|
|
1107
1155
|
|
|
1108
1156
|
@if (status(); as currentStatus) {
|
|
1109
1157
|
<div class="flex flex-wrap items-center gap-2">
|
|
1110
|
-
<span
|
|
1158
|
+
<span
|
|
1159
|
+
class="rounded-full border border-border bg-background px-2.5 py-1 font-medium text-foreground"
|
|
1160
|
+
>
|
|
1111
1161
|
{{ currentStatus }}
|
|
1112
1162
|
</span>
|
|
1113
1163
|
<button
|
|
1114
1164
|
type="button"
|
|
1115
1165
|
class="inline-flex min-h-11 items-center rounded-md border border-border bg-background px-3 text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
|
1116
|
-
(click)="resetZoom()"
|
|
1166
|
+
(click)="resetZoom()"
|
|
1167
|
+
>
|
|
1117
1168
|
Reset zoom
|
|
1118
1169
|
</button>
|
|
1119
1170
|
</div>
|
|
1120
1171
|
}
|
|
1121
|
-
`, isInline: true
|
|
1172
|
+
`, isInline: true });
|
|
1122
1173
|
}
|
|
1123
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ChartZoomControls, decorators: [{
|
|
1124
1175
|
type: Component,
|
|
1125
1176
|
args: [{
|
|
1126
1177
|
selector: 'ChartZoomControls',
|
|
1127
|
-
|
|
1128
|
-
|
|
1178
|
+
host: {
|
|
1179
|
+
class: 'mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground',
|
|
1180
|
+
},
|
|
1129
1181
|
template: `
|
|
1130
1182
|
<p>{{ hint() }}</p>
|
|
1131
1183
|
|
|
1132
1184
|
@if (status(); as currentStatus) {
|
|
1133
1185
|
<div class="flex flex-wrap items-center gap-2">
|
|
1134
|
-
<span
|
|
1186
|
+
<span
|
|
1187
|
+
class="rounded-full border border-border bg-background px-2.5 py-1 font-medium text-foreground"
|
|
1188
|
+
>
|
|
1135
1189
|
{{ currentStatus }}
|
|
1136
1190
|
</span>
|
|
1137
1191
|
<button
|
|
1138
1192
|
type="button"
|
|
1139
1193
|
class="inline-flex min-h-11 items-center rounded-md border border-border bg-background px-3 text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
|
|
1140
|
-
(click)="resetZoom()"
|
|
1194
|
+
(click)="resetZoom()"
|
|
1195
|
+
>
|
|
1141
1196
|
Reset zoom
|
|
1142
1197
|
</button>
|
|
1143
1198
|
</div>
|
|
@@ -1147,14 +1202,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
1147
1202
|
}] });
|
|
1148
1203
|
|
|
1149
1204
|
class PieCenter {
|
|
1150
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1151
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.
|
|
1205
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PieCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1206
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: PieCenter, isStandalone: true, selector: "ChartPieCenter", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
1152
1207
|
}
|
|
1153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PieCenter, decorators: [{
|
|
1154
1209
|
type: Component,
|
|
1155
1210
|
args: [{
|
|
1156
1211
|
selector: 'ChartPieCenter',
|
|
1157
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1158
1212
|
host: {
|
|
1159
1213
|
class: 'flex max-w-[10rem] flex-col items-center justify-center text-center',
|
|
1160
1214
|
},
|
|
@@ -1163,14 +1217,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
|
|
|
1163
1217
|
}] });
|
|
1164
1218
|
|
|
1165
1219
|
class RadialCenter {
|
|
1166
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1167
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.
|
|
1220
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1221
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: RadialCenter, isStandalone: true, selector: "ChartRadialCenter", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true });
|
|
1168
1222
|
}
|
|
1169
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RadialCenter, decorators: [{
|
|
1170
1224
|
type: Component,
|
|
1171
1225
|
args: [{
|
|
1172
1226
|
selector: 'ChartRadialCenter',
|
|
1173
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1174
1227
|
host: {
|
|
1175
1228
|
class: 'flex max-w-[10rem] flex-col items-center justify-center text-center',
|
|
1176
1229
|
},
|