@skdx/angular-charts 0.34.0 → 0.34.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -1
- package/fesm2022/skdx-angular-charts-area.mjs +25 -3
- package/fesm2022/skdx-angular-charts-area.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-bar.mjs +25 -3
- package/fesm2022/skdx-angular-charts-bar.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-boxplot.mjs +62 -6
- package/fesm2022/skdx-angular-charts-boxplot.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-bubble.mjs +119 -0
- package/fesm2022/skdx-angular-charts-bubble.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-bullet.mjs +110 -0
- package/fesm2022/skdx-angular-charts-bullet.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-bump.mjs +113 -0
- package/fesm2022/skdx-angular-charts-bump.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-candlestick.mjs +40 -5
- package/fesm2022/skdx-angular-charts-candlestick.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-chord.mjs +49 -10
- package/fesm2022/skdx-angular-charts-chord.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-circle-packing.mjs +107 -0
- package/fesm2022/skdx-angular-charts-circle-packing.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-combo.mjs +82 -0
- package/fesm2022/skdx-angular-charts-combo.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-dumbbell.mjs +116 -0
- package/fesm2022/skdx-angular-charts-dumbbell.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-funnel.mjs +39 -5
- package/fesm2022/skdx-angular-charts-funnel.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-gantt.mjs +47 -6
- package/fesm2022/skdx-angular-charts-gantt.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-gauge.mjs +134 -0
- package/fesm2022/skdx-angular-charts-gauge.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-heatmap.mjs +63 -5
- package/fesm2022/skdx-angular-charts-heatmap.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-histogram.mjs +134 -0
- package/fesm2022/skdx-angular-charts-histogram.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-icicle.mjs +119 -0
- package/fesm2022/skdx-angular-charts-icicle.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-internal.mjs +9286 -2473
- package/fesm2022/skdx-angular-charts-internal.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-line.mjs +25 -3
- package/fesm2022/skdx-angular-charts-line.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-linear-gauge.mjs +119 -0
- package/fesm2022/skdx-angular-charts-linear-gauge.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-map.mjs +51 -5
- package/fesm2022/skdx-angular-charts-map.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-marimekko.mjs +103 -0
- package/fesm2022/skdx-angular-charts-marimekko.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-network.mjs +113 -0
- package/fesm2022/skdx-angular-charts-network.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-organization.mjs +111 -0
- package/fesm2022/skdx-angular-charts-organization.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-parallel.mjs +105 -0
- package/fesm2022/skdx-angular-charts-parallel.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-pareto.mjs +123 -0
- package/fesm2022/skdx-angular-charts-pareto.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-pie.mjs +47 -5
- package/fesm2022/skdx-angular-charts-pie.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-polar-area.mjs +118 -0
- package/fesm2022/skdx-angular-charts-polar-area.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-radar.mjs +61 -10
- package/fesm2022/skdx-angular-charts-radar.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-radial.mjs +25 -3
- package/fesm2022/skdx-angular-charts-radial.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-range.mjs +133 -0
- package/fesm2022/skdx-angular-charts-range.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-sankey.mjs +67 -6
- package/fesm2022/skdx-angular-charts-sankey.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-scatter.mjs +42 -5
- package/fesm2022/skdx-angular-charts-scatter.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-sparkline.mjs +39 -5
- package/fesm2022/skdx-angular-charts-sparkline.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-sunburst.mjs +74 -6
- package/fesm2022/skdx-angular-charts-sunburst.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-swarm.mjs +101 -0
- package/fesm2022/skdx-angular-charts-swarm.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-timeline.mjs +98 -0
- package/fesm2022/skdx-angular-charts-timeline.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-tree.mjs +118 -0
- package/fesm2022/skdx-angular-charts-tree.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-treemap.mjs +63 -6
- package/fesm2022/skdx-angular-charts-treemap.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts-waffle.mjs +113 -0
- package/fesm2022/skdx-angular-charts-waffle.mjs.map +1 -0
- package/fesm2022/skdx-angular-charts-waterfall.mjs +62 -6
- package/fesm2022/skdx-angular-charts-waterfall.mjs.map +1 -1
- package/fesm2022/skdx-angular-charts.mjs +22 -1
- package/fesm2022/skdx-angular-charts.mjs.map +1 -1
- package/package.json +86 -2
- package/types/skdx-angular-charts-boxplot.d.ts +18 -3
- package/types/skdx-angular-charts-bubble.d.ts +27 -0
- package/types/skdx-angular-charts-bullet.d.ts +24 -0
- package/types/skdx-angular-charts-bump.d.ts +25 -0
- package/types/skdx-angular-charts-candlestick.d.ts +7 -2
- package/types/skdx-angular-charts-chord.d.ts +11 -4
- package/types/skdx-angular-charts-circle-packing.d.ts +23 -0
- package/types/skdx-angular-charts-combo.d.ts +12 -0
- package/types/skdx-angular-charts-dumbbell.d.ts +26 -0
- package/types/skdx-angular-charts-funnel.d.ts +7 -1
- package/types/skdx-angular-charts-gantt.d.ts +9 -2
- package/types/skdx-angular-charts-gauge.d.ts +36 -0
- package/types/skdx-angular-charts-heatmap.d.ts +20 -2
- package/types/skdx-angular-charts-histogram.d.ts +34 -0
- package/types/skdx-angular-charts-icicle.d.ts +29 -0
- package/types/skdx-angular-charts-internal.d.ts +1952 -89
- package/types/skdx-angular-charts-linear-gauge.d.ts +29 -0
- package/types/skdx-angular-charts-map.d.ts +14 -2
- package/types/skdx-angular-charts-marimekko.d.ts +21 -0
- package/types/skdx-angular-charts-network.d.ts +25 -0
- package/types/skdx-angular-charts-organization.d.ts +25 -0
- package/types/skdx-angular-charts-parallel.d.ts +25 -0
- package/types/skdx-angular-charts-pareto.d.ts +27 -0
- package/types/skdx-angular-charts-pie.d.ts +11 -1
- package/types/skdx-angular-charts-polar-area.d.ts +28 -0
- package/types/skdx-angular-charts-radar.d.ts +20 -5
- package/types/skdx-angular-charts-range.d.ts +29 -0
- package/types/skdx-angular-charts-sankey.d.ts +20 -2
- package/types/skdx-angular-charts-scatter.d.ts +9 -2
- package/types/skdx-angular-charts-sparkline.d.ts +8 -2
- package/types/skdx-angular-charts-sunburst.d.ts +23 -2
- package/types/skdx-angular-charts-swarm.d.ts +19 -0
- package/types/skdx-angular-charts-timeline.d.ts +18 -0
- package/types/skdx-angular-charts-tree.d.ts +28 -0
- package/types/skdx-angular-charts-treemap.d.ts +18 -2
- package/types/skdx-angular-charts-waffle.d.ts +25 -0
- package/types/skdx-angular-charts-waterfall.d.ts +17 -3
- package/types/skdx-angular-charts.d.ts +22 -1
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { SkdxSizedBase, layoutDumbbellChart, SkdxChartRootComponent } from '@skdx/angular-charts/internal';
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
* Copyright (c) 2026 SkandaDX
|
|
7
|
+
* This file is part of the SkandaDX organization.
|
|
8
|
+
* Licensed under the MIT License. See LICENSE in the repository root.
|
|
9
|
+
*/
|
|
10
|
+
/** A start and an end value per category joined by a connector: before/after, plan/actual. */
|
|
11
|
+
class SkdxDumbbellChartComponent extends SkdxSizedBase {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.data = input.required(/* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
16
|
+
/** Name of the start markers, for the legend and tooltips. */
|
|
17
|
+
this.startLabel = input(/* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [undefined, { debugName: "startLabel" }] : /* istanbul ignore next */ []));
|
|
19
|
+
/** Name of the end markers. */
|
|
20
|
+
this.endLabel = input(/* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [undefined, { debugName: "endLabel" }] : /* istanbul ignore next */ []));
|
|
22
|
+
this.orientation = input(/* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
24
|
+
/** Write both values next to their markers. */
|
|
25
|
+
this.labels = input(false, /* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
27
|
+
/** Order categories by end value, or by the change. */
|
|
28
|
+
this.sort = input(/* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [undefined, { debugName: "sort" }] : /* istanbul ignore next */ []));
|
|
30
|
+
/** Marker radius in pixels. */
|
|
31
|
+
this.markerSize = input(/* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [undefined, { debugName: "markerSize" }] : /* istanbul ignore next */ []));
|
|
33
|
+
this.xAxis = input(/* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [undefined, { debugName: "xAxis" }] : /* istanbul ignore next */ []));
|
|
35
|
+
this.references = input(/* @ts-ignore */
|
|
36
|
+
...(ngDevMode ? [undefined, { debugName: "references" }] : /* istanbul ignore next */ []));
|
|
37
|
+
this.layout = computed(() => layoutDumbbellChart({
|
|
38
|
+
...this.sized(),
|
|
39
|
+
data: this.data(),
|
|
40
|
+
startLabel: this.startLabel(),
|
|
41
|
+
endLabel: this.endLabel(),
|
|
42
|
+
orientation: this.orientation(),
|
|
43
|
+
labels: this.labels(),
|
|
44
|
+
sort: this.sort(),
|
|
45
|
+
markerSize: this.markerSize(),
|
|
46
|
+
xAxis: this.xAxis(),
|
|
47
|
+
references: this.references(),
|
|
48
|
+
}), /* @ts-ignore */
|
|
49
|
+
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
50
|
+
}
|
|
51
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxDumbbellChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
52
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxDumbbellChartComponent, isStandalone: true, selector: "skdx-dumbbell-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, endLabel: { classPropertyName: "endLabel", publicName: "endLabel", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, markerSize: { classPropertyName: "markerSize", publicName: "markerSize", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
53
|
+
<skdx-chart-root
|
|
54
|
+
[layout]="layout()"
|
|
55
|
+
[options]="options()"
|
|
56
|
+
kind="dumbbell"
|
|
57
|
+
[label]="label() ?? 'Dumbbell chart'"
|
|
58
|
+
[zoomable]="zoomable()"
|
|
59
|
+
[selectionMode]="selectionMode()"
|
|
60
|
+
[editable]="editable()"
|
|
61
|
+
[syncId]="syncId()"
|
|
62
|
+
[crosshair]="syncedCrosshair()"
|
|
63
|
+
[responsive]="!!responsive()"
|
|
64
|
+
(itemClick)="itemClick.emit($event)"
|
|
65
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
66
|
+
(taskChange)="taskChange.emit($event)"
|
|
67
|
+
(hiddenSeriesChange)="toggle($event)"
|
|
68
|
+
(zoomChange)="zoom.set($event)"
|
|
69
|
+
(viewChange)="view.set($event)"
|
|
70
|
+
(selectedChange)="selected.set($event)"
|
|
71
|
+
(highlightedChange)="highlighted.set($event)"
|
|
72
|
+
(syncChange)="sync($event)"
|
|
73
|
+
(measured)="measuredWidth.set($event)"
|
|
74
|
+
></skdx-chart-root>
|
|
75
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "options", "kind", "label", "zoomable", "selectionMode", "editable", "syncId", "crosshair", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "viewChange", "selectedChange", "highlightedChange", "dataIssue", "taskChange", "syncChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
76
|
+
}
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxDumbbellChartComponent, decorators: [{
|
|
78
|
+
type: Component,
|
|
79
|
+
args: [{
|
|
80
|
+
selector: 'skdx-dumbbell-chart',
|
|
81
|
+
standalone: true,
|
|
82
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
83
|
+
imports: [SkdxChartRootComponent],
|
|
84
|
+
template: `
|
|
85
|
+
<skdx-chart-root
|
|
86
|
+
[layout]="layout()"
|
|
87
|
+
[options]="options()"
|
|
88
|
+
kind="dumbbell"
|
|
89
|
+
[label]="label() ?? 'Dumbbell chart'"
|
|
90
|
+
[zoomable]="zoomable()"
|
|
91
|
+
[selectionMode]="selectionMode()"
|
|
92
|
+
[editable]="editable()"
|
|
93
|
+
[syncId]="syncId()"
|
|
94
|
+
[crosshair]="syncedCrosshair()"
|
|
95
|
+
[responsive]="!!responsive()"
|
|
96
|
+
(itemClick)="itemClick.emit($event)"
|
|
97
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
98
|
+
(taskChange)="taskChange.emit($event)"
|
|
99
|
+
(hiddenSeriesChange)="toggle($event)"
|
|
100
|
+
(zoomChange)="zoom.set($event)"
|
|
101
|
+
(viewChange)="view.set($event)"
|
|
102
|
+
(selectedChange)="selected.set($event)"
|
|
103
|
+
(highlightedChange)="highlighted.set($event)"
|
|
104
|
+
(syncChange)="sync($event)"
|
|
105
|
+
(measured)="measuredWidth.set($event)"
|
|
106
|
+
></skdx-chart-root>
|
|
107
|
+
`,
|
|
108
|
+
}]
|
|
109
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], endLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endLabel", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], markerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "markerSize", required: false }] }], xAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxis", required: false }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: false }] }] } });
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Generated bundle index. Do not edit.
|
|
113
|
+
*/
|
|
114
|
+
|
|
115
|
+
export { SkdxDumbbellChartComponent };
|
|
116
|
+
//# sourceMappingURL=skdx-angular-charts-dumbbell.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-dumbbell.mjs","sources":["../../src/dumbbell/index.ts","../../src/dumbbell/skdx-angular-charts-dumbbell.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n layoutDumbbellChart,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type AxisOptions,\n type DumbbellDatum,\n type Reference,\n} from '@skdx/angular-charts/internal';\n\n/** A start and an end value per category joined by a connector: before/after, plan/actual. */\n@Component({\n selector: 'skdx-dumbbell-chart',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n [options]=\"options()\"\n kind=\"dumbbell\"\n [label]=\"label() ?? 'Dumbbell chart'\"\n [zoomable]=\"zoomable()\"\n [selectionMode]=\"selectionMode()\"\n [editable]=\"editable()\"\n [syncId]=\"syncId()\"\n [crosshair]=\"syncedCrosshair()\"\n [responsive]=\"!!responsive()\"\n (itemClick)=\"itemClick.emit($event)\"\n (dataIssue)=\"dataIssue.emit($event)\"\n (taskChange)=\"taskChange.emit($event)\"\n (hiddenSeriesChange)=\"toggle($event)\"\n (zoomChange)=\"zoom.set($event)\"\n (viewChange)=\"view.set($event)\"\n (selectedChange)=\"selected.set($event)\"\n (highlightedChange)=\"highlighted.set($event)\"\n (syncChange)=\"sync($event)\"\n (measured)=\"measuredWidth.set($event)\"\n ></skdx-chart-root>\n `,\n})\nexport class SkdxDumbbellChartComponent extends SkdxSizedBase {\n readonly data = input.required<DumbbellDatum[]>();\n /** Name of the start markers, for the legend and tooltips. */\n readonly startLabel = input<string>();\n /** Name of the end markers. */\n readonly endLabel = input<string>();\n readonly orientation = input<'horizontal' | 'vertical'>();\n /** Write both values next to their markers. */\n readonly labels = input(false);\n /** Order categories by end value, or by the change. */\n readonly sort = input<'asc' | 'desc' | 'change'>();\n /** Marker radius in pixels. */\n readonly markerSize = input<number>();\n readonly xAxis = input<AxisOptions>();\n readonly references = input<Reference[]>();\n\n protected readonly layout = computed(() =>\n layoutDumbbellChart({\n ...this.sized(),\n data: this.data(),\n startLabel: this.startLabel(),\n endLabel: this.endLabel(),\n orientation: this.orientation(),\n labels: this.labels(),\n sort: this.sort(),\n markerSize: this.markerSize(),\n xAxis: this.xAxis(),\n references: this.references(),\n }),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAaH;AA+BM,MAAO,0BAA2B,SAAQ,aAAa,CAAA;AA9B7D,IAAA,WAAA,GAAA;;QA+BW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ;iFAAmB;;AAExC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;kGAAU;;AAE5B,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK;gGAAU;AAC1B,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK;mGAA6B;;QAEhD,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,KAAK;mFAAC;;AAErB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;4FAA6B;;AAEzC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;kGAAU;AAC5B,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK;6FAAe;AAC5B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK;kGAAe;AAEvB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MACnC,mBAAmB,CAAC;YAClB,GAAG,IAAI,CAAC,KAAK,EAAE;AACf,YAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;AAC7B,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzB,YAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;AAC/B,YAAA,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;AACrB,YAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;AAC7B,YAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;AACnB,YAAA,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE;SAC9B,CAAC;mFACH;AACF,IAAA;8GA9BY,0BAA0B,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzB3B;;;;;;;;;;;;;;;;;;;;;;;AAuBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAxBS,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,UAAA,EAAA,QAAA,EAAA,WAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,WAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FA0BrB,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBA9BtC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,sBAAsB,CAAC;AACjC,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;AAuBT,EAAA,CAAA;AACF,iBAAA;;;AC/CD;;AAEG;;"}
|
|
@@ -17,28 +17,51 @@ class SkdxFunnelChartComponent extends SkdxSizedBase {
|
|
|
17
17
|
...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
18
18
|
this.variant = input(/* @ts-ignore */
|
|
19
19
|
...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
20
|
+
/** Gap between stages in pixels. */
|
|
21
|
+
this.gap = input(/* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [undefined, { debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
23
|
+
/** Stage labels inside, beside, or hidden. */
|
|
24
|
+
this.labelPosition = input(/* @ts-ignore */
|
|
25
|
+
...(ngDevMode ? [undefined, { debugName: "labelPosition" }] : /* istanbul ignore next */ []));
|
|
26
|
+
/** Order stages by value. */
|
|
27
|
+
this.sort = input(/* @ts-ignore */
|
|
28
|
+
...(ngDevMode ? [undefined, { debugName: "sort" }] : /* istanbul ignore next */ []));
|
|
20
29
|
this.layout = computed(() => layoutFunnelChart({
|
|
21
30
|
...this.sized(),
|
|
22
31
|
data: this.data(),
|
|
23
32
|
orientation: this.orientation(),
|
|
24
33
|
variant: this.variant(),
|
|
34
|
+
gap: this.gap(),
|
|
35
|
+
labelPosition: this.labelPosition(),
|
|
36
|
+
sort: this.sort(),
|
|
25
37
|
}), /* @ts-ignore */
|
|
26
38
|
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
27
39
|
}
|
|
28
40
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxFunnelChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxFunnelChartComponent, isStandalone: true, selector: "skdx-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", 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 } }, usesInheritance: true, ngImport: i0, template: `
|
|
41
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxFunnelChartComponent, isStandalone: true, selector: "skdx-funnel-chart", inputs: { data: { classPropertyName: "data", publicName: "data", 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 }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
30
42
|
<skdx-chart-root
|
|
31
43
|
[layout]="layout()"
|
|
44
|
+
[options]="options()"
|
|
32
45
|
kind="funnel"
|
|
33
46
|
[label]="label() ?? 'Funnel chart'"
|
|
34
47
|
[zoomable]="zoomable()"
|
|
35
|
-
[
|
|
48
|
+
[selectionMode]="selectionMode()"
|
|
49
|
+
[editable]="editable()"
|
|
50
|
+
[syncId]="syncId()"
|
|
51
|
+
[crosshair]="syncedCrosshair()"
|
|
52
|
+
[responsive]="!!responsive()"
|
|
36
53
|
(itemClick)="itemClick.emit($event)"
|
|
54
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
55
|
+
(taskChange)="taskChange.emit($event)"
|
|
37
56
|
(hiddenSeriesChange)="toggle($event)"
|
|
38
57
|
(zoomChange)="zoom.set($event)"
|
|
58
|
+
(viewChange)="view.set($event)"
|
|
59
|
+
(selectedChange)="selected.set($event)"
|
|
60
|
+
(highlightedChange)="highlighted.set($event)"
|
|
61
|
+
(syncChange)="sync($event)"
|
|
39
62
|
(measured)="measuredWidth.set($event)"
|
|
40
63
|
></skdx-chart-root>
|
|
41
|
-
`, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label", "zoomable", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
64
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "options", "kind", "label", "zoomable", "selectionMode", "editable", "syncId", "crosshair", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "viewChange", "selectedChange", "highlightedChange", "dataIssue", "taskChange", "syncChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
42
65
|
}
|
|
43
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxFunnelChartComponent, decorators: [{
|
|
44
67
|
type: Component,
|
|
@@ -50,18 +73,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
50
73
|
template: `
|
|
51
74
|
<skdx-chart-root
|
|
52
75
|
[layout]="layout()"
|
|
76
|
+
[options]="options()"
|
|
53
77
|
kind="funnel"
|
|
54
78
|
[label]="label() ?? 'Funnel chart'"
|
|
55
79
|
[zoomable]="zoomable()"
|
|
56
|
-
[
|
|
80
|
+
[selectionMode]="selectionMode()"
|
|
81
|
+
[editable]="editable()"
|
|
82
|
+
[syncId]="syncId()"
|
|
83
|
+
[crosshair]="syncedCrosshair()"
|
|
84
|
+
[responsive]="!!responsive()"
|
|
57
85
|
(itemClick)="itemClick.emit($event)"
|
|
86
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
87
|
+
(taskChange)="taskChange.emit($event)"
|
|
58
88
|
(hiddenSeriesChange)="toggle($event)"
|
|
59
89
|
(zoomChange)="zoom.set($event)"
|
|
90
|
+
(viewChange)="view.set($event)"
|
|
91
|
+
(selectedChange)="selected.set($event)"
|
|
92
|
+
(highlightedChange)="highlighted.set($event)"
|
|
93
|
+
(syncChange)="sync($event)"
|
|
60
94
|
(measured)="measuredWidth.set($event)"
|
|
61
95
|
></skdx-chart-root>
|
|
62
96
|
`,
|
|
63
97
|
}]
|
|
64
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
98
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }] } });
|
|
65
99
|
|
|
66
100
|
/**
|
|
67
101
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skdx-angular-charts-funnel.mjs","sources":["../../src/funnel/index.ts","../../src/funnel/skdx-angular-charts-funnel.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n layoutFunnelChart,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type Datum,\n} from '@skdx/angular-charts/internal';\n\n/** Stages narrowing with their value, or a pyramid; vertical or horizontal. */\n@Component({\n selector: 'skdx-funnel-chart',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n kind=\"funnel\"\n [label]=\"label() ?? 'Funnel chart'\"\n [zoomable]=\"zoomable()\"\n [responsive]=\"responsive()\"\n (itemClick)=\"itemClick.emit($event)\"\n (hiddenSeriesChange)=\"toggle($event)\"\n (zoomChange)=\"zoom.set($event)\"\n (measured)=\"measuredWidth.set($event)\"\n ></skdx-chart-root>\n `,\n})\nexport class SkdxFunnelChartComponent extends SkdxSizedBase {\n readonly data = input.required<Datum[]>();\n readonly orientation = input<'vertical' | 'horizontal'>();\n readonly variant = input<'funnel' | 'pyramid'>();\n\n protected readonly layout = computed(() =>\n layoutFunnelChart({\n ...this.sized(),\n data: this.data(),\n orientation: this.orientation(),\n variant: this.variant(),\n }),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAWH;
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-funnel.mjs","sources":["../../src/funnel/index.ts","../../src/funnel/skdx-angular-charts-funnel.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n layoutFunnelChart,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type Datum,\n} from '@skdx/angular-charts/internal';\n\n/** Stages narrowing with their value, or a pyramid; vertical or horizontal. */\n@Component({\n selector: 'skdx-funnel-chart',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n [options]=\"options()\"\n kind=\"funnel\"\n [label]=\"label() ?? 'Funnel chart'\"\n [zoomable]=\"zoomable()\"\n [selectionMode]=\"selectionMode()\"\n [editable]=\"editable()\"\n [syncId]=\"syncId()\"\n [crosshair]=\"syncedCrosshair()\"\n [responsive]=\"!!responsive()\"\n (itemClick)=\"itemClick.emit($event)\"\n (dataIssue)=\"dataIssue.emit($event)\"\n (taskChange)=\"taskChange.emit($event)\"\n (hiddenSeriesChange)=\"toggle($event)\"\n (zoomChange)=\"zoom.set($event)\"\n (viewChange)=\"view.set($event)\"\n (selectedChange)=\"selected.set($event)\"\n (highlightedChange)=\"highlighted.set($event)\"\n (syncChange)=\"sync($event)\"\n (measured)=\"measuredWidth.set($event)\"\n ></skdx-chart-root>\n `,\n})\nexport class SkdxFunnelChartComponent extends SkdxSizedBase {\n readonly data = input.required<Datum[]>();\n readonly orientation = input<'vertical' | 'horizontal'>();\n readonly variant = input<'funnel' | 'pyramid'>();\n /** Gap between stages in pixels. */\n readonly gap = input<number>();\n /** Stage labels inside, beside, or hidden. */\n readonly labelPosition = input<'inside' | 'outside' | 'none'>();\n /** Order stages by value. */\n readonly sort = input<'asc' | 'desc'>();\n\n protected readonly layout = computed(() =>\n layoutFunnelChart({\n ...this.sized(),\n data: this.data(),\n orientation: this.orientation(),\n variant: this.variant(),\n gap: this.gap(),\n labelPosition: this.labelPosition(),\n sort: this.sort(),\n }),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -16,23 +16,53 @@ class SkdxGanttChartComponent extends SkdxSizedBase {
|
|
|
16
16
|
/** Vertical lines and bands in time coordinates, e.g. today. */
|
|
17
17
|
this.references = input(/* @ts-ignore */
|
|
18
18
|
...(ngDevMode ? [undefined, { debugName: "references" }] : /* istanbul ignore next */ []));
|
|
19
|
-
this.
|
|
19
|
+
this.annotations = input(/* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [undefined, { debugName: "annotations" }] : /* istanbul ignore next */ []));
|
|
21
|
+
/** A labelled "Today" line at this time. */
|
|
22
|
+
this.today = input(/* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [undefined, { debugName: "today" }] : /* istanbul ignore next */ []));
|
|
24
|
+
/** Highlight the longest dependency chain. */
|
|
25
|
+
this.criticalPath = input(false, /* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [{ debugName: "criticalPath" }] : /* istanbul ignore next */ []));
|
|
27
|
+
/** How task times are written. */
|
|
28
|
+
this.xAxis = input(/* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [undefined, { debugName: "xAxis" }] : /* istanbul ignore next */ []));
|
|
30
|
+
this.layout = computed(() => layoutGantt({
|
|
31
|
+
...this.sized(),
|
|
32
|
+
tasks: this.tasks(),
|
|
33
|
+
references: this.references(),
|
|
34
|
+
annotations: this.annotations(),
|
|
35
|
+
today: this.today(),
|
|
36
|
+
criticalPath: this.criticalPath(),
|
|
37
|
+
xAxis: this.xAxis(),
|
|
38
|
+
}), /* @ts-ignore */
|
|
20
39
|
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
21
40
|
}
|
|
22
41
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxGanttChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxGanttChartComponent, isStandalone: true, selector: "skdx-gantt-chart", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxGanttChartComponent, isStandalone: true, selector: "skdx-gantt-chart", inputs: { tasks: { classPropertyName: "tasks", publicName: "tasks", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, today: { classPropertyName: "today", publicName: "today", isSignal: true, isRequired: false, transformFunction: null }, criticalPath: { classPropertyName: "criticalPath", publicName: "criticalPath", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
24
43
|
<skdx-chart-root
|
|
25
44
|
[layout]="layout()"
|
|
45
|
+
[options]="options()"
|
|
26
46
|
kind="gantt"
|
|
27
47
|
[label]="label() ?? 'Gantt chart'"
|
|
28
48
|
[zoomable]="zoomable()"
|
|
29
|
-
[
|
|
49
|
+
[selectionMode]="selectionMode()"
|
|
50
|
+
[editable]="editable()"
|
|
51
|
+
[syncId]="syncId()"
|
|
52
|
+
[crosshair]="syncedCrosshair()"
|
|
53
|
+
[responsive]="!!responsive()"
|
|
30
54
|
(itemClick)="itemClick.emit($event)"
|
|
55
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
56
|
+
(taskChange)="taskChange.emit($event)"
|
|
31
57
|
(hiddenSeriesChange)="toggle($event)"
|
|
32
58
|
(zoomChange)="zoom.set($event)"
|
|
59
|
+
(viewChange)="view.set($event)"
|
|
60
|
+
(selectedChange)="selected.set($event)"
|
|
61
|
+
(highlightedChange)="highlighted.set($event)"
|
|
62
|
+
(syncChange)="sync($event)"
|
|
33
63
|
(measured)="measuredWidth.set($event)"
|
|
34
64
|
></skdx-chart-root>
|
|
35
|
-
`, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "kind", "label", "zoomable", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
65
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "options", "kind", "label", "zoomable", "selectionMode", "editable", "syncId", "crosshair", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "viewChange", "selectedChange", "highlightedChange", "dataIssue", "taskChange", "syncChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
36
66
|
}
|
|
37
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxGanttChartComponent, decorators: [{
|
|
38
68
|
type: Component,
|
|
@@ -44,18 +74,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
44
74
|
template: `
|
|
45
75
|
<skdx-chart-root
|
|
46
76
|
[layout]="layout()"
|
|
77
|
+
[options]="options()"
|
|
47
78
|
kind="gantt"
|
|
48
79
|
[label]="label() ?? 'Gantt chart'"
|
|
49
80
|
[zoomable]="zoomable()"
|
|
50
|
-
[
|
|
81
|
+
[selectionMode]="selectionMode()"
|
|
82
|
+
[editable]="editable()"
|
|
83
|
+
[syncId]="syncId()"
|
|
84
|
+
[crosshair]="syncedCrosshair()"
|
|
85
|
+
[responsive]="!!responsive()"
|
|
51
86
|
(itemClick)="itemClick.emit($event)"
|
|
87
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
88
|
+
(taskChange)="taskChange.emit($event)"
|
|
52
89
|
(hiddenSeriesChange)="toggle($event)"
|
|
53
90
|
(zoomChange)="zoom.set($event)"
|
|
91
|
+
(viewChange)="view.set($event)"
|
|
92
|
+
(selectedChange)="selected.set($event)"
|
|
93
|
+
(highlightedChange)="highlighted.set($event)"
|
|
94
|
+
(syncChange)="sync($event)"
|
|
54
95
|
(measured)="measuredWidth.set($event)"
|
|
55
96
|
></skdx-chart-root>
|
|
56
97
|
`,
|
|
57
98
|
}]
|
|
58
|
-
}], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: true }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: false }] }] } });
|
|
99
|
+
}], propDecorators: { tasks: [{ type: i0.Input, args: [{ isSignal: true, alias: "tasks", required: true }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], today: [{ type: i0.Input, args: [{ isSignal: true, alias: "today", required: false }] }], criticalPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "criticalPath", required: false }] }], xAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxis", required: false }] }] } });
|
|
59
100
|
|
|
60
101
|
/**
|
|
61
102
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skdx-angular-charts-gantt.mjs","sources":["../../src/gantt/index.ts","../../src/gantt/skdx-angular-charts-gantt.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n layoutGantt,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type GanttTask,\n type Reference,\n} from '@skdx/angular-charts/internal';\n\n/** Intervals on a numeric time axis, one row per task or per `group`. */\n@Component({\n selector: 'skdx-gantt-chart',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n kind=\"gantt\"\n [label]=\"label() ?? 'Gantt chart'\"\n [zoomable]=\"zoomable()\"\n [responsive]=\"responsive()\"\n (itemClick)=\"itemClick.emit($event)\"\n (hiddenSeriesChange)=\"toggle($event)\"\n (zoomChange)=\"zoom.set($event)\"\n (measured)=\"measuredWidth.set($event)\"\n ></skdx-chart-root>\n `,\n})\nexport class SkdxGanttChartComponent extends SkdxSizedBase {\n readonly tasks = input.required<GanttTask[]>();\n /** Vertical lines and bands in time coordinates, e.g. today. */\n readonly references = input<Reference[]>();\n\n protected readonly layout = computed(() =>\n layoutGantt({
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-gantt.mjs","sources":["../../src/gantt/index.ts","../../src/gantt/skdx-angular-charts-gantt.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n layoutGantt,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type Annotation,\n type AxisOptions,\n type GanttTask,\n type Reference,\n} from '@skdx/angular-charts/internal';\n\n/** Intervals on a numeric time axis, one row per task or per `group`. */\n@Component({\n selector: 'skdx-gantt-chart',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n [options]=\"options()\"\n kind=\"gantt\"\n [label]=\"label() ?? 'Gantt chart'\"\n [zoomable]=\"zoomable()\"\n [selectionMode]=\"selectionMode()\"\n [editable]=\"editable()\"\n [syncId]=\"syncId()\"\n [crosshair]=\"syncedCrosshair()\"\n [responsive]=\"!!responsive()\"\n (itemClick)=\"itemClick.emit($event)\"\n (dataIssue)=\"dataIssue.emit($event)\"\n (taskChange)=\"taskChange.emit($event)\"\n (hiddenSeriesChange)=\"toggle($event)\"\n (zoomChange)=\"zoom.set($event)\"\n (viewChange)=\"view.set($event)\"\n (selectedChange)=\"selected.set($event)\"\n (highlightedChange)=\"highlighted.set($event)\"\n (syncChange)=\"sync($event)\"\n (measured)=\"measuredWidth.set($event)\"\n ></skdx-chart-root>\n `,\n})\nexport class SkdxGanttChartComponent extends SkdxSizedBase {\n readonly tasks = input.required<GanttTask[]>();\n /** Vertical lines and bands in time coordinates, e.g. today. */\n readonly references = input<Reference[]>();\n readonly annotations = input<Annotation[]>();\n /** A labelled \"Today\" line at this time. */\n readonly today = input<number | Date>();\n /** Highlight the longest dependency chain. */\n readonly criticalPath = input(false);\n /** How task times are written. */\n readonly xAxis = input<Pick<AxisOptions, 'format' | 'label' | 'ticks'>>();\n\n protected readonly layout = computed(() =>\n layoutGantt({\n ...this.sized(),\n tasks: this.tasks(),\n references: this.references(),\n annotations: this.annotations(),\n today: this.today(),\n criticalPath: this.criticalPath(),\n xAxis: this.xAxis(),\n }),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { SkdxSizedBase, layoutGaugeChart, SkdxChartRootComponent } from '@skdx/angular-charts/internal';
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
* Copyright (c) 2026 SkandaDX
|
|
7
|
+
* This file is part of the SkandaDX organization.
|
|
8
|
+
* Licensed under the MIT License. See LICENSE in the repository root.
|
|
9
|
+
*/
|
|
10
|
+
/** One reading on an arc scale: a needle over threshold bands (`radial`), or the arc filled up to the value (`solid`). */
|
|
11
|
+
class SkdxGaugeChartComponent extends SkdxSizedBase {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
/** The reading; values outside min–max are clamped. */
|
|
15
|
+
this.value = input.required(/* @ts-ignore */
|
|
16
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
17
|
+
/** Scale start. Defaults to 0. */
|
|
18
|
+
this.min = input(/* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
|
|
20
|
+
/** Scale end. Defaults to 100. */
|
|
21
|
+
this.max = input(/* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
|
|
23
|
+
this.variant = input(/* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
25
|
+
/** Degrees clockwise from 12 o'clock; -90/90 is a semi-circle. */
|
|
26
|
+
this.startAngle = input(/* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [undefined, { debugName: "startAngle" }] : /* istanbul ignore next */ []));
|
|
28
|
+
this.endAngle = input(/* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [undefined, { debugName: "endAngle" }] : /* istanbul ignore next */ []));
|
|
30
|
+
/** Arc thickness as a fraction of the radius. */
|
|
31
|
+
this.thickness = input(/* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [undefined, { debugName: "thickness" }] : /* istanbul ignore next */ []));
|
|
33
|
+
/** Threshold sectors in value units. */
|
|
34
|
+
this.bands = input(/* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [undefined, { debugName: "bands" }] : /* istanbul ignore next */ []));
|
|
36
|
+
/** A marker at this value. */
|
|
37
|
+
this.target = input(/* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
|
|
39
|
+
/** Tick count including both ends; 0 for none. Defaults to 5. */
|
|
40
|
+
this.ticks = input(/* @ts-ignore */
|
|
41
|
+
...(ngDevMode ? [undefined, { debugName: "ticks" }] : /* istanbul ignore next */ []));
|
|
42
|
+
/** Write the tick values. */
|
|
43
|
+
this.tickLabels = input(true, /* @ts-ignore */
|
|
44
|
+
...(ngDevMode ? [{ debugName: "tickLabels" }] : /* istanbul ignore next */ []));
|
|
45
|
+
/** Text in the middle; defaults to the formatted value. */
|
|
46
|
+
this.centerLabel = input(/* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [undefined, { debugName: "centerLabel" }] : /* istanbul ignore next */ []));
|
|
48
|
+
/** Smaller text under the value, e.g. the metric name. */
|
|
49
|
+
this.caption = input(/* @ts-ignore */
|
|
50
|
+
...(ngDevMode ? [undefined, { debugName: "caption" }] : /* istanbul ignore next */ []));
|
|
51
|
+
this.layout = computed(() => layoutGaugeChart({
|
|
52
|
+
...this.sized(),
|
|
53
|
+
value: this.value(),
|
|
54
|
+
min: this.min(),
|
|
55
|
+
max: this.max(),
|
|
56
|
+
variant: this.variant(),
|
|
57
|
+
startAngle: this.startAngle(),
|
|
58
|
+
endAngle: this.endAngle(),
|
|
59
|
+
thickness: this.thickness(),
|
|
60
|
+
bands: this.bands(),
|
|
61
|
+
target: this.target(),
|
|
62
|
+
ticks: this.ticks(),
|
|
63
|
+
tickLabels: this.tickLabels(),
|
|
64
|
+
centerLabel: this.centerLabel(),
|
|
65
|
+
caption: this.caption(),
|
|
66
|
+
}), /* @ts-ignore */
|
|
67
|
+
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
68
|
+
}
|
|
69
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxGaugeChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
70
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxGaugeChartComponent, isStandalone: true, selector: "skdx-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, bands: { classPropertyName: "bands", publicName: "bands", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, ticks: { classPropertyName: "ticks", publicName: "ticks", isSignal: true, isRequired: false, transformFunction: null }, tickLabels: { classPropertyName: "tickLabels", publicName: "tickLabels", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
71
|
+
<skdx-chart-root
|
|
72
|
+
[layout]="layout()"
|
|
73
|
+
[options]="options()"
|
|
74
|
+
kind="gauge"
|
|
75
|
+
[label]="label() ?? 'Gauge chart'"
|
|
76
|
+
[zoomable]="zoomable()"
|
|
77
|
+
[selectionMode]="selectionMode()"
|
|
78
|
+
[editable]="editable()"
|
|
79
|
+
[syncId]="syncId()"
|
|
80
|
+
[crosshair]="syncedCrosshair()"
|
|
81
|
+
[responsive]="!!responsive()"
|
|
82
|
+
(itemClick)="itemClick.emit($event)"
|
|
83
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
84
|
+
(taskChange)="taskChange.emit($event)"
|
|
85
|
+
(hiddenSeriesChange)="toggle($event)"
|
|
86
|
+
(zoomChange)="zoom.set($event)"
|
|
87
|
+
(viewChange)="view.set($event)"
|
|
88
|
+
(selectedChange)="selected.set($event)"
|
|
89
|
+
(highlightedChange)="highlighted.set($event)"
|
|
90
|
+
(syncChange)="sync($event)"
|
|
91
|
+
(measured)="measuredWidth.set($event)"
|
|
92
|
+
></skdx-chart-root>
|
|
93
|
+
`, isInline: true, dependencies: [{ kind: "component", type: SkdxChartRootComponent, selector: "skdx-chart-root", inputs: ["layout", "options", "kind", "label", "zoomable", "selectionMode", "editable", "syncId", "crosshair", "responsive"], outputs: ["itemClick", "hiddenSeriesChange", "zoomChange", "viewChange", "selectedChange", "highlightedChange", "dataIssue", "taskChange", "syncChange", "measured"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
94
|
+
}
|
|
95
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxGaugeChartComponent, decorators: [{
|
|
96
|
+
type: Component,
|
|
97
|
+
args: [{
|
|
98
|
+
selector: 'skdx-gauge-chart',
|
|
99
|
+
standalone: true,
|
|
100
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
101
|
+
imports: [SkdxChartRootComponent],
|
|
102
|
+
template: `
|
|
103
|
+
<skdx-chart-root
|
|
104
|
+
[layout]="layout()"
|
|
105
|
+
[options]="options()"
|
|
106
|
+
kind="gauge"
|
|
107
|
+
[label]="label() ?? 'Gauge chart'"
|
|
108
|
+
[zoomable]="zoomable()"
|
|
109
|
+
[selectionMode]="selectionMode()"
|
|
110
|
+
[editable]="editable()"
|
|
111
|
+
[syncId]="syncId()"
|
|
112
|
+
[crosshair]="syncedCrosshair()"
|
|
113
|
+
[responsive]="!!responsive()"
|
|
114
|
+
(itemClick)="itemClick.emit($event)"
|
|
115
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
116
|
+
(taskChange)="taskChange.emit($event)"
|
|
117
|
+
(hiddenSeriesChange)="toggle($event)"
|
|
118
|
+
(zoomChange)="zoom.set($event)"
|
|
119
|
+
(viewChange)="view.set($event)"
|
|
120
|
+
(selectedChange)="selected.set($event)"
|
|
121
|
+
(highlightedChange)="highlighted.set($event)"
|
|
122
|
+
(syncChange)="sync($event)"
|
|
123
|
+
(measured)="measuredWidth.set($event)"
|
|
124
|
+
></skdx-chart-root>
|
|
125
|
+
`,
|
|
126
|
+
}]
|
|
127
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], startAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAngle", required: false }] }], endAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAngle", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], bands: [{ type: i0.Input, args: [{ isSignal: true, alias: "bands", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], ticks: [{ type: i0.Input, args: [{ isSignal: true, alias: "ticks", required: false }] }], tickLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickLabels", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }] } });
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* Generated bundle index. Do not edit.
|
|
131
|
+
*/
|
|
132
|
+
|
|
133
|
+
export { SkdxGaugeChartComponent };
|
|
134
|
+
//# sourceMappingURL=skdx-angular-charts-gauge.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-gauge.mjs","sources":["../../src/gauge/index.ts","../../src/gauge/skdx-angular-charts-gauge.ts"],"sourcesContent":["/*\n * Copyright (c) 2026 SkandaDX\n * This file is part of the SkandaDX organization.\n * Licensed under the MIT License. See LICENSE in the repository root.\n */\n\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nimport {\n layoutGaugeChart,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type Band,\n} from '@skdx/angular-charts/internal';\n\n/** One reading on an arc scale: a needle over threshold bands (`radial`), or the arc filled up to the value (`solid`). */\n@Component({\n selector: 'skdx-gauge-chart',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n [options]=\"options()\"\n kind=\"gauge\"\n [label]=\"label() ?? 'Gauge chart'\"\n [zoomable]=\"zoomable()\"\n [selectionMode]=\"selectionMode()\"\n [editable]=\"editable()\"\n [syncId]=\"syncId()\"\n [crosshair]=\"syncedCrosshair()\"\n [responsive]=\"!!responsive()\"\n (itemClick)=\"itemClick.emit($event)\"\n (dataIssue)=\"dataIssue.emit($event)\"\n (taskChange)=\"taskChange.emit($event)\"\n (hiddenSeriesChange)=\"toggle($event)\"\n (zoomChange)=\"zoom.set($event)\"\n (viewChange)=\"view.set($event)\"\n (selectedChange)=\"selected.set($event)\"\n (highlightedChange)=\"highlighted.set($event)\"\n (syncChange)=\"sync($event)\"\n (measured)=\"measuredWidth.set($event)\"\n ></skdx-chart-root>\n `,\n})\nexport class SkdxGaugeChartComponent extends SkdxSizedBase {\n /** The reading; values outside min–max are clamped. */\n readonly value = input.required<number>();\n /** Scale start. Defaults to 0. */\n readonly min = input<number>();\n /** Scale end. Defaults to 100. */\n readonly max = input<number>();\n readonly variant = input<'radial' | 'solid'>();\n /** Degrees clockwise from 12 o'clock; -90/90 is a semi-circle. */\n readonly startAngle = input<number>();\n readonly endAngle = input<number>();\n /** Arc thickness as a fraction of the radius. */\n readonly thickness = input<number>();\n /** Threshold sectors in value units. */\n readonly bands = input<Band[]>();\n /** A marker at this value. */\n readonly target = input<number>();\n /** Tick count including both ends; 0 for none. Defaults to 5. */\n readonly ticks = input<number>();\n /** Write the tick values. */\n readonly tickLabels = input(true);\n /** Text in the middle; defaults to the formatted value. */\n readonly centerLabel = input<string>();\n /** Smaller text under the value, e.g. the metric name. */\n readonly caption = input<string>();\n\n protected readonly layout = computed(() =>\n layoutGaugeChart({\n ...this.sized(),\n value: this.value(),\n min: this.min(),\n max: this.max(),\n variant: this.variant(),\n startAngle: this.startAngle(),\n endAngle: this.endAngle(),\n thickness: this.thickness(),\n bands: this.bands(),\n target: this.target(),\n ticks: this.ticks(),\n tickLabels: this.tickLabels(),\n centerLabel: this.centerLabel(),\n caption: this.caption(),\n }),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|