@synertech/ui 0.39.1 → 0.40.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/skills/use-synertech-ui/SKILL.md +133 -1
- package/README.md +2 -2
- package/dist/index.cjs +11 -11
- package/dist/index.d.cts +732 -2
- package/dist/index.d.ts +732 -2
- package/dist/index.js +11 -11
- package/dist/styles.css +117 -7
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import react__default, { ReactNode, ReactElement, ComponentPropsWithoutRef, ChangeEvent, MouseEvent,
|
|
3
|
+
import react__default, { ReactNode, ReactElement, ComponentPropsWithoutRef, RefObject, ChangeEvent, MouseEvent, Dispatch, SetStateAction, HTMLAttributes, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
|
|
4
4
|
import { M as MarkdownEditorComponent } from './types-99-Ej5og.cjs';
|
|
5
5
|
export { a as MarkdownEditorProps } from './types-99-Ej5og.cjs';
|
|
6
6
|
|
|
@@ -104,6 +104,220 @@ interface AdvanceDetachableComponent {
|
|
|
104
104
|
}
|
|
105
105
|
declare const AdvanceDetachable: AdvanceDetachableComponent;
|
|
106
106
|
|
|
107
|
+
/**
|
|
108
|
+
* One row of data. Charts read their values through the axis and series keys,
|
|
109
|
+
* the same way `DataGrid` reads a row through `ColumnDef.key` — an application
|
|
110
|
+
* can hand the very same array to both.
|
|
111
|
+
*/
|
|
112
|
+
type ChartDatum = Record<string, unknown>;
|
|
113
|
+
/** Value a chart can place on its horizontal axis. */
|
|
114
|
+
type ChartXValue = string | number | Date;
|
|
115
|
+
type ChartSize = "sm" | "md" | "lg";
|
|
116
|
+
/**
|
|
117
|
+
* Shape of the line between two points.
|
|
118
|
+
*
|
|
119
|
+
* - `linear` — straight segments.
|
|
120
|
+
* - `monotone` — cubic interpolation that never overshoots the data.
|
|
121
|
+
* - `step` — holds each value until halfway to the next point.
|
|
122
|
+
* - `stepAfter` — holds each value until the next point, then jumps.
|
|
123
|
+
*/
|
|
124
|
+
type ChartCurve = "linear" | "monotone" | "step" | "stepAfter";
|
|
125
|
+
type ChartGridLines = "none" | "x" | "y" | "both";
|
|
126
|
+
type ChartLegendPosition = "top" | "bottom" | "right";
|
|
127
|
+
/** How the horizontal axis maps values to pixels. */
|
|
128
|
+
type ChartScaleType = "category" | "linear" | "time";
|
|
129
|
+
/**
|
|
130
|
+
* A plotted series.
|
|
131
|
+
*
|
|
132
|
+
* `key` is the field read on every datum AND the series' identity: its colour
|
|
133
|
+
* follows that identity, never its position after a filter, so hiding one
|
|
134
|
+
* series never repaints the others.
|
|
135
|
+
*/
|
|
136
|
+
interface ChartSeries {
|
|
137
|
+
/** Field read on each datum, and stable identity of the series. */
|
|
138
|
+
key: string;
|
|
139
|
+
/** Shown in the legend, the tooltip and the data table. Defaults to `key`. */
|
|
140
|
+
label?: string;
|
|
141
|
+
/** Overrides the palette slot. Any CSS colour, including a custom property. */
|
|
142
|
+
color?: string;
|
|
143
|
+
/** Keeps the series out of the plot while leaving it in the legend. */
|
|
144
|
+
hidden?: boolean;
|
|
145
|
+
/** Draws the line dashed — for a projection, a target, or a modelled value. */
|
|
146
|
+
dashed?: boolean;
|
|
147
|
+
}
|
|
148
|
+
interface ChartXAxisConfig {
|
|
149
|
+
/** Field read on each datum. */
|
|
150
|
+
key: string;
|
|
151
|
+
/** Defaults to `category`. */
|
|
152
|
+
scale?: ChartScaleType;
|
|
153
|
+
/** Axis caption. */
|
|
154
|
+
label?: string;
|
|
155
|
+
/** Formats a tick. Defaults to a locale-aware rendering of the value. */
|
|
156
|
+
format?: (value: ChartXValue, index: number) => string;
|
|
157
|
+
/** Preferred number of ticks. The axis may draw fewer to avoid collisions. */
|
|
158
|
+
ticks?: number;
|
|
159
|
+
/** Hides the axis line and its labels, keeping the plot area unchanged. */
|
|
160
|
+
hidden?: boolean;
|
|
161
|
+
/** Height reserved below the plot for the labels. */
|
|
162
|
+
height?: number;
|
|
163
|
+
}
|
|
164
|
+
interface ChartYAxisConfig {
|
|
165
|
+
/** Fixed bounds, or `auto` (the default) to derive them from the data. */
|
|
166
|
+
domain?: [number, number] | "auto";
|
|
167
|
+
/** Keeps zero inside an automatic domain. Defaults to `true`. */
|
|
168
|
+
includeZero?: boolean;
|
|
169
|
+
/** Preferred number of ticks. Defaults to 5. */
|
|
170
|
+
ticks?: number;
|
|
171
|
+
/** Formats a tick and the values in the tooltip. */
|
|
172
|
+
format?: (value: number) => string;
|
|
173
|
+
/** Axis caption. */
|
|
174
|
+
label?: string;
|
|
175
|
+
/** Hides the axis line and its labels, keeping the plot area unchanged. */
|
|
176
|
+
hidden?: boolean;
|
|
177
|
+
/** Width reserved left of the plot for the labels. */
|
|
178
|
+
width?: number;
|
|
179
|
+
}
|
|
180
|
+
/** Space between the drawing area and the edges of the chart. */
|
|
181
|
+
interface ChartMargin {
|
|
182
|
+
top: number;
|
|
183
|
+
right: number;
|
|
184
|
+
bottom: number;
|
|
185
|
+
left: number;
|
|
186
|
+
}
|
|
187
|
+
/** Geometry handed to a chart once its container has been measured. */
|
|
188
|
+
interface ChartDimensions {
|
|
189
|
+
/** Total width, including the axis gutters. */
|
|
190
|
+
width: number;
|
|
191
|
+
/** Total height, including the axis gutters. */
|
|
192
|
+
height: number;
|
|
193
|
+
/** Width of the drawing area. */
|
|
194
|
+
innerWidth: number;
|
|
195
|
+
/** Height of the drawing area. */
|
|
196
|
+
innerHeight: number;
|
|
197
|
+
margin: ChartMargin;
|
|
198
|
+
}
|
|
199
|
+
/** One series' value at a given position, as shown in a tooltip row. */
|
|
200
|
+
interface ChartPoint {
|
|
201
|
+
seriesKey: string;
|
|
202
|
+
seriesLabel: string;
|
|
203
|
+
color: string;
|
|
204
|
+
/** `null` for a gap in the series. */
|
|
205
|
+
value: number | null;
|
|
206
|
+
/** `value` run through the chart's formatter. */
|
|
207
|
+
formattedValue: string;
|
|
208
|
+
datum: ChartDatum;
|
|
209
|
+
}
|
|
210
|
+
/** Everything a tooltip needs about the position under the pointer. */
|
|
211
|
+
interface ChartTooltipPayload {
|
|
212
|
+
x: ChartXValue;
|
|
213
|
+
xLabel: string;
|
|
214
|
+
index: number;
|
|
215
|
+
/** Every visible series at this position — the pointer never has to land on a mark. */
|
|
216
|
+
points: ChartPoint[];
|
|
217
|
+
}
|
|
218
|
+
/** Emitted when a mark is clicked. */
|
|
219
|
+
interface ChartPointEvent extends ChartPoint {
|
|
220
|
+
index: number;
|
|
221
|
+
x: ChartXValue;
|
|
222
|
+
}
|
|
223
|
+
/**
|
|
224
|
+
* A threshold drawn across the plot: a target, a limit, a budget.
|
|
225
|
+
*
|
|
226
|
+
* Dashed by default — unlike a gridline, a reference line *is* a threshold, so
|
|
227
|
+
* the dashing carries meaning here instead of adding noise.
|
|
228
|
+
*/
|
|
229
|
+
interface ChartReferenceLine {
|
|
230
|
+
value: number;
|
|
231
|
+
label?: string;
|
|
232
|
+
/** Any CSS colour. Defaults to a muted grey. */
|
|
233
|
+
color?: string;
|
|
234
|
+
dashed?: boolean;
|
|
235
|
+
}
|
|
236
|
+
/** An entry of the legend. */
|
|
237
|
+
interface ChartLegendItem {
|
|
238
|
+
key: string;
|
|
239
|
+
label: string;
|
|
240
|
+
color: string;
|
|
241
|
+
hidden?: boolean;
|
|
242
|
+
}
|
|
243
|
+
/** A tick, already placed on its axis. */
|
|
244
|
+
interface ChartTick {
|
|
245
|
+
/** The underlying value, kept for `key` and for tests. */
|
|
246
|
+
value: ChartXValue;
|
|
247
|
+
/** Distance in pixels from the start of the axis. */
|
|
248
|
+
offset: number;
|
|
249
|
+
label: string;
|
|
250
|
+
}
|
|
251
|
+
/**
|
|
252
|
+
* Props shared by every cartesian chart of the kit. Each chart adds its own
|
|
253
|
+
* geometry on top — `curve` for lines, `stack` for areas and bars, and so on.
|
|
254
|
+
*/
|
|
255
|
+
interface CartesianChartBaseProps {
|
|
256
|
+
data: ChartDatum[];
|
|
257
|
+
series: ChartSeries[];
|
|
258
|
+
x: ChartXAxisConfig;
|
|
259
|
+
y?: ChartYAxisConfig;
|
|
260
|
+
/** Height of the plot area in pixels. Width always follows the container. */
|
|
261
|
+
height?: number;
|
|
262
|
+
/** Fixes the width instead of measuring the container. */
|
|
263
|
+
width?: number;
|
|
264
|
+
size?: ChartSize;
|
|
265
|
+
grid?: ChartGridLines;
|
|
266
|
+
legend?: boolean | ChartLegendPosition;
|
|
267
|
+
/** `false` disables the hover layer; a function replaces its content. */
|
|
268
|
+
tooltip?: boolean | ((payload: ChartTooltipPayload) => ReactNode);
|
|
269
|
+
/** Renders the accessible data table: always (`true`) or behind a button. */
|
|
270
|
+
tableView?: boolean | "toggle";
|
|
271
|
+
/** Paints one series in its colour and greys out every other one. */
|
|
272
|
+
emphasis?: string;
|
|
273
|
+
title?: ReactNode;
|
|
274
|
+
description?: ReactNode;
|
|
275
|
+
loading?: boolean;
|
|
276
|
+
emptyState?: ReactNode;
|
|
277
|
+
onPointClick?: (event: ChartPointEvent) => void;
|
|
278
|
+
className?: string;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* How several series share the value axis.
|
|
283
|
+
*
|
|
284
|
+
* - `none` — every series is measured from zero (grouped bars, plain lines).
|
|
285
|
+
* - `stacked` — each series sits on top of the previous one; the axis reads totals.
|
|
286
|
+
* - `percent` — the same, rescaled so every row fills 100 %.
|
|
287
|
+
*/
|
|
288
|
+
type ChartStackMode = "none" | "stacked" | "percent";
|
|
289
|
+
|
|
290
|
+
interface AreaChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWithoutRef<"figure">, keyof CartesianChartBaseProps | "children" | "title"> {
|
|
291
|
+
curve?: ChartCurve;
|
|
292
|
+
/**
|
|
293
|
+
* How the series share the value axis.
|
|
294
|
+
*
|
|
295
|
+
* `stacked` reads totals, `percent` reads composition. `none` overlays the
|
|
296
|
+
* series, which only stays legible for two or three of them.
|
|
297
|
+
*/
|
|
298
|
+
stack?: ChartStackMode;
|
|
299
|
+
/** Value the fill is measured from when nothing is stacked. */
|
|
300
|
+
baseline?: number;
|
|
301
|
+
connectNulls?: boolean;
|
|
302
|
+
referenceLines?: ChartReferenceLine[];
|
|
303
|
+
legendToggle?: boolean;
|
|
304
|
+
margin?: Partial<ChartMargin>;
|
|
305
|
+
locale?: string;
|
|
306
|
+
plotLabel?: string;
|
|
307
|
+
}
|
|
308
|
+
/**
|
|
309
|
+
* Change over time, with the quantity filled in.
|
|
310
|
+
*
|
|
311
|
+
* Same engine as the line chart, plus the fill and the stacking. Where a line
|
|
312
|
+
* is read for its slope, an area is read as a quantity, so its axis anchors at
|
|
313
|
+
* zero by default.
|
|
314
|
+
*
|
|
315
|
+
* A single area is a wash under its line. A stack is a composition: solid
|
|
316
|
+
* bands, separated by 2px of the surface colour rather than by a border drawn
|
|
317
|
+
* around each one.
|
|
318
|
+
*/
|
|
319
|
+
declare function AreaChart({ data, series, x, y, height, width, size, grid, legend, tooltip, tableView, emphasis, title, description, loading, emptyState, onPointClick, curve, stack, baseline, connectNulls, referenceLines, legendToggle, margin, locale, plotLabel, className, ...props }: AreaChartProps): react_jsx_runtime.JSX.Element;
|
|
320
|
+
|
|
107
321
|
interface AvatarProps extends ComponentPropsWithoutRef<"div"> {
|
|
108
322
|
src?: string;
|
|
109
323
|
alt?: string;
|
|
@@ -131,6 +345,51 @@ declare namespace Badge {
|
|
|
131
345
|
var displayName: string;
|
|
132
346
|
}
|
|
133
347
|
|
|
348
|
+
/**
|
|
349
|
+
* Which screen axis carries the values.
|
|
350
|
+
*
|
|
351
|
+
* `vertical` is the usual case — values run up the left side, categories along
|
|
352
|
+
* the bottom. `horizontal` swaps them, which is what a bar chart does when its
|
|
353
|
+
* category names are long enough to be unreadable rotated.
|
|
354
|
+
*/
|
|
355
|
+
type CartesianOrientation = "vertical" | "horizontal";
|
|
356
|
+
|
|
357
|
+
type BarChartOrientation = CartesianOrientation;
|
|
358
|
+
interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWithoutRef<"figure">, keyof CartesianChartBaseProps | "children" | "title"> {
|
|
359
|
+
/**
|
|
360
|
+
* `vertical` draws columns, `horizontal` draws bars.
|
|
361
|
+
*
|
|
362
|
+
* Horizontal is the right call as soon as the category names are long: a
|
|
363
|
+
* rotated label is a label nobody reads.
|
|
364
|
+
*/
|
|
365
|
+
orientation?: BarChartOrientation;
|
|
366
|
+
/** `none` groups the series side by side; the others stack them. */
|
|
367
|
+
stack?: ChartStackMode;
|
|
368
|
+
/** Caps the thickness of a mark. Never fills the slot: the leftover is air. */
|
|
369
|
+
barSize?: number;
|
|
370
|
+
/** Orders the categories by their total. */
|
|
371
|
+
sort?: "none" | "asc" | "desc";
|
|
372
|
+
/** Draws the value at the end of each bar, where it fits without collision. */
|
|
373
|
+
showValues?: boolean;
|
|
374
|
+
referenceLines?: ChartReferenceLine[];
|
|
375
|
+
legendToggle?: boolean;
|
|
376
|
+
margin?: Partial<ChartMargin>;
|
|
377
|
+
locale?: string;
|
|
378
|
+
plotLabel?: string;
|
|
379
|
+
}
|
|
380
|
+
/**
|
|
381
|
+
* Comparison between categories.
|
|
382
|
+
*
|
|
383
|
+
* One component for both readings: `orientation` turns columns into bars,
|
|
384
|
+
* which is the right call as soon as the category names are long enough that
|
|
385
|
+
* rotating them would make them unreadable.
|
|
386
|
+
*
|
|
387
|
+
* The value axis anchors at zero and cannot be talked out of it lightly: a bar
|
|
388
|
+
* is read for the length of its mark, and an axis starting at 40 exaggerates
|
|
389
|
+
* every difference on the chart.
|
|
390
|
+
*/
|
|
391
|
+
declare function BarChart({ data, series, x, y, height, width, size, grid, legend, tooltip, tableView, emphasis, title, description, loading, emptyState, onPointClick, orientation, stack, barSize, sort, showValues, referenceLines, legendToggle, margin, locale, plotLabel, className, ...props }: BarChartProps): react_jsx_runtime.JSX.Element;
|
|
392
|
+
|
|
134
393
|
type BannerVariant = "notification" | "hero" | "promotion";
|
|
135
394
|
type BannerType = "info" | "success" | "warning" | "error" | "default";
|
|
136
395
|
interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
|
|
@@ -378,6 +637,259 @@ declare namespace CardDescription {
|
|
|
378
637
|
var displayName: string;
|
|
379
638
|
}
|
|
380
639
|
|
|
640
|
+
/** Geometry handed to the render prop once the container has been measured. */
|
|
641
|
+
interface ChartContainerRenderArgs {
|
|
642
|
+
width: number;
|
|
643
|
+
height: number;
|
|
644
|
+
/** `false` while `width` is still the fallback (server render, first paint). */
|
|
645
|
+
measured: boolean;
|
|
646
|
+
}
|
|
647
|
+
interface ChartContainerProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
648
|
+
title?: ReactNode;
|
|
649
|
+
description?: ReactNode;
|
|
650
|
+
/** Height of the plot area. Width always follows the container. */
|
|
651
|
+
height?: number;
|
|
652
|
+
/** Fixes the width instead of measuring the container. */
|
|
653
|
+
width?: number;
|
|
654
|
+
size?: ChartSize;
|
|
655
|
+
legend?: ReactNode;
|
|
656
|
+
legendPosition?: ChartLegendPosition;
|
|
657
|
+
/** Slot on the right of the caption — a range picker, an export button. */
|
|
658
|
+
actions?: ReactNode;
|
|
659
|
+
/**
|
|
660
|
+
* Dims the plot while fresh data loads. The previous render is held rather
|
|
661
|
+
* than replaced by a spinner, so nothing jumps; the spinner only shows on
|
|
662
|
+
* a first load, when there is nothing to hold.
|
|
663
|
+
*/
|
|
664
|
+
loading?: boolean;
|
|
665
|
+
/** The chart has nothing to draw. */
|
|
666
|
+
empty?: boolean;
|
|
667
|
+
emptyState?: ReactNode;
|
|
668
|
+
/** The data table twin, usually a `ChartTableView`. */
|
|
669
|
+
table?: ReactNode;
|
|
670
|
+
/** `true` keeps the table open, `"toggle"` puts it behind a button. */
|
|
671
|
+
tableView?: boolean | "toggle";
|
|
672
|
+
showTableLabel?: string;
|
|
673
|
+
hideTableLabel?: string;
|
|
674
|
+
noDataLabel?: string;
|
|
675
|
+
/** Accessible name of the loading spinner. */
|
|
676
|
+
loadingLabel?: string;
|
|
677
|
+
/** Names the figure when it has no visible title. */
|
|
678
|
+
ariaLabel?: string;
|
|
679
|
+
children: ReactNode | ((args: ChartContainerRenderArgs) => ReactNode);
|
|
680
|
+
}
|
|
681
|
+
/**
|
|
682
|
+
* The frame every chart of the kit is drawn in.
|
|
683
|
+
*
|
|
684
|
+
* It owns what is identical from one chart to the next — measured width,
|
|
685
|
+
* caption, legend slot, loading and empty states, and the data table toggle —
|
|
686
|
+
* so that a chart component is left with its geometry and nothing else.
|
|
687
|
+
*
|
|
688
|
+
* The plot area is a render prop: a chart cannot lay itself out before the
|
|
689
|
+
* container has been measured.
|
|
690
|
+
*/
|
|
691
|
+
declare function ChartContainer({ title, description, height, width: fixedWidth, size, legend, legendPosition, actions, loading, empty, emptyState, table, tableView, showTableLabel, hideTableLabel, noDataLabel, loadingLabel, ariaLabel, children, className, ...props }: ChartContainerProps): react_jsx_runtime.JSX.Element;
|
|
692
|
+
|
|
693
|
+
type ChartAxisOrientation = "bottom" | "left";
|
|
694
|
+
interface ChartAxisProps extends Omit<ComponentPropsWithoutRef<"g">, "children"> {
|
|
695
|
+
/** `bottom` draws the category or time axis, `left` the value axis. */
|
|
696
|
+
orientation: ChartAxisOrientation;
|
|
697
|
+
ticks: ChartTick[];
|
|
698
|
+
/** Length of the axis in pixels. */
|
|
699
|
+
length: number;
|
|
700
|
+
/** Draws the axis line itself. */
|
|
701
|
+
showLine?: boolean;
|
|
702
|
+
/** Length of the small mark next to each label. */
|
|
703
|
+
tickSize?: number;
|
|
704
|
+
/** Gap between that mark and its label. */
|
|
705
|
+
tickPadding?: number;
|
|
706
|
+
/** Caption of the axis. */
|
|
707
|
+
label?: string;
|
|
708
|
+
size?: ChartSize;
|
|
709
|
+
}
|
|
710
|
+
/**
|
|
711
|
+
* One axis, drawn from the origin of the group it sits in — the caller
|
|
712
|
+
* translates that group to the bottom-left corner of the drawing area.
|
|
713
|
+
*
|
|
714
|
+
* Labels wear text colours, never a series colour: a light categorical hue is
|
|
715
|
+
* unreadable as text on the surface.
|
|
716
|
+
*/
|
|
717
|
+
declare function ChartAxis({ orientation, ticks, length, showLine, tickSize, tickPadding, label, size, className, ...props }: ChartAxisProps): react_jsx_runtime.JSX.Element;
|
|
718
|
+
|
|
719
|
+
interface ChartGridProps extends ComponentPropsWithoutRef<"g"> {
|
|
720
|
+
/** Width of the drawing area. */
|
|
721
|
+
width: number;
|
|
722
|
+
/** Height of the drawing area. */
|
|
723
|
+
height: number;
|
|
724
|
+
/** Vertical offsets of the horizontal lines — usually the y-axis ticks. */
|
|
725
|
+
horizontal?: number[];
|
|
726
|
+
/** Horizontal offsets of the vertical lines. */
|
|
727
|
+
vertical?: number[];
|
|
728
|
+
}
|
|
729
|
+
/**
|
|
730
|
+
* The grid behind the marks.
|
|
731
|
+
*
|
|
732
|
+
* Solid hairlines, one step off the surface. Never dashed: dashing reads as
|
|
733
|
+
* "projection" or "threshold", which is meaning the grid does not carry.
|
|
734
|
+
*/
|
|
735
|
+
declare function ChartGrid({ width, height, horizontal, vertical, className, ...props }: ChartGridProps): react_jsx_runtime.JSX.Element;
|
|
736
|
+
|
|
737
|
+
/** Shape of the swatch. It mirrors the mark: a line for lines, a block for fills. */
|
|
738
|
+
type ChartLegendMarker = "line" | "rect" | "dot";
|
|
739
|
+
interface ChartLegendProps extends Omit<ComponentPropsWithoutRef<"ul">, "onToggle"> {
|
|
740
|
+
items: ChartLegendItem[];
|
|
741
|
+
position?: ChartLegendPosition;
|
|
742
|
+
marker?: ChartLegendMarker;
|
|
743
|
+
/** Makes each entry a button that shows or hides its series. */
|
|
744
|
+
onToggle?: (key: string) => void;
|
|
745
|
+
size?: ChartSize;
|
|
746
|
+
}
|
|
747
|
+
/**
|
|
748
|
+
* The legend.
|
|
749
|
+
*
|
|
750
|
+
* Present as soon as a chart draws two series or more: it is the identity
|
|
751
|
+
* channel a reader can rely on, colour matching alone never being enough. A
|
|
752
|
+
* single-series chart needs none — its title already says what is plotted.
|
|
753
|
+
*
|
|
754
|
+
* The labels wear text colours; identity comes from the swatch beside them.
|
|
755
|
+
*/
|
|
756
|
+
declare function ChartLegend({ items, position, marker, onToggle, size, className, ...props }: ChartLegendProps): react_jsx_runtime.JSX.Element | null;
|
|
757
|
+
|
|
758
|
+
interface ChartTooltipProps extends ComponentPropsWithoutRef<"div"> {
|
|
759
|
+
/** Position inside the chart container, in pixels. */
|
|
760
|
+
x: number;
|
|
761
|
+
y: number;
|
|
762
|
+
/** Renders nothing when `false`. */
|
|
763
|
+
visible?: boolean;
|
|
764
|
+
/** Used to flip the tooltip before it runs past the right edge. */
|
|
765
|
+
containerWidth?: number;
|
|
766
|
+
/** Gap between the pointer and the tooltip. */
|
|
767
|
+
offset?: number;
|
|
768
|
+
}
|
|
769
|
+
/**
|
|
770
|
+
* The hover readout.
|
|
771
|
+
*
|
|
772
|
+
* Positioned inside the chart container rather than portalled: it needs no
|
|
773
|
+
* focus management, it scrolls with the chart, and it stays out of the
|
|
774
|
+
* floating-layer bookkeeping dialogs rely on. The container must therefore
|
|
775
|
+
* keep its overflow visible.
|
|
776
|
+
*
|
|
777
|
+
* A tooltip only ever enhances: every value it shows is also reachable from
|
|
778
|
+
* the data table, so nothing is gated behind a hover.
|
|
779
|
+
*/
|
|
780
|
+
declare function ChartTooltip({ x, y, visible, containerWidth, offset, className, style, children, ...props }: ChartTooltipProps): react_jsx_runtime.JSX.Element | null;
|
|
781
|
+
interface ChartTooltipContentProps {
|
|
782
|
+
/** Usually the x value under the pointer. */
|
|
783
|
+
title?: ReactNode;
|
|
784
|
+
/** Every visible series at that position. */
|
|
785
|
+
points: ChartPoint[];
|
|
786
|
+
}
|
|
787
|
+
/**
|
|
788
|
+
* Default body of a tooltip: one row per series, value first.
|
|
789
|
+
*
|
|
790
|
+
* The legend puts the name first because the reader is looking for a series;
|
|
791
|
+
* here they already have the series and want the number, so the hierarchy is
|
|
792
|
+
* inverted.
|
|
793
|
+
*/
|
|
794
|
+
declare function ChartTooltipContent({ title, points }: ChartTooltipContentProps): react_jsx_runtime.JSX.Element;
|
|
795
|
+
|
|
796
|
+
interface ChartTableViewProps extends ComponentPropsWithoutRef<"div"> {
|
|
797
|
+
data: ChartDatum[];
|
|
798
|
+
series: ChartSeries[];
|
|
799
|
+
/** Field the rows are keyed on — the chart's x axis. */
|
|
800
|
+
xKey: string;
|
|
801
|
+
/** Header of the first column. Defaults to `xKey`. */
|
|
802
|
+
xLabel?: string;
|
|
803
|
+
formatX?: (value: ChartXValue, index: number) => string;
|
|
804
|
+
formatValue?: (value: number) => string;
|
|
805
|
+
/** Screen-reader caption. Say what the chart shows, not that it is a table. */
|
|
806
|
+
caption?: string;
|
|
807
|
+
emptyLabel?: string;
|
|
808
|
+
}
|
|
809
|
+
/**
|
|
810
|
+
* The data table twin of a chart.
|
|
811
|
+
*
|
|
812
|
+
* Every chart of the kit can render one, and that is what keeps the charts
|
|
813
|
+
* honest: no value is reachable through hovering alone, colour never carries
|
|
814
|
+
* meaning on its own, and a screen reader gets the numbers rather than a
|
|
815
|
+
* description of a picture.
|
|
816
|
+
*/
|
|
817
|
+
declare function ChartTableView({ data, series, xKey, xLabel, formatX, formatValue, caption, emptyLabel, className, ...props }: ChartTableViewProps): react_jsx_runtime.JSX.Element;
|
|
818
|
+
|
|
819
|
+
/**
|
|
820
|
+
* Width a chart draws at before its container has been measured.
|
|
821
|
+
*
|
|
822
|
+
* There is always a first paint with no measurement: on the server, and on the
|
|
823
|
+
* client before the effect runs. Rendering at zero there would mean an empty
|
|
824
|
+
* SVG on every server render and in every jsdom test — where `ResizeObserver`
|
|
825
|
+
* is mocked and never fires. A plausible width keeps the first frame usable.
|
|
826
|
+
*/
|
|
827
|
+
declare const DEFAULT_CHART_WIDTH = 640;
|
|
828
|
+
interface UseChartSizeOptions {
|
|
829
|
+
/** Fixes the width. The container is then never measured. */
|
|
830
|
+
width?: number;
|
|
831
|
+
/** Width used until the container reports one. */
|
|
832
|
+
fallbackWidth?: number;
|
|
833
|
+
}
|
|
834
|
+
interface UseChartSizeResult<T extends HTMLElement> {
|
|
835
|
+
/** Attach to the element whose width the chart should follow. */
|
|
836
|
+
ref: RefObject<T | null>;
|
|
837
|
+
width: number;
|
|
838
|
+
/** `false` while the width is still the fallback. */
|
|
839
|
+
measured: boolean;
|
|
840
|
+
}
|
|
841
|
+
/**
|
|
842
|
+
* Follows the width of the element `ref` is attached to.
|
|
843
|
+
*
|
|
844
|
+
* Height stays a prop: a chart that also grew vertically with its container
|
|
845
|
+
* would reflow its own axis labels on every resize.
|
|
846
|
+
*/
|
|
847
|
+
declare function useChartSize<T extends HTMLElement = HTMLDivElement>(options?: UseChartSizeOptions): UseChartSizeResult<T>;
|
|
848
|
+
|
|
849
|
+
/**
|
|
850
|
+
* Number of categorical slots the palette holds.
|
|
851
|
+
*
|
|
852
|
+
* Eight is not a round number picked for looks: past it, a generated hue is
|
|
853
|
+
* indistinguishable from an existing slot for a colour-blind reader. A ninth
|
|
854
|
+
* series is folded into an "Other" bucket, faceted into several charts, or
|
|
855
|
+
* given a second channel (shape, texture) — never a ninth colour.
|
|
856
|
+
*/
|
|
857
|
+
declare const CHART_PALETTE_SIZE = 8;
|
|
858
|
+
/**
|
|
859
|
+
* The eight slots, in the order they are assigned.
|
|
860
|
+
*
|
|
861
|
+
* The order is the safety mechanism — it was picked among the orderings that
|
|
862
|
+
* keep every neighbouring pair distinguishable under simulated protanopia and
|
|
863
|
+
* deuteranopia, in both themes. The values live in `src/styles/index.css`, so
|
|
864
|
+
* an application can rebrand the kit without forking a component.
|
|
865
|
+
*/
|
|
866
|
+
declare const CHART_SERIES_COLORS: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)", "var(--color-chart-6)", "var(--color-chart-7)", "var(--color-chart-8)"];
|
|
867
|
+
/** Grey used for de-emphasised series and for the "Other" bucket. */
|
|
868
|
+
declare const CHART_MUTED_COLOR = "var(--color-chart-muted)";
|
|
869
|
+
/**
|
|
870
|
+
* Number of series a chart can carry when any two marks may end up side by
|
|
871
|
+
* side — a scatter or bubble plot. Neighbouring bars and lines only ever
|
|
872
|
+
* compare adjacent slots, which all eight clear; with every pair in play, only
|
|
873
|
+
* the first three do.
|
|
874
|
+
*/
|
|
875
|
+
declare const CHART_ALL_PAIRS_LIMIT = 3;
|
|
876
|
+
/**
|
|
877
|
+
* Colour of the series sitting at `index`.
|
|
878
|
+
*
|
|
879
|
+
* Colour follows the series' position in the `series` array — its identity —
|
|
880
|
+
* so hiding or filtering one series never repaints the others.
|
|
881
|
+
*/
|
|
882
|
+
declare function getSeriesColor(index: number, override?: string): string;
|
|
883
|
+
/**
|
|
884
|
+
* Colour of a series, taking the chart's `emphasis` into account: the
|
|
885
|
+
* emphasised series keeps its slot, every other one drops to grey.
|
|
886
|
+
*/
|
|
887
|
+
declare function resolveSeriesColor(series: ChartSeries, index: number, emphasis?: string): string;
|
|
888
|
+
/** Label shown for a series — its own, or its key as a fallback. */
|
|
889
|
+
declare function getSeriesLabel(series: ChartSeries): string;
|
|
890
|
+
/** Builds the legend entries of a series list, colours already resolved. */
|
|
891
|
+
declare function toLegendItems(series: ChartSeries[], emphasis?: string): ChartLegendItem[];
|
|
892
|
+
|
|
381
893
|
interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "size" | "onChange" | "type"> {
|
|
382
894
|
checked?: boolean;
|
|
383
895
|
defaultChecked?: boolean;
|
|
@@ -1374,6 +1886,43 @@ declare namespace Label {
|
|
|
1374
1886
|
var displayName: string;
|
|
1375
1887
|
}
|
|
1376
1888
|
|
|
1889
|
+
interface LineChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWithoutRef<"figure">, keyof CartesianChartBaseProps | "children" | "title"> {
|
|
1890
|
+
curve?: ChartCurve;
|
|
1891
|
+
/**
|
|
1892
|
+
* Dashes every series from this x value on.
|
|
1893
|
+
*
|
|
1894
|
+
* One series, two path segments: a projection is the same measurement
|
|
1895
|
+
* continued, and drawing it as a separate series would claim otherwise.
|
|
1896
|
+
*/
|
|
1897
|
+
forecastFrom?: ChartXValue;
|
|
1898
|
+
/** Caption above the line that separates the measured past from the forecast. */
|
|
1899
|
+
forecastLabel?: string;
|
|
1900
|
+
/** `auto` draws the points when they have room to breathe. */
|
|
1901
|
+
markers?: "none" | "auto" | "always";
|
|
1902
|
+
/** Draws through the gaps instead of breaking the line. */
|
|
1903
|
+
connectNulls?: boolean;
|
|
1904
|
+
referenceLines?: ChartReferenceLine[];
|
|
1905
|
+
/** Lets the legend show and hide series. */
|
|
1906
|
+
legendToggle?: boolean;
|
|
1907
|
+
margin?: Partial<ChartMargin>;
|
|
1908
|
+
/** BCP 47 tag used to format the axes and the tooltip. */
|
|
1909
|
+
locale?: string;
|
|
1910
|
+
/** Describes the plot for assistive technology. The table view carries the values. */
|
|
1911
|
+
plotLabel?: string;
|
|
1912
|
+
}
|
|
1913
|
+
/**
|
|
1914
|
+
* Change over time.
|
|
1915
|
+
*
|
|
1916
|
+
* Unlike a bar chart, the value axis does **not** anchor at zero by default:
|
|
1917
|
+
* a line is read for its slope, not for the length of its marks. Pass
|
|
1918
|
+
* `y={{ includeZero: true }}` when the absolute level is the point.
|
|
1919
|
+
*
|
|
1920
|
+
* There is deliberately no second value axis. Two measures on two scales
|
|
1921
|
+
* invent a correlation the data does not carry; plot them as two charts, or
|
|
1922
|
+
* index both to a common base.
|
|
1923
|
+
*/
|
|
1924
|
+
declare function LineChart({ data, series, x, y, height, width, size, grid, legend, tooltip, tableView, emphasis, title, description, loading, emptyState, onPointClick, curve, forecastFrom, forecastLabel, markers, connectNulls, referenceLines, legendToggle, margin, locale, plotLabel, className, ...props }: LineChartProps): react_jsx_runtime.JSX.Element;
|
|
1925
|
+
|
|
1377
1926
|
interface ModalProps {
|
|
1378
1927
|
isOpen: boolean;
|
|
1379
1928
|
onClose: () => void;
|
|
@@ -1453,6 +2002,58 @@ interface PaginationProps extends Omit<ComponentPropsWithoutRef<"nav">, "onChang
|
|
|
1453
2002
|
}
|
|
1454
2003
|
declare function Pagination({ page, totalPages, onPageChange, size, variant, showFirstLast, siblings, boundaries, disabled, labels, totalItems, pageSize, pageSizeOptions, onPageSizeChange, className, ...props }: PaginationProps): react_jsx_runtime.JSX.Element;
|
|
1455
2004
|
|
|
2005
|
+
interface PieChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
2006
|
+
data: ChartDatum[];
|
|
2007
|
+
/** Field holding the name of each slice. */
|
|
2008
|
+
x: ChartXAxisConfig;
|
|
2009
|
+
/** Field holding the value of each slice. */
|
|
2010
|
+
value: string;
|
|
2011
|
+
variant?: "pie" | "donut";
|
|
2012
|
+
/** Share of the outer radius left open. Defaults to the donut ratio. */
|
|
2013
|
+
innerRadius?: number;
|
|
2014
|
+
/** Slices past this fold into a single bucket. */
|
|
2015
|
+
maxSlices?: number;
|
|
2016
|
+
otherLabel?: string;
|
|
2017
|
+
sort?: "none" | "asc" | "desc";
|
|
2018
|
+
/** Draws each slice's name outside the ring, on a leader line. */
|
|
2019
|
+
showLabels?: boolean;
|
|
2020
|
+
/** The figure a ring holds in its middle. */
|
|
2021
|
+
centerLabel?: {
|
|
2022
|
+
value: ReactNode;
|
|
2023
|
+
label?: ReactNode;
|
|
2024
|
+
};
|
|
2025
|
+
height?: number;
|
|
2026
|
+
width?: number;
|
|
2027
|
+
size?: ChartSize;
|
|
2028
|
+
legend?: boolean | ChartLegendPosition;
|
|
2029
|
+
tooltip?: boolean | ((point: ChartPoint & {
|
|
2030
|
+
share: number;
|
|
2031
|
+
}) => ReactNode);
|
|
2032
|
+
tableView?: boolean | "toggle";
|
|
2033
|
+
title?: ReactNode;
|
|
2034
|
+
description?: ReactNode;
|
|
2035
|
+
loading?: boolean;
|
|
2036
|
+
emptyState?: ReactNode;
|
|
2037
|
+
locale?: string;
|
|
2038
|
+
plotLabel?: string;
|
|
2039
|
+
onSliceClick?: (slice: {
|
|
2040
|
+
key: string;
|
|
2041
|
+
label: string;
|
|
2042
|
+
value: number;
|
|
2043
|
+
share: number;
|
|
2044
|
+
}) => void;
|
|
2045
|
+
}
|
|
2046
|
+
/**
|
|
2047
|
+
* Proportions across a handful of categories.
|
|
2048
|
+
*
|
|
2049
|
+
* The one chart of the kit whose documentation has to say when *not* to use
|
|
2050
|
+
* it. Two slices is a stat tile. Close values are a bar chart — the eye
|
|
2051
|
+
* compares angles badly. It earns its place for part-to-whole at a glance,
|
|
2052
|
+
* over six slices at most, which is why the tail folds into a single bucket
|
|
2053
|
+
* rather than taking a seventh colour.
|
|
2054
|
+
*/
|
|
2055
|
+
declare function PieChart({ data, x, value, variant, innerRadius, maxSlices, otherLabel, sort, showLabels, centerLabel, height, width, size, legend, tooltip, tableView, title, description, loading, emptyState, locale, plotLabel, onSliceClick, className, ...props }: PieChartProps): react_jsx_runtime.JSX.Element;
|
|
2056
|
+
|
|
1456
2057
|
type ProgressBarSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
1457
2058
|
type ProgressBarColor = "default" | "primary" | "success" | "warning" | "error" | "info";
|
|
1458
2059
|
type ProgressBarVariant = "default" | "striped" | "gradient";
|
|
@@ -1664,6 +2265,95 @@ declare function SidebarItem({ icon, label, badge, badgeColor, active, disabled,
|
|
|
1664
2265
|
declare function SidebarSubMenu({ icon, label, badge, defaultOpen, className, children, }: SidebarSubMenuProps): react_jsx_runtime.JSX.Element;
|
|
1665
2266
|
declare function SidebarToggle({ className }: SidebarToggleProps): react_jsx_runtime.JSX.Element;
|
|
1666
2267
|
|
|
2268
|
+
interface SparklineProps extends Omit<ComponentPropsWithoutRef<"svg">, "width" | "height"> {
|
|
2269
|
+
/** Values in order. `null` marks a gap, which breaks the line. */
|
|
2270
|
+
data: readonly (number | null | undefined)[];
|
|
2271
|
+
width?: number;
|
|
2272
|
+
height?: number;
|
|
2273
|
+
curve?: ChartCurve;
|
|
2274
|
+
/** Any CSS colour. Defaults to the first palette slot. */
|
|
2275
|
+
color?: string;
|
|
2276
|
+
strokeWidth?: number;
|
|
2277
|
+
/** Adds a wash under the line. */
|
|
2278
|
+
area?: boolean;
|
|
2279
|
+
/** Marks the current value with a dot. */
|
|
2280
|
+
emphasizeLast?: boolean;
|
|
2281
|
+
/**
|
|
2282
|
+
* Fixes the bounds. Two sparklines only compare if they share a domain —
|
|
2283
|
+
* without this, each one rescales to its own values.
|
|
2284
|
+
*/
|
|
2285
|
+
domain?: [number, number];
|
|
2286
|
+
/**
|
|
2287
|
+
* Names the sparkline for assistive technology. Left out, the sparkline is
|
|
2288
|
+
* hidden from it: inside a stat tile the value beside it is the information,
|
|
2289
|
+
* and a second reading of the same figure is noise.
|
|
2290
|
+
*/
|
|
2291
|
+
ariaLabel?: string;
|
|
2292
|
+
}
|
|
2293
|
+
/**
|
|
2294
|
+
* A small, axis-less line showing the shape of a series.
|
|
2295
|
+
*
|
|
2296
|
+
* Unlike a chart, it does **not** anchor its scale at zero: a sparkline is
|
|
2297
|
+
* read for its shape, and forcing a zero baseline flattens exactly the
|
|
2298
|
+
* variation it exists to show.
|
|
2299
|
+
*
|
|
2300
|
+
* No hooks, so it renders on the server and inside a table cell as happily as
|
|
2301
|
+
* in a stat tile.
|
|
2302
|
+
*/
|
|
2303
|
+
declare function Sparkline({ data, width, height, curve, color, strokeWidth, area, emphasizeLast, domain, ariaLabel, className, ...props }: SparklineProps): react_jsx_runtime.JSX.Element;
|
|
2304
|
+
|
|
2305
|
+
type StatCardDeltaDirection = "up" | "down" | "flat";
|
|
2306
|
+
/** Which way is the good way. A falling cost is good news. */
|
|
2307
|
+
type StatCardDeltaTone = "up" | "down" | "neutral";
|
|
2308
|
+
interface StatCardDelta {
|
|
2309
|
+
/** A ratio by default: `0.124` reads as "+12.4 %". */
|
|
2310
|
+
value: number;
|
|
2311
|
+
/** What the comparison is against — "vs last month". */
|
|
2312
|
+
period?: ReactNode;
|
|
2313
|
+
/** Defaults to `up`: a rise is good news. */
|
|
2314
|
+
goodWhen?: StatCardDeltaTone;
|
|
2315
|
+
/** Overrides the direction derived from the sign. */
|
|
2316
|
+
direction?: StatCardDeltaDirection;
|
|
2317
|
+
/** Replaces the default signed percentage. */
|
|
2318
|
+
format?: (value: number) => string;
|
|
2319
|
+
}
|
|
2320
|
+
interface StatCardProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
|
|
2321
|
+
label: ReactNode;
|
|
2322
|
+
/** A number is formatted; anything else is rendered as given. */
|
|
2323
|
+
value: ReactNode;
|
|
2324
|
+
/** Formats a numeric `value`. Defaults to grouped, then compact past 10 000. */
|
|
2325
|
+
format?: (value: number) => string;
|
|
2326
|
+
delta?: StatCardDelta;
|
|
2327
|
+
/** Values behind the sparkline. Left out, no sparkline is drawn. */
|
|
2328
|
+
trend?: readonly (number | null | undefined)[];
|
|
2329
|
+
trendColor?: string;
|
|
2330
|
+
icon?: ReactNode;
|
|
2331
|
+
size?: ChartSize;
|
|
2332
|
+
loading?: boolean;
|
|
2333
|
+
/** `plain` drops the border and the padding, for a tile inside another surface. */
|
|
2334
|
+
variant?: "card" | "plain";
|
|
2335
|
+
footer?: ReactNode;
|
|
2336
|
+
}
|
|
2337
|
+
/**
|
|
2338
|
+
* A single value with its variation, and optionally the shape that led to it.
|
|
2339
|
+
*
|
|
2340
|
+
* This is the right form for one number — a one-bar bar chart is not. No
|
|
2341
|
+
* hooks, so it renders on the server.
|
|
2342
|
+
*/
|
|
2343
|
+
declare function StatCard({ label, value, format, delta, trend, trendColor, icon, size, loading, variant, footer, className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
|
|
2344
|
+
|
|
2345
|
+
interface StatCardGroupProps extends ComponentPropsWithoutRef<"div"> {
|
|
2346
|
+
/** Columns from the `sm` breakpoint up. Below it, the tiles stack. */
|
|
2347
|
+
columns?: 1 | 2 | 3 | 4;
|
|
2348
|
+
}
|
|
2349
|
+
/**
|
|
2350
|
+
* A row of stat tiles that share their edges and baselines.
|
|
2351
|
+
*
|
|
2352
|
+
* A grid rather than a flex row: the tiles keep the same width and the same
|
|
2353
|
+
* height whatever they hold, so the row reads as one object.
|
|
2354
|
+
*/
|
|
2355
|
+
declare function StatCardGroup({ columns, className, children, ...props }: StatCardGroupProps): react_jsx_runtime.JSX.Element;
|
|
2356
|
+
|
|
1667
2357
|
type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
|
|
1668
2358
|
type SkeletonAnimation = "pulse" | "wave" | "none";
|
|
1669
2359
|
interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
|
|
@@ -1924,6 +2614,36 @@ declare namespace FooterSocialLink {
|
|
|
1924
2614
|
var displayName: string;
|
|
1925
2615
|
}
|
|
1926
2616
|
|
|
2617
|
+
interface ScatterChartProps extends Omit<CartesianChartBaseProps, "grid">, Omit<ComponentPropsWithoutRef<"figure">, keyof CartesianChartBaseProps | "children" | "title"> {
|
|
2618
|
+
grid?: ChartGridLines;
|
|
2619
|
+
/** Sizes each mark by a third field, turning the plot into a bubble chart. */
|
|
2620
|
+
bubble?: {
|
|
2621
|
+
key: string;
|
|
2622
|
+
range?: [number, number];
|
|
2623
|
+
};
|
|
2624
|
+
/** Fits a least-squares line through every visible point. */
|
|
2625
|
+
trendLine?: boolean;
|
|
2626
|
+
/** Splits the plot on a value of each axis. */
|
|
2627
|
+
quadrants?: {
|
|
2628
|
+
x?: number;
|
|
2629
|
+
y?: number;
|
|
2630
|
+
};
|
|
2631
|
+
pointRadius?: number;
|
|
2632
|
+
legendToggle?: boolean;
|
|
2633
|
+
margin?: Partial<ChartMargin>;
|
|
2634
|
+
locale?: string;
|
|
2635
|
+
plotLabel?: string;
|
|
2636
|
+
}
|
|
2637
|
+
/**
|
|
2638
|
+
* Correlation between two numeric measures.
|
|
2639
|
+
*
|
|
2640
|
+
* The one chart form where any two marks can end up side by side, which is a
|
|
2641
|
+
* stricter test of the palette than neighbouring bars or lines: only the first
|
|
2642
|
+
* three slots stay tellable apart there. Past three series, facet the chart or
|
|
2643
|
+
* fold the tail — a fourth colour would not be distinguishable.
|
|
2644
|
+
*/
|
|
2645
|
+
declare function ScatterChart({ data, series, x, y, height, width, size, grid, legend, tooltip, tableView, emphasis, title, description, loading, emptyState, onPointClick, bubble, trendLine, quadrants, pointRadius, legendToggle, margin, locale, plotLabel, className, ...props }: ScatterChartProps): react_jsx_runtime.JSX.Element;
|
|
2646
|
+
|
|
1927
2647
|
type SchemaFieldType = "text" | "varchar" | "char" | "int2" | "int4" | "int8" | "serial" | "bigserial" | "float4" | "float8" | "numeric" | "decimal" | "bool" | "date" | "time" | "timestamp" | "timestamptz" | "uuid" | "json" | "jsonb" | "bytea" | (string & {});
|
|
1928
2648
|
type SchemaField = {
|
|
1929
2649
|
id: string;
|
|
@@ -2353,6 +3073,16 @@ interface UILabels {
|
|
|
2353
3073
|
cancel: string;
|
|
2354
3074
|
/** Shown by `<HelpButton markdown editable>` when no `markdownEditor` is passed. */
|
|
2355
3075
|
markdownEditorUnavailable: string;
|
|
3076
|
+
/** Accessible name of the button revealing a chart's data table. */
|
|
3077
|
+
chartShowTable: string;
|
|
3078
|
+
/** Accessible name of the button hiding a chart's data table. */
|
|
3079
|
+
chartHideTable: string;
|
|
3080
|
+
/** Shown in place of a chart that has no data to draw. */
|
|
3081
|
+
chartNoData: string;
|
|
3082
|
+
/** Accessible name of the spinner shown while a chart loads its first data. */
|
|
3083
|
+
chartLoading: string;
|
|
3084
|
+
/** Bucket the smallest slices of a pie chart are folded into. */
|
|
3085
|
+
chartOther: string;
|
|
2356
3086
|
}
|
|
2357
3087
|
/** English labels, used when no provider is mounted. */
|
|
2358
3088
|
declare const defaultUILabels: UILabels;
|
|
@@ -2438,4 +3168,4 @@ declare function isFocusable(element: HTMLElement): boolean;
|
|
|
2438
3168
|
*/
|
|
2439
3169
|
declare function getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
2440
3170
|
|
|
2441
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionVariant, AdvanceDetachable, type AdvanceDetachableProps, type AdvanceDetachableRef, type AdvanceDetachableRenderContext, type AggregateFunction, type Align, Avatar, type AvatarProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerType, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarColor, type CalendarDateRange, type CalendarDayState, type CalendarLabels, type CalendarMode, type CalendarProps, type CalendarSize, type CalendarWeekStart, Card, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, CheckboxGroup, CheckboxGroupItem, type CheckboxGroupItemProps, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, CircularProgress, type CircularProgressColor, type CircularProgressProps, type CircularProgressSize, type CircularProgressThickness, type ColumnDef, DEFAULT_FIELD_TYPES, DataGrid, type DataGridMode, type DataGridProps, type DataGridRef, type Density, Detachable, type DetachableProps, type DetachableRef, DeviceMockup, type DeviceMockupProps, type DeviceOrientation, type DeviceSize, type DeviceTheme, type DeviceType, type DialogA11yProps, type DialogInitialFocus, type DialogReturnFocus, Divider, type DividerOrientation, type DividerProps, type DividerTextAlign, type DividerVariant, Drawer, type DrawerPosition, type DrawerProps, type DrawerSize, Dropdown, DropdownCheckboxItem, type DropdownCheckboxItemProps, DropdownContent, type DropdownContentProps, type DropdownContextValue, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, type DropdownProps, DropdownRadioGroup, type DropdownRadioGroupProps, DropdownRadioItem, type DropdownRadioItemProps, DropdownSeparator, type DropdownSeparatorProps, DropdownSubMenu, DropdownSubMenuContent, type DropdownSubMenuContentProps, type DropdownSubMenuProps, DropdownSubMenuTrigger, type DropdownSubMenuTriggerProps, DropdownTrigger, type DropdownTriggerProps, FOCUSABLE_SELECTOR, FileSelector, type FileSelectorProps, type FilterOperator, type FilterType, type FilterValue, Footer, FooterBottom, type FooterBottomProps, FooterColumn, type FooterColumnProps, FooterLink, type FooterLinkProps, type FooterProps, FooterSection, type FooterSectionProps, FooterSocial, FooterSocialLink, type FooterSocialLinkProps, type FooterSocialProps, Header, type HeaderProps, HelpButton, type HelpButtonProps, INERT_IGNORE_ATTRIBUTE, ImageUploader, type ImageUploaderProps, Indicator, type IndicatorColor, type IndicatorPlacement, type IndicatorProps, type IndicatorSize, type IndicatorVariant, Input, type InputProps, Label, type LabelColor, type LabelProps, type LabelSize, type LabelVariant, type LabelWeight, MarkdownEditorComponent, type MentionData, MentionInput, type MentionInputProps, type MentionInputValue, type MentionSuggestion, Modal, type ModalProps, type NavItem, type NodeRegistryEntry, NumberInput, type NumberInputProps, Pagination, type PaginationConfig, type PaginationProps, type Position, ProgressBar, type ProgressBarColor, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, RadioButton, type RadioButtonProps, SchemaEditor, type SchemaEditorProps, type SchemaEditorRef, type SchemaField, type SchemaFieldEvent, type SchemaFieldType, type SchemaRelation, type SchemaRelationCardinality, type SchemaTable, type SchemaTableEvent, type SchemaValue, type SchemaViewport, Select, type SelectOption, type SelectProps, type SelectedFile, type SelectionMode, type Side, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarPosition, type SidebarProps, SidebarSubMenu, type SidebarSubMenuProps, SidebarToggle, type SidebarToggleProps, type SidebarVariant, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonVariant, Slider, type SliderColor, type SliderMark, type SliderProps, type SliderSize, type SortDirection, type SortState, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsColor, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, type TabsSize, TabsTrigger, type TabsTriggerProps, type TabsVariant, Toast, type ToastPosition, type ToastProps, type ToastType, type ToastVariant, Tooltip, type TooltipPosition, type TooltipProps, type TooltipSize, type TooltipTrigger, type TooltipVariant, type UILabels, UILabelsProvider, type UILabelsProviderProps, type UseDialogA11yOptions, type UseDialogA11yResult, type UseKeyboardNavigationOptions, type UsePositioningOptions, WithHelpButton, type WithHelpButtonProps, Wizard, WizardActions, type WizardActionsProps, type WizardColor, WizardContent, type WizardContentProps, type WizardContextValue, type WizardDirection, WizardNext, type WizardNextProps, type WizardOrientation, WizardPanel, type WizardPanelProps, WizardPrevious, type WizardPreviousProps, type WizardProps, type WizardSize, type WizardStepChangeMeta, type WizardStepDefinition, type WizardStepStatus, WizardSteps, type WizardStepsProps, type WizardVariant, type WorkflowDirection, type WorkflowEdge, WorkflowEditor, type WorkflowEditorProps, type WorkflowEditorRef, type WorkflowNode, type WorkflowNodeAction, type WorkflowNodeActionEvent, type WorkflowNodeActionPosition, type WorkflowNodeEvent, type WorkflowPort, type WorkflowValue, type WorkflowViewport, autoLayoutTables, cn, createDefaultField, createDefaultTable, defaultUILabels, findOwnedLayers, frenchUILabels, generateFieldId, generateRelationId, generateSQL, generateTableId, getFocusableElements, hideOthers, isElementVisible, isFocusable, registerFloatingLayer, useClickOutside, useDialogA11y, useDropdownContext, useFocusItem, useKeyboardNavigation, usePositioning, useSidebar, useUILabels, useWizard };
|
|
3171
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionVariant, AdvanceDetachable, type AdvanceDetachableProps, type AdvanceDetachableRef, type AdvanceDetachableRenderContext, type AggregateFunction, type Align, AreaChart, type AreaChartProps, Avatar, type AvatarProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerType, type BannerVariant, BarChart, type BarChartOrientation, type BarChartProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_ALL_PAIRS_LIMIT, CHART_MUTED_COLOR, CHART_PALETTE_SIZE, CHART_SERIES_COLORS, Calendar, type CalendarColor, type CalendarDateRange, type CalendarDayState, type CalendarLabels, type CalendarMode, type CalendarProps, type CalendarSize, type CalendarWeekStart, Card, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, CardTitle, type CardTitleProps, type CartesianChartBaseProps, ChartAxis, type ChartAxisOrientation, type ChartAxisProps, ChartContainer, type ChartContainerProps, type ChartContainerRenderArgs, type ChartCurve, type ChartDatum, type ChartDimensions, ChartGrid, type ChartGridLines, type ChartGridProps, ChartLegend, type ChartLegendItem, type ChartLegendMarker, type ChartLegendPosition, type ChartLegendProps, type ChartMargin, type ChartPoint, type ChartPointEvent, type ChartReferenceLine, type ChartScaleType, type ChartSeries, type ChartSize, ChartTableView, type ChartTableViewProps, type ChartTick, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipPayload, type ChartTooltipProps, type ChartXAxisConfig, type ChartXValue, type ChartYAxisConfig, Checkbox, CheckboxGroup, CheckboxGroupItem, type CheckboxGroupItemProps, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, CircularProgress, type CircularProgressColor, type CircularProgressProps, type CircularProgressSize, type CircularProgressThickness, type ColumnDef, DEFAULT_CHART_WIDTH, DEFAULT_FIELD_TYPES, DataGrid, type DataGridMode, type DataGridProps, type DataGridRef, type Density, Detachable, type DetachableProps, type DetachableRef, DeviceMockup, type DeviceMockupProps, type DeviceOrientation, type DeviceSize, type DeviceTheme, type DeviceType, type DialogA11yProps, type DialogInitialFocus, type DialogReturnFocus, Divider, type DividerOrientation, type DividerProps, type DividerTextAlign, type DividerVariant, Drawer, type DrawerPosition, type DrawerProps, type DrawerSize, Dropdown, DropdownCheckboxItem, type DropdownCheckboxItemProps, DropdownContent, type DropdownContentProps, type DropdownContextValue, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, type DropdownProps, DropdownRadioGroup, type DropdownRadioGroupProps, DropdownRadioItem, type DropdownRadioItemProps, DropdownSeparator, type DropdownSeparatorProps, DropdownSubMenu, DropdownSubMenuContent, type DropdownSubMenuContentProps, type DropdownSubMenuProps, DropdownSubMenuTrigger, type DropdownSubMenuTriggerProps, DropdownTrigger, type DropdownTriggerProps, FOCUSABLE_SELECTOR, FileSelector, type FileSelectorProps, type FilterOperator, type FilterType, type FilterValue, Footer, FooterBottom, type FooterBottomProps, FooterColumn, type FooterColumnProps, FooterLink, type FooterLinkProps, type FooterProps, FooterSection, type FooterSectionProps, FooterSocial, FooterSocialLink, type FooterSocialLinkProps, type FooterSocialProps, Header, type HeaderProps, HelpButton, type HelpButtonProps, INERT_IGNORE_ATTRIBUTE, ImageUploader, type ImageUploaderProps, Indicator, type IndicatorColor, type IndicatorPlacement, type IndicatorProps, type IndicatorSize, type IndicatorVariant, Input, type InputProps, Label, type LabelColor, type LabelProps, type LabelSize, type LabelVariant, type LabelWeight, LineChart, type LineChartProps, MarkdownEditorComponent, type MentionData, MentionInput, type MentionInputProps, type MentionInputValue, type MentionSuggestion, Modal, type ModalProps, type NavItem, type NodeRegistryEntry, NumberInput, type NumberInputProps, Pagination, type PaginationConfig, type PaginationProps, PieChart, type PieChartProps, type Position, ProgressBar, type ProgressBarColor, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, RadioButton, type RadioButtonProps, ScatterChart, type ScatterChartProps, SchemaEditor, type SchemaEditorProps, type SchemaEditorRef, type SchemaField, type SchemaFieldEvent, type SchemaFieldType, type SchemaRelation, type SchemaRelationCardinality, type SchemaTable, type SchemaTableEvent, type SchemaValue, type SchemaViewport, Select, type SelectOption, type SelectProps, type SelectedFile, type SelectionMode, type Side, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarPosition, type SidebarProps, SidebarSubMenu, type SidebarSubMenuProps, SidebarToggle, type SidebarToggleProps, type SidebarVariant, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonVariant, Slider, type SliderColor, type SliderMark, type SliderProps, type SliderSize, type SortDirection, type SortState, Sparkline, type SparklineProps, StatCard, type StatCardDelta, type StatCardDeltaDirection, type StatCardDeltaTone, StatCardGroup, type StatCardGroupProps, type StatCardProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsColor, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, type TabsSize, TabsTrigger, type TabsTriggerProps, type TabsVariant, Toast, type ToastPosition, type ToastProps, type ToastType, type ToastVariant, Tooltip, type TooltipPosition, type TooltipProps, type TooltipSize, type TooltipTrigger, type TooltipVariant, type UILabels, UILabelsProvider, type UILabelsProviderProps, type UseChartSizeOptions, type UseChartSizeResult, type UseDialogA11yOptions, type UseDialogA11yResult, type UseKeyboardNavigationOptions, type UsePositioningOptions, WithHelpButton, type WithHelpButtonProps, Wizard, WizardActions, type WizardActionsProps, type WizardColor, WizardContent, type WizardContentProps, type WizardContextValue, type WizardDirection, WizardNext, type WizardNextProps, type WizardOrientation, WizardPanel, type WizardPanelProps, WizardPrevious, type WizardPreviousProps, type WizardProps, type WizardSize, type WizardStepChangeMeta, type WizardStepDefinition, type WizardStepStatus, WizardSteps, type WizardStepsProps, type WizardVariant, type WorkflowDirection, type WorkflowEdge, WorkflowEditor, type WorkflowEditorProps, type WorkflowEditorRef, type WorkflowNode, type WorkflowNodeAction, type WorkflowNodeActionEvent, type WorkflowNodeActionPosition, type WorkflowNodeEvent, type WorkflowPort, type WorkflowValue, type WorkflowViewport, autoLayoutTables, cn, createDefaultField, createDefaultTable, defaultUILabels, findOwnedLayers, frenchUILabels, generateFieldId, generateRelationId, generateSQL, generateTableId, getFocusableElements, getSeriesColor, getSeriesLabel, hideOthers, isElementVisible, isFocusable, registerFloatingLayer, resolveSeriesColor, toLegendItems, useChartSize, useClickOutside, useDialogA11y, useDropdownContext, useFocusItem, useKeyboardNavigation, usePositioning, useSidebar, useUILabels, useWizard };
|