@synertech/ui 0.41.0 → 0.43.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/.claude/skills/use-synertech-ui/SKILL.md +131 -0
- package/dist/index.cjs +9 -9
- package/dist/index.d.cts +1170 -9
- package/dist/index.d.ts +1170 -9
- package/dist/index.js +9 -9
- package/dist/styles.css +66 -0
- package/package.json +1 -1
package/dist/index.d.ts
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, RefObject, ChangeEvent, MouseEvent, Dispatch, SetStateAction, HTMLAttributes, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
|
|
3
|
+
import react__default, { ReactNode, ReactElement, ComponentPropsWithoutRef, CSSProperties, RefObject, ChangeEvent, MouseEvent, Dispatch, SetStateAction, HTMLAttributes, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
|
|
4
4
|
import { M as MarkdownEditorComponent } from './types-99-Ej5og.js';
|
|
5
5
|
export { a as MarkdownEditorProps } from './types-99-Ej5og.js';
|
|
6
6
|
|
|
@@ -144,6 +144,16 @@ interface ChartSeries {
|
|
|
144
144
|
hidden?: boolean;
|
|
145
145
|
/** Draws the line dashed — for a projection, a target, or a modelled value. */
|
|
146
146
|
dashed?: boolean;
|
|
147
|
+
/**
|
|
148
|
+
* Mark this series is drawn with, where a chart can draw more than one.
|
|
149
|
+
*
|
|
150
|
+
* Only `BarChart` reads it, and only to lift a series out of the bars and
|
|
151
|
+
* draw it as a line over them — a volume and its trend on one panel. Both
|
|
152
|
+
* marks keep sharing the single value axis: a second axis lets two measures
|
|
153
|
+
* of unrelated magnitudes cross wherever the scaling happens to put them,
|
|
154
|
+
* which reads as a correlation the data never claimed.
|
|
155
|
+
*/
|
|
156
|
+
type?: "bar" | "line";
|
|
147
157
|
}
|
|
148
158
|
interface ChartXAxisConfig {
|
|
149
159
|
/** Field read on each datum. */
|
|
@@ -233,12 +243,54 @@ interface ChartReferenceLine {
|
|
|
233
243
|
color?: string;
|
|
234
244
|
dashed?: boolean;
|
|
235
245
|
}
|
|
246
|
+
/** What every annotation carries. */
|
|
247
|
+
interface ChartAnnotationBase {
|
|
248
|
+
/** The comment itself. Without it an annotation marks a spot and says nothing. */
|
|
249
|
+
label?: string;
|
|
250
|
+
/** Any CSS colour. Defaults to a muted grey, which is what keeps it chrome. */
|
|
251
|
+
color?: string;
|
|
252
|
+
}
|
|
253
|
+
/** A single observation worth commenting, marked where it sits on the plot. */
|
|
254
|
+
interface ChartPointAnnotation extends ChartAnnotationBase {
|
|
255
|
+
type: "point";
|
|
256
|
+
x: ChartXValue;
|
|
257
|
+
/** Value the marker is pinned to, read on the chart's own value axis. */
|
|
258
|
+
y: number;
|
|
259
|
+
}
|
|
260
|
+
/** A moment: a release, a price change, the day the tracking broke. */
|
|
261
|
+
interface ChartLineAnnotation extends ChartAnnotationBase {
|
|
262
|
+
type: "line";
|
|
263
|
+
x: ChartXValue;
|
|
264
|
+
/** Solid instead of dashed — for a boundary rather than an event. */
|
|
265
|
+
dashed?: boolean;
|
|
266
|
+
}
|
|
267
|
+
/** A stretch of the category axis: a campaign, an outage, a closed quarter. */
|
|
268
|
+
interface ChartBandAnnotation extends ChartAnnotationBase {
|
|
269
|
+
type: "band";
|
|
270
|
+
from: ChartXValue;
|
|
271
|
+
to: ChartXValue;
|
|
272
|
+
}
|
|
273
|
+
type ChartAnnotation = ChartPointAnnotation | ChartLineAnnotation | ChartBandAnnotation;
|
|
236
274
|
/** An entry of the legend. */
|
|
237
275
|
interface ChartLegendItem {
|
|
238
276
|
key: string;
|
|
239
277
|
label: string;
|
|
240
278
|
color: string;
|
|
241
279
|
hidden?: boolean;
|
|
280
|
+
/**
|
|
281
|
+
* Overrides the legend's shared swatch shape for this entry alone.
|
|
282
|
+
*
|
|
283
|
+
* What a combined chart needs: the swatch has to mirror the mark, so the
|
|
284
|
+
* series drawn as a line cannot wear the same block as the bars beside it.
|
|
285
|
+
*/
|
|
286
|
+
marker?: "line" | "rect" | "dot";
|
|
287
|
+
/**
|
|
288
|
+
* Texture slot the entry wears, when the chart draws its marks with them.
|
|
289
|
+
*
|
|
290
|
+
* The swatch has to carry both channels the plot carries, or the texture is
|
|
291
|
+
* a pattern the reader cannot map onto anything.
|
|
292
|
+
*/
|
|
293
|
+
pattern?: number;
|
|
242
294
|
}
|
|
243
295
|
/** A tick, already placed on its axis. */
|
|
244
296
|
interface ChartTick {
|
|
@@ -300,6 +352,25 @@ interface AreaChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWit
|
|
|
300
352
|
baseline?: number;
|
|
301
353
|
connectNulls?: boolean;
|
|
302
354
|
referenceLines?: ChartReferenceLine[];
|
|
355
|
+
/**
|
|
356
|
+
* What happened, drawn where it happened: a release, a campaign, an outage.
|
|
357
|
+
*
|
|
358
|
+
* The counterpart of `referenceLines`, which marks a threshold on the value
|
|
359
|
+
* axis. Bands are drawn under the areas, rules and pinned points over them.
|
|
360
|
+
*/
|
|
361
|
+
annotations?: ChartAnnotation[];
|
|
362
|
+
/**
|
|
363
|
+
* Draws each band with a texture on top of its colour.
|
|
364
|
+
*
|
|
365
|
+
* The channel a reader falls back on when the hue fails them: severe colour
|
|
366
|
+
* vision deficiency, a grayscale print, a forced-colours theme. Off by
|
|
367
|
+
* default — it is an accessibility option, not a decoration.
|
|
368
|
+
*
|
|
369
|
+
* Only the bands of a stack take one. An overlay's fill is a 12% wash, thin
|
|
370
|
+
* enough that no texture survives it, and there the identity is carried by
|
|
371
|
+
* the edge line rather than by the surface under it.
|
|
372
|
+
*/
|
|
373
|
+
patterns?: boolean;
|
|
303
374
|
legendToggle?: boolean;
|
|
304
375
|
margin?: Partial<ChartMargin>;
|
|
305
376
|
locale?: string;
|
|
@@ -316,7 +387,7 @@ interface AreaChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWit
|
|
|
316
387
|
* bands, separated by 2px of the surface colour rather than by a border drawn
|
|
317
388
|
* around each one.
|
|
318
389
|
*/
|
|
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;
|
|
390
|
+
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, annotations, patterns, legendToggle, margin, locale, plotLabel, className, ...props }: AreaChartProps): react_jsx_runtime.JSX.Element;
|
|
320
391
|
|
|
321
392
|
interface AvatarProps extends ComponentPropsWithoutRef<"div"> {
|
|
322
393
|
src?: string;
|
|
@@ -354,6 +425,55 @@ declare namespace Badge {
|
|
|
354
425
|
*/
|
|
355
426
|
type CartesianOrientation = "vertical" | "horizontal";
|
|
356
427
|
|
|
428
|
+
/**
|
|
429
|
+
* Binning, for the one chart that counts rather than reads a measure.
|
|
430
|
+
*
|
|
431
|
+
* A histogram is a bar chart whose categories the chart works out for itself,
|
|
432
|
+
* so the bucketing lives next to the scales rather than inside a component.
|
|
433
|
+
*/
|
|
434
|
+
/** One bucket of a histogram. */
|
|
435
|
+
interface HistogramBin {
|
|
436
|
+
/** Lower edge, included. */
|
|
437
|
+
from: number;
|
|
438
|
+
/** Upper edge, excluded — except on the last bin, which closes on it. */
|
|
439
|
+
to: number;
|
|
440
|
+
count: number;
|
|
441
|
+
/** `true` for the last bin: the only one that includes its upper edge. */
|
|
442
|
+
last: boolean;
|
|
443
|
+
}
|
|
444
|
+
/**
|
|
445
|
+
* How the buckets are cut: a count, explicit edges, or `true` for a count
|
|
446
|
+
* derived from the sample size.
|
|
447
|
+
*/
|
|
448
|
+
type BinSpec = number | readonly number[] | boolean;
|
|
449
|
+
/**
|
|
450
|
+
* Sturges' rule: `ceil(log2 n) + 1`.
|
|
451
|
+
*
|
|
452
|
+
* Not the most refined estimator — Freedman-Diaconis adapts to the spread —
|
|
453
|
+
* but it is the one a reader recognises, it never explodes on a heavy tail,
|
|
454
|
+
* and a histogram whose bin count changes with a single outlier is worse than
|
|
455
|
+
* one that is slightly too coarse.
|
|
456
|
+
*/
|
|
457
|
+
declare function sturgesBins(count: number): number;
|
|
458
|
+
/**
|
|
459
|
+
* The edges a set of values would be bucketed on.
|
|
460
|
+
*
|
|
461
|
+
* Every edge lands on a round step — a bin running from 17.4 to 23.9 is
|
|
462
|
+
* arithmetically correct and unreadable on an axis — and among the round
|
|
463
|
+
* steps, the one whose bin count lands nearest what was asked for.
|
|
464
|
+
*/
|
|
465
|
+
declare function binEdges(values: readonly number[], spec?: BinSpec): number[];
|
|
466
|
+
/**
|
|
467
|
+
* Counts a set of values into buckets.
|
|
468
|
+
*
|
|
469
|
+
* Every bin is half-open — `[from, to)` — except the last, which closes on its
|
|
470
|
+
* upper edge. Without that, the single largest observation of a sample falls
|
|
471
|
+
* out of the histogram entirely.
|
|
472
|
+
*/
|
|
473
|
+
declare function binValues(values: readonly (number | null | undefined)[], spec?: BinSpec): HistogramBin[];
|
|
474
|
+
|
|
475
|
+
/** Resets the one-shot warnings. Test helper. */
|
|
476
|
+
declare function resetBarChartWarnings(): void;
|
|
357
477
|
type BarChartOrientation = CartesianOrientation;
|
|
358
478
|
interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWithoutRef<"figure">, keyof CartesianChartBaseProps | "children" | "title"> {
|
|
359
479
|
/**
|
|
@@ -381,13 +501,59 @@ interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWith
|
|
|
381
501
|
* above is not good.
|
|
382
502
|
*/
|
|
383
503
|
diverging?: boolean | number | string;
|
|
504
|
+
/**
|
|
505
|
+
* Turns the chart into a histogram: the distribution of one numeric field.
|
|
506
|
+
*
|
|
507
|
+
* The chart then reads `x.key` on every row as a measurement, buckets those
|
|
508
|
+
* measurements, and draws how many fell in each bucket. `series` must hold a
|
|
509
|
+
* single entry, which names and colours the count — its `key` is the header
|
|
510
|
+
* of the count column, not a field read on the data.
|
|
511
|
+
*
|
|
512
|
+
* `true` picks a bucket count from the sample size, a number asks for that
|
|
513
|
+
* many, and an array of edges cuts them by hand (uneven widths allowed). The
|
|
514
|
+
* bars then touch, separated only by the surface gap: the axis underneath is
|
|
515
|
+
* a continuous measure, and air between the bars would read as empty ranges.
|
|
516
|
+
*
|
|
517
|
+
* Where a scatter plot shows a relation, a histogram shows a shape — which
|
|
518
|
+
* is why `sort`, `stack` and `diverging` are ignored here: the buckets have
|
|
519
|
+
* an order of their own and reordering them destroys the shape.
|
|
520
|
+
*/
|
|
521
|
+
bins?: BinSpec;
|
|
522
|
+
/**
|
|
523
|
+
* Shape of the line drawn for a series marked `type: "line"`.
|
|
524
|
+
*
|
|
525
|
+
* Only read by a combined chart; the bars have no curve.
|
|
526
|
+
*/
|
|
527
|
+
curve?: ChartCurve;
|
|
384
528
|
/** Caps the thickness of a mark. Never fills the slot: the leftover is air. */
|
|
385
529
|
barSize?: number;
|
|
386
|
-
/** Orders the categories by their total. */
|
|
530
|
+
/** Orders the categories by their total. Ignored by a histogram. */
|
|
387
531
|
sort?: "none" | "asc" | "desc";
|
|
388
532
|
/** Draws the value at the end of each bar, where it fits without collision. */
|
|
389
533
|
showValues?: boolean;
|
|
390
534
|
referenceLines?: ChartReferenceLine[];
|
|
535
|
+
/**
|
|
536
|
+
* What happened, drawn where it happened: a release, a campaign, an outage.
|
|
537
|
+
*
|
|
538
|
+
* Read on the category axis, so a **vertical** chart alone takes them: the
|
|
539
|
+
* horizontal one runs its categories up the side, and a moment placed there
|
|
540
|
+
* is not a moment any more. They are ignored, with a warning, when the bars
|
|
541
|
+
* are laid out horizontally.
|
|
542
|
+
*/
|
|
543
|
+
annotations?: ChartAnnotation[];
|
|
544
|
+
/**
|
|
545
|
+
* Draws each series with a texture on top of its colour.
|
|
546
|
+
*
|
|
547
|
+
* The channel a reader falls back on when the hue fails them: severe colour
|
|
548
|
+
* vision deficiency, a grayscale print, a forced-colours theme. Off by
|
|
549
|
+
* default — it is an accessibility option, not a decoration, and a textured
|
|
550
|
+
* chart nobody needs textured is just a busier chart.
|
|
551
|
+
*
|
|
552
|
+
* Ignored where the bars are painted by their own value (a lone series
|
|
553
|
+
* against a reference): the ramp measures a magnitude, and a texture can
|
|
554
|
+
* only say which series a mark belongs to.
|
|
555
|
+
*/
|
|
556
|
+
patterns?: boolean;
|
|
391
557
|
legendToggle?: boolean;
|
|
392
558
|
margin?: Partial<ChartMargin>;
|
|
393
559
|
locale?: string;
|
|
@@ -404,7 +570,7 @@ interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWith
|
|
|
404
570
|
* is read for the length of its mark, and an axis starting at 40 exaggerates
|
|
405
571
|
* every difference on the chart.
|
|
406
572
|
*/
|
|
407
|
-
declare function BarChart({ data, series, x, y, height, width, size, grid, legend, tooltip, tableView, emphasis, title, description, loading, emptyState, onPointClick, orientation, stack, diverging, barSize, sort, showValues, referenceLines, legendToggle, margin, locale, plotLabel, className, ...props }: BarChartProps): react_jsx_runtime.JSX.Element;
|
|
573
|
+
declare function BarChart({ data, series, x, y, height, width, size, grid, legend, tooltip, tableView, emphasis, title, description, loading, emptyState, onPointClick, orientation, stack, diverging, bins, curve, barSize, sort, showValues, referenceLines, annotations, patterns, legendToggle, margin, locale, plotLabel, className, ...props }: BarChartProps): react_jsx_runtime.JSX.Element;
|
|
408
574
|
|
|
409
575
|
type BannerVariant = "notification" | "hero" | "promotion";
|
|
410
576
|
type BannerType = "info" | "success" | "warning" | "error" | "default";
|
|
@@ -730,6 +896,245 @@ declare namespace CardDescription {
|
|
|
730
896
|
var displayName: string;
|
|
731
897
|
}
|
|
732
898
|
|
|
899
|
+
/**
|
|
900
|
+
* Quantiles, and the five-number summary a box plot is drawn from.
|
|
901
|
+
*
|
|
902
|
+
* Written here rather than inside the component because it is the part that
|
|
903
|
+
* can be wrong without any rendering test noticing: a median off by one index
|
|
904
|
+
* still draws a perfectly plausible box.
|
|
905
|
+
*/
|
|
906
|
+
/**
|
|
907
|
+
* Quantile `p` (0 to 1) of an ascending list, interpolating between the two
|
|
908
|
+
* neighbouring observations.
|
|
909
|
+
*
|
|
910
|
+
* This is the R-7 / `numpy.percentile` definition — the one a reader will get
|
|
911
|
+
* if they check the numbers in a spreadsheet, which is the only property that
|
|
912
|
+
* matters for a library.
|
|
913
|
+
*/
|
|
914
|
+
declare function quantileSorted(sorted: readonly number[], p: number): number;
|
|
915
|
+
/** Same, on a list that has not been sorted yet. */
|
|
916
|
+
declare function quantile(values: readonly number[], p: number): number;
|
|
917
|
+
/** The five-number summary, plus what falls outside the whiskers. */
|
|
918
|
+
interface BoxStats {
|
|
919
|
+
/** Number of observations the summary was computed from. */
|
|
920
|
+
count: number;
|
|
921
|
+
/** Smallest observation, outliers included. */
|
|
922
|
+
min: number;
|
|
923
|
+
/** Largest observation, outliers included. */
|
|
924
|
+
max: number;
|
|
925
|
+
q1: number;
|
|
926
|
+
median: number;
|
|
927
|
+
q3: number;
|
|
928
|
+
/** `q3 - q1`: the width of the box, and the unit the whiskers are measured in. */
|
|
929
|
+
iqr: number;
|
|
930
|
+
/** End of the lower whisker: the smallest observation still within reach. */
|
|
931
|
+
lower: number;
|
|
932
|
+
/** End of the upper whisker. */
|
|
933
|
+
upper: number;
|
|
934
|
+
/** Observations beyond the whiskers, in ascending order. */
|
|
935
|
+
outliers: number[];
|
|
936
|
+
}
|
|
937
|
+
/**
|
|
938
|
+
* Turns a set of observations into the box a plot draws.
|
|
939
|
+
*
|
|
940
|
+
* The whiskers stop at the furthest observation within `whisker` times the
|
|
941
|
+
* interquartile range — Tukey's rule — rather than at the extremes. Whiskers
|
|
942
|
+
* drawn to the extremes cannot show an outlier at all: the point that matters
|
|
943
|
+
* most becomes the end of a line like any other.
|
|
944
|
+
*
|
|
945
|
+
* Returns `null` for an empty set, which a chart draws as a gap. A category
|
|
946
|
+
* with no observations is not a category with a median of zero.
|
|
947
|
+
*/
|
|
948
|
+
declare function boxStats(values: readonly (number | null | undefined)[], whisker?: number): BoxStats | null;
|
|
949
|
+
|
|
950
|
+
/** Fields holding an already-computed summary, when the observations are not at hand. */
|
|
951
|
+
interface BoxPlotQuantileKeys {
|
|
952
|
+
/** Lower whisker end. Defaults to `q1` when absent. */
|
|
953
|
+
min?: string;
|
|
954
|
+
q1: string;
|
|
955
|
+
median: string;
|
|
956
|
+
q3: string;
|
|
957
|
+
/** Upper whisker end. Defaults to `q3` when absent. */
|
|
958
|
+
max?: string;
|
|
959
|
+
}
|
|
960
|
+
/** One box, as the tooltip and the click handler see it. */
|
|
961
|
+
interface BoxPlotBox {
|
|
962
|
+
index: number;
|
|
963
|
+
x: ChartXValue;
|
|
964
|
+
label: string;
|
|
965
|
+
/** `null` when the category holds no observation — drawn as a gap. */
|
|
966
|
+
stats: BoxStats | null;
|
|
967
|
+
/** Arithmetic mean. Only available when the raw observations were given. */
|
|
968
|
+
mean: number | null;
|
|
969
|
+
datum: ChartDatum;
|
|
970
|
+
}
|
|
971
|
+
interface BoxPlotProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
972
|
+
/** One row per category compared. */
|
|
973
|
+
data: ChartDatum[];
|
|
974
|
+
/** Field holding the name of each category. */
|
|
975
|
+
x: ChartXAxisConfig;
|
|
976
|
+
y?: ChartYAxisConfig;
|
|
977
|
+
/**
|
|
978
|
+
* Field holding the observations of a category, as an array of numbers.
|
|
979
|
+
*
|
|
980
|
+
* The chart then computes the quartiles, the whiskers and the outliers
|
|
981
|
+
* itself — which is the only way it can know what an outlier is.
|
|
982
|
+
*/
|
|
983
|
+
values?: string;
|
|
984
|
+
/**
|
|
985
|
+
* Fields holding an already-computed summary, for the case where the raw
|
|
986
|
+
* observations never reach the browser.
|
|
987
|
+
*
|
|
988
|
+
* The whiskers then stop where the data says, and no outlier can be drawn:
|
|
989
|
+
* Tukey's fences need the observations, not their summary.
|
|
990
|
+
*/
|
|
991
|
+
quantiles?: BoxPlotQuantileKeys;
|
|
992
|
+
/**
|
|
993
|
+
* How many interquartile ranges the whiskers reach before a point counts as
|
|
994
|
+
* an outlier. Tukey's 1.5 by default.
|
|
995
|
+
*/
|
|
996
|
+
whisker?: number;
|
|
997
|
+
orientation?: CartesianOrientation;
|
|
998
|
+
/** Caps the thickness of a box. */
|
|
999
|
+
boxSize?: number;
|
|
1000
|
+
/** Draws the observations beyond the whiskers. */
|
|
1001
|
+
showOutliers?: boolean;
|
|
1002
|
+
/**
|
|
1003
|
+
* Marks the mean with a diamond, beside the median line.
|
|
1004
|
+
*
|
|
1005
|
+
* The distance between the two is the reading: a mean pulled away from the
|
|
1006
|
+
* median is the shape of the tail, which is the whole reason this chart
|
|
1007
|
+
* exists rather than a bar of averages.
|
|
1008
|
+
*/
|
|
1009
|
+
showMean?: boolean;
|
|
1010
|
+
/** Colour of the boxes. Defaults to the first palette slot. */
|
|
1011
|
+
color?: string;
|
|
1012
|
+
referenceLines?: ChartReferenceLine[];
|
|
1013
|
+
height?: number;
|
|
1014
|
+
width?: number;
|
|
1015
|
+
size?: ChartSize;
|
|
1016
|
+
grid?: ChartGridLines;
|
|
1017
|
+
tooltip?: boolean | ((box: BoxPlotBox) => ReactNode);
|
|
1018
|
+
tableView?: boolean | "toggle";
|
|
1019
|
+
title?: ReactNode;
|
|
1020
|
+
description?: ReactNode;
|
|
1021
|
+
loading?: boolean;
|
|
1022
|
+
emptyState?: ReactNode;
|
|
1023
|
+
margin?: Partial<ChartMargin>;
|
|
1024
|
+
locale?: string;
|
|
1025
|
+
plotLabel?: string;
|
|
1026
|
+
format?: (value: number) => string;
|
|
1027
|
+
onBoxClick?: (box: BoxPlotBox) => void;
|
|
1028
|
+
}
|
|
1029
|
+
/**
|
|
1030
|
+
* What a mean hides.
|
|
1031
|
+
*
|
|
1032
|
+
* Median, quartiles, whiskers and the observations that fall outside them.
|
|
1033
|
+
* A bar of averages says two categories are alike; a box plot is what shows
|
|
1034
|
+
* that one of them is two populations wearing a trench coat.
|
|
1035
|
+
*
|
|
1036
|
+
* The whiskers stop at the furthest observation within 1.5 interquartile
|
|
1037
|
+
* ranges — Tukey's rule — rather than at the extremes. Whiskers drawn to the
|
|
1038
|
+
* extremes cannot show an outlier at all: the point that matters most becomes
|
|
1039
|
+
* the end of a line like any other. That needs the observations, so a chart
|
|
1040
|
+
* given a precomputed summary draws no outlier and says nothing it cannot
|
|
1041
|
+
* know.
|
|
1042
|
+
*
|
|
1043
|
+
* One box per category: comparing two groups side by side is `ChartFacets`
|
|
1044
|
+
* with a panel each, which keeps them on a shared scale without asking the
|
|
1045
|
+
* reader to hold two colour legends at once.
|
|
1046
|
+
*/
|
|
1047
|
+
declare function BoxPlot({ data, x, y, values, quantiles, whisker, orientation, boxSize, showOutliers, showMean, color, referenceLines, height, width, size, grid, tooltip, tableView, title, description, loading, emptyState, margin, locale, plotLabel, format, onBoxClick, className, ...props }: BoxPlotProps): react_jsx_runtime.JSX.Element;
|
|
1048
|
+
|
|
1049
|
+
/** One session, as the tooltip and the click handler see it. */
|
|
1050
|
+
interface Candle {
|
|
1051
|
+
index: number;
|
|
1052
|
+
x: ChartXValue;
|
|
1053
|
+
label: string;
|
|
1054
|
+
open: number | null;
|
|
1055
|
+
high: number | null;
|
|
1056
|
+
low: number | null;
|
|
1057
|
+
close: number | null;
|
|
1058
|
+
/** `close - open`. `null` when either end is missing. */
|
|
1059
|
+
change: number | null;
|
|
1060
|
+
/** `true` when the session closed at or above where it opened. */
|
|
1061
|
+
rising: boolean;
|
|
1062
|
+
datum: ChartDatum;
|
|
1063
|
+
}
|
|
1064
|
+
interface CandlestickChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
1065
|
+
/** One row per session. */
|
|
1066
|
+
data: ChartDatum[];
|
|
1067
|
+
/** Field holding the session's label — usually a date. */
|
|
1068
|
+
x: ChartXAxisConfig;
|
|
1069
|
+
y?: ChartYAxisConfig;
|
|
1070
|
+
/** Field holding the opening figure. */
|
|
1071
|
+
open: string;
|
|
1072
|
+
/** Field holding the highest figure reached. */
|
|
1073
|
+
high: string;
|
|
1074
|
+
/** Field holding the lowest figure reached. */
|
|
1075
|
+
low: string;
|
|
1076
|
+
/** Field holding the closing figure. */
|
|
1077
|
+
close: string;
|
|
1078
|
+
/** Caps the thickness of a body. */
|
|
1079
|
+
candleSize?: number;
|
|
1080
|
+
/**
|
|
1081
|
+
* Fills the body of a rising session instead of leaving it hollow.
|
|
1082
|
+
*
|
|
1083
|
+
* Off by default, and that default is an accessibility decision rather than
|
|
1084
|
+
* a stylistic one: hollow against filled is what carries the direction for
|
|
1085
|
+
* a reader who cannot separate green from red, which is the single worst
|
|
1086
|
+
* pair there is under colour vision deficiency.
|
|
1087
|
+
*/
|
|
1088
|
+
fillRising?: boolean;
|
|
1089
|
+
/** Replaces the two status colours. Any CSS colours. */
|
|
1090
|
+
colors?: {
|
|
1091
|
+
up?: string;
|
|
1092
|
+
down?: string;
|
|
1093
|
+
};
|
|
1094
|
+
referenceLines?: ChartReferenceLine[];
|
|
1095
|
+
height?: number;
|
|
1096
|
+
width?: number;
|
|
1097
|
+
size?: ChartSize;
|
|
1098
|
+
grid?: ChartGridLines;
|
|
1099
|
+
legend?: boolean | ChartLegendPosition;
|
|
1100
|
+
tooltip?: boolean | ((candle: Candle) => ReactNode);
|
|
1101
|
+
tableView?: boolean | "toggle";
|
|
1102
|
+
title?: ReactNode;
|
|
1103
|
+
description?: ReactNode;
|
|
1104
|
+
loading?: boolean;
|
|
1105
|
+
emptyState?: ReactNode;
|
|
1106
|
+
margin?: Partial<ChartMargin>;
|
|
1107
|
+
locale?: string;
|
|
1108
|
+
plotLabel?: string;
|
|
1109
|
+
openLabel?: string;
|
|
1110
|
+
highLabel?: string;
|
|
1111
|
+
lowLabel?: string;
|
|
1112
|
+
closeLabel?: string;
|
|
1113
|
+
riseLabel?: string;
|
|
1114
|
+
fallLabel?: string;
|
|
1115
|
+
format?: (value: number) => string;
|
|
1116
|
+
onCandleClick?: (candle: Candle) => void;
|
|
1117
|
+
}
|
|
1118
|
+
/**
|
|
1119
|
+
* Open, high, low and close, one mark per session.
|
|
1120
|
+
*
|
|
1121
|
+
* A narrow audience, and no other shape of the kit can stand in for it: four
|
|
1122
|
+
* figures per position, of which two are a range and two are an ordered pair
|
|
1123
|
+
* inside it. A line of closing prices throws away three quarters of that.
|
|
1124
|
+
*
|
|
1125
|
+
* The colours are the status pair, not the categorical palette: a rise and a
|
|
1126
|
+
* fall are not two identities a reader has to tell apart, they are the same
|
|
1127
|
+
* measurement pointing two ways. Green against red is also the worst pair
|
|
1128
|
+
* there is under colour vision deficiency, so the direction is carried a
|
|
1129
|
+
* second time by the shape of the body — hollow for a rise, filled for a
|
|
1130
|
+
* fall. Colour alone never says which way a session went.
|
|
1131
|
+
*
|
|
1132
|
+
* The value axis does not anchor at zero. A price is read for its level and
|
|
1133
|
+
* its movement; a share worth 180 dollars read from zero is a flat band at
|
|
1134
|
+
* the top of the plot.
|
|
1135
|
+
*/
|
|
1136
|
+
declare function CandlestickChart({ data, x, y, open, high, low, close, candleSize, fillRising, colors, referenceLines, height, width, size, grid, legend, tooltip, tableView, title, description, loading, emptyState, margin, locale, plotLabel, openLabel, highLabel, lowLabel, closeLabel, riseLabel, fallLabel, format, onCandleClick, className, ...props }: CandlestickChartProps): react_jsx_runtime.JSX.Element;
|
|
1137
|
+
|
|
733
1138
|
/** Geometry handed to the render prop once the container has been measured. */
|
|
734
1139
|
interface ChartContainerRenderArgs {
|
|
735
1140
|
width: number;
|
|
@@ -886,6 +1291,135 @@ interface ChartTooltipContentProps {
|
|
|
886
1291
|
*/
|
|
887
1292
|
declare function ChartTooltipContent({ title, points }: ChartTooltipContentProps): react_jsx_runtime.JSX.Element;
|
|
888
1293
|
|
|
1294
|
+
interface ChartAnnotationLayerProps {
|
|
1295
|
+
annotations: readonly ChartAnnotation[];
|
|
1296
|
+
/**
|
|
1297
|
+
* Where an x value lands along the category axis, or `null` when it is not
|
|
1298
|
+
* on the plot at all — an annotation for a date outside the window is
|
|
1299
|
+
* skipped rather than drawn on the edge.
|
|
1300
|
+
*/
|
|
1301
|
+
xAt: (value: ChartXValue) => number | null;
|
|
1302
|
+
/** Where a value lands along the value axis. */
|
|
1303
|
+
yAt: (value: number) => number;
|
|
1304
|
+
/** Size of the plot area. */
|
|
1305
|
+
width: number;
|
|
1306
|
+
height: number;
|
|
1307
|
+
/**
|
|
1308
|
+
* Width of a band on the category axis, `0` on a point placement.
|
|
1309
|
+
*
|
|
1310
|
+
* A band annotation covers whole categories, so it reaches half a band past
|
|
1311
|
+
* the centres its ends resolve to — otherwise "March to May" is drawn from
|
|
1312
|
+
* the middle of March to the middle of May.
|
|
1313
|
+
*/
|
|
1314
|
+
bandwidth?: number;
|
|
1315
|
+
/**
|
|
1316
|
+
* Which half of the layer to draw.
|
|
1317
|
+
*
|
|
1318
|
+
* `under` holds the bands and goes below the marks — a region the data sits
|
|
1319
|
+
* in, not over it. `over` holds the rules and the pinned points, which are
|
|
1320
|
+
* worthless hidden behind an area. A chart renders the component twice, once
|
|
1321
|
+
* on each side of its series.
|
|
1322
|
+
*/
|
|
1323
|
+
layer?: "under" | "over";
|
|
1324
|
+
}
|
|
1325
|
+
/**
|
|
1326
|
+
* The annotation layer: what happened, drawn where it happened.
|
|
1327
|
+
*
|
|
1328
|
+
* Laid out behind the marks for the bands and over them for the lines and the
|
|
1329
|
+
* points. A band is a region the data sits in and belongs under it; a line is
|
|
1330
|
+
* a boundary and is worthless hidden behind an area.
|
|
1331
|
+
*
|
|
1332
|
+
* Everything here is chrome by default — grey, thin, dashed. An annotation
|
|
1333
|
+
* that draws the eye more strongly than the data has become the chart.
|
|
1334
|
+
*/
|
|
1335
|
+
declare function ChartAnnotationLayer({ annotations, xAt, yAt, width, height, bandwidth, layer, }: ChartAnnotationLayerProps): react_jsx_runtime.JSX.Element | null;
|
|
1336
|
+
/**
|
|
1337
|
+
* The annotations, as one sentence for the chart's accessible name.
|
|
1338
|
+
*
|
|
1339
|
+
* An SVG marked `role="img"` exposes its name and nothing inside it, so a
|
|
1340
|
+
* caption drawn on the plot is invisible to a screen reader. The comments are
|
|
1341
|
+
* half of what an annotated chart says, so they are appended to the name the
|
|
1342
|
+
* chart already carries rather than left on the picture alone.
|
|
1343
|
+
*/
|
|
1344
|
+
declare function describeAnnotations(annotations: readonly ChartAnnotation[] | undefined, prefix: string): string;
|
|
1345
|
+
|
|
1346
|
+
/**
|
|
1347
|
+
* The colour a texture is cut through — the chart surface itself.
|
|
1348
|
+
*
|
|
1349
|
+
* Declared in `src/styles/index.css` under both theme scopes, so a stripe is
|
|
1350
|
+
* white on a white panel and gray-800 on a dark one without a component ever
|
|
1351
|
+
* asking which theme is on.
|
|
1352
|
+
*/
|
|
1353
|
+
declare const CHART_SURFACE_COLOR = "var(--color-chart-surface)";
|
|
1354
|
+
/**
|
|
1355
|
+
* The textures, in the order they are handed out.
|
|
1356
|
+
*
|
|
1357
|
+
* One per palette slot, and assigned the same way: by the series' position in
|
|
1358
|
+
* `series`, never by its rank. Hiding a series repaints nothing, and the
|
|
1359
|
+
* texture a reader learnt in the legend is still the one on the plot.
|
|
1360
|
+
*
|
|
1361
|
+
* Every hatch runs at 45° or its mirror at 135°, never horizontal and never
|
|
1362
|
+
* vertical: those two align with the gridlines and with the edges of the
|
|
1363
|
+
* marks, where they read as part of the chrome rather than as a fill. The
|
|
1364
|
+
* first slot is left solid — an untextured mark is itself a texture, and the
|
|
1365
|
+
* easiest of all to tell apart.
|
|
1366
|
+
*/
|
|
1367
|
+
declare const CHART_PATTERNS: readonly ["solid", "diagonal", "diagonal-reverse", "cross", "dots", "diagonal-wide", "diagonal-reverse-wide", "dots-wide"];
|
|
1368
|
+
type ChartPattern = (typeof CHART_PATTERNS)[number];
|
|
1369
|
+
/** The texture at `index`, wrapping around once past the last one. */
|
|
1370
|
+
declare function getPattern(index: number): ChartPattern;
|
|
1371
|
+
/**
|
|
1372
|
+
* Id of the SVG pattern a chart declared for its `index`-th series.
|
|
1373
|
+
*
|
|
1374
|
+
* The base is stripped down to id characters: `useId` returns `:r0:` on React
|
|
1375
|
+
* 18, and a fill pointing at `url(#:r0:-texture-1)` is a fragment reference
|
|
1376
|
+
* browsers are not obliged to resolve.
|
|
1377
|
+
*/
|
|
1378
|
+
declare function patternId(baseId: string, index: number): string;
|
|
1379
|
+
/**
|
|
1380
|
+
* The fill a mark wears.
|
|
1381
|
+
*
|
|
1382
|
+
* The texture when they are on and the slot has one, the flat colour
|
|
1383
|
+
* otherwise — so a chart calls this once and never branches itself.
|
|
1384
|
+
*/
|
|
1385
|
+
declare function patternFill(enabled: boolean, baseId: string, index: number, color: string): string;
|
|
1386
|
+
/** One texture to declare: the slot it belongs to, and the colour it paints. */
|
|
1387
|
+
interface ChartPatternEntry {
|
|
1388
|
+
/** Palette slot of the mark — what `patternFill` is called with. */
|
|
1389
|
+
slot: number;
|
|
1390
|
+
color: string;
|
|
1391
|
+
}
|
|
1392
|
+
interface ChartPatternDefsProps {
|
|
1393
|
+
/** Unique per chart instance — a `useId()`, so two charts never collide. */
|
|
1394
|
+
id: string;
|
|
1395
|
+
/**
|
|
1396
|
+
* The marks to declare a texture for.
|
|
1397
|
+
*
|
|
1398
|
+
* Keyed by slot rather than by position: a pie sorts its slices and a bar
|
|
1399
|
+
* chart hides some of its series, and in both the texture has to keep
|
|
1400
|
+
* following the identity it was handed out to.
|
|
1401
|
+
*/
|
|
1402
|
+
entries: readonly ChartPatternEntry[];
|
|
1403
|
+
}
|
|
1404
|
+
/**
|
|
1405
|
+
* The `<defs>` block holding one texture per series.
|
|
1406
|
+
*
|
|
1407
|
+
* A mark keeps its colour at full strength and the texture is *cut out* of it
|
|
1408
|
+
* in the surface colour, rather than painted over a washed-down fill: a
|
|
1409
|
+
* stacked band has to read as a quantity, and a fill dimmed to make room for
|
|
1410
|
+
* stripes stops doing that.
|
|
1411
|
+
*/
|
|
1412
|
+
declare function ChartPatternDefs({ id, entries }: ChartPatternDefsProps): react_jsx_runtime.JSX.Element;
|
|
1413
|
+
/**
|
|
1414
|
+
* The same texture, in CSS, for the HTML swatch of a legend.
|
|
1415
|
+
*
|
|
1416
|
+
* The legend and the plot have to carry the same two channels, or the texture
|
|
1417
|
+
* becomes noise the reader cannot map onto anything. A gradient reproduces the
|
|
1418
|
+
* SVG tile closely enough at swatch size, and it flips with the theme through
|
|
1419
|
+
* the same surface variable.
|
|
1420
|
+
*/
|
|
1421
|
+
declare function patternBackground(index: number, color: string): CSSProperties;
|
|
1422
|
+
|
|
889
1423
|
/**
|
|
890
1424
|
* Number of categorical slots the palette holds.
|
|
891
1425
|
*
|
|
@@ -906,6 +1440,8 @@ declare const CHART_PALETTE_SIZE = 8;
|
|
|
906
1440
|
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)"];
|
|
907
1441
|
/** Grey used for de-emphasised series and for the "Other" bucket. */
|
|
908
1442
|
declare const CHART_MUTED_COLOR = "var(--color-chart-muted)";
|
|
1443
|
+
declare const CHART_UP_COLOR = "var(--color-chart-up)";
|
|
1444
|
+
declare const CHART_DOWN_COLOR = "var(--color-chart-down)";
|
|
909
1445
|
/**
|
|
910
1446
|
* Number of series a chart can carry when any two marks may end up side by
|
|
911
1447
|
* side — a scatter or bubble plot. Neighbouring bars and lines only ever
|
|
@@ -927,8 +1463,14 @@ declare function getSeriesColor(index: number, override?: string): string;
|
|
|
927
1463
|
declare function resolveSeriesColor(series: ChartSeries, index: number, emphasis?: string): string;
|
|
928
1464
|
/** Label shown for a series — its own, or its key as a fallback. */
|
|
929
1465
|
declare function getSeriesLabel(series: ChartSeries): string;
|
|
930
|
-
/**
|
|
931
|
-
|
|
1466
|
+
/**
|
|
1467
|
+
* Builds the legend entries of a series list, colours already resolved.
|
|
1468
|
+
*
|
|
1469
|
+
* `patterns` mirrors the chart's own setting: when the marks are textured the
|
|
1470
|
+
* swatches have to be too, since the texture is the channel a reader falls
|
|
1471
|
+
* back on when the hue fails them.
|
|
1472
|
+
*/
|
|
1473
|
+
declare function toLegendItems(series: ChartSeries[], emphasis?: string, patterns?: boolean): ChartLegendItem[];
|
|
932
1474
|
/** One hue, light to dark: a continuous magnitude (a heat map). */
|
|
933
1475
|
declare const CHART_SEQUENTIAL_COLORS: readonly ["var(--color-chart-seq-1)", "var(--color-chart-seq-2)", "var(--color-chart-seq-3)", "var(--color-chart-seq-4)", "var(--color-chart-seq-5)", "var(--color-chart-seq-6)"];
|
|
934
1476
|
/** One hue in ordered steps: ranked bands, brackets, a funnel. */
|
|
@@ -1157,6 +1699,140 @@ declare function ChartFacets({ data, by, values, domain, includeZero, ticks, ord
|
|
|
1157
1699
|
/** Resets the one-shot panel-count warning. Test helper. */
|
|
1158
1700
|
declare function resetFacetWarnings(): void;
|
|
1159
1701
|
|
|
1702
|
+
interface ChartFilterBarProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
|
|
1703
|
+
/** Names the row for assistive technology. Defaults to the translated "Filters". */
|
|
1704
|
+
label?: string;
|
|
1705
|
+
/** Pushed to the far end of the row: an export, a refresh, a saved view. */
|
|
1706
|
+
actions?: ReactNode;
|
|
1707
|
+
/** Keeps the row on screen while a long dashboard scrolls under it. */
|
|
1708
|
+
sticky?: boolean;
|
|
1709
|
+
/** The rule under the row, which is what makes it read as a frame. */
|
|
1710
|
+
bordered?: boolean;
|
|
1711
|
+
size?: ChartSize;
|
|
1712
|
+
children: ReactNode;
|
|
1713
|
+
}
|
|
1714
|
+
/**
|
|
1715
|
+
* The filters, in one row above everything they frame.
|
|
1716
|
+
*
|
|
1717
|
+
* Not a chart and barely a component — a rule written down as a layout. A
|
|
1718
|
+
* dashboard filtered per card is a dashboard whose numbers stop agreeing: two
|
|
1719
|
+
* panels answer two questions and nothing on screen says so. One row, above
|
|
1720
|
+
* the charts, applying to all of them, is the only arrangement where a reader
|
|
1721
|
+
* can trust that two figures are comparable.
|
|
1722
|
+
*
|
|
1723
|
+
* It composes what the library already has — `ChartPeriodPicker` for the
|
|
1724
|
+
* window, `Select` and `Dropdown` for the dimensions — rather than growing
|
|
1725
|
+
* controls of its own.
|
|
1726
|
+
*
|
|
1727
|
+
* ```tsx
|
|
1728
|
+
* <ChartFilterBar actions={<Button size="sm">Export</Button>}>
|
|
1729
|
+
* <ChartPeriodPicker value={period} onChange={setPeriod} />
|
|
1730
|
+
* <Select size="sm" options={regions} value={region} onValueChange={setRegion} />
|
|
1731
|
+
* </ChartFilterBar>
|
|
1732
|
+
* ```
|
|
1733
|
+
*/
|
|
1734
|
+
declare function ChartFilterBar({ label, actions, sticky, bordered, size, children, className, ...props }: ChartFilterBarProps): react_jsx_runtime.JSX.Element;
|
|
1735
|
+
|
|
1736
|
+
/**
|
|
1737
|
+
* The periods a dashboard is read over, resolved to real dates.
|
|
1738
|
+
*
|
|
1739
|
+
* Pure functions on purpose: "the last 30 days" is the kind of thing that is
|
|
1740
|
+
* wrong by one day for a month before anybody notices, and it is much easier
|
|
1741
|
+
* to pin down here than through a rendered picker.
|
|
1742
|
+
*/
|
|
1743
|
+
/** The windows a filter row offers by name. */
|
|
1744
|
+
type ChartPeriodPreset = "7d" | "30d" | "90d" | "12m" | "mtd" | "qtd" | "ytd" | "custom";
|
|
1745
|
+
/** A resolved window: where it came from, and the two dates it covers. */
|
|
1746
|
+
interface ChartPeriod {
|
|
1747
|
+
/** The entry that produced it. `custom` when the dates were picked by hand. */
|
|
1748
|
+
preset: ChartPeriodPreset;
|
|
1749
|
+
from: Date;
|
|
1750
|
+
to: Date;
|
|
1751
|
+
}
|
|
1752
|
+
/** The presets a picker offers when it is not told otherwise. */
|
|
1753
|
+
declare const DEFAULT_CHART_PERIOD_PRESETS: readonly ChartPeriodPreset[];
|
|
1754
|
+
/** Midnight at the start of a day, in the reader's own time zone. */
|
|
1755
|
+
declare function startOfDay(date: Date): Date;
|
|
1756
|
+
/**
|
|
1757
|
+
* The last millisecond of a day.
|
|
1758
|
+
*
|
|
1759
|
+
* A window ending at midnight drops everything that happened during its last
|
|
1760
|
+
* day — the single most common off-by-one in a dashboard.
|
|
1761
|
+
*/
|
|
1762
|
+
declare function endOfDay(date: Date): Date;
|
|
1763
|
+
/**
|
|
1764
|
+
* Resolves a named window against a reference moment.
|
|
1765
|
+
*
|
|
1766
|
+
* "The last 7 days" counts today as one of them, which is what a reader
|
|
1767
|
+
* expects from a figure that includes what happened this morning.
|
|
1768
|
+
*/
|
|
1769
|
+
declare function resolvePeriodPreset(preset: ChartPeriodPreset, now?: Date): {
|
|
1770
|
+
from: Date;
|
|
1771
|
+
to: Date;
|
|
1772
|
+
};
|
|
1773
|
+
/** A named window, resolved into the period a chart is filtered by. */
|
|
1774
|
+
declare function createPeriod(preset: ChartPeriodPreset, now?: Date): ChartPeriod;
|
|
1775
|
+
/**
|
|
1776
|
+
* The two ends of a window as one string.
|
|
1777
|
+
*
|
|
1778
|
+
* `formatRange` is what a locale expects here — it collapses the parts the two
|
|
1779
|
+
* dates share ("1 – 15 March 2026" rather than twice the month and the year).
|
|
1780
|
+
*/
|
|
1781
|
+
declare function formatPeriodRange(from: Date, to: Date, locale?: string): string;
|
|
1782
|
+
/** `true` when two periods cover the same window, to the millisecond. */
|
|
1783
|
+
declare function samePeriod(a: ChartPeriod | undefined, b: ChartPeriod | undefined): boolean;
|
|
1784
|
+
|
|
1785
|
+
interface ChartPeriodPickerProps extends Omit<ComponentPropsWithoutRef<"button">, "value" | "defaultValue" | "onChange" | "children"> {
|
|
1786
|
+
/** Controlled window. */
|
|
1787
|
+
value?: ChartPeriod;
|
|
1788
|
+
/** Uncontrolled starting window — a resolved period, or a preset to resolve. */
|
|
1789
|
+
defaultValue?: ChartPeriod | ChartPeriodPreset;
|
|
1790
|
+
onChange?: (period: ChartPeriod) => void;
|
|
1791
|
+
/** Which windows to offer, in the order they are listed. */
|
|
1792
|
+
presets?: readonly ChartPeriodPreset[];
|
|
1793
|
+
/** Offers the calendar, for a window the presets do not cover. */
|
|
1794
|
+
custom?: boolean;
|
|
1795
|
+
/** Overrides a preset's caption, without going through the labels provider. */
|
|
1796
|
+
presetLabels?: Partial<Record<ChartPeriodPreset, string>>;
|
|
1797
|
+
/**
|
|
1798
|
+
* The moment the presets are measured from.
|
|
1799
|
+
*
|
|
1800
|
+
* Injected by a test, and by an application that freezes "today" — a report
|
|
1801
|
+
* generated at 3am must not silently change window at midnight.
|
|
1802
|
+
*/
|
|
1803
|
+
now?: Date;
|
|
1804
|
+
/** Bounds of the calendar. A dashboard usually caps it at today. */
|
|
1805
|
+
minDate?: Date;
|
|
1806
|
+
maxDate?: Date;
|
|
1807
|
+
/** Number of months shown side by side by the calendar. */
|
|
1808
|
+
numberOfMonths?: number;
|
|
1809
|
+
weekStartsOn?: CalendarWeekStart;
|
|
1810
|
+
locale?: string;
|
|
1811
|
+
size?: ChartSize;
|
|
1812
|
+
/** Which end of the trigger the panel lines up with. */
|
|
1813
|
+
align?: "start" | "end";
|
|
1814
|
+
disabled?: boolean;
|
|
1815
|
+
/** Names the control when the default "Period" is not specific enough. */
|
|
1816
|
+
label?: string;
|
|
1817
|
+
}
|
|
1818
|
+
/**
|
|
1819
|
+
* The window a dashboard is read over.
|
|
1820
|
+
*
|
|
1821
|
+
* The one filter every dashboard has, and the one the library was missing:
|
|
1822
|
+
* `Calendar` picks a date and hands it back, which is a different job. This
|
|
1823
|
+
* picks a *period*, offers the windows people actually ask for by name, and
|
|
1824
|
+
* falls back to the calendar for the rest.
|
|
1825
|
+
*
|
|
1826
|
+
* It belongs in a `ChartFilterBar` with the other filters, above the charts
|
|
1827
|
+
* and never inside one of them — a period picked per card is how two panels
|
|
1828
|
+
* end up answering two questions without saying so.
|
|
1829
|
+
*
|
|
1830
|
+
* The presets are resolved against `now` rather than against a clock read
|
|
1831
|
+
* somewhere inside: a window is data, and data a component makes up on its own
|
|
1832
|
+
* cannot be tested, frozen or shared between two charts.
|
|
1833
|
+
*/
|
|
1834
|
+
declare function ChartPeriodPicker({ value, defaultValue, onChange, presets, custom, presetLabels, now, minDate, maxDate, numberOfMonths, weekStartsOn, locale, size, align, disabled, label, className, ...props }: ChartPeriodPickerProps): react_jsx_runtime.JSX.Element;
|
|
1835
|
+
|
|
1160
1836
|
/**
|
|
1161
1837
|
* Width a chart draws at before its container has been measured.
|
|
1162
1838
|
*
|
|
@@ -1187,6 +1863,416 @@ interface UseChartSizeResult<T extends HTMLElement> {
|
|
|
1187
1863
|
*/
|
|
1188
1864
|
declare function useChartSize<T extends HTMLElement = HTMLDivElement>(options?: UseChartSizeOptions): UseChartSizeResult<T>;
|
|
1189
1865
|
|
|
1866
|
+
/**
|
|
1867
|
+
* Ticks for an axis carrying dates.
|
|
1868
|
+
*
|
|
1869
|
+
* `niceTicks` rounds a number to a 1 / 2 / 5 step, which is the right answer
|
|
1870
|
+
* for a quantity and the wrong one for a date: time is not decimal. A step of
|
|
1871
|
+
* "two hundred million milliseconds" is a perfectly round number and lands on
|
|
1872
|
+
* 03:26 on a Tuesday. A reader of a schedule wants Mondays, or the first of
|
|
1873
|
+
* the month — so the steps here are the ones a calendar actually has.
|
|
1874
|
+
*/
|
|
1875
|
+
type TimeUnit = "second" | "minute" | "hour" | "day" | "week" | "month" | "year";
|
|
1876
|
+
interface TimeTickScale {
|
|
1877
|
+
/** Tick timestamps, ascending. */
|
|
1878
|
+
values: number[];
|
|
1879
|
+
/** Calendar unit the step is counted in — what a label should say. */
|
|
1880
|
+
unit: TimeUnit;
|
|
1881
|
+
/** How many of that unit each step covers. */
|
|
1882
|
+
step: number;
|
|
1883
|
+
}
|
|
1884
|
+
/**
|
|
1885
|
+
* Ticks covering `[min, max]`, landing on calendar boundaries.
|
|
1886
|
+
*
|
|
1887
|
+
* `count` is a target, not a promise — the same contract as `niceTicks`: the
|
|
1888
|
+
* step is chosen first, and how many ticks fit follows from it.
|
|
1889
|
+
*
|
|
1890
|
+
* Steps are walked with `Date` arithmetic rather than by adding a constant, so
|
|
1891
|
+
* a month tick stays on the first of the month across February and a day tick
|
|
1892
|
+
* stays at midnight across a daylight saving change.
|
|
1893
|
+
*/
|
|
1894
|
+
declare function niceTimeTicks(min: number, max: number, count?: number): TimeTickScale;
|
|
1895
|
+
/**
|
|
1896
|
+
* Renders a time tick at the precision its own step carries.
|
|
1897
|
+
*
|
|
1898
|
+
* A day step writes "12 Mar" and an hour step writes "14:00": showing the
|
|
1899
|
+
* time under a monthly tick, or the year under an hourly one, is noise the
|
|
1900
|
+
* reader has to filter out on every label.
|
|
1901
|
+
*/
|
|
1902
|
+
declare function formatTimeTick(value: number, unit: TimeUnit, locale?: string): string;
|
|
1903
|
+
/** Turns a date, a timestamp or a parsable string into a timestamp. */
|
|
1904
|
+
declare function toTimestamp(value: unknown): number | null;
|
|
1905
|
+
|
|
1906
|
+
/** Resets the series warning. Test helper. */
|
|
1907
|
+
declare function resetDumbbellWarnings(): void;
|
|
1908
|
+
/** How the rows are ordered. */
|
|
1909
|
+
type DumbbellSort = "none" | "asc" | "desc" | "gap";
|
|
1910
|
+
/** One row, as the tooltip and the click handler see it. */
|
|
1911
|
+
interface DumbbellRow {
|
|
1912
|
+
index: number;
|
|
1913
|
+
x: ChartXValue;
|
|
1914
|
+
label: string;
|
|
1915
|
+
/** Every visible series' value on this row, in series order. */
|
|
1916
|
+
points: ChartPoint[];
|
|
1917
|
+
/** Smallest and largest value of the row, the two ends of its bar. */
|
|
1918
|
+
from: number | null;
|
|
1919
|
+
to: number | null;
|
|
1920
|
+
/** Last series minus first: the move the chart is read for. */
|
|
1921
|
+
change: number | null;
|
|
1922
|
+
datum: ChartDatum;
|
|
1923
|
+
}
|
|
1924
|
+
interface DumbbellChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
1925
|
+
/** One row per item compared. */
|
|
1926
|
+
data: ChartDatum[];
|
|
1927
|
+
/** Field holding the name of each row. */
|
|
1928
|
+
x: ChartXAxisConfig;
|
|
1929
|
+
y?: ChartYAxisConfig;
|
|
1930
|
+
/**
|
|
1931
|
+
* The values compared on each row — usually two: before and after.
|
|
1932
|
+
*
|
|
1933
|
+
* Any two dots of a row can end up side by side, which is the same test a
|
|
1934
|
+
* scatter plot puts the palette through: past three series only the first
|
|
1935
|
+
* three slots stay tellable apart, and the chart says so.
|
|
1936
|
+
*/
|
|
1937
|
+
series: ChartSeries[];
|
|
1938
|
+
/**
|
|
1939
|
+
* Orders the rows. `gap` sorts by the distance between the two ends, which
|
|
1940
|
+
* is what turns the chart from a list into a finding: the biggest movers
|
|
1941
|
+
* come to the top.
|
|
1942
|
+
*/
|
|
1943
|
+
sort?: DumbbellSort;
|
|
1944
|
+
/** Series the `asc` / `desc` orders read. Defaults to the last one. */
|
|
1945
|
+
sortBy?: string;
|
|
1946
|
+
/** Writes the value beside each dot, where there is room. */
|
|
1947
|
+
showValues?: boolean;
|
|
1948
|
+
/** Radius of a dot. */
|
|
1949
|
+
dotSize?: number;
|
|
1950
|
+
referenceLines?: ChartReferenceLine[];
|
|
1951
|
+
height?: number;
|
|
1952
|
+
width?: number;
|
|
1953
|
+
size?: ChartSize;
|
|
1954
|
+
grid?: ChartGridLines;
|
|
1955
|
+
legend?: boolean | ChartLegendPosition;
|
|
1956
|
+
legendToggle?: boolean;
|
|
1957
|
+
tooltip?: boolean | ((row: DumbbellRow) => ReactNode);
|
|
1958
|
+
tableView?: boolean | "toggle";
|
|
1959
|
+
/** Adds the last-minus-first column to the data table. */
|
|
1960
|
+
showChange?: boolean;
|
|
1961
|
+
title?: ReactNode;
|
|
1962
|
+
description?: ReactNode;
|
|
1963
|
+
loading?: boolean;
|
|
1964
|
+
emptyState?: ReactNode;
|
|
1965
|
+
margin?: Partial<ChartMargin>;
|
|
1966
|
+
locale?: string;
|
|
1967
|
+
plotLabel?: string;
|
|
1968
|
+
/** Header of the change column of the data table. */
|
|
1969
|
+
changeLabel?: string;
|
|
1970
|
+
format?: (value: number) => string;
|
|
1971
|
+
onRowClick?: (row: DumbbellRow) => void;
|
|
1972
|
+
}
|
|
1973
|
+
/**
|
|
1974
|
+
* Two points per item, and the distance between them.
|
|
1975
|
+
*
|
|
1976
|
+
* Before against after, or the two ends of a range. Two paired bars answer
|
|
1977
|
+
* the same question and answer it badly: the reader has to compare the
|
|
1978
|
+
* difference of two lengths across a dozen rows. Here the difference IS the
|
|
1979
|
+
* mark — the rule between the dots — and the eye reads it directly.
|
|
1980
|
+
*
|
|
1981
|
+
* The value axis does not anchor at zero. A dumbbell is read for the gap
|
|
1982
|
+
* between its two ends, and forcing zero in squeezes every gap on the chart
|
|
1983
|
+
* towards nothing as soon as the values sit far from it. Pass
|
|
1984
|
+
* `y={{ includeZero: true }}` on the rare chart where the absolute level is
|
|
1985
|
+
* the point.
|
|
1986
|
+
*
|
|
1987
|
+
* `sort="gap"` is what turns the chart from a list into a finding: the rows
|
|
1988
|
+
* that moved most come to the top.
|
|
1989
|
+
*/
|
|
1990
|
+
declare function DumbbellChart({ data, x, y, series, sort, sortBy, showValues, dotSize, referenceLines, height, width, size, grid, legend, legendToggle, tooltip, tableView, showChange, title, description, loading, emptyState, margin, locale, plotLabel, changeLabel, format, onRowClick, className, ...props }: DumbbellChartProps): react_jsx_runtime.JSX.Element;
|
|
1991
|
+
|
|
1992
|
+
/** One stage, as the tooltip and the click handler see it. */
|
|
1993
|
+
interface FunnelStage {
|
|
1994
|
+
index: number;
|
|
1995
|
+
x: ChartXValue;
|
|
1996
|
+
label: string;
|
|
1997
|
+
value: number | null;
|
|
1998
|
+
/** Share of the FIRST stage still here. `null` on the first stage itself. */
|
|
1999
|
+
overall: number | null;
|
|
2000
|
+
/** Share of the PREVIOUS stage still here. `null` on the first stage. */
|
|
2001
|
+
conversion: number | null;
|
|
2002
|
+
/** What the previous stage lost on the way here. `null` on the first stage. */
|
|
2003
|
+
dropOff: number | null;
|
|
2004
|
+
formattedValue: string;
|
|
2005
|
+
datum: ChartDatum;
|
|
2006
|
+
}
|
|
2007
|
+
interface FunnelChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
2008
|
+
/** One row per stage, in the order they are walked. */
|
|
2009
|
+
data: ChartDatum[];
|
|
2010
|
+
/** Field holding the name of each stage. */
|
|
2011
|
+
x: ChartXAxisConfig;
|
|
2012
|
+
/** Field holding how many reached that stage. */
|
|
2013
|
+
value: string;
|
|
2014
|
+
/**
|
|
2015
|
+
* Where each bar sits in its row.
|
|
2016
|
+
*
|
|
2017
|
+
* `center` is the funnel silhouette, `left` a plain ranked bar chart. The
|
|
2018
|
+
* silhouette reads as a narrowing; the left alignment compares lengths more
|
|
2019
|
+
* precisely. Both encode the value as a LENGTH — never as an area, which the
|
|
2020
|
+
* eye cannot compare.
|
|
2021
|
+
*/
|
|
2022
|
+
align?: "center" | "left";
|
|
2023
|
+
/**
|
|
2024
|
+
* Writes what each stage kept from the one before it.
|
|
2025
|
+
*
|
|
2026
|
+
* That ratio is the reason the chart exists: the absolute figures are a
|
|
2027
|
+
* table, the step-to-step loss is the finding.
|
|
2028
|
+
*/
|
|
2029
|
+
showConversion?: boolean;
|
|
2030
|
+
/** Writes the figure reached at each stage. */
|
|
2031
|
+
showValues?: boolean;
|
|
2032
|
+
/** Caps the thickness of a stage. */
|
|
2033
|
+
stageSize?: number;
|
|
2034
|
+
/** Replaces the ordinal ramp — any CSS colours, first stage first. */
|
|
2035
|
+
colors?: readonly string[];
|
|
2036
|
+
height?: number;
|
|
2037
|
+
width?: number;
|
|
2038
|
+
size?: ChartSize;
|
|
2039
|
+
tooltip?: boolean | ((stage: FunnelStage) => ReactNode);
|
|
2040
|
+
tableView?: boolean | "toggle";
|
|
2041
|
+
title?: ReactNode;
|
|
2042
|
+
description?: ReactNode;
|
|
2043
|
+
loading?: boolean;
|
|
2044
|
+
emptyState?: ReactNode;
|
|
2045
|
+
locale?: string;
|
|
2046
|
+
plotLabel?: string;
|
|
2047
|
+
/** Header of the value column of the data table. */
|
|
2048
|
+
valueLabel?: string;
|
|
2049
|
+
/** Header of the step-to-step conversion column. */
|
|
2050
|
+
conversionLabel?: string;
|
|
2051
|
+
/** Header of the step-to-step loss column. */
|
|
2052
|
+
dropOffLabel?: string;
|
|
2053
|
+
format?: (value: number) => string;
|
|
2054
|
+
onStageClick?: (stage: FunnelStage) => void;
|
|
2055
|
+
}
|
|
2056
|
+
/**
|
|
2057
|
+
* Ordered stages, and what is lost between them.
|
|
2058
|
+
*
|
|
2059
|
+
* The stages have an ORDER, which is why the colour comes from the ordinal
|
|
2060
|
+
* ramp and not from the categorical slots: the eight slots answer "which
|
|
2061
|
+
* one", and the answer here is "the third of five". A funnel painted in
|
|
2062
|
+
* identity colours says its stages are unrelated categories, which is the one
|
|
2063
|
+
* thing they are not.
|
|
2064
|
+
*
|
|
2065
|
+
* The value is encoded as a length, never as an area: the trapezoid silhouette
|
|
2066
|
+
* of the classic funnel asks the reader to compare two surfaces, and two
|
|
2067
|
+
* surfaces cannot be compared by eye. `align="center"` keeps the silhouette
|
|
2068
|
+
* while the measure stays the width of each bar.
|
|
2069
|
+
*
|
|
2070
|
+
* Use it for a path people walk in one direction. Stages that are not ordered
|
|
2071
|
+
* are a `BarChart`, and a breakdown of one total is a `PieChart`.
|
|
2072
|
+
*/
|
|
2073
|
+
declare function FunnelChart({ data, x, value, align, showConversion, showValues, stageSize, colors, height, width, size, tooltip, tableView, title, description, loading, emptyState, locale, plotLabel, valueLabel, conversionLabel, dropOffLabel, format, onStageClick, className, ...props }: FunnelChartProps): react_jsx_runtime.JSX.Element;
|
|
2074
|
+
|
|
2075
|
+
/** One task, as the tooltip and the click handler see it. */
|
|
2076
|
+
interface GanttTask {
|
|
2077
|
+
index: number;
|
|
2078
|
+
/** Stable identity, used by the dependencies. Falls back to the row index. */
|
|
2079
|
+
id: string;
|
|
2080
|
+
x: ChartXValue;
|
|
2081
|
+
label: string;
|
|
2082
|
+
/** Start, as a timestamp. `null` when the row carries no usable date. */
|
|
2083
|
+
start: number | null;
|
|
2084
|
+
/** End, as a timestamp. Equal to `start` on a milestone. */
|
|
2085
|
+
end: number | null;
|
|
2086
|
+
/** Share completed, from 0 to 1. `null` when the row says nothing. */
|
|
2087
|
+
progress: number | null;
|
|
2088
|
+
/** A point in time rather than a span. */
|
|
2089
|
+
milestone: boolean;
|
|
2090
|
+
/** Ids this task waits on. */
|
|
2091
|
+
dependsOn: string[];
|
|
2092
|
+
/** Name of the group the task belongs to, when there is one. */
|
|
2093
|
+
group: string | null;
|
|
2094
|
+
datum: ChartDatum;
|
|
2095
|
+
}
|
|
2096
|
+
interface GanttChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
2097
|
+
/** One row per task, in the order they are listed. */
|
|
2098
|
+
data: ChartDatum[];
|
|
2099
|
+
/** Field holding the name of each task. */
|
|
2100
|
+
x: ChartXAxisConfig;
|
|
2101
|
+
/** Field holding the start — a `Date`, a timestamp, or an ISO string. */
|
|
2102
|
+
start: string;
|
|
2103
|
+
/** Field holding the end. A row without one is drawn as a milestone. */
|
|
2104
|
+
end?: string;
|
|
2105
|
+
/** Field holding a stable id, which the dependencies point at. */
|
|
2106
|
+
id?: string;
|
|
2107
|
+
/** Field holding the share completed, from 0 to 1. */
|
|
2108
|
+
progress?: string;
|
|
2109
|
+
/** Field marking a row as a point in time rather than a span. */
|
|
2110
|
+
milestone?: string;
|
|
2111
|
+
/**
|
|
2112
|
+
* Field holding the ids this task waits on, as an array.
|
|
2113
|
+
*
|
|
2114
|
+
* The arrows are drawn from the end of each predecessor to the start of the
|
|
2115
|
+
* task: what a schedule is read for is rarely a single bar, it is what is
|
|
2116
|
+
* blocking it.
|
|
2117
|
+
*/
|
|
2118
|
+
dependencies?: string;
|
|
2119
|
+
/** Field naming the group a task belongs to. Groups take the palette slots. */
|
|
2120
|
+
group?: string;
|
|
2121
|
+
/** Fixes the window shown. Defaults to the span of the tasks, plus air. */
|
|
2122
|
+
domain?: [Date | number | string, Date | number | string];
|
|
2123
|
+
/** Marks a moment with a rule. Pass `false` to leave it out. */
|
|
2124
|
+
today?: Date | number | string | false;
|
|
2125
|
+
/** Preferred number of ticks on the time axis. */
|
|
2126
|
+
ticks?: number;
|
|
2127
|
+
/** Caps the thickness of a bar. */
|
|
2128
|
+
barSize?: number;
|
|
2129
|
+
/** Height of a row. The chart's own height follows from it. */
|
|
2130
|
+
rowSize?: number;
|
|
2131
|
+
/** Colour of the bars when there are no groups. */
|
|
2132
|
+
color?: string;
|
|
2133
|
+
height?: number;
|
|
2134
|
+
width?: number;
|
|
2135
|
+
size?: ChartSize;
|
|
2136
|
+
grid?: boolean;
|
|
2137
|
+
legend?: boolean | ChartLegendPosition;
|
|
2138
|
+
tooltip?: boolean | ((task: GanttTask) => ReactNode);
|
|
2139
|
+
tableView?: boolean | "toggle";
|
|
2140
|
+
title?: ReactNode;
|
|
2141
|
+
description?: ReactNode;
|
|
2142
|
+
loading?: boolean;
|
|
2143
|
+
emptyState?: ReactNode;
|
|
2144
|
+
margin?: Partial<ChartMargin>;
|
|
2145
|
+
locale?: string;
|
|
2146
|
+
plotLabel?: string;
|
|
2147
|
+
startLabel?: string;
|
|
2148
|
+
endLabel?: string;
|
|
2149
|
+
progressLabel?: string;
|
|
2150
|
+
todayLabel?: string;
|
|
2151
|
+
/** Formats a date in the tooltip and the data table. */
|
|
2152
|
+
formatDate?: (value: number) => string;
|
|
2153
|
+
onTaskClick?: (task: GanttTask) => void;
|
|
2154
|
+
}
|
|
2155
|
+
/**
|
|
2156
|
+
* Tasks in time, with their dependencies and their milestones.
|
|
2157
|
+
*
|
|
2158
|
+
* More a planning component than a chart, and it says so: there is no measure
|
|
2159
|
+
* on the value axis, only dates. What it shows that a list cannot is the
|
|
2160
|
+
* overlap — two tasks running at once, and the arrow saying one of them
|
|
2161
|
+
* cannot start until the other is done.
|
|
2162
|
+
*
|
|
2163
|
+
* It does not overlap `Calendar`, which picks a date and hands it back.
|
|
2164
|
+
* Nothing is selected here: a schedule is read, and a row that has no width
|
|
2165
|
+
* on the time axis is a milestone rather than a day.
|
|
2166
|
+
*
|
|
2167
|
+
* The time axis lands on calendar boundaries — Mondays, the first of the
|
|
2168
|
+
* month — rather than on round numbers of milliseconds, which is what a
|
|
2169
|
+
* decimal tick generator produces when it is pointed at a date.
|
|
2170
|
+
*/
|
|
2171
|
+
declare function GanttChart({ data, x, start, end, id, progress, milestone, dependencies, group, domain, today, ticks, barSize, rowSize, color, height, width, size, grid, legend, tooltip, tableView, title, description, loading, emptyState, margin, locale, plotLabel, startLabel, endLabel, progressLabel, todayLabel, formatDate, onTaskClick, className, ...props }: GanttChartProps): react_jsx_runtime.JSX.Element;
|
|
2172
|
+
|
|
2173
|
+
/** What a step does to the running total. */
|
|
2174
|
+
type WaterfallKind = "increase" | "decrease" | "total";
|
|
2175
|
+
/** One step, as the tooltip, the legend and the click handler see it. */
|
|
2176
|
+
interface WaterfallStep {
|
|
2177
|
+
index: number;
|
|
2178
|
+
x: ChartXValue;
|
|
2179
|
+
label: string;
|
|
2180
|
+
/** The contribution of the step, or the figure a total row lands on. */
|
|
2181
|
+
value: number | null;
|
|
2182
|
+
/** Running total the bar grows from. */
|
|
2183
|
+
start: number;
|
|
2184
|
+
/** Running total the bar grows to. */
|
|
2185
|
+
end: number;
|
|
2186
|
+
kind: WaterfallKind;
|
|
2187
|
+
formattedValue: string;
|
|
2188
|
+
/** The running total after the step, formatted. */
|
|
2189
|
+
formattedEnd: string;
|
|
2190
|
+
datum: ChartDatum;
|
|
2191
|
+
}
|
|
2192
|
+
interface WaterfallChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
2193
|
+
/** One row per step, in the order they are read. */
|
|
2194
|
+
data: ChartDatum[];
|
|
2195
|
+
/** Field holding the name of each step. */
|
|
2196
|
+
x: ChartXAxisConfig;
|
|
2197
|
+
y?: ChartYAxisConfig;
|
|
2198
|
+
/** Field holding what the step adds to, or takes from, the running total. */
|
|
2199
|
+
value: string;
|
|
2200
|
+
/**
|
|
2201
|
+
* Field marking a row as a checkpoint rather than a contribution.
|
|
2202
|
+
*
|
|
2203
|
+
* A truthy value draws the bar from zero to the running total instead of
|
|
2204
|
+
* floating it — the opening balance, a subtotal, the closing figure. When
|
|
2205
|
+
* such a row also carries a `value`, that figure wins and the running total
|
|
2206
|
+
* is reset to it: a declared total that disagrees with the sum of the steps
|
|
2207
|
+
* is a discrepancy worth seeing, not one worth hiding.
|
|
2208
|
+
*/
|
|
2209
|
+
total?: string;
|
|
2210
|
+
/** Figure the running total starts from. Defaults to `0`. */
|
|
2211
|
+
start?: number;
|
|
2212
|
+
/**
|
|
2213
|
+
* `vertical` draws columns, `horizontal` draws bars — the same call as
|
|
2214
|
+
* anywhere else: horizontal as soon as the step names are long.
|
|
2215
|
+
*/
|
|
2216
|
+
orientation?: CartesianOrientation;
|
|
2217
|
+
/**
|
|
2218
|
+
* Draws the thin rule joining one bar to the next.
|
|
2219
|
+
*
|
|
2220
|
+
* On by default, and it is not decoration: without it a floating bar has no
|
|
2221
|
+
* visible tie to the one before, and the chart reads as a set of unrelated
|
|
2222
|
+
* marks rather than as one running total.
|
|
2223
|
+
*/
|
|
2224
|
+
connectors?: boolean;
|
|
2225
|
+
/** Writes each step's contribution at the end of its bar, where it fits. */
|
|
2226
|
+
showValues?: boolean;
|
|
2227
|
+
/** Caps the thickness of a mark. */
|
|
2228
|
+
barSize?: number;
|
|
2229
|
+
/** Replaces the three colours. Any CSS colours. */
|
|
2230
|
+
colors?: {
|
|
2231
|
+
increase?: string;
|
|
2232
|
+
decrease?: string;
|
|
2233
|
+
total?: string;
|
|
2234
|
+
};
|
|
2235
|
+
height?: number;
|
|
2236
|
+
width?: number;
|
|
2237
|
+
size?: ChartSize;
|
|
2238
|
+
grid?: ChartGridLines;
|
|
2239
|
+
legend?: boolean | ChartLegendPosition;
|
|
2240
|
+
tooltip?: boolean | ((step: WaterfallStep) => ReactNode);
|
|
2241
|
+
tableView?: boolean | "toggle";
|
|
2242
|
+
title?: ReactNode;
|
|
2243
|
+
description?: ReactNode;
|
|
2244
|
+
loading?: boolean;
|
|
2245
|
+
emptyState?: ReactNode;
|
|
2246
|
+
margin?: Partial<ChartMargin>;
|
|
2247
|
+
locale?: string;
|
|
2248
|
+
plotLabel?: string;
|
|
2249
|
+
/** Header of the contribution column of the data table. */
|
|
2250
|
+
valueLabel?: string;
|
|
2251
|
+
/** Header of the running total column, and label of the total legend entry. */
|
|
2252
|
+
totalLabel?: string;
|
|
2253
|
+
increaseLabel?: string;
|
|
2254
|
+
decreaseLabel?: string;
|
|
2255
|
+
format?: (value: number) => string;
|
|
2256
|
+
onStepClick?: (step: WaterfallStep) => void;
|
|
2257
|
+
}
|
|
2258
|
+
/**
|
|
2259
|
+
* How one figure became another.
|
|
2260
|
+
*
|
|
2261
|
+
* Every contribution between a start and an end, floating between the running
|
|
2262
|
+
* total before it and after it — the budget variance chart. It answers a
|
|
2263
|
+
* question no other shape of the kit can: a bar chart of the same steps shows
|
|
2264
|
+
* their sizes and says nothing about how they add up.
|
|
2265
|
+
*
|
|
2266
|
+
* Colour comes from the diverging pair, because that is exactly what a step
|
|
2267
|
+
* is: a move above or below the running total. It says the direction, never
|
|
2268
|
+
* the verdict — a cost falling and a revenue falling wear the same colour,
|
|
2269
|
+
* and the row label is what tells them apart.
|
|
2270
|
+
*
|
|
2271
|
+
* The order of the rows IS the chart, so there is no `sort`: reordering the
|
|
2272
|
+
* steps of a waterfall produces a different, and usually false, story.
|
|
2273
|
+
*/
|
|
2274
|
+
declare function WaterfallChart({ data, x, y, value, total, start, orientation, connectors, showValues, barSize, colors, height, width, size, grid, legend, tooltip, tableView, title, description, loading, emptyState, margin, locale, plotLabel, valueLabel, totalLabel, increaseLabel, decreaseLabel, format, onStepClick, className, ...props }: WaterfallChartProps): react_jsx_runtime.JSX.Element;
|
|
2275
|
+
|
|
1190
2276
|
interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "size" | "onChange" | "type"> {
|
|
1191
2277
|
checked?: boolean;
|
|
1192
2278
|
defaultChecked?: boolean;
|
|
@@ -2279,6 +3365,17 @@ interface LineChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWit
|
|
|
2279
3365
|
/** Draws through the gaps instead of breaking the line. */
|
|
2280
3366
|
connectNulls?: boolean;
|
|
2281
3367
|
referenceLines?: ChartReferenceLine[];
|
|
3368
|
+
/**
|
|
3369
|
+
* What happened, drawn where it happened: a release, a campaign, an outage.
|
|
3370
|
+
*
|
|
3371
|
+
* The counterpart of `referenceLines`, which marks a threshold on the value
|
|
3372
|
+
* axis. A spike nobody explained is a question rather than an answer, and
|
|
3373
|
+
* the explanation almost always sits on the time axis.
|
|
3374
|
+
*
|
|
3375
|
+
* The captions are appended to the chart's accessible name, since an SVG
|
|
3376
|
+
* exposes nothing drawn inside it.
|
|
3377
|
+
*/
|
|
3378
|
+
annotations?: ChartAnnotation[];
|
|
2282
3379
|
/** Lets the legend show and hide series. */
|
|
2283
3380
|
legendToggle?: boolean;
|
|
2284
3381
|
margin?: Partial<ChartMargin>;
|
|
@@ -2298,7 +3395,7 @@ interface LineChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWit
|
|
|
2298
3395
|
* invent a correlation the data does not carry; plot them as two charts, or
|
|
2299
3396
|
* index both to a common base.
|
|
2300
3397
|
*/
|
|
2301
|
-
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;
|
|
3398
|
+
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, annotations, legendToggle, margin, locale, plotLabel, className, ...props }: LineChartProps): react_jsx_runtime.JSX.Element;
|
|
2302
3399
|
|
|
2303
3400
|
interface ModalProps {
|
|
2304
3401
|
isOpen: boolean;
|
|
@@ -2411,6 +3508,17 @@ interface PieChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "childr
|
|
|
2411
3508
|
description?: ReactNode;
|
|
2412
3509
|
loading?: boolean;
|
|
2413
3510
|
emptyState?: ReactNode;
|
|
3511
|
+
/**
|
|
3512
|
+
* Draws each slice with a texture on top of its colour.
|
|
3513
|
+
*
|
|
3514
|
+
* The channel a reader falls back on when the hue fails them: severe colour
|
|
3515
|
+
* vision deficiency, a grayscale print, a forced-colours theme. Off by
|
|
3516
|
+
* default — it is an accessibility option, not a decoration.
|
|
3517
|
+
*
|
|
3518
|
+
* The folded tail keeps its flat grey: it is the one slice that is not an
|
|
3519
|
+
* identity, and giving it a texture would make it look like one.
|
|
3520
|
+
*/
|
|
3521
|
+
patterns?: boolean;
|
|
2414
3522
|
locale?: string;
|
|
2415
3523
|
plotLabel?: string;
|
|
2416
3524
|
onSliceClick?: (slice: {
|
|
@@ -2429,7 +3537,7 @@ interface PieChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "childr
|
|
|
2429
3537
|
* over six slices at most, which is why the tail folds into a single bucket
|
|
2430
3538
|
* rather than taking a seventh colour.
|
|
2431
3539
|
*/
|
|
2432
|
-
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;
|
|
3540
|
+
declare function PieChart({ data, x, value, variant, innerRadius, maxSlices, otherLabel, sort, showLabels, centerLabel, patterns, height, width, size, legend, tooltip, tableView, title, description, loading, emptyState, locale, plotLabel, onSliceClick, className, ...props }: PieChartProps): react_jsx_runtime.JSX.Element;
|
|
2433
3541
|
|
|
2434
3542
|
type ProgressBarSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
2435
3543
|
type ProgressBarColor = "default" | "primary" | "success" | "warning" | "error" | "info";
|
|
@@ -3464,6 +4572,59 @@ interface UILabels {
|
|
|
3464
4572
|
chartValue: string;
|
|
3465
4573
|
/** Header of the "aimed at" column of a bullet chart's data table. */
|
|
3466
4574
|
chartTarget: string;
|
|
4575
|
+
/** Legend entry and tooltip row for a waterfall step that adds. */
|
|
4576
|
+
chartIncrease: string;
|
|
4577
|
+
/** Legend entry and tooltip row for a waterfall step that takes away. */
|
|
4578
|
+
chartDecrease: string;
|
|
4579
|
+
/** Header of the running-total column of a waterfall's data table. */
|
|
4580
|
+
chartRunningTotal: string;
|
|
4581
|
+
/** Header of the "kept from the previous stage" column of a funnel. */
|
|
4582
|
+
chartConversion: string;
|
|
4583
|
+
/** Header of the "lost since the previous stage" column of a funnel. */
|
|
4584
|
+
chartDropOff: string;
|
|
4585
|
+
/** Header of the gap column of a dumbbell chart's data table. */
|
|
4586
|
+
chartChange: string;
|
|
4587
|
+
/** Header of the median column of a box plot's data table. */
|
|
4588
|
+
chartMedian: string;
|
|
4589
|
+
/** Header of the observation-count column of a box plot's data table. */
|
|
4590
|
+
chartCount: string;
|
|
4591
|
+
/** Header of the outlier column of a box plot's data table. */
|
|
4592
|
+
chartOutliers: string;
|
|
4593
|
+
/** Header of the opening-price column of a candlestick's data table. */
|
|
4594
|
+
chartOpen: string;
|
|
4595
|
+
/** Header of the high column of a candlestick's data table. */
|
|
4596
|
+
chartHigh: string;
|
|
4597
|
+
/** Header of the low column of a candlestick's data table. */
|
|
4598
|
+
chartLow: string;
|
|
4599
|
+
/** Header of the closing-price column of a candlestick's data table. */
|
|
4600
|
+
chartClose: string;
|
|
4601
|
+
/** Legend entry for a candlestick session that closed up. */
|
|
4602
|
+
chartRise: string;
|
|
4603
|
+
/** Legend entry for a candlestick session that closed down. */
|
|
4604
|
+
chartFall: string;
|
|
4605
|
+
/** Header of the start column of a schedule's data table. */
|
|
4606
|
+
chartStart: string;
|
|
4607
|
+
/** Header of the end column of a schedule's data table. */
|
|
4608
|
+
chartEnd: string;
|
|
4609
|
+
/** Header of the completion column of a schedule's data table. */
|
|
4610
|
+
chartProgress: string;
|
|
4611
|
+
/** Name of the rule marking today on a schedule. */
|
|
4612
|
+
chartToday: string;
|
|
4613
|
+
/** Word the annotation captions are announced under in a chart's name. */
|
|
4614
|
+
chartAnnotations: string;
|
|
4615
|
+
/** Accessible name of the filter row above a set of charts. */
|
|
4616
|
+
chartFilters: string;
|
|
4617
|
+
/** Accessible name of the period picker, and its caption when nothing is set. */
|
|
4618
|
+
chartPeriod: string;
|
|
4619
|
+
chartPeriodLast7Days: string;
|
|
4620
|
+
chartPeriodLast30Days: string;
|
|
4621
|
+
chartPeriodLast90Days: string;
|
|
4622
|
+
chartPeriodLast12Months: string;
|
|
4623
|
+
chartPeriodMonthToDate: string;
|
|
4624
|
+
chartPeriodQuarterToDate: string;
|
|
4625
|
+
chartPeriodYearToDate: string;
|
|
4626
|
+
/** Entry opening the calendar, for a window the presets do not cover. */
|
|
4627
|
+
chartPeriodCustom: string;
|
|
3467
4628
|
}
|
|
3468
4629
|
/** English labels, used when no provider is mounted. */
|
|
3469
4630
|
declare const defaultUILabels: UILabels;
|
|
@@ -3549,4 +4710,4 @@ declare function isFocusable(element: HTMLElement): boolean;
|
|
|
3549
4710
|
*/
|
|
3550
4711
|
declare function getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
3551
4712
|
|
|
3552
|
-
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, BulletChart, type BulletChartProps, type BulletRow, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_ALL_PAIRS_LIMIT, CHART_DIVERGING_COLORS, CHART_DIVERGING_DARK_STOPS, CHART_DIVERGING_NEUTRAL_INDEX, CHART_MAX_COLOR_CLASSES, CHART_MUTED_COLOR, CHART_ORDINAL_COLORS, CHART_ORDINAL_DARK_STOPS, CHART_PALETTE_SIZE, CHART_SEQUENTIAL_COLORS, CHART_SEQUENTIAL_DARK_STOPS, 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, type ChartColorScale, ChartContainer, type ChartContainerProps, type ChartContainerRenderArgs, type ChartCurve, type ChartDatum, type ChartDimensions, type ChartFacetPanel, ChartFacets, type ChartFacetsProps, ChartGrid, type ChartGridLines, type ChartGridProps, ChartLegend, type ChartLegendItem, type ChartLegendMarker, type ChartLegendPosition, type ChartLegendProps, type ChartMargin, type ChartPoint, type ChartPointEvent, type ChartReferenceLine, ChartScaleLegend, type ChartScaleLegendProps, 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, type DivergingScaleOptions, 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, Heatmap, type HeatmapCell, type HeatmapProps, 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 SequentialScaleOptions, 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, createDivergingScale, createSequentialScale, defaultUILabels, findOwnedLayers, frenchUILabels, generateFieldId, generateRelationId, generateSQL, generateTableId, getFocusableElements, getOrdinalColor, getSeriesColor, getSeriesLabel, hideOthers, isElementVisible, isFocusable, rampColor, registerFloatingLayer, resetFacetWarnings, resolveSeriesColor, toLegendItems, useChartSize, useClickOutside, useDialogA11y, useDropdownContext, useFocusItem, useKeyboardNavigation, usePositioning, useSidebar, useUILabels, useWizard };
|
|
4713
|
+
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, type BinSpec, BoxPlot, type BoxPlotBox, type BoxPlotProps, type BoxPlotQuantileKeys, type BoxStats, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulletChart, type BulletChartProps, type BulletRow, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_ALL_PAIRS_LIMIT, CHART_DIVERGING_COLORS, CHART_DIVERGING_DARK_STOPS, CHART_DIVERGING_NEUTRAL_INDEX, CHART_DOWN_COLOR, CHART_MAX_COLOR_CLASSES, CHART_MUTED_COLOR, CHART_ORDINAL_COLORS, CHART_ORDINAL_DARK_STOPS, CHART_PALETTE_SIZE, CHART_PATTERNS, CHART_SEQUENTIAL_COLORS, CHART_SEQUENTIAL_DARK_STOPS, CHART_SERIES_COLORS, CHART_SURFACE_COLOR, CHART_UP_COLOR, Calendar, type CalendarColor, type CalendarDateRange, type CalendarDayState, type CalendarLabels, type CalendarMode, type CalendarProps, type CalendarSize, type CalendarWeekStart, type Candle, CandlestickChart, type CandlestickChartProps, Card, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, CardTitle, type CardTitleProps, type CartesianChartBaseProps, type ChartAnnotation, type ChartAnnotationBase, ChartAnnotationLayer, type ChartAnnotationLayerProps, ChartAxis, type ChartAxisOrientation, type ChartAxisProps, type ChartBandAnnotation, type ChartColorScale, ChartContainer, type ChartContainerProps, type ChartContainerRenderArgs, type ChartCurve, type ChartDatum, type ChartDimensions, type ChartFacetPanel, ChartFacets, type ChartFacetsProps, ChartFilterBar, type ChartFilterBarProps, ChartGrid, type ChartGridLines, type ChartGridProps, ChartLegend, type ChartLegendItem, type ChartLegendMarker, type ChartLegendPosition, type ChartLegendProps, type ChartLineAnnotation, type ChartMargin, type ChartPattern, ChartPatternDefs, type ChartPatternDefsProps, type ChartPatternEntry, type ChartPeriod, ChartPeriodPicker, type ChartPeriodPickerProps, type ChartPeriodPreset, type ChartPoint, type ChartPointAnnotation, type ChartPointEvent, type ChartReferenceLine, ChartScaleLegend, type ChartScaleLegendProps, 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_PERIOD_PRESETS, 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, type DivergingScaleOptions, 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, DumbbellChart, type DumbbellChartProps, type DumbbellRow, type DumbbellSort, 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, FunnelChart, type FunnelChartProps, type FunnelStage, GanttChart, type GanttChartProps, type GanttTask, Header, type HeaderProps, Heatmap, type HeatmapCell, type HeatmapProps, HelpButton, type HelpButtonProps, type HistogramBin, 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 SequentialScaleOptions, 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, type TimeTickScale, type TimeUnit, 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, WaterfallChart, type WaterfallChartProps, type WaterfallKind, type WaterfallStep, 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, binEdges, binValues, boxStats, cn, createDefaultField, createDefaultTable, createDivergingScale, createPeriod, createSequentialScale, defaultUILabels, describeAnnotations, endOfDay, findOwnedLayers, formatPeriodRange, formatTimeTick, frenchUILabels, generateFieldId, generateRelationId, generateSQL, generateTableId, getFocusableElements, getOrdinalColor, getPattern, getSeriesColor, getSeriesLabel, hideOthers, isElementVisible, isFocusable, niceTimeTicks, patternBackground, patternFill, patternId, quantile, quantileSorted, rampColor, registerFloatingLayer, resetBarChartWarnings, resetDumbbellWarnings, resetFacetWarnings, resolvePeriodPreset, resolveSeriesColor, samePeriod, startOfDay, sturgesBins, toLegendItems, toTimestamp, useChartSize, useClickOutside, useDialogA11y, useDropdownContext, useFocusItem, useKeyboardNavigation, usePositioning, useSidebar, useUILabels, useWizard };
|