@synertech/ui 0.41.0 → 0.42.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 +95 -0
- package/dist/index.cjs +9 -9
- package/dist/index.d.cts +782 -3
- package/dist/index.d.ts +782 -3
- package/dist/index.js +9 -9
- package/dist/styles.css +25 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -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. */
|
|
@@ -239,6 +249,13 @@ interface ChartLegendItem {
|
|
|
239
249
|
label: string;
|
|
240
250
|
color: string;
|
|
241
251
|
hidden?: boolean;
|
|
252
|
+
/**
|
|
253
|
+
* Overrides the legend's shared swatch shape for this entry alone.
|
|
254
|
+
*
|
|
255
|
+
* What a combined chart needs: the swatch has to mirror the mark, so the
|
|
256
|
+
* series drawn as a line cannot wear the same block as the bars beside it.
|
|
257
|
+
*/
|
|
258
|
+
marker?: "line" | "rect" | "dot";
|
|
242
259
|
}
|
|
243
260
|
/** A tick, already placed on its axis. */
|
|
244
261
|
interface ChartTick {
|
|
@@ -354,6 +371,55 @@ declare namespace Badge {
|
|
|
354
371
|
*/
|
|
355
372
|
type CartesianOrientation = "vertical" | "horizontal";
|
|
356
373
|
|
|
374
|
+
/**
|
|
375
|
+
* Binning, for the one chart that counts rather than reads a measure.
|
|
376
|
+
*
|
|
377
|
+
* A histogram is a bar chart whose categories the chart works out for itself,
|
|
378
|
+
* so the bucketing lives next to the scales rather than inside a component.
|
|
379
|
+
*/
|
|
380
|
+
/** One bucket of a histogram. */
|
|
381
|
+
interface HistogramBin {
|
|
382
|
+
/** Lower edge, included. */
|
|
383
|
+
from: number;
|
|
384
|
+
/** Upper edge, excluded — except on the last bin, which closes on it. */
|
|
385
|
+
to: number;
|
|
386
|
+
count: number;
|
|
387
|
+
/** `true` for the last bin: the only one that includes its upper edge. */
|
|
388
|
+
last: boolean;
|
|
389
|
+
}
|
|
390
|
+
/**
|
|
391
|
+
* How the buckets are cut: a count, explicit edges, or `true` for a count
|
|
392
|
+
* derived from the sample size.
|
|
393
|
+
*/
|
|
394
|
+
type BinSpec = number | readonly number[] | boolean;
|
|
395
|
+
/**
|
|
396
|
+
* Sturges' rule: `ceil(log2 n) + 1`.
|
|
397
|
+
*
|
|
398
|
+
* Not the most refined estimator — Freedman-Diaconis adapts to the spread —
|
|
399
|
+
* but it is the one a reader recognises, it never explodes on a heavy tail,
|
|
400
|
+
* and a histogram whose bin count changes with a single outlier is worse than
|
|
401
|
+
* one that is slightly too coarse.
|
|
402
|
+
*/
|
|
403
|
+
declare function sturgesBins(count: number): number;
|
|
404
|
+
/**
|
|
405
|
+
* The edges a set of values would be bucketed on.
|
|
406
|
+
*
|
|
407
|
+
* Every edge lands on a round step — a bin running from 17.4 to 23.9 is
|
|
408
|
+
* arithmetically correct and unreadable on an axis — and among the round
|
|
409
|
+
* steps, the one whose bin count lands nearest what was asked for.
|
|
410
|
+
*/
|
|
411
|
+
declare function binEdges(values: readonly number[], spec?: BinSpec): number[];
|
|
412
|
+
/**
|
|
413
|
+
* Counts a set of values into buckets.
|
|
414
|
+
*
|
|
415
|
+
* Every bin is half-open — `[from, to)` — except the last, which closes on its
|
|
416
|
+
* upper edge. Without that, the single largest observation of a sample falls
|
|
417
|
+
* out of the histogram entirely.
|
|
418
|
+
*/
|
|
419
|
+
declare function binValues(values: readonly (number | null | undefined)[], spec?: BinSpec): HistogramBin[];
|
|
420
|
+
|
|
421
|
+
/** Resets the histogram warning. Test helper. */
|
|
422
|
+
declare function resetBarChartWarnings(): void;
|
|
357
423
|
type BarChartOrientation = CartesianOrientation;
|
|
358
424
|
interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWithoutRef<"figure">, keyof CartesianChartBaseProps | "children" | "title"> {
|
|
359
425
|
/**
|
|
@@ -381,9 +447,33 @@ interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWith
|
|
|
381
447
|
* above is not good.
|
|
382
448
|
*/
|
|
383
449
|
diverging?: boolean | number | string;
|
|
450
|
+
/**
|
|
451
|
+
* Turns the chart into a histogram: the distribution of one numeric field.
|
|
452
|
+
*
|
|
453
|
+
* The chart then reads `x.key` on every row as a measurement, buckets those
|
|
454
|
+
* measurements, and draws how many fell in each bucket. `series` must hold a
|
|
455
|
+
* single entry, which names and colours the count — its `key` is the header
|
|
456
|
+
* of the count column, not a field read on the data.
|
|
457
|
+
*
|
|
458
|
+
* `true` picks a bucket count from the sample size, a number asks for that
|
|
459
|
+
* many, and an array of edges cuts them by hand (uneven widths allowed). The
|
|
460
|
+
* bars then touch, separated only by the surface gap: the axis underneath is
|
|
461
|
+
* a continuous measure, and air between the bars would read as empty ranges.
|
|
462
|
+
*
|
|
463
|
+
* Where a scatter plot shows a relation, a histogram shows a shape — which
|
|
464
|
+
* is why `sort`, `stack` and `diverging` are ignored here: the buckets have
|
|
465
|
+
* an order of their own and reordering them destroys the shape.
|
|
466
|
+
*/
|
|
467
|
+
bins?: BinSpec;
|
|
468
|
+
/**
|
|
469
|
+
* Shape of the line drawn for a series marked `type: "line"`.
|
|
470
|
+
*
|
|
471
|
+
* Only read by a combined chart; the bars have no curve.
|
|
472
|
+
*/
|
|
473
|
+
curve?: ChartCurve;
|
|
384
474
|
/** Caps the thickness of a mark. Never fills the slot: the leftover is air. */
|
|
385
475
|
barSize?: number;
|
|
386
|
-
/** Orders the categories by their total. */
|
|
476
|
+
/** Orders the categories by their total. Ignored by a histogram. */
|
|
387
477
|
sort?: "none" | "asc" | "desc";
|
|
388
478
|
/** Draws the value at the end of each bar, where it fits without collision. */
|
|
389
479
|
showValues?: boolean;
|
|
@@ -404,7 +494,7 @@ interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWith
|
|
|
404
494
|
* is read for the length of its mark, and an axis starting at 40 exaggerates
|
|
405
495
|
* every difference on the chart.
|
|
406
496
|
*/
|
|
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;
|
|
497
|
+
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, legendToggle, margin, locale, plotLabel, className, ...props }: BarChartProps): react_jsx_runtime.JSX.Element;
|
|
408
498
|
|
|
409
499
|
type BannerVariant = "notification" | "hero" | "promotion";
|
|
410
500
|
type BannerType = "info" | "success" | "warning" | "error" | "default";
|
|
@@ -730,6 +820,245 @@ declare namespace CardDescription {
|
|
|
730
820
|
var displayName: string;
|
|
731
821
|
}
|
|
732
822
|
|
|
823
|
+
/**
|
|
824
|
+
* Quantiles, and the five-number summary a box plot is drawn from.
|
|
825
|
+
*
|
|
826
|
+
* Written here rather than inside the component because it is the part that
|
|
827
|
+
* can be wrong without any rendering test noticing: a median off by one index
|
|
828
|
+
* still draws a perfectly plausible box.
|
|
829
|
+
*/
|
|
830
|
+
/**
|
|
831
|
+
* Quantile `p` (0 to 1) of an ascending list, interpolating between the two
|
|
832
|
+
* neighbouring observations.
|
|
833
|
+
*
|
|
834
|
+
* This is the R-7 / `numpy.percentile` definition — the one a reader will get
|
|
835
|
+
* if they check the numbers in a spreadsheet, which is the only property that
|
|
836
|
+
* matters for a library.
|
|
837
|
+
*/
|
|
838
|
+
declare function quantileSorted(sorted: readonly number[], p: number): number;
|
|
839
|
+
/** Same, on a list that has not been sorted yet. */
|
|
840
|
+
declare function quantile(values: readonly number[], p: number): number;
|
|
841
|
+
/** The five-number summary, plus what falls outside the whiskers. */
|
|
842
|
+
interface BoxStats {
|
|
843
|
+
/** Number of observations the summary was computed from. */
|
|
844
|
+
count: number;
|
|
845
|
+
/** Smallest observation, outliers included. */
|
|
846
|
+
min: number;
|
|
847
|
+
/** Largest observation, outliers included. */
|
|
848
|
+
max: number;
|
|
849
|
+
q1: number;
|
|
850
|
+
median: number;
|
|
851
|
+
q3: number;
|
|
852
|
+
/** `q3 - q1`: the width of the box, and the unit the whiskers are measured in. */
|
|
853
|
+
iqr: number;
|
|
854
|
+
/** End of the lower whisker: the smallest observation still within reach. */
|
|
855
|
+
lower: number;
|
|
856
|
+
/** End of the upper whisker. */
|
|
857
|
+
upper: number;
|
|
858
|
+
/** Observations beyond the whiskers, in ascending order. */
|
|
859
|
+
outliers: number[];
|
|
860
|
+
}
|
|
861
|
+
/**
|
|
862
|
+
* Turns a set of observations into the box a plot draws.
|
|
863
|
+
*
|
|
864
|
+
* The whiskers stop at the furthest observation within `whisker` times the
|
|
865
|
+
* interquartile range — Tukey's rule — rather than at the extremes. Whiskers
|
|
866
|
+
* drawn to the extremes cannot show an outlier at all: the point that matters
|
|
867
|
+
* most becomes the end of a line like any other.
|
|
868
|
+
*
|
|
869
|
+
* Returns `null` for an empty set, which a chart draws as a gap. A category
|
|
870
|
+
* with no observations is not a category with a median of zero.
|
|
871
|
+
*/
|
|
872
|
+
declare function boxStats(values: readonly (number | null | undefined)[], whisker?: number): BoxStats | null;
|
|
873
|
+
|
|
874
|
+
/** Fields holding an already-computed summary, when the observations are not at hand. */
|
|
875
|
+
interface BoxPlotQuantileKeys {
|
|
876
|
+
/** Lower whisker end. Defaults to `q1` when absent. */
|
|
877
|
+
min?: string;
|
|
878
|
+
q1: string;
|
|
879
|
+
median: string;
|
|
880
|
+
q3: string;
|
|
881
|
+
/** Upper whisker end. Defaults to `q3` when absent. */
|
|
882
|
+
max?: string;
|
|
883
|
+
}
|
|
884
|
+
/** One box, as the tooltip and the click handler see it. */
|
|
885
|
+
interface BoxPlotBox {
|
|
886
|
+
index: number;
|
|
887
|
+
x: ChartXValue;
|
|
888
|
+
label: string;
|
|
889
|
+
/** `null` when the category holds no observation — drawn as a gap. */
|
|
890
|
+
stats: BoxStats | null;
|
|
891
|
+
/** Arithmetic mean. Only available when the raw observations were given. */
|
|
892
|
+
mean: number | null;
|
|
893
|
+
datum: ChartDatum;
|
|
894
|
+
}
|
|
895
|
+
interface BoxPlotProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
896
|
+
/** One row per category compared. */
|
|
897
|
+
data: ChartDatum[];
|
|
898
|
+
/** Field holding the name of each category. */
|
|
899
|
+
x: ChartXAxisConfig;
|
|
900
|
+
y?: ChartYAxisConfig;
|
|
901
|
+
/**
|
|
902
|
+
* Field holding the observations of a category, as an array of numbers.
|
|
903
|
+
*
|
|
904
|
+
* The chart then computes the quartiles, the whiskers and the outliers
|
|
905
|
+
* itself — which is the only way it can know what an outlier is.
|
|
906
|
+
*/
|
|
907
|
+
values?: string;
|
|
908
|
+
/**
|
|
909
|
+
* Fields holding an already-computed summary, for the case where the raw
|
|
910
|
+
* observations never reach the browser.
|
|
911
|
+
*
|
|
912
|
+
* The whiskers then stop where the data says, and no outlier can be drawn:
|
|
913
|
+
* Tukey's fences need the observations, not their summary.
|
|
914
|
+
*/
|
|
915
|
+
quantiles?: BoxPlotQuantileKeys;
|
|
916
|
+
/**
|
|
917
|
+
* How many interquartile ranges the whiskers reach before a point counts as
|
|
918
|
+
* an outlier. Tukey's 1.5 by default.
|
|
919
|
+
*/
|
|
920
|
+
whisker?: number;
|
|
921
|
+
orientation?: CartesianOrientation;
|
|
922
|
+
/** Caps the thickness of a box. */
|
|
923
|
+
boxSize?: number;
|
|
924
|
+
/** Draws the observations beyond the whiskers. */
|
|
925
|
+
showOutliers?: boolean;
|
|
926
|
+
/**
|
|
927
|
+
* Marks the mean with a diamond, beside the median line.
|
|
928
|
+
*
|
|
929
|
+
* The distance between the two is the reading: a mean pulled away from the
|
|
930
|
+
* median is the shape of the tail, which is the whole reason this chart
|
|
931
|
+
* exists rather than a bar of averages.
|
|
932
|
+
*/
|
|
933
|
+
showMean?: boolean;
|
|
934
|
+
/** Colour of the boxes. Defaults to the first palette slot. */
|
|
935
|
+
color?: string;
|
|
936
|
+
referenceLines?: ChartReferenceLine[];
|
|
937
|
+
height?: number;
|
|
938
|
+
width?: number;
|
|
939
|
+
size?: ChartSize;
|
|
940
|
+
grid?: ChartGridLines;
|
|
941
|
+
tooltip?: boolean | ((box: BoxPlotBox) => ReactNode);
|
|
942
|
+
tableView?: boolean | "toggle";
|
|
943
|
+
title?: ReactNode;
|
|
944
|
+
description?: ReactNode;
|
|
945
|
+
loading?: boolean;
|
|
946
|
+
emptyState?: ReactNode;
|
|
947
|
+
margin?: Partial<ChartMargin>;
|
|
948
|
+
locale?: string;
|
|
949
|
+
plotLabel?: string;
|
|
950
|
+
format?: (value: number) => string;
|
|
951
|
+
onBoxClick?: (box: BoxPlotBox) => void;
|
|
952
|
+
}
|
|
953
|
+
/**
|
|
954
|
+
* What a mean hides.
|
|
955
|
+
*
|
|
956
|
+
* Median, quartiles, whiskers and the observations that fall outside them.
|
|
957
|
+
* A bar of averages says two categories are alike; a box plot is what shows
|
|
958
|
+
* that one of them is two populations wearing a trench coat.
|
|
959
|
+
*
|
|
960
|
+
* The whiskers stop at the furthest observation within 1.5 interquartile
|
|
961
|
+
* ranges — Tukey's rule — rather than at the extremes. Whiskers drawn to the
|
|
962
|
+
* extremes cannot show an outlier at all: the point that matters most becomes
|
|
963
|
+
* the end of a line like any other. That needs the observations, so a chart
|
|
964
|
+
* given a precomputed summary draws no outlier and says nothing it cannot
|
|
965
|
+
* know.
|
|
966
|
+
*
|
|
967
|
+
* One box per category: comparing two groups side by side is `ChartFacets`
|
|
968
|
+
* with a panel each, which keeps them on a shared scale without asking the
|
|
969
|
+
* reader to hold two colour legends at once.
|
|
970
|
+
*/
|
|
971
|
+
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;
|
|
972
|
+
|
|
973
|
+
/** One session, as the tooltip and the click handler see it. */
|
|
974
|
+
interface Candle {
|
|
975
|
+
index: number;
|
|
976
|
+
x: ChartXValue;
|
|
977
|
+
label: string;
|
|
978
|
+
open: number | null;
|
|
979
|
+
high: number | null;
|
|
980
|
+
low: number | null;
|
|
981
|
+
close: number | null;
|
|
982
|
+
/** `close - open`. `null` when either end is missing. */
|
|
983
|
+
change: number | null;
|
|
984
|
+
/** `true` when the session closed at or above where it opened. */
|
|
985
|
+
rising: boolean;
|
|
986
|
+
datum: ChartDatum;
|
|
987
|
+
}
|
|
988
|
+
interface CandlestickChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
989
|
+
/** One row per session. */
|
|
990
|
+
data: ChartDatum[];
|
|
991
|
+
/** Field holding the session's label — usually a date. */
|
|
992
|
+
x: ChartXAxisConfig;
|
|
993
|
+
y?: ChartYAxisConfig;
|
|
994
|
+
/** Field holding the opening figure. */
|
|
995
|
+
open: string;
|
|
996
|
+
/** Field holding the highest figure reached. */
|
|
997
|
+
high: string;
|
|
998
|
+
/** Field holding the lowest figure reached. */
|
|
999
|
+
low: string;
|
|
1000
|
+
/** Field holding the closing figure. */
|
|
1001
|
+
close: string;
|
|
1002
|
+
/** Caps the thickness of a body. */
|
|
1003
|
+
candleSize?: number;
|
|
1004
|
+
/**
|
|
1005
|
+
* Fills the body of a rising session instead of leaving it hollow.
|
|
1006
|
+
*
|
|
1007
|
+
* Off by default, and that default is an accessibility decision rather than
|
|
1008
|
+
* a stylistic one: hollow against filled is what carries the direction for
|
|
1009
|
+
* a reader who cannot separate green from red, which is the single worst
|
|
1010
|
+
* pair there is under colour vision deficiency.
|
|
1011
|
+
*/
|
|
1012
|
+
fillRising?: boolean;
|
|
1013
|
+
/** Replaces the two status colours. Any CSS colours. */
|
|
1014
|
+
colors?: {
|
|
1015
|
+
up?: string;
|
|
1016
|
+
down?: string;
|
|
1017
|
+
};
|
|
1018
|
+
referenceLines?: ChartReferenceLine[];
|
|
1019
|
+
height?: number;
|
|
1020
|
+
width?: number;
|
|
1021
|
+
size?: ChartSize;
|
|
1022
|
+
grid?: ChartGridLines;
|
|
1023
|
+
legend?: boolean | ChartLegendPosition;
|
|
1024
|
+
tooltip?: boolean | ((candle: Candle) => ReactNode);
|
|
1025
|
+
tableView?: boolean | "toggle";
|
|
1026
|
+
title?: ReactNode;
|
|
1027
|
+
description?: ReactNode;
|
|
1028
|
+
loading?: boolean;
|
|
1029
|
+
emptyState?: ReactNode;
|
|
1030
|
+
margin?: Partial<ChartMargin>;
|
|
1031
|
+
locale?: string;
|
|
1032
|
+
plotLabel?: string;
|
|
1033
|
+
openLabel?: string;
|
|
1034
|
+
highLabel?: string;
|
|
1035
|
+
lowLabel?: string;
|
|
1036
|
+
closeLabel?: string;
|
|
1037
|
+
riseLabel?: string;
|
|
1038
|
+
fallLabel?: string;
|
|
1039
|
+
format?: (value: number) => string;
|
|
1040
|
+
onCandleClick?: (candle: Candle) => void;
|
|
1041
|
+
}
|
|
1042
|
+
/**
|
|
1043
|
+
* Open, high, low and close, one mark per session.
|
|
1044
|
+
*
|
|
1045
|
+
* A narrow audience, and no other shape of the kit can stand in for it: four
|
|
1046
|
+
* figures per position, of which two are a range and two are an ordered pair
|
|
1047
|
+
* inside it. A line of closing prices throws away three quarters of that.
|
|
1048
|
+
*
|
|
1049
|
+
* The colours are the status pair, not the categorical palette: a rise and a
|
|
1050
|
+
* fall are not two identities a reader has to tell apart, they are the same
|
|
1051
|
+
* measurement pointing two ways. Green against red is also the worst pair
|
|
1052
|
+
* there is under colour vision deficiency, so the direction is carried a
|
|
1053
|
+
* second time by the shape of the body — hollow for a rise, filled for a
|
|
1054
|
+
* fall. Colour alone never says which way a session went.
|
|
1055
|
+
*
|
|
1056
|
+
* The value axis does not anchor at zero. A price is read for its level and
|
|
1057
|
+
* its movement; a share worth 180 dollars read from zero is a flat band at
|
|
1058
|
+
* the top of the plot.
|
|
1059
|
+
*/
|
|
1060
|
+
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;
|
|
1061
|
+
|
|
733
1062
|
/** Geometry handed to the render prop once the container has been measured. */
|
|
734
1063
|
interface ChartContainerRenderArgs {
|
|
735
1064
|
width: number;
|
|
@@ -906,6 +1235,8 @@ declare const CHART_PALETTE_SIZE = 8;
|
|
|
906
1235
|
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
1236
|
/** Grey used for de-emphasised series and for the "Other" bucket. */
|
|
908
1237
|
declare const CHART_MUTED_COLOR = "var(--color-chart-muted)";
|
|
1238
|
+
declare const CHART_UP_COLOR = "var(--color-chart-up)";
|
|
1239
|
+
declare const CHART_DOWN_COLOR = "var(--color-chart-down)";
|
|
909
1240
|
/**
|
|
910
1241
|
* Number of series a chart can carry when any two marks may end up side by
|
|
911
1242
|
* side — a scatter or bubble plot. Neighbouring bars and lines only ever
|
|
@@ -1187,6 +1518,416 @@ interface UseChartSizeResult<T extends HTMLElement> {
|
|
|
1187
1518
|
*/
|
|
1188
1519
|
declare function useChartSize<T extends HTMLElement = HTMLDivElement>(options?: UseChartSizeOptions): UseChartSizeResult<T>;
|
|
1189
1520
|
|
|
1521
|
+
/**
|
|
1522
|
+
* Ticks for an axis carrying dates.
|
|
1523
|
+
*
|
|
1524
|
+
* `niceTicks` rounds a number to a 1 / 2 / 5 step, which is the right answer
|
|
1525
|
+
* for a quantity and the wrong one for a date: time is not decimal. A step of
|
|
1526
|
+
* "two hundred million milliseconds" is a perfectly round number and lands on
|
|
1527
|
+
* 03:26 on a Tuesday. A reader of a schedule wants Mondays, or the first of
|
|
1528
|
+
* the month — so the steps here are the ones a calendar actually has.
|
|
1529
|
+
*/
|
|
1530
|
+
type TimeUnit = "second" | "minute" | "hour" | "day" | "week" | "month" | "year";
|
|
1531
|
+
interface TimeTickScale {
|
|
1532
|
+
/** Tick timestamps, ascending. */
|
|
1533
|
+
values: number[];
|
|
1534
|
+
/** Calendar unit the step is counted in — what a label should say. */
|
|
1535
|
+
unit: TimeUnit;
|
|
1536
|
+
/** How many of that unit each step covers. */
|
|
1537
|
+
step: number;
|
|
1538
|
+
}
|
|
1539
|
+
/**
|
|
1540
|
+
* Ticks covering `[min, max]`, landing on calendar boundaries.
|
|
1541
|
+
*
|
|
1542
|
+
* `count` is a target, not a promise — the same contract as `niceTicks`: the
|
|
1543
|
+
* step is chosen first, and how many ticks fit follows from it.
|
|
1544
|
+
*
|
|
1545
|
+
* Steps are walked with `Date` arithmetic rather than by adding a constant, so
|
|
1546
|
+
* a month tick stays on the first of the month across February and a day tick
|
|
1547
|
+
* stays at midnight across a daylight saving change.
|
|
1548
|
+
*/
|
|
1549
|
+
declare function niceTimeTicks(min: number, max: number, count?: number): TimeTickScale;
|
|
1550
|
+
/**
|
|
1551
|
+
* Renders a time tick at the precision its own step carries.
|
|
1552
|
+
*
|
|
1553
|
+
* A day step writes "12 Mar" and an hour step writes "14:00": showing the
|
|
1554
|
+
* time under a monthly tick, or the year under an hourly one, is noise the
|
|
1555
|
+
* reader has to filter out on every label.
|
|
1556
|
+
*/
|
|
1557
|
+
declare function formatTimeTick(value: number, unit: TimeUnit, locale?: string): string;
|
|
1558
|
+
/** Turns a date, a timestamp or a parsable string into a timestamp. */
|
|
1559
|
+
declare function toTimestamp(value: unknown): number | null;
|
|
1560
|
+
|
|
1561
|
+
/** Resets the series warning. Test helper. */
|
|
1562
|
+
declare function resetDumbbellWarnings(): void;
|
|
1563
|
+
/** How the rows are ordered. */
|
|
1564
|
+
type DumbbellSort = "none" | "asc" | "desc" | "gap";
|
|
1565
|
+
/** One row, as the tooltip and the click handler see it. */
|
|
1566
|
+
interface DumbbellRow {
|
|
1567
|
+
index: number;
|
|
1568
|
+
x: ChartXValue;
|
|
1569
|
+
label: string;
|
|
1570
|
+
/** Every visible series' value on this row, in series order. */
|
|
1571
|
+
points: ChartPoint[];
|
|
1572
|
+
/** Smallest and largest value of the row, the two ends of its bar. */
|
|
1573
|
+
from: number | null;
|
|
1574
|
+
to: number | null;
|
|
1575
|
+
/** Last series minus first: the move the chart is read for. */
|
|
1576
|
+
change: number | null;
|
|
1577
|
+
datum: ChartDatum;
|
|
1578
|
+
}
|
|
1579
|
+
interface DumbbellChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
1580
|
+
/** One row per item compared. */
|
|
1581
|
+
data: ChartDatum[];
|
|
1582
|
+
/** Field holding the name of each row. */
|
|
1583
|
+
x: ChartXAxisConfig;
|
|
1584
|
+
y?: ChartYAxisConfig;
|
|
1585
|
+
/**
|
|
1586
|
+
* The values compared on each row — usually two: before and after.
|
|
1587
|
+
*
|
|
1588
|
+
* Any two dots of a row can end up side by side, which is the same test a
|
|
1589
|
+
* scatter plot puts the palette through: past three series only the first
|
|
1590
|
+
* three slots stay tellable apart, and the chart says so.
|
|
1591
|
+
*/
|
|
1592
|
+
series: ChartSeries[];
|
|
1593
|
+
/**
|
|
1594
|
+
* Orders the rows. `gap` sorts by the distance between the two ends, which
|
|
1595
|
+
* is what turns the chart from a list into a finding: the biggest movers
|
|
1596
|
+
* come to the top.
|
|
1597
|
+
*/
|
|
1598
|
+
sort?: DumbbellSort;
|
|
1599
|
+
/** Series the `asc` / `desc` orders read. Defaults to the last one. */
|
|
1600
|
+
sortBy?: string;
|
|
1601
|
+
/** Writes the value beside each dot, where there is room. */
|
|
1602
|
+
showValues?: boolean;
|
|
1603
|
+
/** Radius of a dot. */
|
|
1604
|
+
dotSize?: number;
|
|
1605
|
+
referenceLines?: ChartReferenceLine[];
|
|
1606
|
+
height?: number;
|
|
1607
|
+
width?: number;
|
|
1608
|
+
size?: ChartSize;
|
|
1609
|
+
grid?: ChartGridLines;
|
|
1610
|
+
legend?: boolean | ChartLegendPosition;
|
|
1611
|
+
legendToggle?: boolean;
|
|
1612
|
+
tooltip?: boolean | ((row: DumbbellRow) => ReactNode);
|
|
1613
|
+
tableView?: boolean | "toggle";
|
|
1614
|
+
/** Adds the last-minus-first column to the data table. */
|
|
1615
|
+
showChange?: boolean;
|
|
1616
|
+
title?: ReactNode;
|
|
1617
|
+
description?: ReactNode;
|
|
1618
|
+
loading?: boolean;
|
|
1619
|
+
emptyState?: ReactNode;
|
|
1620
|
+
margin?: Partial<ChartMargin>;
|
|
1621
|
+
locale?: string;
|
|
1622
|
+
plotLabel?: string;
|
|
1623
|
+
/** Header of the change column of the data table. */
|
|
1624
|
+
changeLabel?: string;
|
|
1625
|
+
format?: (value: number) => string;
|
|
1626
|
+
onRowClick?: (row: DumbbellRow) => void;
|
|
1627
|
+
}
|
|
1628
|
+
/**
|
|
1629
|
+
* Two points per item, and the distance between them.
|
|
1630
|
+
*
|
|
1631
|
+
* Before against after, or the two ends of a range. Two paired bars answer
|
|
1632
|
+
* the same question and answer it badly: the reader has to compare the
|
|
1633
|
+
* difference of two lengths across a dozen rows. Here the difference IS the
|
|
1634
|
+
* mark — the rule between the dots — and the eye reads it directly.
|
|
1635
|
+
*
|
|
1636
|
+
* The value axis does not anchor at zero. A dumbbell is read for the gap
|
|
1637
|
+
* between its two ends, and forcing zero in squeezes every gap on the chart
|
|
1638
|
+
* towards nothing as soon as the values sit far from it. Pass
|
|
1639
|
+
* `y={{ includeZero: true }}` on the rare chart where the absolute level is
|
|
1640
|
+
* the point.
|
|
1641
|
+
*
|
|
1642
|
+
* `sort="gap"` is what turns the chart from a list into a finding: the rows
|
|
1643
|
+
* that moved most come to the top.
|
|
1644
|
+
*/
|
|
1645
|
+
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;
|
|
1646
|
+
|
|
1647
|
+
/** One stage, as the tooltip and the click handler see it. */
|
|
1648
|
+
interface FunnelStage {
|
|
1649
|
+
index: number;
|
|
1650
|
+
x: ChartXValue;
|
|
1651
|
+
label: string;
|
|
1652
|
+
value: number | null;
|
|
1653
|
+
/** Share of the FIRST stage still here. `null` on the first stage itself. */
|
|
1654
|
+
overall: number | null;
|
|
1655
|
+
/** Share of the PREVIOUS stage still here. `null` on the first stage. */
|
|
1656
|
+
conversion: number | null;
|
|
1657
|
+
/** What the previous stage lost on the way here. `null` on the first stage. */
|
|
1658
|
+
dropOff: number | null;
|
|
1659
|
+
formattedValue: string;
|
|
1660
|
+
datum: ChartDatum;
|
|
1661
|
+
}
|
|
1662
|
+
interface FunnelChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
1663
|
+
/** One row per stage, in the order they are walked. */
|
|
1664
|
+
data: ChartDatum[];
|
|
1665
|
+
/** Field holding the name of each stage. */
|
|
1666
|
+
x: ChartXAxisConfig;
|
|
1667
|
+
/** Field holding how many reached that stage. */
|
|
1668
|
+
value: string;
|
|
1669
|
+
/**
|
|
1670
|
+
* Where each bar sits in its row.
|
|
1671
|
+
*
|
|
1672
|
+
* `center` is the funnel silhouette, `left` a plain ranked bar chart. The
|
|
1673
|
+
* silhouette reads as a narrowing; the left alignment compares lengths more
|
|
1674
|
+
* precisely. Both encode the value as a LENGTH — never as an area, which the
|
|
1675
|
+
* eye cannot compare.
|
|
1676
|
+
*/
|
|
1677
|
+
align?: "center" | "left";
|
|
1678
|
+
/**
|
|
1679
|
+
* Writes what each stage kept from the one before it.
|
|
1680
|
+
*
|
|
1681
|
+
* That ratio is the reason the chart exists: the absolute figures are a
|
|
1682
|
+
* table, the step-to-step loss is the finding.
|
|
1683
|
+
*/
|
|
1684
|
+
showConversion?: boolean;
|
|
1685
|
+
/** Writes the figure reached at each stage. */
|
|
1686
|
+
showValues?: boolean;
|
|
1687
|
+
/** Caps the thickness of a stage. */
|
|
1688
|
+
stageSize?: number;
|
|
1689
|
+
/** Replaces the ordinal ramp — any CSS colours, first stage first. */
|
|
1690
|
+
colors?: readonly string[];
|
|
1691
|
+
height?: number;
|
|
1692
|
+
width?: number;
|
|
1693
|
+
size?: ChartSize;
|
|
1694
|
+
tooltip?: boolean | ((stage: FunnelStage) => ReactNode);
|
|
1695
|
+
tableView?: boolean | "toggle";
|
|
1696
|
+
title?: ReactNode;
|
|
1697
|
+
description?: ReactNode;
|
|
1698
|
+
loading?: boolean;
|
|
1699
|
+
emptyState?: ReactNode;
|
|
1700
|
+
locale?: string;
|
|
1701
|
+
plotLabel?: string;
|
|
1702
|
+
/** Header of the value column of the data table. */
|
|
1703
|
+
valueLabel?: string;
|
|
1704
|
+
/** Header of the step-to-step conversion column. */
|
|
1705
|
+
conversionLabel?: string;
|
|
1706
|
+
/** Header of the step-to-step loss column. */
|
|
1707
|
+
dropOffLabel?: string;
|
|
1708
|
+
format?: (value: number) => string;
|
|
1709
|
+
onStageClick?: (stage: FunnelStage) => void;
|
|
1710
|
+
}
|
|
1711
|
+
/**
|
|
1712
|
+
* Ordered stages, and what is lost between them.
|
|
1713
|
+
*
|
|
1714
|
+
* The stages have an ORDER, which is why the colour comes from the ordinal
|
|
1715
|
+
* ramp and not from the categorical slots: the eight slots answer "which
|
|
1716
|
+
* one", and the answer here is "the third of five". A funnel painted in
|
|
1717
|
+
* identity colours says its stages are unrelated categories, which is the one
|
|
1718
|
+
* thing they are not.
|
|
1719
|
+
*
|
|
1720
|
+
* The value is encoded as a length, never as an area: the trapezoid silhouette
|
|
1721
|
+
* of the classic funnel asks the reader to compare two surfaces, and two
|
|
1722
|
+
* surfaces cannot be compared by eye. `align="center"` keeps the silhouette
|
|
1723
|
+
* while the measure stays the width of each bar.
|
|
1724
|
+
*
|
|
1725
|
+
* Use it for a path people walk in one direction. Stages that are not ordered
|
|
1726
|
+
* are a `BarChart`, and a breakdown of one total is a `PieChart`.
|
|
1727
|
+
*/
|
|
1728
|
+
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;
|
|
1729
|
+
|
|
1730
|
+
/** One task, as the tooltip and the click handler see it. */
|
|
1731
|
+
interface GanttTask {
|
|
1732
|
+
index: number;
|
|
1733
|
+
/** Stable identity, used by the dependencies. Falls back to the row index. */
|
|
1734
|
+
id: string;
|
|
1735
|
+
x: ChartXValue;
|
|
1736
|
+
label: string;
|
|
1737
|
+
/** Start, as a timestamp. `null` when the row carries no usable date. */
|
|
1738
|
+
start: number | null;
|
|
1739
|
+
/** End, as a timestamp. Equal to `start` on a milestone. */
|
|
1740
|
+
end: number | null;
|
|
1741
|
+
/** Share completed, from 0 to 1. `null` when the row says nothing. */
|
|
1742
|
+
progress: number | null;
|
|
1743
|
+
/** A point in time rather than a span. */
|
|
1744
|
+
milestone: boolean;
|
|
1745
|
+
/** Ids this task waits on. */
|
|
1746
|
+
dependsOn: string[];
|
|
1747
|
+
/** Name of the group the task belongs to, when there is one. */
|
|
1748
|
+
group: string | null;
|
|
1749
|
+
datum: ChartDatum;
|
|
1750
|
+
}
|
|
1751
|
+
interface GanttChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
1752
|
+
/** One row per task, in the order they are listed. */
|
|
1753
|
+
data: ChartDatum[];
|
|
1754
|
+
/** Field holding the name of each task. */
|
|
1755
|
+
x: ChartXAxisConfig;
|
|
1756
|
+
/** Field holding the start — a `Date`, a timestamp, or an ISO string. */
|
|
1757
|
+
start: string;
|
|
1758
|
+
/** Field holding the end. A row without one is drawn as a milestone. */
|
|
1759
|
+
end?: string;
|
|
1760
|
+
/** Field holding a stable id, which the dependencies point at. */
|
|
1761
|
+
id?: string;
|
|
1762
|
+
/** Field holding the share completed, from 0 to 1. */
|
|
1763
|
+
progress?: string;
|
|
1764
|
+
/** Field marking a row as a point in time rather than a span. */
|
|
1765
|
+
milestone?: string;
|
|
1766
|
+
/**
|
|
1767
|
+
* Field holding the ids this task waits on, as an array.
|
|
1768
|
+
*
|
|
1769
|
+
* The arrows are drawn from the end of each predecessor to the start of the
|
|
1770
|
+
* task: what a schedule is read for is rarely a single bar, it is what is
|
|
1771
|
+
* blocking it.
|
|
1772
|
+
*/
|
|
1773
|
+
dependencies?: string;
|
|
1774
|
+
/** Field naming the group a task belongs to. Groups take the palette slots. */
|
|
1775
|
+
group?: string;
|
|
1776
|
+
/** Fixes the window shown. Defaults to the span of the tasks, plus air. */
|
|
1777
|
+
domain?: [Date | number | string, Date | number | string];
|
|
1778
|
+
/** Marks a moment with a rule. Pass `false` to leave it out. */
|
|
1779
|
+
today?: Date | number | string | false;
|
|
1780
|
+
/** Preferred number of ticks on the time axis. */
|
|
1781
|
+
ticks?: number;
|
|
1782
|
+
/** Caps the thickness of a bar. */
|
|
1783
|
+
barSize?: number;
|
|
1784
|
+
/** Height of a row. The chart's own height follows from it. */
|
|
1785
|
+
rowSize?: number;
|
|
1786
|
+
/** Colour of the bars when there are no groups. */
|
|
1787
|
+
color?: string;
|
|
1788
|
+
height?: number;
|
|
1789
|
+
width?: number;
|
|
1790
|
+
size?: ChartSize;
|
|
1791
|
+
grid?: boolean;
|
|
1792
|
+
legend?: boolean | ChartLegendPosition;
|
|
1793
|
+
tooltip?: boolean | ((task: GanttTask) => ReactNode);
|
|
1794
|
+
tableView?: boolean | "toggle";
|
|
1795
|
+
title?: ReactNode;
|
|
1796
|
+
description?: ReactNode;
|
|
1797
|
+
loading?: boolean;
|
|
1798
|
+
emptyState?: ReactNode;
|
|
1799
|
+
margin?: Partial<ChartMargin>;
|
|
1800
|
+
locale?: string;
|
|
1801
|
+
plotLabel?: string;
|
|
1802
|
+
startLabel?: string;
|
|
1803
|
+
endLabel?: string;
|
|
1804
|
+
progressLabel?: string;
|
|
1805
|
+
todayLabel?: string;
|
|
1806
|
+
/** Formats a date in the tooltip and the data table. */
|
|
1807
|
+
formatDate?: (value: number) => string;
|
|
1808
|
+
onTaskClick?: (task: GanttTask) => void;
|
|
1809
|
+
}
|
|
1810
|
+
/**
|
|
1811
|
+
* Tasks in time, with their dependencies and their milestones.
|
|
1812
|
+
*
|
|
1813
|
+
* More a planning component than a chart, and it says so: there is no measure
|
|
1814
|
+
* on the value axis, only dates. What it shows that a list cannot is the
|
|
1815
|
+
* overlap — two tasks running at once, and the arrow saying one of them
|
|
1816
|
+
* cannot start until the other is done.
|
|
1817
|
+
*
|
|
1818
|
+
* It does not overlap `Calendar`, which picks a date and hands it back.
|
|
1819
|
+
* Nothing is selected here: a schedule is read, and a row that has no width
|
|
1820
|
+
* on the time axis is a milestone rather than a day.
|
|
1821
|
+
*
|
|
1822
|
+
* The time axis lands on calendar boundaries — Mondays, the first of the
|
|
1823
|
+
* month — rather than on round numbers of milliseconds, which is what a
|
|
1824
|
+
* decimal tick generator produces when it is pointed at a date.
|
|
1825
|
+
*/
|
|
1826
|
+
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;
|
|
1827
|
+
|
|
1828
|
+
/** What a step does to the running total. */
|
|
1829
|
+
type WaterfallKind = "increase" | "decrease" | "total";
|
|
1830
|
+
/** One step, as the tooltip, the legend and the click handler see it. */
|
|
1831
|
+
interface WaterfallStep {
|
|
1832
|
+
index: number;
|
|
1833
|
+
x: ChartXValue;
|
|
1834
|
+
label: string;
|
|
1835
|
+
/** The contribution of the step, or the figure a total row lands on. */
|
|
1836
|
+
value: number | null;
|
|
1837
|
+
/** Running total the bar grows from. */
|
|
1838
|
+
start: number;
|
|
1839
|
+
/** Running total the bar grows to. */
|
|
1840
|
+
end: number;
|
|
1841
|
+
kind: WaterfallKind;
|
|
1842
|
+
formattedValue: string;
|
|
1843
|
+
/** The running total after the step, formatted. */
|
|
1844
|
+
formattedEnd: string;
|
|
1845
|
+
datum: ChartDatum;
|
|
1846
|
+
}
|
|
1847
|
+
interface WaterfallChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
1848
|
+
/** One row per step, in the order they are read. */
|
|
1849
|
+
data: ChartDatum[];
|
|
1850
|
+
/** Field holding the name of each step. */
|
|
1851
|
+
x: ChartXAxisConfig;
|
|
1852
|
+
y?: ChartYAxisConfig;
|
|
1853
|
+
/** Field holding what the step adds to, or takes from, the running total. */
|
|
1854
|
+
value: string;
|
|
1855
|
+
/**
|
|
1856
|
+
* Field marking a row as a checkpoint rather than a contribution.
|
|
1857
|
+
*
|
|
1858
|
+
* A truthy value draws the bar from zero to the running total instead of
|
|
1859
|
+
* floating it — the opening balance, a subtotal, the closing figure. When
|
|
1860
|
+
* such a row also carries a `value`, that figure wins and the running total
|
|
1861
|
+
* is reset to it: a declared total that disagrees with the sum of the steps
|
|
1862
|
+
* is a discrepancy worth seeing, not one worth hiding.
|
|
1863
|
+
*/
|
|
1864
|
+
total?: string;
|
|
1865
|
+
/** Figure the running total starts from. Defaults to `0`. */
|
|
1866
|
+
start?: number;
|
|
1867
|
+
/**
|
|
1868
|
+
* `vertical` draws columns, `horizontal` draws bars — the same call as
|
|
1869
|
+
* anywhere else: horizontal as soon as the step names are long.
|
|
1870
|
+
*/
|
|
1871
|
+
orientation?: CartesianOrientation;
|
|
1872
|
+
/**
|
|
1873
|
+
* Draws the thin rule joining one bar to the next.
|
|
1874
|
+
*
|
|
1875
|
+
* On by default, and it is not decoration: without it a floating bar has no
|
|
1876
|
+
* visible tie to the one before, and the chart reads as a set of unrelated
|
|
1877
|
+
* marks rather than as one running total.
|
|
1878
|
+
*/
|
|
1879
|
+
connectors?: boolean;
|
|
1880
|
+
/** Writes each step's contribution at the end of its bar, where it fits. */
|
|
1881
|
+
showValues?: boolean;
|
|
1882
|
+
/** Caps the thickness of a mark. */
|
|
1883
|
+
barSize?: number;
|
|
1884
|
+
/** Replaces the three colours. Any CSS colours. */
|
|
1885
|
+
colors?: {
|
|
1886
|
+
increase?: string;
|
|
1887
|
+
decrease?: string;
|
|
1888
|
+
total?: string;
|
|
1889
|
+
};
|
|
1890
|
+
height?: number;
|
|
1891
|
+
width?: number;
|
|
1892
|
+
size?: ChartSize;
|
|
1893
|
+
grid?: ChartGridLines;
|
|
1894
|
+
legend?: boolean | ChartLegendPosition;
|
|
1895
|
+
tooltip?: boolean | ((step: WaterfallStep) => ReactNode);
|
|
1896
|
+
tableView?: boolean | "toggle";
|
|
1897
|
+
title?: ReactNode;
|
|
1898
|
+
description?: ReactNode;
|
|
1899
|
+
loading?: boolean;
|
|
1900
|
+
emptyState?: ReactNode;
|
|
1901
|
+
margin?: Partial<ChartMargin>;
|
|
1902
|
+
locale?: string;
|
|
1903
|
+
plotLabel?: string;
|
|
1904
|
+
/** Header of the contribution column of the data table. */
|
|
1905
|
+
valueLabel?: string;
|
|
1906
|
+
/** Header of the running total column, and label of the total legend entry. */
|
|
1907
|
+
totalLabel?: string;
|
|
1908
|
+
increaseLabel?: string;
|
|
1909
|
+
decreaseLabel?: string;
|
|
1910
|
+
format?: (value: number) => string;
|
|
1911
|
+
onStepClick?: (step: WaterfallStep) => void;
|
|
1912
|
+
}
|
|
1913
|
+
/**
|
|
1914
|
+
* How one figure became another.
|
|
1915
|
+
*
|
|
1916
|
+
* Every contribution between a start and an end, floating between the running
|
|
1917
|
+
* total before it and after it — the budget variance chart. It answers a
|
|
1918
|
+
* question no other shape of the kit can: a bar chart of the same steps shows
|
|
1919
|
+
* their sizes and says nothing about how they add up.
|
|
1920
|
+
*
|
|
1921
|
+
* Colour comes from the diverging pair, because that is exactly what a step
|
|
1922
|
+
* is: a move above or below the running total. It says the direction, never
|
|
1923
|
+
* the verdict — a cost falling and a revenue falling wear the same colour,
|
|
1924
|
+
* and the row label is what tells them apart.
|
|
1925
|
+
*
|
|
1926
|
+
* The order of the rows IS the chart, so there is no `sort`: reordering the
|
|
1927
|
+
* steps of a waterfall produces a different, and usually false, story.
|
|
1928
|
+
*/
|
|
1929
|
+
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;
|
|
1930
|
+
|
|
1190
1931
|
interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "size" | "onChange" | "type"> {
|
|
1191
1932
|
checked?: boolean;
|
|
1192
1933
|
defaultChecked?: boolean;
|
|
@@ -3464,6 +4205,44 @@ interface UILabels {
|
|
|
3464
4205
|
chartValue: string;
|
|
3465
4206
|
/** Header of the "aimed at" column of a bullet chart's data table. */
|
|
3466
4207
|
chartTarget: string;
|
|
4208
|
+
/** Legend entry and tooltip row for a waterfall step that adds. */
|
|
4209
|
+
chartIncrease: string;
|
|
4210
|
+
/** Legend entry and tooltip row for a waterfall step that takes away. */
|
|
4211
|
+
chartDecrease: string;
|
|
4212
|
+
/** Header of the running-total column of a waterfall's data table. */
|
|
4213
|
+
chartRunningTotal: string;
|
|
4214
|
+
/** Header of the "kept from the previous stage" column of a funnel. */
|
|
4215
|
+
chartConversion: string;
|
|
4216
|
+
/** Header of the "lost since the previous stage" column of a funnel. */
|
|
4217
|
+
chartDropOff: string;
|
|
4218
|
+
/** Header of the gap column of a dumbbell chart's data table. */
|
|
4219
|
+
chartChange: string;
|
|
4220
|
+
/** Header of the median column of a box plot's data table. */
|
|
4221
|
+
chartMedian: string;
|
|
4222
|
+
/** Header of the observation-count column of a box plot's data table. */
|
|
4223
|
+
chartCount: string;
|
|
4224
|
+
/** Header of the outlier column of a box plot's data table. */
|
|
4225
|
+
chartOutliers: string;
|
|
4226
|
+
/** Header of the opening-price column of a candlestick's data table. */
|
|
4227
|
+
chartOpen: string;
|
|
4228
|
+
/** Header of the high column of a candlestick's data table. */
|
|
4229
|
+
chartHigh: string;
|
|
4230
|
+
/** Header of the low column of a candlestick's data table. */
|
|
4231
|
+
chartLow: string;
|
|
4232
|
+
/** Header of the closing-price column of a candlestick's data table. */
|
|
4233
|
+
chartClose: string;
|
|
4234
|
+
/** Legend entry for a candlestick session that closed up. */
|
|
4235
|
+
chartRise: string;
|
|
4236
|
+
/** Legend entry for a candlestick session that closed down. */
|
|
4237
|
+
chartFall: string;
|
|
4238
|
+
/** Header of the start column of a schedule's data table. */
|
|
4239
|
+
chartStart: string;
|
|
4240
|
+
/** Header of the end column of a schedule's data table. */
|
|
4241
|
+
chartEnd: string;
|
|
4242
|
+
/** Header of the completion column of a schedule's data table. */
|
|
4243
|
+
chartProgress: string;
|
|
4244
|
+
/** Name of the rule marking today on a schedule. */
|
|
4245
|
+
chartToday: string;
|
|
3467
4246
|
}
|
|
3468
4247
|
/** English labels, used when no provider is mounted. */
|
|
3469
4248
|
declare const defaultUILabels: UILabels;
|
|
@@ -3549,4 +4328,4 @@ declare function isFocusable(element: HTMLElement): boolean;
|
|
|
3549
4328
|
*/
|
|
3550
4329
|
declare function getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
3551
4330
|
|
|
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 };
|
|
4331
|
+
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_SEQUENTIAL_COLORS, CHART_SEQUENTIAL_DARK_STOPS, CHART_SERIES_COLORS, 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, 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, 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, createSequentialScale, defaultUILabels, findOwnedLayers, formatTimeTick, frenchUILabels, generateFieldId, generateRelationId, generateSQL, generateTableId, getFocusableElements, getOrdinalColor, getSeriesColor, getSeriesLabel, hideOthers, isElementVisible, isFocusable, niceTimeTicks, quantile, quantileSorted, rampColor, registerFloatingLayer, resetBarChartWarnings, resetDumbbellWarnings, resetFacetWarnings, resolveSeriesColor, sturgesBins, toLegendItems, toTimestamp, useChartSize, useClickOutside, useDialogA11y, useDropdownContext, useFocusItem, useKeyboardNavigation, usePositioning, useSidebar, useUILabels, useWizard };
|