@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
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @skdx/angular-charts
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Forty SVG charts for Angular. Plain SVG colored by `@skdx/tokens`; load `@skdx/tokens/css` once
|
|
4
4
|
so the colors resolve.
|
|
5
5
|
|
|
6
6
|
```sh
|
|
@@ -41,6 +41,14 @@ Waterfall takes signed `data` deltas and an optional `total` label. Gantt takes
|
|
|
41
41
|
flow `matrix`. Map takes `features` (`{ name, value, geometry }[]` with GeoJSON Polygon or
|
|
42
42
|
MultiPolygon geometry). `null` and `NaN` values are gaps; an empty chart renders "No data available".
|
|
43
43
|
|
|
44
|
+
Gauge takes one `value` with `min`/`max`, `bands` and a `target`. Bullet takes `data`
|
|
45
|
+
(`{ name, value, target?, ranges? }[]`). Histogram takes `data` as a raw sample and bins it.
|
|
46
|
+
Bubble takes `series` of `{ x, y, z, label? }`. Combo takes the cartesian `series` with a required
|
|
47
|
+
`type` per series. Range takes `series` of `{ name, low, high }` and a `variant`. Network takes
|
|
48
|
+
`nodes` (`{ id, label?, value?, group? }[]`) and `edges` (`{ source, target, value? }[]`). Timeline
|
|
49
|
+
takes `events` (`{ date, label, description?, group? }[]`). One reference page per chart is in
|
|
50
|
+
[docs/charts](../../docs/charts/README.md).
|
|
51
|
+
|
|
44
52
|
Every chart also takes `animate` (fade in and transition on change; `true` is 300 ms, a number sets
|
|
45
53
|
the duration, off under `prefers-reduced-motion` and above 1500 shapes) and `responsive` (lay out
|
|
46
54
|
at the container's width so text keeps its size). Cartesian charts take `xAxis.type: 'time' |
|
|
@@ -18,16 +18,27 @@ class SkdxAreaChartComponent extends SkdxChartBase {
|
|
|
18
18
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: SkdxAreaChartComponent, isStandalone: true, selector: "skdx-area-chart", usesInheritance: true, ngImport: i0, template: `
|
|
19
19
|
<skdx-chart-root
|
|
20
20
|
[layout]="layout()"
|
|
21
|
+
[options]="options()"
|
|
21
22
|
kind="area"
|
|
22
23
|
[label]="label() ?? 'Area chart'"
|
|
23
24
|
[zoomable]="zoomable()"
|
|
24
|
-
[
|
|
25
|
+
[selectionMode]="selectionMode()"
|
|
26
|
+
[editable]="editable()"
|
|
27
|
+
[syncId]="syncId()"
|
|
28
|
+
[crosshair]="syncedCrosshair()"
|
|
29
|
+
[responsive]="!!responsive()"
|
|
25
30
|
(itemClick)="itemClick.emit($event)"
|
|
31
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
32
|
+
(taskChange)="taskChange.emit($event)"
|
|
26
33
|
(hiddenSeriesChange)="toggle($event)"
|
|
27
34
|
(zoomChange)="zoom.set($event)"
|
|
35
|
+
(viewChange)="view.set($event)"
|
|
36
|
+
(selectedChange)="selected.set($event)"
|
|
37
|
+
(highlightedChange)="highlighted.set($event)"
|
|
38
|
+
(syncChange)="sync($event)"
|
|
28
39
|
(measured)="measuredWidth.set($event)"
|
|
29
40
|
></skdx-chart-root>
|
|
30
|
-
`, 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 }); }
|
|
41
|
+
`, 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 }); }
|
|
31
42
|
}
|
|
32
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxAreaChartComponent, decorators: [{
|
|
33
44
|
type: Component,
|
|
@@ -39,13 +50,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
39
50
|
template: `
|
|
40
51
|
<skdx-chart-root
|
|
41
52
|
[layout]="layout()"
|
|
53
|
+
[options]="options()"
|
|
42
54
|
kind="area"
|
|
43
55
|
[label]="label() ?? 'Area chart'"
|
|
44
56
|
[zoomable]="zoomable()"
|
|
45
|
-
[
|
|
57
|
+
[selectionMode]="selectionMode()"
|
|
58
|
+
[editable]="editable()"
|
|
59
|
+
[syncId]="syncId()"
|
|
60
|
+
[crosshair]="syncedCrosshair()"
|
|
61
|
+
[responsive]="!!responsive()"
|
|
46
62
|
(itemClick)="itemClick.emit($event)"
|
|
63
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
64
|
+
(taskChange)="taskChange.emit($event)"
|
|
47
65
|
(hiddenSeriesChange)="toggle($event)"
|
|
48
66
|
(zoomChange)="zoom.set($event)"
|
|
67
|
+
(viewChange)="view.set($event)"
|
|
68
|
+
(selectedChange)="selected.set($event)"
|
|
69
|
+
(highlightedChange)="highlighted.set($event)"
|
|
70
|
+
(syncChange)="sync($event)"
|
|
49
71
|
(measured)="measuredWidth.set($event)"
|
|
50
72
|
></skdx-chart-root>
|
|
51
73
|
`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skdx-angular-charts-area.mjs","sources":["../../src/area/index.ts","../../src/area/skdx-angular-charts-area.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 } from '@angular/core';\n\nimport {\n layoutAreaChart,\n SkdxChartBase,\n SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** Filled, optionally stacked, areas down to zero; series may also be bars, lines or ranges. */\n@Component({\n selector: 'skdx-area-chart',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n kind=\"area\"\n [label]=\"label() ?? 'Area 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 SkdxAreaChartComponent extends SkdxChartBase {\n protected readonly layout = computed(() => layoutAreaChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-area.mjs","sources":["../../src/area/index.ts","../../src/area/skdx-angular-charts-area.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 } from '@angular/core';\n\nimport {\n layoutAreaChart,\n SkdxChartBase,\n SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** Filled, optionally stacked, areas down to zero; series may also be bars, lines or ranges. */\n@Component({\n selector: 'skdx-area-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=\"area\"\n [label]=\"label() ?? 'Area 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 SkdxAreaChartComponent extends SkdxChartBase {\n protected readonly layout = computed(() => layoutAreaChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;AA+BM,MAAO,sBAAuB,SAAQ,aAAa,CAAA;AA9BzD,IAAA,WAAA,GAAA;;AA+BqB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;mFAAC;AAC1E,IAAA;8GAFY,sBAAsB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzBvB;;;;;;;;;;;;;;;;;;;;;;;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,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBA9BlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,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;;;AC5CD;;AAEG;;"}
|
|
@@ -18,16 +18,27 @@ class SkdxBarChartComponent extends SkdxChartBase {
|
|
|
18
18
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: SkdxBarChartComponent, isStandalone: true, selector: "skdx-bar-chart", usesInheritance: true, ngImport: i0, template: `
|
|
19
19
|
<skdx-chart-root
|
|
20
20
|
[layout]="layout()"
|
|
21
|
+
[options]="options()"
|
|
21
22
|
kind="bar"
|
|
22
23
|
[label]="label() ?? 'Bar chart'"
|
|
23
24
|
[zoomable]="zoomable()"
|
|
24
|
-
[
|
|
25
|
+
[selectionMode]="selectionMode()"
|
|
26
|
+
[editable]="editable()"
|
|
27
|
+
[syncId]="syncId()"
|
|
28
|
+
[crosshair]="syncedCrosshair()"
|
|
29
|
+
[responsive]="!!responsive()"
|
|
25
30
|
(itemClick)="itemClick.emit($event)"
|
|
31
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
32
|
+
(taskChange)="taskChange.emit($event)"
|
|
26
33
|
(hiddenSeriesChange)="toggle($event)"
|
|
27
34
|
(zoomChange)="zoom.set($event)"
|
|
35
|
+
(viewChange)="view.set($event)"
|
|
36
|
+
(selectedChange)="selected.set($event)"
|
|
37
|
+
(highlightedChange)="highlighted.set($event)"
|
|
38
|
+
(syncChange)="sync($event)"
|
|
28
39
|
(measured)="measuredWidth.set($event)"
|
|
29
40
|
></skdx-chart-root>
|
|
30
|
-
`, 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 }); }
|
|
41
|
+
`, 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 }); }
|
|
31
42
|
}
|
|
32
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBarChartComponent, decorators: [{
|
|
33
44
|
type: Component,
|
|
@@ -39,13 +50,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
39
50
|
template: `
|
|
40
51
|
<skdx-chart-root
|
|
41
52
|
[layout]="layout()"
|
|
53
|
+
[options]="options()"
|
|
42
54
|
kind="bar"
|
|
43
55
|
[label]="label() ?? 'Bar chart'"
|
|
44
56
|
[zoomable]="zoomable()"
|
|
45
|
-
[
|
|
57
|
+
[selectionMode]="selectionMode()"
|
|
58
|
+
[editable]="editable()"
|
|
59
|
+
[syncId]="syncId()"
|
|
60
|
+
[crosshair]="syncedCrosshair()"
|
|
61
|
+
[responsive]="!!responsive()"
|
|
46
62
|
(itemClick)="itemClick.emit($event)"
|
|
63
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
64
|
+
(taskChange)="taskChange.emit($event)"
|
|
47
65
|
(hiddenSeriesChange)="toggle($event)"
|
|
48
66
|
(zoomChange)="zoom.set($event)"
|
|
67
|
+
(viewChange)="view.set($event)"
|
|
68
|
+
(selectedChange)="selected.set($event)"
|
|
69
|
+
(highlightedChange)="highlighted.set($event)"
|
|
70
|
+
(syncChange)="sync($event)"
|
|
49
71
|
(measured)="measuredWidth.set($event)"
|
|
50
72
|
></skdx-chart-root>
|
|
51
73
|
`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skdx-angular-charts-bar.mjs","sources":["../../src/bar/index.ts","../../src/bar/skdx-angular-charts-bar.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 } from '@angular/core';\n\nimport {\n layoutBarChart,\n SkdxChartBase,\n SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */\n@Component({\n selector: 'skdx-bar-chart',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n kind=\"bar\"\n [label]=\"label() ?? 'Bar 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 SkdxBarChartComponent extends SkdxChartBase {\n protected readonly layout = computed(() => layoutBarChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-bar.mjs","sources":["../../src/bar/index.ts","../../src/bar/skdx-angular-charts-bar.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 } from '@angular/core';\n\nimport {\n layoutBarChart,\n SkdxChartBase,\n SkdxChartRootComponent,\n} from '@skdx/angular-charts/internal';\n\n/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */\n@Component({\n selector: 'skdx-bar-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=\"bar\"\n [label]=\"label() ?? 'Bar 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 SkdxBarChartComponent extends SkdxChartBase {\n protected readonly layout = computed(() => layoutBarChart(this.input()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAAA;;;;AAIG;AAUH;AA+BM,MAAO,qBAAsB,SAAQ,aAAa,CAAA;AA9BxD,IAAA,WAAA,GAAA;;AA+BqB,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;mFAAC;AACzE,IAAA;8GAFY,qBAAqB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAzBtB;;;;;;;;;;;;;;;;;;;;;;;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,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA9BjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,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;;;AC5CD;;AAEG;;"}
|
|
@@ -11,25 +11,70 @@ import { SkdxSizedBase, layoutBoxplot, SkdxChartRootComponent } from '@skdx/angu
|
|
|
11
11
|
class SkdxBoxplotComponent extends SkdxSizedBase {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
|
+
/** Raw samples, or precomputed summaries. */
|
|
14
15
|
this.series = input.required(/* @ts-ignore */
|
|
15
16
|
...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
16
|
-
this.
|
|
17
|
+
this.orientation = input(/* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
19
|
+
/** How quartiles are taken from a sample. */
|
|
20
|
+
this.quartileMethod = input(/* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [undefined, { debugName: "quartileMethod" }] : /* istanbul ignore next */ []));
|
|
22
|
+
/** Whisker reach as a multiple of the IQR. */
|
|
23
|
+
this.whisker = input(/* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [undefined, { debugName: "whisker" }] : /* istanbul ignore next */ []));
|
|
25
|
+
/** Mark the mean with a diamond. */
|
|
26
|
+
this.mean = input(false, /* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [{ debugName: "mean" }] : /* istanbul ignore next */ []));
|
|
28
|
+
/** Draw every observation, jittered. */
|
|
29
|
+
this.points = input(false, /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
|
|
31
|
+
/** Notch the box around the median. */
|
|
32
|
+
this.notched = input(false, /* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "notched" }] : /* istanbul ignore next */ []));
|
|
34
|
+
/** Groups: one box per series inside each category. */
|
|
35
|
+
this.categories = input(/* @ts-ignore */
|
|
36
|
+
...(ngDevMode ? [undefined, { debugName: "categories" }] : /* istanbul ignore next */ []));
|
|
37
|
+
this.yAxis = input(/* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [undefined, { debugName: "yAxis" }] : /* istanbul ignore next */ []));
|
|
39
|
+
this.layout = computed(() => layoutBoxplot({
|
|
40
|
+
...this.sized(),
|
|
41
|
+
series: this.series(),
|
|
42
|
+
orientation: this.orientation(),
|
|
43
|
+
quartileMethod: this.quartileMethod(),
|
|
44
|
+
whisker: this.whisker(),
|
|
45
|
+
mean: this.mean(),
|
|
46
|
+
points: this.points(),
|
|
47
|
+
notched: this.notched(),
|
|
48
|
+
categories: this.categories(),
|
|
49
|
+
yAxis: this.yAxis(),
|
|
50
|
+
}), /* @ts-ignore */
|
|
17
51
|
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
18
52
|
}
|
|
19
53
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBoxplotComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBoxplotComponent, isStandalone: true, selector: "skdx-boxplot", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBoxplotComponent, isStandalone: true, selector: "skdx-boxplot", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, quartileMethod: { classPropertyName: "quartileMethod", publicName: "quartileMethod", isSignal: true, isRequired: false, transformFunction: null }, whisker: { classPropertyName: "whisker", publicName: "whisker", isSignal: true, isRequired: false, transformFunction: null }, mean: { classPropertyName: "mean", publicName: "mean", isSignal: true, isRequired: false, transformFunction: null }, points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null }, notched: { classPropertyName: "notched", publicName: "notched", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
21
55
|
<skdx-chart-root
|
|
22
56
|
[layout]="layout()"
|
|
57
|
+
[options]="options()"
|
|
23
58
|
kind="boxplot"
|
|
24
59
|
[label]="label() ?? 'Box plot'"
|
|
25
60
|
[zoomable]="zoomable()"
|
|
26
|
-
[
|
|
61
|
+
[selectionMode]="selectionMode()"
|
|
62
|
+
[editable]="editable()"
|
|
63
|
+
[syncId]="syncId()"
|
|
64
|
+
[crosshair]="syncedCrosshair()"
|
|
65
|
+
[responsive]="!!responsive()"
|
|
27
66
|
(itemClick)="itemClick.emit($event)"
|
|
67
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
68
|
+
(taskChange)="taskChange.emit($event)"
|
|
28
69
|
(hiddenSeriesChange)="toggle($event)"
|
|
29
70
|
(zoomChange)="zoom.set($event)"
|
|
71
|
+
(viewChange)="view.set($event)"
|
|
72
|
+
(selectedChange)="selected.set($event)"
|
|
73
|
+
(highlightedChange)="highlighted.set($event)"
|
|
74
|
+
(syncChange)="sync($event)"
|
|
30
75
|
(measured)="measuredWidth.set($event)"
|
|
31
76
|
></skdx-chart-root>
|
|
32
|
-
`, 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 }); }
|
|
77
|
+
`, 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 }); }
|
|
33
78
|
}
|
|
34
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBoxplotComponent, decorators: [{
|
|
35
80
|
type: Component,
|
|
@@ -41,18 +86,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
41
86
|
template: `
|
|
42
87
|
<skdx-chart-root
|
|
43
88
|
[layout]="layout()"
|
|
89
|
+
[options]="options()"
|
|
44
90
|
kind="boxplot"
|
|
45
91
|
[label]="label() ?? 'Box plot'"
|
|
46
92
|
[zoomable]="zoomable()"
|
|
47
|
-
[
|
|
93
|
+
[selectionMode]="selectionMode()"
|
|
94
|
+
[editable]="editable()"
|
|
95
|
+
[syncId]="syncId()"
|
|
96
|
+
[crosshair]="syncedCrosshair()"
|
|
97
|
+
[responsive]="!!responsive()"
|
|
48
98
|
(itemClick)="itemClick.emit($event)"
|
|
99
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
100
|
+
(taskChange)="taskChange.emit($event)"
|
|
49
101
|
(hiddenSeriesChange)="toggle($event)"
|
|
50
102
|
(zoomChange)="zoom.set($event)"
|
|
103
|
+
(viewChange)="view.set($event)"
|
|
104
|
+
(selectedChange)="selected.set($event)"
|
|
105
|
+
(highlightedChange)="highlighted.set($event)"
|
|
106
|
+
(syncChange)="sync($event)"
|
|
51
107
|
(measured)="measuredWidth.set($event)"
|
|
52
108
|
></skdx-chart-root>
|
|
53
109
|
`,
|
|
54
110
|
}]
|
|
55
|
-
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }] } });
|
|
111
|
+
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], quartileMethod: [{ type: i0.Input, args: [{ isSignal: true, alias: "quartileMethod", required: false }] }], whisker: [{ type: i0.Input, args: [{ isSignal: true, alias: "whisker", required: false }] }], mean: [{ type: i0.Input, args: [{ isSignal: true, alias: "mean", required: false }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }], notched: [{ type: i0.Input, args: [{ isSignal: true, alias: "notched", required: false }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }] } });
|
|
56
112
|
|
|
57
113
|
/**
|
|
58
114
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skdx-angular-charts-boxplot.mjs","sources":["../../src/boxplot/index.ts","../../src/boxplot/skdx-angular-charts-boxplot.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 layoutBoxplot,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-boxplot.mjs","sources":["../../src/boxplot/index.ts","../../src/boxplot/skdx-angular-charts-boxplot.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 layoutBoxplot,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type AxisOptions,\n type BoxplotSeries,\n} from '@skdx/angular-charts/internal';\n\n/** One Tukey box per series over its raw samples. */\n@Component({\n selector: 'skdx-boxplot',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [SkdxChartRootComponent],\n template: `\n <skdx-chart-root\n [layout]=\"layout()\"\n [options]=\"options()\"\n kind=\"boxplot\"\n [label]=\"label() ?? 'Box plot'\"\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 SkdxBoxplotComponent extends SkdxSizedBase {\n /** Raw samples, or precomputed summaries. */\n readonly series = input.required<BoxplotSeries[]>();\n readonly orientation = input<'vertical' | 'horizontal'>();\n /** How quartiles are taken from a sample. */\n readonly quartileMethod = input<'linear' | 'exclusive' | 'tukey'>();\n /** Whisker reach as a multiple of the IQR. */\n readonly whisker = input<number>();\n /** Mark the mean with a diamond. */\n readonly mean = input(false);\n /** Draw every observation, jittered. */\n readonly points = input(false);\n /** Notch the box around the median. */\n readonly notched = input(false);\n /** Groups: one box per series inside each category. */\n readonly categories = input<string[]>();\n readonly yAxis = input<AxisOptions>();\n\n protected readonly layout = computed(() =>\n layoutBoxplot({\n ...this.sized(),\n series: this.series(),\n orientation: this.orientation(),\n quartileMethod: this.quartileMethod(),\n whisker: this.whisker(),\n mean: this.mean(),\n points: this.points(),\n notched: this.notched(),\n categories: this.categories(),\n yAxis: this.yAxis(),\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,119 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { SkdxSizedBase, layoutBubbleChart, 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
|
+
/** Three quantities per mark: x, y and a magnitude the bubble's area follows. */
|
|
11
|
+
class SkdxBubbleChartComponent extends SkdxSizedBase {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.series = input.required(/* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
16
|
+
/** Smallest and largest bubble radius in pixels. */
|
|
17
|
+
this.sizeRange = input(/* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [undefined, { debugName: "sizeRange" }] : /* istanbul ignore next */ []));
|
|
19
|
+
/** Write each bubble's label on it. */
|
|
20
|
+
this.labels = input(false, /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
22
|
+
this.xAxis = input(/* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [undefined, { debugName: "xAxis" }] : /* istanbul ignore next */ []));
|
|
24
|
+
this.yAxis = input(/* @ts-ignore */
|
|
25
|
+
...(ngDevMode ? [undefined, { debugName: "yAxis" }] : /* istanbul ignore next */ []));
|
|
26
|
+
/** How the magnitude is named and written. */
|
|
27
|
+
this.zAxis = input(/* @ts-ignore */
|
|
28
|
+
...(ngDevMode ? [undefined, { debugName: "zAxis" }] : /* istanbul ignore next */ []));
|
|
29
|
+
this.references = input(/* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [undefined, { debugName: "references" }] : /* istanbul ignore next */ []));
|
|
31
|
+
this.annotations = input(/* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [undefined, { debugName: "annotations" }] : /* istanbul ignore next */ []));
|
|
33
|
+
/** Colors bubbles by their `value` (or `z`). */
|
|
34
|
+
this.colorScale = input(/* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [undefined, { debugName: "colorScale" }] : /* istanbul ignore next */ []));
|
|
36
|
+
/** Draw the color scale under the plot. */
|
|
37
|
+
this.colorLegend = input(false, /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "colorLegend" }] : /* istanbul ignore next */ []));
|
|
39
|
+
this.layout = computed(() => layoutBubbleChart({
|
|
40
|
+
...this.sized(),
|
|
41
|
+
series: this.series(),
|
|
42
|
+
sizeRange: this.sizeRange(),
|
|
43
|
+
labels: this.labels(),
|
|
44
|
+
xAxis: this.xAxis(),
|
|
45
|
+
yAxis: this.yAxis(),
|
|
46
|
+
zAxis: this.zAxis(),
|
|
47
|
+
references: this.references(),
|
|
48
|
+
annotations: this.annotations(),
|
|
49
|
+
colorScale: this.colorScale(),
|
|
50
|
+
colorLegend: this.colorLegend(),
|
|
51
|
+
}), /* @ts-ignore */
|
|
52
|
+
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
53
|
+
}
|
|
54
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBubbleChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
55
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBubbleChartComponent, isStandalone: true, selector: "skdx-bubble-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, sizeRange: { classPropertyName: "sizeRange", publicName: "sizeRange", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null }, zAxis: { classPropertyName: "zAxis", publicName: "zAxis", isSignal: true, isRequired: false, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null }, annotations: { classPropertyName: "annotations", publicName: "annotations", isSignal: true, isRequired: false, transformFunction: null }, colorScale: { classPropertyName: "colorScale", publicName: "colorScale", isSignal: true, isRequired: false, transformFunction: null }, colorLegend: { classPropertyName: "colorLegend", publicName: "colorLegend", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
56
|
+
<skdx-chart-root
|
|
57
|
+
[layout]="layout()"
|
|
58
|
+
[options]="options()"
|
|
59
|
+
kind="bubble"
|
|
60
|
+
[label]="label() ?? 'Bubble chart'"
|
|
61
|
+
[zoomable]="zoomable()"
|
|
62
|
+
[selectionMode]="selectionMode()"
|
|
63
|
+
[editable]="editable()"
|
|
64
|
+
[syncId]="syncId()"
|
|
65
|
+
[crosshair]="syncedCrosshair()"
|
|
66
|
+
[responsive]="!!responsive()"
|
|
67
|
+
(itemClick)="itemClick.emit($event)"
|
|
68
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
69
|
+
(taskChange)="taskChange.emit($event)"
|
|
70
|
+
(hiddenSeriesChange)="toggle($event)"
|
|
71
|
+
(zoomChange)="zoom.set($event)"
|
|
72
|
+
(viewChange)="view.set($event)"
|
|
73
|
+
(selectedChange)="selected.set($event)"
|
|
74
|
+
(highlightedChange)="highlighted.set($event)"
|
|
75
|
+
(syncChange)="sync($event)"
|
|
76
|
+
(measured)="measuredWidth.set($event)"
|
|
77
|
+
></skdx-chart-root>
|
|
78
|
+
`, 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 }); }
|
|
79
|
+
}
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBubbleChartComponent, decorators: [{
|
|
81
|
+
type: Component,
|
|
82
|
+
args: [{
|
|
83
|
+
selector: 'skdx-bubble-chart',
|
|
84
|
+
standalone: true,
|
|
85
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
86
|
+
imports: [SkdxChartRootComponent],
|
|
87
|
+
template: `
|
|
88
|
+
<skdx-chart-root
|
|
89
|
+
[layout]="layout()"
|
|
90
|
+
[options]="options()"
|
|
91
|
+
kind="bubble"
|
|
92
|
+
[label]="label() ?? 'Bubble chart'"
|
|
93
|
+
[zoomable]="zoomable()"
|
|
94
|
+
[selectionMode]="selectionMode()"
|
|
95
|
+
[editable]="editable()"
|
|
96
|
+
[syncId]="syncId()"
|
|
97
|
+
[crosshair]="syncedCrosshair()"
|
|
98
|
+
[responsive]="!!responsive()"
|
|
99
|
+
(itemClick)="itemClick.emit($event)"
|
|
100
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
101
|
+
(taskChange)="taskChange.emit($event)"
|
|
102
|
+
(hiddenSeriesChange)="toggle($event)"
|
|
103
|
+
(zoomChange)="zoom.set($event)"
|
|
104
|
+
(viewChange)="view.set($event)"
|
|
105
|
+
(selectedChange)="selected.set($event)"
|
|
106
|
+
(highlightedChange)="highlighted.set($event)"
|
|
107
|
+
(syncChange)="sync($event)"
|
|
108
|
+
(measured)="measuredWidth.set($event)"
|
|
109
|
+
></skdx-chart-root>
|
|
110
|
+
`,
|
|
111
|
+
}]
|
|
112
|
+
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], sizeRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeRange", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], xAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxis", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }], zAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAxis", required: false }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: false }] }], annotations: [{ type: i0.Input, args: [{ isSignal: true, alias: "annotations", required: false }] }], colorScale: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorScale", required: false }] }], colorLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorLegend", required: false }] }] } });
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Generated bundle index. Do not edit.
|
|
116
|
+
*/
|
|
117
|
+
|
|
118
|
+
export { SkdxBubbleChartComponent };
|
|
119
|
+
//# sourceMappingURL=skdx-angular-charts-bubble.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-bubble.mjs","sources":["../../src/bubble/index.ts","../../src/bubble/skdx-angular-charts-bubble.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 layoutBubbleChart,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type Annotation,\n type AxisOptions,\n type BubbleSeries,\n type ColorScale,\n type Reference,\n} from '@skdx/angular-charts/internal';\n\n/** Three quantities per mark: x, y and a magnitude the bubble's area follows. */\n@Component({\n selector: 'skdx-bubble-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=\"bubble\"\n [label]=\"label() ?? 'Bubble 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 SkdxBubbleChartComponent extends SkdxSizedBase {\n readonly series = input.required<BubbleSeries[]>();\n /** Smallest and largest bubble radius in pixels. */\n readonly sizeRange = input<[number, number]>();\n /** Write each bubble's label on it. */\n readonly labels = input(false);\n readonly xAxis = input<AxisOptions>();\n readonly yAxis = input<AxisOptions>();\n /** How the magnitude is named and written. */\n readonly zAxis = input<Pick<AxisOptions, 'format' | 'label'>>();\n readonly references = input<Reference[]>();\n readonly annotations = input<Annotation[]>();\n /** Colors bubbles by their `value` (or `z`). */\n readonly colorScale = input<ColorScale>();\n /** Draw the color scale under the plot. */\n readonly colorLegend = input(false);\n\n protected readonly layout = computed(() =>\n layoutBubbleChart({\n ...this.sized(),\n series: this.series(),\n sizeRange: this.sizeRange(),\n labels: this.labels(),\n xAxis: this.xAxis(),\n yAxis: this.yAxis(),\n zAxis: this.zAxis(),\n references: this.references(),\n annotations: this.annotations(),\n colorScale: this.colorScale(),\n colorLegend: this.colorLegend(),\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,110 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { SkdxSizedBase, layoutBulletChart, 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 measure against a target over qualitative ranges, one row (or column) per KPI. */
|
|
11
|
+
class SkdxBulletChartComponent extends SkdxSizedBase {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
this.data = input.required(/* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
16
|
+
this.orientation = input(/* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
18
|
+
/** Qualitative ranges shared by every datum without its own. */
|
|
19
|
+
this.ranges = input(/* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [undefined, { debugName: "ranges" }] : /* istanbul ignore next */ []));
|
|
21
|
+
/** Scale start. */
|
|
22
|
+
this.min = input(/* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
|
|
24
|
+
/** Scale end. */
|
|
25
|
+
this.max = input(/* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
|
|
27
|
+
/** Write each value after its bar. */
|
|
28
|
+
this.labels = input(false, /* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
30
|
+
/** Approximate tick count of the value axis. */
|
|
31
|
+
this.ticks = input(/* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [undefined, { debugName: "ticks" }] : /* istanbul ignore next */ []));
|
|
33
|
+
this.layout = computed(() => layoutBulletChart({
|
|
34
|
+
...this.sized(),
|
|
35
|
+
data: this.data(),
|
|
36
|
+
orientation: this.orientation(),
|
|
37
|
+
ranges: this.ranges(),
|
|
38
|
+
min: this.min(),
|
|
39
|
+
max: this.max(),
|
|
40
|
+
labels: this.labels(),
|
|
41
|
+
ticks: this.ticks(),
|
|
42
|
+
}), /* @ts-ignore */
|
|
43
|
+
...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
|
|
44
|
+
}
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBulletChartComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxBulletChartComponent, isStandalone: true, selector: "skdx-bullet-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, ticks: { classPropertyName: "ticks", publicName: "ticks", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
47
|
+
<skdx-chart-root
|
|
48
|
+
[layout]="layout()"
|
|
49
|
+
[options]="options()"
|
|
50
|
+
kind="bullet"
|
|
51
|
+
[label]="label() ?? 'Bullet chart'"
|
|
52
|
+
[zoomable]="zoomable()"
|
|
53
|
+
[selectionMode]="selectionMode()"
|
|
54
|
+
[editable]="editable()"
|
|
55
|
+
[syncId]="syncId()"
|
|
56
|
+
[crosshair]="syncedCrosshair()"
|
|
57
|
+
[responsive]="!!responsive()"
|
|
58
|
+
(itemClick)="itemClick.emit($event)"
|
|
59
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
60
|
+
(taskChange)="taskChange.emit($event)"
|
|
61
|
+
(hiddenSeriesChange)="toggle($event)"
|
|
62
|
+
(zoomChange)="zoom.set($event)"
|
|
63
|
+
(viewChange)="view.set($event)"
|
|
64
|
+
(selectedChange)="selected.set($event)"
|
|
65
|
+
(highlightedChange)="highlighted.set($event)"
|
|
66
|
+
(syncChange)="sync($event)"
|
|
67
|
+
(measured)="measuredWidth.set($event)"
|
|
68
|
+
></skdx-chart-root>
|
|
69
|
+
`, 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 }); }
|
|
70
|
+
}
|
|
71
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxBulletChartComponent, decorators: [{
|
|
72
|
+
type: Component,
|
|
73
|
+
args: [{
|
|
74
|
+
selector: 'skdx-bullet-chart',
|
|
75
|
+
standalone: true,
|
|
76
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
77
|
+
imports: [SkdxChartRootComponent],
|
|
78
|
+
template: `
|
|
79
|
+
<skdx-chart-root
|
|
80
|
+
[layout]="layout()"
|
|
81
|
+
[options]="options()"
|
|
82
|
+
kind="bullet"
|
|
83
|
+
[label]="label() ?? 'Bullet chart'"
|
|
84
|
+
[zoomable]="zoomable()"
|
|
85
|
+
[selectionMode]="selectionMode()"
|
|
86
|
+
[editable]="editable()"
|
|
87
|
+
[syncId]="syncId()"
|
|
88
|
+
[crosshair]="syncedCrosshair()"
|
|
89
|
+
[responsive]="!!responsive()"
|
|
90
|
+
(itemClick)="itemClick.emit($event)"
|
|
91
|
+
(dataIssue)="dataIssue.emit($event)"
|
|
92
|
+
(taskChange)="taskChange.emit($event)"
|
|
93
|
+
(hiddenSeriesChange)="toggle($event)"
|
|
94
|
+
(zoomChange)="zoom.set($event)"
|
|
95
|
+
(viewChange)="view.set($event)"
|
|
96
|
+
(selectedChange)="selected.set($event)"
|
|
97
|
+
(highlightedChange)="highlighted.set($event)"
|
|
98
|
+
(syncChange)="sync($event)"
|
|
99
|
+
(measured)="measuredWidth.set($event)"
|
|
100
|
+
></skdx-chart-root>
|
|
101
|
+
`,
|
|
102
|
+
}]
|
|
103
|
+
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ranges: [{ type: i0.Input, args: [{ isSignal: true, alias: "ranges", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], ticks: [{ type: i0.Input, args: [{ isSignal: true, alias: "ticks", required: false }] }] } });
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Generated bundle index. Do not edit.
|
|
107
|
+
*/
|
|
108
|
+
|
|
109
|
+
export { SkdxBulletChartComponent };
|
|
110
|
+
//# sourceMappingURL=skdx-angular-charts-bullet.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skdx-angular-charts-bullet.mjs","sources":["../../src/bullet/index.ts","../../src/bullet/skdx-angular-charts-bullet.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 layoutBulletChart,\n SkdxChartRootComponent,\n SkdxSizedBase,\n type Band,\n type BulletDatum,\n} from '@skdx/angular-charts/internal';\n\n/** A measure against a target over qualitative ranges, one row (or column) per KPI. */\n@Component({\n selector: 'skdx-bullet-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=\"bullet\"\n [label]=\"label() ?? 'Bullet 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 SkdxBulletChartComponent extends SkdxSizedBase {\n readonly data = input.required<BulletDatum[]>();\n readonly orientation = input<'horizontal' | 'vertical'>();\n /** Qualitative ranges shared by every datum without its own. */\n readonly ranges = input<(number | Band)[]>();\n /** Scale start. */\n readonly min = input<number>();\n /** Scale end. */\n readonly max = input<number>();\n /** Write each value after its bar. */\n readonly labels = input(false);\n /** Approximate tick count of the value axis. */\n readonly ticks = input<number>();\n\n protected readonly layout = computed(() =>\n layoutBulletChart({\n ...this.sized(),\n data: this.data(),\n orientation: this.orientation(),\n ranges: this.ranges(),\n min: this.min(),\n max: this.max(),\n labels: this.labels(),\n ticks: this.ticks(),\n }),\n );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|