@skdx/angular-charts 0.34.0 → 0.35.0
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 +87 -3
- 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
|
@@ -1,16 +1,37 @@
|
|
|
1
|
+
import * as _skdx_angular_charts_internal from '@skdx/angular-charts/internal';
|
|
1
2
|
import * as _angular_core from '@angular/core';
|
|
2
3
|
|
|
3
4
|
/** A plotted value; `null` (or `NaN`) is a gap. */
|
|
4
5
|
type Value = number | null;
|
|
6
|
+
/** A stable identifier of a series, datum, node, link or feature; defaults to the item's name. */
|
|
7
|
+
type ChartItemId = string | number;
|
|
8
|
+
/**
|
|
9
|
+
* Locates one item, or a set of items, across a chart: every field given must match. `{ series }`
|
|
10
|
+
* is a whole series, `{ series, index }` one point, `{ id }` one datum/node/feature/link.
|
|
11
|
+
* Ids fall back to names, so `{ id: 'EMEA' }` finds a slice named EMEA that has no explicit id.
|
|
12
|
+
*/
|
|
13
|
+
interface ChartItemRef {
|
|
14
|
+
id?: ChartItemId | undefined;
|
|
15
|
+
series?: ChartItemId | undefined;
|
|
16
|
+
index?: number | undefined;
|
|
17
|
+
category?: string | undefined;
|
|
18
|
+
}
|
|
19
|
+
/** A selection: refs, or bare ids as `{ id }` sugar (`selected="EMEA"` selects the EMEA item). */
|
|
20
|
+
type Selection = ChartItemId | ChartItemRef | (ChartItemId | ChartItemRef)[];
|
|
21
|
+
/** Common identity and annotation metadata a datum-like object may carry. */
|
|
22
|
+
interface Identified {
|
|
23
|
+
/** Stable identifier used by selection, highlighting, events and tests. @default the name */
|
|
24
|
+
id?: ChartItemId | undefined;
|
|
25
|
+
}
|
|
5
26
|
/** One plotted series: a name for the legend/title and a value per category. */
|
|
6
|
-
interface Series {
|
|
27
|
+
interface Series extends Identified {
|
|
7
28
|
name: string;
|
|
8
29
|
data: Value[];
|
|
9
30
|
/** Any CSS color; defaults to the next `@skdx/tokens` series color. */
|
|
10
31
|
color?: string | undefined;
|
|
11
32
|
}
|
|
12
33
|
/** One named value, for the part-of-whole charts (pie, funnel, radial bar). */
|
|
13
|
-
interface Datum {
|
|
34
|
+
interface Datum extends Identified {
|
|
14
35
|
name: string;
|
|
15
36
|
value: number;
|
|
16
37
|
color?: string | undefined;
|
|
@@ -29,24 +50,96 @@ type Format = ((value: number) => string) | {
|
|
|
29
50
|
digits?: number | undefined;
|
|
30
51
|
/** Suffix written after the number, e.g. ` ms`. */
|
|
31
52
|
unit?: string | undefined;
|
|
53
|
+
/** IANA time zone for the date styles, e.g. `'UTC'`; defaults to the runtime zone. */
|
|
54
|
+
timeZone?: string | undefined;
|
|
32
55
|
};
|
|
33
56
|
/** Semantic color of a reference line or band. */
|
|
34
57
|
type Variant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
|
|
58
|
+
/** Tooltip behaviour; `true`/`false` is shorthand for `{ enabled }`. */
|
|
59
|
+
interface TooltipOptions {
|
|
60
|
+
/** @default true */
|
|
61
|
+
enabled?: boolean | undefined;
|
|
62
|
+
/**
|
|
63
|
+
* `item` shows the mark under the pointer; `axis` snaps to the nearest category and lists every
|
|
64
|
+
* series there (cartesian and candlestick charts; the same as `crosshair`). @default 'item'
|
|
65
|
+
*/
|
|
66
|
+
trigger?: 'item' | 'axis' | undefined;
|
|
67
|
+
/** Replaces the tooltip text of a mark: one string, or one line per string. */
|
|
68
|
+
formatter?: ((item: ChartItem) => string | string[]) | undefined;
|
|
69
|
+
/** Rewrites the shared axis tooltip: the category line, then one line per series. */
|
|
70
|
+
axisFormatter?: ((rows: string[], index: number) => string[]) | undefined;
|
|
71
|
+
/**
|
|
72
|
+
* Render the tooltip as an HTML element positioned over the page instead of inside the svg,
|
|
73
|
+
* so it can escape a clipped or scaled container. @default false
|
|
74
|
+
*/
|
|
75
|
+
portal?: boolean | undefined;
|
|
76
|
+
/** Where the box sits relative to its anchor; `auto` keeps it inside the canvas. @default 'auto' */
|
|
77
|
+
placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | undefined;
|
|
78
|
+
/** Anchor the box to the pointer (`true`) or to the hovered mark (`false`). @default true */
|
|
79
|
+
followPointer?: boolean | undefined;
|
|
80
|
+
}
|
|
81
|
+
/** Legend layout; `true`/`false` is shorthand for `{ enabled }`. */
|
|
82
|
+
interface LegendOptions {
|
|
83
|
+
/** @default true */
|
|
84
|
+
enabled?: boolean | undefined;
|
|
85
|
+
/** Above, below, or in a column beside the plot. @default 'top' */
|
|
86
|
+
position?: 'top' | 'bottom' | 'left' | 'right' | undefined;
|
|
87
|
+
/** Column width for `left`/`right`, in pixels. @default 120 */
|
|
88
|
+
width?: number | undefined;
|
|
89
|
+
/** Clicking or pressing Enter on an entry hides its series. @default true */
|
|
90
|
+
interactive?: boolean | undefined;
|
|
91
|
+
/** Entries beyond this many are summarized as `+N more`. */
|
|
92
|
+
maxItems?: number | undefined;
|
|
93
|
+
/** Rewrites an entry's text. */
|
|
94
|
+
formatter?: ((name: string) => string) | undefined;
|
|
95
|
+
/** Row alignment; `end` right-aligns (the default under `direction: 'rtl'`). @default 'start' */
|
|
96
|
+
align?: 'start' | 'end' | undefined;
|
|
97
|
+
}
|
|
98
|
+
/** Which marks stay full-strength while one is highlighted, and which fade. */
|
|
99
|
+
interface HighlightScope {
|
|
100
|
+
/** Keep the highlighted item only, or its whole series. @default 'item' */
|
|
101
|
+
highlighted?: 'item' | 'series' | undefined;
|
|
102
|
+
/** Fade nothing, the rest of the item's series, or every other mark. @default 'global' */
|
|
103
|
+
faded?: 'none' | 'series' | 'global' | undefined;
|
|
104
|
+
}
|
|
105
|
+
/** Opt-in tabular fallback rendered next to the svg for screen readers. */
|
|
106
|
+
interface AccessibleTableOptions {
|
|
107
|
+
/** Above this many rows a one-line summary is rendered instead of the table. @default 500 */
|
|
108
|
+
maxRows?: number | undefined;
|
|
109
|
+
/** Table caption. @default the chart label */
|
|
110
|
+
caption?: string | undefined;
|
|
111
|
+
}
|
|
112
|
+
/** A data problem found while laying out; reported through `onDataIssue`. */
|
|
113
|
+
interface ChartDataIssue {
|
|
114
|
+
/** Machine-readable, e.g. `invalid-value`, `cycle`, `duplicate-id`, `unknown-node`. */
|
|
115
|
+
code: string;
|
|
116
|
+
severity: 'warning' | 'error';
|
|
117
|
+
message: string;
|
|
118
|
+
itemId?: ChartItemId | undefined;
|
|
119
|
+
}
|
|
35
120
|
interface Sized {
|
|
36
121
|
/** @default 600 (300 for the round charts, 120 for sparklines) */
|
|
37
122
|
width?: number | undefined;
|
|
38
123
|
/** @default 300 (32 for sparklines) */
|
|
39
124
|
height?: number | undefined;
|
|
40
|
-
/** Draw a legend row above the plot. @default false */
|
|
41
|
-
legend?: boolean | undefined;
|
|
42
|
-
/** Show a hover tooltip for the mark under the pointer. @default true */
|
|
43
|
-
tooltip?: boolean | undefined;
|
|
125
|
+
/** Draw a legend row above (or, with `{ position: 'bottom' }`, below) the plot. @default false */
|
|
126
|
+
legend?: boolean | LegendOptions | undefined;
|
|
127
|
+
/** Show a hover tooltip for the mark under the pointer; an object configures it. @default true */
|
|
128
|
+
tooltip?: boolean | TooltipOptions | undefined;
|
|
44
129
|
/** How values are written in ticks, labels and tooltips. @default the runtime locale's number format */
|
|
45
130
|
format?: Format | undefined;
|
|
46
131
|
/** Categorical series colors, cycled by series index. @default the `@skdx/tokens` scales */
|
|
47
132
|
palette?: string[] | undefined;
|
|
48
133
|
/** Series (by name) left out of the plot; their legend entries stay, dimmed. */
|
|
49
134
|
hiddenSeries?: string[] | undefined;
|
|
135
|
+
/**
|
|
136
|
+
* Selected items, outlined in the focus color. Part-of-whole and graph charts also give the
|
|
137
|
+
* selection a chart-specific meaning (a pulled-out slice, a lit neighbourhood).
|
|
138
|
+
*/
|
|
139
|
+
selected?: Selection | undefined;
|
|
140
|
+
/** The item(s) under emphasis: everything outside `highlightScope` fades. `null` clears it. */
|
|
141
|
+
highlighted?: ChartItemRef | ChartItemId | (ChartItemRef | ChartItemId)[] | null | undefined;
|
|
142
|
+
highlightScope?: HighlightScope | undefined;
|
|
50
143
|
/** Draw a loading placeholder instead of the chart. @default false */
|
|
51
144
|
loading?: boolean | undefined;
|
|
52
145
|
/** Draw this message instead of the chart. */
|
|
@@ -57,20 +150,36 @@ interface Sized {
|
|
|
57
150
|
description?: string | undefined;
|
|
58
151
|
/** Hide the chart from assistive technology, for charts that repeat adjacent text. @default false */
|
|
59
152
|
decorative?: boolean | undefined;
|
|
153
|
+
/** Render a visually hidden data table next to the svg. @default false */
|
|
154
|
+
accessibleTable?: boolean | AccessibleTableOptions | undefined;
|
|
60
155
|
/**
|
|
61
156
|
* Fade marks in on mount and transition them on data changes; `true` is 300 ms, a number sets
|
|
62
157
|
* the duration. Off under `prefers-reduced-motion` and above 1500 shapes. @default false
|
|
63
158
|
*/
|
|
64
159
|
animate?: boolean | number | undefined;
|
|
65
|
-
/**
|
|
66
|
-
|
|
160
|
+
/**
|
|
161
|
+
* Measure the container and lay the chart out at that width, so text keeps its size. An object
|
|
162
|
+
* also swaps in `compact` overrides below `breakpoint` pixels (default 480). @default false
|
|
163
|
+
*/
|
|
164
|
+
responsive?: boolean | ResponsiveOptions | undefined;
|
|
165
|
+
/** Text direction; `rtl` right-aligns the legend and mirrors category axes. @default 'ltr' */
|
|
166
|
+
direction?: 'ltr' | 'rtl' | undefined;
|
|
67
167
|
}
|
|
68
|
-
|
|
168
|
+
interface ResponsiveOptions {
|
|
169
|
+
/** @default 480 */
|
|
170
|
+
breakpoint?: number | undefined;
|
|
171
|
+
/** Input overrides applied while the measured width is below `breakpoint`, e.g. `{ legend: false, labels: false }`. */
|
|
172
|
+
compact?: Record<string, unknown> | undefined;
|
|
173
|
+
}
|
|
174
|
+
/** `smooth` is an alias of `monotone`: a cubic through every point that never overshoots. */
|
|
175
|
+
type Curve = 'linear' | 'monotone' | 'smooth' | 'step' | 'stepBefore' | 'stepAfter';
|
|
69
176
|
/** A horizontal or vertical line, or a shaded band, drawn behind the marks in data coordinates. */
|
|
70
177
|
type Reference = {
|
|
71
178
|
label?: string | undefined;
|
|
72
179
|
/** @default 'neutral' */
|
|
73
180
|
variant?: Variant | undefined;
|
|
181
|
+
/** Any CSS color; wins over `variant`. */
|
|
182
|
+
color?: string | undefined;
|
|
74
183
|
} & ({
|
|
75
184
|
y: number;
|
|
76
185
|
axis?: 'left' | 'right' | undefined;
|
|
@@ -84,20 +193,100 @@ type Reference = {
|
|
|
84
193
|
x1: number | string | Date;
|
|
85
194
|
x2: number | string | Date;
|
|
86
195
|
});
|
|
196
|
+
interface AnnotationBase extends Identified {
|
|
197
|
+
label?: string | undefined;
|
|
198
|
+
/** @default 'neutral' */
|
|
199
|
+
variant?: Variant | undefined;
|
|
200
|
+
/** Any CSS color; wins over `variant`. */
|
|
201
|
+
color?: string | undefined;
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* Marks in data coordinates drawn over the plot: lines and bands (as `references`), a point or
|
|
205
|
+
* callout at `(x, y)`, free text, or a rectangle. `x` values name a category, number or date.
|
|
206
|
+
*/
|
|
207
|
+
type Annotation = AnnotationBase & ({
|
|
208
|
+
type: 'line';
|
|
209
|
+
y: number;
|
|
210
|
+
axis?: 'left' | 'right' | undefined;
|
|
211
|
+
} | {
|
|
212
|
+
type: 'line';
|
|
213
|
+
x: number | string | Date;
|
|
214
|
+
} | {
|
|
215
|
+
type: 'band';
|
|
216
|
+
y1: number;
|
|
217
|
+
y2: number;
|
|
218
|
+
axis?: 'left' | 'right' | undefined;
|
|
219
|
+
} | {
|
|
220
|
+
type: 'band';
|
|
221
|
+
x1: number | string | Date;
|
|
222
|
+
x2: number | string | Date;
|
|
223
|
+
} | {
|
|
224
|
+
type: 'point';
|
|
225
|
+
x: number | string | Date;
|
|
226
|
+
y: number;
|
|
227
|
+
axis?: 'left' | 'right' | undefined;
|
|
228
|
+
} | {
|
|
229
|
+
type: 'callout';
|
|
230
|
+
x: number | string | Date;
|
|
231
|
+
y: number;
|
|
232
|
+
axis?: 'left' | 'right' | undefined;
|
|
233
|
+
/** Pixel offset of the text from the point. @default [16, -16] */
|
|
234
|
+
offset?: [number, number] | undefined;
|
|
235
|
+
} | {
|
|
236
|
+
type: 'text';
|
|
237
|
+
x: number | string | Date;
|
|
238
|
+
y: number;
|
|
239
|
+
axis?: 'left' | 'right' | undefined;
|
|
240
|
+
text: string;
|
|
241
|
+
} | {
|
|
242
|
+
type: 'rect';
|
|
243
|
+
x1: number | string | Date;
|
|
244
|
+
x2: number | string | Date;
|
|
245
|
+
y1: number;
|
|
246
|
+
y2: number;
|
|
247
|
+
axis?: 'left' | 'right' | undefined;
|
|
248
|
+
});
|
|
87
249
|
interface AxisOptions {
|
|
250
|
+
/** Identifies the axis so a series can pick it with `axis: id`. */
|
|
251
|
+
id?: string | undefined;
|
|
252
|
+
/**
|
|
253
|
+
* Which side a value axis is drawn on; extra axes stack outward. Horizontal charts draw
|
|
254
|
+
* `'left'`/`'bottom'` axes along the bottom and `'right'`/`'top'` axes along the top.
|
|
255
|
+
* @default 'left' (first), 'right' (second)
|
|
256
|
+
*/
|
|
257
|
+
position?: 'left' | 'right' | 'top' | 'bottom' | undefined;
|
|
88
258
|
min?: number | undefined;
|
|
89
259
|
max?: number | undefined;
|
|
90
260
|
/** @default 'linear' */
|
|
91
|
-
scale?: 'linear' | 'log' | undefined;
|
|
261
|
+
scale?: 'linear' | 'log' | 'sqrt' | undefined;
|
|
92
262
|
/** Overrides the chart-level `format` for this axis. */
|
|
93
263
|
format?: Format | undefined;
|
|
94
264
|
/** Axis title. */
|
|
95
265
|
label?: string | undefined;
|
|
266
|
+
/** Approximate tick count. @default 5 */
|
|
267
|
+
ticks?: number | undefined;
|
|
268
|
+
/** Draw grid lines at the ticks. @default true */
|
|
269
|
+
grid?: boolean | undefined;
|
|
270
|
+
/** Run the axis the other way (largest value at the origin). @default false */
|
|
271
|
+
reversed?: boolean | undefined;
|
|
272
|
+
/** Round the domain out to nice tick values; `false` keeps the exact data extent. @default true */
|
|
273
|
+
nice?: boolean | undefined;
|
|
274
|
+
/** Draw the axis line. @default true for the baseline */
|
|
275
|
+
showLine?: boolean | undefined;
|
|
276
|
+
/** Draw tick marks at the ticks. @default false */
|
|
277
|
+
showTicks?: boolean | undefined;
|
|
278
|
+
/** Tick mark length in pixels. @default 4 */
|
|
279
|
+
tickSize?: number | undefined;
|
|
280
|
+
/** Tick label rotation in degrees (category axes), e.g. `-45` for long labels. @default 0 */
|
|
281
|
+
tickRotation?: number | undefined;
|
|
96
282
|
}
|
|
97
|
-
interface XAxisOptions extends Pick<AxisOptions, 'format' | 'label'> {
|
|
283
|
+
interface XAxisOptions extends Pick<AxisOptions, 'format' | 'label' | 'grid' | 'showLine' | 'showTicks' | 'tickSize' | 'tickRotation'> {
|
|
284
|
+
/** Fixed category order and membership; categories not listed are dropped, missing ones are empty. */
|
|
285
|
+
domain?: Category[] | undefined;
|
|
98
286
|
/**
|
|
99
287
|
* `category` spaces points evenly; `time` and `linear` place numeric or date categories
|
|
100
|
-
* proportionally, so irregular timestamps land where they belong.
|
|
288
|
+
* proportionally, so irregular timestamps land where they belong. Under `time`, ISO 8601
|
|
289
|
+
* strings are accepted as categories. @default 'category'
|
|
101
290
|
*/
|
|
102
291
|
type?: 'category' | 'time' | 'linear' | undefined;
|
|
103
292
|
}
|
|
@@ -106,30 +295,97 @@ interface Zoom {
|
|
|
106
295
|
start: number;
|
|
107
296
|
end: number;
|
|
108
297
|
}
|
|
298
|
+
/** An uncertainty around a value: a symmetric `±e`, or an absolute `[low, high]` pair. */
|
|
299
|
+
type ErrorValue = number | [number, number] | null;
|
|
300
|
+
/**
|
|
301
|
+
* A pure, deterministic step applied to a series' values in order. `movingAverage` leaves the
|
|
302
|
+
* first `window - 1` values as gaps; `difference` and `percentageChange` leave the first one.
|
|
303
|
+
*/
|
|
304
|
+
type SeriesTransform = {
|
|
305
|
+
type: 'cumulative';
|
|
306
|
+
} | {
|
|
307
|
+
type: 'difference';
|
|
308
|
+
} | {
|
|
309
|
+
type: 'percentageChange';
|
|
310
|
+
} | {
|
|
311
|
+
type: 'movingAverage';
|
|
312
|
+
window: number;
|
|
313
|
+
} | {
|
|
314
|
+
type: 'normalize';
|
|
315
|
+
to?: 'max' | 'sum' | undefined;
|
|
316
|
+
} | {
|
|
317
|
+
type: 'rank';
|
|
318
|
+
order?: 'asc' | 'desc' | undefined;
|
|
319
|
+
} | {
|
|
320
|
+
type: 'filter';
|
|
321
|
+
min?: number | undefined;
|
|
322
|
+
max?: number | undefined;
|
|
323
|
+
}
|
|
324
|
+
/** Orders the values (and, at chart level, the categories with them). */
|
|
325
|
+
| {
|
|
326
|
+
type: 'sort';
|
|
327
|
+
order?: 'asc' | 'desc' | undefined;
|
|
328
|
+
}
|
|
329
|
+
/** Folds every `every` consecutive values into one. */
|
|
330
|
+
| {
|
|
331
|
+
type: 'aggregate';
|
|
332
|
+
every: number;
|
|
333
|
+
method?: 'sum' | 'mean' | 'min' | 'max' | undefined;
|
|
334
|
+
}
|
|
335
|
+
/** Bins the values into counts (chart level: categories become bin labels). */
|
|
336
|
+
| {
|
|
337
|
+
type: 'bin';
|
|
338
|
+
bins?: number | undefined;
|
|
339
|
+
binWidth?: number | undefined;
|
|
340
|
+
domain?: [number, number] | undefined;
|
|
341
|
+
};
|
|
342
|
+
/**
|
|
343
|
+
* Point reduction for dense line and area series. `auto` samples above 2000 visible points with
|
|
344
|
+
* LTTB; `minmax` keeps the extremes of each bucket; `none` draws everything. Sampled charts keep
|
|
345
|
+
* their original point indexes in items and tooltips.
|
|
346
|
+
*/
|
|
347
|
+
type Sampling = 'none' | 'auto' | 'lttb' | 'minmax' | 'm4' | {
|
|
348
|
+
strategy: 'lttb' | 'minmax' | 'm4';
|
|
349
|
+
threshold?: number | undefined;
|
|
350
|
+
};
|
|
109
351
|
/** A bar, line or area series inside a cartesian chart. */
|
|
110
352
|
interface CartesianSeries extends Series {
|
|
111
353
|
/** Defaults to the chart's own type: bars in a BarChart, lines in a LineChart, areas in an AreaChart. */
|
|
112
354
|
type?: 'bar' | 'line' | 'area' | undefined;
|
|
113
|
-
/** Which y axis the values are measured on
|
|
114
|
-
axis?: 'left' | 'right' | undefined;
|
|
355
|
+
/** Which y axis the values are measured on: a side, or the `id` of an axis in `yAxis`. @default 'left' */
|
|
356
|
+
axis?: 'left' | 'right' | (string & {}) | undefined;
|
|
115
357
|
/** Overrides the chart-level curve for this line or area. */
|
|
116
358
|
curve?: Curve | undefined;
|
|
117
359
|
/** SVG dash pattern, e.g. `'4 3'`, for a line or area outline. */
|
|
118
360
|
dash?: string | undefined;
|
|
361
|
+
/** Area fill opacity, 0–1. @default 0.25 */
|
|
362
|
+
fillOpacity?: number | undefined;
|
|
363
|
+
/** Fade the area fill from `fillOpacity` at the line to transparent at the baseline. @default false */
|
|
364
|
+
gradient?: boolean | undefined;
|
|
119
365
|
/** Dots on line and area points. @default true up to 100 points, then off */
|
|
120
366
|
markers?: boolean | undefined;
|
|
367
|
+
/** Marker shape of a line or area series. @default 'circle' */
|
|
368
|
+
symbol?: MarkerSymbol | undefined;
|
|
369
|
+
/** Marker radius in pixels. @default 3 */
|
|
370
|
+
markerSize?: number | undefined;
|
|
121
371
|
/** Stack with the other series that share the same group; `true` is the default group. */
|
|
122
372
|
stack?: boolean | string | undefined;
|
|
373
|
+
/** Error bars per point: `±e` or `[low, high]`, drawn as whiskers on bars, lines and areas. */
|
|
374
|
+
errors?: ErrorValue[] | undefined;
|
|
375
|
+
/** Transforms applied to this series after the chart-level ones. */
|
|
376
|
+
transforms?: SeriesTransform[] | undefined;
|
|
123
377
|
}
|
|
124
378
|
/** A shaded band between two series of values, e.g. a forecast interval. */
|
|
125
|
-
interface RangeSeries {
|
|
379
|
+
interface RangeSeries extends Identified {
|
|
126
380
|
type: 'range';
|
|
127
381
|
name: string;
|
|
128
382
|
low: Value[];
|
|
129
383
|
high: Value[];
|
|
130
384
|
color?: string | undefined;
|
|
131
|
-
axis?: 'left' | 'right' | undefined;
|
|
385
|
+
axis?: 'left' | 'right' | (string & {}) | undefined;
|
|
132
386
|
curve?: Curve | undefined;
|
|
387
|
+
/** A shaded band, floating bars from low to high, or two outlines. @default 'area' */
|
|
388
|
+
style?: 'area' | 'bar' | 'line' | undefined;
|
|
133
389
|
}
|
|
134
390
|
type Category = string | number | Date;
|
|
135
391
|
interface ChartInput extends Sized {
|
|
@@ -137,29 +393,54 @@ interface ChartInput extends Sized {
|
|
|
137
393
|
/** X-axis labels; defaults to the 1-based index of each point. Numbers and dates are written with `xAxis.format`. */
|
|
138
394
|
categories?: Category[] | undefined;
|
|
139
395
|
xAxis?: XAxisOptions | undefined;
|
|
140
|
-
|
|
396
|
+
/** The value axis, or several: each needs an `id` and a `position`; series pick one with `axis`. */
|
|
397
|
+
yAxis?: AxisOptions | AxisOptions[] | undefined;
|
|
141
398
|
/** Enables the second y axis on the right; series opt in with `axis: 'right'`. */
|
|
142
399
|
rightAxis?: AxisOptions | undefined;
|
|
143
400
|
references?: Reference[] | undefined;
|
|
401
|
+
/** Points, callouts, text and rectangles in data coordinates, drawn over the marks. */
|
|
402
|
+
annotations?: Annotation[] | undefined;
|
|
144
403
|
/** Write each value next to its mark. @default false */
|
|
145
404
|
labels?: boolean | undefined;
|
|
146
405
|
/** Straight segments, a monotone cubic, or steps, for the line and area series. @default 'linear' */
|
|
147
406
|
curve?: Curve | undefined;
|
|
148
407
|
/** Draw lines across gaps instead of breaking them. @default false */
|
|
149
408
|
connectNulls?: boolean | undefined;
|
|
409
|
+
/** What a `null` does to a line: a gap, a straight bridge, or a zero. Wins over `connectNulls`. @default 'gap' */
|
|
410
|
+
nulls?: 'gap' | 'connect' | 'zero' | undefined;
|
|
150
411
|
/** Stack the series instead of grouping them; `'percent'` normalizes each category to 100%. @default false */
|
|
151
412
|
stacked?: boolean | 'percent' | undefined;
|
|
413
|
+
/**
|
|
414
|
+
* Where stacks stand: on zero, normalized to 100% (`expand`, the same as `stacked: 'percent'`),
|
|
415
|
+
* centred (`silhouette`) or with minimized wiggle (`wiggle`, a streamgraph). @default 'zero'
|
|
416
|
+
*/
|
|
417
|
+
stackOffset?: 'zero' | 'expand' | 'silhouette' | 'wiggle' | undefined;
|
|
152
418
|
/** Bars grow along x, categories run down the y axis. Line and area series are ignored. @default 'vertical' */
|
|
153
419
|
orientation?: 'vertical' | 'horizontal' | undefined;
|
|
154
420
|
/** Corner radius of bars, in pixels. @default 0 */
|
|
155
421
|
radius?: number | undefined;
|
|
156
|
-
/**
|
|
157
|
-
|
|
422
|
+
/** Share of each category slot left empty around its bars, 0–0.9. @default 0.2 */
|
|
423
|
+
barGap?: number | undefined;
|
|
424
|
+
/** Largest bar thickness in pixels; bars stay centred in their slot. */
|
|
425
|
+
barWidth?: number | undefined;
|
|
426
|
+
/** Smallest bar length in pixels, so tiny values stay visible. @default 0 */
|
|
427
|
+
minBarSize?: number | undefined;
|
|
428
|
+
/** Order categories by the first series' value, or by a named series. */
|
|
429
|
+
sort?: 'asc' | 'desc' | {
|
|
430
|
+
by: string;
|
|
431
|
+
order: 'asc' | 'desc';
|
|
432
|
+
} | undefined;
|
|
433
|
+
/** The value areas fill down to (and bars grow from). @default 0 */
|
|
434
|
+
baseline?: number | undefined;
|
|
435
|
+
/** Default fill opacity of areas, 0–1. @default 0.25 */
|
|
436
|
+
fillOpacity?: number | undefined;
|
|
158
437
|
/**
|
|
159
438
|
* `histogram`: each series' data is a raw sample, binned into equal-width bars.
|
|
160
439
|
* `cumulative`: each series is replaced by its running total.
|
|
161
440
|
*/
|
|
162
441
|
transform?: 'histogram' | 'cumulative' | undefined;
|
|
442
|
+
/** Transforms applied to every non-range series, in order, after `transform`. */
|
|
443
|
+
transforms?: SeriesTransform[] | undefined;
|
|
163
444
|
/** Histogram bin count. @default Sturges' rule */
|
|
164
445
|
bins?: number | undefined;
|
|
165
446
|
/** Histogram bin width; wins over `bins`. */
|
|
@@ -168,6 +449,8 @@ interface ChartInput extends Sized {
|
|
|
168
449
|
binDomain?: [number, number] | undefined;
|
|
169
450
|
/** What histogram bars measure. @default 'count' */
|
|
170
451
|
binMode?: 'count' | 'density' | 'cumulative' | undefined;
|
|
452
|
+
/** Point reduction for dense line/area series. @default 'auto' */
|
|
453
|
+
sampling?: Sampling | undefined;
|
|
171
454
|
/** Visible category window, for zooming. */
|
|
172
455
|
zoom?: Zoom | undefined;
|
|
173
456
|
/** Draw a range strip under the plot showing the whole series and the zoomed window. @default false */
|
|
@@ -180,62 +463,480 @@ type LineChartInput = ChartInput;
|
|
|
180
463
|
type AreaChartInput = ChartInput;
|
|
181
464
|
interface PieChartInput extends Sized {
|
|
182
465
|
data: Datum[];
|
|
466
|
+
/** `donut` is a pie with `innerRadius` 0.6 unless set. @default 'pie' */
|
|
467
|
+
variant?: 'pie' | 'donut' | undefined;
|
|
183
468
|
/** Hole radius as a fraction of the outer radius: 0 is a pie, 0.6 a donut. @default 0 */
|
|
184
469
|
innerRadius?: number | undefined;
|
|
470
|
+
/** Outer radius as a fraction of the space available, leaving room around the pie. @default 1 */
|
|
471
|
+
outerRadius?: number | undefined;
|
|
185
472
|
/** Write each slice's name and share on the slice. @default false */
|
|
186
473
|
labels?: boolean | undefined;
|
|
474
|
+
/** Inside the slice, or outside with a connector. @default 'inside' */
|
|
475
|
+
labelPosition?: 'inside' | 'outside' | undefined;
|
|
187
476
|
/** Degrees clockwise from 12 o'clock where the first slice starts. @default 0 */
|
|
188
477
|
startAngle?: number | undefined;
|
|
189
478
|
/** Degrees clockwise from 12 o'clock where the last slice ends; `-90`/`90` makes a half circle. @default startAngle + 360 */
|
|
190
479
|
endAngle?: number | undefined;
|
|
480
|
+
/** Gap between slices, in degrees. @default 0 */
|
|
481
|
+
padAngle?: number | undefined;
|
|
482
|
+
/** Rounded slice corners, in pixels. @default 0 */
|
|
483
|
+
cornerRadius?: number | undefined;
|
|
484
|
+
/** Smallest angle a non-zero slice is drawn with, in degrees; the rest shrink to make room. @default 0 */
|
|
485
|
+
minAngle?: number | undefined;
|
|
486
|
+
/** How shares are written in labels and tooltips. @default whole percent */
|
|
487
|
+
percentFormat?: Format | undefined;
|
|
488
|
+
/** Order slices by value instead of input order. */
|
|
489
|
+
sort?: 'asc' | 'desc' | undefined;
|
|
191
490
|
/** Text in the middle of a donut, e.g. the total. */
|
|
192
491
|
centerLabel?: string | undefined;
|
|
193
492
|
}
|
|
194
|
-
|
|
493
|
+
/** A scatter point: an `[x, y]` pair, an `[x, y, size]` triple, or an object with an optional label. */
|
|
494
|
+
type ScatterPoint = [number, number] | [number, number, number] | (Identified & {
|
|
495
|
+
x: number;
|
|
496
|
+
y: number;
|
|
497
|
+
size?: number | undefined;
|
|
498
|
+
label?: string | undefined;
|
|
499
|
+
/** Any CSS color for this point; wins over the series color and `colorScale`. */
|
|
500
|
+
color?: string | undefined;
|
|
501
|
+
/** The quantity `colorScale` maps to a color. */
|
|
502
|
+
value?: number | undefined;
|
|
503
|
+
});
|
|
504
|
+
/** Marker shape of a scatter series, so series are told apart by more than color. */
|
|
505
|
+
type MarkerSymbol = 'circle' | 'square' | 'diamond' | 'triangle';
|
|
506
|
+
interface ScatterSeries extends Identified {
|
|
195
507
|
name: string;
|
|
196
|
-
/** `[x, y]` pairs,
|
|
197
|
-
data:
|
|
508
|
+
/** `[x, y]` pairs, `[x, y, size]` triples for bubbles, or `{ x, y, size?, label? }` objects. */
|
|
509
|
+
data: ScatterPoint[];
|
|
198
510
|
color?: string | undefined;
|
|
511
|
+
/** @default 'circle' */
|
|
512
|
+
symbol?: MarkerSymbol | undefined;
|
|
199
513
|
}
|
|
200
514
|
interface ScatterChartInput extends Sized {
|
|
201
515
|
series: ScatterSeries[];
|
|
202
516
|
/** Bubble radius range in pixels, for `[x, y, size]` data. @default [3, 18] */
|
|
203
517
|
sizeRange?: [number, number] | undefined;
|
|
204
|
-
/**
|
|
205
|
-
|
|
518
|
+
/** Write each point's `label` next to it. @default false */
|
|
519
|
+
labels?: boolean | undefined;
|
|
520
|
+
xAxis?: AxisOptions | undefined;
|
|
521
|
+
yAxis?: AxisOptions | undefined;
|
|
522
|
+
references?: Reference[] | undefined;
|
|
523
|
+
annotations?: Annotation[] | undefined;
|
|
524
|
+
/** Colors points by their `value` (object points only). */
|
|
525
|
+
colorScale?: ColorScale | undefined;
|
|
526
|
+
/** Draw the `colorScale` legend under the plot, or beside it. @default false */
|
|
527
|
+
colorLegend?: boolean | ColorLegendOptions | undefined;
|
|
528
|
+
/** Symbol radius in pixels for plain points. @default 3 */
|
|
529
|
+
markerSize?: number | undefined;
|
|
530
|
+
/** Extra invisible radius around each point that still counts as a hover/click. @default 0 */
|
|
531
|
+
hitRadius?: number | undefined;
|
|
532
|
+
/** Deterministic jitter in pixels applied to overlapping points. @default 0 */
|
|
533
|
+
jitter?: number | undefined;
|
|
534
|
+
/** Least-squares fit per series: `true` is linear. @default false */
|
|
535
|
+
trendline?: boolean | 'linear' | 'exponential' | 'logarithmic' | 'power' | 'polynomial' | undefined;
|
|
536
|
+
/** Above this many points every k-th point is kept (systematic sampling). @default 'none' */
|
|
537
|
+
sampling?: 'none' | 'auto' | {
|
|
538
|
+
threshold: number;
|
|
539
|
+
} | undefined;
|
|
540
|
+
}
|
|
541
|
+
/** Where a colour legend sits. */
|
|
542
|
+
interface ColorLegendOptions {
|
|
543
|
+
/** @default 'horizontal' (under the plot); `vertical` is a column at the right */
|
|
544
|
+
orientation?: 'horizontal' | 'vertical' | undefined;
|
|
545
|
+
title?: string | undefined;
|
|
546
|
+
}
|
|
547
|
+
/** A bubble: two positions and a magnitude the bubble's area follows. */
|
|
548
|
+
interface BubblePoint extends Identified {
|
|
549
|
+
x: number;
|
|
550
|
+
y: number;
|
|
551
|
+
/** Magnitude; the bubble's area, not its radius, is proportional to it. Negatives count as zero. */
|
|
552
|
+
z: number;
|
|
553
|
+
label?: string | undefined;
|
|
554
|
+
color?: string | undefined;
|
|
555
|
+
/** The quantity `colorScale` maps to a color. @default z */
|
|
556
|
+
value?: number | undefined;
|
|
557
|
+
}
|
|
558
|
+
interface BubbleSeries extends Identified {
|
|
559
|
+
name: string;
|
|
560
|
+
data: BubblePoint[];
|
|
561
|
+
color?: string | undefined;
|
|
562
|
+
}
|
|
563
|
+
interface BubbleChartInput extends Sized {
|
|
564
|
+
series: BubbleSeries[];
|
|
565
|
+
/** Smallest and largest bubble radius in pixels; the largest magnitude gets the largest radius. @default [4, 24] */
|
|
566
|
+
sizeRange?: [number, number] | undefined;
|
|
567
|
+
/** Write each bubble's `label` on it. @default false */
|
|
568
|
+
labels?: boolean | undefined;
|
|
206
569
|
xAxis?: AxisOptions | undefined;
|
|
207
570
|
yAxis?: AxisOptions | undefined;
|
|
571
|
+
/** How the magnitude is named and written in tooltips. */
|
|
572
|
+
zAxis?: Pick<AxisOptions, 'format' | 'label'> | undefined;
|
|
573
|
+
references?: Reference[] | undefined;
|
|
574
|
+
annotations?: Annotation[] | undefined;
|
|
575
|
+
/** Colors bubbles by their `value` (or `z`). */
|
|
576
|
+
colorScale?: ColorScale | undefined;
|
|
577
|
+
/** Draw the `colorScale` legend under the plot, or beside it. @default false */
|
|
578
|
+
colorLegend?: boolean | ColorLegendOptions | undefined;
|
|
579
|
+
}
|
|
580
|
+
/** A qualitative sector of a gauge or bullet scale. */
|
|
581
|
+
interface Band {
|
|
582
|
+
from: number;
|
|
583
|
+
to: number;
|
|
584
|
+
variant?: Variant | undefined;
|
|
585
|
+
color?: string | undefined;
|
|
586
|
+
label?: string | undefined;
|
|
587
|
+
}
|
|
588
|
+
interface GaugeChartInput extends Sized {
|
|
589
|
+
/** The reading; values outside `min`–`max` are drawn clamped and reported as given. */
|
|
590
|
+
value: number;
|
|
591
|
+
/** @default 0 */
|
|
592
|
+
min?: number | undefined;
|
|
593
|
+
/** @default 100 */
|
|
594
|
+
max?: number | undefined;
|
|
595
|
+
/** `radial` reads with a needle over the bands; `solid` fills the arc up to the value. @default 'radial' */
|
|
596
|
+
variant?: 'radial' | 'solid' | undefined;
|
|
597
|
+
/** Degrees clockwise from 12 o'clock. `-90`/`90` is a semi-circle. @default -120 */
|
|
598
|
+
startAngle?: number | undefined;
|
|
599
|
+
/** @default 120 */
|
|
600
|
+
endAngle?: number | undefined;
|
|
601
|
+
/** Arc thickness as a fraction of the radius. @default 0.18 */
|
|
602
|
+
thickness?: number | undefined;
|
|
603
|
+
/** Threshold sectors in value units, e.g. healthy / warning / critical. */
|
|
604
|
+
bands?: Band[] | undefined;
|
|
605
|
+
/** A marker at this value. */
|
|
606
|
+
target?: number | undefined;
|
|
607
|
+
/** Tick marks: their count (including both ends), `true` for 5, `false` for none. @default true */
|
|
608
|
+
ticks?: number | boolean | undefined;
|
|
609
|
+
/** Write the tick values. @default true */
|
|
610
|
+
tickLabels?: boolean | undefined;
|
|
611
|
+
/** Text in the middle; defaults to the formatted value. */
|
|
612
|
+
centerLabel?: string | undefined;
|
|
613
|
+
/** Smaller text under the value, e.g. the metric name. */
|
|
614
|
+
caption?: string | undefined;
|
|
615
|
+
}
|
|
616
|
+
/** A single reading on a straight scale: the bullet engine with gauge semantics. */
|
|
617
|
+
interface LinearGaugeInput extends Sized {
|
|
618
|
+
value: number;
|
|
619
|
+
/** @default 0 */
|
|
620
|
+
min?: number | undefined;
|
|
621
|
+
/** @default 100, or the largest of value, target and bands */
|
|
622
|
+
max?: number | undefined;
|
|
623
|
+
target?: number | undefined;
|
|
624
|
+
/** Threshold sectors in value units. */
|
|
625
|
+
bands?: Band[] | undefined;
|
|
626
|
+
/** @default 'horizontal' */
|
|
627
|
+
orientation?: 'horizontal' | 'vertical' | undefined;
|
|
628
|
+
/** The metric name, written before the scale and in tooltips. */
|
|
629
|
+
caption?: string | undefined;
|
|
630
|
+
/** Write the value after the bar. @default true */
|
|
631
|
+
labels?: boolean | undefined;
|
|
632
|
+
/** Approximate tick count of the scale. @default 5 */
|
|
633
|
+
ticks?: number | undefined;
|
|
634
|
+
}
|
|
635
|
+
interface HistogramInput extends Sized {
|
|
636
|
+
/** The raw sample; `null` and `NaN` are skipped. */
|
|
637
|
+
data: Value[];
|
|
638
|
+
/** Series name in tooltips and the legend. @default 'Count' */
|
|
639
|
+
name?: string | undefined;
|
|
640
|
+
color?: string | undefined;
|
|
641
|
+
/** Bin count. @default Sturges' rule */
|
|
642
|
+
bins?: number | undefined;
|
|
643
|
+
/** Bin width; wins over `bins`. */
|
|
644
|
+
binWidth?: number | undefined;
|
|
645
|
+
/** Explicit ascending bin edges; wins over `bins` and `binWidth` and allows unequal bins. */
|
|
646
|
+
thresholds?: number[] | undefined;
|
|
647
|
+
/** Value range binned; samples outside are dropped. @default the sample extent */
|
|
648
|
+
domain?: [number, number] | undefined;
|
|
649
|
+
/** What bars measure: observations, observations per unit (area sums to 1), or shares of the sample. @default 'count' */
|
|
650
|
+
mode?: 'count' | 'density' | 'percent' | undefined;
|
|
651
|
+
/** How bin edges are written. */
|
|
652
|
+
xAxis?: Pick<AxisOptions, 'format' | 'label'> | undefined;
|
|
653
|
+
yAxis?: AxisOptions | undefined;
|
|
208
654
|
references?: Reference[] | undefined;
|
|
655
|
+
annotations?: Annotation[] | undefined;
|
|
656
|
+
/** Write each bin's value above its bar. @default false */
|
|
657
|
+
labels?: boolean | undefined;
|
|
658
|
+
/** Share of each bin slot left empty. @default 0.05 */
|
|
659
|
+
barGap?: number | undefined;
|
|
660
|
+
}
|
|
661
|
+
interface BulletDatum extends Identified {
|
|
662
|
+
name: string;
|
|
663
|
+
/** The measure. */
|
|
664
|
+
value: number;
|
|
665
|
+
target?: number | undefined;
|
|
666
|
+
/** Qualitative upper bounds, ascending, e.g. `[50, 75, 100]` for poor / acceptable / good; overrides the chart-level `ranges`. */
|
|
667
|
+
ranges?: (number | Band)[] | undefined;
|
|
668
|
+
color?: string | undefined;
|
|
669
|
+
}
|
|
670
|
+
interface BulletChartInput extends Sized {
|
|
671
|
+
/** One row (or column) per datum. */
|
|
672
|
+
data: BulletDatum[];
|
|
673
|
+
/** @default 'horizontal' */
|
|
674
|
+
orientation?: 'horizontal' | 'vertical' | undefined;
|
|
675
|
+
/** Qualitative ranges shared by every datum without its own. */
|
|
676
|
+
ranges?: (number | Band)[] | undefined;
|
|
677
|
+
/** Scale start. @default 0, or the smallest value when negative */
|
|
678
|
+
min?: number | undefined;
|
|
679
|
+
/** Scale end. @default the largest of the values, targets and ranges */
|
|
680
|
+
max?: number | undefined;
|
|
681
|
+
/** Write each value after its bar. @default false */
|
|
682
|
+
labels?: boolean | undefined;
|
|
683
|
+
/** Approximate tick count of the value axis. @default 5 */
|
|
684
|
+
ticks?: number | undefined;
|
|
685
|
+
}
|
|
686
|
+
/** A combo series must say what it is: a bar, line, area or range. */
|
|
687
|
+
type ComboSeries = (CartesianSeries & {
|
|
688
|
+
type: 'bar' | 'line' | 'area';
|
|
689
|
+
}) | RangeSeries;
|
|
690
|
+
/** Bars, lines, areas and ranges on one category axis and up to two value axes. */
|
|
691
|
+
interface ComboChartInput extends Omit<ChartInput, 'series' | 'transform' | 'bins' | 'binWidth' | 'binDomain' | 'binMode'> {
|
|
692
|
+
series: ComboSeries[];
|
|
693
|
+
}
|
|
694
|
+
interface RangeChartSeries extends Identified {
|
|
695
|
+
name: string;
|
|
696
|
+
low: Value[];
|
|
697
|
+
high: Value[];
|
|
698
|
+
color?: string | undefined;
|
|
699
|
+
axis?: 'left' | 'right' | undefined;
|
|
700
|
+
curve?: Curve | undefined;
|
|
701
|
+
}
|
|
702
|
+
/** Low–high intervals per category: a band, floating bars, or two outlines. */
|
|
703
|
+
interface RangeChartInput extends Pick<ChartInput, 'categories' | 'xAxis' | 'yAxis' | 'rightAxis' | 'references' | 'annotations' | 'curve' | 'connectNulls' | 'orientation' | 'radius' | 'barGap' | 'barWidth' | 'zoom' | 'brush' | 'crosshair'>, Sized {
|
|
704
|
+
series: RangeChartSeries[];
|
|
705
|
+
/** @default 'area' */
|
|
706
|
+
variant?: 'area' | 'bar' | 'line' | undefined;
|
|
707
|
+
}
|
|
708
|
+
/** A category with a start and an end value, joined by a connector: before/after, plan/actual. */
|
|
709
|
+
interface DumbbellDatum extends Identified {
|
|
710
|
+
name: string;
|
|
711
|
+
start: Value;
|
|
712
|
+
end: Value;
|
|
713
|
+
color?: string | undefined;
|
|
714
|
+
}
|
|
715
|
+
interface DumbbellChartInput extends Sized {
|
|
716
|
+
data: DumbbellDatum[];
|
|
717
|
+
/** Names of the two ends, for the legend and tooltips. @default ['Start', 'End'] */
|
|
718
|
+
startLabel?: string | undefined;
|
|
719
|
+
endLabel?: string | undefined;
|
|
720
|
+
/** Categories run down y with values along x. @default 'horizontal' */
|
|
721
|
+
orientation?: 'horizontal' | 'vertical' | undefined;
|
|
722
|
+
/** Write both values next to their markers. @default false */
|
|
723
|
+
labels?: boolean | undefined;
|
|
724
|
+
/** Order categories by end value, or by the change. */
|
|
725
|
+
sort?: 'asc' | 'desc' | 'change' | undefined;
|
|
726
|
+
/** Marker radius in pixels. @default 5 */
|
|
727
|
+
markerSize?: number | undefined;
|
|
728
|
+
xAxis?: AxisOptions | undefined;
|
|
729
|
+
references?: Reference[] | undefined;
|
|
730
|
+
}
|
|
731
|
+
/** Categories sorted by value with the cumulative share as a line on the right axis. */
|
|
732
|
+
interface ParetoChartInput extends Pick<ChartInput, 'labels' | 'radius' | 'barGap' | 'barWidth' | 'yAxis' | 'xAxis' | 'zoom' | 'brush' | 'crosshair'>, Sized {
|
|
733
|
+
data: Datum[];
|
|
734
|
+
/** A cumulative-share reference line, e.g. `0.8` for the 80/20 rule. */
|
|
735
|
+
threshold?: number | undefined;
|
|
736
|
+
/** Name of the cumulative line in the legend and tooltips. @default 'Cumulative' */
|
|
737
|
+
cumulativeLabel?: string | undefined;
|
|
738
|
+
/** Name of the bars in the legend and tooltips. @default 'Value' */
|
|
739
|
+
name?: string | undefined;
|
|
740
|
+
}
|
|
741
|
+
/** One Marimekko column: its width follows `total` (or the sum of its segments), segments stack to 100%. */
|
|
742
|
+
interface MarimekkoCategory extends Identified {
|
|
743
|
+
name: string;
|
|
744
|
+
/** Segment values; keyed by the `segments` names in order. */
|
|
745
|
+
values: Value[];
|
|
746
|
+
/** Column width measure. @default the sum of `values` */
|
|
747
|
+
total?: number | undefined;
|
|
748
|
+
}
|
|
749
|
+
interface MarimekkoChartInput extends Sized {
|
|
750
|
+
/** Segment names, in stacking order; one color each. */
|
|
751
|
+
segments: (string | Pick<Datum, 'id' | 'name' | 'color'>)[];
|
|
752
|
+
data: MarimekkoCategory[];
|
|
753
|
+
/** Write segment shares inside cells wide enough. @default false */
|
|
754
|
+
labels?: boolean | undefined;
|
|
755
|
+
/** Gap between columns as a share of the plot width. @default 0.01 */
|
|
756
|
+
gap?: number | undefined;
|
|
757
|
+
/** How the column widths (totals) are written in tooltips and the x axis. */
|
|
758
|
+
xAxis?: Pick<AxisOptions, 'format' | 'label'> | undefined;
|
|
759
|
+
}
|
|
760
|
+
/** One axis of a parallel-coordinates chart. */
|
|
761
|
+
interface ParallelDimension extends Identified {
|
|
762
|
+
/** Key in each row's values, and the axis title unless `label` is set. */
|
|
763
|
+
key: string;
|
|
764
|
+
label?: string | undefined;
|
|
765
|
+
min?: number | undefined;
|
|
766
|
+
max?: number | undefined;
|
|
767
|
+
format?: Format | undefined;
|
|
768
|
+
/** Run the axis top-down. @default false */
|
|
769
|
+
reversed?: boolean | undefined;
|
|
770
|
+
}
|
|
771
|
+
interface ParallelRow extends Identified {
|
|
772
|
+
name: string;
|
|
773
|
+
values: Record<string, Value>;
|
|
774
|
+
color?: string | undefined;
|
|
775
|
+
/** Category, for color and the legend. */
|
|
776
|
+
group?: string | undefined;
|
|
777
|
+
}
|
|
778
|
+
interface ParallelCoordinatesInput extends Sized {
|
|
779
|
+
dimensions: ParallelDimension[];
|
|
780
|
+
data: ParallelRow[];
|
|
781
|
+
/** Line opacity. @default 0.6, lower above 200 rows */
|
|
782
|
+
opacity?: number | undefined;
|
|
783
|
+
/** @default 'linear' */
|
|
784
|
+
curve?: Curve | undefined;
|
|
785
|
+
/** Draw lines across missing values instead of breaking them. @default false */
|
|
786
|
+
connectNulls?: boolean | undefined;
|
|
787
|
+
/** Keep rows whose value on `key` lies inside `[min, max]`; the rest fade. */
|
|
788
|
+
filters?: {
|
|
789
|
+
key: string;
|
|
790
|
+
min?: number | undefined;
|
|
791
|
+
max?: number | undefined;
|
|
792
|
+
}[] | undefined;
|
|
793
|
+
}
|
|
794
|
+
interface NetworkNode extends Identified {
|
|
795
|
+
id: string;
|
|
796
|
+
/** @default the id */
|
|
797
|
+
label?: string | undefined;
|
|
798
|
+
/** Node weight; the node's area follows it. */
|
|
799
|
+
value?: number | undefined;
|
|
800
|
+
/** Category, for color and the legend. */
|
|
801
|
+
group?: string | undefined;
|
|
802
|
+
color?: string | undefined;
|
|
803
|
+
/** Position in data units, used by `layout: 'manual'`. */
|
|
804
|
+
x?: number | undefined;
|
|
805
|
+
y?: number | undefined;
|
|
806
|
+
}
|
|
807
|
+
interface NetworkEdge extends Identified {
|
|
808
|
+
source: string;
|
|
809
|
+
target: string;
|
|
810
|
+
/** Edge weight; the stroke width follows it. */
|
|
811
|
+
value?: number | undefined;
|
|
812
|
+
label?: string | undefined;
|
|
813
|
+
}
|
|
814
|
+
interface NetworkChartInput extends Sized {
|
|
815
|
+
nodes: NetworkNode[];
|
|
816
|
+
edges: NetworkEdge[];
|
|
817
|
+
/** Force-directed, around a circle, or from each node's own `x`/`y`. @default 'force' */
|
|
818
|
+
arrange?: 'force' | 'circular' | 'manual' | undefined;
|
|
819
|
+
/** Write node labels. @default true up to 60 nodes, then off (titles remain) */
|
|
820
|
+
labels?: boolean | undefined;
|
|
821
|
+
/** Smallest and largest node radius in pixels. @default [5, 16] */
|
|
822
|
+
nodeRange?: [number, number] | undefined;
|
|
823
|
+
/** Force-layout iterations. @default scaled to the node count, 50–300 */
|
|
824
|
+
iterations?: number | undefined;
|
|
825
|
+
/** Draw an arrowhead at the target end of every edge. @default false */
|
|
826
|
+
directed?: boolean | undefined;
|
|
827
|
+
/** Write edge labels (and values) at the middle of each edge. @default false */
|
|
828
|
+
edgeLabels?: boolean | undefined;
|
|
829
|
+
}
|
|
830
|
+
interface TimelineEvent extends Identified {
|
|
831
|
+
date: string | number | Date;
|
|
832
|
+
label: string;
|
|
833
|
+
description?: string | undefined;
|
|
834
|
+
/** Lane the event sits on; lanes share the time axis. */
|
|
835
|
+
group?: string | undefined;
|
|
836
|
+
color?: string | undefined;
|
|
837
|
+
variant?: Variant | undefined;
|
|
838
|
+
}
|
|
839
|
+
interface TimelineChartInput extends Sized {
|
|
840
|
+
/** Point-in-time events, in any order. */
|
|
841
|
+
events: TimelineEvent[];
|
|
842
|
+
/** Time runs along x with labels staggered, or down y with one row per event. @default 'horizontal' */
|
|
843
|
+
orientation?: 'horizontal' | 'vertical' | undefined;
|
|
844
|
+
/** How dates are written. @default date, or time when the events span under two days */
|
|
845
|
+
xAxis?: Pick<AxisOptions, 'format' | 'label'> | undefined;
|
|
846
|
+
/** Write event labels. @default true */
|
|
847
|
+
labels?: boolean | undefined;
|
|
209
848
|
}
|
|
210
849
|
interface SparklineInput extends Sized {
|
|
211
850
|
data: Value[];
|
|
851
|
+
/** One x position per value (numbers or dates) for uneven spacing. @default even spacing */
|
|
852
|
+
x?: (number | Date)[] | undefined;
|
|
212
853
|
color?: string | undefined;
|
|
213
854
|
/** @default 'linear' */
|
|
214
855
|
curve?: Curve | undefined;
|
|
215
|
-
/** @default 'area' */
|
|
216
|
-
variant?: 'area' | 'line' | 'bar' | undefined;
|
|
856
|
+
/** `winloss` draws equal bars up for positives and down for negatives. @default 'area' */
|
|
857
|
+
variant?: 'area' | 'line' | 'bar' | 'winloss' | undefined;
|
|
217
858
|
/** Color by direction: success when the last value is above the first, danger below. @default false */
|
|
218
859
|
trend?: boolean | undefined;
|
|
219
860
|
/** Mark the minimum and maximum. @default false */
|
|
220
861
|
extremes?: boolean | undefined;
|
|
221
862
|
/** Write the last value after the line. @default false */
|
|
222
863
|
lastValue?: boolean | undefined;
|
|
864
|
+
/** A dashed reference line at this value, e.g. a target or the previous period. */
|
|
865
|
+
target?: number | undefined;
|
|
866
|
+
/** A shaded band between two values, e.g. the healthy range. */
|
|
867
|
+
band?: [number, number] | undefined;
|
|
868
|
+
/** Dots on the first and/or last point. @default ['last'] for lines and areas */
|
|
869
|
+
markers?: ('first' | 'last')[] | undefined;
|
|
870
|
+
}
|
|
871
|
+
/** One radar axis with its own scale. */
|
|
872
|
+
interface RadarMetric extends Identified {
|
|
873
|
+
label: string;
|
|
874
|
+
/** @default 0 */
|
|
875
|
+
min?: number | undefined;
|
|
876
|
+
/** @default the largest value on this axis, rounded up */
|
|
877
|
+
max?: number | undefined;
|
|
878
|
+
format?: Format | undefined;
|
|
223
879
|
}
|
|
224
880
|
interface RadarChartInput extends Sized {
|
|
225
881
|
series: Series[];
|
|
226
|
-
/** One axis per category. */
|
|
227
|
-
categories
|
|
228
|
-
|
|
229
|
-
|
|
882
|
+
/** One axis per category; `metrics` is the richer form with a scale per axis. */
|
|
883
|
+
categories?: string[] | undefined;
|
|
884
|
+
metrics?: RadarMetric[] | undefined;
|
|
885
|
+
/**
|
|
886
|
+
* `metric` scales each axis by its own min/max so unlike units compare; `series` scales every
|
|
887
|
+
* series to its own maximum (the pre-existing `true`, misleading across series);
|
|
888
|
+
* `none` shares one scale. @default 'metric' when `metrics` is given, else 'none'
|
|
889
|
+
*/
|
|
890
|
+
normalize?: boolean | 'metric' | 'series' | 'none' | undefined;
|
|
230
891
|
/** Outer ring value. @default the largest value, rounded up */
|
|
231
892
|
max?: number | undefined;
|
|
232
893
|
/** Fill the polygons. @default true */
|
|
233
894
|
fill?: boolean | undefined;
|
|
895
|
+
/** Number of grid rings. @default 4 */
|
|
896
|
+
levels?: number | undefined;
|
|
897
|
+
/** Dots on the vertices. @default true */
|
|
898
|
+
markers?: boolean | undefined;
|
|
899
|
+
/** Marker radius in pixels. @default 3 */
|
|
900
|
+
markerSize?: number | undefined;
|
|
901
|
+
/** Write each value at its vertex. @default false */
|
|
902
|
+
labels?: boolean | undefined;
|
|
903
|
+
/** Degrees clockwise from 12 o'clock of the first axis. @default 0 */
|
|
904
|
+
startAngle?: number | undefined;
|
|
905
|
+
/** Grid rings as polygons or circles. @default 'polygon' */
|
|
906
|
+
gridShape?: 'polygon' | 'circle' | undefined;
|
|
234
907
|
}
|
|
235
908
|
interface CalendarCell {
|
|
236
909
|
date: string | number | Date;
|
|
237
910
|
value: number;
|
|
238
911
|
}
|
|
912
|
+
/** An ordinal palette, a one-way ramp, a two-way ramp around a midpoint, or exact classes. */
|
|
913
|
+
type ColorScale = {
|
|
914
|
+
type: 'ordinal';
|
|
915
|
+
colors?: string[] | undefined;
|
|
916
|
+
} | {
|
|
917
|
+
type: 'sequential';
|
|
918
|
+
/** @default the data extent */
|
|
919
|
+
domain?: [number, number] | undefined;
|
|
920
|
+
/** Stops, low to high; concrete colors interpolate, token colors quantize. @default one color, opacity ramp */
|
|
921
|
+
colors?: string[] | undefined;
|
|
922
|
+
/** Quantize into this many classes. */
|
|
923
|
+
steps?: number | undefined;
|
|
924
|
+
reversed?: boolean | undefined;
|
|
925
|
+
} | {
|
|
926
|
+
type: 'diverging';
|
|
927
|
+
/** `[min, mid, max]`. @default symmetric around zero */
|
|
928
|
+
domain?: [number, number, number] | undefined;
|
|
929
|
+
/** `[low, high]` or `[low, mid, high]` stops. @default danger / surface / primary tokens */
|
|
930
|
+
colors?: string[] | undefined;
|
|
931
|
+
steps?: number | undefined;
|
|
932
|
+
reversed?: boolean | undefined;
|
|
933
|
+
} | {
|
|
934
|
+
type: 'threshold';
|
|
935
|
+
/** Ascending class boundaries; `colors` has one more entry than `thresholds`. */
|
|
936
|
+
thresholds: number[];
|
|
937
|
+
colors: string[];
|
|
938
|
+
labels?: string[] | undefined;
|
|
939
|
+
};
|
|
239
940
|
/** A matrix (`rows`, `columns`, `data`) or a calendar (`calendar`); one of the two must be given. */
|
|
240
941
|
interface HeatmapInput extends Sized {
|
|
241
942
|
rows?: string[] | undefined;
|
|
@@ -244,16 +945,34 @@ interface HeatmapInput extends Sized {
|
|
|
244
945
|
data?: Value[][] | undefined;
|
|
245
946
|
/** One value per day; laid out as weekday rows and week columns, labelled by month. */
|
|
246
947
|
calendar?: CalendarCell[] | undefined;
|
|
948
|
+
/** First day of the calendar week. @default 'monday' */
|
|
949
|
+
weekStart?: 'monday' | 'sunday' | undefined;
|
|
247
950
|
/** The cell color; each cell's opacity follows its value. */
|
|
248
951
|
color?: string | undefined;
|
|
249
952
|
/** Split around zero: values below use `negativeColor`, opacity follows the distance from zero. @default false */
|
|
250
953
|
diverging?: boolean | undefined;
|
|
251
954
|
/** @default the tokens danger color */
|
|
252
955
|
negativeColor?: string | undefined;
|
|
956
|
+
/** A full color scale; wins over `color`, `diverging`, `steps` and `domain`. */
|
|
957
|
+
colorScale?: ColorScale | undefined;
|
|
958
|
+
/** Draw the color scale under the grid, or beside it. @default false */
|
|
959
|
+
colorLegend?: boolean | ColorLegendOptions | undefined;
|
|
960
|
+
/** Fill for `null` cells. @default none (blank) */
|
|
961
|
+
missingColor?: string | undefined;
|
|
253
962
|
/** Write each value in its cell. @default false */
|
|
254
963
|
labels?: boolean | undefined;
|
|
255
964
|
/** Value range the opacity ramp covers. @default the data extent */
|
|
256
965
|
domain?: [number, number] | undefined;
|
|
966
|
+
/** Quantize the color ramp into this many discrete steps instead of a continuous ramp. */
|
|
967
|
+
steps?: number | undefined;
|
|
968
|
+
/** Gap between cells in pixels. @default 0 (1 for calendars) */
|
|
969
|
+
cellGap?: number | undefined;
|
|
970
|
+
/** Cell corner radius in pixels. @default 0 (2 for calendars) */
|
|
971
|
+
cellRadius?: number | undefined;
|
|
972
|
+
/** Order rows by their sum. */
|
|
973
|
+
rowOrder?: 'asc' | 'desc' | undefined;
|
|
974
|
+
/** Order columns by their sum. */
|
|
975
|
+
columnOrder?: 'asc' | 'desc' | undefined;
|
|
257
976
|
}
|
|
258
977
|
interface FunnelChartInput extends Sized {
|
|
259
978
|
data: Datum[];
|
|
@@ -261,6 +980,16 @@ interface FunnelChartInput extends Sized {
|
|
|
261
980
|
orientation?: 'vertical' | 'horizontal' | undefined;
|
|
262
981
|
/** `pyramid` widens toward the end and reports shares of the total instead of conversion. @default 'funnel' */
|
|
263
982
|
variant?: 'funnel' | 'pyramid' | undefined;
|
|
983
|
+
/** Gap between stages in pixels. @default 4 */
|
|
984
|
+
gap?: number | undefined;
|
|
985
|
+
/** Stage labels inside the stage, beside it, or hidden. @default 'inside' */
|
|
986
|
+
labelPosition?: 'inside' | 'outside' | 'none' | undefined;
|
|
987
|
+
/** Order stages by value (a funnel is drawn in input order by default). */
|
|
988
|
+
sort?: 'asc' | 'desc' | undefined;
|
|
989
|
+
/** Narrowest stage width as a fraction of the widest, so the last stage stays readable. @default 0 */
|
|
990
|
+
neckWidth?: number | undefined;
|
|
991
|
+
/** How conversion and drop-off are written in tooltips. @default whole percent */
|
|
992
|
+
percentFormat?: Format | undefined;
|
|
264
993
|
}
|
|
265
994
|
interface Tick {
|
|
266
995
|
/** Pixel position along the axis. */
|
|
@@ -281,20 +1010,63 @@ interface Frame extends Canvas {
|
|
|
281
1010
|
/** Pixel y of value 0 (clamped into the plot): where bars and areas start and the x axis is drawn. */
|
|
282
1011
|
baseline: number;
|
|
283
1012
|
}
|
|
284
|
-
interface
|
|
1013
|
+
interface SankeyNode extends Identified {
|
|
1014
|
+
id: string;
|
|
1015
|
+
/** @default the id */
|
|
1016
|
+
label?: string | undefined;
|
|
1017
|
+
color?: string | undefined;
|
|
1018
|
+
}
|
|
1019
|
+
interface SankeyLink extends Identified {
|
|
285
1020
|
source: string;
|
|
286
1021
|
target: string;
|
|
287
1022
|
value: number;
|
|
288
1023
|
}
|
|
289
1024
|
interface SankeyInput extends Sized {
|
|
290
|
-
/** Nodes are derived from the link endpoints, in order of first appearance. */
|
|
1025
|
+
/** Nodes are derived from the link endpoints, in order of first appearance, unless `nodes` is given. */
|
|
291
1026
|
links: SankeyLink[];
|
|
1027
|
+
/** Explicit nodes with labels and colors; links to nodes not listed are reported and dropped. */
|
|
1028
|
+
nodes?: SankeyNode[] | undefined;
|
|
1029
|
+
/** `left` places a node right after its sources; `justify` pushes sinks to the last column. @default 'left' */
|
|
1030
|
+
align?: 'left' | 'justify' | undefined;
|
|
1031
|
+
/** Node thickness in pixels. @default 16 */
|
|
1032
|
+
nodeWidth?: number | undefined;
|
|
1033
|
+
/** Vertical gap between nodes in a column, in pixels. @default 8 */
|
|
1034
|
+
nodePadding?: number | undefined;
|
|
1035
|
+
/** Order nodes inside a column by value instead of first appearance. */
|
|
1036
|
+
nodeSort?: 'asc' | 'desc' | undefined;
|
|
1037
|
+
/** Order the ribbons leaving a node by value instead of link order. */
|
|
1038
|
+
linkSort?: 'asc' | 'desc' | undefined;
|
|
1039
|
+
/** Write node names. @default true */
|
|
1040
|
+
nodeLabels?: boolean | undefined;
|
|
1041
|
+
/** Write each link's value on it. @default false */
|
|
1042
|
+
linkLabels?: boolean | undefined;
|
|
1043
|
+
/**
|
|
1044
|
+
* What to do with links that close a cycle: `drop` them (reported as a warning), `warn` (the
|
|
1045
|
+
* same, spelled out), or `error` (the chart renders its error state). @default 'drop'
|
|
1046
|
+
*/
|
|
1047
|
+
cyclePolicy?: 'drop' | 'warn' | 'error' | undefined;
|
|
292
1048
|
}
|
|
293
1049
|
interface TreemapInput extends Sized {
|
|
294
1050
|
/** Flat data, or a tree: branches are outlined and their children tiled inside. */
|
|
295
1051
|
data: TreeNode[];
|
|
1052
|
+
/** Id (or name) of the node to show as the whole chart: controlled drill-down. */
|
|
1053
|
+
rootId?: ChartItemId | undefined;
|
|
1054
|
+
/** Write the path to `rootId` above the tiles. @default false */
|
|
1055
|
+
breadcrumbs?: boolean | undefined;
|
|
1056
|
+
/** Deepest level tiled; deeper nodes are summed into their ancestor. */
|
|
1057
|
+
maxDepth?: number | undefined;
|
|
1058
|
+
/** Tile order inside a branch. @default 'desc' */
|
|
1059
|
+
sort?: 'asc' | 'desc' | 'none' | undefined;
|
|
1060
|
+
/** Inset of children inside their branch, in pixels. @default 2 */
|
|
1061
|
+
padding?: number | undefined;
|
|
1062
|
+
/** Squarified rows, alternating slice/dice per depth, or one direction only. @default 'squarify' */
|
|
1063
|
+
tiling?: 'squarify' | 'slice' | 'dice' | 'sliceDice' | undefined;
|
|
1064
|
+
/** Colors leaves by their value instead of by branch. */
|
|
1065
|
+
colorScale?: ColorScale | undefined;
|
|
1066
|
+
/** Write leaf names on tiles wide enough. @default true */
|
|
1067
|
+
labels?: boolean | undefined;
|
|
296
1068
|
}
|
|
297
|
-
interface Candle {
|
|
1069
|
+
interface Candle extends Identified {
|
|
298
1070
|
label: Category;
|
|
299
1071
|
open: number;
|
|
300
1072
|
high: number;
|
|
@@ -303,55 +1075,346 @@ interface Candle {
|
|
|
303
1075
|
/** Drawn as a bar in a pane under the candles when any candle has one. */
|
|
304
1076
|
volume?: number | undefined;
|
|
305
1077
|
}
|
|
1078
|
+
/** A moving average over the closes, drawn as a line over the candles. */
|
|
1079
|
+
interface CandlestickOverlay {
|
|
1080
|
+
type: 'sma' | 'ema';
|
|
1081
|
+
/** Number of candles averaged. */
|
|
1082
|
+
period: number;
|
|
1083
|
+
color?: string | undefined;
|
|
1084
|
+
/** @default `SMA 20` */
|
|
1085
|
+
name?: string | undefined;
|
|
1086
|
+
}
|
|
306
1087
|
interface CandlestickInput extends Sized {
|
|
307
1088
|
data: Candle[];
|
|
308
1089
|
/** @default 'linear' */
|
|
309
1090
|
scale?: 'linear' | 'log' | undefined;
|
|
310
1091
|
/** Bars with open/close ticks instead of filled candles. @default 'candlestick' */
|
|
311
1092
|
variant?: 'candlestick' | 'ohlc' | undefined;
|
|
312
|
-
|
|
1093
|
+
/** `type: 'time'` places candles proportionally to their labels' time, leaving gaps for missing sessions. */
|
|
1094
|
+
xAxis?: (Pick<AxisOptions, 'format'> & {
|
|
1095
|
+
type?: 'category' | 'time' | undefined;
|
|
1096
|
+
}) | undefined;
|
|
313
1097
|
references?: Reference[] | undefined;
|
|
1098
|
+
annotations?: Annotation[] | undefined;
|
|
1099
|
+
/** Moving-average lines. */
|
|
1100
|
+
overlays?: CandlestickOverlay[] | undefined;
|
|
1101
|
+
/** Quick zoom buttons above the plot, e.g. `[{ label: '1M', candles: 22 }]`; `candles: 0` shows all. */
|
|
1102
|
+
rangeSelector?: {
|
|
1103
|
+
label: string;
|
|
1104
|
+
candles: number;
|
|
1105
|
+
}[] | undefined;
|
|
1106
|
+
/** Markers above the candles at given labels: earnings, splits, news. */
|
|
1107
|
+
flags?: {
|
|
1108
|
+
label: Category;
|
|
1109
|
+
text: string;
|
|
1110
|
+
variant?: Variant | undefined;
|
|
1111
|
+
}[] | undefined;
|
|
1112
|
+
/** Plot the change from the first visible close as a percentage instead of prices. @default false */
|
|
1113
|
+
compare?: boolean | undefined;
|
|
1114
|
+
/** @default the tokens success color */
|
|
1115
|
+
upColor?: string | undefined;
|
|
1116
|
+
/** @default the tokens danger color */
|
|
1117
|
+
downColor?: string | undefined;
|
|
314
1118
|
zoom?: Zoom | undefined;
|
|
315
1119
|
brush?: boolean | undefined;
|
|
316
1120
|
crosshair?: boolean | undefined;
|
|
317
1121
|
}
|
|
1122
|
+
interface WaterfallDatum extends Datum {
|
|
1123
|
+
/**
|
|
1124
|
+
* `change` (default) is a signed delta; `subtotal` and `total` stand on zero and show the
|
|
1125
|
+
* running total (`value` is ignored). `subtotal: true` is the older spelling.
|
|
1126
|
+
*/
|
|
1127
|
+
type?: 'change' | 'subtotal' | 'total' | undefined;
|
|
1128
|
+
/** A bar from zero to the running total so far, instead of a delta; `value` is ignored. */
|
|
1129
|
+
subtotal?: boolean | undefined;
|
|
1130
|
+
}
|
|
318
1131
|
interface WaterfallInput extends Sized {
|
|
319
|
-
/** Signed deltas, applied in order. */
|
|
320
|
-
data:
|
|
1132
|
+
/** Signed deltas, applied in order; `subtotal` rows show the running total. */
|
|
1133
|
+
data: WaterfallDatum[];
|
|
321
1134
|
/** Label of a final bar showing the running total; omitted when unset. */
|
|
322
1135
|
total?: string | undefined;
|
|
1136
|
+
/** Opening value the first delta applies to, drawn as a total bar when labelled. @default 0 */
|
|
1137
|
+
start?: number | undefined;
|
|
1138
|
+
startLabel?: string | undefined;
|
|
1139
|
+
/** Bars grow along x with steps running down the y axis. @default 'vertical' */
|
|
1140
|
+
orientation?: 'vertical' | 'horizontal' | undefined;
|
|
1141
|
+
/** Dashed lines carrying the running total between bars. @default true */
|
|
1142
|
+
connectors?: boolean | undefined;
|
|
1143
|
+
/** Write each delta next to its bar. @default false */
|
|
1144
|
+
labels?: boolean | undefined;
|
|
1145
|
+
positiveColor?: string | undefined;
|
|
1146
|
+
negativeColor?: string | undefined;
|
|
1147
|
+
/** Color of subtotal and total bars. @default the first series color */
|
|
1148
|
+
totalColor?: string | undefined;
|
|
323
1149
|
}
|
|
324
|
-
interface GanttTask {
|
|
1150
|
+
interface GanttTask extends Identified {
|
|
325
1151
|
name: string;
|
|
326
1152
|
start: number;
|
|
327
1153
|
end: number;
|
|
328
1154
|
color?: string | undefined;
|
|
329
1155
|
/** Tasks sharing a group share a row, so one row can hold several intervals. */
|
|
330
1156
|
group?: string | undefined;
|
|
1157
|
+
/** Completed share, 0–1, drawn as a darker inner bar. */
|
|
1158
|
+
progress?: number | undefined;
|
|
1159
|
+
/** A point in time drawn as a diamond at `start`; `end` is ignored. */
|
|
1160
|
+
milestone?: boolean | undefined;
|
|
1161
|
+
/** Names (or ids) of tasks that must finish first; drawn as connectors. */
|
|
1162
|
+
dependsOn?: ChartItemId[] | undefined;
|
|
1163
|
+
/** The planned interval, drawn as a thin bar under the task. */
|
|
1164
|
+
baseline?: {
|
|
1165
|
+
start: number;
|
|
1166
|
+
end: number;
|
|
1167
|
+
} | undefined;
|
|
1168
|
+
/** Id (or name) of the parent task; children are indented and the parent spans them. */
|
|
1169
|
+
parent?: ChartItemId | undefined;
|
|
1170
|
+
}
|
|
1171
|
+
interface GanttInput extends Sized {
|
|
1172
|
+
tasks: GanttTask[];
|
|
1173
|
+
/** Vertical lines and bands in time coordinates, e.g. `{ x: Date.now(), label: 'Today' }`. */
|
|
1174
|
+
references?: Reference[] | undefined;
|
|
1175
|
+
annotations?: Annotation[] | undefined;
|
|
1176
|
+
/** A labelled "Today" line at this time. */
|
|
1177
|
+
today?: number | Date | undefined;
|
|
1178
|
+
/** Highlight the longest dependency chain and fade the rest. @default false */
|
|
1179
|
+
criticalPath?: boolean | undefined;
|
|
1180
|
+
/** How task times are written on the axis. */
|
|
1181
|
+
xAxis?: Pick<AxisOptions, 'format' | 'label' | 'ticks'> | undefined;
|
|
1182
|
+
/** Parents whose children are hidden: controlled expand/collapse. */
|
|
1183
|
+
collapsed?: ChartItemId[] | undefined;
|
|
1184
|
+
/** Weekdays (0 = Sunday … 6 = Saturday) shaded as non-working, for millisecond time axes. */
|
|
1185
|
+
nonWorkingDays?: number[] | undefined;
|
|
1186
|
+
}
|
|
1187
|
+
/** A precomputed five-number summary, instead of raw samples. */
|
|
1188
|
+
interface BoxSummary extends Identified {
|
|
1189
|
+
name: string;
|
|
1190
|
+
min: number;
|
|
1191
|
+
q1: number;
|
|
1192
|
+
median: number;
|
|
1193
|
+
q3: number;
|
|
1194
|
+
max: number;
|
|
1195
|
+
outliers?: number[] | undefined;
|
|
1196
|
+
mean?: number | undefined;
|
|
1197
|
+
color?: string | undefined;
|
|
1198
|
+
}
|
|
1199
|
+
/** A series with one raw sample per category, for grouped boxplots (`categories` required). */
|
|
1200
|
+
interface GroupedBoxSeries extends Identified {
|
|
1201
|
+
name: string;
|
|
1202
|
+
/** `data[categoryIndex]` is that category's sample. */
|
|
1203
|
+
data: Value[][];
|
|
1204
|
+
color?: string | undefined;
|
|
1205
|
+
}
|
|
1206
|
+
type BoxplotSeries = Series | BoxSummary | GroupedBoxSeries;
|
|
1207
|
+
interface BoxplotInput extends Sized {
|
|
1208
|
+
/** One box per series, over that series' raw samples or a precomputed summary. */
|
|
1209
|
+
series: BoxplotSeries[];
|
|
1210
|
+
/** @default 'vertical' */
|
|
1211
|
+
orientation?: 'vertical' | 'horizontal' | undefined;
|
|
1212
|
+
/**
|
|
1213
|
+
* How quartiles are taken from a sample: `linear` interpolates between order statistics
|
|
1214
|
+
* (R type 7, Excel QUARTILE.INC), `exclusive` excludes the median from the halves (type 6,
|
|
1215
|
+
* QUARTILE.EXC), `tukey` uses hinges (medians of the halves). @default 'linear'
|
|
1216
|
+
*/
|
|
1217
|
+
quartileMethod?: 'linear' | 'exclusive' | 'tukey' | undefined;
|
|
1218
|
+
/** Whisker reach as a multiple of the IQR; samples beyond are outliers. @default 1.5 */
|
|
1219
|
+
whisker?: number | undefined;
|
|
1220
|
+
/** Mark the mean with a diamond. @default false */
|
|
1221
|
+
mean?: boolean | undefined;
|
|
1222
|
+
/** Draw every observation, jittered across the box. @default false */
|
|
1223
|
+
points?: boolean | undefined;
|
|
1224
|
+
/**
|
|
1225
|
+
* Notch the box around the median by ±1.58 × IQR / √n (a rough 95% interval): notches that do
|
|
1226
|
+
* not overlap suggest different medians. Only for raw samples. @default false
|
|
1227
|
+
*/
|
|
1228
|
+
notched?: boolean | undefined;
|
|
1229
|
+
/** Groups: one box per series inside each category; series then carry `data[category]`. */
|
|
1230
|
+
categories?: string[] | undefined;
|
|
1231
|
+
yAxis?: AxisOptions | undefined;
|
|
1232
|
+
}
|
|
1233
|
+
interface TreeNode extends Identified {
|
|
1234
|
+
name: string;
|
|
1235
|
+
/** Leaf size; a branch's size is the sum of its children when unset. */
|
|
1236
|
+
value?: number | undefined;
|
|
1237
|
+
children?: TreeNode[] | undefined;
|
|
1238
|
+
color?: string | undefined;
|
|
1239
|
+
/** A second line under the name, e.g. a role in an organization chart. */
|
|
1240
|
+
subtitle?: string | undefined;
|
|
1241
|
+
}
|
|
1242
|
+
/** A node-link tree: one box or dot per node, links to its children. */
|
|
1243
|
+
interface TreeChartInput extends Sized {
|
|
1244
|
+
data: TreeNode[];
|
|
1245
|
+
/** Root at the top with levels going down, or root at the left. @default 'vertical' */
|
|
1246
|
+
orientation?: 'vertical' | 'horizontal' | undefined;
|
|
1247
|
+
/** Dots with labels beside them, or boxes holding the name (and subtitle). @default 'circle' */
|
|
1248
|
+
nodeShape?: 'circle' | 'box' | undefined;
|
|
1249
|
+
/** Curved, elbow (orthogonal) or straight links. @default 'curve' */
|
|
1250
|
+
linkStyle?: 'curve' | 'elbow' | 'straight' | undefined;
|
|
1251
|
+
/** Id (or name) of the node to show as the root: controlled drill-down. */
|
|
1252
|
+
rootId?: ChartItemId | undefined;
|
|
1253
|
+
/** Nodes whose children are hidden: controlled expand/collapse; collapsed nodes get a `+` mark. */
|
|
1254
|
+
collapsed?: ChartItemId[] | undefined;
|
|
1255
|
+
/** Deepest level drawn. */
|
|
1256
|
+
maxDepth?: number | undefined;
|
|
1257
|
+
/** Write node names. @default true */
|
|
1258
|
+
labels?: boolean | undefined;
|
|
1259
|
+
/** Dot radius, or box height, in pixels. @default 5 / 36 */
|
|
1260
|
+
nodeSize?: number | undefined;
|
|
1261
|
+
}
|
|
1262
|
+
/** An organization chart: a tree of boxes with elbow links and optional subtitles. */
|
|
1263
|
+
type OrganizationChartInput = Omit<TreeChartInput, 'nodeShape' | 'linkStyle'>;
|
|
1264
|
+
/** Nested circles: each node a circle sized by value, children packed inside their parent. */
|
|
1265
|
+
interface CirclePackingInput extends Sized {
|
|
1266
|
+
data: TreeNode[];
|
|
1267
|
+
rootId?: ChartItemId | undefined;
|
|
1268
|
+
maxDepth?: number | undefined;
|
|
1269
|
+
/** Write names on circles wide enough. @default true */
|
|
1270
|
+
labels?: boolean | undefined;
|
|
1271
|
+
/** Gap between sibling circles, in pixels. @default 2 */
|
|
1272
|
+
padding?: number | undefined;
|
|
1273
|
+
/** Colors leaves by their value instead of by branch. */
|
|
1274
|
+
colorScale?: ColorScale | undefined;
|
|
1275
|
+
}
|
|
1276
|
+
/** A rectangular sunburst: one row (or column) per depth, children inside their parent's span. */
|
|
1277
|
+
interface IcicleInput extends Sized {
|
|
1278
|
+
data: TreeNode[];
|
|
1279
|
+
/** Root row at the top with depth going down, or root column at the left. @default 'vertical' */
|
|
1280
|
+
orientation?: 'vertical' | 'horizontal' | undefined;
|
|
1281
|
+
rootId?: ChartItemId | undefined;
|
|
1282
|
+
/** Write the path to `rootId` above the cells. @default false */
|
|
1283
|
+
breadcrumbs?: boolean | undefined;
|
|
1284
|
+
maxDepth?: number | undefined;
|
|
1285
|
+
/** Cell order inside a parent. @default 'none' (input order) */
|
|
1286
|
+
sort?: 'asc' | 'desc' | 'none' | undefined;
|
|
1287
|
+
/** Write names on cells wide enough. @default true */
|
|
1288
|
+
labels?: boolean | undefined;
|
|
1289
|
+
/** Gap between cells, in pixels. @default 1 */
|
|
1290
|
+
padding?: number | undefined;
|
|
1291
|
+
colorScale?: ColorScale | undefined;
|
|
1292
|
+
}
|
|
1293
|
+
/** Ranks over categories: one line per series, the top rank at the top. */
|
|
1294
|
+
interface BumpChartInput extends Sized {
|
|
1295
|
+
/** Values per category; ranks are computed per category unless `ranked`. */
|
|
1296
|
+
series: Series[];
|
|
1297
|
+
categories?: Category[] | undefined;
|
|
1298
|
+
/** The data are already ranks (1 = first). @default false */
|
|
1299
|
+
ranked?: boolean | undefined;
|
|
1300
|
+
/** Only the first `topRank` ranks are drawn; series that drop below leave the plot. */
|
|
1301
|
+
topRank?: number | undefined;
|
|
1302
|
+
/** @default 'monotone' */
|
|
1303
|
+
curve?: Curve | undefined;
|
|
1304
|
+
/** Write series names at the right end of their line. @default true */
|
|
1305
|
+
labels?: boolean | undefined;
|
|
1306
|
+
/** Marker radius in pixels. @default 5 */
|
|
1307
|
+
markerSize?: number | undefined;
|
|
1308
|
+
xAxis?: XAxisOptions | undefined;
|
|
331
1309
|
}
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
1310
|
+
/** A Nightingale rose: equal angular sectors whose radius follows the value. */
|
|
1311
|
+
interface PolarAreaChartInput extends Sized {
|
|
1312
|
+
data: Datum[];
|
|
1313
|
+
/** Radius proportional to the value (`linear`) or to its square root, so area is proportional (`sqrt`). @default 'sqrt' */
|
|
1314
|
+
scale?: 'linear' | 'sqrt' | undefined;
|
|
1315
|
+
/** Outer ring value. @default the largest value, rounded up */
|
|
1316
|
+
max?: number | undefined;
|
|
1317
|
+
/** Degrees clockwise from 12 o'clock. @default 0 */
|
|
1318
|
+
startAngle?: number | undefined;
|
|
1319
|
+
/** @default startAngle + 360 */
|
|
1320
|
+
endAngle?: number | undefined;
|
|
1321
|
+
/** Gap between sectors, in degrees. @default 0 */
|
|
1322
|
+
padAngle?: number | undefined;
|
|
1323
|
+
/** Hole radius as a fraction of the outer radius. @default 0 */
|
|
1324
|
+
innerRadius?: number | undefined;
|
|
1325
|
+
/** Number of grid rings. @default 4 */
|
|
1326
|
+
levels?: number | undefined;
|
|
1327
|
+
/** Write each name at its sector's edge. @default false */
|
|
1328
|
+
labels?: boolean | undefined;
|
|
336
1329
|
}
|
|
337
|
-
|
|
338
|
-
|
|
1330
|
+
/** A beeswarm: every observation as a dot, spread sideways so none overlap. */
|
|
1331
|
+
interface SwarmPlotInput extends Sized {
|
|
1332
|
+
/** One swarm per series, over that series' raw samples. */
|
|
339
1333
|
series: Series[];
|
|
1334
|
+
/** @default 'vertical' */
|
|
1335
|
+
orientation?: 'vertical' | 'horizontal' | undefined;
|
|
1336
|
+
/** Dot radius in pixels. @default 3 */
|
|
1337
|
+
markerSize?: number | undefined;
|
|
1338
|
+
yAxis?: AxisOptions | undefined;
|
|
1339
|
+
references?: Reference[] | undefined;
|
|
340
1340
|
}
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
1341
|
+
/** A grid of cells, each standing for a share of the total, colored by datum. */
|
|
1342
|
+
interface WaffleChartInput extends Sized {
|
|
1343
|
+
data: Datum[];
|
|
1344
|
+
/** What the whole grid stands for. @default the sum of the values */
|
|
1345
|
+
total?: number | undefined;
|
|
1346
|
+
/** @default 10 */
|
|
1347
|
+
rows?: number | undefined;
|
|
1348
|
+
/** @default 10 */
|
|
1349
|
+
columns?: number | undefined;
|
|
1350
|
+
/** Fill column by column from the bottom-left, or row by row from the top-left. @default 'vertical' */
|
|
1351
|
+
orientation?: 'vertical' | 'horizontal' | undefined;
|
|
1352
|
+
/** Gap between cells in pixels. @default 2 */
|
|
1353
|
+
cellGap?: number | undefined;
|
|
1354
|
+
/** Cell corner radius in pixels. @default 2 */
|
|
1355
|
+
cellRadius?: number | undefined;
|
|
1356
|
+
/** Write each datum's share after its name in the legend. @default false */
|
|
1357
|
+
labels?: boolean | undefined;
|
|
347
1358
|
}
|
|
348
1359
|
interface SunburstInput extends Sized {
|
|
349
1360
|
data: TreeNode[];
|
|
1361
|
+
/** Hole radius as a fraction of the outer radius, e.g. for `centerLabel`. @default 0 */
|
|
1362
|
+
innerRadius?: number | undefined;
|
|
1363
|
+
/** Text in the middle, e.g. the total. */
|
|
1364
|
+
centerLabel?: string | undefined;
|
|
1365
|
+
/** Write names on the arcs wide enough to hold them. @default false */
|
|
1366
|
+
labels?: boolean | undefined;
|
|
1367
|
+
/** Id (or name) of the node whose subtree fills the rings: controlled drill-down. */
|
|
1368
|
+
rootId?: ChartItemId | undefined;
|
|
1369
|
+
/** Write the path to `rootId` in the middle. @default false */
|
|
1370
|
+
breadcrumbs?: boolean | undefined;
|
|
1371
|
+
/** Deepest ring drawn. */
|
|
1372
|
+
maxDepth?: number | undefined;
|
|
1373
|
+
/** Arc order inside a parent. @default 'none' (input order) */
|
|
1374
|
+
sort?: 'asc' | 'desc' | 'none' | undefined;
|
|
1375
|
+
/** Degrees clockwise from 12 o'clock. @default 0 */
|
|
1376
|
+
startAngle?: number | undefined;
|
|
1377
|
+
/** @default startAngle + 360 */
|
|
1378
|
+
endAngle?: number | undefined;
|
|
1379
|
+
/** Gap between sibling arcs, in degrees. @default 0 */
|
|
1380
|
+
padAngle?: number | undefined;
|
|
1381
|
+
/** Colors arcs by their value instead of by branch. */
|
|
1382
|
+
colorScale?: ColorScale | undefined;
|
|
1383
|
+
}
|
|
1384
|
+
interface ChordLink extends Identified {
|
|
1385
|
+
source: string;
|
|
1386
|
+
target: string;
|
|
1387
|
+
value: number;
|
|
350
1388
|
}
|
|
351
1389
|
interface ChordInput extends Sized {
|
|
352
|
-
names
|
|
1390
|
+
/** Group names, in order around the circle. Required with `matrix`; derived from `links` otherwise. */
|
|
1391
|
+
names?: string[] | undefined;
|
|
353
1392
|
/** `matrix[i][j]` is the flow from `i` to `j`. */
|
|
354
|
-
matrix
|
|
1393
|
+
matrix?: number[][] | undefined;
|
|
1394
|
+
/** Edge-list form of the matrix; `names` orders the groups when given. */
|
|
1395
|
+
links?: ChordLink[] | undefined;
|
|
1396
|
+
/** Angular gap between groups, in degrees. @default 2.3 */
|
|
1397
|
+
padding?: number | undefined;
|
|
1398
|
+
/** Order groups by their total flow instead of `names` order. */
|
|
1399
|
+
sort?: 'asc' | 'desc' | undefined;
|
|
1400
|
+
/** Tick marks with values around each group. @default false */
|
|
1401
|
+
ticks?: boolean | undefined;
|
|
1402
|
+
}
|
|
1403
|
+
interface GeoPoint {
|
|
1404
|
+
type: 'Point';
|
|
1405
|
+
coordinates: [number, number];
|
|
1406
|
+
}
|
|
1407
|
+
interface GeoMultiPoint {
|
|
1408
|
+
type: 'MultiPoint';
|
|
1409
|
+
coordinates: [number, number][];
|
|
1410
|
+
}
|
|
1411
|
+
interface GeoLineString {
|
|
1412
|
+
type: 'LineString';
|
|
1413
|
+
coordinates: [number, number][];
|
|
1414
|
+
}
|
|
1415
|
+
interface GeoMultiLineString {
|
|
1416
|
+
type: 'MultiLineString';
|
|
1417
|
+
coordinates: [number, number][][];
|
|
355
1418
|
}
|
|
356
1419
|
interface GeoPolygon {
|
|
357
1420
|
type: 'Polygon';
|
|
@@ -362,18 +1425,59 @@ interface GeoMultiPolygon {
|
|
|
362
1425
|
type: 'MultiPolygon';
|
|
363
1426
|
coordinates: [number, number][][][];
|
|
364
1427
|
}
|
|
365
|
-
interface MapFeature {
|
|
1428
|
+
interface MapFeature extends Identified {
|
|
366
1429
|
name: string;
|
|
367
|
-
|
|
368
|
-
|
|
1430
|
+
/** The measure the fill follows; a feature without one is drawn in the neutral fill. */
|
|
1431
|
+
value?: number | undefined;
|
|
1432
|
+
/** Polygons are regions; points become markers and line strings routes, in the same layers as `points`/`lines`. */
|
|
1433
|
+
geometry: GeoPolygon | GeoMultiPolygon | GeoPoint | GeoMultiPoint | GeoLineString | GeoMultiLineString;
|
|
1434
|
+
/** A categorical color for this region, drawn at full opacity. */
|
|
1435
|
+
color?: string | undefined;
|
|
1436
|
+
}
|
|
1437
|
+
/** A marker at a coordinate; with a `value` its area follows the value (a bubble). */
|
|
1438
|
+
interface MapPoint extends Identified {
|
|
1439
|
+
name: string;
|
|
1440
|
+
/** `[longitude, latitude]`. */
|
|
1441
|
+
coordinates: [number, number];
|
|
1442
|
+
value?: number | undefined;
|
|
1443
|
+
color?: string | undefined;
|
|
1444
|
+
}
|
|
1445
|
+
/** A route or connection drawn through `[longitude, latitude]` points. */
|
|
1446
|
+
interface MapLine extends Identified {
|
|
1447
|
+
name: string;
|
|
1448
|
+
coordinates: [number, number][];
|
|
1449
|
+
value?: number | undefined;
|
|
1450
|
+
color?: string | undefined;
|
|
1451
|
+
dash?: string | undefined;
|
|
369
1452
|
}
|
|
370
1453
|
interface MapInput extends Sized {
|
|
371
1454
|
/** GeoJSON-shaped regions; drawn with an equirectangular projection fitted to their bounds. */
|
|
372
1455
|
features: MapFeature[];
|
|
373
1456
|
/** The region color; each region's opacity follows its value. */
|
|
374
1457
|
color?: string | undefined;
|
|
1458
|
+
/** A full color scale for the regions; wins over `color`. */
|
|
1459
|
+
colorScale?: ColorScale | undefined;
|
|
1460
|
+
/** Draw the color scale under the map, or beside it. @default false */
|
|
1461
|
+
colorLegend?: boolean | ColorLegendOptions | undefined;
|
|
375
1462
|
/** @default 'equirectangular' */
|
|
376
1463
|
projection?: 'equirectangular' | 'mercator' | undefined;
|
|
1464
|
+
/** A marker layer over the regions; markers with a `value` are sized by it. */
|
|
1465
|
+
points?: MapPoint[] | undefined;
|
|
1466
|
+
/** A line layer (routes, connections) over the regions. */
|
|
1467
|
+
lines?: MapLine[] | undefined;
|
|
1468
|
+
/** Marker radius range in pixels. @default [3, 14] */
|
|
1469
|
+
sizeRange?: [number, number] | undefined;
|
|
1470
|
+
/** Write each region's name at its centre. @default false */
|
|
1471
|
+
labels?: boolean | undefined;
|
|
1472
|
+
/** The visible window: pan/zoom state, controllable; `zoom` 1 fits the features. */
|
|
1473
|
+
view?: MapView | undefined;
|
|
1474
|
+
}
|
|
1475
|
+
/** A map's pan/zoom state: the projected centre in `[longitude, latitude]` and a zoom factor. */
|
|
1476
|
+
interface MapView {
|
|
1477
|
+
/** @default the centre of the features' bounds */
|
|
1478
|
+
center?: [number, number] | undefined;
|
|
1479
|
+
/** Scale multiplier over the fitted projection, 1–64. @default 1 */
|
|
1480
|
+
zoom?: number | undefined;
|
|
377
1481
|
}
|
|
378
1482
|
interface RadialBand {
|
|
379
1483
|
from: number;
|
|
@@ -410,13 +1514,19 @@ interface RadialBarInput extends Sized {
|
|
|
410
1514
|
interface ChartItem {
|
|
411
1515
|
/** The tooltip text. */
|
|
412
1516
|
label: string;
|
|
1517
|
+
/** Stable identifier of the datum, node, link or feature; the name when none was given. */
|
|
1518
|
+
id?: ChartItemId | undefined;
|
|
413
1519
|
series?: string | undefined;
|
|
1520
|
+
/** Stable identifier of the series; the series name when none was given. */
|
|
1521
|
+
seriesId?: ChartItemId | undefined;
|
|
414
1522
|
category?: string | undefined;
|
|
415
1523
|
index?: number | undefined;
|
|
416
1524
|
value?: number | undefined;
|
|
417
1525
|
name?: string | undefined;
|
|
418
1526
|
/** Set on legend entries, which toggle a series instead of reporting a value. */
|
|
419
1527
|
legend?: boolean | undefined;
|
|
1528
|
+
/** Set on range-selector buttons: clicking applies this zoom window. */
|
|
1529
|
+
range?: Zoom | undefined;
|
|
420
1530
|
}
|
|
421
1531
|
interface ShapeBase {
|
|
422
1532
|
/** The `data-skdx-part` value, e.g. `node`, `link`, `grid`. */
|
|
@@ -456,6 +1566,7 @@ type Shape = (ShapeBase & {
|
|
|
456
1566
|
stroke: string;
|
|
457
1567
|
dash?: string | undefined;
|
|
458
1568
|
strokeWidth?: number | undefined;
|
|
1569
|
+
opacity?: number | undefined;
|
|
459
1570
|
}) | (ShapeBase & {
|
|
460
1571
|
kind: 'circle';
|
|
461
1572
|
cx: number;
|
|
@@ -473,6 +1584,8 @@ type Shape = (ShapeBase & {
|
|
|
473
1584
|
baseline?: 'middle' | 'hanging' | undefined;
|
|
474
1585
|
fill?: string | undefined;
|
|
475
1586
|
weight?: 'bold' | undefined;
|
|
1587
|
+
/** Rotation in degrees around `(x, y)`, e.g. `-45` for long category labels. */
|
|
1588
|
+
rotate?: number | undefined;
|
|
476
1589
|
});
|
|
477
1590
|
/** Where the pointer can act inside a cartesian chart: category slots, the shared tooltip rows and the brush strip. */
|
|
478
1591
|
interface Hit {
|
|
@@ -498,12 +1611,94 @@ interface Canvas {
|
|
|
498
1611
|
/** Everything drawn, back to front: grid, marks, legend and labels. */
|
|
499
1612
|
shapes: Shape[];
|
|
500
1613
|
tooltip: boolean;
|
|
1614
|
+
/** Rewrites a mark's tooltip text; from `TooltipOptions.formatter`. */
|
|
1615
|
+
tooltipFormatter?: ((item: ChartItem) => string | string[]) | undefined;
|
|
501
1616
|
description?: string | undefined;
|
|
502
1617
|
decorative?: boolean | undefined;
|
|
503
1618
|
/** Transition duration in ms when animation is on. */
|
|
504
1619
|
animate?: number | undefined;
|
|
505
1620
|
responsive?: boolean | undefined;
|
|
506
1621
|
hit?: Hit | undefined;
|
|
1622
|
+
/** Rewrites the shared axis tooltip rows; from `TooltipOptions.axisFormatter`. */
|
|
1623
|
+
axisTooltipFormatter?: ((rows: string[], index: number) => string[]) | undefined;
|
|
1624
|
+
/** Render the tooltip as an HTML element over the page; from `TooltipOptions.portal`. */
|
|
1625
|
+
tooltipPortal?: boolean | undefined;
|
|
1626
|
+
/** Where the tooltip box sits; from `TooltipOptions.placement`. */
|
|
1627
|
+
tooltipPlacement?: 'auto' | 'top' | 'bottom' | 'left' | 'right' | undefined;
|
|
1628
|
+
/** Anchor the tooltip to the mark instead of the pointer; from `TooltipOptions.followPointer: false`. */
|
|
1629
|
+
tooltipAnchored?: boolean | undefined;
|
|
1630
|
+
/** Gradient definitions the shapes reference as `url(#id)`. */
|
|
1631
|
+
defs?: GradientDef[] | undefined;
|
|
1632
|
+
/** Data problems found while laying out, for `onDataIssue`. */
|
|
1633
|
+
issues?: ChartDataIssue[] | undefined;
|
|
1634
|
+
/** Header and rows of the accessible table, when `accessibleTable` is on. */
|
|
1635
|
+
table?: string[][] | undefined;
|
|
1636
|
+
/** How Gantt bars map to time, so a root can turn a drag into a task change. */
|
|
1637
|
+
edit?: EditModel | undefined;
|
|
1638
|
+
/** The map's projection state, so a root can pan and zoom it. */
|
|
1639
|
+
map?: MapModel | undefined;
|
|
1640
|
+
/** Width of a left legend column the marks still have to move right by; see `placeLegend`. */
|
|
1641
|
+
legendOffset?: number | undefined;
|
|
1642
|
+
}
|
|
1643
|
+
/** A linear gradient a shape's fill can reference as `url(#id)`. */
|
|
1644
|
+
interface GradientDef {
|
|
1645
|
+
id: string;
|
|
1646
|
+
/** Direction: top-to-bottom by default. */
|
|
1647
|
+
vertical?: boolean | undefined;
|
|
1648
|
+
stops: {
|
|
1649
|
+
offset: number;
|
|
1650
|
+
color: string;
|
|
1651
|
+
opacity?: number | undefined;
|
|
1652
|
+
}[];
|
|
1653
|
+
}
|
|
1654
|
+
/** What a root needs to drag Gantt bars: the time scale and where each editable bar sits. */
|
|
1655
|
+
interface EditModel {
|
|
1656
|
+
/** Pixel x of a time value. */
|
|
1657
|
+
scale: (value: number) => number;
|
|
1658
|
+
/** Time value of a pixel x. */
|
|
1659
|
+
invert: (x: number) => number;
|
|
1660
|
+
/** Editable bars by shape index: their task and pixel extent. */
|
|
1661
|
+
bars: {
|
|
1662
|
+
index: number;
|
|
1663
|
+
id: ChartItemId;
|
|
1664
|
+
name: string;
|
|
1665
|
+
start: number;
|
|
1666
|
+
end: number;
|
|
1667
|
+
x0: number;
|
|
1668
|
+
x1: number;
|
|
1669
|
+
y: number;
|
|
1670
|
+
height: number;
|
|
1671
|
+
}[];
|
|
1672
|
+
/** Round dragged times to this step (ms or units), when set. */
|
|
1673
|
+
snap?: number | undefined;
|
|
1674
|
+
}
|
|
1675
|
+
/** A dragged or resized task, as reported by `onTaskChange`. */
|
|
1676
|
+
interface TaskChange {
|
|
1677
|
+
id: ChartItemId;
|
|
1678
|
+
name: string;
|
|
1679
|
+
start: number;
|
|
1680
|
+
end: number;
|
|
1681
|
+
}
|
|
1682
|
+
/** The map's pan/zoom state and the bounds it was fitted to. */
|
|
1683
|
+
interface MapModel {
|
|
1684
|
+
view: {
|
|
1685
|
+
center: [number, number];
|
|
1686
|
+
zoom: number;
|
|
1687
|
+
};
|
|
1688
|
+
/** The projected bounds at zoom 1, in the projection's own units. */
|
|
1689
|
+
bounds: {
|
|
1690
|
+
minLon: number;
|
|
1691
|
+
maxLon: number;
|
|
1692
|
+
minLat: number;
|
|
1693
|
+
maxLat: number;
|
|
1694
|
+
};
|
|
1695
|
+
/** Plot area the map is drawn in. */
|
|
1696
|
+
plot: Box;
|
|
1697
|
+
/** Pixels per projected unit at the current zoom. */
|
|
1698
|
+
scale: number;
|
|
1699
|
+
/** Latitude to the projection's y unit, and back; identity for equirectangular. */
|
|
1700
|
+
toY: (latitude: number) => number;
|
|
1701
|
+
fromY: (y: number) => number;
|
|
507
1702
|
}
|
|
508
1703
|
interface LegendItem {
|
|
509
1704
|
name: string;
|
|
@@ -526,6 +1721,26 @@ declare const TITLE_LIMIT = 2000;
|
|
|
526
1721
|
/** Bars, lines, areas and range bands that share one category axis and up to two value axes. */
|
|
527
1722
|
declare function layoutCartesian(input: ChartInput, defaultType: Kind): Canvas;
|
|
528
1723
|
|
|
1724
|
+
/** The legend options of an input; `undefined` when there is no legend. */
|
|
1725
|
+
declare function legendOptions(input: Sized): LegendOptions | undefined;
|
|
1726
|
+
/** The tooltip options of an input, with `enabled` resolved. */
|
|
1727
|
+
declare function tooltipOptions(input: Sized): Omit<TooltipOptions, 'enabled'> & {
|
|
1728
|
+
enabled: boolean;
|
|
1729
|
+
};
|
|
1730
|
+
/**
|
|
1731
|
+
* Moves the marks of a chart laid out with a left legend right by the legend's width, keeping the
|
|
1732
|
+
* hit, edit and map models aligned. The roots apply it after layout; `svgMarkup` consumers of a
|
|
1733
|
+
* raw layout call it themselves. Idempotent: a placed layout is returned as it is.
|
|
1734
|
+
*/
|
|
1735
|
+
declare function placeLegend(layout: Canvas): Canvas;
|
|
1736
|
+
/** A tooltip box next to the pointer, kept inside the canvas; one line per entry. */
|
|
1737
|
+
declare function tooltipShapes(x: number, y: number, text: string | string[], width: number, height: number, placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right'): Shape[];
|
|
1738
|
+
/**
|
|
1739
|
+
* The loading, error or empty placeholder, or `null` when the chart should draw. Charts call this
|
|
1740
|
+
* first so no axis is drawn around missing data.
|
|
1741
|
+
*/
|
|
1742
|
+
declare function stateCanvas(input: Sized, empty: boolean, w?: number, h?: number): Canvas | null;
|
|
1743
|
+
|
|
529
1744
|
declare function layoutScatterChart(input: ScatterChartInput): Canvas;
|
|
530
1745
|
|
|
531
1746
|
declare function layoutPieChart(input: PieChartInput): Canvas;
|
|
@@ -533,6 +1748,12 @@ declare function layoutPieChart(input: PieChartInput): Canvas;
|
|
|
533
1748
|
/** A small axis-less trend: an area (default), a bare line, or bars; optional extremes and last value. */
|
|
534
1749
|
declare function layoutSparkline(input: SparklineInput): Canvas;
|
|
535
1750
|
|
|
1751
|
+
/**
|
|
1752
|
+
* One polygon per series over a spoke per metric. Scaling: `none` shares one scale (values are
|
|
1753
|
+
* comparable); `metric` scales every axis by its own min/max (unlike units, the default when
|
|
1754
|
+
* `metrics` carry bounds); `series` scales every series to its own maximum (the historical
|
|
1755
|
+
* `normalize: true`, which only shows shape, never magnitude, and is reported as such).
|
|
1756
|
+
*/
|
|
536
1757
|
declare function layoutRadarChart(input: RadarChartInput): Canvas;
|
|
537
1758
|
|
|
538
1759
|
declare function layoutHeatmap(input: HeatmapInput): Canvas;
|
|
@@ -549,6 +1770,88 @@ declare function layoutFunnelChart(input: FunnelChartInput): Canvas;
|
|
|
549
1770
|
*/
|
|
550
1771
|
declare function layoutRadialBar(input: RadialBarInput): Canvas;
|
|
551
1772
|
|
|
1773
|
+
/**
|
|
1774
|
+
* One reading on an arc scale: a needle over threshold bands (`radial`), or the arc filled up to
|
|
1775
|
+
* the value (`solid`). `startAngle`/`endAngle` open or close the arc; `-90`/`90` is a semi-circle.
|
|
1776
|
+
*/
|
|
1777
|
+
declare function layoutGaugeChart(input: GaugeChartInput): Canvas;
|
|
1778
|
+
|
|
1779
|
+
/**
|
|
1780
|
+
* Three quantities per mark: x, y and a magnitude the bubble's area is proportional to
|
|
1781
|
+
* (radius ∝ √z), floored at the smallest radius so tiny values stay visible. Negative
|
|
1782
|
+
* magnitudes count as zero; `NaN` magnitudes draw the smallest bubble.
|
|
1783
|
+
*/
|
|
1784
|
+
declare function layoutBubbleChart(input: BubbleChartInput): Canvas;
|
|
1785
|
+
|
|
1786
|
+
/**
|
|
1787
|
+
* The distribution of a raw sample: equal-width bins by count or width (Sturges by default), or
|
|
1788
|
+
* explicit `thresholds`. Bars measure counts, density (area sums to 1) or shares of the sample.
|
|
1789
|
+
* Bins render as categories, so unequal `thresholds` bins are equally wide; density corrects for that.
|
|
1790
|
+
*/
|
|
1791
|
+
declare function layoutHistogram(input: HistogramInput): Canvas;
|
|
1792
|
+
|
|
1793
|
+
/**
|
|
1794
|
+
* A measure against a target over qualitative ranges (Few's bullet graph): one row per KPI,
|
|
1795
|
+
* or one column when vertical. Reads compactly in dashboard cards where a gauge would not fit.
|
|
1796
|
+
*/
|
|
1797
|
+
declare function layoutBulletChart(input: BulletChartInput): Canvas;
|
|
1798
|
+
|
|
1799
|
+
/**
|
|
1800
|
+
* Bars, lines, areas and ranges on one category axis: every series declares its `type`, so a
|
|
1801
|
+
* revenue bar and a margin line (on `axis: 'right'`) share the frame, legend and crosshair.
|
|
1802
|
+
* `ComboChartInput` (the public props) requires a `type` per series so nothing but cartesian
|
|
1803
|
+
* series can be passed; the layout itself takes any cartesian input so the framework roots'
|
|
1804
|
+
* shared cartesian prop sets can call it.
|
|
1805
|
+
*/
|
|
1806
|
+
declare const layoutComboChart: (input: ChartInput) => Canvas;
|
|
1807
|
+
|
|
1808
|
+
/**
|
|
1809
|
+
* Low–high intervals per category: a shaded band (`area`), floating bars (`bar`) or two
|
|
1810
|
+
* outlines (`line`). Inverted intervals (`low > high`) are normalized, equal ends draw a hairline,
|
|
1811
|
+
* and a missing end is a gap.
|
|
1812
|
+
*/
|
|
1813
|
+
declare function layoutRangeChart(input: RangeChartInput): Canvas;
|
|
1814
|
+
|
|
1815
|
+
/** Node labels are drawn by default up to this many nodes. */
|
|
1816
|
+
declare const NETWORK_LABEL_LIMIT = 60;
|
|
1817
|
+
/**
|
|
1818
|
+
* Nodes and edges of an arbitrary graph: force-directed (default), around a circle, or at
|
|
1819
|
+
* the nodes' own coordinates. Deterministic: the same input always gives the same picture.
|
|
1820
|
+
*/
|
|
1821
|
+
declare function layoutNetworkChart(input: NetworkChartInput): Canvas;
|
|
1822
|
+
|
|
1823
|
+
/**
|
|
1824
|
+
* Point-in-time events on a time axis, sorted chronologically. Horizontal lanes stagger their
|
|
1825
|
+
* labels so dense events stay readable; the vertical layout is a list, one row per event, which
|
|
1826
|
+
* reads evenly however uneven the gaps are.
|
|
1827
|
+
*/
|
|
1828
|
+
declare function layoutTimelineChart(input: TimelineChartInput): Canvas;
|
|
1829
|
+
|
|
1830
|
+
interface BinOptions {
|
|
1831
|
+
/** Bin count. @default Sturges' rule, `ceil(log2(n) + 1)` */
|
|
1832
|
+
bins?: number | undefined;
|
|
1833
|
+
/** Bin width; wins over `bins`. */
|
|
1834
|
+
binWidth?: number | undefined;
|
|
1835
|
+
/** Value range covered; samples outside are dropped. @default the sample extent */
|
|
1836
|
+
domain?: [number, number] | undefined;
|
|
1837
|
+
/** Explicit, ascending bin edges; wins over everything else and allows unequal widths. */
|
|
1838
|
+
thresholds?: number[] | undefined;
|
|
1839
|
+
}
|
|
1840
|
+
interface Bin {
|
|
1841
|
+
/** Inclusive lower edge. */
|
|
1842
|
+
x0: number;
|
|
1843
|
+
/** Exclusive upper edge (inclusive for the last bin). */
|
|
1844
|
+
x1: number;
|
|
1845
|
+
count: number;
|
|
1846
|
+
}
|
|
1847
|
+
/**
|
|
1848
|
+
* Ascending bin edges for a sample: explicit `thresholds`, else equal widths from `binWidth`
|
|
1849
|
+
* or `bins` over `domain`. Deterministic: the same options always yield the same edges.
|
|
1850
|
+
*/
|
|
1851
|
+
declare function binEdges(samples: readonly number[], options?: BinOptions): number[];
|
|
1852
|
+
/** Counts the finite samples into the bins between consecutive `edges`. */
|
|
1853
|
+
declare function binSamples(values: readonly (Value | undefined)[], edges: readonly number[]): Bin[];
|
|
1854
|
+
|
|
552
1855
|
/**
|
|
553
1856
|
* Series colors, cycling through the `@skdx/tokens` scales so charts follow the
|
|
554
1857
|
* active theme. Load `@skdx/tokens/css` (or any theme) for these to resolve.
|
|
@@ -574,28 +1877,84 @@ declare function makeFormatter(format: Format | undefined): (value: number) => s
|
|
|
574
1877
|
/** A category as axis text: strings as they are, numbers and dates through `format`. */
|
|
575
1878
|
declare function categoryLabel(c: Category, format?: Format): string;
|
|
576
1879
|
|
|
577
|
-
/** A tooltip box next to the pointer, kept inside the canvas; one line per entry. */
|
|
578
|
-
declare function tooltipShapes(x: number, y: number, text: string | string[], width: number, height: number): Shape[];
|
|
579
|
-
/**
|
|
580
|
-
* The loading, error or empty placeholder, or `null` when the chart should draw. Charts call this
|
|
581
|
-
* first so no axis is drawn around missing data.
|
|
582
|
-
*/
|
|
583
|
-
declare function stateCanvas(input: Sized, empty: boolean, w?: number, h?: number): Canvas | null;
|
|
584
|
-
|
|
585
1880
|
/** Converts a client position into viewBox units of the svg. */
|
|
586
1881
|
declare function toViewBox(svg: Element, clientX: number, clientY: number, width: number, height: number): {
|
|
587
1882
|
x: number;
|
|
588
1883
|
y: number;
|
|
589
1884
|
};
|
|
1885
|
+
/** The shared tooltip rows at the category nearest to `x`, through the axis formatter when set. */
|
|
1886
|
+
declare function crosshairRows(layout: Canvas, x: number): {
|
|
1887
|
+
index: number;
|
|
1888
|
+
rows: string[];
|
|
1889
|
+
} | undefined;
|
|
1890
|
+
/** The crosshair line alone, at the category nearest to `x`. */
|
|
1891
|
+
declare function crosshairLine(layout: Canvas, x: number): Shape | undefined;
|
|
590
1892
|
/** The crosshair line and shared tooltip at the category nearest to `x`, or none outside the plot. */
|
|
591
1893
|
declare function crosshairShapes(layout: Canvas, x: number, y: number): Shape[];
|
|
1894
|
+
/** The crosshair shapes at a category label, for charts synced to another chart's pointer. */
|
|
1895
|
+
declare function crosshairAt(layout: Canvas, category: string): Shape[];
|
|
1896
|
+
/**
|
|
1897
|
+
* What a pointer at the given position should show when the tooltip is rendered outside the svg
|
|
1898
|
+
* (`tooltip.portal`): the text lines, and the crosshair line to keep inside the svg.
|
|
1899
|
+
*/
|
|
1900
|
+
declare function pointerTooltipText(layout: Canvas, target: EventTarget | null, svg: Element, clientX: number, clientY: number): {
|
|
1901
|
+
lines: string[];
|
|
1902
|
+
shapes: Shape[];
|
|
1903
|
+
};
|
|
592
1904
|
/**
|
|
593
|
-
* Tooltip shapes for the mark under the pointer, or none. Reads the mark's
|
|
594
|
-
*
|
|
1905
|
+
* Tooltip shapes for the mark under the pointer, or none. Reads the mark's `<title>` (or its
|
|
1906
|
+
* item through `formatter`) and converts the pointer position into viewBox units.
|
|
595
1907
|
*/
|
|
596
|
-
declare function hoverTooltip(target: EventTarget | null, svg: Element, clientX: number, clientY: number, width: number, height: number): Shape[];
|
|
1908
|
+
declare function hoverTooltip(target: EventTarget | null, svg: Element, clientX: number, clientY: number, width: number, height: number, layout?: Canvas): Shape[];
|
|
597
1909
|
/** What to draw for a pointer at the given position: the crosshair when on, else the hovered mark's tooltip. */
|
|
598
1910
|
declare function pointerShapes(layout: Canvas, target: EventTarget | null, svg: Element, clientX: number, clientY: number): Shape[];
|
|
1911
|
+
/** The ref of the mark under the pointer (legend entries excluded), or `null` off any mark. */
|
|
1912
|
+
declare function hoveredRef(layout: Canvas, target: EventTarget | null): ChartItemRef | null;
|
|
1913
|
+
/** Refs of the marks whose anchor lies inside a viewBox rectangle: rectangular brush selection. */
|
|
1914
|
+
declare function itemsInBox(layout: Canvas, box: Box): ChartItemRef[];
|
|
1915
|
+
/** The dashed rectangle drawn while a selection brush is dragged. */
|
|
1916
|
+
declare const brushBoxShape: (box: Box) => Shape;
|
|
1917
|
+
/** A box from two corners, normalized. */
|
|
1918
|
+
declare const boxFrom: (x0: number, y0: number, x1: number, y1: number) => Box;
|
|
1919
|
+
/** Whether a point is inside a polygon (even-odd rule). */
|
|
1920
|
+
declare function insidePolygon(points: readonly {
|
|
1921
|
+
x: number;
|
|
1922
|
+
y: number;
|
|
1923
|
+
}[], x: number, y: number): boolean;
|
|
1924
|
+
/** Refs of the marks whose anchor lies inside a drawn polygon: lasso selection. */
|
|
1925
|
+
declare function itemsInPolygon(layout: Canvas, points: readonly {
|
|
1926
|
+
x: number;
|
|
1927
|
+
y: number;
|
|
1928
|
+
}[]): ChartItemRef[];
|
|
1929
|
+
/** The dashed outline drawn while a lasso is dragged. */
|
|
1930
|
+
declare const lassoShape: (points: readonly {
|
|
1931
|
+
x: number;
|
|
1932
|
+
y: number;
|
|
1933
|
+
}[]) => Shape;
|
|
1934
|
+
interface GanttGrab {
|
|
1935
|
+
bar: EditModel['bars'][number];
|
|
1936
|
+
mode: 'move' | 'start' | 'end';
|
|
1937
|
+
}
|
|
1938
|
+
/** What a pointer down at viewBox `(x, y)` grabs on an editable Gantt, if anything. */
|
|
1939
|
+
declare function ganttGrab(layout: Canvas, x: number, y: number): GanttGrab | undefined;
|
|
1940
|
+
/** The task after dragging a grab by `dx` viewBox pixels; the end never crosses the start. */
|
|
1941
|
+
declare function ganttDrag(layout: Canvas, grab: GanttGrab, dx: number): TaskChange;
|
|
1942
|
+
/**
|
|
1943
|
+
* Keyboard editing of the focused bar (shape index `focus`): Shift+Arrow moves the task one
|
|
1944
|
+
* step, Alt+Arrow moves its end, Alt+Shift+Arrow its start. A step is the snap unit, or the
|
|
1945
|
+
* time under 10 px. `undefined` when the key or the focused shape is not an edit.
|
|
1946
|
+
*/
|
|
1947
|
+
declare function ganttKey(layout: Canvas, focus: number | null, key: {
|
|
1948
|
+
key: string;
|
|
1949
|
+
shiftKey: boolean;
|
|
1950
|
+
altKey: boolean;
|
|
1951
|
+
}): TaskChange | undefined;
|
|
1952
|
+
/** The ghost outline of a task while it is dragged. */
|
|
1953
|
+
declare function ganttGhost(layout: Canvas, grab: GanttGrab, change: TaskChange): Shape;
|
|
1954
|
+
/** The view after a wheel step at viewBox `(x, y)`: scrolling up zooms in around the pointer. */
|
|
1955
|
+
declare function mapWheel(model: MapModel, deltaY: number, x: number, y: number): MapView;
|
|
1956
|
+
/** The view after dragging the map by `(dx, dy)` viewBox pixels from where `from` was set. */
|
|
1957
|
+
declare function mapPan(model: MapModel, from: MapModel['view'], dx: number, dy: number): MapView;
|
|
599
1958
|
/** The shape index and item of the mark an event landed on, if it stands for something. */
|
|
600
1959
|
declare function itemAt(layout: Canvas, target: EventTarget | null): {
|
|
601
1960
|
index: number;
|
|
@@ -638,8 +1997,33 @@ declare function brushGrab(hit: Hit, x: number, y: number): {
|
|
|
638
1997
|
/** The window after dragging a brush grab by `dx` viewBox pixels. */
|
|
639
1998
|
declare function brushDrag(hit: Hit, grab: BrushGrab, from: Zoom, dx: number): Zoom;
|
|
640
1999
|
|
|
2000
|
+
/** What `exportChart` produces and how. */
|
|
2001
|
+
type ChartExportOptions = {
|
|
2002
|
+
/** Accessible name written into the SVG. */
|
|
2003
|
+
label: string;
|
|
2004
|
+
/** Maps `var(--skdx-…)` to concrete colors, e.g. from `getComputedStyle`. Required for PNG. */
|
|
2005
|
+
resolve?: ((cssVariable: string) => string) | undefined;
|
|
2006
|
+
} & ({
|
|
2007
|
+
type: 'svg';
|
|
2008
|
+
} | {
|
|
2009
|
+
type: 'png';
|
|
2010
|
+
/** Device pixels per unit. @default 2 */
|
|
2011
|
+
scale?: number | undefined;
|
|
2012
|
+
/** Fill behind the chart, e.g. the page surface; transparent by default. */
|
|
2013
|
+
background?: string | undefined;
|
|
2014
|
+
} | {
|
|
2015
|
+
type: 'csv';
|
|
2016
|
+
rows: (string | number | null | undefined)[][];
|
|
2017
|
+
});
|
|
2018
|
+
/**
|
|
2019
|
+
* One entry point for the export formats: SVG markup, a PNG blob (browser only), or CSV of the
|
|
2020
|
+
* rows given. Rejects when a PNG is asked for outside a browser.
|
|
2021
|
+
*/
|
|
2022
|
+
declare function exportChart(layout: Canvas, options: ChartExportOptions): Promise<string | Blob>;
|
|
641
2023
|
/** One shape as SVG markup. Shared by the export and usable for server rendering. */
|
|
642
2024
|
declare function shapeMarkup(s: Shape): string;
|
|
2025
|
+
/** The `<defs>` block for a layout's gradients, or an empty string. */
|
|
2026
|
+
declare function defsMarkup(layout: Canvas): string;
|
|
643
2027
|
/**
|
|
644
2028
|
* A standalone SVG document of a layout, for download or server rendering. Colors stay as
|
|
645
2029
|
* `var(--skdx-…)` references unless `resolve` maps them to concrete values, e.g. from
|
|
@@ -659,6 +2043,204 @@ declare function seriesCsv(series: {
|
|
|
659
2043
|
data: (number | null)[];
|
|
660
2044
|
}[], categories?: (string | number | Date)[]): string;
|
|
661
2045
|
|
|
2046
|
+
/** Normalizes a `Selection` into refs; bare ids become `{ id }`. */
|
|
2047
|
+
declare function toRefs(selection: Selection | ChartItemRef | ChartItemId | null | undefined): ChartItemRef[];
|
|
2048
|
+
/** Effective id of an item: the explicit id, else its name, else its series. */
|
|
2049
|
+
declare const itemId: (item: ChartItem) => ChartItemId | undefined;
|
|
2050
|
+
/** Whether every field the ref gives matches the item. An empty ref matches nothing. */
|
|
2051
|
+
declare function matchesItem(item: ChartItem, ref: ChartItemRef): boolean;
|
|
2052
|
+
/** Whether the item is in the selection. */
|
|
2053
|
+
declare const isSelected: (item: ChartItem, selection: Selection | undefined, refs?: ChartItemRef[]) => boolean;
|
|
2054
|
+
/** Ids (or names) named by a selection, for layouts that key their data by id. */
|
|
2055
|
+
declare const selectedIds: (selection: Selection | undefined) => ChartItemId[];
|
|
2056
|
+
/** The ref a mark's item stands for, as reported by `onSelectedChange`. */
|
|
2057
|
+
declare function refOf(item: ChartItem): ChartItemRef;
|
|
2058
|
+
/** Whether two refs locate the same item. */
|
|
2059
|
+
declare const sameRef: (a: ChartItemRef, b: ChartItemRef) => boolean;
|
|
2060
|
+
/** The selection after a click on `item` in the given mode. */
|
|
2061
|
+
declare function toggleSelection(selection: Selection | undefined, item: ChartItem, mode: 'single' | 'multiple'): ChartItemRef[];
|
|
2062
|
+
/**
|
|
2063
|
+
* Applies `selected` and `highlighted` to a laid-out chart: marks outside the highlight scope
|
|
2064
|
+
* fade, selected marks get an outline appended after the marks (so shape indexes, and with them
|
|
2065
|
+
* `data-skdx-i`, stay stable). Legend entries, grid, axes and tooltips are never touched.
|
|
2066
|
+
*/
|
|
2067
|
+
declare function emphasize(layout: Canvas, input: Sized): Canvas;
|
|
2068
|
+
|
|
2069
|
+
/** A resolved color scale: value → fill and opacity, plus what its legend needs. */
|
|
2070
|
+
interface ResolvedColorScale {
|
|
2071
|
+
/** Fill and opacity for a value; `undefined` for a non-finite value. */
|
|
2072
|
+
color: (value: number | null | undefined) => {
|
|
2073
|
+
fill: string;
|
|
2074
|
+
opacity: number;
|
|
2075
|
+
} | undefined;
|
|
2076
|
+
/** The value range the scale covers. */
|
|
2077
|
+
domain: readonly [number, number];
|
|
2078
|
+
/** Legend swatches, low to high: a representative value (or class label) per swatch. */
|
|
2079
|
+
swatches: {
|
|
2080
|
+
fill: string;
|
|
2081
|
+
opacity: number;
|
|
2082
|
+
label: string;
|
|
2083
|
+
}[];
|
|
2084
|
+
kind: ColorScale['type'];
|
|
2085
|
+
}
|
|
2086
|
+
/** `[r, g, b]` of a `#rgb`, `#rrggbb` or `rgb(r, g, b)` color; `undefined` for anything else. */
|
|
2087
|
+
declare function parseColor(c: string): [number, number, number] | undefined;
|
|
2088
|
+
/**
|
|
2089
|
+
* The color at `t` (0–1) along the stops: interpolated in RGB when every stop is a concrete
|
|
2090
|
+
* color, else the nearest stop (token colors such as `var(--skdx-color-primary-500)` cannot be
|
|
2091
|
+
* mixed in the core, so they quantize).
|
|
2092
|
+
*/
|
|
2093
|
+
declare function mixStops(stops: string[], t: number): string;
|
|
2094
|
+
/**
|
|
2095
|
+
* Resolves a `ColorScale` over the data extent. Without explicit stops a sequential scale is
|
|
2096
|
+
* `baseColor` at an opacity ramp (0.15–1) and a diverging scale splits `negativeColor` /
|
|
2097
|
+
* `baseColor` around zero, which is what the heatmap and map always did.
|
|
2098
|
+
*/
|
|
2099
|
+
declare function makeColorScale(scale: ColorScale | undefined, values: Iterable<number | null | undefined>, baseColor: string, negativeColor?: string, format?: (v: number) => string): ResolvedColorScale;
|
|
2100
|
+
/**
|
|
2101
|
+
* The color scale as swatches: a horizontal strip with labels underneath laid across `box`, or
|
|
2102
|
+
* (`orientation: 'vertical'`) a column of swatches down `box` with labels to the right.
|
|
2103
|
+
*/
|
|
2104
|
+
declare function colorLegendShapes(scale: ResolvedColorScale, box: Box, options?: string | ColorLegendOptions): Shape[];
|
|
2105
|
+
|
|
2106
|
+
declare const cumulative: (data: readonly Value[]) => Value[];
|
|
2107
|
+
/** `v[i] - v[i-1]`; the first value, and any value after a gap, is a gap. */
|
|
2108
|
+
declare const difference: (data: readonly Value[]) => Value[];
|
|
2109
|
+
/** `(v[i] - v[i-1]) / |v[i-1]|` as a fraction; a zero previous value is a gap. */
|
|
2110
|
+
declare const percentageChange: (data: readonly Value[]) => Value[];
|
|
2111
|
+
/** Trailing mean over `window` values; the first `window - 1` are gaps, as is any window with a gap. */
|
|
2112
|
+
declare function movingAverage(data: readonly Value[], window: number): Value[];
|
|
2113
|
+
/** Exponential moving average with `alpha = 2 / (window + 1)`, seeded by the first `window` mean. */
|
|
2114
|
+
declare function exponentialMovingAverage(data: readonly Value[], window: number): Value[];
|
|
2115
|
+
/** Values as a share of the maximum (0–1), or of the sum. */
|
|
2116
|
+
declare function normalize(data: readonly Value[], to?: 'max' | 'sum'): Value[];
|
|
2117
|
+
/** 1-based rank of each value, largest first by default; ties share the lower rank. */
|
|
2118
|
+
declare function rank(data: readonly Value[], order?: 'asc' | 'desc'): Value[];
|
|
2119
|
+
/** Keeps values inside `[min, max]`; the rest become gaps. */
|
|
2120
|
+
declare const filter: (data: readonly Value[], min?: number, max?: number) => Value[];
|
|
2121
|
+
/** Values sorted; gaps go last. */
|
|
2122
|
+
declare const sortValues: (data: readonly Value[], order?: "asc" | "desc") => Value[];
|
|
2123
|
+
/** Folds every `every` consecutive values into one by `method`; a fold of only gaps is a gap. */
|
|
2124
|
+
declare function aggregate(data: readonly Value[], every: number, method?: 'sum' | 'mean' | 'min' | 'max'): Value[];
|
|
2125
|
+
/** Counts the values into equal-width bins (see `binEdges`); the result has one count per bin. */
|
|
2126
|
+
declare function binCounts(data: readonly Value[], options?: {
|
|
2127
|
+
bins?: number | undefined;
|
|
2128
|
+
binWidth?: number | undefined;
|
|
2129
|
+
domain?: [number, number] | undefined;
|
|
2130
|
+
}): {
|
|
2131
|
+
edges: number[];
|
|
2132
|
+
counts: number[];
|
|
2133
|
+
};
|
|
2134
|
+
/** Applies transforms in order. */
|
|
2135
|
+
declare function applyTransforms(data: readonly Value[], transforms: readonly SeriesTransform[] | undefined): Value[];
|
|
2136
|
+
|
|
2137
|
+
/** Above this many visible points `sampling: 'auto'` kicks in. */
|
|
2138
|
+
declare const SAMPLING_THRESHOLD = 2000;
|
|
2139
|
+
/** The threshold and strategy a `Sampling` option resolves to; `undefined` when sampling is off. */
|
|
2140
|
+
declare function samplingOptions(sampling: Sampling | undefined): {
|
|
2141
|
+
strategy: 'lttb' | 'minmax' | 'm4';
|
|
2142
|
+
threshold: number;
|
|
2143
|
+
} | undefined;
|
|
2144
|
+
/**
|
|
2145
|
+
* Largest-Triangle-Three-Buckets (Steinarsson 2013): keeps the point of each bucket that forms
|
|
2146
|
+
* the largest triangle with the previous kept point and the next bucket's average, so peaks and
|
|
2147
|
+
* the visual shape survive. Returns the kept indexes into `values`.
|
|
2148
|
+
*/
|
|
2149
|
+
declare function lttb(values: readonly Value[], threshold: number): number[];
|
|
2150
|
+
/** Keeps the minimum and maximum of each of `threshold / 2` equal buckets, plus every gap. */
|
|
2151
|
+
declare function minMaxSample(values: readonly Value[], threshold: number): number[];
|
|
2152
|
+
/**
|
|
2153
|
+
* M4 (Jugel et al. 2014): keeps the first, last, minimum and maximum of each of `threshold / 4`
|
|
2154
|
+
* equal buckets, which reproduces a line chart pixel-exactly at that width. Gaps are kept.
|
|
2155
|
+
*/
|
|
2156
|
+
declare function m4(values: readonly Value[], threshold: number): number[];
|
|
2157
|
+
/**
|
|
2158
|
+
* Indexes to keep for a set of series sharing one category axis: the union of each series'
|
|
2159
|
+
* sample, so every series keeps its own extremes. `undefined` when nothing needs sampling.
|
|
2160
|
+
*/
|
|
2161
|
+
declare function sampleIndexes(series: readonly (readonly Value[])[], count: number, sampling: Sampling | undefined): number[] | undefined;
|
|
2162
|
+
|
|
2163
|
+
/** A node's size: its own value, else the sum of its children's. */
|
|
2164
|
+
declare const nodeValue: (n: TreeNode) => number;
|
|
2165
|
+
/** Levels below the given nodes (0 for none). */
|
|
2166
|
+
declare const depthOf: (nodes: readonly TreeNode[]) => number;
|
|
2167
|
+
/** A node's identity: its id, else its name. */
|
|
2168
|
+
declare const nodeId: (n: TreeNode) => ChartItemId;
|
|
2169
|
+
/** The path from a top-level node down to the node with `id` (or name), or `undefined`. */
|
|
2170
|
+
declare function findPath(nodes: readonly TreeNode[], id: ChartItemId): TreeNode[] | undefined;
|
|
2171
|
+
/** Children sorted by size, or as given. */
|
|
2172
|
+
declare const sortChildren: (nodes: readonly TreeNode[], sort: "asc" | "desc" | "none" | undefined) => TreeNode[];
|
|
2173
|
+
/** The tree cut at `maxDepth`: nodes at the limit keep their summed value and lose their children. */
|
|
2174
|
+
declare function cutDepth(nodes: readonly TreeNode[], maxDepth: number | undefined, depth?: number): TreeNode[];
|
|
2175
|
+
/**
|
|
2176
|
+
* The subtree to draw and the breadcrumb path for a controlled drill-down `root`; the whole
|
|
2177
|
+
* tree when `root` is unset or unknown.
|
|
2178
|
+
*/
|
|
2179
|
+
declare function drill(nodes: readonly TreeNode[], root: ChartItemId | undefined): {
|
|
2180
|
+
nodes: TreeNode[];
|
|
2181
|
+
path: TreeNode[];
|
|
2182
|
+
};
|
|
2183
|
+
|
|
2184
|
+
/** Default row cap of the accessible table. */
|
|
2185
|
+
declare const TABLE_LIMIT = 500;
|
|
2186
|
+
/**
|
|
2187
|
+
* Header and rows of the accessible table for a layout: the shared crosshair rows when the chart
|
|
2188
|
+
* has them (one row per category, one column per series), else one row per titled mark
|
|
2189
|
+
* (series, name, category, value). `undefined` when the option is off, the chart is in a state,
|
|
2190
|
+
* or there are more rows than `maxRows`.
|
|
2191
|
+
*/
|
|
2192
|
+
declare function tableRows(layout: Canvas, option: boolean | AccessibleTableOptions | undefined): string[][] | undefined;
|
|
2193
|
+
|
|
2194
|
+
/** What a group shares. Every field is optional: a chart publishes only what changed. */
|
|
2195
|
+
interface SyncState {
|
|
2196
|
+
highlighted?: ChartItemRef | null | undefined;
|
|
2197
|
+
selected?: ChartItemRef[] | undefined;
|
|
2198
|
+
zoom?: Zoom | undefined;
|
|
2199
|
+
hiddenSeries?: string[] | undefined;
|
|
2200
|
+
/** The category under the crosshair (by label), or `null` when the pointer left. */
|
|
2201
|
+
crosshair?: string | null | undefined;
|
|
2202
|
+
}
|
|
2203
|
+
type SyncListener = (state: SyncState, source: object) => void;
|
|
2204
|
+
interface SyncGroup {
|
|
2205
|
+
/** Listens for changes published by other members; returns the unsubscribe function. */
|
|
2206
|
+
subscribe(listener: SyncListener): () => void;
|
|
2207
|
+
/** Publishes a change; `source` identifies the publisher so it can ignore its own echo. */
|
|
2208
|
+
publish(state: SyncState, source: object): void;
|
|
2209
|
+
/** The last published values, for members that join later. */
|
|
2210
|
+
readonly current: SyncState;
|
|
2211
|
+
}
|
|
2212
|
+
/** The group for a `syncId`, created on first use; groups are keyed per JavaScript realm. */
|
|
2213
|
+
declare function syncGroup(id: string): SyncGroup;
|
|
2214
|
+
|
|
2215
|
+
interface ReferenceScales {
|
|
2216
|
+
plot: Box;
|
|
2217
|
+
/** Pixel x of a data x, or `undefined` when it cannot be placed (unknown category). */
|
|
2218
|
+
x: (value: Category) => number | undefined;
|
|
2219
|
+
/** Pixel y of a data y on the named axis. */
|
|
2220
|
+
y: (value: number, axis: 'left' | 'right') => number;
|
|
2221
|
+
/** Categories run down the y axis and values along x (horizontal bars). */
|
|
2222
|
+
horizontal?: boolean | undefined;
|
|
2223
|
+
}
|
|
2224
|
+
/**
|
|
2225
|
+
* Lines and bands in data coordinates, drawn behind the marks: targets, SLAs, budgets,
|
|
2226
|
+
* forecast periods, healthy ranges. Each carries its label at the plot edge.
|
|
2227
|
+
*/
|
|
2228
|
+
declare function referenceShapes(refs: Reference[] | undefined, s: ReferenceScales): Shape[];
|
|
2229
|
+
/**
|
|
2230
|
+
* Annotations over the marks: lines and bands reuse the reference drawing; points, callouts,
|
|
2231
|
+
* text and rectangles are placed at `(x, y)` in data coordinates. Each carries its label as a
|
|
2232
|
+
* `<title>` and an item, so it is hoverable and a keyboard stop.
|
|
2233
|
+
*/
|
|
2234
|
+
declare function annotationShapes(annotations: Annotation[] | undefined, s: ReferenceScales): Shape[];
|
|
2235
|
+
|
|
2236
|
+
/**
|
|
2237
|
+
* A path moved by `(dx, dy)`: absolute commands are translated (for `A`, only the end point),
|
|
2238
|
+
* relative (lowercase) commands are left as they are, `Z` has nothing to move.
|
|
2239
|
+
*/
|
|
2240
|
+
declare function translatePath(d: string, dx: number, dy: number): string;
|
|
2241
|
+
/** Every shape moved by `(dx, dy)`. */
|
|
2242
|
+
declare const translateShapes: (shapes: readonly Shape[], dx: number, dy: number) => Shape[];
|
|
2243
|
+
|
|
662
2244
|
/** Above this many shapes animation switches itself off; the transitions would cost more than they explain. */
|
|
663
2245
|
declare const ANIMATION_LIMIT = 1500;
|
|
664
2246
|
/**
|
|
@@ -680,11 +2262,21 @@ declare function timeTicks(min: number, max: number, count?: number): number[];
|
|
|
680
2262
|
|
|
681
2263
|
declare function layoutSankey(input: SankeyInput): Canvas;
|
|
682
2264
|
|
|
2265
|
+
/**
|
|
2266
|
+
* Tiles by value, branches outlined with their children tiled inside. `rootId` shows one node's
|
|
2267
|
+
* subtree (controlled drill-down), `breadcrumbs` writes the path to it, `tiling` picks the
|
|
2268
|
+
* algorithm and `colorScale` colors leaves by value instead of by branch.
|
|
2269
|
+
*/
|
|
683
2270
|
declare function layoutTreemap(input: TreemapInput): Canvas;
|
|
684
2271
|
|
|
685
2272
|
/** Candles or OHLC bars on a time axis, with an optional volume pane, references, zoom and brush. */
|
|
686
2273
|
declare function layoutCandlestick(input: CandlestickInput): Canvas;
|
|
687
2274
|
|
|
2275
|
+
/**
|
|
2276
|
+
* Signed deltas stacked on the running total: `subtotal` and `total` rows stand on zero and show
|
|
2277
|
+
* the level reached, `start` opens the bridge at a given level, and the steps run down the y
|
|
2278
|
+
* axis when horizontal.
|
|
2279
|
+
*/
|
|
688
2280
|
declare function layoutWaterfall(input: WaterfallInput): Canvas;
|
|
689
2281
|
|
|
690
2282
|
/**
|
|
@@ -693,25 +2285,152 @@ declare function layoutWaterfall(input: WaterfallInput): Canvas;
|
|
|
693
2285
|
*/
|
|
694
2286
|
declare function layoutGantt(input: GanttInput): Canvas;
|
|
695
2287
|
|
|
2288
|
+
/**
|
|
2289
|
+
* One box per series (or per series and category when `categories` is set): raw samples
|
|
2290
|
+
* summarized with the chosen quartile method, or a given summary.
|
|
2291
|
+
*/
|
|
696
2292
|
declare function layoutBoxplot(input: BoxplotInput): Canvas;
|
|
697
2293
|
|
|
2294
|
+
/**
|
|
2295
|
+
* Nested rings, one per tree depth, children inside their parent's span. `rootId` fills the
|
|
2296
|
+
* rings with one node's subtree (controlled drill-down), `padAngle` separates siblings and
|
|
2297
|
+
* `colorScale` colors leaves by value.
|
|
2298
|
+
*/
|
|
698
2299
|
declare function layoutSunburst(input: SunburstInput): Canvas;
|
|
699
2300
|
|
|
700
2301
|
declare function layoutChord(input: ChordInput): Canvas;
|
|
701
2302
|
|
|
702
|
-
/**
|
|
2303
|
+
/**
|
|
2304
|
+
* Regions (a choropleth), a marker/bubble layer and a line layer, all under one projection
|
|
2305
|
+
* fitted to the regions' bounds (equirectangular by default, or Mercator). Region fill follows
|
|
2306
|
+
* the value through `colorScale`, by default a single color at an opacity ramp.
|
|
2307
|
+
*/
|
|
703
2308
|
declare function layoutMap(input: MapInput): Canvas;
|
|
704
2309
|
|
|
2310
|
+
/**
|
|
2311
|
+
* Two encodings in one chart: column widths follow each category's total (market size, revenue),
|
|
2312
|
+
* segment heights inside a column follow that segment's share of the column (mix, composition).
|
|
2313
|
+
* Every tooltip names both, since neither reads off the axes alone.
|
|
2314
|
+
*/
|
|
2315
|
+
declare function layoutMarimekkoChart(input: MarimekkoChartInput): Canvas;
|
|
2316
|
+
|
|
2317
|
+
/** Per-row titles and keyboard stops are emitted up to this many rows. */
|
|
2318
|
+
declare const PARALLEL_TITLE_LIMIT = 500;
|
|
2319
|
+
/**
|
|
2320
|
+
* One vertical axis per dimension, each on its own scale, and one polyline per row through its
|
|
2321
|
+
* values: model comparisons, instance types, product specs. Filters fade the rows outside them.
|
|
2322
|
+
*/
|
|
2323
|
+
declare function layoutParallelCoordinates(input: ParallelCoordinatesInput): Canvas;
|
|
2324
|
+
|
|
2325
|
+
/**
|
|
2326
|
+
* One reading on a straight scale: the bullet engine with gauge semantics (`value`, `min`,
|
|
2327
|
+
* `max`, `bands`, `target`). Reads in a KPI card where an arc would not fit.
|
|
2328
|
+
*/
|
|
2329
|
+
declare function layoutLinearGauge(input: LinearGaugeInput): Canvas;
|
|
2330
|
+
|
|
2331
|
+
/**
|
|
2332
|
+
* A category with a start and an end value joined by a connector: before/after, plan/actual,
|
|
2333
|
+
* previous/current. Horizontal by default (categories down y), vertical on request.
|
|
2334
|
+
*/
|
|
2335
|
+
declare function layoutDumbbellChart(input: DumbbellChartInput): Canvas;
|
|
2336
|
+
|
|
2337
|
+
/**
|
|
2338
|
+
* Categories sorted by value with the cumulative share as a line on the right axis, so the
|
|
2339
|
+
* "vital few" causes stand out. Reuses the cartesian engine: bars on the left axis, the
|
|
2340
|
+
* cumulative line on a 0–100% right axis, an optional threshold reference (e.g. 80%).
|
|
2341
|
+
*/
|
|
2342
|
+
declare function layoutParetoChart(input: ParetoChartInput): Canvas;
|
|
2343
|
+
|
|
2344
|
+
/**
|
|
2345
|
+
* A node-link tree: leaves get evenly spaced slots in post-order and every parent sits over the
|
|
2346
|
+
* middle of its children; depth runs down (or right). A tidy Reingold–Tilford layout is not
|
|
2347
|
+
* needed for the dashboard-sized trees this draws.
|
|
2348
|
+
*/
|
|
2349
|
+
declare function layoutTreeChart(input: TreeChartInput): Canvas;
|
|
2350
|
+
/** An organization chart: the tree with boxes and elbow links. */
|
|
2351
|
+
declare const layoutOrganizationChart: (input: OrganizationChartInput) => Canvas;
|
|
2352
|
+
|
|
2353
|
+
interface Circle {
|
|
2354
|
+
x: number;
|
|
2355
|
+
y: number;
|
|
2356
|
+
r: number;
|
|
2357
|
+
}
|
|
2358
|
+
/**
|
|
2359
|
+
* Packs circles of the given radii (largest first) around the origin: each next circle walks a
|
|
2360
|
+
* spiral outward until it overlaps none of the placed ones, so the result is deterministic and
|
|
2361
|
+
* compact enough for dashboards. Returns the circles and the enclosing radius.
|
|
2362
|
+
* ponytail: O(n²) per sibling set; a front-chain packer if a node ever has thousands of children.
|
|
2363
|
+
*/
|
|
2364
|
+
declare function packCircles(radii: number[], padding: number): {
|
|
2365
|
+
circles: Circle[];
|
|
2366
|
+
enclosing: number;
|
|
2367
|
+
};
|
|
2368
|
+
/** Nested circles sized by value: children packed inside their parent, leaves filled. */
|
|
2369
|
+
declare function layoutCirclePacking(input: CirclePackingInput): Canvas;
|
|
2370
|
+
|
|
2371
|
+
/**
|
|
2372
|
+
* A rectangular sunburst (partition): one row per depth (or one column when horizontal), each
|
|
2373
|
+
* node a cell whose extent is its share of the parent's, children stacked under their parent.
|
|
2374
|
+
*/
|
|
2375
|
+
declare function layoutIcicle(input: IcicleInput): Canvas;
|
|
2376
|
+
|
|
2377
|
+
/**
|
|
2378
|
+
* Ranks over categories: one line per series with rank 1 at the top. Ranks are computed per
|
|
2379
|
+
* category from the values (largest first, ties in series order) unless the data already are
|
|
2380
|
+
* ranks. A rank beyond `topRank`, or a gap, breaks the line.
|
|
2381
|
+
*/
|
|
2382
|
+
declare function layoutBumpChart(input: BumpChartInput): Canvas;
|
|
2383
|
+
|
|
2384
|
+
/**
|
|
2385
|
+
* A Nightingale rose: every datum gets the same angle and its radius follows the value, by
|
|
2386
|
+
* default through a square root so that sector area, not radius, is proportional to it.
|
|
2387
|
+
*/
|
|
2388
|
+
declare function layoutPolarAreaChart(input: PolarAreaChartInput): Canvas;
|
|
2389
|
+
|
|
2390
|
+
/** Per-series dot titles and keyboard stops are emitted up to this many dots. */
|
|
2391
|
+
declare const SWARM_TITLE_LIMIT = 2000;
|
|
2392
|
+
/**
|
|
2393
|
+
* Offsets across the category band that keep dots of radius `r` from overlapping: samples come
|
|
2394
|
+
* sorted by their pixel position along the value axis; each dot takes the smallest sideways
|
|
2395
|
+
* offset (alternating sides, 1px steps) clear of every earlier dot within `2r` of it.
|
|
2396
|
+
* ponytail: O(n × offsets) per swarm; fine to a few thousand dots, a grid index beyond.
|
|
2397
|
+
*/
|
|
2398
|
+
declare function swarmOffsets(positions: readonly number[], r: number, half: number): number[];
|
|
2399
|
+
/** Every observation as a dot, one swarm per series, spread sideways so none overlap. */
|
|
2400
|
+
declare function layoutSwarmPlot(input: SwarmPlotInput): Canvas;
|
|
2401
|
+
|
|
2402
|
+
/**
|
|
2403
|
+
* Cells per datum by the largest-remainder method: floors first, then the leftover cells go to the
|
|
2404
|
+
* largest fractional parts, so the counts add up to `round(sum(quotas))` exactly.
|
|
2405
|
+
*/
|
|
2406
|
+
declare function waffleCounts(quotas: readonly number[]): number[];
|
|
2407
|
+
/** A grid of cells, each a share of the total, colored by datum; empty cells for the unaccounted rest. */
|
|
2408
|
+
declare function layoutWaffleChart(input: WaffleChartInput): Canvas;
|
|
2409
|
+
|
|
2410
|
+
/** How clicks (and, for `brush`/`lasso`, drags) change the selection. */
|
|
2411
|
+
type SelectionMode = 'none' | 'single' | 'multiple' | 'brush' | 'lasso';
|
|
705
2412
|
/**
|
|
706
2413
|
* The accessible `<svg>` root every chart renders into: marks, decorations, then the hover or
|
|
707
|
-
* keyboard tooltip. Owns focus state; reports legend toggles
|
|
2414
|
+
* keyboard tooltip. Owns focus state; reports legend toggles, zoom, view, selection, highlight
|
|
2415
|
+
* and task changes to the chart, which applies them through its models.
|
|
708
2416
|
*/
|
|
709
2417
|
declare class SkdxChartRootComponent {
|
|
710
|
-
|
|
2418
|
+
/** The chart's layout, before selection and highlight emphasis. */
|
|
2419
|
+
readonly layoutInput: _angular_core.InputSignal<Canvas>;
|
|
2420
|
+
/** The shared options, for emphasis and the accessible table. */
|
|
2421
|
+
readonly options: _angular_core.InputSignal<Sized>;
|
|
711
2422
|
readonly kind: _angular_core.InputSignal<string>;
|
|
712
2423
|
readonly label: _angular_core.InputSignal<string>;
|
|
713
|
-
/** Wheel and pinch zoom, drag pans the category axis. */
|
|
2424
|
+
/** Wheel and pinch zoom, drag pans the category axis (or the map). */
|
|
714
2425
|
readonly zoomable: _angular_core.InputSignal<boolean>;
|
|
2426
|
+
/** Clicks select marks: one, any number, a dragged rectangle or a drawn outline. */
|
|
2427
|
+
readonly selectionMode: _angular_core.InputSignal<SelectionMode>;
|
|
2428
|
+
/** Gantt bars can be dragged and resized. */
|
|
2429
|
+
readonly editable: _angular_core.InputSignal<boolean>;
|
|
2430
|
+
/** Charts sharing a `syncId` share highlight, selection, zoom, hidden series and the crosshair. */
|
|
2431
|
+
readonly syncId: _angular_core.InputSignal<string | undefined>;
|
|
2432
|
+
/** The category another chart of the group has its crosshair on. */
|
|
2433
|
+
readonly crosshair: _angular_core.InputSignal<string | null>;
|
|
715
2434
|
/** Measure the host and report its width, so the chart can lay out at that width. */
|
|
716
2435
|
readonly responsive: _angular_core.InputSignal<boolean>;
|
|
717
2436
|
/** A mark was clicked, or Enter/Space was pressed on the focused mark. */
|
|
@@ -720,6 +2439,18 @@ declare class SkdxChartRootComponent {
|
|
|
720
2439
|
readonly hiddenSeriesChange: _angular_core.OutputEmitterRef<string[]>;
|
|
721
2440
|
/** Wheel, drag, pinch or brush moved the window; the chart applies it through its `zoom` model. */
|
|
722
2441
|
readonly zoomChange: _angular_core.OutputEmitterRef<Zoom | undefined>;
|
|
2442
|
+
/** The map was panned or zoomed; the chart applies it through its `view` model. */
|
|
2443
|
+
readonly viewChange: _angular_core.OutputEmitterRef<MapView | undefined>;
|
|
2444
|
+
/** A click or brush changed the selection; the chart applies it through its `selected` model. */
|
|
2445
|
+
readonly selectedChange: _angular_core.OutputEmitterRef<ChartItemRef[]>;
|
|
2446
|
+
/** The mark under the pointer or focus changed. */
|
|
2447
|
+
readonly highlightedChange: _angular_core.OutputEmitterRef<ChartItemRef | null>;
|
|
2448
|
+
/** A data problem was found while laying out. */
|
|
2449
|
+
readonly dataIssue: _angular_core.OutputEmitterRef<ChartDataIssue>;
|
|
2450
|
+
/** A Gantt bar was dragged or resized. */
|
|
2451
|
+
readonly taskChange: _angular_core.OutputEmitterRef<TaskChange>;
|
|
2452
|
+
/** Another chart in the sync group published a change; the chart applies it through its models. */
|
|
2453
|
+
readonly syncChange: _angular_core.OutputEmitterRef<SyncState>;
|
|
723
2454
|
/** The host's measured width, under `responsive`. */
|
|
724
2455
|
readonly measured: _angular_core.OutputEmitterRef<number>;
|
|
725
2456
|
protected readonly colors: {
|
|
@@ -732,26 +2463,63 @@ declare class SkdxChartRootComponent {
|
|
|
732
2463
|
readonly fontFamily: "var(--skdx-font-family)";
|
|
733
2464
|
readonly fontSize: "var(--skdx-font-size-xs)";
|
|
734
2465
|
};
|
|
2466
|
+
protected readonly layout: _angular_core.Signal<Canvas>;
|
|
735
2467
|
protected readonly duration: _angular_core.Signal<string | null>;
|
|
2468
|
+
protected readonly table: _angular_core.Signal<string[][] | undefined>;
|
|
2469
|
+
protected readonly caption: _angular_core.Signal<string>;
|
|
736
2470
|
private readonly pointers;
|
|
737
2471
|
private readonly svg;
|
|
2472
|
+
private hover;
|
|
2473
|
+
private readonly token;
|
|
738
2474
|
constructor();
|
|
739
2475
|
protected readonly tip: _angular_core.WritableSignal<Shape[]>;
|
|
2476
|
+
protected readonly tipShapes: _angular_core.Signal<Shape[]>;
|
|
2477
|
+
private lastCross;
|
|
2478
|
+
protected readonly portal: _angular_core.WritableSignal<{
|
|
2479
|
+
x: number;
|
|
2480
|
+
y: number;
|
|
2481
|
+
lines: string[];
|
|
2482
|
+
} | null>;
|
|
740
2483
|
protected readonly focused: _angular_core.WritableSignal<number | null>;
|
|
2484
|
+
protected readonly overlay: _angular_core.WritableSignal<Shape[]>;
|
|
741
2485
|
protected readonly canZoom: _angular_core.Signal<boolean>;
|
|
2486
|
+
protected readonly canPan: _angular_core.Signal<boolean>;
|
|
2487
|
+
protected readonly canEdit: _angular_core.Signal<boolean>;
|
|
2488
|
+
protected readonly brushing: _angular_core.Signal<boolean>;
|
|
2489
|
+
protected readonly active: _angular_core.Signal<boolean>;
|
|
742
2490
|
protected readonly focusable: _angular_core.Signal<boolean>;
|
|
743
2491
|
protected readonly descId: _angular_core.Signal<string | null>;
|
|
744
2492
|
protected readonly focusShapes: _angular_core.Signal<Shape[]>;
|
|
745
2493
|
private drag;
|
|
2494
|
+
/** The rendered `<svg>`. */
|
|
2495
|
+
getSvgElement(): SVGSVGElement;
|
|
2496
|
+
/** The current layout: shapes, size, hit model. */
|
|
2497
|
+
getLayout(): Canvas;
|
|
2498
|
+
/** Moves keyboard focus to the first mark matching the ref; `false` when none matches. */
|
|
2499
|
+
focusItem(ref: ChartItemRef): boolean;
|
|
2500
|
+
/** SVG markup, a PNG blob, or CSV, through the core's `exportChart`. */
|
|
2501
|
+
export(options: Omit<ChartExportOptions, 'label'> & {
|
|
2502
|
+
label?: string;
|
|
2503
|
+
}): Promise<string | Blob>;
|
|
746
2504
|
private viewBox;
|
|
2505
|
+
private publish;
|
|
2506
|
+
private setZoom;
|
|
2507
|
+
private setSelected;
|
|
2508
|
+
private highlight;
|
|
2509
|
+
private select;
|
|
2510
|
+
private shareCrosshair;
|
|
2511
|
+
private clearTip;
|
|
747
2512
|
protected onPointerMove(e: PointerEvent): void;
|
|
2513
|
+
protected onPointerLeave(): void;
|
|
2514
|
+
protected onBlur(): void;
|
|
2515
|
+
protected onDoubleClick(): void;
|
|
748
2516
|
protected onPointerDown(e: PointerEvent): void;
|
|
749
2517
|
protected onPointerUp(e: PointerEvent): void;
|
|
750
2518
|
protected onWheel(e: WheelEvent): void;
|
|
751
2519
|
protected onClick(e: MouseEvent): void;
|
|
752
2520
|
protected onKeyDown(e: KeyboardEvent): void;
|
|
753
2521
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkdxChartRootComponent, never>;
|
|
754
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkdxChartRootComponent, "skdx-chart-root", never, { "
|
|
2522
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkdxChartRootComponent, "skdx-chart-root", never, { "layoutInput": { "alias": "layout"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "kind": { "alias": "kind"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "syncId": { "alias": "syncId"; "required": false; "isSignal": true; }; "crosshair": { "alias": "crosshair"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "hiddenSeriesChange": "hiddenSeriesChange"; "zoomChange": "zoomChange"; "viewChange": "viewChange"; "selectedChange": "selectedChange"; "highlightedChange": "highlightedChange"; "dataIssue": "dataIssue"; "taskChange": "taskChange"; "syncChange": "syncChange"; "measured": "measured"; }, never, never, true, never>;
|
|
755
2523
|
}
|
|
756
2524
|
/** Size, state, formatting, accessibility and interaction inputs every chart takes. */
|
|
757
2525
|
declare abstract class SkdxSizedBase {
|
|
@@ -759,16 +2527,23 @@ declare abstract class SkdxSizedBase {
|
|
|
759
2527
|
readonly height: _angular_core.InputSignal<number | undefined>;
|
|
760
2528
|
/** Accessible name of the chart; defaults to "<Kind> chart". */
|
|
761
2529
|
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
762
|
-
/** Draw a legend row above the plot. */
|
|
763
|
-
readonly legend: _angular_core.InputSignal<boolean>;
|
|
764
|
-
/** Show a hover tooltip for the mark under the pointer. */
|
|
765
|
-
readonly tooltip: _angular_core.InputSignal<boolean>;
|
|
2530
|
+
/** Draw a legend row above the plot; an object sets position, interactivity and item limit. */
|
|
2531
|
+
readonly legend: _angular_core.InputSignal<boolean | LegendOptions>;
|
|
2532
|
+
/** Show a hover tooltip for the mark under the pointer; an object configures it. */
|
|
2533
|
+
readonly tooltip: _angular_core.InputSignal<boolean | TooltipOptions>;
|
|
766
2534
|
/** How values are written: a function or an `Intl` style such as `{ style: 'currency', currency: 'EUR' }`. */
|
|
767
2535
|
readonly format: _angular_core.InputSignal<Format | undefined>;
|
|
768
2536
|
/** Categorical series colors, cycled by series index. */
|
|
769
2537
|
readonly palette: _angular_core.InputSignal<string[] | undefined>;
|
|
770
2538
|
/** Series left out of the plot; two-way bindable, the legend toggles it. */
|
|
771
2539
|
readonly hiddenSeries: _angular_core.ModelSignal<string[] | undefined>;
|
|
2540
|
+
/** Selected items; two-way bindable, clicks update it under `selectionMode`. */
|
|
2541
|
+
readonly selected: _angular_core.ModelSignal<Selection | undefined>;
|
|
2542
|
+
/** Clicks select marks: one, any number, a dragged rectangle or a drawn outline. */
|
|
2543
|
+
readonly selectionMode: _angular_core.InputSignal<SelectionMode>;
|
|
2544
|
+
/** The item(s) under emphasis; two-way bindable, hover and focus update it. */
|
|
2545
|
+
readonly highlighted: _angular_core.ModelSignal<_skdx_angular_charts_internal.ChartItemId | ChartItemRef | (_skdx_angular_charts_internal.ChartItemId | ChartItemRef)[] | null | undefined>;
|
|
2546
|
+
readonly highlightScope: _angular_core.InputSignal<HighlightScope | undefined>;
|
|
772
2547
|
/** Draw a loading placeholder instead of the chart. */
|
|
773
2548
|
readonly loading: _angular_core.InputSignal<boolean>;
|
|
774
2549
|
/** Draw this message instead of the chart. */
|
|
@@ -779,39 +2554,101 @@ declare abstract class SkdxSizedBase {
|
|
|
779
2554
|
readonly description: _angular_core.InputSignal<string | undefined>;
|
|
780
2555
|
/** Hide the chart from assistive technology. */
|
|
781
2556
|
readonly decorative: _angular_core.InputSignal<boolean>;
|
|
2557
|
+
/** Render a visually hidden data table next to the svg. */
|
|
2558
|
+
readonly accessibleTable: _angular_core.InputSignal<boolean | AccessibleTableOptions>;
|
|
782
2559
|
/** Fade marks in and transition them on change; `true` is 300 ms, a number sets the duration. */
|
|
783
2560
|
readonly animate: _angular_core.InputSignal<number | boolean>;
|
|
784
|
-
/** Lay the chart out at the host's width, so text keeps its size. */
|
|
785
|
-
readonly responsive: _angular_core.InputSignal<boolean>;
|
|
2561
|
+
/** Lay the chart out at the host's width, so text keeps its size; an object adds `compact` overrides. */
|
|
2562
|
+
readonly responsive: _angular_core.InputSignal<boolean | ResponsiveOptions>;
|
|
786
2563
|
/** The width the root measured under `responsive`. */
|
|
787
2564
|
protected readonly measuredWidth: _angular_core.WritableSignal<number | undefined>;
|
|
788
2565
|
/** Visible category window; two-way bindable, wheel, drag, pinch and brush update it. */
|
|
789
2566
|
readonly zoom: _angular_core.ModelSignal<Zoom | undefined>;
|
|
790
|
-
/**
|
|
2567
|
+
/** The map's pan/zoom state; two-way bindable, wheel and drag update it. */
|
|
2568
|
+
readonly view: _angular_core.ModelSignal<MapView | undefined>;
|
|
2569
|
+
/** Wheel zooms and drag pans the category axis (or the map). */
|
|
791
2570
|
readonly zoomable: _angular_core.InputSignal<boolean>;
|
|
2571
|
+
/** Gantt bars can be dragged and resized; listen to `(taskChange)`. */
|
|
2572
|
+
readonly editable: _angular_core.InputSignal<boolean>;
|
|
2573
|
+
/** Charts sharing a `syncId` share highlight, selection, zoom, hidden series and the crosshair. */
|
|
2574
|
+
readonly syncId: _angular_core.InputSignal<string | undefined>;
|
|
2575
|
+
/** With `syncId`: a selection made in another chart of the group fades everything else here. */
|
|
2576
|
+
readonly crossFilter: _angular_core.InputSignal<boolean>;
|
|
2577
|
+
/** The category another chart of the group has its crosshair on. */
|
|
2578
|
+
protected readonly syncedCrosshair: _angular_core.WritableSignal<string | null>;
|
|
792
2579
|
/** A mark was clicked, or Enter/Space was pressed on the focused mark. */
|
|
793
2580
|
readonly itemClick: _angular_core.OutputEmitterRef<ChartItem>;
|
|
2581
|
+
/** A data problem was found while laying out. */
|
|
2582
|
+
readonly dataIssue: _angular_core.OutputEmitterRef<ChartDataIssue>;
|
|
2583
|
+
/** A Gantt bar was dragged or resized. */
|
|
2584
|
+
readonly taskChange: _angular_core.OutputEmitterRef<TaskChange>;
|
|
2585
|
+
/** The root component, for the imperative surface. */
|
|
2586
|
+
protected readonly chartRoot: _angular_core.Signal<SkdxChartRootComponent | undefined>;
|
|
2587
|
+
/** Highlight received from the sync group, used while `highlighted` is not set. */
|
|
2588
|
+
protected readonly syncedHighlight: _angular_core.WritableSignal<_skdx_angular_charts_internal.ChartItemId | ChartItemRef | (_skdx_angular_charts_internal.ChartItemId | ChartItemRef)[] | null | undefined>;
|
|
2589
|
+
/** The shared options as one memoized object, so the root's input only changes when they do. */
|
|
2590
|
+
protected readonly options: _angular_core.Signal<{
|
|
2591
|
+
width: number | undefined;
|
|
2592
|
+
height: number | undefined;
|
|
2593
|
+
animate: number | boolean;
|
|
2594
|
+
responsive: boolean | ResponsiveOptions;
|
|
2595
|
+
legend: boolean | LegendOptions;
|
|
2596
|
+
tooltip: boolean | TooltipOptions;
|
|
2597
|
+
format: Format | undefined;
|
|
2598
|
+
palette: string[] | undefined;
|
|
2599
|
+
hiddenSeries: string[] | undefined;
|
|
2600
|
+
selected: Selection | undefined;
|
|
2601
|
+
highlighted: _skdx_angular_charts_internal.ChartItemId | ChartItemRef | (_skdx_angular_charts_internal.ChartItemId | ChartItemRef)[] | null | undefined;
|
|
2602
|
+
highlightScope: HighlightScope | undefined;
|
|
2603
|
+
loading: boolean;
|
|
2604
|
+
error: string | undefined;
|
|
2605
|
+
emptyMessage: string | undefined;
|
|
2606
|
+
description: string | undefined;
|
|
2607
|
+
decorative: boolean;
|
|
2608
|
+
accessibleTable: boolean | AccessibleTableOptions;
|
|
2609
|
+
zoom: Zoom | undefined;
|
|
2610
|
+
view: MapView | undefined;
|
|
2611
|
+
}>;
|
|
2612
|
+
/** The rendered `<svg>`, or `null` before the first render. */
|
|
2613
|
+
getSvgElement(): SVGSVGElement | null;
|
|
2614
|
+
/** The current layout: shapes, size, hit model. */
|
|
2615
|
+
getLayout(): Canvas | undefined;
|
|
2616
|
+
resetZoom(): void;
|
|
2617
|
+
zoomTo(zoom: Zoom): void;
|
|
2618
|
+
/** Moves keyboard focus to the first mark matching the ref; `false` when none matches. */
|
|
2619
|
+
focusItem(ref: ChartItemRef): boolean;
|
|
2620
|
+
/** SVG markup, a PNG blob, or CSV, through the core's `exportChart`. */
|
|
2621
|
+
export(options: Omit<ChartExportOptions, 'label'> & {
|
|
2622
|
+
label?: string;
|
|
2623
|
+
}): Promise<string | Blob>;
|
|
794
2624
|
/** Applies a legend toggle reported by the root. */
|
|
795
2625
|
protected toggle([name]: string[]): void;
|
|
2626
|
+
/** Applies what another chart in the sync group published. */
|
|
2627
|
+
protected sync(state: SyncState): void;
|
|
796
2628
|
protected sized(): {
|
|
797
2629
|
width: number | undefined;
|
|
798
2630
|
height: number | undefined;
|
|
799
2631
|
animate: number | boolean;
|
|
800
|
-
responsive: boolean;
|
|
801
|
-
legend: boolean;
|
|
802
|
-
tooltip: boolean;
|
|
2632
|
+
responsive: boolean | ResponsiveOptions;
|
|
2633
|
+
legend: boolean | LegendOptions;
|
|
2634
|
+
tooltip: boolean | TooltipOptions;
|
|
803
2635
|
format: Format | undefined;
|
|
804
2636
|
palette: string[] | undefined;
|
|
805
2637
|
hiddenSeries: string[] | undefined;
|
|
2638
|
+
selected: Selection | undefined;
|
|
2639
|
+
highlighted: _skdx_angular_charts_internal.ChartItemId | ChartItemRef | (_skdx_angular_charts_internal.ChartItemId | ChartItemRef)[] | null | undefined;
|
|
2640
|
+
highlightScope: HighlightScope | undefined;
|
|
806
2641
|
loading: boolean;
|
|
807
2642
|
error: string | undefined;
|
|
808
2643
|
emptyMessage: string | undefined;
|
|
809
2644
|
description: string | undefined;
|
|
810
2645
|
decorative: boolean;
|
|
2646
|
+
accessibleTable: boolean | AccessibleTableOptions;
|
|
811
2647
|
zoom: Zoom | undefined;
|
|
2648
|
+
view: MapView | undefined;
|
|
812
2649
|
};
|
|
813
2650
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkdxSizedBase, never>;
|
|
814
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SkdxSizedBase, never, never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "hiddenSeries": { "alias": "hiddenSeries"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; }, { "hiddenSeries": "hiddenSeriesChange"; "zoom": "zoomChange"; "itemClick": "itemClick"; }, never, never, true, never>;
|
|
2651
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SkdxSizedBase, never, never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "hiddenSeries": { "alias": "hiddenSeries"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "highlighted": { "alias": "highlighted"; "required": false; "isSignal": true; }; "highlightScope": { "alias": "highlightScope"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "accessibleTable": { "alias": "accessibleTable"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; "zoomable": { "alias": "zoomable"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "syncId": { "alias": "syncId"; "required": false; "isSignal": true; }; "crossFilter": { "alias": "crossFilter"; "required": false; "isSignal": true; }; }, { "hiddenSeries": "hiddenSeriesChange"; "selected": "selectedChange"; "highlighted": "highlightedChange"; "zoom": "zoomChange"; "view": "viewChange"; "itemClick": "itemClick"; "dataIssue": "dataIssue"; "taskChange": "taskChange"; }, never, never, true, never>;
|
|
815
2652
|
}
|
|
816
2653
|
/** Inputs the cartesian charts (bar, line, area) take. */
|
|
817
2654
|
declare abstract class SkdxChartBase extends SkdxSizedBase {
|
|
@@ -824,21 +2661,35 @@ declare abstract class SkdxChartBase extends SkdxSizedBase {
|
|
|
824
2661
|
readonly rightAxis: _angular_core.InputSignal<AxisOptions | undefined>;
|
|
825
2662
|
/** Lines and bands in data coordinates: targets, SLAs, forecast periods. */
|
|
826
2663
|
readonly references: _angular_core.InputSignal<Reference[] | undefined>;
|
|
2664
|
+
/** Points, callouts, text and rectangles in data coordinates. */
|
|
2665
|
+
readonly annotations: _angular_core.InputSignal<Annotation[] | undefined>;
|
|
827
2666
|
/** Write each value next to its mark. */
|
|
828
2667
|
readonly labels: _angular_core.InputSignal<boolean>;
|
|
829
2668
|
readonly curve: _angular_core.InputSignal<Curve | undefined>;
|
|
830
2669
|
readonly connectNulls: _angular_core.InputSignal<boolean>;
|
|
2670
|
+
/** What a null does to a line: a gap, a bridge, or a zero. */
|
|
2671
|
+
readonly nulls: _angular_core.InputSignal<"gap" | "connect" | "zero" | undefined>;
|
|
831
2672
|
/** Stack the series; `'percent'` normalizes each category to 100%. */
|
|
832
2673
|
readonly stacked: _angular_core.InputSignal<boolean | "percent">;
|
|
2674
|
+
/** Where stacks stand: zero, expand (100%), silhouette or wiggle (streamgraph). */
|
|
2675
|
+
readonly stackOffset: _angular_core.InputSignal<"zero" | "expand" | "silhouette" | "wiggle" | undefined>;
|
|
833
2676
|
readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal" | undefined>;
|
|
834
2677
|
/** Corner radius of bars. */
|
|
835
2678
|
readonly radius: _angular_core.InputSignal<number | undefined>;
|
|
2679
|
+
/** Share of each category slot left empty around its bars, 0–0.9. */
|
|
2680
|
+
readonly barGap: _angular_core.InputSignal<number | undefined>;
|
|
2681
|
+
/** Largest bar thickness in pixels. */
|
|
2682
|
+
readonly barWidth: _angular_core.InputSignal<number | undefined>;
|
|
836
2683
|
readonly sort: _angular_core.InputSignal<"asc" | "desc" | undefined>;
|
|
837
|
-
readonly transform: _angular_core.InputSignal<"
|
|
2684
|
+
readonly transform: _angular_core.InputSignal<"cumulative" | "histogram" | undefined>;
|
|
2685
|
+
/** Transforms applied to every series, in order. */
|
|
2686
|
+
readonly transforms: _angular_core.InputSignal<SeriesTransform[] | undefined>;
|
|
838
2687
|
readonly bins: _angular_core.InputSignal<number | undefined>;
|
|
839
2688
|
readonly binWidth: _angular_core.InputSignal<number | undefined>;
|
|
840
2689
|
readonly binDomain: _angular_core.InputSignal<[number, number] | undefined>;
|
|
841
2690
|
readonly binMode: _angular_core.InputSignal<"cumulative" | "count" | "density" | undefined>;
|
|
2691
|
+
/** Point reduction for dense series. */
|
|
2692
|
+
readonly sampling: _angular_core.InputSignal<Sampling | undefined>;
|
|
842
2693
|
/** Draw a range strip under the plot showing the whole series and the zoomed window. */
|
|
843
2694
|
readonly brush: _angular_core.InputSignal<boolean>;
|
|
844
2695
|
/** Snap the hover tooltip to the nearest category and list every series. */
|
|
@@ -850,38 +2701,50 @@ declare abstract class SkdxChartBase extends SkdxSizedBase {
|
|
|
850
2701
|
yAxis: AxisOptions | undefined;
|
|
851
2702
|
rightAxis: AxisOptions | undefined;
|
|
852
2703
|
references: Reference[] | undefined;
|
|
2704
|
+
annotations: Annotation[] | undefined;
|
|
853
2705
|
labels: boolean;
|
|
854
2706
|
curve: Curve | undefined;
|
|
855
2707
|
connectNulls: boolean;
|
|
2708
|
+
nulls: "gap" | "connect" | "zero" | undefined;
|
|
856
2709
|
stacked: boolean | "percent";
|
|
2710
|
+
stackOffset: "zero" | "expand" | "silhouette" | "wiggle" | undefined;
|
|
857
2711
|
orientation: "vertical" | "horizontal" | undefined;
|
|
858
2712
|
radius: number | undefined;
|
|
2713
|
+
barGap: number | undefined;
|
|
2714
|
+
barWidth: number | undefined;
|
|
859
2715
|
sort: "asc" | "desc" | undefined;
|
|
860
|
-
transform: "
|
|
2716
|
+
transform: "cumulative" | "histogram" | undefined;
|
|
2717
|
+
transforms: SeriesTransform[] | undefined;
|
|
861
2718
|
bins: number | undefined;
|
|
862
2719
|
binWidth: number | undefined;
|
|
863
2720
|
binDomain: [number, number] | undefined;
|
|
864
2721
|
binMode: "cumulative" | "count" | "density" | undefined;
|
|
2722
|
+
sampling: Sampling | undefined;
|
|
865
2723
|
brush: boolean;
|
|
866
2724
|
crosshair: boolean;
|
|
867
2725
|
width: number | undefined;
|
|
868
2726
|
height: number | undefined;
|
|
869
2727
|
animate: number | boolean;
|
|
870
|
-
responsive: boolean;
|
|
871
|
-
legend: boolean;
|
|
872
|
-
tooltip: boolean;
|
|
2728
|
+
responsive: boolean | ResponsiveOptions;
|
|
2729
|
+
legend: boolean | LegendOptions;
|
|
2730
|
+
tooltip: boolean | TooltipOptions;
|
|
873
2731
|
format: Format | undefined;
|
|
874
2732
|
palette: string[] | undefined;
|
|
875
2733
|
hiddenSeries: string[] | undefined;
|
|
2734
|
+
selected: Selection | undefined;
|
|
2735
|
+
highlighted: _skdx_angular_charts_internal.ChartItemId | ChartItemRef | (_skdx_angular_charts_internal.ChartItemId | ChartItemRef)[] | null | undefined;
|
|
2736
|
+
highlightScope: HighlightScope | undefined;
|
|
876
2737
|
loading: boolean;
|
|
877
2738
|
error: string | undefined;
|
|
878
2739
|
emptyMessage: string | undefined;
|
|
879
2740
|
description: string | undefined;
|
|
880
2741
|
decorative: boolean;
|
|
2742
|
+
accessibleTable: boolean | AccessibleTableOptions;
|
|
881
2743
|
zoom: Zoom | undefined;
|
|
2744
|
+
view: MapView | undefined;
|
|
882
2745
|
};
|
|
883
2746
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkdxChartBase, never>;
|
|
884
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SkdxChartBase, never, never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "xAxis": { "alias": "xAxis"; "required": false; "isSignal": true; }; "yAxis": { "alias": "yAxis"; "required": false; "isSignal": true; }; "rightAxis": { "alias": "rightAxis"; "required": false; "isSignal": true; }; "references": { "alias": "references"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "bins": { "alias": "bins"; "required": false; "isSignal": true; }; "binWidth": { "alias": "binWidth"; "required": false; "isSignal": true; }; "binDomain": { "alias": "binDomain"; "required": false; "isSignal": true; }; "binMode": { "alias": "binMode"; "required": false; "isSignal": true; }; "brush": { "alias": "brush"; "required": false; "isSignal": true; }; "crosshair": { "alias": "crosshair"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2747
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SkdxChartBase, never, never, { "series": { "alias": "series"; "required": true; "isSignal": true; }; "categories": { "alias": "categories"; "required": false; "isSignal": true; }; "xAxis": { "alias": "xAxis"; "required": false; "isSignal": true; }; "yAxis": { "alias": "yAxis"; "required": false; "isSignal": true; }; "rightAxis": { "alias": "rightAxis"; "required": false; "isSignal": true; }; "references": { "alias": "references"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "connectNulls": { "alias": "connectNulls"; "required": false; "isSignal": true; }; "nulls": { "alias": "nulls"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "stackOffset": { "alias": "stackOffset"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "barGap": { "alias": "barGap"; "required": false; "isSignal": true; }; "barWidth": { "alias": "barWidth"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "transform": { "alias": "transform"; "required": false; "isSignal": true; }; "transforms": { "alias": "transforms"; "required": false; "isSignal": true; }; "bins": { "alias": "bins"; "required": false; "isSignal": true; }; "binWidth": { "alias": "binWidth"; "required": false; "isSignal": true; }; "binDomain": { "alias": "binDomain"; "required": false; "isSignal": true; }; "binMode": { "alias": "binMode"; "required": false; "isSignal": true; }; "sampling": { "alias": "sampling"; "required": false; "isSignal": true; }; "brush": { "alias": "brush"; "required": false; "isSignal": true; }; "crosshair": { "alias": "crosshair"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
885
2748
|
}
|
|
886
2749
|
|
|
887
2750
|
/** Draws a core shape list back to front; marks with an `item` carry their index for hit-testing. */
|
|
@@ -891,5 +2754,5 @@ declare class SkdxChartShapesComponent {
|
|
|
891
2754
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkdxChartShapesComponent, "g[skdxChartShapes]", never, { "shapes": { "alias": "shapes"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
892
2755
|
}
|
|
893
2756
|
|
|
894
|
-
export { ANIMATION_CSS, ANIMATION_LIMIT, CHART_COLORS, MARKER_LIMIT, SERIES_COLORS, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, TITLE_LIMIT, anchorOf, animationDuration, brushDrag, brushGrab, categoryLabel, crosshairShapes, csv, focusShapes, focusTargets, formatValue, hoverTooltip, isUnzoomed, itemAt, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutCandlestick, layoutCartesian, layoutChord, layoutFunnelChart, layoutGantt, layoutHeatmap, layoutLineChart, layoutMap, layoutPieChart, layoutRadarChart, layoutRadialBar, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutTreemap, layoutWaterfall, makeFormatter, nextFocus, pointerShapes, seriesCsv, shapeMarkup, stateCanvas, svgMarkup, svgToPng, timeTicks, toViewBox, tooltipShapes, variantColor, zoomPan, zoomPinch, zoomWheel };
|
|
895
|
-
export type { AreaChartInput, AxisOptions, BarChartInput, Box, BoxplotInput, BrushGrab, CalendarCell, Candle, CandlestickInput, Canvas, CartesianSeries, Category, ChartInput, ChartItem, ChordInput, Curve, Datum, Format, Frame, FunnelChartInput, GanttInput, GanttTask, GeoMultiPolygon, GeoPolygon, HeatmapInput, Hit, LegendItem, LineChartInput, MapFeature, MapInput, PieChartInput, RadarChartInput, RadialBand, RadialBarInput, RangeSeries, Reference, SankeyInput, SankeyLink, ScatterChartInput, ScatterSeries, Series, Shape, Sized, SparklineInput, SunburstInput, Tick, TreeNode, TreemapInput, Value, Variant, WaterfallInput, XAxisOptions, Zoom };
|
|
2757
|
+
export { ANIMATION_CSS, ANIMATION_LIMIT, CHART_COLORS, MARKER_LIMIT, NETWORK_LABEL_LIMIT, PARALLEL_TITLE_LIMIT, SAMPLING_THRESHOLD, SERIES_COLORS, SWARM_TITLE_LIMIT, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, TABLE_LIMIT, TITLE_LIMIT, aggregate, anchorOf, animationDuration, annotationShapes, applyTransforms, binCounts, binEdges, binSamples, boxFrom, brushBoxShape, brushDrag, brushGrab, categoryLabel, colorLegendShapes, crosshairAt, crosshairLine, crosshairRows, crosshairShapes, csv, cumulative, cutDepth, defsMarkup, depthOf, difference, drill, emphasize, exponentialMovingAverage, exportChart, filter, findPath, focusShapes, focusTargets, formatValue, ganttDrag, ganttGhost, ganttGrab, ganttKey, hoverTooltip, hoveredRef, insidePolygon, isSelected, isUnzoomed, itemAt, itemId, itemsInBox, itemsInPolygon, lassoShape, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutBubbleChart, layoutBulletChart, layoutBumpChart, layoutCandlestick, layoutCartesian, layoutChord, layoutCirclePacking, layoutComboChart, layoutDumbbellChart, layoutFunnelChart, layoutGantt, layoutGaugeChart, layoutHeatmap, layoutHistogram, layoutIcicle, layoutLineChart, layoutLinearGauge, layoutMap, layoutMarimekkoChart, layoutNetworkChart, layoutOrganizationChart, layoutParallelCoordinates, layoutParetoChart, layoutPieChart, layoutPolarAreaChart, layoutRadarChart, layoutRadialBar, layoutRangeChart, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutSwarmPlot, layoutTimelineChart, layoutTreeChart, layoutTreemap, layoutWaffleChart, layoutWaterfall, legendOptions, lttb, m4, makeColorScale, makeFormatter, mapPan, mapWheel, matchesItem, minMaxSample, mixStops, movingAverage, nextFocus, nodeId, nodeValue, normalize, packCircles, parseColor, percentageChange, placeLegend, pointerShapes, pointerTooltipText, rank, refOf, referenceShapes, sameRef, sampleIndexes, samplingOptions, selectedIds, seriesCsv, shapeMarkup, sortChildren, sortValues, stateCanvas, svgMarkup, svgToPng, swarmOffsets, syncGroup, tableRows, timeTicks, toRefs, toViewBox, toggleSelection, tooltipOptions, tooltipShapes, translatePath, translateShapes, variantColor, waffleCounts, zoomPan, zoomPinch, zoomWheel };
|
|
2758
|
+
export type { AccessibleTableOptions, Annotation, AreaChartInput, AxisOptions, Band, BarChartInput, Bin, BinOptions, Box, BoxSummary, BoxplotInput, BoxplotSeries, BrushGrab, BubbleChartInput, BubblePoint, BubbleSeries, BulletChartInput, BulletDatum, BumpChartInput, CalendarCell, Candle, CandlestickInput, CandlestickOverlay, Canvas, CartesianSeries, Category, ChartDataIssue, ChartExportOptions, ChartInput, ChartItem, ChartItemId, ChartItemRef, ChordInput, ChordLink, CirclePackingInput, ColorLegendOptions, ColorScale, ComboChartInput, ComboSeries, Curve, Datum, DumbbellChartInput, DumbbellDatum, EditModel, ErrorValue, Format, Frame, FunnelChartInput, GanttGrab, GanttInput, GanttTask, GaugeChartInput, GeoLineString, GeoMultiLineString, GeoMultiPoint, GeoMultiPolygon, GeoPoint, GeoPolygon, GradientDef, GroupedBoxSeries, HeatmapInput, HighlightScope, HistogramInput, Hit, IcicleInput, Identified, LegendItem, LegendOptions, LineChartInput, LinearGaugeInput, MapFeature, MapInput, MapLine, MapModel, MapPoint, MapView, MarimekkoCategory, MarimekkoChartInput, MarkerSymbol, NetworkChartInput, NetworkEdge, NetworkNode, OrganizationChartInput, ParallelCoordinatesInput, ParallelDimension, ParallelRow, ParetoChartInput, PieChartInput, PolarAreaChartInput, RadarChartInput, RadarMetric, RadialBand, RadialBarInput, RangeChartInput, RangeChartSeries, RangeSeries, Reference, ResolvedColorScale, ResponsiveOptions, Sampling, SankeyInput, SankeyLink, SankeyNode, ScatterChartInput, ScatterPoint, ScatterSeries, Selection, SelectionMode, Series, SeriesTransform, Shape, Sized, SparklineInput, SunburstInput, SwarmPlotInput, SyncGroup, SyncListener, SyncState, TaskChange, Tick, TimelineChartInput, TimelineEvent, TooltipOptions, TreeChartInput, TreeNode, TreemapInput, Value, Variant, WaffleChartInput, WaterfallDatum, WaterfallInput, XAxisOptions, Zoom };
|