@cascivo/charts 0.5.1 → 0.7.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/dist/charts.css +1 -1
- package/dist/index.d.ts +650 -39
- package/dist/index.js +1366 -1310
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -249,11 +249,31 @@ interface BarChartProps<Datum = {
|
|
|
249
249
|
y: (d: Datum) => number;
|
|
250
250
|
title: string;
|
|
251
251
|
description?: string;
|
|
252
|
+
/**
|
|
253
|
+
* Layout orientation of the component.
|
|
254
|
+
*
|
|
255
|
+
* @defaultValue `vertical`
|
|
256
|
+
* @see the component manifest
|
|
257
|
+
*/
|
|
252
258
|
orientation?: 'vertical' | 'horizontal';
|
|
253
259
|
mode?: 'grouped' | 'stacked' | 'percent';
|
|
260
|
+
/**
|
|
261
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
262
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
263
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
264
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
265
|
+
* this — charts call it internally.
|
|
266
|
+
* @see the component manifest
|
|
267
|
+
*/
|
|
254
268
|
width?: number;
|
|
255
269
|
height?: number;
|
|
256
270
|
xTicks?: number;
|
|
271
|
+
/**
|
|
272
|
+
* Approximate number of ticks on the y-axis.
|
|
273
|
+
*
|
|
274
|
+
* @defaultValue `5`
|
|
275
|
+
* @see the component manifest
|
|
276
|
+
*/
|
|
257
277
|
yTicks?: number;
|
|
258
278
|
/** Show every Nth category label (and always the last) to thin a crowded x-axis. */
|
|
259
279
|
xLabelEvery?: number;
|
|
@@ -262,7 +282,12 @@ interface BarChartProps<Datum = {
|
|
|
262
282
|
/** Custom tooltip formatter. Stacked default lists "label · total" + per-layer values. */
|
|
263
283
|
tooltipFormat?: (p: ChartPoint) => string;
|
|
264
284
|
className?: string;
|
|
265
|
-
/**
|
|
285
|
+
/**
|
|
286
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
287
|
+
*
|
|
288
|
+
* @defaultValue `false`
|
|
289
|
+
* @see the component manifest
|
|
290
|
+
*/
|
|
266
291
|
plain?: boolean;
|
|
267
292
|
/**
|
|
268
293
|
* Reference lines, bands, and markers drawn over the plot. Geometric axes: `y` is the
|
|
@@ -273,7 +298,12 @@ interface BarChartProps<Datum = {
|
|
|
273
298
|
labels?: LabelOptions;
|
|
274
299
|
/** Fired when a point is clicked or activated (Enter/Space) — for drill-down. */
|
|
275
300
|
onSelect?: (point: ChartPoint) => void;
|
|
276
|
-
/**
|
|
301
|
+
/**
|
|
302
|
+
* Bar fill style — solid, a gradient, or a pattern.
|
|
303
|
+
*
|
|
304
|
+
* @defaultValue `solid`
|
|
305
|
+
* @see the component manifest
|
|
306
|
+
*/
|
|
277
307
|
fill?: FillKind;
|
|
278
308
|
/** Pattern motif when `fill="pattern"`. */
|
|
279
309
|
patternKind?: PatternKind;
|
|
@@ -887,17 +917,42 @@ declare const PLAIN_MARGINS: {
|
|
|
887
917
|
readonly bottom: 2;
|
|
888
918
|
readonly left: 2;
|
|
889
919
|
};
|
|
920
|
+
/**
|
|
921
|
+
* Approximate advance width (px) of one axis-label character at the 11px axis font.
|
|
922
|
+
* A conservative average across digits, separators, and short month names — good
|
|
923
|
+
* enough to reserve room without measuring text (no DOM in SSR/tests).
|
|
924
|
+
*/
|
|
925
|
+
declare const AXIS_CHAR_PX = 6.5;
|
|
890
926
|
/**
|
|
891
927
|
* Left margin sized to the widest left-axis label so wide ticks (e.g. `40,000`)
|
|
892
928
|
* aren't clipped past the SVG's `0` origin. The default 36px only fits ~4 glyphs;
|
|
893
929
|
* a 6-glyph thousands label needs ~45px. `plain` charts keep their tiny margin.
|
|
894
930
|
*/
|
|
895
931
|
declare function leftMarginForLabels(leftAxisLabels: readonly string[], plain: boolean | undefined): number;
|
|
932
|
+
/**
|
|
933
|
+
* Right margin sized so the axis chrome on the right-hand side isn't clipped by the SVG
|
|
934
|
+
* edge. Two independent causes, both of which the default 8px margin failed:
|
|
935
|
+
*
|
|
936
|
+
* - a **right-hand value axis** (`secondAxis`) needs the full width of its widest label,
|
|
937
|
+
* which renders *outside* the plot via `Axis orientation="y-right"`;
|
|
938
|
+
* - the **final bottom-axis label** is centred on the last tick, which sits at the plot's
|
|
939
|
+
* right edge, so half of it overhangs (`7/26/2026` → `7/26/202`).
|
|
940
|
+
*
|
|
941
|
+
* Pass whichever apply; the larger wins. `plain` charts keep their tiny margin.
|
|
942
|
+
*/
|
|
943
|
+
declare function rightMarginForLabels(options?: {
|
|
944
|
+
/** Labels of a right-hand value axis, if the chart has one. */rightAxisLabels?: readonly string[]; /** Labels of the bottom axis — only the last one's overhang matters. */
|
|
945
|
+
bottomAxisLabels?: readonly string[];
|
|
946
|
+
plain?: boolean | undefined;
|
|
947
|
+
}): number;
|
|
896
948
|
/**
|
|
897
949
|
* Stride for a crowded categorical (band) axis: render every Nth label so they stop
|
|
898
950
|
* colliding (e.g. 14 `Jul 1`…`Jul 14` dates in a narrow chart). Returns `undefined`
|
|
899
951
|
* when every label fits — callers pass that straight to `Axis.labelEvery` (all shown).
|
|
900
952
|
* An explicit `xLabelEvery` from the caller always overrides this.
|
|
953
|
+
*
|
|
954
|
+
* `Axis` always draws the final label, and drops the strided label before it when the two
|
|
955
|
+
* would collide — so a stride that doesn't divide the domain evenly is safe.
|
|
901
956
|
*/
|
|
902
957
|
declare function autoLabelStride(labels: readonly string[], axisLength: number): number | undefined;
|
|
903
958
|
/**
|
|
@@ -963,11 +1018,24 @@ declare function download(content: Blob | string, filename: string): void;
|
|
|
963
1018
|
type AnyScale = LinearScale | BandScale | LogScale | TimeScale;
|
|
964
1019
|
interface AxisProps {
|
|
965
1020
|
scale: AnyScale;
|
|
966
|
-
|
|
1021
|
+
/**
|
|
1022
|
+
* `x` — horizontal axis, labels below the line.
|
|
1023
|
+
* `y` — vertical axis on the **left**, labels outside to the left.
|
|
1024
|
+
* `y-right` — vertical axis on the **right**, labels outside to the right.
|
|
1025
|
+
*
|
|
1026
|
+
* A right-hand axis MUST use `y-right`: a `y` axis translated to the plot's right edge
|
|
1027
|
+
* draws its labels at `x: -8` with `text-anchor: end`, i.e. *inside the plot*, on top of
|
|
1028
|
+
* the marks. That was the actual rendering of every right axis in the catalog.
|
|
1029
|
+
*/
|
|
1030
|
+
orientation: 'x' | 'y' | 'y-right';
|
|
967
1031
|
length: number;
|
|
968
1032
|
format?: (value: number | string | Date) => string;
|
|
969
1033
|
tickCount?: number;
|
|
970
|
-
/**
|
|
1034
|
+
/**
|
|
1035
|
+
* For band scales: render every Nth category label to avoid crowding. The final label is
|
|
1036
|
+
* always drawn, and a strided label that would collide with it is dropped —
|
|
1037
|
+
* see `autoLabelStride`, which computes this for you. Pass explicitly only to override.
|
|
1038
|
+
*/
|
|
971
1039
|
labelEvery?: number | undefined;
|
|
972
1040
|
transform?: string;
|
|
973
1041
|
}
|
|
@@ -1193,34 +1261,90 @@ interface LineChartProps<Datum = {
|
|
|
1193
1261
|
y: (d: Datum) => number;
|
|
1194
1262
|
title: string;
|
|
1195
1263
|
description?: string;
|
|
1264
|
+
/**
|
|
1265
|
+
* Line interpolation curve
|
|
1266
|
+
*
|
|
1267
|
+
* @defaultValue `monotone`
|
|
1268
|
+
* @see the component manifest
|
|
1269
|
+
*/
|
|
1196
1270
|
curve?: Curve;
|
|
1197
1271
|
width?: number;
|
|
1272
|
+
/**
|
|
1273
|
+
* SVG height in px
|
|
1274
|
+
*
|
|
1275
|
+
* @defaultValue `300`
|
|
1276
|
+
* @see the component manifest
|
|
1277
|
+
*/
|
|
1198
1278
|
height?: number;
|
|
1279
|
+
/**
|
|
1280
|
+
* Approximate number of X-axis ticks
|
|
1281
|
+
*
|
|
1282
|
+
* @defaultValue `5`
|
|
1283
|
+
* @see the component manifest
|
|
1284
|
+
*/
|
|
1199
1285
|
xTicks?: number;
|
|
1286
|
+
/**
|
|
1287
|
+
* Approximate number of Y-axis ticks
|
|
1288
|
+
*
|
|
1289
|
+
* @defaultValue `5`
|
|
1290
|
+
* @see the component manifest
|
|
1291
|
+
*/
|
|
1200
1292
|
yTicks?: number;
|
|
1201
1293
|
legend?: boolean;
|
|
1202
1294
|
tooltip?: boolean;
|
|
1203
1295
|
formatTooltip?: (datum: Datum, series: LineChartSeries<Datum>) => string;
|
|
1204
1296
|
className?: string;
|
|
1205
|
-
/**
|
|
1297
|
+
/**
|
|
1298
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
1299
|
+
*
|
|
1300
|
+
* @defaultValue `false`
|
|
1301
|
+
* @see the component manifest
|
|
1302
|
+
*/
|
|
1206
1303
|
plain?: boolean;
|
|
1207
1304
|
/** Reference lines, shaded bands, and markers drawn over the plot (target/threshold annotations). */
|
|
1208
1305
|
annotations?: readonly Annotation[];
|
|
1209
1306
|
/** Print each point's value as a label above the mark. */
|
|
1210
1307
|
labels?: LabelOptions;
|
|
1211
|
-
/**
|
|
1308
|
+
/**
|
|
1309
|
+
* Bridge non-finite y gaps instead of breaking the line at them.
|
|
1310
|
+
*
|
|
1311
|
+
* @defaultValue `false`
|
|
1312
|
+
* @see the component manifest
|
|
1313
|
+
*/
|
|
1212
1314
|
connectNulls?: boolean;
|
|
1213
1315
|
/** Fired when a point is clicked or activated (Enter/Space) — for drill-down. */
|
|
1214
1316
|
onSelect?: (point: ChartPoint) => void;
|
|
1215
|
-
/**
|
|
1317
|
+
/**
|
|
1318
|
+
* Show a keyboard-operable Brush below the plot to subset (zoom) the series to a window.
|
|
1319
|
+
*
|
|
1320
|
+
* @defaultValue `false`
|
|
1321
|
+
* @see the component manifest
|
|
1322
|
+
*/
|
|
1216
1323
|
brush?: boolean;
|
|
1217
|
-
/**
|
|
1324
|
+
/**
|
|
1325
|
+
* Show a DataZoom slider below the plot — a Brush whose body also pans the window.
|
|
1326
|
+
*
|
|
1327
|
+
* @defaultValue `false`
|
|
1328
|
+
* @see the component manifest
|
|
1329
|
+
*/
|
|
1218
1330
|
dataZoom?: boolean;
|
|
1219
|
-
/**
|
|
1331
|
+
/**
|
|
1332
|
+
* Enable in-plot wheel/drag/keyboard zoom-pan (+/-/0) over the series index window, with a
|
|
1333
|
+
* reset control and re-ticked axes.
|
|
1334
|
+
*
|
|
1335
|
+
* @defaultValue `false`
|
|
1336
|
+
* @see the component manifest
|
|
1337
|
+
*/
|
|
1220
1338
|
zoom?: boolean;
|
|
1221
1339
|
/** Connect this chart to others sharing the same id — they mirror zoom window + hovered x. */
|
|
1222
1340
|
syncId?: string;
|
|
1223
|
-
/**
|
|
1341
|
+
/**
|
|
1342
|
+
* Tooltip trigger — item (nearest point) or axis (a crosshair + a shared tooltip listing
|
|
1343
|
+
* every series at the hovered x).
|
|
1344
|
+
*
|
|
1345
|
+
* @defaultValue `item`
|
|
1346
|
+
* @see the component manifest
|
|
1347
|
+
*/
|
|
1224
1348
|
tooltipMode?: 'item' | 'axis';
|
|
1225
1349
|
/** Add a right-hand y-axis for series with `axis: 'right'` (e.g. bandwidth vs requests/sec). */
|
|
1226
1350
|
secondAxis?: {
|
|
@@ -1322,19 +1446,55 @@ interface AreaChartProps<Datum = {
|
|
|
1322
1446
|
title: string;
|
|
1323
1447
|
description?: string;
|
|
1324
1448
|
stacked?: boolean;
|
|
1449
|
+
/**
|
|
1450
|
+
* Line/area interpolation curve.
|
|
1451
|
+
*
|
|
1452
|
+
* @defaultValue `monotone`
|
|
1453
|
+
* @see the component manifest
|
|
1454
|
+
*/
|
|
1325
1455
|
curve?: Curve;
|
|
1326
|
-
/**
|
|
1456
|
+
/**
|
|
1457
|
+
* Area fill style — solid, a top→bottom gradient, or a pattern.
|
|
1458
|
+
*
|
|
1459
|
+
* @defaultValue `solid`
|
|
1460
|
+
* @see the component manifest
|
|
1461
|
+
*/
|
|
1327
1462
|
fill?: FillKind;
|
|
1328
1463
|
/** Pattern motif when `fill="pattern"`. */
|
|
1329
1464
|
patternKind?: PatternKind;
|
|
1465
|
+
/**
|
|
1466
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
1467
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
1468
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
1469
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
1470
|
+
* this — charts call it internally.
|
|
1471
|
+
* @see the component manifest
|
|
1472
|
+
*/
|
|
1330
1473
|
width?: number;
|
|
1331
1474
|
height?: number;
|
|
1475
|
+
/**
|
|
1476
|
+
* Approximate number of ticks on the x-axis.
|
|
1477
|
+
*
|
|
1478
|
+
* @defaultValue `5`
|
|
1479
|
+
* @see the component manifest
|
|
1480
|
+
*/
|
|
1332
1481
|
xTicks?: number;
|
|
1482
|
+
/**
|
|
1483
|
+
* Approximate number of ticks on the y-axis.
|
|
1484
|
+
*
|
|
1485
|
+
* @defaultValue `5`
|
|
1486
|
+
* @see the component manifest
|
|
1487
|
+
*/
|
|
1333
1488
|
yTicks?: number;
|
|
1334
1489
|
legend?: boolean;
|
|
1335
1490
|
tooltip?: boolean;
|
|
1336
1491
|
className?: string;
|
|
1337
|
-
/**
|
|
1492
|
+
/**
|
|
1493
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
1494
|
+
*
|
|
1495
|
+
* @defaultValue `false`
|
|
1496
|
+
* @see the component manifest
|
|
1497
|
+
*/
|
|
1338
1498
|
plain?: boolean;
|
|
1339
1499
|
/** Reference lines, shaded bands, and markers drawn over the plot (target/threshold annotations). */
|
|
1340
1500
|
annotations?: readonly Annotation[];
|
|
@@ -1342,15 +1502,37 @@ interface AreaChartProps<Datum = {
|
|
|
1342
1502
|
labels?: LabelOptions;
|
|
1343
1503
|
/** Fired when a point is clicked or activated (Enter/Space) — for drill-down. */
|
|
1344
1504
|
onSelect?: (point: ChartPoint) => void;
|
|
1345
|
-
/**
|
|
1505
|
+
/**
|
|
1506
|
+
* Show a keyboard-operable Brush below the plot to subset the series to a window.
|
|
1507
|
+
*
|
|
1508
|
+
* @defaultValue `false`
|
|
1509
|
+
* @see the component manifest
|
|
1510
|
+
*/
|
|
1346
1511
|
brush?: boolean;
|
|
1347
|
-
/**
|
|
1512
|
+
/**
|
|
1513
|
+
* Show a DataZoom slider below the plot — a Brush whose body also pans the window.
|
|
1514
|
+
*
|
|
1515
|
+
* @defaultValue `false`
|
|
1516
|
+
* @see the component manifest
|
|
1517
|
+
*/
|
|
1348
1518
|
dataZoom?: boolean;
|
|
1349
|
-
/**
|
|
1519
|
+
/**
|
|
1520
|
+
* Enable in-plot wheel/drag/keyboard zoom-pan (+/-/0) over the series index window, with a
|
|
1521
|
+
* reset control and re-ticked axes.
|
|
1522
|
+
*
|
|
1523
|
+
* @defaultValue `false`
|
|
1524
|
+
* @see the component manifest
|
|
1525
|
+
*/
|
|
1350
1526
|
zoom?: boolean;
|
|
1351
1527
|
/** Connect this chart to others sharing the same id — they mirror zoom window + hovered x. */
|
|
1352
1528
|
syncId?: string;
|
|
1353
|
-
/**
|
|
1529
|
+
/**
|
|
1530
|
+
* Tooltip trigger — item (nearest point) or axis (a crosshair + a shared tooltip listing
|
|
1531
|
+
* every series at the hovered x).
|
|
1532
|
+
*
|
|
1533
|
+
* @defaultValue `item`
|
|
1534
|
+
* @see the component manifest
|
|
1535
|
+
*/
|
|
1354
1536
|
tooltipMode?: 'item' | 'axis';
|
|
1355
1537
|
/** Add a right-hand y-axis for series with `axis: 'right'` (non-stacked only). */
|
|
1356
1538
|
secondAxis?: {
|
|
@@ -1423,6 +1605,8 @@ interface PieChartProps {
|
|
|
1423
1605
|
centerSlot?: ReactNode;
|
|
1424
1606
|
/** Visible placeholder text when data is empty. Defaults to the i18n built-in ("No data"). */
|
|
1425
1607
|
emptyLabel?: string;
|
|
1608
|
+
/** Show tooltips (default `true`). Parity with Area/Bar/Line/Combo, which all take this. */
|
|
1609
|
+
tooltip?: boolean;
|
|
1426
1610
|
/** Custom tooltip formatter. Defaults to "value (pct%)". Receives ChartPoint.percent. */
|
|
1427
1611
|
tooltipFormat?: (p: ChartPoint) => string;
|
|
1428
1612
|
legend?: boolean;
|
|
@@ -1448,6 +1632,7 @@ declare function PieChart({
|
|
|
1448
1632
|
centerLabel,
|
|
1449
1633
|
centerSlot,
|
|
1450
1634
|
emptyLabel,
|
|
1635
|
+
tooltip,
|
|
1451
1636
|
tooltipFormat,
|
|
1452
1637
|
legend,
|
|
1453
1638
|
className,
|
|
@@ -1458,6 +1643,12 @@ declare function PieChart({
|
|
|
1458
1643
|
interface ScatterDatum {
|
|
1459
1644
|
x: number;
|
|
1460
1645
|
y: number;
|
|
1646
|
+
/**
|
|
1647
|
+
* Point radius or accessor
|
|
1648
|
+
*
|
|
1649
|
+
* @defaultValue `4`
|
|
1650
|
+
* @see the component manifest
|
|
1651
|
+
*/
|
|
1461
1652
|
r?: number;
|
|
1462
1653
|
}
|
|
1463
1654
|
interface ScatterChartSeries {
|
|
@@ -1471,14 +1662,39 @@ interface ScatterChartProps {
|
|
|
1471
1662
|
title: string;
|
|
1472
1663
|
description?: string;
|
|
1473
1664
|
r?: number | ((d: ScatterDatum) => number);
|
|
1665
|
+
/**
|
|
1666
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
1667
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
1668
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
1669
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
1670
|
+
* this — charts call it internally.
|
|
1671
|
+
* @see the component manifest
|
|
1672
|
+
*/
|
|
1474
1673
|
width?: number;
|
|
1475
1674
|
height?: number;
|
|
1675
|
+
/**
|
|
1676
|
+
* Approximate number of ticks on the x-axis.
|
|
1677
|
+
*
|
|
1678
|
+
* @defaultValue `5`
|
|
1679
|
+
* @see the component manifest
|
|
1680
|
+
*/
|
|
1476
1681
|
xTicks?: number;
|
|
1682
|
+
/**
|
|
1683
|
+
* Approximate number of ticks on the y-axis.
|
|
1684
|
+
*
|
|
1685
|
+
* @defaultValue `5`
|
|
1686
|
+
* @see the component manifest
|
|
1687
|
+
*/
|
|
1477
1688
|
yTicks?: number;
|
|
1478
1689
|
legend?: boolean;
|
|
1479
1690
|
tooltip?: boolean;
|
|
1480
1691
|
className?: string;
|
|
1481
|
-
/**
|
|
1692
|
+
/**
|
|
1693
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
1694
|
+
*
|
|
1695
|
+
* @defaultValue `false`
|
|
1696
|
+
* @see the component manifest
|
|
1697
|
+
*/
|
|
1482
1698
|
plain?: boolean;
|
|
1483
1699
|
/** Reference lines, shaded bands, and markers drawn over the plot (target/threshold annotations). */
|
|
1484
1700
|
annotations?: readonly Annotation[];
|
|
@@ -1486,7 +1702,13 @@ interface ScatterChartProps {
|
|
|
1486
1702
|
onSelect?: (point: ChartPoint) => void;
|
|
1487
1703
|
/** Point glyph shape — a fixed shape, or a function to encode a category by shape. Defaults to a circle. */
|
|
1488
1704
|
glyph?: GlyphShape | ((d: ScatterDatum, seriesId: string) => GlyphShape);
|
|
1489
|
-
/**
|
|
1705
|
+
/**
|
|
1706
|
+
* Renderer — svg (default), canvas (force), or auto (canvas past ~2000 points). Canvas
|
|
1707
|
+
* keeps the full a11y fallback table + keyboard layer.
|
|
1708
|
+
*
|
|
1709
|
+
* @defaultValue `svg`
|
|
1710
|
+
* @see the component manifest
|
|
1711
|
+
*/
|
|
1490
1712
|
renderer?: 'svg' | 'canvas' | 'auto';
|
|
1491
1713
|
/** Map each point's y → CVD-safe colour and/or size via a legend that filters the range. */
|
|
1492
1714
|
visualMap?: VisualMapOptions;
|
|
@@ -1513,19 +1735,42 @@ declare function ScatterChart({
|
|
|
1513
1735
|
visualMap,
|
|
1514
1736
|
toolbox
|
|
1515
1737
|
}: ScatterChartProps): import("react").JSX.Element;
|
|
1516
|
-
interface
|
|
1738
|
+
interface SparklineBaseProps {
|
|
1517
1739
|
data: readonly number[];
|
|
1740
|
+
/**
|
|
1741
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
1742
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
1743
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
1744
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
1745
|
+
* this — charts call it internally.
|
|
1746
|
+
*
|
|
1747
|
+
* @defaultValue `80`
|
|
1748
|
+
* @see the component manifest
|
|
1749
|
+
*/
|
|
1518
1750
|
width?: number;
|
|
1519
1751
|
height?: number;
|
|
1520
|
-
label: string;
|
|
1521
1752
|
color?: string;
|
|
1522
1753
|
endDot?: boolean;
|
|
1523
1754
|
}
|
|
1755
|
+
/**
|
|
1756
|
+
* Exactly one of `label` / `ariaLabel` is required — a chart with no accessible name is a
|
|
1757
|
+
* bug, so this stays enforced by the type. `ariaLabel` is the catalog's convention for an
|
|
1758
|
+
* invisible accessible name (here, the SVG `<title>`); `Sparkline` predates it and shipped
|
|
1759
|
+
* `label`, so both work and neither is deprecated.
|
|
1760
|
+
*/
|
|
1761
|
+
type SparklineProps = SparklineBaseProps & ({
|
|
1762
|
+
label: string;
|
|
1763
|
+
ariaLabel?: never;
|
|
1764
|
+
} | {
|
|
1765
|
+
ariaLabel: string;
|
|
1766
|
+
label?: never;
|
|
1767
|
+
});
|
|
1524
1768
|
declare function Sparkline({
|
|
1525
1769
|
data,
|
|
1526
1770
|
width,
|
|
1527
1771
|
height,
|
|
1528
1772
|
label,
|
|
1773
|
+
ariaLabel,
|
|
1529
1774
|
color,
|
|
1530
1775
|
endDot
|
|
1531
1776
|
}: SparklineProps): import("react").JSX.Element;
|
|
@@ -1535,11 +1780,37 @@ interface MeterThresholds {
|
|
|
1535
1780
|
}
|
|
1536
1781
|
interface MeterProps {
|
|
1537
1782
|
value: number;
|
|
1783
|
+
/**
|
|
1784
|
+
* Minimum allowed value.
|
|
1785
|
+
*
|
|
1786
|
+
* @defaultValue `0`
|
|
1787
|
+
* @see the component manifest
|
|
1788
|
+
*/
|
|
1538
1789
|
min?: number;
|
|
1790
|
+
/**
|
|
1791
|
+
* Maximum allowed value.
|
|
1792
|
+
*
|
|
1793
|
+
* @defaultValue `100`
|
|
1794
|
+
* @see the component manifest
|
|
1795
|
+
*/
|
|
1539
1796
|
max?: number;
|
|
1540
1797
|
label: string;
|
|
1798
|
+
/**
|
|
1799
|
+
* Selects the visual style variant.
|
|
1800
|
+
*
|
|
1801
|
+
* @defaultValue `bar`
|
|
1802
|
+
* @see the component manifest
|
|
1803
|
+
*/
|
|
1541
1804
|
variant?: 'bar' | 'gauge';
|
|
1542
1805
|
thresholds?: MeterThresholds;
|
|
1806
|
+
/**
|
|
1807
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
1808
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
1809
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
1810
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
1811
|
+
* this — charts call it internally.
|
|
1812
|
+
* @see the component manifest
|
|
1813
|
+
*/
|
|
1543
1814
|
width?: number;
|
|
1544
1815
|
height?: number;
|
|
1545
1816
|
}
|
|
@@ -1556,7 +1827,19 @@ declare function Meter({
|
|
|
1556
1827
|
interface KpiProps {
|
|
1557
1828
|
value: string | number;
|
|
1558
1829
|
label: string;
|
|
1830
|
+
/**
|
|
1831
|
+
* The change to show beside the value, as a **number** — `Kpi` owns the formatting
|
|
1832
|
+
* (sign, arrow, colour, unit). Its sibling `Stat` takes a pre-formatted `string` and
|
|
1833
|
+
* leaves formatting to you; that is the whole difference between the two tiles.
|
|
1834
|
+
*/
|
|
1559
1835
|
delta?: number;
|
|
1836
|
+
/**
|
|
1837
|
+
* How to render `delta`. `'number'` (default) is locale-formatted with a sign.
|
|
1838
|
+
* `'percent'` treats `delta` as already being in percentage points and appends `%`
|
|
1839
|
+
* (`25.6` → `+25.6%`) — it does NOT multiply by 100. Pass a function for anything else;
|
|
1840
|
+
* it receives the raw number and owns the entire string, sign included.
|
|
1841
|
+
*/
|
|
1842
|
+
deltaFormat?: 'number' | 'percent' | ((delta: number) => string);
|
|
1560
1843
|
deltaLabel?: string;
|
|
1561
1844
|
icon?: ReactNode;
|
|
1562
1845
|
sparkline?: readonly number[];
|
|
@@ -1566,6 +1849,7 @@ declare function Kpi({
|
|
|
1566
1849
|
value,
|
|
1567
1850
|
label,
|
|
1568
1851
|
delta,
|
|
1852
|
+
deltaFormat,
|
|
1569
1853
|
deltaLabel,
|
|
1570
1854
|
icon,
|
|
1571
1855
|
sparkline,
|
|
@@ -1577,10 +1861,23 @@ interface HistogramProps {
|
|
|
1577
1861
|
title: string;
|
|
1578
1862
|
label: string;
|
|
1579
1863
|
description?: string;
|
|
1864
|
+
/**
|
|
1865
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
1866
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
1867
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
1868
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
1869
|
+
* this — charts call it internally.
|
|
1870
|
+
* @see the component manifest
|
|
1871
|
+
*/
|
|
1580
1872
|
width?: number;
|
|
1581
1873
|
height?: number;
|
|
1582
1874
|
className?: string;
|
|
1583
|
-
/**
|
|
1875
|
+
/**
|
|
1876
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
1877
|
+
*
|
|
1878
|
+
* @defaultValue `false`
|
|
1879
|
+
* @see the component manifest
|
|
1880
|
+
*/
|
|
1584
1881
|
plain?: boolean;
|
|
1585
1882
|
}
|
|
1586
1883
|
declare function Histogram({
|
|
@@ -1603,10 +1900,23 @@ interface BoxplotProps {
|
|
|
1603
1900
|
series: BoxplotSeries[];
|
|
1604
1901
|
title: string;
|
|
1605
1902
|
description?: string;
|
|
1903
|
+
/**
|
|
1904
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
1905
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
1906
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
1907
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
1908
|
+
* this — charts call it internally.
|
|
1909
|
+
* @see the component manifest
|
|
1910
|
+
*/
|
|
1606
1911
|
width?: number;
|
|
1607
1912
|
height?: number;
|
|
1608
1913
|
className?: string;
|
|
1609
|
-
/**
|
|
1914
|
+
/**
|
|
1915
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
1916
|
+
*
|
|
1917
|
+
* @defaultValue `false`
|
|
1918
|
+
* @see the component manifest
|
|
1919
|
+
*/
|
|
1610
1920
|
plain?: boolean;
|
|
1611
1921
|
}
|
|
1612
1922
|
declare function Boxplot({
|
|
@@ -1631,11 +1941,24 @@ interface BubbleChartProps {
|
|
|
1631
1941
|
series: BubbleSeries[];
|
|
1632
1942
|
title: string;
|
|
1633
1943
|
description?: string;
|
|
1944
|
+
/**
|
|
1945
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
1946
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
1947
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
1948
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
1949
|
+
* this — charts call it internally.
|
|
1950
|
+
* @see the component manifest
|
|
1951
|
+
*/
|
|
1634
1952
|
width?: number;
|
|
1635
1953
|
height?: number;
|
|
1636
1954
|
tooltip?: boolean;
|
|
1637
1955
|
className?: string;
|
|
1638
|
-
/**
|
|
1956
|
+
/**
|
|
1957
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
1958
|
+
*
|
|
1959
|
+
* @defaultValue `false`
|
|
1960
|
+
* @see the component manifest
|
|
1961
|
+
*/
|
|
1639
1962
|
plain?: boolean;
|
|
1640
1963
|
/** Point glyph shape — a fixed shape, or a function to encode a category by shape. Defaults to a circle. */
|
|
1641
1964
|
glyph?: GlyphShape | ((d: BubbleDatum, seriesName: string) => GlyphShape);
|
|
@@ -1656,20 +1979,56 @@ interface ComboChartBar {
|
|
|
1656
1979
|
value: number;
|
|
1657
1980
|
}
|
|
1658
1981
|
interface ComboChartPoint {
|
|
1982
|
+
/** Index into `bars` — point `i` is drawn at the centre of bar `i`. */
|
|
1659
1983
|
x: number;
|
|
1660
1984
|
y: number;
|
|
1661
1985
|
}
|
|
1662
1986
|
interface ComboChartProps {
|
|
1987
|
+
/** Bar series — one entry per category, in x order. */
|
|
1663
1988
|
bars: ComboChartBar[];
|
|
1989
|
+
/**
|
|
1990
|
+
* Line series, correlated with `bars` **by array index**: `line[i]` is drawn over
|
|
1991
|
+
* `bars[i]`. Pass the same number of points as bars — a length mismatch is a data bug
|
|
1992
|
+
* and warns in dev.
|
|
1993
|
+
*/
|
|
1664
1994
|
line: ComboChartPoint[];
|
|
1665
1995
|
title: string;
|
|
1666
1996
|
description?: string;
|
|
1997
|
+
/** Measure the line on its own right-hand axis (use when the two metrics differ in scale). */
|
|
1667
1998
|
secondAxis?: boolean;
|
|
1999
|
+
/** Legend label for the bar series. Defaults to `'Bars'`. */
|
|
2000
|
+
barsLabel?: string;
|
|
2001
|
+
/** Legend label for the line series. Defaults to `'Line'`. */
|
|
2002
|
+
lineLabel?: string;
|
|
2003
|
+
/**
|
|
2004
|
+
* Show the legend. Defaults to **on** when both series have data — a two-metric chart
|
|
2005
|
+
* with nothing naming the two metrics is unreadable.
|
|
2006
|
+
*/
|
|
2007
|
+
legend?: boolean;
|
|
2008
|
+
/**
|
|
2009
|
+
* Render every Nth category label. **Omit this — it is auto-computed** from the label
|
|
2010
|
+
* widths and the plot width; pass it only to override the automatic stride.
|
|
2011
|
+
*/
|
|
2012
|
+
xLabelEvery?: number;
|
|
2013
|
+
/**
|
|
2014
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2015
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2016
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2017
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2018
|
+
* this — charts call it internally.
|
|
2019
|
+
* @see the component manifest
|
|
2020
|
+
*/
|
|
1668
2021
|
width?: number;
|
|
2022
|
+
/** SVG height in px (default 320). Unlike `width`, this does not track the container. */
|
|
1669
2023
|
height?: number;
|
|
1670
2024
|
tooltip?: boolean;
|
|
1671
2025
|
className?: string;
|
|
1672
|
-
/**
|
|
2026
|
+
/**
|
|
2027
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
2028
|
+
*
|
|
2029
|
+
* @defaultValue `false`
|
|
2030
|
+
* @see the component manifest
|
|
2031
|
+
*/
|
|
1673
2032
|
plain?: boolean;
|
|
1674
2033
|
/** Reference lines, bands, and markers. `y` maps to the bar value axis. */
|
|
1675
2034
|
annotations?: readonly Annotation[];
|
|
@@ -1680,6 +2039,10 @@ declare function ComboChart({
|
|
|
1680
2039
|
title,
|
|
1681
2040
|
description,
|
|
1682
2041
|
secondAxis,
|
|
2042
|
+
barsLabel,
|
|
2043
|
+
lineLabel,
|
|
2044
|
+
legend,
|
|
2045
|
+
xLabelEvery,
|
|
1683
2046
|
width: fixedWidth,
|
|
1684
2047
|
height,
|
|
1685
2048
|
tooltip,
|
|
@@ -1696,10 +2059,23 @@ interface HeatmapProps {
|
|
|
1696
2059
|
data: HeatmapDatum[];
|
|
1697
2060
|
title: string;
|
|
1698
2061
|
description?: string;
|
|
2062
|
+
/**
|
|
2063
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2064
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2065
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2066
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2067
|
+
* this — charts call it internally.
|
|
2068
|
+
* @see the component manifest
|
|
2069
|
+
*/
|
|
1699
2070
|
width?: number;
|
|
1700
2071
|
height?: number;
|
|
1701
2072
|
className?: string;
|
|
1702
|
-
/**
|
|
2073
|
+
/**
|
|
2074
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
2075
|
+
*
|
|
2076
|
+
* @defaultValue `false`
|
|
2077
|
+
* @see the component manifest
|
|
2078
|
+
*/
|
|
1703
2079
|
plain?: boolean;
|
|
1704
2080
|
/** Map cell value → CVD-safe colour via a continuous/piecewise legend that filters the range. */
|
|
1705
2081
|
visualMap?: VisualMapOptions;
|
|
@@ -1726,10 +2102,23 @@ interface TreemapProps {
|
|
|
1726
2102
|
data: TreemapDatum[];
|
|
1727
2103
|
title: string;
|
|
1728
2104
|
description?: string;
|
|
2105
|
+
/**
|
|
2106
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2107
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2108
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2109
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2110
|
+
* this — charts call it internally.
|
|
2111
|
+
* @see the component manifest
|
|
2112
|
+
*/
|
|
1729
2113
|
width?: number;
|
|
1730
2114
|
height?: number;
|
|
1731
2115
|
className?: string;
|
|
1732
|
-
/**
|
|
2116
|
+
/**
|
|
2117
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
2118
|
+
*
|
|
2119
|
+
* @defaultValue `false`
|
|
2120
|
+
* @see the component manifest
|
|
2121
|
+
*/
|
|
1733
2122
|
plain?: boolean;
|
|
1734
2123
|
}
|
|
1735
2124
|
declare function Treemap({
|
|
@@ -1752,10 +2141,23 @@ interface RadarProps {
|
|
|
1752
2141
|
max?: number;
|
|
1753
2142
|
title: string;
|
|
1754
2143
|
description?: string;
|
|
2144
|
+
/**
|
|
2145
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2146
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2147
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2148
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2149
|
+
* this — charts call it internally.
|
|
2150
|
+
* @see the component manifest
|
|
2151
|
+
*/
|
|
1755
2152
|
width?: number;
|
|
1756
2153
|
height?: number;
|
|
1757
2154
|
className?: string;
|
|
1758
|
-
/**
|
|
2155
|
+
/**
|
|
2156
|
+
* Marks only — no axes, grid lines, or legend. For micro/inline charts.
|
|
2157
|
+
*
|
|
2158
|
+
* @defaultValue `false`
|
|
2159
|
+
* @see the component manifest
|
|
2160
|
+
*/
|
|
1759
2161
|
plain?: boolean;
|
|
1760
2162
|
}
|
|
1761
2163
|
declare function Radar({
|
|
@@ -1774,8 +2176,24 @@ interface BulletProps {
|
|
|
1774
2176
|
target: number;
|
|
1775
2177
|
ranges: number[];
|
|
1776
2178
|
label: string;
|
|
2179
|
+
/**
|
|
2180
|
+
* Minimum allowed value.
|
|
2181
|
+
*
|
|
2182
|
+
* @defaultValue `0`
|
|
2183
|
+
* @see the component manifest
|
|
2184
|
+
*/
|
|
1777
2185
|
min?: number;
|
|
1778
2186
|
max?: number;
|
|
2187
|
+
/**
|
|
2188
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2189
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2190
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2191
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2192
|
+
* this — charts call it internally.
|
|
2193
|
+
*
|
|
2194
|
+
* @defaultValue `300`
|
|
2195
|
+
* @see the component manifest
|
|
2196
|
+
*/
|
|
1779
2197
|
width?: number;
|
|
1780
2198
|
height?: number;
|
|
1781
2199
|
className?: string;
|
|
@@ -1804,11 +2222,24 @@ interface RadialBarProps {
|
|
|
1804
2222
|
description?: string;
|
|
1805
2223
|
/** Square shorthand: sets width === height. Explicit width/height win. */
|
|
1806
2224
|
size?: number;
|
|
2225
|
+
/**
|
|
2226
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2227
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2228
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2229
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2230
|
+
* this — charts call it internally.
|
|
2231
|
+
* @see the component manifest
|
|
2232
|
+
*/
|
|
1807
2233
|
width?: number;
|
|
1808
2234
|
height?: number;
|
|
1809
2235
|
/** Domain top — the value a full sweep represents. Defaults to the largest datum. */
|
|
1810
2236
|
max?: number;
|
|
1811
|
-
/**
|
|
2237
|
+
/**
|
|
2238
|
+
* Sweep angle in degrees (270 = a gauge arc; 360 = a full ring).
|
|
2239
|
+
*
|
|
2240
|
+
* @defaultValue `270`
|
|
2241
|
+
* @see the component manifest
|
|
2242
|
+
*/
|
|
1812
2243
|
sweep?: number;
|
|
1813
2244
|
/** Center value text rendered in the hole. */
|
|
1814
2245
|
centerValue?: string;
|
|
@@ -1819,7 +2250,12 @@ interface RadialBarProps {
|
|
|
1819
2250
|
tooltip?: boolean;
|
|
1820
2251
|
legend?: boolean;
|
|
1821
2252
|
className?: string;
|
|
1822
|
-
/**
|
|
2253
|
+
/**
|
|
2254
|
+
* Marks only — no legend. For micro/inline charts.
|
|
2255
|
+
*
|
|
2256
|
+
* @defaultValue `false`
|
|
2257
|
+
* @see the component manifest
|
|
2258
|
+
*/
|
|
1823
2259
|
plain?: boolean;
|
|
1824
2260
|
}
|
|
1825
2261
|
/**
|
|
@@ -1854,13 +2290,31 @@ interface FunnelProps {
|
|
|
1854
2290
|
data: readonly FunnelStage[];
|
|
1855
2291
|
title: string;
|
|
1856
2292
|
description?: string;
|
|
2293
|
+
/**
|
|
2294
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2295
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2296
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2297
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2298
|
+
* this — charts call it internally.
|
|
2299
|
+
* @see the component manifest
|
|
2300
|
+
*/
|
|
1857
2301
|
width?: number;
|
|
1858
2302
|
height?: number;
|
|
1859
|
-
/**
|
|
2303
|
+
/**
|
|
2304
|
+
* Append each stage’s % of the first stage to its label.
|
|
2305
|
+
*
|
|
2306
|
+
* @defaultValue `false`
|
|
2307
|
+
* @see the component manifest
|
|
2308
|
+
*/
|
|
1860
2309
|
showConversion?: boolean;
|
|
1861
2310
|
tooltip?: boolean;
|
|
1862
2311
|
className?: string;
|
|
1863
|
-
/**
|
|
2312
|
+
/**
|
|
2313
|
+
* Marks only — no labels. For micro/inline charts.
|
|
2314
|
+
*
|
|
2315
|
+
* @defaultValue `false`
|
|
2316
|
+
* @see the component manifest
|
|
2317
|
+
*/
|
|
1864
2318
|
plain?: boolean;
|
|
1865
2319
|
}
|
|
1866
2320
|
/**
|
|
@@ -1892,14 +2346,39 @@ interface StreamProps {
|
|
|
1892
2346
|
categories: readonly (string | number)[];
|
|
1893
2347
|
title: string;
|
|
1894
2348
|
description?: string;
|
|
1895
|
-
/**
|
|
2349
|
+
/**
|
|
2350
|
+
* silhouette centers the stack (streamgraph); zero is a baseline stack.
|
|
2351
|
+
*
|
|
2352
|
+
* @defaultValue `silhouette`
|
|
2353
|
+
* @see the component manifest
|
|
2354
|
+
*/
|
|
1896
2355
|
offset?: StreamOffset;
|
|
2356
|
+
/**
|
|
2357
|
+
* Interpolation curve.
|
|
2358
|
+
*
|
|
2359
|
+
* @defaultValue `basis`
|
|
2360
|
+
* @see the component manifest
|
|
2361
|
+
*/
|
|
1897
2362
|
curve?: Curve;
|
|
2363
|
+
/**
|
|
2364
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2365
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2366
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2367
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2368
|
+
* this — charts call it internally.
|
|
2369
|
+
* @see the component manifest
|
|
2370
|
+
*/
|
|
1898
2371
|
width?: number;
|
|
1899
2372
|
height?: number;
|
|
1900
2373
|
legend?: boolean;
|
|
1901
2374
|
tooltip?: boolean;
|
|
1902
2375
|
className?: string;
|
|
2376
|
+
/**
|
|
2377
|
+
* When true, renders a minimal variant without chart chrome.
|
|
2378
|
+
*
|
|
2379
|
+
* @defaultValue `false`
|
|
2380
|
+
* @see the component manifest
|
|
2381
|
+
*/
|
|
1903
2382
|
plain?: boolean;
|
|
1904
2383
|
}
|
|
1905
2384
|
/** A streamgraph — stacked areas on a flowing (centered) baseline. */
|
|
@@ -1923,10 +2402,24 @@ interface SunburstProps {
|
|
|
1923
2402
|
title: string;
|
|
1924
2403
|
description?: string;
|
|
1925
2404
|
size?: number;
|
|
2405
|
+
/**
|
|
2406
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2407
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2408
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2409
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2410
|
+
* this — charts call it internally.
|
|
2411
|
+
* @see the component manifest
|
|
2412
|
+
*/
|
|
1926
2413
|
width?: number;
|
|
1927
2414
|
height?: number;
|
|
1928
2415
|
tooltip?: boolean;
|
|
1929
2416
|
className?: string;
|
|
2417
|
+
/**
|
|
2418
|
+
* When true, renders a minimal variant without chart chrome.
|
|
2419
|
+
*
|
|
2420
|
+
* @defaultValue `false`
|
|
2421
|
+
* @see the component manifest
|
|
2422
|
+
*/
|
|
1930
2423
|
plain?: boolean;
|
|
1931
2424
|
}
|
|
1932
2425
|
/** A sunburst — a radial partition of a tree; each node is an annular segment. */
|
|
@@ -1946,10 +2439,24 @@ interface SankeyProps {
|
|
|
1946
2439
|
links: readonly SankeyLink[];
|
|
1947
2440
|
title: string;
|
|
1948
2441
|
description?: string;
|
|
2442
|
+
/**
|
|
2443
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2444
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2445
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2446
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2447
|
+
* this — charts call it internally.
|
|
2448
|
+
* @see the component manifest
|
|
2449
|
+
*/
|
|
1949
2450
|
width?: number;
|
|
1950
2451
|
height?: number;
|
|
1951
2452
|
tooltip?: boolean;
|
|
1952
2453
|
className?: string;
|
|
2454
|
+
/**
|
|
2455
|
+
* When true, renders a minimal variant without chart chrome.
|
|
2456
|
+
*
|
|
2457
|
+
* @defaultValue `false`
|
|
2458
|
+
* @see the component manifest
|
|
2459
|
+
*/
|
|
1953
2460
|
plain?: boolean;
|
|
1954
2461
|
}
|
|
1955
2462
|
/** A Sankey flow diagram — ranked nodes with throughput-sized link ribbons. */
|
|
@@ -1975,10 +2482,24 @@ interface CalendarProps {
|
|
|
1975
2482
|
/** Range start/end (ISO string or Date). Defaults to the data's min/max day. */
|
|
1976
2483
|
from?: string | Date;
|
|
1977
2484
|
to?: string | Date;
|
|
2485
|
+
/**
|
|
2486
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2487
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2488
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2489
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2490
|
+
* this — charts call it internally.
|
|
2491
|
+
* @see the component manifest
|
|
2492
|
+
*/
|
|
1978
2493
|
width?: number;
|
|
1979
2494
|
height?: number;
|
|
1980
2495
|
tooltip?: boolean;
|
|
1981
2496
|
className?: string;
|
|
2497
|
+
/**
|
|
2498
|
+
* When true, renders a minimal variant without chart chrome.
|
|
2499
|
+
*
|
|
2500
|
+
* @defaultValue `false`
|
|
2501
|
+
* @see the component manifest
|
|
2502
|
+
*/
|
|
1982
2503
|
plain?: boolean;
|
|
1983
2504
|
/** Map day value → CVD-safe colour via a continuous/piecewise legend that filters the range. */
|
|
1984
2505
|
visualMap?: VisualMapOptions;
|
|
@@ -2004,15 +2525,34 @@ interface CandlestickDatum {
|
|
|
2004
2525
|
high: number;
|
|
2005
2526
|
low: number;
|
|
2006
2527
|
close: number;
|
|
2007
|
-
/**
|
|
2528
|
+
/**
|
|
2529
|
+
* Render volume bars beneath the candles.
|
|
2530
|
+
*
|
|
2531
|
+
* @defaultValue `false`
|
|
2532
|
+
* @see the component manifest
|
|
2533
|
+
*/
|
|
2008
2534
|
volume?: number;
|
|
2009
2535
|
}
|
|
2010
2536
|
interface CandlestickProps {
|
|
2011
2537
|
data: readonly CandlestickDatum[];
|
|
2012
2538
|
title: string;
|
|
2013
2539
|
description?: string;
|
|
2540
|
+
/**
|
|
2541
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2542
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2543
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2544
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2545
|
+
* this — charts call it internally.
|
|
2546
|
+
* @see the component manifest
|
|
2547
|
+
*/
|
|
2014
2548
|
width?: number;
|
|
2015
2549
|
height?: number;
|
|
2550
|
+
/**
|
|
2551
|
+
* Approximate number of ticks on the y-axis.
|
|
2552
|
+
*
|
|
2553
|
+
* @defaultValue `5`
|
|
2554
|
+
* @see the component manifest
|
|
2555
|
+
*/
|
|
2016
2556
|
yTicks?: number;
|
|
2017
2557
|
/** Colour for up candles (close ≥ open). */
|
|
2018
2558
|
upColor?: string;
|
|
@@ -2022,6 +2562,12 @@ interface CandlestickProps {
|
|
|
2022
2562
|
volume?: boolean;
|
|
2023
2563
|
tooltip?: boolean;
|
|
2024
2564
|
className?: string;
|
|
2565
|
+
/**
|
|
2566
|
+
* Marks only — no axes. For micro/inline charts.
|
|
2567
|
+
*
|
|
2568
|
+
* @defaultValue `false`
|
|
2569
|
+
* @see the component manifest
|
|
2570
|
+
*/
|
|
2025
2571
|
plain?: boolean;
|
|
2026
2572
|
/** Reference lines, shaded bands, and markers over the plot (e.g. a last-price rule). */
|
|
2027
2573
|
annotations?: readonly Annotation[];
|
|
@@ -2033,7 +2579,12 @@ interface CandlestickProps {
|
|
|
2033
2579
|
zoom?: boolean;
|
|
2034
2580
|
/** Connect this chart to others sharing the same id — they mirror the zoom window. */
|
|
2035
2581
|
syncId?: string;
|
|
2036
|
-
/**
|
|
2582
|
+
/**
|
|
2583
|
+
* item (nearest candle) or axis (crosshair + OHLC at the hovered x).
|
|
2584
|
+
*
|
|
2585
|
+
* @defaultValue `item`
|
|
2586
|
+
* @see the component manifest
|
|
2587
|
+
*/
|
|
2037
2588
|
tooltipMode?: 'item' | 'axis';
|
|
2038
2589
|
}
|
|
2039
2590
|
declare function Candlestick({
|
|
@@ -2065,16 +2616,40 @@ interface PolarProps {
|
|
|
2065
2616
|
data: readonly PolarDatum[];
|
|
2066
2617
|
title: string;
|
|
2067
2618
|
description?: string;
|
|
2068
|
-
/**
|
|
2619
|
+
/**
|
|
2620
|
+
* Bars (rose), a polar line, or a filled polar area.
|
|
2621
|
+
*
|
|
2622
|
+
* @defaultValue `bar`
|
|
2623
|
+
* @see the component manifest
|
|
2624
|
+
*/
|
|
2069
2625
|
mode?: 'bar' | 'line' | 'area';
|
|
2626
|
+
/**
|
|
2627
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2628
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2629
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2630
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2631
|
+
* this — charts call it internally.
|
|
2632
|
+
* @see the component manifest
|
|
2633
|
+
*/
|
|
2070
2634
|
width?: number;
|
|
2071
2635
|
height?: number;
|
|
2072
|
-
/**
|
|
2636
|
+
/**
|
|
2637
|
+
* Radial ring count.
|
|
2638
|
+
*
|
|
2639
|
+
* @defaultValue `4`
|
|
2640
|
+
* @see the component manifest
|
|
2641
|
+
*/
|
|
2073
2642
|
rings?: number;
|
|
2074
2643
|
/** Domain top (full radius). Defaults to the largest value. */
|
|
2075
2644
|
max?: number;
|
|
2076
2645
|
tooltip?: boolean;
|
|
2077
2646
|
className?: string;
|
|
2647
|
+
/**
|
|
2648
|
+
* Marks only — no rings or labels. For micro/inline charts.
|
|
2649
|
+
*
|
|
2650
|
+
* @defaultValue `false`
|
|
2651
|
+
* @see the component manifest
|
|
2652
|
+
*/
|
|
2078
2653
|
plain?: boolean;
|
|
2079
2654
|
}
|
|
2080
2655
|
declare function Polar({
|
|
@@ -2097,21 +2672,57 @@ interface GaugeThreshold {
|
|
|
2097
2672
|
}
|
|
2098
2673
|
interface GaugeProps {
|
|
2099
2674
|
value: number;
|
|
2675
|
+
/**
|
|
2676
|
+
* Minimum allowed value.
|
|
2677
|
+
*
|
|
2678
|
+
* @defaultValue `0`
|
|
2679
|
+
* @see the component manifest
|
|
2680
|
+
*/
|
|
2100
2681
|
min?: number;
|
|
2682
|
+
/**
|
|
2683
|
+
* Maximum allowed value.
|
|
2684
|
+
*
|
|
2685
|
+
* @defaultValue `100`
|
|
2686
|
+
* @see the component manifest
|
|
2687
|
+
*/
|
|
2101
2688
|
max?: number;
|
|
2102
2689
|
/** Coloured zones from `min` upward; the last should reach `max`. */
|
|
2103
2690
|
thresholds?: readonly GaugeThreshold[];
|
|
2104
2691
|
/** Unit suffix shown after the centre value. */
|
|
2105
2692
|
unit?: string;
|
|
2106
|
-
/**
|
|
2693
|
+
/**
|
|
2694
|
+
* Total sweep angle in degrees (270 = a speedometer arc).
|
|
2695
|
+
*
|
|
2696
|
+
* @defaultValue `270`
|
|
2697
|
+
* @see the component manifest
|
|
2698
|
+
*/
|
|
2107
2699
|
sweep?: number;
|
|
2108
|
-
/**
|
|
2700
|
+
/**
|
|
2701
|
+
* Major tick count.
|
|
2702
|
+
*
|
|
2703
|
+
* @defaultValue `5`
|
|
2704
|
+
* @see the component manifest
|
|
2705
|
+
*/
|
|
2109
2706
|
ticks?: number;
|
|
2110
2707
|
title: string;
|
|
2111
2708
|
description?: string;
|
|
2709
|
+
/**
|
|
2710
|
+
* Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks
|
|
2711
|
+
* its container via a ResizeObserver; there is no correct pixel number in a responsive
|
|
2712
|
+
* grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never
|
|
2713
|
+
* overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for
|
|
2714
|
+
* this — charts call it internally.
|
|
2715
|
+
* @see the component manifest
|
|
2716
|
+
*/
|
|
2112
2717
|
width?: number;
|
|
2113
2718
|
height?: number;
|
|
2114
2719
|
className?: string;
|
|
2720
|
+
/**
|
|
2721
|
+
* Marks only — no ticks/labels. For micro/inline charts.
|
|
2722
|
+
*
|
|
2723
|
+
* @defaultValue `false`
|
|
2724
|
+
* @see the component manifest
|
|
2725
|
+
*/
|
|
2115
2726
|
plain?: boolean;
|
|
2116
2727
|
}
|
|
2117
2728
|
declare function Gauge({
|
|
@@ -2129,4 +2740,4 @@ declare function Gauge({
|
|
|
2129
2740
|
className,
|
|
2130
2741
|
plain
|
|
2131
2742
|
}: GaugeProps): import("react").JSX.Element;
|
|
2132
|
-
export { AggOp, AggregateSpec, AngleBand, Annotation, AnnotationContext, AnnotationScale, AreaChart, AreaChartProps, AreaChartSeries, AreaDecimateOptions, Axis, AxisProps, BandScale, BarChart, BarChartProps, BarChartSeries, Bin, BoundStream, BoxStats, Boxplot, BoxplotProps, BoxplotSeries, Brush, BrushProps, BubbleChart, BubbleChartProps, BubbleDatum, BubbleSeries, Bullet, BulletProps, Calendar, CalendarDatum, CalendarProps, Candlestick, CandlestickDatum, CandlestickProps, CanvasLayer, CanvasLayerProps, CanvasPaint, CanvasSize, CategoryDatum, CategoryMapping, ChartDefs, ChartDefsProps, ChartFrame, ChartFrameProps, ChartSize, ComboChart, ComboChartBar, ComboChartPoint, ComboChartProps, Curve, DEFAULT_MARGINS, DataLabel, DataLabelProps, DataZoom, DataZoomProps, DecimateMethod, DecimateOptions, DefSeries, EncodeMapping, EncodedResult, EncodedSeries, FillKind, Funnel, FunnelProps, FunnelStage, Gauge, GaugeProps, GaugeThreshold, Glyph, GlyphProps, GlyphShape, GridLines, GridLinesProps, Heatmap, HeatmapDatum, HeatmapProps, HierNode, Histogram, HistogramBin, HistogramProps, Kpi, KpiProps, LabelOptions, LaidLink, LaidNode, Legend, LegendProps, LegendSeries, LineChart, LineChartProps, LineChartSeries, LinearScale, LogScale, Meter, MeterProps, MeterThresholds, PLAIN_MARGINS, PartitionedNode, PatternKind, PieChart, PieChartDatum, PieChartProps, Point, Polar, PolarDatum, PolarProps, Pt, Radar, RadarProps, RadarSeries, RadialBar, RadialBarDatum, RadialBarProps, RampKind, Rect, RegressionResult, RegressionType, ResolvedLabelOptions, Row, Sankey, SankeyLayout, SankeyLink, SankeyNode, SankeyOptions, SankeyProps, ScatterChart, ScatterChartProps, ScatterChartSeries, ScatterDatum, Sparkline, SparklineProps, StackedRow, StackedSegment, Stream, StreamDecimate, StreamOffset, StreamProps, StreamSeries, StreamSeriesOptions, StreamSource, Sunburst, SunburstProps, SyncGroup, Text, TextProps, TimeScale, Toolbox, ToolboxOptions, ToolboxProps, Treemap, TreemapDatum, TreemapNode, TreemapProps, TreemapRect, Vec, VisualChannel, VisualMap, VisualMapOptions, VisualMapProps, VisualMode, VisualResult, ZoomConfig, _syncGroupCount, aggregate, angleBand, annotationSummary, arcPath, areaPath, autoLabelStride, bandScale, bin, binValues, bindStream, boxStats, cellPath, decimate$1 as decimate, divergingRamp, download, encode, encodeCategory, extent, fillFor, filter, getSyncGroup, glyphPath, gradientId, isZoomed, leftMarginForLabels, linePath, linearScale, linkPath, logScale, lttb, mapVisual, maxDepth, minmax, nearestIndex, niceTicks, panWindow, partition, patternId, pieceIndex, polarPoint, quantize, radiusScale, rampLightness, rampOf, rampStops, regression, releaseSyncGroup, renderAnnotation, renderAnnotations, resolveColor, resolveLabels, sankeyLayout, sequentialRamp, serializeSvg, sort, splitDefined, sqrtScale, squarify, stackSeries, streamExtent, streamLayout, sumValue, svgToPngBlob, timeScale, toStackedSeries, useChartSize, useStreamSeries, visualVisible, voronoiCells, voronoiFind, wrapText, zoomWindow };
|
|
2743
|
+
export { AXIS_CHAR_PX, AggOp, AggregateSpec, AngleBand, Annotation, AnnotationContext, AnnotationScale, AreaChart, AreaChartProps, AreaChartSeries, AreaDecimateOptions, Axis, AxisProps, BandScale, BarChart, BarChartProps, BarChartSeries, Bin, BoundStream, BoxStats, Boxplot, BoxplotProps, BoxplotSeries, Brush, BrushProps, BubbleChart, BubbleChartProps, BubbleDatum, BubbleSeries, Bullet, BulletProps, Calendar, CalendarDatum, CalendarProps, Candlestick, CandlestickDatum, CandlestickProps, CanvasLayer, CanvasLayerProps, CanvasPaint, CanvasSize, CategoryDatum, CategoryMapping, ChartDefs, ChartDefsProps, ChartFrame, ChartFrameProps, ChartSize, ComboChart, ComboChartBar, ComboChartPoint, ComboChartProps, Curve, DEFAULT_MARGINS, DataLabel, DataLabelProps, DataZoom, DataZoomProps, DecimateMethod, DecimateOptions, DefSeries, EncodeMapping, EncodedResult, EncodedSeries, FillKind, Funnel, FunnelProps, FunnelStage, Gauge, GaugeProps, GaugeThreshold, Glyph, GlyphProps, GlyphShape, GridLines, GridLinesProps, Heatmap, HeatmapDatum, HeatmapProps, HierNode, Histogram, HistogramBin, HistogramProps, Kpi, KpiProps, LabelOptions, LaidLink, LaidNode, Legend, LegendProps, LegendSeries, LineChart, LineChartProps, LineChartSeries, LinearScale, LogScale, Meter, MeterProps, MeterThresholds, PLAIN_MARGINS, PartitionedNode, PatternKind, PieChart, PieChartDatum, PieChartProps, Point, Polar, PolarDatum, PolarProps, Pt, Radar, RadarProps, RadarSeries, RadialBar, RadialBarDatum, RadialBarProps, RampKind, Rect, RegressionResult, RegressionType, ResolvedLabelOptions, Row, Sankey, SankeyLayout, SankeyLink, SankeyNode, SankeyOptions, SankeyProps, ScatterChart, ScatterChartProps, ScatterChartSeries, ScatterDatum, Sparkline, SparklineProps, StackedRow, StackedSegment, Stream, StreamDecimate, StreamOffset, StreamProps, StreamSeries, StreamSeriesOptions, StreamSource, Sunburst, SunburstProps, SyncGroup, Text, TextProps, TimeScale, Toolbox, ToolboxOptions, ToolboxProps, Treemap, TreemapDatum, TreemapNode, TreemapProps, TreemapRect, Vec, VisualChannel, VisualMap, VisualMapOptions, VisualMapProps, VisualMode, VisualResult, ZoomConfig, _syncGroupCount, aggregate, angleBand, annotationSummary, arcPath, areaPath, autoLabelStride, bandScale, bin, binValues, bindStream, boxStats, cellPath, decimate$1 as decimate, divergingRamp, download, encode, encodeCategory, extent, fillFor, filter, getSyncGroup, glyphPath, gradientId, isZoomed, leftMarginForLabels, linePath, linearScale, linkPath, logScale, lttb, mapVisual, maxDepth, minmax, nearestIndex, niceTicks, panWindow, partition, patternId, pieceIndex, polarPoint, quantize, radiusScale, rampLightness, rampOf, rampStops, regression, releaseSyncGroup, renderAnnotation, renderAnnotations, resolveColor, resolveLabels, rightMarginForLabels, sankeyLayout, sequentialRamp, serializeSvg, sort, splitDefined, sqrtScale, squarify, stackSeries, streamExtent, streamLayout, sumValue, svgToPngBlob, timeScale, toStackedSeries, useChartSize, useStreamSeries, visualVisible, voronoiCells, voronoiFind, wrapText, zoomWindow };
|