@synertech/ui 0.40.1 → 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 +178 -0
- package/dist/index.cjs +10 -10
- package/dist/index.d.cts +1193 -33
- package/dist/index.d.ts +1193 -33
- package/dist/index.js +10 -10
- package/dist/styles.css +134 -0
- package/package.json +2 -2
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
|
/**
|
|
@@ -365,9 +431,49 @@ interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWith
|
|
|
365
431
|
orientation?: BarChartOrientation;
|
|
366
432
|
/** `none` groups the series side by side; the others stack them. */
|
|
367
433
|
stack?: ChartStackMode;
|
|
434
|
+
/**
|
|
435
|
+
* Reads the bars against a reference instead of against zero.
|
|
436
|
+
*
|
|
437
|
+
* `true` centres on zero and a number centres on that value: the baseline
|
|
438
|
+
* moves there, bars run both ways from it, and a lone series takes the
|
|
439
|
+
* diverging ramp — the gap to a target, an index against its base.
|
|
440
|
+
*
|
|
441
|
+
* A series KEY centres the stack on that series instead, splitting it evenly
|
|
442
|
+
* on both sides: the Likert layout, where the middle of an agreement scale
|
|
443
|
+
* has to sit on the middle of the chart.
|
|
444
|
+
*
|
|
445
|
+
* The ramp says which side of the reference a bar falls on and how far. It
|
|
446
|
+
* never says whether that is good news — a schedule slipping is "above", and
|
|
447
|
+
* above is not good.
|
|
448
|
+
*/
|
|
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;
|
|
368
474
|
/** Caps the thickness of a mark. Never fills the slot: the leftover is air. */
|
|
369
475
|
barSize?: number;
|
|
370
|
-
/** Orders the categories by their total. */
|
|
476
|
+
/** Orders the categories by their total. Ignored by a histogram. */
|
|
371
477
|
sort?: "none" | "asc" | "desc";
|
|
372
478
|
/** Draws the value at the end of each bar, where it fits without collision. */
|
|
373
479
|
showValues?: boolean;
|
|
@@ -388,7 +494,7 @@ interface BarChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWith
|
|
|
388
494
|
* is read for the length of its mark, and an axis starting at 40 exaggerates
|
|
389
495
|
* every difference on the chart.
|
|
390
496
|
*/
|
|
391
|
-
declare function BarChart({ data, series, x, y, height, width, size, grid, legend, tooltip, tableView, emphasis, title, description, loading, emptyState, onPointClick, orientation, stack, barSize, sort, showValues, referenceLines, legendToggle, margin, locale, plotLabel, className, ...props }: BarChartProps): react_jsx_runtime.JSX.Element;
|
|
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;
|
|
392
498
|
|
|
393
499
|
type BannerVariant = "notification" | "hero" | "promotion";
|
|
394
500
|
type BannerType = "info" | "success" | "warning" | "error" | "default";
|
|
@@ -428,6 +534,83 @@ interface BreadcrumbProps extends ComponentPropsWithoutRef<"nav"> {
|
|
|
428
534
|
}
|
|
429
535
|
declare function Breadcrumb({ items, separator, size, maxItems, itemColor, activeColor, separatorColor, className, ...props }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
430
536
|
|
|
537
|
+
interface BulletChartProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
538
|
+
/** One row per measure. */
|
|
539
|
+
data: ChartDatum[];
|
|
540
|
+
/** Field holding the name of each row. */
|
|
541
|
+
x: ChartXAxisConfig;
|
|
542
|
+
/** Field holding the figure reached. */
|
|
543
|
+
value: string;
|
|
544
|
+
/** Field holding the figure aimed at. Drawn as a tick across the track. */
|
|
545
|
+
target?: string;
|
|
546
|
+
/**
|
|
547
|
+
* Field holding the qualitative range boundaries — an ascending array of
|
|
548
|
+
* numbers, painted as grey bands behind the bar.
|
|
549
|
+
*/
|
|
550
|
+
ranges?: string;
|
|
551
|
+
/** Fixed bounds for every row. Implies a shared scale and a value axis. */
|
|
552
|
+
domain?: [number, number];
|
|
553
|
+
/**
|
|
554
|
+
* `row` gives each row its own scale, which is what lets a revenue and an
|
|
555
|
+
* NPS share a panel. `shared` puts them all on one scale and draws the value
|
|
556
|
+
* axis — only meaningful when the rows carry the same unit.
|
|
557
|
+
*/
|
|
558
|
+
normalize?: "row" | "shared";
|
|
559
|
+
/** Writes the figure reached after each track. */
|
|
560
|
+
showValues?: boolean;
|
|
561
|
+
/** Thickness of a track. */
|
|
562
|
+
trackSize?: number;
|
|
563
|
+
/** Replaces the range greys — any CSS colours, darkest first. */
|
|
564
|
+
rangeColors?: readonly string[];
|
|
565
|
+
/** Colour of the measure bar. Defaults to the first palette slot. */
|
|
566
|
+
color?: string;
|
|
567
|
+
height?: number;
|
|
568
|
+
width?: number;
|
|
569
|
+
size?: ChartSize;
|
|
570
|
+
tooltip?: boolean | ((row: BulletRow) => ReactNode);
|
|
571
|
+
tableView?: boolean | "toggle";
|
|
572
|
+
title?: ReactNode;
|
|
573
|
+
description?: ReactNode;
|
|
574
|
+
loading?: boolean;
|
|
575
|
+
emptyState?: ReactNode;
|
|
576
|
+
locale?: string;
|
|
577
|
+
plotLabel?: string;
|
|
578
|
+
/** Header of the value column of the data table. */
|
|
579
|
+
valueLabel?: string;
|
|
580
|
+
/** Header of the target column of the data table. */
|
|
581
|
+
targetLabel?: string;
|
|
582
|
+
format?: (value: number) => string;
|
|
583
|
+
onRowClick?: (row: BulletRow) => void;
|
|
584
|
+
}
|
|
585
|
+
/** One measure, as the tooltip and the click handler see it. */
|
|
586
|
+
interface BulletRow {
|
|
587
|
+
index: number;
|
|
588
|
+
x: ChartXValue;
|
|
589
|
+
label: string;
|
|
590
|
+
value: number | null;
|
|
591
|
+
target: number | null;
|
|
592
|
+
ranges: number[];
|
|
593
|
+
formattedValue: string;
|
|
594
|
+
formattedTarget: string;
|
|
595
|
+
/** `value / target`, or `null` when either is missing. */
|
|
596
|
+
attainment: number | null;
|
|
597
|
+
datum: ChartDatum;
|
|
598
|
+
}
|
|
599
|
+
/**
|
|
600
|
+
* What was reached, what was aimed at, and what counts as good — on one line.
|
|
601
|
+
*
|
|
602
|
+
* The densest readout of the kit: three measures fit where three gauges would
|
|
603
|
+
* take the page. It completes `StatCard` rather than competing with it — the
|
|
604
|
+
* card gives a figure and how it moved, the bullet gives where it stands
|
|
605
|
+
* against its target.
|
|
606
|
+
*
|
|
607
|
+
* Each row is scaled on its own by default, which is what lets a revenue in
|
|
608
|
+
* dollars and an NPS out of 100 share a panel. That also means there is no
|
|
609
|
+
* common axis to read across rows: pass `normalize="shared"` (or a `domain`)
|
|
610
|
+
* when the rows carry the same unit, and the value axis comes back.
|
|
611
|
+
*/
|
|
612
|
+
declare function BulletChart({ data, x, value, target, ranges, domain, normalize, showValues, trackSize, rangeColors, color, height, width, size, tooltip, tableView, title, description, loading, emptyState, locale, plotLabel, valueLabel, targetLabel, format, onRowClick, className, ...props }: BulletChartProps): react_jsx_runtime.JSX.Element;
|
|
613
|
+
|
|
431
614
|
interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
|
|
432
615
|
label?: string;
|
|
433
616
|
children?: ReactNode;
|
|
@@ -637,6 +820,245 @@ declare namespace CardDescription {
|
|
|
637
820
|
var displayName: string;
|
|
638
821
|
}
|
|
639
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
|
+
|
|
640
1062
|
/** Geometry handed to the render prop once the container has been measured. */
|
|
641
1063
|
interface ChartContainerRenderArgs {
|
|
642
1064
|
width: number;
|
|
@@ -793,6 +1215,172 @@ interface ChartTooltipContentProps {
|
|
|
793
1215
|
*/
|
|
794
1216
|
declare function ChartTooltipContent({ title, points }: ChartTooltipContentProps): react_jsx_runtime.JSX.Element;
|
|
795
1217
|
|
|
1218
|
+
/**
|
|
1219
|
+
* Number of categorical slots the palette holds.
|
|
1220
|
+
*
|
|
1221
|
+
* Eight is not a round number picked for looks: past it, a generated hue is
|
|
1222
|
+
* indistinguishable from an existing slot for a colour-blind reader. A ninth
|
|
1223
|
+
* series is folded into an "Other" bucket, faceted into several charts, or
|
|
1224
|
+
* given a second channel (shape, texture) — never a ninth colour.
|
|
1225
|
+
*/
|
|
1226
|
+
declare const CHART_PALETTE_SIZE = 8;
|
|
1227
|
+
/**
|
|
1228
|
+
* The eight slots, in the order they are assigned.
|
|
1229
|
+
*
|
|
1230
|
+
* The order is the safety mechanism — it was picked among the orderings that
|
|
1231
|
+
* keep every neighbouring pair distinguishable under simulated protanopia and
|
|
1232
|
+
* deuteranopia, in both themes. The values live in `src/styles/index.css`, so
|
|
1233
|
+
* an application can rebrand the kit without forking a component.
|
|
1234
|
+
*/
|
|
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)"];
|
|
1236
|
+
/** Grey used for de-emphasised series and for the "Other" bucket. */
|
|
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)";
|
|
1240
|
+
/**
|
|
1241
|
+
* Number of series a chart can carry when any two marks may end up side by
|
|
1242
|
+
* side — a scatter or bubble plot. Neighbouring bars and lines only ever
|
|
1243
|
+
* compare adjacent slots, which all eight clear; with every pair in play, only
|
|
1244
|
+
* the first three do.
|
|
1245
|
+
*/
|
|
1246
|
+
declare const CHART_ALL_PAIRS_LIMIT = 3;
|
|
1247
|
+
/**
|
|
1248
|
+
* Colour of the series sitting at `index`.
|
|
1249
|
+
*
|
|
1250
|
+
* Colour follows the series' position in the `series` array — its identity —
|
|
1251
|
+
* so hiding or filtering one series never repaints the others.
|
|
1252
|
+
*/
|
|
1253
|
+
declare function getSeriesColor(index: number, override?: string): string;
|
|
1254
|
+
/**
|
|
1255
|
+
* Colour of a series, taking the chart's `emphasis` into account: the
|
|
1256
|
+
* emphasised series keeps its slot, every other one drops to grey.
|
|
1257
|
+
*/
|
|
1258
|
+
declare function resolveSeriesColor(series: ChartSeries, index: number, emphasis?: string): string;
|
|
1259
|
+
/** Label shown for a series — its own, or its key as a fallback. */
|
|
1260
|
+
declare function getSeriesLabel(series: ChartSeries): string;
|
|
1261
|
+
/** Builds the legend entries of a series list, colours already resolved. */
|
|
1262
|
+
declare function toLegendItems(series: ChartSeries[], emphasis?: string): ChartLegendItem[];
|
|
1263
|
+
/** One hue, light to dark: a continuous magnitude (a heat map). */
|
|
1264
|
+
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)"];
|
|
1265
|
+
/** One hue in ordered steps: ranked bands, brackets, a funnel. */
|
|
1266
|
+
declare const CHART_ORDINAL_COLORS: readonly ["var(--color-chart-ord-1)", "var(--color-chart-ord-2)", "var(--color-chart-ord-3)", "var(--color-chart-ord-4)", "var(--color-chart-ord-5)"];
|
|
1267
|
+
/**
|
|
1268
|
+
* Two opposed poles around a neutral middle: a gap to a reference, a Likert
|
|
1269
|
+
* scale. Blue on one side, orange on the other — two cool hues never read as
|
|
1270
|
+
* opposites.
|
|
1271
|
+
*/
|
|
1272
|
+
declare const CHART_DIVERGING_COLORS: readonly ["var(--color-chart-div-1)", "var(--color-chart-div-2)", "var(--color-chart-div-3)", "var(--color-chart-div-4)", "var(--color-chart-div-5)", "var(--color-chart-div-6)", "var(--color-chart-div-7)"];
|
|
1273
|
+
/** Index of the neutral step of `CHART_DIVERGING_COLORS`. */
|
|
1274
|
+
declare const CHART_DIVERGING_NEUTRAL_INDEX = 3;
|
|
1275
|
+
declare const CHART_SEQUENTIAL_DARK_STOPS: readonly [false, false, false, false, true, true];
|
|
1276
|
+
declare const CHART_ORDINAL_DARK_STOPS: readonly [false, false, true, true, true];
|
|
1277
|
+
declare const CHART_DIVERGING_DARK_STOPS: readonly [true, false, false, false, false, false, true];
|
|
1278
|
+
/**
|
|
1279
|
+
* Past this many colour classes, two neighbouring cells stop being tellable
|
|
1280
|
+
* apart — the reader sees a texture rather than a scale. A finer grid is read
|
|
1281
|
+
* as a continuous wash, which is what the scale does when `steps` is unset.
|
|
1282
|
+
*/
|
|
1283
|
+
declare const CHART_MAX_COLOR_CLASSES = 7;
|
|
1284
|
+
/** A colour ramp, already bound to the values it has to paint. */
|
|
1285
|
+
interface ChartColorScale {
|
|
1286
|
+
/** Colour of a value. Out-of-domain values clamp to the nearest end. */
|
|
1287
|
+
(value: number): string;
|
|
1288
|
+
readonly domain: readonly [number, number];
|
|
1289
|
+
/** The stops, in ramp order — what a legend draws its gradient from. */
|
|
1290
|
+
readonly colors: readonly string[];
|
|
1291
|
+
/** Number of classes the ramp was cut into, or `null` when it is continuous. */
|
|
1292
|
+
readonly steps: number | null;
|
|
1293
|
+
/** Where a value falls along the ramp, from 0 to 1. */
|
|
1294
|
+
position(value: number): number;
|
|
1295
|
+
/**
|
|
1296
|
+
* `true` when the colour under `value` is dark enough that text written on
|
|
1297
|
+
* it has to be light. Always `false` for a ramp brought by the caller,
|
|
1298
|
+
* which the kit knows nothing about.
|
|
1299
|
+
*/
|
|
1300
|
+
onDark(value: number): boolean;
|
|
1301
|
+
}
|
|
1302
|
+
/**
|
|
1303
|
+
* Colour at `t` (0 to 1) along a ramp.
|
|
1304
|
+
*
|
|
1305
|
+
* Between two stops the colour is mixed in OKLab rather than snapped to the
|
|
1306
|
+
* nearer one: a ramp cut into six classes reads as six bands, which is a lie
|
|
1307
|
+
* about a measure that varies continuously. The mix happens in CSS, so the
|
|
1308
|
+
* stops stay overridable variables instead of hex frozen into the bundle.
|
|
1309
|
+
*/
|
|
1310
|
+
declare function rampColor(colors: readonly string[], t: number): string;
|
|
1311
|
+
interface SequentialScaleOptions {
|
|
1312
|
+
/** Cuts the ramp into that many classes instead of leaving it continuous. */
|
|
1313
|
+
steps?: number;
|
|
1314
|
+
/** Replaces the stops — any CSS colours, usually custom properties. */
|
|
1315
|
+
colors?: readonly string[];
|
|
1316
|
+
/**
|
|
1317
|
+
* One flag per stop, saying which ones need light text written on them.
|
|
1318
|
+
* Only worth passing alongside `colors`: the built-in ramps carry their own.
|
|
1319
|
+
*/
|
|
1320
|
+
darkStops?: readonly boolean[];
|
|
1321
|
+
}
|
|
1322
|
+
/**
|
|
1323
|
+
* Maps a magnitude onto the sequential ramp.
|
|
1324
|
+
*
|
|
1325
|
+
* A zero-width domain pins everything to the light end: with a single value
|
|
1326
|
+
* on the grid there is no magnitude to show, and painting it as the maximum
|
|
1327
|
+
* would invent one.
|
|
1328
|
+
*/
|
|
1329
|
+
declare function createSequentialScale(domain: readonly [number, number], options?: SequentialScaleOptions): ChartColorScale;
|
|
1330
|
+
interface DivergingScaleOptions extends SequentialScaleOptions {
|
|
1331
|
+
/** Value the two directions are measured from. Defaults to `0`. */
|
|
1332
|
+
center?: number;
|
|
1333
|
+
/**
|
|
1334
|
+
* Stretches the shorter arm so both cover the same distance. On by default:
|
|
1335
|
+
* with independent arms, a gap of +5 and a gap of −5 come out at different
|
|
1336
|
+
* intensities, which reads as one of them being the bigger miss.
|
|
1337
|
+
*/
|
|
1338
|
+
symmetric?: boolean;
|
|
1339
|
+
}
|
|
1340
|
+
/**
|
|
1341
|
+
* Maps a signed gap onto the diverging pair, neutral at the centre.
|
|
1342
|
+
*
|
|
1343
|
+
* The ramp says which side of the reference a value falls on and how far — it
|
|
1344
|
+
* never says whether that is good news. A schedule slipping is "above", and
|
|
1345
|
+
* above is not good; that judgement belongs to the status colours, which are
|
|
1346
|
+
* reserved for exactly that and always carry a label.
|
|
1347
|
+
*/
|
|
1348
|
+
declare function createDivergingScale(domain: readonly [number, number], options?: DivergingScaleOptions): ChartColorScale;
|
|
1349
|
+
/**
|
|
1350
|
+
* Colour of the `index`-th band of an ordered set.
|
|
1351
|
+
*
|
|
1352
|
+
* Spread across the whole ramp rather than taken from its start, so three
|
|
1353
|
+
* bands use the light, the middle and the dark end instead of three steps
|
|
1354
|
+
* that look alike.
|
|
1355
|
+
*/
|
|
1356
|
+
declare function getOrdinalColor(index: number, count?: number, colors?: readonly string[]): string;
|
|
1357
|
+
|
|
1358
|
+
interface ChartScaleLegendProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
|
|
1359
|
+
/** The ramp the chart paints with — usually the one it built for its marks. */
|
|
1360
|
+
scale: ChartColorScale;
|
|
1361
|
+
/** What the colour encodes. Say the measure and its unit, not "legend". */
|
|
1362
|
+
label?: ReactNode;
|
|
1363
|
+
/** Formats the numbers under the bar. */
|
|
1364
|
+
format?: (value: number) => string;
|
|
1365
|
+
/** How many numbers to place. Ignored by a stepped ramp, which labels its classes. */
|
|
1366
|
+
ticks?: number;
|
|
1367
|
+
size?: ChartSize;
|
|
1368
|
+
/** Thickness of the colour bar. */
|
|
1369
|
+
thickness?: number;
|
|
1370
|
+
locale?: string;
|
|
1371
|
+
}
|
|
1372
|
+
/**
|
|
1373
|
+
* The legend of a colour ramp.
|
|
1374
|
+
*
|
|
1375
|
+
* Mandatory as soon as a colour encodes a magnitude: without it a heat map
|
|
1376
|
+
* shows a pattern and states no value. It is the piece that turns "this cell
|
|
1377
|
+
* is darker" into "this cell is 4 200".
|
|
1378
|
+
*
|
|
1379
|
+
* The bar is laid out in CSS rather than measured, so it needs no container
|
|
1380
|
+
* observation and renders on the server.
|
|
1381
|
+
*/
|
|
1382
|
+
declare function ChartScaleLegend({ scale, label, format, ticks, size, thickness, locale, className, ...props }: ChartScaleLegendProps): react_jsx_runtime.JSX.Element;
|
|
1383
|
+
|
|
796
1384
|
interface ChartTableViewProps extends ComponentPropsWithoutRef<"div"> {
|
|
797
1385
|
data: ChartDatum[];
|
|
798
1386
|
series: ChartSeries[];
|
|
@@ -816,6 +1404,90 @@ interface ChartTableViewProps extends ComponentPropsWithoutRef<"div"> {
|
|
|
816
1404
|
*/
|
|
817
1405
|
declare function ChartTableView({ data, series, xKey, xLabel, formatX, formatValue, caption, emptyLabel, className, ...props }: ChartTableViewProps): react_jsx_runtime.JSX.Element;
|
|
818
1406
|
|
|
1407
|
+
/** One panel, ready to be drawn. */
|
|
1408
|
+
interface ChartFacetPanel {
|
|
1409
|
+
/** Stable identity of the panel — the raw value of the splitting field. */
|
|
1410
|
+
key: string;
|
|
1411
|
+
/** That value, formatted. */
|
|
1412
|
+
label: string;
|
|
1413
|
+
/** The rows belonging to this panel, in their original order. */
|
|
1414
|
+
data: ChartDatum[];
|
|
1415
|
+
/**
|
|
1416
|
+
* The value domain EVERY panel has to draw against. Hand it straight to the
|
|
1417
|
+
* chart: panels on free scales cannot be compared, which is the only reason
|
|
1418
|
+
* to put them side by side.
|
|
1419
|
+
*/
|
|
1420
|
+
domain: [number, number];
|
|
1421
|
+
index: number;
|
|
1422
|
+
count: number;
|
|
1423
|
+
}
|
|
1424
|
+
interface ChartFacetsProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
|
|
1425
|
+
data: ChartDatum[];
|
|
1426
|
+
/** Field the panels are split on. */
|
|
1427
|
+
by: string;
|
|
1428
|
+
/** Fields the shared domain is measured over — the series each panel draws. */
|
|
1429
|
+
values: string[];
|
|
1430
|
+
/** Fixed bounds instead of the ones measured across the whole set. */
|
|
1431
|
+
domain?: [number, number];
|
|
1432
|
+
/**
|
|
1433
|
+
* Keeps zero inside the shared domain. Off by default, which suits the lines
|
|
1434
|
+
* and sparklines a facet grid usually holds; turn it on for bars, which are
|
|
1435
|
+
* read for the length of their mark.
|
|
1436
|
+
*/
|
|
1437
|
+
includeZero?: boolean;
|
|
1438
|
+
/** Target tick count, which drives how the shared bounds are rounded. */
|
|
1439
|
+
ticks?: number;
|
|
1440
|
+
/** Explicit panel order. Values missing from the data are skipped. */
|
|
1441
|
+
order?: ChartXValue[];
|
|
1442
|
+
/** Orders the panels by their total instead. */
|
|
1443
|
+
sort?: "none" | "asc" | "desc";
|
|
1444
|
+
/** Fixed number of columns. Defaults to as many as `minPanelWidth` allows. */
|
|
1445
|
+
columns?: number;
|
|
1446
|
+
/** Narrowest a panel may get before the grid drops to fewer columns. */
|
|
1447
|
+
minPanelWidth?: number;
|
|
1448
|
+
formatLabel?: (value: ChartXValue, index: number) => string;
|
|
1449
|
+
/** Hides the panel captions — for a grid whose charts carry their own title. */
|
|
1450
|
+
showLabels?: boolean;
|
|
1451
|
+
title?: ReactNode;
|
|
1452
|
+
description?: ReactNode;
|
|
1453
|
+
size?: ChartSize;
|
|
1454
|
+
locale?: string;
|
|
1455
|
+
emptyState?: ReactNode;
|
|
1456
|
+
children: (panel: ChartFacetPanel) => ReactNode;
|
|
1457
|
+
}
|
|
1458
|
+
/**
|
|
1459
|
+
* Small multiples: one chart repeated across a dimension, on a shared scale.
|
|
1460
|
+
*
|
|
1461
|
+
* Not a chart — a layout. It is the answer two components of the kit already
|
|
1462
|
+
* give without it existing: `ScatterChart` caps itself at three series and
|
|
1463
|
+
* `PieChart` folds its tail, both on the grounds that the rest belongs in
|
|
1464
|
+
* separate panels.
|
|
1465
|
+
*
|
|
1466
|
+
* What makes it work is the one thing it computes itself: the value domain is
|
|
1467
|
+
* measured across the whole set and imposed on every panel. Panels on free
|
|
1468
|
+
* scales look comparable and are not, which is worse than not faceting at all.
|
|
1469
|
+
*
|
|
1470
|
+
* ```tsx
|
|
1471
|
+
* <ChartFacets data={rows} by="region" values={["revenue"]}>
|
|
1472
|
+
* {({ data, domain, label }) => (
|
|
1473
|
+
* <LineChart
|
|
1474
|
+
* data={data}
|
|
1475
|
+
* series={[{ key: "revenue" }]}
|
|
1476
|
+
* x={{ key: "month" }}
|
|
1477
|
+
* y={{ domain }}
|
|
1478
|
+
* plotLabel={label}
|
|
1479
|
+
* height={140}
|
|
1480
|
+
* />
|
|
1481
|
+
* )}
|
|
1482
|
+
* </ChartFacets>
|
|
1483
|
+
* ```
|
|
1484
|
+
*
|
|
1485
|
+
* No hooks: the grid is laid out in CSS, so it renders on the server.
|
|
1486
|
+
*/
|
|
1487
|
+
declare function ChartFacets({ data, by, values, domain, includeZero, ticks, order, sort, columns, minPanelWidth, formatLabel, showLabels, title, description, size, locale, emptyState, children, className, ...props }: ChartFacetsProps): react_jsx_runtime.JSX.Element;
|
|
1488
|
+
/** Resets the one-shot panel-count warning. Test helper. */
|
|
1489
|
+
declare function resetFacetWarnings(): void;
|
|
1490
|
+
|
|
819
1491
|
/**
|
|
820
1492
|
* Width a chart draws at before its container has been measured.
|
|
821
1493
|
*
|
|
@@ -847,48 +1519,414 @@ interface UseChartSizeResult<T extends HTMLElement> {
|
|
|
847
1519
|
declare function useChartSize<T extends HTMLElement = HTMLDivElement>(options?: UseChartSizeOptions): UseChartSizeResult<T>;
|
|
848
1520
|
|
|
849
1521
|
/**
|
|
850
|
-
*
|
|
1522
|
+
* Ticks for an axis carrying dates.
|
|
851
1523
|
*
|
|
852
|
-
*
|
|
853
|
-
*
|
|
854
|
-
*
|
|
855
|
-
*
|
|
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.
|
|
856
1529
|
*/
|
|
857
|
-
|
|
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
|
+
}
|
|
858
1539
|
/**
|
|
859
|
-
*
|
|
1540
|
+
* Ticks covering `[min, max]`, landing on calendar boundaries.
|
|
860
1541
|
*
|
|
861
|
-
*
|
|
862
|
-
*
|
|
863
|
-
*
|
|
864
|
-
*
|
|
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.
|
|
865
1548
|
*/
|
|
866
|
-
declare
|
|
867
|
-
/** Grey used for de-emphasised series and for the "Other" bucket. */
|
|
868
|
-
declare const CHART_MUTED_COLOR = "var(--color-chart-muted)";
|
|
1549
|
+
declare function niceTimeTicks(min: number, max: number, count?: number): TimeTickScale;
|
|
869
1550
|
/**
|
|
870
|
-
*
|
|
871
|
-
*
|
|
872
|
-
*
|
|
873
|
-
* the
|
|
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.
|
|
874
1556
|
*/
|
|
875
|
-
declare
|
|
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
|
+
}
|
|
876
1628
|
/**
|
|
877
|
-
*
|
|
1629
|
+
* Two points per item, and the distance between them.
|
|
878
1630
|
*
|
|
879
|
-
*
|
|
880
|
-
*
|
|
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.
|
|
881
1644
|
*/
|
|
882
|
-
declare function
|
|
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
|
+
}
|
|
883
1711
|
/**
|
|
884
|
-
*
|
|
885
|
-
*
|
|
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`.
|
|
886
1727
|
*/
|
|
887
|
-
declare function
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
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;
|
|
892
1930
|
|
|
893
1931
|
interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "size" | "onChange" | "type"> {
|
|
894
1932
|
checked?: boolean;
|
|
@@ -1886,6 +2924,86 @@ declare namespace Label {
|
|
|
1886
2924
|
var displayName: string;
|
|
1887
2925
|
}
|
|
1888
2926
|
|
|
2927
|
+
interface HeatmapProps extends Omit<ComponentPropsWithoutRef<"figure">, "children" | "title"> {
|
|
2928
|
+
/** One row per cell: its column, its row and its value. */
|
|
2929
|
+
data: ChartDatum[];
|
|
2930
|
+
/** Field holding the column each cell belongs to. */
|
|
2931
|
+
x: ChartXAxisConfig;
|
|
2932
|
+
/** Field holding the row each cell belongs to. */
|
|
2933
|
+
y: ChartXAxisConfig;
|
|
2934
|
+
/** Field holding the value the colour encodes. */
|
|
2935
|
+
value: string;
|
|
2936
|
+
/** Formats a value, in the cells, the legend, the tooltip and the table. */
|
|
2937
|
+
format?: (value: number) => string;
|
|
2938
|
+
/** Bounds the ramp covers. Defaults to the extent of the data. */
|
|
2939
|
+
domain?: [number, number];
|
|
2940
|
+
/**
|
|
2941
|
+
* `sequential` paints a magnitude, `diverging` a gap on either side of
|
|
2942
|
+
* `center` — a correlation matrix, a variance against a target.
|
|
2943
|
+
*/
|
|
2944
|
+
scale?: "sequential" | "diverging";
|
|
2945
|
+
/** Middle of a diverging ramp. Defaults to `0`. */
|
|
2946
|
+
center?: number;
|
|
2947
|
+
/**
|
|
2948
|
+
* Cuts the ramp into that many classes. Left unset the wash is continuous,
|
|
2949
|
+
* which is how a fine grid is read anyway.
|
|
2950
|
+
*/
|
|
2951
|
+
steps?: number;
|
|
2952
|
+
/** Replaces the ramp stops — any CSS colours. */
|
|
2953
|
+
colors?: readonly string[];
|
|
2954
|
+
/** Column order. Defaults to first appearance in the data. */
|
|
2955
|
+
xDomain?: ChartXValue[];
|
|
2956
|
+
/** Row order. Defaults to first appearance in the data. */
|
|
2957
|
+
yDomain?: ChartXValue[];
|
|
2958
|
+
/** Surface gap between two cells. */
|
|
2959
|
+
cellGap?: number;
|
|
2960
|
+
cellRadius?: number;
|
|
2961
|
+
/** Writes the value inside each cell that has room for it. */
|
|
2962
|
+
showValues?: boolean;
|
|
2963
|
+
height?: number;
|
|
2964
|
+
width?: number;
|
|
2965
|
+
size?: ChartSize;
|
|
2966
|
+
/** The scale legend. Mandatory reading, so it shows unless turned off. */
|
|
2967
|
+
legend?: boolean | ChartLegendPosition;
|
|
2968
|
+
/** What the colour encodes — the measure and its unit. */
|
|
2969
|
+
legendLabel?: ReactNode;
|
|
2970
|
+
tooltip?: boolean | ((cell: HeatmapCell) => ReactNode);
|
|
2971
|
+
tableView?: boolean | "toggle";
|
|
2972
|
+
title?: ReactNode;
|
|
2973
|
+
description?: ReactNode;
|
|
2974
|
+
loading?: boolean;
|
|
2975
|
+
emptyState?: ReactNode;
|
|
2976
|
+
locale?: string;
|
|
2977
|
+
plotLabel?: string;
|
|
2978
|
+
onCellClick?: (cell: HeatmapCell) => void;
|
|
2979
|
+
}
|
|
2980
|
+
/** A cell, as the tooltip and the click handler see it. */
|
|
2981
|
+
interface HeatmapCell {
|
|
2982
|
+
x: ChartXValue;
|
|
2983
|
+
y: ChartXValue;
|
|
2984
|
+
xLabel: string;
|
|
2985
|
+
yLabel: string;
|
|
2986
|
+
/** `null` when the pair is missing from the data. */
|
|
2987
|
+
value: number | null;
|
|
2988
|
+
formattedValue: string;
|
|
2989
|
+
color: string;
|
|
2990
|
+
datum?: ChartDatum;
|
|
2991
|
+
}
|
|
2992
|
+
/**
|
|
2993
|
+
* A magnitude on a grid: load by day and hour, retention by cohort, a
|
|
2994
|
+
* correlation matrix.
|
|
2995
|
+
*
|
|
2996
|
+
* The one chart of the kit where colour carries the measure rather than the
|
|
2997
|
+
* identity — which is why the scale legend is on by default and why the data
|
|
2998
|
+
* table matters more here than anywhere else. A grid without its legend shows
|
|
2999
|
+
* a pattern and states no value.
|
|
3000
|
+
*
|
|
3001
|
+
* The ramp stays continuous unless `steps` cuts it: past seven classes two
|
|
3002
|
+
* neighbouring cells stop being tellable apart, and a fine grid is read as a
|
|
3003
|
+
* wash anyway.
|
|
3004
|
+
*/
|
|
3005
|
+
declare function Heatmap({ data, x, y, value, format, domain, scale, center, steps, colors, xDomain, yDomain, cellGap, cellRadius, showValues, height, width, size, legend, legendLabel, tooltip, tableView, title, description, loading, emptyState, locale, plotLabel, onCellClick, className, ...props }: HeatmapProps): react_jsx_runtime.JSX.Element;
|
|
3006
|
+
|
|
1889
3007
|
interface LineChartProps extends CartesianChartBaseProps, Omit<ComponentPropsWithoutRef<"figure">, keyof CartesianChartBaseProps | "children" | "title"> {
|
|
1890
3008
|
curve?: ChartCurve;
|
|
1891
3009
|
/**
|
|
@@ -3083,6 +4201,48 @@ interface UILabels {
|
|
|
3083
4201
|
chartLoading: string;
|
|
3084
4202
|
/** Bucket the smallest slices of a pie chart are folded into. */
|
|
3085
4203
|
chartOther: string;
|
|
4204
|
+
/** Header of the "reached" column of a bullet chart's data table. */
|
|
4205
|
+
chartValue: string;
|
|
4206
|
+
/** Header of the "aimed at" column of a bullet chart's data table. */
|
|
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;
|
|
3086
4246
|
}
|
|
3087
4247
|
/** English labels, used when no provider is mounted. */
|
|
3088
4248
|
declare const defaultUILabels: UILabels;
|
|
@@ -3168,4 +4328,4 @@ declare function isFocusable(element: HTMLElement): boolean;
|
|
|
3168
4328
|
*/
|
|
3169
4329
|
declare function getFocusableElements(container: HTMLElement): HTMLElement[];
|
|
3170
4330
|
|
|
3171
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionType, type AccordionVariant, AdvanceDetachable, type AdvanceDetachableProps, type AdvanceDetachableRef, type AdvanceDetachableRenderContext, type AggregateFunction, type Align, AreaChart, type AreaChartProps, Avatar, type AvatarProps, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerType, type BannerVariant, BarChart, type BarChartOrientation, type BarChartProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_ALL_PAIRS_LIMIT, CHART_MUTED_COLOR, CHART_PALETTE_SIZE, CHART_SERIES_COLORS, Calendar, type CalendarColor, type CalendarDateRange, type CalendarDayState, type CalendarLabels, type CalendarMode, type CalendarProps, type CalendarSize, type CalendarWeekStart, Card, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, CardTitle, type CardTitleProps, type CartesianChartBaseProps, ChartAxis, type ChartAxisOrientation, type ChartAxisProps, ChartContainer, type ChartContainerProps, type ChartContainerRenderArgs, type ChartCurve, type ChartDatum, type ChartDimensions, ChartGrid, type ChartGridLines, type ChartGridProps, ChartLegend, type ChartLegendItem, type ChartLegendMarker, type ChartLegendPosition, type ChartLegendProps, type ChartMargin, type ChartPoint, type ChartPointEvent, type ChartReferenceLine, type ChartScaleType, type ChartSeries, type ChartSize, ChartTableView, type ChartTableViewProps, type ChartTick, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipPayload, type ChartTooltipProps, type ChartXAxisConfig, type ChartXValue, type ChartYAxisConfig, Checkbox, CheckboxGroup, CheckboxGroupItem, type CheckboxGroupItemProps, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, CircularProgress, type CircularProgressColor, type CircularProgressProps, type CircularProgressSize, type CircularProgressThickness, type ColumnDef, DEFAULT_CHART_WIDTH, DEFAULT_FIELD_TYPES, DataGrid, type DataGridMode, type DataGridProps, type DataGridRef, type Density, Detachable, type DetachableProps, type DetachableRef, DeviceMockup, type DeviceMockupProps, type DeviceOrientation, type DeviceSize, type DeviceTheme, type DeviceType, type DialogA11yProps, type DialogInitialFocus, type DialogReturnFocus, Divider, type DividerOrientation, type DividerProps, type DividerTextAlign, type DividerVariant, Drawer, type DrawerPosition, type DrawerProps, type DrawerSize, Dropdown, DropdownCheckboxItem, type DropdownCheckboxItemProps, DropdownContent, type DropdownContentProps, type DropdownContextValue, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, type DropdownProps, DropdownRadioGroup, type DropdownRadioGroupProps, DropdownRadioItem, type DropdownRadioItemProps, DropdownSeparator, type DropdownSeparatorProps, DropdownSubMenu, DropdownSubMenuContent, type DropdownSubMenuContentProps, type DropdownSubMenuProps, DropdownSubMenuTrigger, type DropdownSubMenuTriggerProps, DropdownTrigger, type DropdownTriggerProps, FOCUSABLE_SELECTOR, FileSelector, type FileSelectorProps, type FilterOperator, type FilterType, type FilterValue, Footer, FooterBottom, type FooterBottomProps, FooterColumn, type FooterColumnProps, FooterLink, type FooterLinkProps, type FooterProps, FooterSection, type FooterSectionProps, FooterSocial, FooterSocialLink, type FooterSocialLinkProps, type FooterSocialProps, Header, type HeaderProps, HelpButton, type HelpButtonProps, INERT_IGNORE_ATTRIBUTE, ImageUploader, type ImageUploaderProps, Indicator, type IndicatorColor, type IndicatorPlacement, type IndicatorProps, type IndicatorSize, type IndicatorVariant, Input, type InputProps, Label, type LabelColor, type LabelProps, type LabelSize, type LabelVariant, type LabelWeight, LineChart, type LineChartProps, MarkdownEditorComponent, type MentionData, MentionInput, type MentionInputProps, type MentionInputValue, type MentionSuggestion, Modal, type ModalProps, type NavItem, type NodeRegistryEntry, NumberInput, type NumberInputProps, Pagination, type PaginationConfig, type PaginationProps, PieChart, type PieChartProps, type Position, ProgressBar, type ProgressBarColor, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant, RadioButton, type RadioButtonProps, ScatterChart, type ScatterChartProps, SchemaEditor, type SchemaEditorProps, type SchemaEditorRef, type SchemaField, type SchemaFieldEvent, type SchemaFieldType, type SchemaRelation, type SchemaRelationCardinality, type SchemaTable, type SchemaTableEvent, type SchemaValue, type SchemaViewport, Select, type SelectOption, type SelectProps, type SelectedFile, type SelectionMode, type Side, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarPosition, type SidebarProps, SidebarSubMenu, type SidebarSubMenuProps, SidebarToggle, type SidebarToggleProps, type SidebarVariant, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonVariant, Slider, type SliderColor, type SliderMark, type SliderProps, type SliderSize, type SortDirection, type SortState, Sparkline, type SparklineProps, StatCard, type StatCardDelta, type StatCardDeltaDirection, type StatCardDeltaTone, StatCardGroup, type StatCardGroupProps, type StatCardProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsColor, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsOrientation, type TabsProps, type TabsSize, TabsTrigger, type TabsTriggerProps, type TabsVariant, Toast, type ToastPosition, type ToastProps, type ToastType, type ToastVariant, Tooltip, type TooltipPosition, type TooltipProps, type TooltipSize, type TooltipTrigger, type TooltipVariant, type UILabels, UILabelsProvider, type UILabelsProviderProps, type UseChartSizeOptions, type UseChartSizeResult, type UseDialogA11yOptions, type UseDialogA11yResult, type UseKeyboardNavigationOptions, type UsePositioningOptions, WithHelpButton, type WithHelpButtonProps, Wizard, WizardActions, type WizardActionsProps, type WizardColor, WizardContent, type WizardContentProps, type WizardContextValue, type WizardDirection, WizardNext, type WizardNextProps, type WizardOrientation, WizardPanel, type WizardPanelProps, WizardPrevious, type WizardPreviousProps, type WizardProps, type WizardSize, type WizardStepChangeMeta, type WizardStepDefinition, type WizardStepStatus, WizardSteps, type WizardStepsProps, type WizardVariant, type WorkflowDirection, type WorkflowEdge, WorkflowEditor, type WorkflowEditorProps, type WorkflowEditorRef, type WorkflowNode, type WorkflowNodeAction, type WorkflowNodeActionEvent, type WorkflowNodeActionPosition, type WorkflowNodeEvent, type WorkflowPort, type WorkflowValue, type WorkflowViewport, autoLayoutTables, cn, createDefaultField, createDefaultTable, defaultUILabels, findOwnedLayers, frenchUILabels, generateFieldId, generateRelationId, generateSQL, generateTableId, getFocusableElements, getSeriesColor, getSeriesLabel, hideOthers, isElementVisible, isFocusable, registerFloatingLayer, resolveSeriesColor, toLegendItems, useChartSize, useClickOutside, useDialogA11y, useDropdownContext, useFocusItem, useKeyboardNavigation, usePositioning, useSidebar, useUILabels, useWizard };
|
|
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 };
|