@acronis-platform/ui-react 0.60.0 → 0.61.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 +5 -5
- package/dist/components/ui/app-shell/app-shell.js.map +1 -1
- package/dist/components/ui/area-chart/area-chart.js +209 -146
- package/dist/components/ui/area-chart/area-chart.js.map +1 -1
- package/dist/components/ui/avatar/avatar.js +26 -23
- package/dist/components/ui/avatar/avatar.js.map +1 -1
- package/dist/components/ui/bar-chart/bar-chart.js +595 -180
- package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
- package/dist/components/ui/category-bar/category-bar.js +98 -77
- package/dist/components/ui/category-bar/category-bar.js.map +1 -1
- package/dist/components/ui/chart/chart-format.js +144 -14
- package/dist/components/ui/chart/chart-format.js.map +1 -1
- package/dist/components/ui/chart/chart.js +204 -150
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/composed-chart/composed-chart.js +422 -125
- package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
- package/dist/components/ui/confidence-cone/confidence-cone.js +308 -202
- package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
- package/dist/components/ui/funnel-chart/funnel-chart.js +245 -51
- package/dist/components/ui/funnel-chart/funnel-chart.js.map +1 -1
- package/dist/components/ui/histogram/histogram.js +85 -81
- package/dist/components/ui/histogram/histogram.js.map +1 -1
- package/dist/components/ui/line-chart/line-chart.js +227 -184
- package/dist/components/ui/line-chart/line-chart.js.map +1 -1
- package/dist/components/ui/metric/metric.js +88 -70
- package/dist/components/ui/metric/metric.js.map +1 -1
- package/dist/components/ui/pie-chart/pie-chart.js +234 -80
- package/dist/components/ui/pie-chart/pie-chart.js.map +1 -1
- package/dist/components/ui/radar-chart/radar-chart.js +210 -57
- package/dist/components/ui/radar-chart/radar-chart.js.map +1 -1
- package/dist/components/ui/radial-bar-chart/radial-bar-chart.js +358 -50
- package/dist/components/ui/radial-bar-chart/radial-bar-chart.js.map +1 -1
- package/dist/components/ui/sankey-chart/sankey-chart.js +25 -18
- package/dist/components/ui/sankey-chart/sankey-chart.js.map +1 -1
- package/dist/components/ui/scatter-chart/scatter-chart.js +86 -78
- package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
- package/dist/components/ui/timeline/timeline.js +206 -142
- package/dist/components/ui/timeline/timeline.js.map +1 -1
- package/dist/components/ui/treemap/treemap.js +183 -59
- package/dist/components/ui/treemap/treemap.js.map +1 -1
- package/dist/index.js +441 -421
- package/dist/index.js.map +1 -1
- package/dist/react.js +441 -421
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/area-chart/area-chart.d.ts +53 -3
- package/dist/src/components/ui/area-chart/index.d.ts +1 -1
- package/dist/src/components/ui/avatar/avatar.d.ts +1 -1
- package/dist/src/components/ui/bar-chart/bar-chart.d.ts +154 -16
- package/dist/src/components/ui/bar-chart/index.d.ts +1 -1
- package/dist/src/components/ui/button/button.d.ts +1 -1
- package/dist/src/components/ui/button-menu/button-menu.d.ts +1 -1
- package/dist/src/components/ui/chart/__tests__/chart-layout.d.ts +63 -0
- package/dist/src/components/ui/chart/__tests__/chart-layout.test.d.ts +1 -0
- package/dist/src/components/ui/chart/chart-format.d.ts +415 -0
- package/dist/src/components/ui/chart/chart.d.ts +9 -3
- package/dist/src/components/ui/chart/index.d.ts +2 -2
- package/dist/src/components/ui/composed-chart/composed-chart.d.ts +156 -7
- package/dist/src/components/ui/composed-chart/index.d.ts +1 -1
- package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts +138 -20
- package/dist/src/components/ui/confidence-cone/index.d.ts +1 -1
- package/dist/src/components/ui/funnel-chart/funnel-chart.d.ts +201 -3
- package/dist/src/components/ui/funnel-chart/index.d.ts +1 -1
- package/dist/src/components/ui/histogram/histogram.d.ts +2 -2
- package/dist/src/components/ui/line-chart/index.d.ts +1 -1
- package/dist/src/components/ui/line-chart/line-chart.d.ts +51 -3
- package/dist/src/components/ui/pie-chart/index.d.ts +1 -1
- package/dist/src/components/ui/pie-chart/pie-chart.d.ts +145 -4
- package/dist/src/components/ui/radar-chart/index.d.ts +1 -1
- package/dist/src/components/ui/radar-chart/radar-chart.d.ts +219 -6
- package/dist/src/components/ui/radial-bar-chart/index.d.ts +1 -1
- package/dist/src/components/ui/radial-bar-chart/radial-bar-chart.d.ts +215 -9
- package/dist/src/components/ui/scatter-chart/scatter-chart.d.ts +2 -2
- package/dist/src/components/ui/timeline/index.d.ts +1 -1
- package/dist/src/components/ui/timeline/timeline.d.ts +79 -20
- package/dist/src/components/ui/treemap/index.d.ts +1 -1
- package/dist/src/components/ui/treemap/treemap.d.ts +68 -8
- package/dist/src/index.d.ts +0 -1
- package/dist/ui-react.css +1 -1
- package/package.json +3 -3
- package/dist/components/ui/search-global/search-global.js +0 -60
- package/dist/components/ui/search-global/search-global.js.map +0 -1
- package/dist/src/components/ui/search-global/index.d.ts +0 -1
- package/dist/src/components/ui/search-global/search-global.d.ts +0 -7
|
@@ -1,22 +1,148 @@
|
|
|
1
|
-
import { ChartTooltip, ChartConfig } from '../chart';
|
|
1
|
+
import { ChartTooltip, ChartConfig, ChartAnimationProps, ChartDataLabelProps, PolarLabelPosition, TickFormatter } from '../chart';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
|
|
3
|
+
/** Row-per-arc datum: the `nameKey` label plus each metric's numeric value. */
|
|
4
|
+
type RadialBarChartDatum = Record<string, string | number>;
|
|
5
|
+
/** What an arc's data label reads. */
|
|
6
|
+
export type RadialBarChartLabelFormat = 'value' | 'name-value';
|
|
7
|
+
export interface RadialBarChartCenterLabel {
|
|
8
|
+
/** Headline metric rendered large in the hole (e.g. the gauge's value). */
|
|
9
|
+
value?: string | number;
|
|
10
|
+
/** Caption rendered under the value. */
|
|
11
|
+
label?: string | number;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Compose one arc's data-label text. Exported for unit tests; not part of the
|
|
15
|
+
* package's public API.
|
|
16
|
+
*
|
|
17
|
+
* `labelFormatter` only ever formats the numeric part, so a chart's labels and
|
|
18
|
+
* its tooltip stay in the same units under either format. A nullish value yields
|
|
19
|
+
* an empty label, which recharts renders as no `<text>` at all.
|
|
20
|
+
*/
|
|
21
|
+
export declare function radialBarChartLabelText(options: {
|
|
22
|
+
format: RadialBarChartLabelFormat;
|
|
23
|
+
name: string | number | undefined;
|
|
24
|
+
value: string | number | undefined;
|
|
25
|
+
formatter?: TickFormatter;
|
|
26
|
+
}): string;
|
|
27
|
+
/** One piece of a segmented gauge's ring: a length in degrees and what it is. */
|
|
28
|
+
export interface RadialBarChartSegment {
|
|
29
|
+
/** Synthetic series key — stable for a given (index, kind). */
|
|
30
|
+
key: string;
|
|
31
|
+
/** Angular length of the piece, in degrees. */
|
|
32
|
+
degrees: number;
|
|
33
|
+
/** `value` is the metric, `track` the unreached remainder, `gap` the notch. */
|
|
34
|
+
kind: 'value' | 'track' | 'gap';
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Cut a gauge's sweep into equal segments separated by gaps, and split the
|
|
38
|
+
* segment the value ends inside into its reached and unreached parts. Exported
|
|
39
|
+
* for unit tests; not part of the package's public API.
|
|
40
|
+
*
|
|
41
|
+
* Lengths come back in **degrees**, which is what lets the ring be built as one
|
|
42
|
+
* stack of synthetic series over a `[0, sweep]` angular scale: recharts lays
|
|
43
|
+
* stacked radial bars out sequentially along the angle, so a transparent series
|
|
44
|
+
* between two colored ones reads as a real notch in the ring. A `gap` that
|
|
45
|
+
* would leave no room for the segments themselves is clamped.
|
|
46
|
+
*/
|
|
47
|
+
export declare function radialBarChartSegments(options: {
|
|
48
|
+
value: number;
|
|
49
|
+
domain: [number, number];
|
|
50
|
+
segments: number;
|
|
51
|
+
gap: number;
|
|
52
|
+
/** Absolute sweep of the chart, in degrees. */
|
|
53
|
+
sweep: number;
|
|
54
|
+
/** A full-circle sweep also needs a gap between the last segment and the first. */
|
|
55
|
+
closed: boolean;
|
|
56
|
+
}): RadialBarChartSegment[];
|
|
57
|
+
/**
|
|
58
|
+
* Fill for one piece of a segmented gauge's ring. Exported for unit tests and so
|
|
59
|
+
* the forced-open tooltip story can build a ring from the real implementation
|
|
60
|
+
* rather than a copy of it; not part of the package's public API.
|
|
61
|
+
*/
|
|
62
|
+
export declare function radialBarChartSegmentFill(kind: RadialBarChartSegment['kind'], colorName: string | number): string;
|
|
63
|
+
/**
|
|
64
|
+
* What a segmented gauge's tooltip reads. Exported for unit tests; not part of
|
|
65
|
+
* the package's public API.
|
|
66
|
+
*
|
|
67
|
+
* A segmented ring's series are pieces of geometry, so recharts would offer the
|
|
68
|
+
* hovered piece's own name and length ("seg-3-value", 41.2°). Hovering anywhere
|
|
69
|
+
* on the ring should read the metric instead, so the reading is rebuilt from the
|
|
70
|
+
* data row.
|
|
71
|
+
*/
|
|
72
|
+
export declare function radialBarChartSegmentedReading(options: {
|
|
73
|
+
config: ChartConfig;
|
|
74
|
+
row: RadialBarChartDatum;
|
|
75
|
+
nameKey: string;
|
|
76
|
+
dataKey: string;
|
|
77
|
+
/** The `valueDomain` maximum, when the gauge has one. */
|
|
78
|
+
domainMax?: number;
|
|
79
|
+
}): {
|
|
80
|
+
colorName: string;
|
|
81
|
+
label: React.ReactNode;
|
|
82
|
+
valueText: string;
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* The tooltip a segmented gauge shows — the same swatch/name/value layout the
|
|
86
|
+
* default `ChartTooltipContent` row uses, dot included, over the reading from
|
|
87
|
+
* `radialBarChartSegmentedReading`. Exported for the forced-open
|
|
88
|
+
* visual-regression story; not part of the package's public API.
|
|
89
|
+
*
|
|
90
|
+
* `payload` is trimmed to one row: a radial tooltip is axis-shared and collects a
|
|
91
|
+
* row from every series — two dozen identical rows for one metric.
|
|
92
|
+
* (`tooltipType="none"` only tags them, and scoping the tooltip to the hovered
|
|
93
|
+
* item instead would drop it in the corner — unlike Pie/Bar sectors, a RadialBar
|
|
94
|
+
* sector carries no tooltip coordinate.)
|
|
95
|
+
*
|
|
96
|
+
* A real component rather than a closure so it can be handed to `ChartTooltip`
|
|
97
|
+
* as an *element*: recharts `cloneElement`s an element but `createElement`s a
|
|
98
|
+
* function, and a closure rebuilt each render is a new element *type* — which
|
|
99
|
+
* remounts the tooltip on every parent render instead of updating it.
|
|
100
|
+
*/
|
|
101
|
+
export declare function RadialBarChartSegmentedTooltipContent({ active, payload, ...reading }: {
|
|
102
|
+
active?: boolean;
|
|
103
|
+
payload?: readonly unknown[];
|
|
104
|
+
config: ChartConfig;
|
|
105
|
+
row: RadialBarChartDatum;
|
|
106
|
+
nameKey: string;
|
|
107
|
+
dataKey: string;
|
|
108
|
+
domainMax?: number;
|
|
109
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
110
|
+
/**
|
|
111
|
+
* The band a multi-metric tooltip's header names. Exported for unit tests; not
|
|
112
|
+
* part of the package's public API.
|
|
113
|
+
*
|
|
114
|
+
* Each tooltip row is one metric, so the header names the band the hovered arc
|
|
115
|
+
* belongs to. recharts' own label is the radius-axis index, which reads as a
|
|
116
|
+
* bare number.
|
|
117
|
+
*/
|
|
118
|
+
export declare function radialBarChartBandName(row: RadialBarChartDatum | undefined, nameKey: string): string;
|
|
119
|
+
export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps, ChartDataLabelProps {
|
|
4
120
|
/** Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. */
|
|
5
|
-
data: ReadonlyArray<
|
|
121
|
+
data: ReadonlyArray<RadialBarChartDatum>;
|
|
6
122
|
/**
|
|
7
|
-
* Per-arc map of `label` / `color`, keyed by the arc's `nameKey` value
|
|
8
|
-
* (imported from the shared `Chart`
|
|
9
|
-
* custom properties. Colors are
|
|
10
|
-
* semantic `--ui-*` token; there is no
|
|
123
|
+
* Per-arc map of `label` / `color`, keyed by the arc's `nameKey` value — or, in
|
|
124
|
+
* multi-metric mode, by each `dataKeys` entry (imported from the shared `Chart`
|
|
125
|
+
* primitives). Turned into `--color-<name>` custom properties. Colors are
|
|
126
|
+
* caller-supplied — reference an existing semantic `--ui-*` token; there is no
|
|
127
|
+
* chart palette tier yet.
|
|
11
128
|
*/
|
|
12
129
|
config: ChartConfig;
|
|
13
|
-
/** Numeric field that sizes each arc. */
|
|
130
|
+
/** Numeric field that sizes each arc. Ignored when `dataKeys` is set. */
|
|
14
131
|
dataKey: string;
|
|
132
|
+
/**
|
|
133
|
+
* Plot several metrics instead of one arc per row: one arc per key, colored and
|
|
134
|
+
* named from `config` keyed by the **key** (not by `nameKey`) — the same
|
|
135
|
+
* convention as the cartesian charts. Every metric shares one angular scale, so
|
|
136
|
+
* pair it with `valueDomain` when the metrics are measured against a known
|
|
137
|
+
* maximum. `nameKey` still names the band each metric's arc sits in.
|
|
138
|
+
*/
|
|
139
|
+
dataKeys?: string[];
|
|
15
140
|
/**
|
|
16
141
|
* Label field that names each arc (drives the legend, tooltip, and
|
|
17
142
|
* `--color-<name>` lookup). Values should be unique per chart (arcs sharing a
|
|
18
143
|
* name share one `config`/color entry) and CSS-safe — they become part of a
|
|
19
|
-
* custom-property name.
|
|
144
|
+
* custom-property name. In multi-metric mode it names the band rather than the
|
|
145
|
+
* arc, so the legend and colors come from `dataKeys` instead.
|
|
20
146
|
*/
|
|
21
147
|
nameKey: string;
|
|
22
148
|
/** Inner radius of the innermost arc. */
|
|
@@ -27,10 +153,74 @@ export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, '
|
|
|
27
153
|
startAngle?: number;
|
|
28
154
|
/** Angle (degrees) the arcs sweep to (default is a full clockwise circle). */
|
|
29
155
|
endAngle?: number;
|
|
156
|
+
/**
|
|
157
|
+
* The value range the sweep represents, as `[min, max]`. Without it every arc
|
|
158
|
+
* is drawn relative to the largest value in the data — so a **single** value
|
|
159
|
+
* always fills the whole sweep, which is never what a gauge means. Set it to
|
|
160
|
+
* the metric's own scale (e.g. `[0, 100]` for a percentage) and each arc
|
|
161
|
+
* becomes that fraction of the sweep, over the `showBackground` track.
|
|
162
|
+
*/
|
|
163
|
+
valueDomain?: [number, number];
|
|
30
164
|
/** Corner radius on each arc's ends. */
|
|
31
165
|
cornerRadius?: number;
|
|
166
|
+
/**
|
|
167
|
+
* Horizontal center of the arcs, in px or a percentage of the width.
|
|
168
|
+
* Defaults to the middle (`50%`).
|
|
169
|
+
*/
|
|
170
|
+
cx?: number | string;
|
|
171
|
+
/**
|
|
172
|
+
* Vertical center of the arcs, in px or a percentage of the height. Defaults to
|
|
173
|
+
* the middle (`50%`) — worth moving for a half-circle gauge, whose drawn half
|
|
174
|
+
* otherwise sits in the upper half of the surface.
|
|
175
|
+
*/
|
|
176
|
+
cy?: number | string;
|
|
177
|
+
/** Thickness of each arc, in px. Omit to let the radii and the gaps size it. */
|
|
178
|
+
barSize?: number;
|
|
179
|
+
/** Gap between the arcs of different metrics in one band, in px. */
|
|
180
|
+
barGap?: number | string;
|
|
181
|
+
/** Gap between bands, in px or a percentage string. */
|
|
182
|
+
barCategoryGap?: number | string;
|
|
183
|
+
/**
|
|
184
|
+
* Smallest angle a non-zero arc may occupy, in degrees, so a tiny value stays
|
|
185
|
+
* visible (and hoverable). recharts applies the floor to a `0` as well, which
|
|
186
|
+
* reads as a small positive value — leave this unset when a metric can
|
|
187
|
+
* legitimately be zero.
|
|
188
|
+
*/
|
|
189
|
+
minAngle?: number;
|
|
190
|
+
/** Plot-area margin, in px. Omit to use recharts' default (5 on every side). */
|
|
191
|
+
margin?: {
|
|
192
|
+
top?: number;
|
|
193
|
+
right?: number;
|
|
194
|
+
bottom?: number;
|
|
195
|
+
left?: number;
|
|
196
|
+
};
|
|
197
|
+
/**
|
|
198
|
+
* Draw the gauge's ring as this many equal segments, notched apart — the
|
|
199
|
+
* segmented-gauge look. Applies to a **single-value gauge** only and needs
|
|
200
|
+
* `valueDomain` to know what a full ring means. Anything that isn't one — more
|
|
201
|
+
* than one row, `dataKeys` set, fewer than two segments, or a `dataKey` value
|
|
202
|
+
* that isn't a number (a stringified `"29"` off an API) — falls back to the
|
|
203
|
+
* normal concentric arcs, legend included, rather than erroring.
|
|
204
|
+
*
|
|
205
|
+
* The ring is then synthetic geometry rather than data rows, so the arc labels
|
|
206
|
+
* and the legend are suppressed: put the readout in `centerLabel`. The tooltip
|
|
207
|
+
* stays, and reads the metric (with the `valueDomain` maximum when there is
|
|
208
|
+
* one) wherever on the ring it is hovered. `showBackground` is redundant too —
|
|
209
|
+
* the unreached segments *are* the track.
|
|
210
|
+
*/
|
|
211
|
+
segments?: number;
|
|
212
|
+
/** Gap between a segmented gauge's segments, in degrees. Defaults to `3`. */
|
|
213
|
+
segmentGap?: number;
|
|
32
214
|
/** Render a muted background track behind each arc. */
|
|
33
215
|
showBackground?: boolean;
|
|
216
|
+
/** Draw the concentric polar grid behind the arcs. */
|
|
217
|
+
showPolarGrid?: boolean;
|
|
218
|
+
/**
|
|
219
|
+
* Custom content for the hole at the center — a headline `value` and/or a
|
|
220
|
+
* `label` caption, stacked and centered. Needs an `innerRadius` big enough to
|
|
221
|
+
* hold the text; it is not clipped to the hole.
|
|
222
|
+
*/
|
|
223
|
+
centerLabel?: RadialBarChartCenterLabel;
|
|
34
224
|
showTooltip?: boolean;
|
|
35
225
|
showLegend?: boolean;
|
|
36
226
|
/**
|
|
@@ -38,8 +228,24 @@ export interface RadialBarChartProps extends Omit<React.ComponentProps<'div'>, '
|
|
|
38
228
|
* (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
|
|
39
229
|
* to customize formatting, per-arc rows, or extra fields without composing
|
|
40
230
|
* recharts yourself. Ignored when `showTooltip` is false.
|
|
231
|
+
*
|
|
232
|
+
* On a segmented gauge it takes over from the built-in reading, and the payload
|
|
233
|
+
* it receives is the ring's synthetic pieces (`seg-2-track`, a length in
|
|
234
|
+
* degrees) rather than data rows — read the metric off `payload[0].payload`.
|
|
41
235
|
*/
|
|
42
236
|
tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
|
|
237
|
+
/**
|
|
238
|
+
* Position of the value labels when `showLabels` is on. Defaults to
|
|
239
|
+
* `insideStart` — the labels sit inside each arc, and therefore render in the
|
|
240
|
+
* on-fill label token so they stay legible over the arc colour.
|
|
241
|
+
*/
|
|
242
|
+
labelPosition?: PolarLabelPosition;
|
|
243
|
+
/**
|
|
244
|
+
* What each data label reads when `showLabels` is on — the value alone (the
|
|
245
|
+
* default), or the arc's name and its value. The name is the row's `nameKey`
|
|
246
|
+
* value, or the metric's `config` label in multi-metric mode.
|
|
247
|
+
*/
|
|
248
|
+
labelFormat?: RadialBarChartLabelFormat;
|
|
43
249
|
}
|
|
44
250
|
declare const RadialBarChart: React.ForwardRefExoticComponent<Omit<RadialBarChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
45
251
|
export { RadialBarChart };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChartConfig, CartesianChartProps } from '../chart';
|
|
1
|
+
import { ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export type ScatterMarkerShape = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
|
|
4
4
|
export interface ScatterSeries {
|
|
@@ -7,7 +7,7 @@ export interface ScatterSeries {
|
|
|
7
7
|
/** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */
|
|
8
8
|
data: ReadonlyArray<Record<string, number>>;
|
|
9
9
|
}
|
|
10
|
-
export interface ScatterChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps {
|
|
10
|
+
export interface ScatterChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, ChartAnimationProps {
|
|
11
11
|
/** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */
|
|
12
12
|
series: ScatterSeries[];
|
|
13
13
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Timeline, TimelineItem, type TimelineProps, type TimelineItemProps, type
|
|
1
|
+
export { Timeline, TimelineItem, type TimelineProps, type TimelineItemProps, type TimelineLevel, type TimelineMarkerColor, } from './timeline';
|
|
@@ -1,37 +1,96 @@
|
|
|
1
1
|
import { VariantProps } from 'class-variance-authority';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
type TimelineVariant = 'default' | 'tree';
|
|
3
4
|
declare const timelineVariants: (props?: ({
|
|
4
|
-
|
|
5
|
-
density?: "compact" | "default" | null | undefined;
|
|
5
|
+
variant?: "tree" | "default" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
export interface TimelineProps extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
10
|
-
*
|
|
9
|
+
* Whether the list collapses. `default` never does; `tree` gives every row that
|
|
10
|
+
* has descendants a disclosure button ahead of its marker, which hides those
|
|
11
|
+
* descendants, and widens the indent step to reserve it on every row.
|
|
12
|
+
*
|
|
13
|
+
* Unrelated to `Timeline.Item`'s `collapsibleBody`, which folds a single card's
|
|
14
|
+
* own body and works the same under both variants.
|
|
15
|
+
*/
|
|
16
|
+
variant?: TimelineVariant;
|
|
17
|
+
/**
|
|
18
|
+
* `Timeline.Item`s — pass them as direct children in visual order (never
|
|
19
|
+
* wrapped in a fragment, or their levels can't be read). Connectors are derived
|
|
20
|
+
* from the levels, so no row ever leaves a dangling line.
|
|
11
21
|
*/
|
|
12
22
|
children?: React.ReactNode;
|
|
13
23
|
}
|
|
14
|
-
export type
|
|
24
|
+
export type TimelineLevel = 1 | 2 | 3;
|
|
25
|
+
/** The marker Avatar's color scheme (Figma ships the Timeline marker as Blue). */
|
|
26
|
+
export type TimelineMarkerColor = 'blue' | 'gray' | 'green' | 'teal' | 'violet' | 'red' | 'yellow' | 'orange';
|
|
15
27
|
export interface TimelineItemProps extends Omit<React.ComponentProps<'li'>, 'title'> {
|
|
28
|
+
/** Event title (the primary line in the card header). */
|
|
29
|
+
title: React.ReactNode;
|
|
16
30
|
/** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */
|
|
17
31
|
timestamp?: React.ReactNode;
|
|
18
|
-
/**
|
|
19
|
-
|
|
20
|
-
/** Optional secondary description. */
|
|
32
|
+
/** Slot beside the title, before the timestamp — e.g. a `Tag`. */
|
|
33
|
+
tag?: React.ReactNode;
|
|
34
|
+
/** Optional secondary description under the title. */
|
|
21
35
|
description?: React.ReactNode;
|
|
22
|
-
/**
|
|
23
|
-
status?: TimelineStatus;
|
|
24
|
-
/** Icon shown in a status-tinted marker badge instead of the plain dot. */
|
|
36
|
+
/** Icon rendered inside the marker Avatar. Takes precedence over `initials`. */
|
|
25
37
|
icon?: React.ReactNode;
|
|
26
|
-
/**
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
/** Initials rendered inside the marker Avatar when no `icon` is given. */
|
|
39
|
+
initials?: string;
|
|
40
|
+
/** Marker Avatar color scheme. */
|
|
41
|
+
color?: TimelineMarkerColor;
|
|
42
|
+
/** Nesting depth (Figma `Nesting` L1-L3). Drives the indent only. */
|
|
43
|
+
level?: TimelineLevel;
|
|
44
|
+
/**
|
|
45
|
+
* Force the elbow joining this row to its parent's connector on or off (Figma's
|
|
46
|
+
* `Nesting` `-First`). Leave it unset — `Timeline` derives it from the levels,
|
|
47
|
+
* drawing it whenever this row is deeper than the one above it. Ignored at
|
|
48
|
+
* `level={1}`, which has no parent.
|
|
49
|
+
*/
|
|
50
|
+
branchStart?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Force the connector descending to the next row on or off (Figma
|
|
53
|
+
* `Connecting line`). Leave it unset — `Timeline` derives it from the levels,
|
|
54
|
+
* drawing it only when the next visible row is at this row's depth or deeper.
|
|
55
|
+
*/
|
|
56
|
+
connector?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Branch disclosure state (controlled). Only meaningful under `variant="tree"`
|
|
59
|
+
* on a row that has descendants — those rows get the control automatically.
|
|
60
|
+
*/
|
|
61
|
+
expanded?: boolean;
|
|
62
|
+
/** Initial branch disclosure state when uncontrolled. */
|
|
63
|
+
defaultExpanded?: boolean;
|
|
64
|
+
/** Called with the requested disclosure state whenever the control is activated. */
|
|
65
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
66
|
+
/**
|
|
67
|
+
* Accessible name for the branch disclosure control — the one that drops this
|
|
68
|
+
* row's descendant rows. Distinct from `bodyToggleLabel` by default, because a
|
|
69
|
+
* tree row can carry both controls at once.
|
|
70
|
+
*/
|
|
71
|
+
toggleLabel?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Give this row's card a chevron at the trailing edge of its header that shows
|
|
74
|
+
* and hides the body (Figma's `Action Button`).
|
|
75
|
+
*
|
|
76
|
+
* Orthogonal to `variant`: it is the *card's* disclosure, not the timeline's, so
|
|
77
|
+
* it works the same in `default` and `tree` and a tree row can have both — the
|
|
78
|
+
* branch control drops the rows below, this one folds this card's own body.
|
|
79
|
+
* (It lives here only until `Card` grows the behaviour itself.)
|
|
80
|
+
*/
|
|
81
|
+
collapsibleBody?: boolean;
|
|
82
|
+
/** Card-body disclosure state (controlled). */
|
|
83
|
+
bodyExpanded?: boolean;
|
|
84
|
+
/** Initial card-body disclosure state when uncontrolled. */
|
|
85
|
+
defaultBodyExpanded?: boolean;
|
|
86
|
+
/** Called with the requested card-body disclosure state. */
|
|
87
|
+
onBodyExpandedChange?: (expanded: boolean) => void;
|
|
88
|
+
/**
|
|
89
|
+
* Accessible name for the card-body disclosure control — the one that folds this
|
|
90
|
+
* row's own body. Distinct from `toggleLabel` by default.
|
|
91
|
+
*/
|
|
92
|
+
bodyToggleLabel?: string;
|
|
93
|
+
/** Card body, rendered below a divider. */
|
|
35
94
|
children?: React.ReactNode;
|
|
36
95
|
}
|
|
37
96
|
declare const TimelineItem: React.ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Treemap, type TreemapProps } from './treemap';
|
|
1
|
+
export { Treemap, type TreemapProps, type TreemapLabelAlign } from './treemap';
|
|
@@ -1,16 +1,48 @@
|
|
|
1
|
-
import { ChartTooltip, ChartConfig } from '../chart';
|
|
1
|
+
import { ChartTooltip, ChartConfig, ChartAnimationProps, TickFormatter } from '../chart';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Where a cell's label block sits inside its rectangle. Named logically, not
|
|
5
|
+
* physically: the corner variants anchor to the tile's *start* edge, so they
|
|
6
|
+
* mirror under `dir="rtl"`. `bottom-start` is the design's placement; `center`
|
|
7
|
+
* is what the chart drew before the block had a second line.
|
|
8
|
+
*/
|
|
9
|
+
export type TreemapLabelAlign = 'bottom-start' | 'top-start' | 'center';
|
|
10
|
+
/**
|
|
11
|
+
* Compose a cell's second line out of the caller's `secondaryKeys`. Empty and
|
|
12
|
+
* missing fields are skipped rather than printed as a gap, so one row without
|
|
13
|
+
* the field doesn't leave a dangling separator.
|
|
14
|
+
*/
|
|
15
|
+
export declare function treemapSecondaryLabel(options: {
|
|
16
|
+
row: Record<string, string | number>;
|
|
17
|
+
keys: readonly string[];
|
|
18
|
+
separator: string;
|
|
19
|
+
formatter?: TickFormatter;
|
|
20
|
+
}): string | undefined;
|
|
3
21
|
interface TreemapCellProps {
|
|
4
22
|
x?: number;
|
|
5
23
|
y?: number;
|
|
6
24
|
width?: number;
|
|
7
25
|
height?: number;
|
|
8
26
|
name?: string;
|
|
27
|
+
/** The leaf's display name — its `config` label, stamped onto the row by `Treemap`. */
|
|
28
|
+
primaryLabel?: string;
|
|
29
|
+
/** The label's precomputed second line, stamped onto each row by `Treemap`. */
|
|
30
|
+
secondaryLabel?: string;
|
|
9
31
|
showLabels?: boolean;
|
|
32
|
+
labelAlign?: TreemapLabelAlign;
|
|
10
33
|
}
|
|
11
|
-
export declare function TreemapCell({ x, y, width, height, name, showLabels, }: TreemapCellProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'children'
|
|
13
|
-
/**
|
|
34
|
+
export declare function TreemapCell({ x, y, width, height, name, primaryLabel, secondaryLabel, showLabels, labelAlign, }: TreemapCellProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps {
|
|
36
|
+
/**
|
|
37
|
+
* Row-per-leaf data. Each object holds the leaf's `nameKey` label + its
|
|
38
|
+
* `dataKey` numeric size.
|
|
39
|
+
*
|
|
40
|
+
* `fill`, `primaryLabel` and `secondaryLabel` are reserved: the chart stamps
|
|
41
|
+
* them onto a copy of each row to carry the cell color and the two label lines
|
|
42
|
+
* through to the renderer (recharts hands the whole row to `content`, so
|
|
43
|
+
* anything the cell needs has to be on it). A row of your own carrying one of
|
|
44
|
+
* those names may end up driving what the tile paints.
|
|
45
|
+
*/
|
|
14
46
|
data: ReadonlyArray<Record<string, string | number>>;
|
|
15
47
|
/**
|
|
16
48
|
* Per-leaf map of `label` / `color`, keyed by the leaf's `nameKey` value
|
|
@@ -22,16 +54,44 @@ export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'childre
|
|
|
22
54
|
/** Numeric field that sizes each leaf's rectangle. */
|
|
23
55
|
dataKey: string;
|
|
24
56
|
/**
|
|
25
|
-
* Label field that names each leaf (drives the on-cell label, tooltip,
|
|
26
|
-
* `--color-<name>` lookup). Values should be unique and CSS-safe (they
|
|
27
|
-
* part of a custom-property name).
|
|
57
|
+
* Label field that names each leaf (drives the on-cell label, legend, tooltip,
|
|
58
|
+
* and `--color-<name>` lookup). Values should be unique and CSS-safe (they
|
|
59
|
+
* become part of a custom-property name).
|
|
28
60
|
*/
|
|
29
61
|
nameKey: string;
|
|
30
62
|
/** Width-to-height ratio the tiling targets. */
|
|
31
63
|
aspectRatio?: number;
|
|
32
|
-
/** Render each leaf's
|
|
64
|
+
/** Render each leaf's label inside its cell (when it fits). */
|
|
33
65
|
showLabels?: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Where a cell's label sits. Defaults to `bottom-start` — the design's
|
|
68
|
+
* placement, which keeps the label anchored to a tile corner as the tiling
|
|
69
|
+
* reflows. `top-start` anchors it to the opposite corner; `center` centers the
|
|
70
|
+
* block in the tile. The corner variants are named for the tile's *start* edge
|
|
71
|
+
* because they mirror under `dir="rtl"`.
|
|
72
|
+
*/
|
|
73
|
+
labelAlign?: TreemapLabelAlign;
|
|
74
|
+
/**
|
|
75
|
+
* Fields whose values make up a second label line under the leaf's name — e.g.
|
|
76
|
+
* `[dataKey]` for the size, or `['size', 'count']` for a value and a count. The
|
|
77
|
+
* line is dropped on cells too short to hold it.
|
|
78
|
+
*/
|
|
79
|
+
secondaryKeys?: readonly string[];
|
|
80
|
+
/**
|
|
81
|
+
* Format each secondary value. Receives the field's index in `secondaryKeys`
|
|
82
|
+
* as its second argument, so one formatter can cover fields of different kinds.
|
|
83
|
+
*/
|
|
84
|
+
secondaryFormatter?: TickFormatter;
|
|
85
|
+
/** Separator drawn between multiple secondary values. */
|
|
86
|
+
secondarySeparator?: string;
|
|
34
87
|
showTooltip?: boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Render the legend — one entry per leaf. Off by default: a treemap labels its
|
|
90
|
+
* cells, so the legend is for the case where the tiles are too small to.
|
|
91
|
+
*/
|
|
92
|
+
showLegend?: boolean;
|
|
93
|
+
/** Which edge the legend sits on. */
|
|
94
|
+
legendPos?: 'top' | 'bottom';
|
|
35
95
|
/**
|
|
36
96
|
* Replace the default tooltip. Pass a configured `ChartTooltipContent`
|
|
37
97
|
* (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
|
package/dist/src/index.d.ts
CHANGED
|
@@ -67,7 +67,6 @@ export * from './components/ui/progress-circle';
|
|
|
67
67
|
export * from './components/ui/sankey-chart';
|
|
68
68
|
export * from './components/ui/scatter-chart';
|
|
69
69
|
export * from './components/ui/scroll-area';
|
|
70
|
-
export * from './components/ui/search-global';
|
|
71
70
|
export { InputText as Input, type InputTextProps as InputProps, } from './components/ui/input-text';
|
|
72
71
|
export { InputSearch as Search, type InputSearchProps as SearchProps, } from './components/ui/input-search';
|
|
73
72
|
export { InputTextArea as Textarea, type InputTextAreaProps as TextareaProps, } from './components/ui/input-text-area';
|