@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.
- package/README.md +5 -5
- package/dist/components/ui/app-shell/app-shell.js.map +1 -1
- package/dist/components/ui/area-chart/area-chart.js +209 -146
- package/dist/components/ui/area-chart/area-chart.js.map +1 -1
- package/dist/components/ui/avatar/avatar.js +26 -23
- package/dist/components/ui/avatar/avatar.js.map +1 -1
- package/dist/components/ui/bar-chart/bar-chart.js +595 -180
- package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
- package/dist/components/ui/calendar-panel/calendar-panel-utils.js +63 -0
- package/dist/components/ui/calendar-panel/calendar-panel-utils.js.map +1 -0
- package/dist/components/ui/calendar-panel/calendar-panel.js +260 -0
- package/dist/components/ui/calendar-panel/calendar-panel.js.map +1 -0
- package/dist/components/ui/category-bar/category-bar.js +98 -77
- package/dist/components/ui/category-bar/category-bar.js.map +1 -1
- package/dist/components/ui/chart/chart-format.js +144 -14
- package/dist/components/ui/chart/chart-format.js.map +1 -1
- package/dist/components/ui/chart/chart.js +204 -150
- package/dist/components/ui/chart/chart.js.map +1 -1
- package/dist/components/ui/composed-chart/composed-chart.js +422 -125
- package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
- package/dist/components/ui/confidence-cone/confidence-cone.js +308 -202
- package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
- package/dist/components/ui/filter-cards/filter-cards.js +25 -0
- package/dist/components/ui/filter-cards/filter-cards.js.map +1 -0
- package/dist/components/ui/funnel-chart/funnel-chart.js +245 -51
- package/dist/components/ui/funnel-chart/funnel-chart.js.map +1 -1
- package/dist/components/ui/histogram/histogram.js +85 -81
- package/dist/components/ui/histogram/histogram.js.map +1 -1
- package/dist/components/ui/line-chart/line-chart.js +227 -184
- package/dist/components/ui/line-chart/line-chart.js.map +1 -1
- package/dist/components/ui/metric/metric.js +88 -70
- package/dist/components/ui/metric/metric.js.map +1 -1
- package/dist/components/ui/pie-chart/pie-chart.js +234 -80
- package/dist/components/ui/pie-chart/pie-chart.js.map +1 -1
- package/dist/components/ui/radar-chart/radar-chart.js +210 -57
- package/dist/components/ui/radar-chart/radar-chart.js.map +1 -1
- package/dist/components/ui/radial-bar-chart/radial-bar-chart.js +358 -50
- package/dist/components/ui/radial-bar-chart/radial-bar-chart.js.map +1 -1
- package/dist/components/ui/resizable/resizable.js +23 -11
- package/dist/components/ui/resizable/resizable.js.map +1 -1
- package/dist/components/ui/sankey-chart/sankey-chart.js +25 -18
- package/dist/components/ui/sankey-chart/sankey-chart.js.map +1 -1
- package/dist/components/ui/scatter-chart/scatter-chart.js +86 -78
- package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
- package/dist/components/ui/sidebar-secondary/sidebar-secondary.js.map +1 -1
- package/dist/components/ui/timeline/timeline.js +206 -142
- package/dist/components/ui/timeline/timeline.js.map +1 -1
- package/dist/components/ui/treemap/treemap.js +183 -59
- package/dist/components/ui/treemap/treemap.js.map +1 -1
- package/dist/index.js +446 -420
- package/dist/index.js.map +1 -1
- 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
- package/dist/react.js +446 -420
- package/dist/react.js.map +1 -1
- package/dist/src/components/ui/area-chart/area-chart.d.ts +53 -3
- package/dist/src/components/ui/area-chart/index.d.ts +1 -1
- package/dist/src/components/ui/avatar/avatar.d.ts +1 -1
- package/dist/src/components/ui/bar-chart/bar-chart.d.ts +154 -16
- package/dist/src/components/ui/bar-chart/index.d.ts +1 -1
- package/dist/src/components/ui/button/button.d.ts +1 -1
- package/dist/src/components/ui/button-menu/button-menu.d.ts +1 -1
- package/dist/src/components/ui/calendar-panel/__tests__/calendar-panel-utils.test.d.ts +1 -0
- package/dist/src/components/ui/calendar-panel/calendar-panel-utils.d.ts +55 -0
- package/dist/src/components/ui/calendar-panel/calendar-panel.d.ts +112 -0
- package/dist/src/components/ui/calendar-panel/index.d.ts +1 -0
- package/dist/src/components/ui/chart/__tests__/chart-layout.d.ts +63 -0
- package/dist/src/components/ui/chart/__tests__/chart-layout.test.d.ts +1 -0
- package/dist/src/components/ui/chart/chart-format.d.ts +415 -0
- package/dist/src/components/ui/chart/chart.d.ts +9 -3
- package/dist/src/components/ui/chart/index.d.ts +2 -2
- package/dist/src/components/ui/composed-chart/composed-chart.d.ts +156 -7
- package/dist/src/components/ui/composed-chart/index.d.ts +1 -1
- package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts +138 -20
- package/dist/src/components/ui/confidence-cone/index.d.ts +1 -1
- package/dist/src/components/ui/filter-cards/filter-cards.d.ts +11 -0
- package/dist/src/components/ui/filter-cards/index.d.ts +1 -0
- package/dist/src/components/ui/funnel-chart/funnel-chart.d.ts +201 -3
- package/dist/src/components/ui/funnel-chart/index.d.ts +1 -1
- package/dist/src/components/ui/histogram/histogram.d.ts +2 -2
- package/dist/src/components/ui/line-chart/index.d.ts +1 -1
- package/dist/src/components/ui/line-chart/line-chart.d.ts +51 -3
- package/dist/src/components/ui/pie-chart/index.d.ts +1 -1
- package/dist/src/components/ui/pie-chart/pie-chart.d.ts +145 -4
- package/dist/src/components/ui/radar-chart/index.d.ts +1 -1
- package/dist/src/components/ui/radar-chart/radar-chart.d.ts +219 -6
- package/dist/src/components/ui/radial-bar-chart/index.d.ts +1 -1
- package/dist/src/components/ui/radial-bar-chart/radial-bar-chart.d.ts +215 -9
- package/dist/src/components/ui/scatter-chart/scatter-chart.d.ts +2 -2
- package/dist/src/components/ui/timeline/index.d.ts +1 -1
- package/dist/src/components/ui/timeline/timeline.d.ts +79 -20
- package/dist/src/components/ui/treemap/index.d.ts +1 -1
- package/dist/src/components/ui/treemap/treemap.d.ts +68 -8
- package/dist/src/index.d.ts +2 -1
- package/dist/ui-react.css +1 -1
- package/package.json +2 -2
- package/dist/components/ui/search-global/search-global.js +0 -60
- package/dist/components/ui/search-global/search-global.js.map +0 -1
- package/dist/src/components/ui/search-global/index.d.ts +0 -1
- 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
|
|
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
|
|
7
|
-
*
|
|
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
|
-
|
|
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
|
|
28
|
-
* bound fields. Rows are naturally sparse (a point has either an
|
|
29
|
-
* forecast + bounds), so missing fields are allowed. Avoid
|
|
30
|
-
* `__cone` —
|
|
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.
|
|
38
|
-
* color — actual and forecast differ by line style,
|
|
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
|
-
/**
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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';
|