@acronis-platform/ui-react 0.60.0 → 0.62.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.
Files changed (99) hide show
  1. package/README.md +5 -5
  2. package/dist/components/ui/app-shell/app-shell.js.map +1 -1
  3. package/dist/components/ui/area-chart/area-chart.js +209 -146
  4. package/dist/components/ui/area-chart/area-chart.js.map +1 -1
  5. package/dist/components/ui/avatar/avatar.js +26 -23
  6. package/dist/components/ui/avatar/avatar.js.map +1 -1
  7. package/dist/components/ui/bar-chart/bar-chart.js +595 -180
  8. package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
  9. package/dist/components/ui/calendar-panel/calendar-panel-utils.js +63 -0
  10. package/dist/components/ui/calendar-panel/calendar-panel-utils.js.map +1 -0
  11. package/dist/components/ui/calendar-panel/calendar-panel.js +260 -0
  12. package/dist/components/ui/calendar-panel/calendar-panel.js.map +1 -0
  13. package/dist/components/ui/category-bar/category-bar.js +98 -77
  14. package/dist/components/ui/category-bar/category-bar.js.map +1 -1
  15. package/dist/components/ui/chart/chart-format.js +144 -14
  16. package/dist/components/ui/chart/chart-format.js.map +1 -1
  17. package/dist/components/ui/chart/chart.js +204 -150
  18. package/dist/components/ui/chart/chart.js.map +1 -1
  19. package/dist/components/ui/composed-chart/composed-chart.js +422 -125
  20. package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
  21. package/dist/components/ui/confidence-cone/confidence-cone.js +308 -202
  22. package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
  23. package/dist/components/ui/filter-cards/filter-cards.js +25 -0
  24. package/dist/components/ui/filter-cards/filter-cards.js.map +1 -0
  25. package/dist/components/ui/funnel-chart/funnel-chart.js +245 -51
  26. package/dist/components/ui/funnel-chart/funnel-chart.js.map +1 -1
  27. package/dist/components/ui/histogram/histogram.js +85 -81
  28. package/dist/components/ui/histogram/histogram.js.map +1 -1
  29. package/dist/components/ui/line-chart/line-chart.js +227 -184
  30. package/dist/components/ui/line-chart/line-chart.js.map +1 -1
  31. package/dist/components/ui/metric/metric.js +88 -70
  32. package/dist/components/ui/metric/metric.js.map +1 -1
  33. package/dist/components/ui/pie-chart/pie-chart.js +234 -80
  34. package/dist/components/ui/pie-chart/pie-chart.js.map +1 -1
  35. package/dist/components/ui/radar-chart/radar-chart.js +210 -57
  36. package/dist/components/ui/radar-chart/radar-chart.js.map +1 -1
  37. package/dist/components/ui/radial-bar-chart/radial-bar-chart.js +358 -50
  38. package/dist/components/ui/radial-bar-chart/radial-bar-chart.js.map +1 -1
  39. package/dist/components/ui/resizable/resizable.js +23 -11
  40. package/dist/components/ui/resizable/resizable.js.map +1 -1
  41. package/dist/components/ui/sankey-chart/sankey-chart.js +25 -18
  42. package/dist/components/ui/sankey-chart/sankey-chart.js.map +1 -1
  43. package/dist/components/ui/scatter-chart/scatter-chart.js +86 -78
  44. package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
  45. package/dist/components/ui/sidebar-secondary/sidebar-secondary.js.map +1 -1
  46. package/dist/components/ui/timeline/timeline.js +206 -142
  47. package/dist/components/ui/timeline/timeline.js.map +1 -1
  48. package/dist/components/ui/treemap/treemap.js +183 -59
  49. package/dist/components/ui/treemap/treemap.js.map +1 -1
  50. package/dist/index.js +446 -420
  51. package/dist/index.js.map +1 -1
  52. package/dist/node_modules/.pnpm/react-day-picker@10.0.1_@types_react@19.2.15_react@19.2.6/node_modules/react-day-picker/dist/esm/useDayPicker.js +3 -3
  53. package/dist/react.js +446 -420
  54. package/dist/react.js.map +1 -1
  55. package/dist/src/components/ui/area-chart/area-chart.d.ts +53 -3
  56. package/dist/src/components/ui/area-chart/index.d.ts +1 -1
  57. package/dist/src/components/ui/avatar/avatar.d.ts +1 -1
  58. package/dist/src/components/ui/bar-chart/bar-chart.d.ts +154 -16
  59. package/dist/src/components/ui/bar-chart/index.d.ts +1 -1
  60. package/dist/src/components/ui/button/button.d.ts +1 -1
  61. package/dist/src/components/ui/button-menu/button-menu.d.ts +1 -1
  62. package/dist/src/components/ui/calendar-panel/__tests__/calendar-panel-utils.test.d.ts +1 -0
  63. package/dist/src/components/ui/calendar-panel/calendar-panel-utils.d.ts +55 -0
  64. package/dist/src/components/ui/calendar-panel/calendar-panel.d.ts +112 -0
  65. package/dist/src/components/ui/calendar-panel/index.d.ts +1 -0
  66. package/dist/src/components/ui/chart/__tests__/chart-layout.d.ts +63 -0
  67. package/dist/src/components/ui/chart/__tests__/chart-layout.test.d.ts +1 -0
  68. package/dist/src/components/ui/chart/chart-format.d.ts +415 -0
  69. package/dist/src/components/ui/chart/chart.d.ts +9 -3
  70. package/dist/src/components/ui/chart/index.d.ts +2 -2
  71. package/dist/src/components/ui/composed-chart/composed-chart.d.ts +156 -7
  72. package/dist/src/components/ui/composed-chart/index.d.ts +1 -1
  73. package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts +138 -20
  74. package/dist/src/components/ui/confidence-cone/index.d.ts +1 -1
  75. package/dist/src/components/ui/filter-cards/filter-cards.d.ts +11 -0
  76. package/dist/src/components/ui/filter-cards/index.d.ts +1 -0
  77. package/dist/src/components/ui/funnel-chart/funnel-chart.d.ts +201 -3
  78. package/dist/src/components/ui/funnel-chart/index.d.ts +1 -1
  79. package/dist/src/components/ui/histogram/histogram.d.ts +2 -2
  80. package/dist/src/components/ui/line-chart/index.d.ts +1 -1
  81. package/dist/src/components/ui/line-chart/line-chart.d.ts +51 -3
  82. package/dist/src/components/ui/pie-chart/index.d.ts +1 -1
  83. package/dist/src/components/ui/pie-chart/pie-chart.d.ts +145 -4
  84. package/dist/src/components/ui/radar-chart/index.d.ts +1 -1
  85. package/dist/src/components/ui/radar-chart/radar-chart.d.ts +219 -6
  86. package/dist/src/components/ui/radial-bar-chart/index.d.ts +1 -1
  87. package/dist/src/components/ui/radial-bar-chart/radial-bar-chart.d.ts +215 -9
  88. package/dist/src/components/ui/scatter-chart/scatter-chart.d.ts +2 -2
  89. package/dist/src/components/ui/timeline/index.d.ts +1 -1
  90. package/dist/src/components/ui/timeline/timeline.d.ts +79 -20
  91. package/dist/src/components/ui/treemap/index.d.ts +1 -1
  92. package/dist/src/components/ui/treemap/treemap.d.ts +68 -8
  93. package/dist/src/index.d.ts +2 -1
  94. package/dist/ui-react.css +1 -1
  95. package/package.json +2 -2
  96. package/dist/components/ui/search-global/search-global.js +0 -60
  97. package/dist/components/ui/search-global/search-global.js.map +0 -1
  98. package/dist/src/components/ui/search-global/index.d.ts +0 -1
  99. package/dist/src/components/ui/search-global/search-global.d.ts +0 -7
@@ -1,14 +1,23 @@
1
- import { ChartTooltip, ChartConfig, CartesianChartProps } from '../chart';
1
+ import { ChartTooltip, ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
2
2
  import * as React from 'react';
3
3
  /**
4
- * Drop the synthetic cone-band range series from a recharts tooltip/legend
4
+ * Drop every synthetic cone-band range series from a recharts tooltip/legend
5
5
  * payload, keeping the real actual/forecast series (and their order). Applied to
6
- * both the default tooltip and any caller-supplied `tooltipContent`, so the
7
- * `__cone` band never surfaces regardless of which path renders.
6
+ * both the default tooltip and any caller-supplied `tooltipContent`, so no band
7
+ * surfaces regardless of which path renders or how many series are plotted.
8
8
  */
9
9
  export declare function dropConeBand<T extends {
10
10
  dataKey?: unknown;
11
11
  }>(payload: readonly T[] | undefined): T[] | undefined;
12
+ /**
13
+ * Reduce a legend payload to the metrics the chart plots — one entry per series.
14
+ * A series' actual, forecast and cone are three recharts series painting a
15
+ * single metric in a single hue, so the legend names each metric once, with its
16
+ * actual series' swatch, instead of listing line styles as separate series.
17
+ */
18
+ export declare function keepMetricSeries<T extends {
19
+ dataKey?: unknown;
20
+ }>(payload: readonly T[] | undefined, actualKeys: readonly string[]): T[] | undefined;
12
21
  /**
13
22
  * Wrap a caller-supplied `tooltipContent` so the synthetic cone band is stripped
14
23
  * from the payload before it renders, while preserving recharts' own mount
@@ -22,34 +31,124 @@ type TooltipContentType = NonNullable<React.ComponentProps<typeof ChartTooltip>[
22
31
  type TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;
23
32
  type TooltipRenderProps = Parameters<TooltipContentFn>[0];
24
33
  export declare function createConeTooltip(tooltipContent: TooltipContentType): (props: TooltipRenderProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.FunctionComponentElement<import('recharts').TooltipContentProps<import('recharts').TooltipValueType, import('recharts/types/component/DefaultTooltipContent').NameType>>;
25
- export interface ConfidenceConeProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps {
34
+ /**
35
+ * One plotted metric: its actual / forecast columns and, optionally, the two
36
+ * bound columns that shade its cone. Omit `lowerKey`/`upperKey` for a band-less
37
+ * metric — a solid line handing off to a bare dashed projection.
38
+ */
39
+ export interface ConfidenceConeSeries {
40
+ /** Field for the known/actual values — drawn as a solid line with a filled area. */
41
+ actualKey: string;
42
+ /** Field for the projected values — drawn as a dashed line. */
43
+ forecastKey: string;
44
+ /** Field for the cone's lower bound. Omit (with `upperKey`) for no cone. */
45
+ lowerKey?: string;
46
+ /** Field for the cone's upper bound. Omit (with `lowerKey`) for no cone. */
47
+ upperKey?: string;
48
+ }
49
+ /**
50
+ * The x values of the projected period — every row carrying a forecast value for
51
+ * at least one series, in data order. The first is the hand-off point (where the
52
+ * shaded region and divider start); the whole set drives the forecast tick
53
+ * styling, matched by value so tick `interval` can't skew it the way a tick
54
+ * index would. Exported for unit tests; not part of the package's public API.
55
+ */
56
+ export declare function forecastPeriodX(data: ReadonlyArray<Record<string, string | number | null | undefined>>, series: readonly ConfidenceConeSeries[], xKey: string): Array<string | number | null | undefined>;
57
+ /**
58
+ * Build the X-axis tick renderer that sets the projected columns apart: italic,
59
+ * in the metric's hue. Styled inline rather than through the `fill` attribute
60
+ * recharts hands every tick, so the accent survives the class-based tick color
61
+ * a chart theme may apply. A custom tick owns its own text, so the caller's
62
+ * `xTickFormatter` is applied here — recharts only applies it to default ticks.
63
+ * Exported for unit tests; not part of the package's public API.
64
+ */
65
+ export declare function createForecastTick(forecastX: ReadonlySet<string | number | null | undefined>, color: string, tickFormatter?: CartesianChartProps['xTickFormatter']): ({ payload, index, ...tickProps }: {
66
+ payload?: {
67
+ value?: string | number;
68
+ };
69
+ index?: number;
70
+ }) => import("react/jsx-runtime").JSX.Element;
71
+ /** A dashed horizontal threshold on the value axis. */
72
+ export interface ConfidenceConeReferenceLine {
73
+ /** Position on the value (Y) axis. */
74
+ value: number;
75
+ /** Optional caption rendered at the line's right end. */
76
+ label?: string;
77
+ }
78
+ /**
79
+ * Every prop except the one-form-or-the-other requirement `ConfidenceConeProps`
80
+ * layers on below. Exported so the stories can type their `Meta` on a single
81
+ * object shape — Storybook can't split a union's required args between `meta.args`
82
+ * and a story's. Not re-exported from `index.ts`; not part of the public API.
83
+ */
84
+ export interface ConfidenceConeBaseProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, ChartAnimationProps {
26
85
  /**
27
- * Row-per-point data — the shared x dimension plus the actual / forecast /
28
- * bound fields. Rows are naturally sparse (a point has either an actual or a
29
- * forecast + bounds), so missing fields are allowed. Avoid a field named
30
- * `__cone` — it's reserved for the internal prediction-band series.
86
+ * Row-per-point data — the shared x dimension plus each series' actual /
87
+ * forecast / bound fields. Rows are naturally sparse (a point has either an
88
+ * actual or a forecast + bounds), so missing fields are allowed. Avoid fields
89
+ * starting with `__cone` — that prefix is reserved for the internal
90
+ * prediction-band series.
31
91
  */
32
92
  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
33
93
  /**
34
94
  * Per-series map of `label` / `color` for the actual + forecast lines
35
95
  * (imported from the shared `Chart` primitives). Colors are caller-supplied —
36
96
  * reference an existing semantic `--ui-*` token; there is no chart palette tier
37
- * yet. The cone band and the forecast line both reuse the actual series'
38
- * color — actual and forecast differ by line style, not hue.
97
+ * yet. Each metric renders in one hue: its cone band and forecast line both
98
+ * reuse its actual series' color — actual and forecast differ by line style,
99
+ * not hue.
39
100
  */
40
101
  config: ChartConfig;
41
102
  /** Category / time axis key (the shared dimension across rows). */
42
103
  xKey: string;
43
- /** Field for the known/actual values — drawn as a solid line with a filled area. */
44
- actualKey: string;
45
- /** Field for the projected values — drawn as a dashed line. */
46
- forecastKey: string;
47
- /** Field for the cone's lower bound. */
48
- lowerKey: string;
49
- /** Field for the cone's upper bound. */
50
- upperKey: string;
104
+ /**
105
+ * Plot several metrics against one shared axis — each with its own actual /
106
+ * forecast / bound fields and its own hue (from `config[actualKey]`). Takes
107
+ * precedence over the single-series `actualKey`/`forecastKey`/`lowerKey`/
108
+ * `upperKey` shorthand below; pass one form or the other, not both. One of the
109
+ * two forms is required.
110
+ */
111
+ series?: readonly ConfidenceConeSeries[];
112
+ /**
113
+ * Single-series shorthand — field for the known/actual values, drawn as a
114
+ * solid line with a filled area. Required (with `forecastKey`) unless `series`
115
+ * is set, which supersedes it.
116
+ */
117
+ actualKey?: string;
118
+ /**
119
+ * Single-series shorthand — field for the projected values, drawn as a dashed
120
+ * line. Required (with `actualKey`) unless `series` is set, which supersedes
121
+ * it.
122
+ */
123
+ forecastKey?: string;
124
+ /** Field for the cone's lower bound. Omit (with `upperKey`) for no cone. */
125
+ lowerKey?: string;
126
+ /** Field for the cone's upper bound. Omit (with `lowerKey`) for no cone. */
127
+ upperKey?: string;
128
+ /**
129
+ * How the known/actual period is drawn: a filled `area` under the line (the
130
+ * default), or a bare `line` — for a chart where the cone is the only shaded
131
+ * region, or where several metrics' fills would muddy each other.
132
+ */
133
+ actualType?: 'area' | 'line';
51
134
  /** Stroke width of the actual + forecast lines. */
52
135
  strokeWidth?: number;
136
+ /**
137
+ * Mark each data point: a filled dot on the observed values, a hollow one on
138
+ * the projection — so a point reads as measured or predicted at a glance.
139
+ */
140
+ showDots?: boolean;
141
+ /**
142
+ * Italicize the X-axis ticks over the forecast period and paint them in the
143
+ * first series' hue, so the projected columns read as projected even when the
144
+ * shaded region is off.
145
+ */
146
+ styleForecastTicks?: boolean;
147
+ /**
148
+ * One or more dashed horizontal thresholds on the value axis — e.g. a target
149
+ * or a capacity limit. Pass a single object or an array to draw several.
150
+ */
151
+ referenceLine?: ConfidenceConeReferenceLine | ConfidenceConeReferenceLine[];
53
152
  /**
54
153
  * Set off the forecast period from the actuals with a dashed divider at the
55
154
  * hand-off point (the first row with a forecast value) and a subtle shaded
@@ -58,5 +157,24 @@ export interface ConfidenceConeProps extends Omit<React.ComponentProps<'div'>, '
58
157
  showForecastRegion?: boolean;
59
158
  showLegend?: boolean;
60
159
  }
61
- declare const ConfidenceCone: React.ForwardRefExoticComponent<Omit<ConfidenceConeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
160
+ /**
161
+ * Which columns to plot has to be spelled out one way or the other: the `series`
162
+ * array, or the flat `actualKey` + `forecastKey` shorthand. Expressed as a union
163
+ * so a chart with neither is a compile error rather than a silent plot of axes
164
+ * and nothing else. Both forms together stay legal — `series` wins (see
165
+ * `plotted`), which is what the multi-series stories rely on to clear the args
166
+ * table.
167
+ */
168
+ export type ConfidenceConeProps = ConfidenceConeBaseProps & ({
169
+ series: readonly ConfidenceConeSeries[];
170
+ } | {
171
+ actualKey: string;
172
+ forecastKey: string;
173
+ });
174
+ declare const ConfidenceCone: React.ForwardRefExoticComponent<(Omit<ConfidenceConeBaseProps & {
175
+ series: readonly ConfidenceConeSeries[];
176
+ }, "ref"> | Omit<ConfidenceConeBaseProps & {
177
+ actualKey: string;
178
+ forecastKey: string;
179
+ }, "ref">) & React.RefAttributes<HTMLDivElement>>;
62
180
  export { ConfidenceCone };
@@ -1 +1 @@
1
- export { ConfidenceCone, type ConfidenceConeProps } from './confidence-cone';
1
+ export { ConfidenceCone, type ConfidenceConeProps, type ConfidenceConeSeries, type ConfidenceConeReferenceLine, } from './confidence-cone';
@@ -0,0 +1,11 @@
1
+ import { useRender } from '@base-ui/react/use-render';
2
+ import * as React from 'react';
3
+ export interface FilterCardsProps extends React.ComponentPropsWithoutRef<'div'> {
4
+ /**
5
+ * Replace the rendered `<div>` with another element or component
6
+ * (Base UI composition).
7
+ */
8
+ render?: useRender.RenderProp;
9
+ }
10
+ declare const FilterCards: React.ForwardRefExoticComponent<FilterCardsProps & React.RefAttributes<HTMLDivElement>>;
11
+ export { FilterCards };
@@ -0,0 +1 @@
1
+ export { FilterCards, type FilterCardsProps } from './filter-cards';
@@ -1,10 +1,125 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- import { ChartTooltip, ChartConfig } from '../chart';
2
+ import { ChartTooltip, ChartAnimationProps, ChartConfig, TickFormatter } from '../chart';
3
3
  import * as React from 'react';
4
4
  declare const funnelChartVariants: (props?: ({
5
5
  lastShape?: "triangle" | "rectangle" | null | undefined;
6
6
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
- export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof funnelChartVariants> {
7
+ /** Where a stage's label sits relative to its segment. */
8
+ export type FunnelChartLabelPosition = 'right' | 'left' | 'inside';
9
+ /** What a stage's label says. */
10
+ export type FunnelChartLabelFormat = 'name' | 'value' | 'percent' | 'name-value' | 'name-percent' | 'value-percent';
11
+ /** How the stages are coloured: one `config` entry each, or one shared ramp. */
12
+ export type FunnelChartColorMode = 'palette' | 'gradient';
13
+ /** Override for a single stage, keyed by its `nameKey` value. */
14
+ export interface FunnelChartStageSettings {
15
+ /**
16
+ * Paint this stage with a colour of its own, overriding both `config` and
17
+ * `colorMode`. Reference an existing semantic `--ui-*` token.
18
+ */
19
+ color?: string;
20
+ /**
21
+ * Drop the stage from the funnel — and from the legend, labels and the
22
+ * conversion percentages, which are computed over the visible stages only.
23
+ */
24
+ hidden?: boolean;
25
+ }
26
+ /**
27
+ * Where the value labels sit when the caller doesn't say: opposite the names, so
28
+ * the two lists never stack on the same edge. `inside` names sit on the segments
29
+ * and leave both edges free, so the values take the default `right`.
30
+ *
31
+ * A static default can't do this — `valuePosition="left"` beside
32
+ * `labelPosition="left"` draws both lists at the same anchor, overprinting the
33
+ * name with its own value.
34
+ */
35
+ export declare function funnelChartOppositeSide(labelPosition: FunnelChartLabelPosition): FunnelChartLabelPosition;
36
+ /**
37
+ * Reserve room for a composite label beside the funnel, by narrowing the
38
+ * **funnel** rather than the plot area.
39
+ *
40
+ * recharts word-wraps a label against the space between its trapezoid's
41
+ * mid-height edge and the *plot area* edge (`getCartesianPosition` clamps
42
+ * `width` to `parentViewBox`, which `Funnel` sets to the plot box). A margin
43
+ * shrinks the plot area and the funnel inside it in lockstep, so widening
44
+ * `margin.right` moves the clamp edge *inward* and leaves a composite label
45
+ * with less room, not more — the reserved strip sits outside `parentViewBox`
46
+ * where the text can never reach it.
47
+ *
48
+ * `Funnel`'s `width` is the lever that works: it scales the funnel within the
49
+ * plot area while `parentViewBox` stays put, and because recharts anchors the
50
+ * funnel at the plot area's left edge (`offsetX = offset.left`), everything it
51
+ * frees lands on the right. Narrowing the funnel to
52
+ * `COMPOSITE_FUNNEL_WIDTH` turns ~35px of wrap width into ~140px on a 460px
53
+ * chart.
54
+ *
55
+ * Returns `undefined` — i.e. leave the funnel at its full width — for every
56
+ * other case, so a funnel with plain labels, no labels, or `inside` labels keeps
57
+ * exactly the geometry it has always had.
58
+ *
59
+ * There is no equivalent lever for `labelPosition="left"`: the widest trapezoid
60
+ * always starts flush at the plot area's left edge, so a left-hand label is
61
+ * bounded by how sharply the funnel narrows and narrowing it further only makes
62
+ * that worse. Composite left-hand labels wrap; that's a recharts limitation, not
63
+ * a tuning choice.
64
+ *
65
+ * A caller-supplied `funnelWidth` always wins — this is only the default.
66
+ */
67
+ export declare function funnelChartLabelReserve(options: {
68
+ showLabels: boolean;
69
+ labelPosition: FunnelChartLabelPosition;
70
+ labelFormat: FunnelChartLabelFormat;
71
+ }): string | undefined;
72
+ /**
73
+ * The plot-area margin. Reserves the left inset when a label list sits there, so
74
+ * a left-hand label isn't clipped at the SVG edge; the right inset is always
75
+ * reserved, since that is the geometry every existing funnel was drawn with.
76
+ *
77
+ * This is overflow protection, not label room — the wrap width comes from
78
+ * `funnelChartLabelReserve`. A caller-supplied `margin` is merged over these
79
+ * defaults per side, so `margin={{ right: 160 }}` keeps the default top, bottom
80
+ * and left rather than collapsing them to zero.
81
+ */
82
+ export declare function funnelChartLabelMargin(options: {
83
+ showLabels: boolean;
84
+ labelPosition: FunnelChartLabelPosition;
85
+ showValueLabels: boolean;
86
+ valuePosition: FunnelChartLabelPosition;
87
+ }): {
88
+ left: number;
89
+ top: number;
90
+ right: number;
91
+ bottom: number;
92
+ };
93
+ /**
94
+ * Format a conversion share the way the default `percent` label reads it:
95
+ * `0.52 → "52.0%"`. Exported so a `percentFormatter` can wrap or replace it.
96
+ */
97
+ export declare const funnelChartPercent: TickFormatter;
98
+ /**
99
+ * Compose one stage's label text.
100
+ *
101
+ * `base` is the value the percentage is measured against — the funnel's widest
102
+ * stage, not the sum of every stage. A funnel's stages are nested subsets of
103
+ * each other rather than parts of a whole, so their values don't add up to
104
+ * anything meaningful; the share that reads as information is the conversion
105
+ * from the top of the funnel. (A pie's `percent` is the other way round — there
106
+ * a slice really is a share of the total.)
107
+ *
108
+ * Only the numeric part goes through `formatter`, so a label and its tooltip can
109
+ * share one formatter; the share goes through `percentFormatter`, so a locale
110
+ * that doesn't write a bare `%` can replace it. The percent formats degrade to
111
+ * the name (or to the value) rather than printing `NaN%` when there is nothing
112
+ * to divide by.
113
+ */
114
+ export declare function funnelChartLabelText(options: {
115
+ name: string;
116
+ value: number | string;
117
+ base: number;
118
+ format: FunnelChartLabelFormat;
119
+ formatter?: TickFormatter;
120
+ percentFormatter?: TickFormatter;
121
+ }): string;
122
+ export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof funnelChartVariants>, ChartAnimationProps {
8
123
  /** Row-per-stage data. Each object holds the stage's `nameKey` label + its `dataKey` numeric value. */
9
124
  data: ReadonlyArray<Record<string, string | number>>;
10
125
  /**
@@ -24,8 +139,91 @@ export interface FunnelChartProps extends Omit<React.ComponentProps<'div'>, 'chi
24
139
  nameKey: string;
25
140
  /** Flip the funnel so it widens toward the bottom instead of narrowing. */
26
141
  reversed?: boolean;
27
- /** Render each stage's name beside its segment. */
142
+ /** Render a label for each stage — see `labelFormat` and `labelPosition`. */
28
143
  showLabels?: boolean;
144
+ /**
145
+ * What each stage's label says. `percent` is the stage's share of the widest
146
+ * stage — its conversion from the top of the funnel.
147
+ */
148
+ labelFormat?: FunnelChartLabelFormat;
149
+ /**
150
+ * Where each stage's label sits. Defaults to `right`, beside the segment.
151
+ * `inside` centres it on the segment, which only works while every stage is
152
+ * wide enough to hold the text — a funnel narrows, so its last stages often
153
+ * are not. Keep the text short there (`percent`) or leave the labels beside
154
+ * the funnel.
155
+ */
156
+ labelPosition?: FunnelChartLabelPosition;
157
+ /**
158
+ * Render a second label carrying the stage's value, so the name and the number
159
+ * can sit on opposite sides of the funnel.
160
+ */
161
+ showValueLabels?: boolean;
162
+ /**
163
+ * Where the value label sits. Defaults to the side opposite `labelPosition`,
164
+ * where every stage has room — so it follows the names rather than pinning
165
+ * itself to one edge. See `labelPosition` before choosing `inside`.
166
+ */
167
+ valuePosition?: FunnelChartLabelPosition;
168
+ /**
169
+ * Colour for both label lists, overriding the contrast-matched default (the
170
+ * on-surface token beside the funnel, the on-fill token on a segment). Pass a
171
+ * `--ui-*` token; only use it when the default doesn't work on your surface.
172
+ */
173
+ labelFill?: string;
174
+ /** Format the numeric part of a label — pass the same formatter used elsewhere. */
175
+ labelFormatter?: TickFormatter;
176
+ /**
177
+ * Format the conversion share behind the `percent` formats. Receives the share
178
+ * as a fraction (`0.52`); defaults to `funnelChartPercent` (`"52.0%"`). Pass
179
+ * `createTickFormatter({ style: 'percent', minimumFractionDigits: 1 }, locale)`
180
+ * for a locale that doesn't write a bare `%`.
181
+ */
182
+ percentFormatter?: TickFormatter;
183
+ /** Render the legend. Off by default: a funnel labels its stages on the chart. */
184
+ showLegend?: boolean;
185
+ /** Which edge the legend sits on. */
186
+ legendPos?: 'top' | 'bottom';
187
+ /**
188
+ * How the stages are coloured. `palette` (the default) gives each stage its own
189
+ * `config` colour; `gradient` ramps one hue — `gradientColor` — from the widest
190
+ * stage down to the narrowest.
191
+ */
192
+ colorMode?: FunnelChartColorMode;
193
+ /**
194
+ * The hue `colorMode="gradient"` ramps. Defaults to the first visible stage's
195
+ * own colour — including a `stageSettings` colour set on it — so a palette
196
+ * config becomes a ramp without a second colour decision. Ignored when
197
+ * `colorMode` is `palette`.
198
+ */
199
+ gradientColor?: string;
200
+ /** Per-stage `color` / `hidden` overrides, keyed by the stage's `nameKey` value. */
201
+ stageSettings?: Record<string, FunnelChartStageSettings>;
202
+ /** Outline the hovered segment. */
203
+ showActiveShape?: boolean;
204
+ /**
205
+ * Segment border colour. Reference an existing semantic `--ui-*` token.
206
+ * Defaults to the border token when `strokeWidth` is set on its own.
207
+ */
208
+ stroke?: string;
209
+ /** Segment border width, in px. Implies a default `stroke` when given alone. */
210
+ strokeWidth?: number;
211
+ /**
212
+ * Funnel width — a number in px or a percentage of the plot area (`'70%'`).
213
+ * Defaults to the full plot area, except that a composite `labelFormat` beside
214
+ * the funnel narrows it to leave the label real room to wrap into.
215
+ */
216
+ funnelWidth?: number | string;
217
+ /**
218
+ * Plot-area margin, in px. Merged over the defaults per side, so passing one
219
+ * side keeps the others.
220
+ */
221
+ margin?: {
222
+ top?: number;
223
+ right?: number;
224
+ bottom?: number;
225
+ left?: number;
226
+ };
29
227
  showTooltip?: boolean;
30
228
  /**
31
229
  * Replace the default tooltip. Pass a configured `ChartTooltipContent`
@@ -1 +1 @@
1
- export { FunnelChart, funnelChartVariants, type FunnelChartProps, } from './funnel-chart';
1
+ export { FunnelChart, funnelChartVariants, funnelChartPercent, type FunnelChartProps, type FunnelChartColorMode, type FunnelChartLabelFormat, type FunnelChartLabelPosition, type FunnelChartStageSettings, } from './funnel-chart';
@@ -1,4 +1,4 @@
1
- import { ChartConfig, CartesianChartProps } from '../chart';
1
+ import { ChartConfig, CartesianChartProps, ChartAnimationProps } from '../chart';
2
2
  import * as React from 'react';
3
3
  export interface HistogramBin {
4
4
  /** Lower bound of the bin (inclusive). */
@@ -18,7 +18,7 @@ export interface HistogramBin {
18
18
  * the package's public API.
19
19
  */
20
20
  export declare function computeHistogramBins(values: ReadonlyArray<number>, binCount: number, domain?: [number, number]): HistogramBin[];
21
- export interface HistogramProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps {
21
+ export interface HistogramProps extends Omit<React.ComponentProps<'div'>, 'children'>, CartesianChartProps, ChartAnimationProps {
22
22
  /** Raw continuous samples to bin (non-finite values are ignored). */
23
23
  values: ReadonlyArray<number>;
24
24
  /**
@@ -1 +1 @@
1
- export { LineChart, lineChartVariants, type LineChartProps } from './line-chart';
1
+ export { LineChart, lineChartVariants, type LineChartProps, type LineChartLineSettings, } from './line-chart';
@@ -1,8 +1,8 @@
1
1
  import { VariantProps } from 'class-variance-authority';
2
- import { ChartTooltip, ChartConfig, CartesianChartProps } from '../chart';
2
+ import { ChartTooltip, ChartConfig, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartCurveType, ChartDataLabelProps, ChartReferenceLine, CartesianLabelPosition } from '../chart';
3
3
  import * as React from 'react';
4
4
  declare const lineChartVariants: (props?: ({
5
- curve?: "step" | "linear" | "monotone" | null | undefined;
5
+ curve?: "step" | "linear" | "monotone" | "natural" | "basis" | "stepBefore" | "stepAfter" | null | undefined;
6
6
  lineStyle?: "dashed" | "solid" | null | undefined;
7
7
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
8
8
  /**
@@ -27,7 +27,34 @@ type TooltipRenderProps = Parameters<TooltipContentFn>[0];
27
27
  * component is a stable content type (memoize it on `tooltipContent`).
28
28
  */
29
29
  export declare function createBandStrippedTooltip(tooltipContent: TooltipContentType): (props: TooltipRenderProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.FunctionComponentElement<import('recharts').TooltipContentProps<import('recharts').TooltipValueType, import('recharts/types/component/DefaultTooltipContent').NameType>>;
30
- export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants>, CartesianChartProps {
30
+ /**
31
+ * Style override for one series, keyed by its `dataKeys` entry. Anything left
32
+ * unset falls back to the chart-wide prop, so an entry only states what differs
33
+ * — e.g. one thicker, dashed "target" line among otherwise identical series.
34
+ *
35
+ * A series listed in `comparisonKeys` keeps its dashed, dimmed, dot-less
36
+ * treatment: `color`, `strokeWidth` and `curveType` still apply to it, but
37
+ * `showDots` / `dotSize` do not (the overlay is defined by having no dots).
38
+ */
39
+ export interface LineChartLineSettings {
40
+ /** Stroke color. Defaults to the series' `config` color. */
41
+ color?: string;
42
+ /** Stroke width. Defaults to the chart's `strokeWidth`. */
43
+ strokeWidth?: number;
44
+ /** Dash this series' stroke, whatever the chart-wide `lineStyle` is. */
45
+ dashed?: boolean;
46
+ /** Interpolation for this series only. Defaults to the chart's `curve`. */
47
+ curveType?: ChartCurveType;
48
+ /** Render this series' per-point dots. Defaults to the chart's `showDots`. */
49
+ showDots?: boolean;
50
+ /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */
51
+ dotSize?: number;
52
+ /** Show/hide this series' value labels, overriding the chart's `showLabels`. */
53
+ showLabel?: boolean;
54
+ /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */
55
+ labelPosition?: CartesianLabelPosition;
56
+ }
57
+ export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'children'>, VariantProps<typeof lineChartVariants>, CartesianChartProps, ChartAnimationProps, ChartBrushProps, ChartDataLabelProps {
31
58
  /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the line unless `connectNulls`). */
32
59
  data: ReadonlyArray<Record<string, string | number | null>>;
33
60
  /**
@@ -60,9 +87,30 @@ export interface LineChartProps extends Omit<React.ComponentProps<'div'>, 'child
60
87
  strokeWidth?: number;
61
88
  /** Render a dot at each data point. */
62
89
  showDots?: boolean;
90
+ /** Radius of each point's dot, in px. Its hover dot is 2px larger. */
91
+ dotSize?: number;
92
+ /**
93
+ * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass
94
+ * it explicitly to get hover dots on a dot-less line (`showDots={false}`
95
+ * with `showActiveDot`) or a static-only line (dots without the hover one).
96
+ */
97
+ showActiveDot?: boolean;
63
98
  /** Bridge `null` gaps in the data instead of breaking the line. */
64
99
  connectNulls?: boolean;
100
+ /**
101
+ * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry
102
+ * render from the chart-wide props.
103
+ */
104
+ lineSettings?: Record<string, LineChartLineSettings>;
105
+ /**
106
+ * One or more dashed reference/average lines on the value axis — a target, a
107
+ * threshold, or a series mean. Pass a single object or an array to draw
108
+ * several at once.
109
+ */
110
+ referenceLine?: ChartReferenceLine | ChartReferenceLine[];
65
111
  showLegend?: boolean;
112
+ /** Position of the value labels when `showLabels` is on. Defaults to `top`. */
113
+ labelPosition?: CartesianLabelPosition;
66
114
  }
67
115
  declare const LineChart: React.ForwardRefExoticComponent<Omit<LineChartProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
68
116
  export { LineChart, lineChartVariants };
@@ -1 +1 @@
1
- export { PieChart, pieChartVariants, type PieChartProps, type PieChartCenterLabel, } from './pie-chart';
1
+ export { PieChart, pieChartVariants, type PieChartProps, type PieChartCenterLabel, type PieChartLabelFormat, type PieChartTooltipFormat, type PieChartSliceSettings, } from './pie-chart';