@automattic/charts 1.5.3 → 1.6.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 (41) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/index.cjs +8969 -9570
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +315 -202
  5. package/dist/index.d.cts +1246 -1183
  6. package/dist/index.d.ts +1247 -1184
  7. package/dist/index.js +8548 -9570
  8. package/dist/index.js.map +1 -1
  9. package/dist/visx/group/index.cjs +8 -8
  10. package/dist/visx/group/index.d.cts +2 -3
  11. package/dist/visx/group/index.d.ts +2 -3
  12. package/dist/visx/group/index.js +1 -7
  13. package/dist/visx/legend/index.cjs +20 -10
  14. package/dist/visx/legend/index.d.cts +2 -1
  15. package/dist/visx/legend/index.d.ts +2 -1
  16. package/dist/visx/legend/index.js +2 -10
  17. package/dist/visx/text/index.cjs +20 -12
  18. package/dist/visx/text/index.d.cts +2 -1
  19. package/dist/visx/text/index.d.ts +2 -1
  20. package/dist/visx/text/index.js +2 -12
  21. package/package.json +11 -18
  22. package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +99 -0
  23. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +33 -5
  24. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +35 -1
  25. package/src/types.ts +15 -1
  26. package/dist/chunk-5WRI5ZAA.js +0 -31
  27. package/dist/chunk-5WRI5ZAA.js.map +0 -1
  28. package/dist/chunk-7OZEQ5HE.cjs +0 -9
  29. package/dist/chunk-7OZEQ5HE.cjs.map +0 -1
  30. package/dist/chunk-DZUJEN5N.cjs +0 -31
  31. package/dist/chunk-DZUJEN5N.cjs.map +0 -1
  32. package/dist/chunk-NFRB2POF.js +0 -9
  33. package/dist/chunk-NFRB2POF.js.map +0 -1
  34. package/dist/index.css.map +0 -1
  35. package/dist/visx/group/index.cjs.map +0 -1
  36. package/dist/visx/group/index.js.map +0 -1
  37. package/dist/visx/legend/index.cjs.map +0 -1
  38. package/dist/visx/legend/index.js.map +0 -1
  39. package/dist/visx/text/index.cjs.map +0 -1
  40. package/dist/visx/text/index.js.map +0 -1
  41. package/tsup.config.ts +0 -46
package/dist/index.d.cts CHANGED
@@ -1,43 +1,39 @@
1
- import * as react from 'react';
2
- import { CSSProperties, PointerEvent, ReactNode, ComponentProps, SVGProps, FC, ComponentType, PropsWithChildren } from 'react';
3
- import { LegendOrdinal } from '@visx/legend';
4
- import { CircleSubjectProps } from '@visx/annotation/lib/components/CircleSubject';
5
- import { ConnectorProps } from '@visx/annotation/lib/components/Connector';
6
- import { LabelProps } from '@visx/annotation/lib/components/Label';
7
- import { LineSubjectProps } from '@visx/annotation/lib/components/LineSubject';
8
- import { Orientation, AxisScale, TickFormatter, AxisRendererProps } from '@visx/axis';
9
- import { LegendShape } from '@visx/legend/lib/types';
10
- import { ScaleType, ScaleInput } from '@visx/scale';
11
- import { TextProps } from '@visx/text/lib/Text';
12
- import { LineStyles, EventHandlerParams, GridStyles, GlyphProps } from '@visx/xychart';
13
- export { EventHandlerParams, GridStyles, LineStyles } from '@visx/xychart';
14
- import { GapSize } from '@wordpress/theme';
15
- import { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
16
- export { GoogleDataTableColumn, GoogleDataTableColumnRoleType, GoogleDataTableRow } from 'react-google-charts';
17
- import { RenderTooltipParams, TooltipProps as TooltipProps$1 } from '@visx/xychart/lib/components/Tooltip';
18
- export { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
19
- import * as react_jsx_runtime from 'react/jsx-runtime';
20
- import { TextProps as TextProps$1 } from '@visx/text';
21
- import { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
1
+ import { LegendOrdinal } from "@visx/legend";
2
+ import { CircleSubjectProps } from "@visx/annotation/lib/components/CircleSubject.js";
3
+ import { ConnectorProps } from "@visx/annotation/lib/components/Connector.js";
4
+ import { LabelProps } from "@visx/annotation/lib/components/Label.js";
5
+ import { LineSubjectProps } from "@visx/annotation/lib/components/LineSubject.js";
6
+ import { AxisRendererProps, AxisScale, Orientation, TickFormatter } from "@visx/axis";
7
+ import { LegendShape } from "@visx/legend/lib/types/index.js";
8
+ import { ScaleInput, ScaleType } from "@visx/scale";
9
+ import { TextProps } from "@visx/text/lib/Text.js";
10
+ import { EventHandlerParams, EventHandlerParams as EventHandlerParams$1, GlyphProps, GridStyles, GridStyles as GridStyles$1, LineStyles, LineStyles as LineStyles$1 } from "@visx/xychart";
11
+ import { GapSize } from "@wordpress/theme";
12
+ import { CSSProperties, ComponentProps, ComponentType, FC, MouseEvent, PointerEvent, PropsWithChildren, ReactNode, SVGProps } from "react";
13
+ import { GoogleDataTableColumn, GoogleDataTableColumn as GoogleDataTableColumn$1, GoogleDataTableColumnRoleType, GoogleDataTableRow, GoogleDataTableRow as GoogleDataTableRow$1 } from "react-google-charts";
14
+ import { RenderTooltipParams, RenderTooltipParams as RenderTooltipParams$1, TooltipProps as BaseTooltipProps$1 } from "@visx/xychart/lib/components/Tooltip.js";
15
+ import { TextProps as TextProps$1 } from "@visx/text";
16
+ import { PieArcDatum } from "@visx/shape/lib/shapes/Pie.js";
22
17
 
18
+ //#region src/types.d.ts
23
19
  type ValueOf<T> = T[keyof T];
24
20
  type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
25
21
  type ChartType = 'area' | 'bar' | 'conversion-funnel' | 'leaderboard' | 'line' | 'pie' | 'pie-semi-circle';
26
22
  type OrientationType = ValueOf<typeof Orientation>;
27
23
  type AnnotationStyles = {
28
- circleSubject?: Omit<CircleSubjectProps, 'x' | 'y'> & {
29
- fill?: string;
30
- };
31
- lineSubject?: Omit<LineSubjectProps, 'x' | 'y'>;
32
- connector?: Omit<ConnectorProps, 'x' | 'y' | 'dx' | 'dy'>;
33
- label?: Omit<LabelProps, 'title' | 'subtitle' | 'x' | 'y'> & {
34
- x?: number | 'start' | 'end';
35
- y?: number | 'start' | 'end';
36
- };
24
+ circleSubject?: Omit<CircleSubjectProps, 'x' | 'y'> & {
25
+ fill?: string;
26
+ };
27
+ lineSubject?: Omit<LineSubjectProps, 'x' | 'y'>;
28
+ connector?: Omit<ConnectorProps, 'x' | 'y' | 'dx' | 'dy'>;
29
+ label?: Omit<LabelProps, 'title' | 'subtitle' | 'x' | 'y'> & {
30
+ x?: number | 'start' | 'end';
31
+ y?: number | 'start' | 'end';
32
+ };
37
33
  };
38
34
  type DataPoint = {
39
- label: string;
40
- value: number;
35
+ label: string;
36
+ value: number;
41
37
  };
42
38
  /**
43
39
  * Data format for GeoChart - uses Google Charts native data format for maximum flexibility.
@@ -70,317 +66,290 @@ type DataPoint = {
70
66
  * ['Canada', 38000000, 9985000]
71
67
  * ]
72
68
  */
73
- type GeoData = [GoogleDataTableColumn[], ...GoogleDataTableRow[]];
69
+ type GeoData = [GoogleDataTableColumn$1[], ...GoogleDataTableRow$1[]];
74
70
  type DataPointDate = {
75
- date?: Date;
76
- /**
77
- * Supported Formats:
78
- * - YYYY-MM-DD (local)
79
- * - YYYY-MM-DD HH:mm:ss (local)
80
- * - YYYY-MM-DD HH:mm (local)
81
- * - YYYY-MM-DDTHH:mm:ss (local)
82
- * - YYYY-MM-DDTHH:mm:ss.SSS (local)
83
- * - YYYY-MM-DDTHH:mm (local)
84
- * - YYYY-MM-DDTHH:mm:ssZ (UTC → local)
85
- * - YYYY-MM-DDTHH:mm:ss±HH:mm (offset → local)
86
- */
87
- dateString?: string;
88
- value: number | null;
89
- label?: string;
71
+ date?: Date;
72
+ /**
73
+ * Supported Formats:
74
+ * - YYYY-MM-DD (local)
75
+ * - YYYY-MM-DD HH:mm:ss (local)
76
+ * - YYYY-MM-DD HH:mm (local)
77
+ * - YYYY-MM-DDTHH:mm:ss (local)
78
+ * - YYYY-MM-DDTHH:mm:ss.SSS (local)
79
+ * - YYYY-MM-DDTHH:mm (local)
80
+ * - YYYY-MM-DDTHH:mm:ssZ (UTC → local)
81
+ * - YYYY-MM-DDTHH:mm:ss±HH:mm (offset → local)
82
+ */
83
+ dateString?: string;
84
+ value: number | null;
85
+ label?: string;
90
86
  };
91
87
  type LeaderboardEntry = {
92
- /**
93
- * Unique internal key (e.g., 'key-direct')
94
- */
95
- id: string;
96
- /**
97
- * Human-readable name (e.g., 'Direct') or a JSX element (e.g., <h4>Direct</h4>)
98
- */
99
- label: string | JSX.Element;
100
- /**
101
- * Value of the entry
102
- */
103
- currentValue: number;
104
- /**
105
- * Value of the entry in the previous period
106
- */
107
- previousValue: number;
108
- /**
109
- * Width of current bar, as % of the current value
110
- */
111
- currentShare: number;
112
- /**
113
- * Width of previous bar, as % of the current value
114
- */
115
- previousShare: number;
116
- /**
117
- * Delta of the entry
118
- */
119
- delta: number;
120
- /**
121
- * Optional color for the entry's image/icon
122
- */
123
- imageColor?: string;
88
+ /**
89
+ * Unique internal key (e.g., 'key-direct')
90
+ */
91
+ id: string;
92
+ /**
93
+ * Human-readable name (e.g., 'Direct') or a JSX element (e.g., <h4>Direct</h4>)
94
+ */
95
+ label: string | JSX.Element;
96
+ /**
97
+ * Value of the entry
98
+ */
99
+ currentValue: number;
100
+ /**
101
+ * Value of the entry in the previous period
102
+ */
103
+ previousValue: number;
104
+ /**
105
+ * Width of current bar, as % of the current value
106
+ */
107
+ currentShare: number;
108
+ /**
109
+ * Width of previous bar, as % of the current value
110
+ */
111
+ previousShare: number;
112
+ /**
113
+ * Delta of the entry
114
+ */
115
+ delta: number;
116
+ /**
117
+ * Optional color for the entry's image/icon
118
+ */
119
+ imageColor?: string;
120
+ /**
121
+ * Optional click handler. When provided, the entire row becomes an
122
+ * interactive `<button>`: clickable and keyboard-focusable (Enter/Space),
123
+ * with a chevron affordance revealed on hover/focus. The consumer
124
+ * decides what the action does (e.g. drill-down). Rows without onClick are
125
+ * inert and render unchanged.
126
+ *
127
+ * For links or other interactive affordances (external-link icons, info
128
+ * tooltips), put them in the `label` render prop instead of using onClick —
129
+ * a row is either a button (onClick) or carries interactive label content,
130
+ * never both, since interactive elements cannot be nested in HTML.
131
+ */
132
+ onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
124
133
  };
125
134
  type GradientStop = {
126
- offset: string;
127
- color?: string;
128
- opacity?: number;
135
+ offset: string;
136
+ color?: string;
137
+ opacity?: number;
129
138
  };
130
139
  type SeriesDataOptions = {
131
- gradient?: {
132
- from: string;
133
- to: string;
134
- fromOpacity?: number;
135
- toOpacity?: number;
136
- stops?: GradientStop[];
137
- };
138
- stroke?: string;
139
- seriesLineStyle?: LineStyles;
140
- legendShapeStyle?: CSSProperties;
141
- type?: 'comparison';
140
+ gradient?: {
141
+ from: string;
142
+ to: string;
143
+ fromOpacity?: number;
144
+ toOpacity?: number;
145
+ stops?: GradientStop[];
146
+ };
147
+ stroke?: string;
148
+ seriesLineStyle?: LineStyles$1;
149
+ legendShapeStyle?: CSSProperties;
150
+ type?: 'comparison';
142
151
  };
143
152
  type SeriesData = {
144
- group?: string;
145
- label: string;
146
- data: DataPointDate[] | DataPoint[];
147
- options?: SeriesDataOptions;
153
+ group?: string;
154
+ label: string;
155
+ data: DataPointDate[] | DataPoint[];
156
+ options?: SeriesDataOptions;
148
157
  };
149
158
  type MultipleDataPointsDate = {
150
- label: string;
151
- data: DataPointDate[];
159
+ label: string;
160
+ data: DataPointDate[];
152
161
  };
153
162
  /**
154
163
  * Input data point for percentage-based charts (pie, donut, semi-circle).
155
164
  * Provide values; percentages will be calculated automatically.
156
165
  */
157
166
  type DataPointPercentage = {
158
- /**
159
- * Label for the data point
160
- */
161
- label: string;
162
- /**
163
- * Numerical value used for slice sizing.
164
- * Percentages are calculated automatically from values.
165
- */
166
- value: number;
167
- /**
168
- * Formatted value for display (e.g., "30K" instead of 30000)
169
- */
170
- valueDisplay?: string;
171
- /**
172
- * Color code for the segment, by default colours are taken from the theme but this property can overrides it
173
- */
174
- color?: string;
175
- /**
176
- * Group for the data point, used to match color with groups on other charts
177
- */
178
- group?: string;
167
+ /**
168
+ * Label for the data point
169
+ */
170
+ label: string;
171
+ /**
172
+ * Numerical value used for slice sizing.
173
+ * Percentages are calculated automatically from values.
174
+ */
175
+ value: number;
176
+ /**
177
+ * Formatted value for display (e.g., "30K" instead of 30000)
178
+ */
179
+ valueDisplay?: string;
180
+ /**
181
+ * Color code for the segment, by default colours are taken from the theme but this property can overrides it
182
+ */
183
+ color?: string;
184
+ /**
185
+ * Group for the data point, used to match color with groups on other charts
186
+ */
187
+ group?: string;
179
188
  };
180
189
  /**
181
190
  * Internal type with calculated percentage.
182
191
  * Used internally after percentage calculation from values.
183
192
  */
184
193
  type DataPointPercentageCalculated = DataPointPercentage & {
185
- /**
186
- * Calculated percentage (0-100) based on value relative to total
187
- */
188
- percentage: number;
194
+ /**
195
+ * Calculated percentage (0-100) based on value relative to total
196
+ */
197
+ percentage: number;
189
198
  };
190
199
  /**
191
200
  * Base theme configuration for chart components with optional properties
192
201
  */
193
202
  type ChartTheme = {
194
- /** Background color for chart components */
195
- backgroundColor: string;
196
- /** Background color for labels */
197
- labelBackgroundColor?: string;
198
- /** Text color for labels */
199
- labelTextColor?: string;
200
- /** Array of colors used for data visualization */
201
- colors: string[];
202
- /** Optional CSS styles for grid lines */
203
- gridStyles?: GridStyles;
204
- /** Length of axis ticks in pixels */
205
- tickLength: number;
206
- /** Color of the grid lines */
207
- gridColor: string;
208
- /** Color of the grid lines in dark mode */
209
- gridColorDark: string;
210
- /** Styles for x-axis tick lines */
211
- xTickLineStyles?: LineStyles;
212
- /** Styles for x-axis line */
213
- xAxisLineStyles?: LineStyles;
214
- /** Styles for series lines */
215
- seriesLineStyles?: LineStyles[];
216
- /** Array of render functions for glyphs */
217
- glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>;
218
- /** Legend specific settings */
219
- legend?: {
220
- /** Styles for legend shapes */
221
- shapeStyles?: Record<string, unknown>[];
222
- /** Styles for legend labels */
223
- labelStyles?: CSSProperties;
224
- /** Styles for legend container */
225
- containerStyles?: CSSProperties;
226
- };
227
- /** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
228
- svgLabelSmall?: TextProps;
229
- /** Styles for large SVG text (eg. axis titles), passed through to the XYChart theme. */
230
- svgLabelBig?: TextProps;
231
- annotationStyles?: AnnotationStyles;
232
- /** GeoChart specific settings */
233
- geoChart?: {
234
- /** Default fill color for a geo chart feature (e.g. country) with no data */
235
- featureFillColor?: string;
236
- };
237
- /** LeaderboardChart specific settings */
238
- leaderboardChart?: {
239
- /** Gap between rows in the leaderboard grid */
240
- rowGap?: number;
241
- /** Gap between columns in the leaderboard grid */
242
- columnGap?: number;
243
- /** Spacing between label and progress bars */
244
- labelSpacing?: number;
245
- /** Primary color for current period bars */
246
- primaryColor?: string;
247
- /** Secondary color for comparison period bars */
248
- secondaryColor?: string;
249
- /** Delta colors: [negative, neutral, positive] */
250
- deltaColors?: [string, string, string];
251
- };
252
- /** ConversionFunnelChart specific settings */
253
- conversionFunnelChart?: {
254
- /** Primary color for funnel bars */
255
- primaryColor?: string;
256
- /** Background color for chart container */
257
- backgroundColor?: string;
258
- /** Color for positive change indicators */
259
- positiveChangeColor?: string;
260
- /** Color for negative change indicators */
261
- negativeChangeColor?: string;
262
- };
263
- lineChart?: {
264
- lineStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, LineStyles>>;
265
- };
266
- /** Sparkline specific settings */
267
- sparkline?: {
268
- /** Margin around the sparkline chart */
269
- margin?: {
270
- top?: number;
271
- right?: number;
272
- bottom?: number;
273
- left?: number;
274
- };
275
- /** Stroke width for the sparkline line */
276
- strokeWidth?: number;
277
- };
203
+ /** Background color for chart components */backgroundColor: string; /** Background color for labels */
204
+ labelBackgroundColor?: string; /** Text color for labels */
205
+ labelTextColor?: string; /** Array of colors used for data visualization */
206
+ colors: string[]; /** Optional CSS styles for grid lines */
207
+ gridStyles?: GridStyles$1; /** Length of axis ticks in pixels */
208
+ tickLength: number; /** Color of the grid lines */
209
+ gridColor: string; /** Color of the grid lines in dark mode */
210
+ gridColorDark: string; /** Styles for x-axis tick lines */
211
+ xTickLineStyles?: LineStyles$1; /** Styles for x-axis line */
212
+ xAxisLineStyles?: LineStyles$1; /** Styles for series lines */
213
+ seriesLineStyles?: LineStyles$1[]; /** Array of render functions for glyphs */
214
+ glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>; /** Legend specific settings */
215
+ legend?: {
216
+ /** Styles for legend shapes */shapeStyles?: Record<string, unknown>[]; /** Styles for legend labels */
217
+ labelStyles?: CSSProperties; /** Styles for legend container */
218
+ containerStyles?: CSSProperties;
219
+ }; /** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
220
+ svgLabelSmall?: TextProps; /** Styles for large SVG text (eg. axis titles), passed through to the XYChart theme. */
221
+ svgLabelBig?: TextProps;
222
+ annotationStyles?: AnnotationStyles; /** GeoChart specific settings */
223
+ geoChart?: {
224
+ /** Default fill color for a geo chart feature (e.g. country) with no data */featureFillColor?: string;
225
+ }; /** LeaderboardChart specific settings */
226
+ leaderboardChart?: {
227
+ /** Gap between rows in the leaderboard grid */rowGap?: number; /** Gap between columns in the leaderboard grid */
228
+ columnGap?: number; /** Spacing between label and progress bars */
229
+ labelSpacing?: number; /** Primary color for current period bars */
230
+ primaryColor?: string; /** Secondary color for comparison period bars */
231
+ secondaryColor?: string; /** Delta colors: [negative, neutral, positive] */
232
+ deltaColors?: [string, string, string];
233
+ }; /** ConversionFunnelChart specific settings */
234
+ conversionFunnelChart?: {
235
+ /** Primary color for funnel bars */primaryColor?: string; /** Background color for chart container */
236
+ backgroundColor?: string; /** Color for positive change indicators */
237
+ positiveChangeColor?: string; /** Color for negative change indicators */
238
+ negativeChangeColor?: string;
239
+ };
240
+ lineChart?: {
241
+ lineStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, LineStyles$1>>;
242
+ }; /** Sparkline specific settings */
243
+ sparkline?: {
244
+ /** Margin around the sparkline chart */margin?: {
245
+ top?: number;
246
+ right?: number;
247
+ bottom?: number;
248
+ left?: number;
249
+ }; /** Stroke width for the sparkline line */
250
+ strokeWidth?: number;
251
+ };
278
252
  };
279
253
  /**
280
254
  * Theme configuration with all properties guaranteed to be defined.
281
255
  * Useful for merged themes where defaults are provided for all optional properties.
282
256
  */
283
257
  type CompleteChartTheme = Required<ChartTheme> & {
284
- leaderboardChart: Omit<Required<NonNullable<ChartTheme['leaderboardChart']>>, 'primaryColor' | 'secondaryColor'> & Pick<NonNullable<ChartTheme['leaderboardChart']>, 'primaryColor' | 'secondaryColor'>;
285
- conversionFunnelChart: Omit<Required<NonNullable<ChartTheme['conversionFunnelChart']>>, 'primaryColor'> & Pick<NonNullable<ChartTheme['conversionFunnelChart']>, 'primaryColor'>;
286
- lineChart: {
287
- lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles>;
288
- };
289
- legend: Required<NonNullable<ChartTheme['legend']>>;
290
- sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
291
- margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
292
- };
258
+ leaderboardChart: Omit<Required<NonNullable<ChartTheme['leaderboardChart']>>, 'primaryColor' | 'secondaryColor'> & Pick<NonNullable<ChartTheme['leaderboardChart']>, 'primaryColor' | 'secondaryColor'>;
259
+ conversionFunnelChart: Omit<Required<NonNullable<ChartTheme['conversionFunnelChart']>>, 'primaryColor'> & Pick<NonNullable<ChartTheme['conversionFunnelChart']>, 'primaryColor'>;
260
+ lineChart: {
261
+ lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles$1>;
262
+ };
263
+ legend: Required<NonNullable<ChartTheme['legend']>>;
264
+ sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
265
+ margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
266
+ };
293
267
  };
294
268
  type AxisOptions = {
295
- orientation?: OrientationType;
296
- numTicks?: number;
297
- /**
298
- * Explicit tick values for the axis. When set, takes precedence over `numTicks`
299
- * so callers can force a specific axis (e.g. integer-only steps on a sparse chart).
300
- */
301
- tickValues?: ScaleInput<AxisScale>[];
302
- axisClassName?: string;
303
- axisLineClassName?: string;
304
- labelClassName?: string;
305
- tickClassName?: string;
306
- tickFormat?: TickFormatter<ScaleInput<AxisScale>>;
307
- /**
308
- * Whether to display this axis. Defaults to true.
309
- */
310
- display?: boolean;
311
- /**
312
- * For more control over rendering or to add event handlers to datum, pass a function as children.
313
- */
314
- children?: (renderProps: AxisRendererProps<AxisScale>) => ReactNode;
315
- /**
316
- * Controls tick label overflow (bar charts only):
317
- *
318
- * - 'ellipsis': Truncate with ellipsis and fit to available space. Labels show full text
319
- * on hover via native tooltip. Note: A minimum width (20px) is enforced for readability.
320
- * On very dense charts (bandwidth < 20px), adjacent labels may overlap. To mitigate, use `numTicks`
321
- * to reduce labels or `tickFormat` to abbreviate text.
322
- * - undefined: No truncation; labels may overlap.
323
- *
324
- * Default: No truncation; labels may overlap.
325
- */
326
- labelOverflow?: 'ellipsis';
269
+ orientation?: OrientationType;
270
+ numTicks?: number;
271
+ /**
272
+ * Explicit tick values for the axis. When set, takes precedence over `numTicks`
273
+ * so callers can force a specific axis (e.g. integer-only steps on a sparse chart).
274
+ */
275
+ tickValues?: ScaleInput<AxisScale>[];
276
+ axisClassName?: string;
277
+ axisLineClassName?: string;
278
+ labelClassName?: string;
279
+ tickClassName?: string;
280
+ tickFormat?: TickFormatter<ScaleInput<AxisScale>>;
281
+ /**
282
+ * Whether to display this axis. Defaults to true.
283
+ */
284
+ display?: boolean;
285
+ /**
286
+ * For more control over rendering or to add event handlers to datum, pass a function as children.
287
+ */
288
+ children?: (renderProps: AxisRendererProps<AxisScale>) => ReactNode;
289
+ /**
290
+ * Controls tick label overflow (bar charts only):
291
+ *
292
+ * - 'ellipsis': Truncate with ellipsis and fit to available space. Labels show full text
293
+ * on hover via native tooltip. Note: A minimum width (20px) is enforced for readability.
294
+ * On very dense charts (bandwidth < 20px), adjacent labels may overlap. To mitigate, use `numTicks`
295
+ * to reduce labels or `tickFormat` to abbreviate text.
296
+ * - undefined: No truncation; labels may overlap.
297
+ *
298
+ * Default: No truncation; labels may overlap.
299
+ */
300
+ labelOverflow?: 'ellipsis';
327
301
  };
328
302
  type ScaleOptions = {
329
- type?: ScaleType;
330
- zero?: boolean;
331
- /**
332
- * Extends the scale's domain to nice round values. Pass `false` together with
333
- * an explicit `domain` to keep the tick values you set exactly.
334
- */
335
- nice?: boolean;
336
- domain?: [number, number] | [Date, Date];
337
- range?: [number, number];
338
- /**
339
- * For band scale, shortcut for setting `paddingInner` and `paddingOuter` to the same value.
340
- *
341
- * For point scale, the outer padding (spacing) at the ends of the range.
342
- * This is similar to band scale's `paddingOuter`.
343
- *
344
- */
345
- padding?: number;
346
- /**
347
- * The inner padding (spacing) within each band step of band scales, as a fraction of the step size. This value must lie in the range [0,1].
348
- *
349
- */
350
- paddingInner?: number;
351
- /**
352
- * The outer padding (spacing) at the ends of the range of band and point scales,
353
- * as a fraction of the step size. This value must lie in the range [0,1].
354
- *
355
- */
356
- paddingOuter?: number;
303
+ type?: ScaleType;
304
+ zero?: boolean;
305
+ /**
306
+ * Extends the scale's domain to nice round values. Pass `false` together with
307
+ * an explicit `domain` to keep the tick values you set exactly.
308
+ */
309
+ nice?: boolean;
310
+ domain?: [number, number] | [Date, Date];
311
+ range?: [number, number];
312
+ /**
313
+ * For band scale, shortcut for setting `paddingInner` and `paddingOuter` to the same value.
314
+ *
315
+ * For point scale, the outer padding (spacing) at the ends of the range.
316
+ * This is similar to band scale's `paddingOuter`.
317
+ *
318
+ */
319
+ padding?: number;
320
+ /**
321
+ * The inner padding (spacing) within each band step of band scales, as a fraction of the step size. This value must lie in the range [0,1].
322
+ *
323
+ */
324
+ paddingInner?: number;
325
+ /**
326
+ * The outer padding (spacing) at the ends of the range of band and point scales,
327
+ * as a fraction of the step size. This value must lie in the range [0,1].
328
+ *
329
+ */
330
+ paddingOuter?: number;
357
331
  };
358
332
  type LegendItemStyles = {
359
- /** Margin around each legend item. */
360
- margin?: CSSProperties['margin'];
361
- /** Flex direction for items within each legend entry. */
362
- flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
333
+ /** Margin around each legend item. */margin?: CSSProperties['margin']; /** Flex direction for items within each legend entry. */
334
+ flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
363
335
  };
364
336
  type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin'> & {
365
- /**
366
- * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
367
- * When set, text overflow behavior is controlled by textOverflow.
368
- */
369
- maxWidth?: string;
370
- /**
371
- * Controls how text behaves when it exceeds maxWidth.
372
- * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
373
- * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
374
- */
375
- textOverflow?: 'ellipsis' | 'wrap';
337
+ /**
338
+ * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
339
+ * When set, text overflow behavior is controlled by textOverflow.
340
+ */
341
+ maxWidth?: string;
342
+ /**
343
+ * Controls how text behaves when it exceeds maxWidth.
344
+ * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
345
+ * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
346
+ */
347
+ textOverflow?: 'ellipsis' | 'wrap';
376
348
  };
377
349
  type LegendShapeStyles = {
378
- /** Width of the legend shape in pixels. */
379
- width?: number;
380
- /** Height of the legend shape in pixels. */
381
- height?: number;
382
- /** Margin around the legend shape. */
383
- margin?: CSSProperties['margin'];
350
+ /** Width of the legend shape in pixels. */width?: number; /** Height of the legend shape in pixels. */
351
+ height?: number; /** Margin around the legend shape. */
352
+ margin?: CSSProperties['margin'];
384
353
  };
385
354
  /** Position of the legend relative to chart content. */
386
355
  type LegendPosition = 'top' | 'bottom';
@@ -389,229 +358,227 @@ type LegendPosition = 'top' | 'bottom';
389
358
  * Consolidates all legend styling and layout props into a single structured object.
390
359
  */
391
360
  type ChartLegendConfig<T = DataPoint | DataPointDate | LeaderboardEntry> = {
392
- /**
393
- * Layout direction of legend items.
394
- */
395
- orientation?: 'horizontal' | 'vertical';
396
- /**
397
- * Position of the legend relative to the chart.
398
- * TODO: Add 'left' | 'right' positioning support in future implementation
399
- */
400
- position?: LegendPosition;
401
- /**
402
- * Alignment of the legend within its position.
403
- */
404
- alignment?: 'start' | 'center' | 'end';
405
- /**
406
- * Shape of the legend marker icon.
407
- */
408
- shape?: LegendShape<T, number>;
409
- /**
410
- * Enable interactive legend items that can toggle series visibility.
411
- * Supported for all chart types that render series.
412
- * Requires chartId and GlobalChartsProvider.
413
- * For pie charts, percentages are recalculated so visible segments total 100%.
414
- */
415
- interactive?: boolean;
416
- /**
417
- * Additional CSS class name for individual legend items.
418
- */
419
- itemClassName?: string;
420
- /**
421
- * CSS styles for each legend item (margin, flexDirection).
422
- */
423
- itemStyles?: LegendItemStyles;
424
- /**
425
- * CSS styles for legend labels (maxWidth, textOverflow, justifyContent, flex, margin).
426
- */
427
- labelStyles?: LegendLabelStyles;
428
- /**
429
- * Styles for legend shapes (width, height, margin).
430
- */
431
- shapeStyles?: LegendShapeStyles;
361
+ /**
362
+ * Layout direction of legend items.
363
+ */
364
+ orientation?: 'horizontal' | 'vertical';
365
+ /**
366
+ * Position of the legend relative to the chart.
367
+ * TODO: Add 'left' | 'right' positioning support in future implementation
368
+ */
369
+ position?: LegendPosition;
370
+ /**
371
+ * Alignment of the legend within its position.
372
+ */
373
+ alignment?: 'start' | 'center' | 'end';
374
+ /**
375
+ * Shape of the legend marker icon.
376
+ */
377
+ shape?: LegendShape<T, number>;
378
+ /**
379
+ * Enable interactive legend items that can toggle series visibility.
380
+ * Supported for all chart types that render series.
381
+ * Requires chartId and GlobalChartsProvider.
382
+ * For pie charts, percentages are recalculated so visible segments total 100%.
383
+ */
384
+ interactive?: boolean;
385
+ /**
386
+ * Additional CSS class name for individual legend items.
387
+ */
388
+ itemClassName?: string;
389
+ /**
390
+ * CSS styles for each legend item (margin, flexDirection).
391
+ */
392
+ itemStyles?: LegendItemStyles;
393
+ /**
394
+ * CSS styles for legend labels (maxWidth, textOverflow, justifyContent, flex, margin).
395
+ */
396
+ labelStyles?: LegendLabelStyles;
397
+ /**
398
+ * Styles for legend shapes (width, height, margin).
399
+ */
400
+ shapeStyles?: LegendShapeStyles;
432
401
  };
433
402
  /**
434
403
  * Base properties shared across all chart components
435
404
  */
436
405
  type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
437
- /**
438
- * Array of data points to display in the chart
439
- */
440
- data: T extends DataPoint | DataPointDate | LeaderboardEntry ? T[] : T;
441
- /**
442
- * Optional unique identifier for the chart (auto-generated if not provided)
443
- */
444
- chartId?: string;
445
- /**
446
- * Additional CSS class name for the chart container
447
- */
448
- className?: string;
449
- /**
450
- * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
451
- */
452
- width?: number;
453
- /**
454
- * Height of the chart container in pixels. When omitted, the chart fills its parent's height.
455
- */
456
- height?: number;
457
- /**
458
- * Maximum diameter of the pie in pixels (pie and donut charts only).
459
- * The pie will shrink if the container is smaller than this value.
460
- * When omitted, the pie fills the available space.
461
- */
462
- size?: number;
463
- /**
464
- * Chart margins
465
- */
466
- margin?: {
467
- top?: number;
468
- right?: number;
469
- bottom?: number;
470
- left?: number;
471
- };
472
- /**
473
- * Callback function for pointer down event
474
- */
475
- onPointerDown?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
476
- /**
477
- * Callback function for pointer up event
478
- */
479
- onPointerUp?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
480
- /**
481
- * Callback function for pointer move event
482
- */
483
- onPointerMove?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
484
- /**
485
- * Callback function for pointer out event
486
- */
487
- onPointerOut?: (event: PointerEvent<Element>) => void;
488
- /**
489
- * Whether to show tooltips on hover. False by default.
490
- */
491
- withTooltips?: boolean;
492
- /**
493
- * Whether to show legend
494
- */
495
- showLegend?: boolean;
496
- /**
497
- * Legend configuration object for controlling legend appearance and behavior.
498
- * Includes orientation, position, alignment, shape, styling, and interactivity options.
499
- */
500
- legend?: ChartLegendConfig<T>;
501
- /**
502
- * Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
503
- */
504
- gridVisibility?: 'x' | 'y' | 'xy' | 'none';
505
- /**
506
- * Whether to show chart animation on initial render or not
507
- */
508
- animation?: boolean;
509
- /**
510
- * Gap between chart elements (SVG, legend, children).
511
- * Uses WordPress design system tokens.
512
- * @default 'md'
513
- */
514
- gap?: GapSize;
515
- /**
516
- * More options for the chart.
517
- */
518
- options?: {
519
- yScale?: ScaleOptions;
520
- xScale?: ScaleOptions;
521
- axis?: {
522
- x?: AxisOptions;
523
- y?: AxisOptions;
524
- };
406
+ /**
407
+ * Array of data points to display in the chart
408
+ */
409
+ data: T extends DataPoint | DataPointDate | LeaderboardEntry ? T[] : T;
410
+ /**
411
+ * Optional unique identifier for the chart (auto-generated if not provided)
412
+ */
413
+ chartId?: string;
414
+ /**
415
+ * Additional CSS class name for the chart container
416
+ */
417
+ className?: string;
418
+ /**
419
+ * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
420
+ */
421
+ width?: number;
422
+ /**
423
+ * Height of the chart container in pixels. When omitted, the chart fills its parent's height.
424
+ */
425
+ height?: number;
426
+ /**
427
+ * Maximum diameter of the pie in pixels (pie and donut charts only).
428
+ * The pie will shrink if the container is smaller than this value.
429
+ * When omitted, the pie fills the available space.
430
+ */
431
+ size?: number;
432
+ /**
433
+ * Chart margins
434
+ */
435
+ margin?: {
436
+ top?: number;
437
+ right?: number;
438
+ bottom?: number;
439
+ left?: number;
440
+ };
441
+ /**
442
+ * Callback function for pointer down event
443
+ */
444
+ onPointerDown?: (event: EventHandlerParams$1<DataPoint | DataPointDate>) => void;
445
+ /**
446
+ * Callback function for pointer up event
447
+ */
448
+ onPointerUp?: (event: EventHandlerParams$1<DataPoint | DataPointDate>) => void;
449
+ /**
450
+ * Callback function for pointer move event
451
+ */
452
+ onPointerMove?: (event: EventHandlerParams$1<DataPoint | DataPointDate>) => void;
453
+ /**
454
+ * Callback function for pointer out event
455
+ */
456
+ onPointerOut?: (event: PointerEvent<Element>) => void;
457
+ /**
458
+ * Whether to show tooltips on hover. False by default.
459
+ */
460
+ withTooltips?: boolean;
461
+ /**
462
+ * Whether to show legend
463
+ */
464
+ showLegend?: boolean;
465
+ /**
466
+ * Legend configuration object for controlling legend appearance and behavior.
467
+ * Includes orientation, position, alignment, shape, styling, and interactivity options.
468
+ */
469
+ legend?: ChartLegendConfig<T>;
470
+ /**
471
+ * Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
472
+ */
473
+ gridVisibility?: 'x' | 'y' | 'xy' | 'none';
474
+ /**
475
+ * Whether to show chart animation on initial render or not
476
+ */
477
+ animation?: boolean;
478
+ /**
479
+ * Gap between chart elements (SVG, legend, children).
480
+ * Uses WordPress design system tokens.
481
+ * @default 'md'
482
+ */
483
+ gap?: GapSize;
484
+ /**
485
+ * More options for the chart.
486
+ */
487
+ options?: {
488
+ yScale?: ScaleOptions;
489
+ xScale?: ScaleOptions;
490
+ axis?: {
491
+ x?: AxisOptions;
492
+ y?: AxisOptions;
525
493
  };
494
+ };
526
495
  };
527
496
  /**
528
497
  * Properties for grid components
529
498
  */
530
499
  type GridProps = {
531
- /**
532
- * Width of the grid in pixels
533
- */
534
- width: number;
535
- /**
536
- * Height of the grid in pixels
537
- */
538
- height: number;
539
- /**
540
- * Grid visibility. x is default.
541
- */
542
- gridVisibility?: 'x' | 'y' | 'xy' | 'none';
543
- /**
544
- * X-axis scale for the grid
545
- * TODO: Fix any type after resolving visx scale type issues
546
- */
547
- xScale: any;
548
- /**
549
- * Y-axis scale for the grid
550
- * TODO: Fix any type after resolving visx scale type issues
551
- */
552
- yScale: any;
553
- /**
554
- * Top offset for the grid
555
- */
556
- top?: number;
500
+ /**
501
+ * Width of the grid in pixels
502
+ */
503
+ width: number;
504
+ /**
505
+ * Height of the grid in pixels
506
+ */
507
+ height: number;
508
+ /**
509
+ * Grid visibility. x is default.
510
+ */
511
+ gridVisibility?: 'x' | 'y' | 'xy' | 'none';
512
+ /**
513
+ * X-axis scale for the grid
514
+ * TODO: Fix any type after resolving visx scale type issues
515
+ */
516
+ xScale: any;
517
+ /**
518
+ * Y-axis scale for the grid
519
+ * TODO: Fix any type after resolving visx scale type issues
520
+ */
521
+ yScale: any;
522
+ /**
523
+ * Top offset for the grid
524
+ */
525
+ top?: number;
557
526
  };
558
-
527
+ //#endregion
528
+ //#region src/components/legend/types.d.ts
559
529
  type VisxLegendProps = Pick<ComponentProps<typeof LegendOrdinal>, 'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'>;
560
530
  type BaseLegendProps = VisxLegendProps & {
561
- items: BaseLegendItem[];
562
- orientation?: 'horizontal' | 'vertical';
563
- position?: LegendPosition;
564
- alignment?: 'start' | 'center' | 'end';
565
- /** Additional CSS class name for legend items. */
566
- itemClassName?: string;
567
- /** CSS styles for each legend item (margin, flexDirection). */
568
- itemStyles?: LegendItemStyles;
569
- /** Additional CSS class name for legend labels. */
570
- labelClassName?: string;
571
- /** CSS styles for legend labels (justifyContent, flex, margin). */
572
- labelStyles?: LegendLabelStyles;
573
- /** Styles for legend shapes (width, height, margin). */
574
- shapeStyles?: LegendShapeStyles;
575
- /**
576
- * Function for rendering a custom legend layout.
577
- */
578
- render?: (items: BaseLegendItem[]) => ReactNode;
579
- /**
580
- * Enable interactive legend items that can toggle series visibility.
581
- * Requires GlobalChartsProvider and chartId to be set.
582
- */
583
- interactive?: boolean;
584
- /**
585
- * Chart ID for series visibility tracking when interactive mode is enabled.
586
- */
587
- chartId?: string;
531
+ items: BaseLegendItem[];
532
+ orientation?: 'horizontal' | 'vertical';
533
+ position?: LegendPosition;
534
+ alignment?: 'start' | 'center' | 'end'; /** Additional CSS class name for legend items. */
535
+ itemClassName?: string; /** CSS styles for each legend item (margin, flexDirection). */
536
+ itemStyles?: LegendItemStyles; /** Additional CSS class name for legend labels. */
537
+ labelClassName?: string; /** CSS styles for legend labels (justifyContent, flex, margin). */
538
+ labelStyles?: LegendLabelStyles; /** Styles for legend shapes (width, height, margin). */
539
+ shapeStyles?: LegendShapeStyles;
540
+ /**
541
+ * Function for rendering a custom legend layout.
542
+ */
543
+ render?: (items: BaseLegendItem[]) => ReactNode;
544
+ /**
545
+ * Enable interactive legend items that can toggle series visibility.
546
+ * Requires GlobalChartsProvider and chartId to be set.
547
+ */
548
+ interactive?: boolean;
549
+ /**
550
+ * Chart ID for series visibility tracking when interactive mode is enabled.
551
+ */
552
+ chartId?: string;
588
553
  };
589
554
  type LegendProps = Omit<BaseLegendProps, 'items'> & {
590
- items?: BaseLegendItem[];
591
- chartId?: string;
555
+ items?: BaseLegendItem[];
556
+ chartId?: string;
592
557
  };
593
558
  type BaseLegendItem = {
594
- label: string;
595
- value?: number | string;
596
- color: string;
597
- glyphSize?: number;
598
- renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
599
- shapeStyle?: CSSProperties & LineStyles;
559
+ label: string;
560
+ value?: number | string;
561
+ color: string;
562
+ glyphSize?: number;
563
+ renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
564
+ shapeStyle?: CSSProperties & LineStyles$1;
600
565
  };
601
-
602
- declare const Legend: react.ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
603
- items?: BaseLegendItem[];
604
- chartId?: string;
605
- } & react.RefAttributes<HTMLDivElement>>;
606
-
566
+ //#endregion
567
+ //#region src/components/legend/legend.d.ts
568
+ declare const Legend: import("react").ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
569
+ items?: BaseLegendItem[];
570
+ chartId?: string;
571
+ } & import("react").RefAttributes<HTMLDivElement>>;
572
+ //#endregion
573
+ //#region src/components/legend/hooks/use-chart-legend-items.d.ts
607
574
  type LegendValueDisplay = 'percentage' | 'value' | 'valueDisplay' | 'none';
608
575
  interface ChartLegendOptions {
609
- withGlyph?: boolean;
610
- glyphSize?: number;
611
- renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
612
- showValues?: boolean;
613
- legendValueDisplay?: LegendValueDisplay;
614
- legendShape?: LegendShape<SeriesData[], number>;
576
+ withGlyph?: boolean;
577
+ glyphSize?: number;
578
+ renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
579
+ showValues?: boolean;
580
+ legendValueDisplay?: LegendValueDisplay;
581
+ legendShape?: LegendShape<SeriesData[], number>;
615
582
  }
616
583
  /**
617
584
  * Hook to transform chart data into legend items
@@ -621,320 +588,337 @@ interface ChartLegendOptions {
621
588
  * @return Array of legend items ready for display
622
589
  */
623
590
  declare function useChartLegendItems<T extends SeriesData[] | DataPointDate[] | DataPointPercentageCalculated[]>(data: T, options?: ChartLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
624
-
591
+ //#endregion
592
+ //#region src/charts/private/single-chart-context/single-chart-context.d.ts
625
593
  interface ChartInstanceRef {
626
- getScales: () => {
627
- xScale: unknown;
628
- yScale: unknown;
629
- } | null;
630
- getChartDimensions: () => {
631
- width: number;
632
- height: number;
633
- margin: {
634
- top?: number;
635
- right?: number;
636
- bottom?: number;
637
- left?: number;
638
- };
594
+ getScales: () => {
595
+ xScale: unknown;
596
+ yScale: unknown;
597
+ } | null;
598
+ getChartDimensions: () => {
599
+ width: number;
600
+ height: number;
601
+ margin: {
602
+ top?: number;
603
+ right?: number;
604
+ bottom?: number;
605
+ left?: number;
639
606
  };
607
+ };
640
608
  }
641
609
  type SingleChartRef = ChartInstanceRef;
642
-
610
+ //#endregion
611
+ //#region src/charts/line-chart/types.d.ts
643
612
  type LineChartAnnotationProps = {
644
- datum: DataPointDate;
613
+ datum: DataPointDate;
614
+ title: string;
615
+ subtitle?: string;
616
+ subjectType?: 'circle' | 'line-vertical' | 'line-horizontal';
617
+ styles?: AnnotationStyles;
618
+ testId?: string;
619
+ renderLabel?: FC<{
620
+ title: string;
621
+ subtitle?: string;
622
+ }>;
623
+ renderLabelPopover?: FC<{
645
624
  title: string;
646
625
  subtitle?: string;
647
- subjectType?: 'circle' | 'line-vertical' | 'line-horizontal';
648
- styles?: AnnotationStyles;
649
- testId?: string;
650
- renderLabel?: FC<{
651
- title: string;
652
- subtitle?: string;
653
- }>;
654
- renderLabelPopover?: FC<{
655
- title: string;
656
- subtitle?: string;
657
- }>;
626
+ }>;
658
627
  };
659
628
  type CurveType = 'smooth' | 'linear' | 'monotone';
660
629
  type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
661
- glyphStyle?: SVGProps<SVGCircleElement>;
662
- position?: 'start' | 'end';
630
+ glyphStyle?: SVGProps<SVGCircleElement>;
631
+ position?: 'start' | 'end';
663
632
  };
664
633
  interface LineChartProps extends BaseChartProps<SeriesData[]> {
665
- withGradientFill: boolean;
666
- smoothing?: boolean;
667
- curveType?: CurveType;
668
- renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
669
- withStartGlyphs?: boolean;
670
- withEndGlyphs?: boolean;
671
- renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
672
- glyphStyle?: SVGProps<SVGCircleElement>;
673
- withLegendGlyph?: boolean;
674
- withTooltipCrosshairs?: {
675
- showVertical?: boolean;
676
- showHorizontal?: boolean;
677
- };
678
- /**
679
- * Enable drag-to-zoom on the X axis. The user drags horizontally to
680
- * select a range; the X axis rescales to that range. A small reset
681
- * button appears in the top-right of the chart while zoomed.
682
- */
683
- zoomable?: boolean;
684
- children?: ReactNode;
634
+ withGradientFill: boolean;
635
+ smoothing?: boolean;
636
+ curveType?: CurveType;
637
+ renderTooltip?: (params: RenderTooltipParams$1<DataPointDate>) => ReactNode;
638
+ withStartGlyphs?: boolean;
639
+ withEndGlyphs?: boolean;
640
+ renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
641
+ glyphStyle?: SVGProps<SVGCircleElement>;
642
+ withLegendGlyph?: boolean;
643
+ withTooltipCrosshairs?: {
644
+ showVertical?: boolean;
645
+ showHorizontal?: boolean;
646
+ };
647
+ /**
648
+ * Enable drag-to-zoom on the X axis. The user drags horizontally to
649
+ * select a range; the X axis rescales to that range. A small reset
650
+ * button appears in the top-right of the chart while zoomed.
651
+ */
652
+ zoomable?: boolean;
653
+ children?: ReactNode;
685
654
  }
686
655
  type TooltipDatum = {
687
- key: string;
688
- value: number;
656
+ key: string;
657
+ value: number;
689
658
  };
690
-
659
+ //#endregion
660
+ //#region src/charts/area-chart/types.d.ts
691
661
  interface AreaChartProps extends BaseChartProps<SeriesData[]> {
692
- /**
693
- * Whether series should be stacked on top of each other.
694
- * When false, series are rendered as overlapping filled areas.
695
- * @default true
696
- */
697
- stacked?: boolean;
698
- /**
699
- * Stack offset strategy when stacked is true. Mirrors d3-shape stack offsets.
700
- * - 'none' (default): values stack at their natural magnitude
701
- * - 'expand': values are normalized to the [0,1] range (percentage stacks)
702
- * - 'wiggle': used for streamgraphs
703
- * - 'silhouette': stack centered around zero
704
- */
705
- stackOffset?: 'none' | 'expand' | 'wiggle' | 'silhouette';
706
- /**
707
- * Smoothing using a Catmull-Rom curve. Ignored if `curveType` is set.
708
- */
709
- smoothing?: boolean;
710
- /**
711
- * Curve interpolation type. Takes precedence over `smoothing`.
712
- */
713
- curveType?: CurveType;
714
- /**
715
- * Custom tooltip renderer.
716
- */
717
- renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
718
- /**
719
- * Whether to show crosshair lines in the tooltip.
720
- */
721
- withTooltipCrosshairs?: {
722
- showVertical?: boolean;
723
- showHorizontal?: boolean;
724
- };
725
- /**
726
- * Fill opacity for the stacked areas. 0–1.
727
- * @default 0.85 when stacked, 0.4 when overlapping
728
- */
729
- fillOpacity?: number;
730
- /**
731
- * Whether to render a stroke (line) on top of each area.
732
- * @default false when stacked, true when overlapping
733
- */
734
- withStroke?: boolean;
735
- /**
736
- * Enable drag-to-zoom on the X axis. The user drags horizontally to
737
- * select a range; the X axis rescales to that range. A small reset
738
- * button appears in the top-right of the chart while zoomed.
739
- */
740
- zoomable?: boolean;
741
- /**
742
- * When using an interactive legend, controls whether the Y axis rescales
743
- * to fit only the visible series. Defaults to `true`, matching the
744
- * intuitive default for LineChart and BarChart. Set to `false` to pin
745
- * the Y axis to the full data extent so toggling legend items off does
746
- * not move the chart's baseline.
747
- * @default true
748
- */
749
- rescaleYOnLegendToggle?: boolean;
750
- children?: ReactNode;
662
+ /**
663
+ * Whether series should be stacked on top of each other.
664
+ * When false, series are rendered as overlapping filled areas.
665
+ * @default true
666
+ */
667
+ stacked?: boolean;
668
+ /**
669
+ * Stack offset strategy when stacked is true. Mirrors d3-shape stack offsets.
670
+ * - 'none' (default): values stack at their natural magnitude
671
+ * - 'expand': values are normalized to the [0,1] range (percentage stacks)
672
+ * - 'wiggle': used for streamgraphs
673
+ * - 'silhouette': stack centered around zero
674
+ */
675
+ stackOffset?: 'none' | 'expand' | 'wiggle' | 'silhouette';
676
+ /**
677
+ * Smoothing using a Catmull-Rom curve. Ignored if `curveType` is set.
678
+ */
679
+ smoothing?: boolean;
680
+ /**
681
+ * Curve interpolation type. Takes precedence over `smoothing`.
682
+ */
683
+ curveType?: CurveType;
684
+ /**
685
+ * Custom tooltip renderer.
686
+ */
687
+ renderTooltip?: (params: RenderTooltipParams$1<DataPointDate>) => ReactNode;
688
+ /**
689
+ * Whether to show crosshair lines in the tooltip.
690
+ */
691
+ withTooltipCrosshairs?: {
692
+ showVertical?: boolean;
693
+ showHorizontal?: boolean;
694
+ };
695
+ /**
696
+ * Fill opacity for the stacked areas. 0–1.
697
+ * @default 0.85 when stacked, 0.4 when overlapping
698
+ */
699
+ fillOpacity?: number;
700
+ /**
701
+ * Whether to render a stroke (line) on top of each area.
702
+ * @default false when stacked, true when overlapping
703
+ */
704
+ withStroke?: boolean;
705
+ /**
706
+ * Enable drag-to-zoom on the X axis. The user drags horizontally to
707
+ * select a range; the X axis rescales to that range. A small reset
708
+ * button appears in the top-right of the chart while zoomed.
709
+ */
710
+ zoomable?: boolean;
711
+ /**
712
+ * When using an interactive legend, controls whether the Y axis rescales
713
+ * to fit only the visible series. Defaults to `true`, matching the
714
+ * intuitive default for LineChart and BarChart. Set to `false` to pin
715
+ * the Y axis to the full data extent so toggling legend items off does
716
+ * not move the chart's baseline.
717
+ * @default true
718
+ */
719
+ rescaleYOnLegendToggle?: boolean;
720
+ children?: ReactNode;
751
721
  }
752
-
722
+ //#endregion
723
+ //#region src/charts/private/with-responsive/with-responsive.d.ts
753
724
  type ResponsiveConfig = {
754
- /**
755
- * The maximum width of the chart. Defaults to 1200.
756
- */
757
- maxWidth?: number;
758
- /**
759
- * The aspect ratio of the chart (height = width * aspectRatio).
760
- * When provided, height is calculated from width.
761
- * When omitted, the chart fills the parent container's height.
762
- */
763
- aspectRatio?: number;
764
- /**
765
- * Child render updates upon resize are delayed until debounceTime milliseconds after the last resize event is observed.
766
- */
767
- resizeDebounceTime?: number;
725
+ /**
726
+ * The maximum width of the chart. Defaults to 1200.
727
+ */
728
+ maxWidth?: number;
729
+ /**
730
+ * The aspect ratio of the chart (height = width * aspectRatio).
731
+ * When provided, height is calculated from width.
732
+ * When omitted, the chart fills the parent container's height.
733
+ */
734
+ aspectRatio?: number;
735
+ /**
736
+ * Child render updates upon resize are delayed until debounceTime milliseconds after the last resize event is observed.
737
+ */
738
+ resizeDebounceTime?: number;
768
739
  };
769
-
740
+ //#endregion
741
+ //#region src/charts/area-chart/area-chart.d.ts
770
742
  type AreaChartSubComponents = {
771
- Legend: typeof Legend;
743
+ Legend: typeof Legend;
772
744
  };
773
745
  type AreaChartBaseProps = Optional<AreaChartProps, 'width' | 'height' | 'size'>;
774
746
  type AreaChartComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & React.RefAttributes<SingleChartRef>> & AreaChartSubComponents;
775
747
  type AreaChartResponsiveComponent = React.ForwardRefExoticComponent<AreaChartBaseProps & ResponsiveConfig & React.RefAttributes<SingleChartRef>> & AreaChartSubComponents;
776
748
  declare const AreaChart: AreaChartComponent;
777
749
  declare const AreaChartResponsive: AreaChartResponsiveComponent;
778
-
750
+ //#endregion
751
+ //#region src/charts/bar-chart/bar-chart.d.ts
779
752
  interface BarChartProps extends BaseChartProps<SeriesData[]> {
780
- renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
781
- orientation?: 'horizontal' | 'vertical';
782
- withPatterns?: boolean;
783
- showZeroValues?: boolean;
784
- children?: ReactNode;
753
+ renderTooltip?: (params: RenderTooltipParams$1<DataPointDate>) => ReactNode;
754
+ orientation?: 'horizontal' | 'vertical';
755
+ withPatterns?: boolean;
756
+ showZeroValues?: boolean;
757
+ children?: ReactNode;
785
758
  }
786
759
  type BarChartBaseProps = Optional<BarChartProps, 'width' | 'height' | 'size'>;
787
760
  interface BarChartSubComponents {
788
- Legend: ComponentType<React.ComponentProps<typeof Legend>>;
761
+ Legend: ComponentType<React.ComponentProps<typeof Legend>>;
789
762
  }
790
763
  type BarChartComponent = FC<BarChartBaseProps> & BarChartSubComponents;
791
764
  type BarChartResponsiveComponent = FC<BarChartBaseProps & ResponsiveConfig> & BarChartSubComponents;
792
765
  declare const BarChart: BarChartComponent;
793
766
  declare const BarChartResponsive: BarChartResponsiveComponent;
794
-
767
+ //#endregion
768
+ //#region src/charts/bar-list-chart/bar-list-chart.d.ts
795
769
  interface BarListChartProps extends Exclude<BarChartProps, 'orientation' | 'size' | 'gridVisibility'> {
796
- options?: {
797
- /**
798
- * Scale for the y axis. Exclude the type property.
799
- */
800
- yScale: Omit<ScaleOptions, 'type'>;
801
- /**
802
- * Scale for the x axis. Exclude the type property.
803
- */
804
- xScale: Omit<ScaleOptions, 'type'>;
805
- /**
806
- * Formatter for the label.
807
- */
808
- labelFormatter?: (value: string) => string;
809
- /**
810
- * Formatter for the value.
811
- */
812
- valueFormatter?: (value: number) => string;
813
- /**
814
- * y offset of the label and value. Default is based on the number of series, automatically computed.
815
- */
816
- yOffset?: number;
817
- /**
818
- * x position of the label.
819
- */
820
- labelPosition?: number;
821
- /**
822
- * x position of the value.
823
- */
824
- valuePosition?: number;
825
- /**
826
- * Custom render function for the label.
827
- */
828
- labelComponent?: ComponentType<RenderLabelProps>;
829
- /**
830
- * Custom render function for the value.
831
- */
832
- valueComponent?: ComponentType<RenderValueProps>;
833
- };
834
- }
835
- interface RenderLabelProps {
836
- textProps: TextProps$1;
837
- x: number;
838
- y: number;
839
- label: string;
840
- formatter: (value: string) => string;
841
- }
842
- interface RenderValueProps {
843
- textProps: TextProps$1;
844
- x: number;
845
- y: number;
846
- value: number;
770
+ options?: {
847
771
  /**
848
- * Original data
772
+ * Scale for the y axis. Exclude the type property.
849
773
  */
850
- data: SeriesData[];
774
+ yScale: Omit<ScaleOptions, 'type'>;
775
+ /**
776
+ * Scale for the x axis. Exclude the type property.
777
+ */
778
+ xScale: Omit<ScaleOptions, 'type'>;
779
+ /**
780
+ * Formatter for the label.
781
+ */
782
+ labelFormatter?: (value: string) => string;
783
+ /**
784
+ * Formatter for the value.
785
+ */
786
+ valueFormatter?: (value: number) => string;
851
787
  /**
852
- * Index of the data point
788
+ * y offset of the label and value. Default is based on the number of series, automatically computed.
853
789
  */
854
- index: number;
855
- formatter: (value: number) => string;
790
+ yOffset?: number;
791
+ /**
792
+ * x position of the label.
793
+ */
794
+ labelPosition?: number;
795
+ /**
796
+ * x position of the value.
797
+ */
798
+ valuePosition?: number;
799
+ /**
800
+ * Custom render function for the label.
801
+ */
802
+ labelComponent?: ComponentType<RenderLabelProps>;
803
+ /**
804
+ * Custom render function for the value.
805
+ */
806
+ valueComponent?: ComponentType<RenderValueProps>;
807
+ };
808
+ }
809
+ interface RenderLabelProps {
810
+ textProps: TextProps$1;
811
+ x: number;
812
+ y: number;
813
+ label: string;
814
+ formatter: (value: string) => string;
815
+ }
816
+ interface RenderValueProps {
817
+ textProps: TextProps$1;
818
+ x: number;
819
+ y: number;
820
+ value: number;
821
+ /**
822
+ * Original data
823
+ */
824
+ data: SeriesData[];
825
+ /**
826
+ * Index of the data point
827
+ */
828
+ index: number;
829
+ formatter: (value: number) => string;
856
830
  }
857
831
  declare const BarListChart: FC<BarListChartProps>;
858
- declare const BarListChartResponsive: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<BarListChartProps, "width" | "height" | "size"> & {
859
- width?: number;
860
- height?: number;
861
- size?: number;
862
- } & ResponsiveConfig) => react_jsx_runtime.JSX.Element;
863
-
832
+ declare const BarListChartResponsive: ({
833
+ resizeDebounceTime,
834
+ maxWidth,
835
+ aspectRatio,
836
+ size,
837
+ width,
838
+ height,
839
+ ...chartProps
840
+ }: Omit<BarListChartProps, "size" | "width" | "height"> & {
841
+ width?: number;
842
+ height?: number;
843
+ size?: number;
844
+ } & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element;
845
+ //#endregion
846
+ //#region src/charts/conversion-funnel-chart/types.d.ts
864
847
  /**
865
848
  * Represents a single step in the conversion funnel
866
849
  */
867
850
  interface FunnelStep {
868
- /** Step identifier */
869
- id: string;
870
- /** Display label for the step */
871
- label: string;
872
- /** Conversion rate as percentage (0-100) */
873
- rate: number;
874
- /** Absolute count (optional, for tooltip/details) */
875
- count?: number;
851
+ /** Step identifier */
852
+ id: string;
853
+ /** Display label for the step */
854
+ label: string;
855
+ /** Conversion rate as percentage (0-100) */
856
+ rate: number;
857
+ /** Absolute count (optional, for tooltip/details) */
858
+ count?: number;
876
859
  }
877
860
  /**
878
861
  * Render prop for customizing step labels
879
862
  */
880
863
  interface StepLabelRenderProps {
881
- step: FunnelStep;
882
- index: number;
883
- className?: string;
864
+ step: FunnelStep;
865
+ index: number;
866
+ className?: string;
884
867
  }
885
868
  /**
886
869
  * Render prop for customizing step rates
887
870
  */
888
871
  interface StepRateRenderProps {
889
- step: FunnelStep;
890
- index: number;
891
- className?: string;
872
+ step: FunnelStep;
873
+ index: number;
874
+ className?: string;
892
875
  }
893
876
  /**
894
877
  * Render prop for customizing the entire main metric section
895
878
  */
896
879
  interface MainMetricRenderProps {
897
- mainRate: number;
898
- changeIndicator?: string;
899
- className?: string;
900
- changeColor?: string;
880
+ mainRate: number;
881
+ changeIndicator?: string;
882
+ className?: string;
883
+ changeColor?: string;
901
884
  }
902
885
  /**
903
886
  * Render prop for customizing tooltip content
904
887
  */
905
888
  interface TooltipRenderProps {
906
- step: FunnelStep;
907
- index: number;
908
- top: number;
909
- left: number;
910
- className?: string;
889
+ step: FunnelStep;
890
+ index: number;
891
+ top: number;
892
+ left: number;
893
+ className?: string;
911
894
  }
912
895
  /**
913
896
  * Props for the ConversionFunnelChart component
914
897
  */
915
898
  interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | 'animation'> {
916
- /** Main conversion rate to highlight */
917
- mainRate: number;
918
- /** Change indicator (e.g., +2%, -1.5%) */
919
- changeIndicator?: string;
920
- /** Array of funnel steps */
921
- steps: FunnelStep[];
922
- /** Whether the chart is in loading state */
923
- loading?: boolean;
924
- /** Height of the chart container. Accepts a number (pixels) or CSS string (e.g., "400px", "100%"). Falls back to style.height if set, otherwise defaults to "100%". */
925
- height?: string | number;
926
- /** Custom styling */
927
- style?: React.CSSProperties;
928
- /** Custom render function for step labels */
929
- renderStepLabel?: (props: StepLabelRenderProps) => React.ReactNode;
930
- /** Custom render function for step rates */
931
- renderStepRate?: (props: StepRateRenderProps) => React.ReactNode;
932
- /** Custom render function for the entire main metric section */
933
- renderMainMetric?: (props: MainMetricRenderProps) => React.ReactNode;
934
- /** Custom render function for tooltip content */
935
- renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
899
+ /** Main conversion rate to highlight */
900
+ mainRate: number;
901
+ /** Change indicator (e.g., +2%, -1.5%) */
902
+ changeIndicator?: string;
903
+ /** Array of funnel steps */
904
+ steps: FunnelStep[];
905
+ /** Whether the chart is in loading state */
906
+ loading?: boolean;
907
+ /** Height of the chart container. Accepts a number (pixels) or CSS string (e.g., "400px", "100%"). Falls back to style.height if set, otherwise defaults to "100%". */
908
+ height?: string | number;
909
+ /** Custom styling */
910
+ style?: React.CSSProperties;
911
+ /** Custom render function for step labels */
912
+ renderStepLabel?: (props: StepLabelRenderProps) => React.ReactNode;
913
+ /** Custom render function for step rates */
914
+ renderStepRate?: (props: StepRateRenderProps) => React.ReactNode;
915
+ /** Custom render function for the entire main metric section */
916
+ renderMainMetric?: (props: MainMetricRenderProps) => React.ReactNode;
917
+ /** Custom render function for tooltip content */
918
+ renderTooltip?: (props: TooltipRenderProps) => React.ReactNode;
936
919
  }
937
-
920
+ //#endregion
921
+ //#region src/charts/conversion-funnel-chart/conversion-funnel-chart.d.ts
938
922
  /**
939
923
  * ConversionFunnelChart component with provider wrapper
940
924
  *
@@ -942,7 +926,8 @@ interface ConversionFunnelChartProps extends Pick<BaseChartProps, 'className' |
942
926
  * @return JSX element representing the conversion funnel chart
943
927
  */
944
928
  declare const ConversionFunnelChartWithProvider: FC<ConversionFunnelChartProps>;
945
-
929
+ //#endregion
930
+ //#region src/charts/geo-chart/types.d.ts
946
931
  /**
947
932
  * Region to display on the map.
948
933
  * Use 'world' for global view or any ISO 3166-1 alpha-2 country code
@@ -957,113 +942,133 @@ type GeoRegion = 'world' | (string & {});
957
942
  */
958
943
  type GeoResolution = 'countries' | 'provinces' | 'metros';
959
944
  interface GeoChartProps extends Pick<BaseChartProps, 'className' | 'chartId' | 'width' | 'height'> {
960
- /**
961
- * Data in Google Charts native format for maximum flexibility.
962
- * First row contains column headers, subsequent rows contain data.
963
- *
964
- * Country identifiers can be either full country names or ISO 3166-1 alpha-2 codes
965
- * (e.g., 'United States' or 'US').
966
- */
967
- data: GeoData;
968
- /**
969
- * Region to display. Use 'world' for global view, 'US' for United States,
970
- * or any ISO 3166-1 alpha-2 country code.
971
- * @default 'world'
972
- */
973
- region?: GeoRegion;
974
- /**
975
- * Resolution level for the map.
976
- * - 'countries': Country-level (default for 'world')
977
- * - 'provinces': State/province level (use with specific region like 'US')
978
- * - 'metros': Metropolitan areas (US only)
979
- * @default 'countries'
980
- */
981
- resolution?: GeoResolution;
982
- /**
983
- * Optional render function for the loading placeholder.
984
- * Called while Google Charts is loading.
985
- */
986
- renderPlaceholder?: () => React.ReactNode;
945
+ /**
946
+ * Data in Google Charts native format for maximum flexibility.
947
+ * First row contains column headers, subsequent rows contain data.
948
+ *
949
+ * Country identifiers can be either full country names or ISO 3166-1 alpha-2 codes
950
+ * (e.g., 'United States' or 'US').
951
+ */
952
+ data: GeoData;
953
+ /**
954
+ * Region to display. Use 'world' for global view, 'US' for United States,
955
+ * or any ISO 3166-1 alpha-2 country code.
956
+ * @default 'world'
957
+ */
958
+ region?: GeoRegion;
959
+ /**
960
+ * Resolution level for the map.
961
+ * - 'countries': Country-level (default for 'world')
962
+ * - 'provinces': State/province level (use with specific region like 'US')
963
+ * - 'metros': Metropolitan areas (US only)
964
+ * @default 'countries'
965
+ */
966
+ resolution?: GeoResolution;
967
+ /**
968
+ * Optional render function for the loading placeholder.
969
+ * Called while Google Charts is loading.
970
+ */
971
+ renderPlaceholder?: () => React.ReactNode;
987
972
  }
988
-
973
+ //#endregion
974
+ //#region src/charts/geo-chart/geo-chart.d.ts
989
975
  declare const GeoChartWithProvider: FC<GeoChartProps>;
990
- declare const GeoChartResponsive: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<GeoChartProps, "width" | "height" | "size"> & {
991
- width?: number;
992
- height?: number;
993
- size?: number;
994
- } & ResponsiveConfig) => react_jsx_runtime.JSX.Element;
995
-
976
+ declare const GeoChartResponsive: ({
977
+ resizeDebounceTime,
978
+ maxWidth,
979
+ aspectRatio,
980
+ size,
981
+ width,
982
+ height,
983
+ ...chartProps
984
+ }: Omit<GeoChartProps, "size" | "width" | "height"> & {
985
+ width?: number;
986
+ height?: number;
987
+ size?: number;
988
+ } & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element;
989
+ //#endregion
990
+ //#region src/charts/leaderboard-chart/types.d.ts
996
991
  interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation'> {
997
- /**
998
- * Whether to show comparison data
999
- */
1000
- withComparison?: boolean;
1001
- /**
1002
- * Whether to overlay the label on top of bar
1003
- */
1004
- withOverlayLabel?: boolean;
1005
- /**
1006
- * Primary color for current period bars
1007
- */
1008
- primaryColor?: string;
1009
- /**
1010
- * Secondary color for comparison period bars
1011
- */
1012
- secondaryColor?: string;
1013
- /**
1014
- * Formatter for values
1015
- */
1016
- valueFormatter?: (value: number) => string;
1017
- /**
1018
- * Formatter for delta values
1019
- */
1020
- deltaFormatter?: (value: number) => string;
1021
- /**
1022
- * Whether the chart is in loading state
1023
- */
1024
- loading?: boolean;
1025
- /**
1026
- * Custom styling for the chart container
1027
- */
1028
- style?: React.CSSProperties & {
1029
- '--a8c--charts--leaderboard--bar--border-radius'?: string;
1030
- };
1031
- /**
1032
- * Custom labels for legend items
1033
- */
1034
- legendLabels?: {
1035
- /**
1036
- * Label for primary period data
1037
- */
1038
- primary?: string;
1039
- /**
1040
- * Label for comparison period data (only used when withComparison is true)
1041
- */
1042
- comparison?: string;
1043
- };
1044
- /**
1045
- * Child components for composition API
1046
- */
1047
- children?: ReactNode;
992
+ /**
993
+ * Whether to show comparison data
994
+ */
995
+ withComparison?: boolean;
996
+ /**
997
+ * Whether to overlay the label on top of bar
998
+ */
999
+ withOverlayLabel?: boolean;
1000
+ /**
1001
+ * Primary color for current period bars
1002
+ */
1003
+ primaryColor?: string;
1004
+ /**
1005
+ * Secondary color for comparison period bars
1006
+ */
1007
+ secondaryColor?: string;
1008
+ /**
1009
+ * Formatter for values
1010
+ */
1011
+ valueFormatter?: (value: number) => string;
1012
+ /**
1013
+ * Formatter for delta values
1014
+ */
1015
+ deltaFormatter?: (value: number) => string;
1016
+ /**
1017
+ * Whether the chart is in loading state
1018
+ */
1019
+ loading?: boolean;
1020
+ /**
1021
+ * Custom styling for the chart container
1022
+ */
1023
+ style?: React.CSSProperties & {
1024
+ '--a8c--charts--leaderboard--bar--border-radius'?: string;
1025
+ };
1026
+ /**
1027
+ * Custom labels for legend items
1028
+ */
1029
+ legendLabels?: {
1030
+ /**
1031
+ * Label for primary period data
1032
+ */
1033
+ primary?: string;
1034
+ /**
1035
+ * Label for comparison period data (only used when withComparison is true)
1036
+ */
1037
+ comparison?: string;
1038
+ };
1039
+ /**
1040
+ * Child components for composition API
1041
+ */
1042
+ children?: ReactNode;
1048
1043
  }
1049
-
1044
+ //#endregion
1045
+ //#region src/charts/leaderboard-chart/leaderboard-chart.d.ts
1050
1046
  declare const LeaderboardChart: FC<LeaderboardChartProps> & {
1051
- Legend: react.ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
1052
- items?: BaseLegendItem[];
1053
- chartId?: string;
1054
- } & react.RefAttributes<HTMLDivElement>>;
1047
+ Legend: import("react").ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
1048
+ items?: BaseLegendItem[];
1049
+ chartId?: string;
1050
+ } & import("react").RefAttributes<HTMLDivElement>>;
1055
1051
  };
1056
- declare const LeaderboardChartResponsive: (({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<LeaderboardChartProps, "width" | "height" | "size"> & {
1057
- width?: number;
1058
- height?: number;
1059
- size?: number;
1060
- } & ResponsiveConfig) => react_jsx_runtime.JSX.Element) & {
1061
- Legend: react.ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
1062
- items?: BaseLegendItem[];
1063
- chartId?: string;
1064
- } & react.RefAttributes<HTMLDivElement>>;
1052
+ declare const LeaderboardChartResponsive: (({
1053
+ resizeDebounceTime,
1054
+ maxWidth,
1055
+ aspectRatio,
1056
+ size,
1057
+ width,
1058
+ height,
1059
+ ...chartProps
1060
+ }: Omit<LeaderboardChartProps, "size" | "width" | "height"> & {
1061
+ width?: number;
1062
+ height?: number;
1063
+ size?: number;
1064
+ } & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element) & {
1065
+ Legend: import("react").ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
1066
+ items?: BaseLegendItem[];
1067
+ chartId?: string;
1068
+ } & import("react").RefAttributes<HTMLDivElement>>;
1065
1069
  };
1066
-
1070
+ //#endregion
1071
+ //#region src/utils/date-parsing.d.ts
1067
1072
  /**
1068
1073
  * @file Date parsing utilities using date-fns for local timezone handling
1069
1074
  *
@@ -1121,15 +1126,16 @@ declare const LeaderboardChartResponsive: (({ resizeDebounceTime, maxWidth, aspe
1121
1126
  * @return {Date} A Date object representing the parsed date in local timezone, or an invalid Date if parsing fails
1122
1127
  */
1123
1128
  declare const parseAsLocalDate: (dateString: string) => Date;
1124
-
1129
+ //#endregion
1130
+ //#region src/utils/format-metric-value.d.ts
1125
1131
  /**
1126
1132
  * Types for formatMetricValue
1127
1133
  */
1128
1134
  type MetricValueType = 'number' | 'average' | 'currency';
1129
1135
  type FormatMetricValueOptions = {
1130
- decimals?: number;
1131
- useMultipliers?: boolean;
1132
- signDisplay?: Intl.NumberFormatOptions['signDisplay'];
1136
+ decimals?: number;
1137
+ useMultipliers?: boolean;
1138
+ signDisplay?: Intl.NumberFormatOptions['signDisplay'];
1133
1139
  };
1134
1140
  /**
1135
1141
  * Format a numeric metric value based on type, precision and scale.
@@ -1143,8 +1149,13 @@ type FormatMetricValueOptions = {
1143
1149
  * @param options.signDisplay - Controls when to display the sign (auto, always, never, exceptZero)
1144
1150
  * @return Formatted string
1145
1151
  */
1146
- declare const formatMetricValue: (value: string | number, type?: MetricValueType, { decimals, useMultipliers, signDisplay }?: FormatMetricValueOptions) => string;
1147
-
1152
+ declare const formatMetricValue: (value: string | number, type?: MetricValueType, {
1153
+ decimals,
1154
+ useMultipliers,
1155
+ signDisplay
1156
+ }?: FormatMetricValueOptions) => string;
1157
+ //#endregion
1158
+ //#region src/utils/format-percentage.d.ts
1148
1159
  /**
1149
1160
  * Format a percentage value with smart decimal handling.
1150
1161
  * Uses `@automattic/number-formatters` for consistent formatting.
@@ -1154,7 +1165,8 @@ declare const formatMetricValue: (value: string | number, type?: MetricValueType
1154
1165
  * @return Formatted percentage string (e.g., "30%", "30.1%", "30.25%")
1155
1166
  */
1156
1167
  declare const formatPercentage: (value: number) => string;
1157
-
1168
+ //#endregion
1169
+ //#region src/utils/merge-themes.d.ts
1158
1170
  /**
1159
1171
  * Merges chart themes with proper precedence.
1160
1172
  * The second theme (override) takes precedence over the first theme (base).
@@ -1165,7 +1177,8 @@ declare const formatPercentage: (value: number) => string;
1165
1177
  */
1166
1178
  declare function mergeThemes(baseTheme: CompleteChartTheme, overrideTheme: Partial<ChartTheme>): CompleteChartTheme;
1167
1179
  declare function mergeThemes(baseTheme: ChartTheme, overrideTheme: Partial<ChartTheme>): ChartTheme;
1168
-
1180
+ //#endregion
1181
+ //#region src/utils/color-utils.d.ts
1169
1182
  /**
1170
1183
  * Check if a value is a valid 6-digit hex color
1171
1184
  * @param hex - The value to check
@@ -1230,7 +1243,8 @@ declare const normalizeColorToHex: (color: string, element?: HTMLElement | null,
1230
1243
  * @throws {Error} if hex string is malformed
1231
1244
  */
1232
1245
  declare const lightenHexColor: (hex: string, blend: number) => string;
1233
-
1246
+ //#endregion
1247
+ //#region src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.d.ts
1234
1248
  /**
1235
1249
  * Hook to create legend items from leaderboard data
1236
1250
  * @param root0 - Configuration object
@@ -1244,43 +1258,54 @@ declare const lightenHexColor: (hex: string, blend: number) => string;
1244
1258
  * @param root0.legendLabels.comparison - Label for comparison period data
1245
1259
  * @return Array of legend items for the leaderboard chart
1246
1260
  */
1247
- declare function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withComparison, withOverlayLabel, legendLabels, }: {
1248
- data: LeaderboardEntry[];
1249
- primaryColor?: string;
1250
- secondaryColor?: string;
1251
- withComparison: boolean;
1252
- withOverlayLabel: boolean;
1253
- legendLabels?: {
1254
- primary?: string;
1255
- comparison?: string;
1256
- };
1261
+ declare function useLeaderboardLegendItems({
1262
+ data,
1263
+ primaryColor,
1264
+ secondaryColor,
1265
+ withComparison,
1266
+ withOverlayLabel,
1267
+ legendLabels
1268
+ }: {
1269
+ data: LeaderboardEntry[];
1270
+ primaryColor?: string;
1271
+ secondaryColor?: string;
1272
+ withComparison: boolean;
1273
+ withOverlayLabel: boolean;
1274
+ legendLabels?: {
1275
+ primary?: string;
1276
+ comparison?: string;
1277
+ };
1257
1278
  }): BaseLegendItem[];
1258
-
1279
+ //#endregion
1280
+ //#region src/charts/line-chart/private/line-chart-annotations-overlay.d.ts
1259
1281
  interface LineChartAnnotationsProps {
1260
- children?: ReactNode;
1282
+ children?: ReactNode;
1261
1283
  }
1262
1284
  declare const LineChartAnnotationsOverlay: FC<LineChartAnnotationsProps>;
1263
-
1285
+ //#endregion
1286
+ //#region src/charts/line-chart/private/line-chart-annotation.d.ts
1264
1287
  declare const LineChartAnnotation: FC<LineChartAnnotationProps>;
1265
-
1288
+ //#endregion
1289
+ //#region src/charts/line-chart/line-chart.d.ts
1266
1290
  type LineChartAnnotationComponents = {
1267
- AnnotationsOverlay: typeof LineChartAnnotationsOverlay;
1268
- Annotation: typeof LineChartAnnotation;
1269
- Legend: typeof Legend;
1291
+ AnnotationsOverlay: typeof LineChartAnnotationsOverlay;
1292
+ Annotation: typeof LineChartAnnotation;
1293
+ Legend: typeof Legend;
1270
1294
  };
1271
1295
  type LineChartBaseProps = Optional<LineChartProps, 'width' | 'height' | 'size'>;
1272
1296
  type LineChartComponent = React.ForwardRefExoticComponent<LineChartBaseProps & React.RefAttributes<SingleChartRef>> & LineChartAnnotationComponents;
1273
1297
  type LineChartResponsiveComponent = React.ForwardRefExoticComponent<LineChartBaseProps & ResponsiveConfig & React.RefAttributes<SingleChartRef>> & LineChartAnnotationComponents;
1274
1298
  declare const LineChart: LineChartComponent;
1275
1299
  declare const LineChartResponsive: LineChartResponsiveComponent;
1276
-
1300
+ //#endregion
1301
+ //#region src/charts/private/chart-composition/types.d.ts
1277
1302
  /**
1278
1303
  * Base interface for chart subcomponents in the composition API
1279
1304
  */
1280
1305
  interface BaseChartSubComponents {
1281
- Legend: ComponentType<React.ComponentProps<typeof Legend>>;
1282
- SVG: FC<PropsWithChildren>;
1283
- HTML: FC<PropsWithChildren>;
1306
+ Legend: ComponentType<React.ComponentProps<typeof Legend>>;
1307
+ SVG: FC<PropsWithChildren>;
1308
+ HTML: FC<PropsWithChildren>;
1284
1309
  }
1285
1310
  /**
1286
1311
  * Type helper for creating chart components with composition API
@@ -1288,135 +1313,137 @@ interface BaseChartSubComponents {
1288
1313
  * @template TSubComponents - Additional subcomponents beyond the base ones
1289
1314
  */
1290
1315
  type ChartComponentWithComposition<TProps, TSubComponents extends BaseChartSubComponents = BaseChartSubComponents> = FC<TProps> & TSubComponents;
1291
-
1316
+ //#endregion
1317
+ //#region src/charts/pie-chart/pie-chart.d.ts
1292
1318
  /**
1293
1319
  * Parameters passed to the renderTooltip function for pie charts.
1294
1320
  */
1295
1321
  type PieChartRenderTooltipParams = {
1296
- /**
1297
- * The data point being hovered, including label, value, and calculated percentage.
1298
- */
1299
- tooltipData: DataPointPercentageCalculated;
1322
+ /**
1323
+ * The data point being hovered, including label, value, and calculated percentage.
1324
+ */
1325
+ tooltipData: DataPointPercentageCalculated;
1300
1326
  };
1301
1327
  interface PieChartProps extends BaseChartProps<DataPointPercentage[]> {
1302
- /**
1303
- * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.
1304
- */
1305
- innerRadius?: number;
1306
- /**
1307
- * Add padding to the chart
1308
- */
1309
- padding?: number;
1310
- /**
1311
- * Thickness of the pie chart.
1312
- * A value between 0 and 1, where 0 means no thickness
1313
- * and 1 means the maximum thickness.
1314
- */
1315
- thickness?: number;
1316
- /**
1317
- * Scale of the gap between groups in the pie chart
1318
- * A value between 0 and 1, where 0 means no gap.
1319
- */
1320
- gapScale?: number;
1321
- /**
1322
- * Scale of the corner radius for the pie chart segments.
1323
- * A value between 0 and 1, where 0 means no corner radius.
1324
- */
1325
- cornerScale?: number;
1326
- /**
1327
- * Whether to show labels on pie segments. Defaults to true.
1328
- */
1329
- showLabels?: boolean;
1330
- /**
1331
- * What type of value to display in the legend when showValues is true.
1332
- * - 'percentage': Shows percentage values (e.g., "23%") [default]
1333
- * - 'value': Shows raw numeric values (e.g., "30000")
1334
- * - 'valueDisplay': Shows formatted values (e.g., "30K")
1335
- * - 'none': Shows no values, only labels
1336
- */
1337
- legendValueDisplay?: LegendValueDisplay;
1338
- /**
1339
- * Use the children prop to render additional elements on the chart.
1340
- */
1341
- children?: ReactNode;
1342
- /**
1343
- * Horizontal offset for tooltip positioning in pixels (default: 0)
1344
- */
1345
- tooltipOffsetX?: number;
1346
- /**
1347
- * Vertical offset for tooltip positioning in pixels (default: -15)
1348
- */
1349
- tooltipOffsetY?: number;
1350
- /**
1351
- * Custom render function for tooltip content.
1352
- * When provided, replaces the default BaseTooltip with custom content.
1353
- */
1354
- renderTooltip?: (params: PieChartRenderTooltipParams) => ReactNode;
1328
+ /**
1329
+ * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.
1330
+ */
1331
+ innerRadius?: number;
1332
+ /**
1333
+ * Add padding to the chart
1334
+ */
1335
+ padding?: number;
1336
+ /**
1337
+ * Thickness of the pie chart.
1338
+ * A value between 0 and 1, where 0 means no thickness
1339
+ * and 1 means the maximum thickness.
1340
+ */
1341
+ thickness?: number;
1342
+ /**
1343
+ * Scale of the gap between groups in the pie chart
1344
+ * A value between 0 and 1, where 0 means no gap.
1345
+ */
1346
+ gapScale?: number;
1347
+ /**
1348
+ * Scale of the corner radius for the pie chart segments.
1349
+ * A value between 0 and 1, where 0 means no corner radius.
1350
+ */
1351
+ cornerScale?: number;
1352
+ /**
1353
+ * Whether to show labels on pie segments. Defaults to true.
1354
+ */
1355
+ showLabels?: boolean;
1356
+ /**
1357
+ * What type of value to display in the legend when showValues is true.
1358
+ * - 'percentage': Shows percentage values (e.g., "23%") [default]
1359
+ * - 'value': Shows raw numeric values (e.g., "30000")
1360
+ * - 'valueDisplay': Shows formatted values (e.g., "30K")
1361
+ * - 'none': Shows no values, only labels
1362
+ */
1363
+ legendValueDisplay?: LegendValueDisplay;
1364
+ /**
1365
+ * Use the children prop to render additional elements on the chart.
1366
+ */
1367
+ children?: ReactNode;
1368
+ /**
1369
+ * Horizontal offset for tooltip positioning in pixels (default: 0)
1370
+ */
1371
+ tooltipOffsetX?: number;
1372
+ /**
1373
+ * Vertical offset for tooltip positioning in pixels (default: -15)
1374
+ */
1375
+ tooltipOffsetY?: number;
1376
+ /**
1377
+ * Custom render function for tooltip content.
1378
+ * When provided, replaces the default BaseTooltip with custom content.
1379
+ */
1380
+ renderTooltip?: (params: PieChartRenderTooltipParams) => ReactNode;
1355
1381
  }
1356
1382
  type PieChartBaseProps = Optional<PieChartProps, 'size'>;
1357
1383
  type PieChartComponent = ChartComponentWithComposition<PieChartBaseProps>;
1358
1384
  type PieChartResponsiveComponent = ChartComponentWithComposition<PieChartBaseProps & ResponsiveConfig>;
1359
1385
  declare const PieChart: PieChartComponent;
1360
1386
  declare const PieChartResponsive: PieChartResponsiveComponent;
1361
-
1387
+ //#endregion
1388
+ //#region src/charts/pie-semi-circle-chart/pie-semi-circle-chart.d.ts
1362
1389
  /**
1363
1390
  * Parameters passed to the renderTooltip function for semi-circle charts.
1364
1391
  */
1365
1392
  type PieSemiCircleChartRenderTooltipParams = {
1366
- /**
1367
- * The data point being hovered, including label, value, and calculated percentage.
1368
- */
1369
- tooltipData: DataPointPercentageCalculated;
1393
+ /**
1394
+ * The data point being hovered, including label, value, and calculated percentage.
1395
+ */
1396
+ tooltipData: DataPointPercentageCalculated;
1370
1397
  };
1371
1398
  interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]> {
1372
- /**
1373
- * Explicit width of the chart container in pixels.
1374
- * When omitted, the chart fills its parent container's width.
1375
- * The chart always maintains a 2:1 width-to-height ratio, constrained by available space.
1376
- */
1377
- width?: number;
1378
- /**
1379
- * Thickness of the pie chart. A value between 0 and 1
1380
- */
1381
- thickness?: number;
1382
- /**
1383
- * Direction of chart rendering
1384
- * true for clockwise, false for counter-clockwise
1385
- */
1386
- clockwise?: boolean;
1387
- /**
1388
- * Label text to display above the chart
1389
- */
1390
- label?: string;
1391
- /**
1392
- * Note text to display below the label
1393
- */
1394
- note?: string;
1395
- /**
1396
- * Use the children prop to render additional elements on the chart.
1397
- */
1398
- children?: ReactNode;
1399
- /**
1400
- * What type of value to display in the legend when showValues is true.
1401
- * - 'percentage': Shows percentage values (e.g., "23%") [default]
1402
- * - 'value': Shows raw numeric values (e.g., "30000")
1403
- * - 'valueDisplay': Shows formatted values (e.g., "30K")
1404
- * - 'none': Shows no values, only labels
1405
- */
1406
- legendValueDisplay?: LegendValueDisplay;
1407
- /**
1408
- * Horizontal offset for tooltip positioning in pixels (default: 0)
1409
- */
1410
- tooltipOffsetX?: number;
1411
- /**
1412
- * Vertical offset for tooltip positioning in pixels (default: -15)
1413
- */
1414
- tooltipOffsetY?: number;
1415
- /**
1416
- * Custom render function for tooltip content.
1417
- * When provided, replaces the default BaseTooltip with custom content.
1418
- */
1419
- renderTooltip?: (params: PieSemiCircleChartRenderTooltipParams) => ReactNode;
1399
+ /**
1400
+ * Explicit width of the chart container in pixels.
1401
+ * When omitted, the chart fills its parent container's width.
1402
+ * The chart always maintains a 2:1 width-to-height ratio, constrained by available space.
1403
+ */
1404
+ width?: number;
1405
+ /**
1406
+ * Thickness of the pie chart. A value between 0 and 1
1407
+ */
1408
+ thickness?: number;
1409
+ /**
1410
+ * Direction of chart rendering
1411
+ * true for clockwise, false for counter-clockwise
1412
+ */
1413
+ clockwise?: boolean;
1414
+ /**
1415
+ * Label text to display above the chart
1416
+ */
1417
+ label?: string;
1418
+ /**
1419
+ * Note text to display below the label
1420
+ */
1421
+ note?: string;
1422
+ /**
1423
+ * Use the children prop to render additional elements on the chart.
1424
+ */
1425
+ children?: ReactNode;
1426
+ /**
1427
+ * What type of value to display in the legend when showValues is true.
1428
+ * - 'percentage': Shows percentage values (e.g., "23%") [default]
1429
+ * - 'value': Shows raw numeric values (e.g., "30000")
1430
+ * - 'valueDisplay': Shows formatted values (e.g., "30K")
1431
+ * - 'none': Shows no values, only labels
1432
+ */
1433
+ legendValueDisplay?: LegendValueDisplay;
1434
+ /**
1435
+ * Horizontal offset for tooltip positioning in pixels (default: 0)
1436
+ */
1437
+ tooltipOffsetX?: number;
1438
+ /**
1439
+ * Vertical offset for tooltip positioning in pixels (default: -15)
1440
+ */
1441
+ tooltipOffsetY?: number;
1442
+ /**
1443
+ * Custom render function for tooltip content.
1444
+ * When provided, replaces the default BaseTooltip with custom content.
1445
+ */
1446
+ renderTooltip?: (params: PieSemiCircleChartRenderTooltipParams) => ReactNode;
1420
1447
  }
1421
1448
  type PieSemiCircleChartBaseProps = Optional<PieSemiCircleChartProps, 'width'>;
1422
1449
  type PieSemiCircleChartComponent = ChartComponentWithComposition<PieSemiCircleChartBaseProps>;
@@ -1424,95 +1451,97 @@ type PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<PieSe
1424
1451
  type ArcData = PieArcDatum<DataPointPercentageCalculated>;
1425
1452
  declare const PieSemiCircleChart: PieSemiCircleChartComponent;
1426
1453
  declare const PieSemiCircleChartResponsive: PieSemiCircleChartResponsiveComponent;
1427
-
1454
+ //#endregion
1455
+ //#region src/charts/sparkline/types.d.ts
1428
1456
  type SparklineDataPoint = number;
1429
1457
  type GradientConfig = {
1430
- /**
1431
- * Start color for gradient (defaults to color prop)
1432
- */
1433
- from?: string;
1434
- /**
1435
- * End color for gradient (defaults to theme backgroundColor)
1436
- */
1437
- to?: string;
1438
- /**
1439
- * Start opacity (0-1)
1440
- * @default 0.5
1441
- */
1442
- fromOpacity?: number;
1443
- /**
1444
- * End opacity (0-1)
1445
- * @default 0.0
1446
- */
1447
- toOpacity?: number;
1458
+ /**
1459
+ * Start color for gradient (defaults to color prop)
1460
+ */
1461
+ from?: string;
1462
+ /**
1463
+ * End color for gradient (defaults to theme backgroundColor)
1464
+ */
1465
+ to?: string;
1466
+ /**
1467
+ * Start opacity (0-1)
1468
+ * @default 0.5
1469
+ */
1470
+ fromOpacity?: number;
1471
+ /**
1472
+ * End opacity (0-1)
1473
+ * @default 0.0
1474
+ */
1475
+ toOpacity?: number;
1448
1476
  };
1449
1477
  interface SparklineProps {
1450
- /**
1451
- * Array of numeric values to plot
1452
- * @example [10, 25, 15, 30, 22, 35]
1453
- */
1454
- data: SparklineDataPoint[];
1455
- /**
1456
- * Width of the sparkline in pixels
1457
- * @default 100
1458
- */
1459
- width?: number;
1460
- /**
1461
- * Height of the sparkline in pixels
1462
- * @default 40
1463
- */
1464
- height?: number;
1465
- /**
1466
- * Size (used by responsive variant, equivalent to width for square charts)
1467
- */
1468
- size?: number;
1469
- /**
1470
- * Color for the line stroke (hex or CSS color)
1471
- * @default Theme color (first color in theme.colors array)
1472
- */
1473
- color?: string;
1474
- /**
1475
- * Line stroke width in pixels
1476
- * @default 1
1477
- */
1478
- strokeWidth?: number;
1479
- /**
1480
- * Whether to render the gradient fill beneath the line
1481
- * @default true
1482
- */
1483
- withGradientFill?: boolean;
1484
- /**
1485
- * Gradient configuration for area fill
1486
- * If not provided, uses color prop with default opacity values
1487
- */
1488
- gradient?: GradientConfig;
1489
- /**
1490
- * Additional CSS class name
1491
- */
1492
- className?: string;
1493
- /**
1494
- * Chart ID for unique gradient/element identification
1495
- */
1496
- chartId?: string;
1497
- /**
1498
- * Margin around the chart
1499
- * @default { top: 2, right: 2, bottom: 2, left: 2 }
1500
- */
1501
- margin?: {
1502
- top?: number;
1503
- right?: number;
1504
- bottom?: number;
1505
- left?: number;
1506
- };
1507
- /**
1508
- * Enable entry animation on initial render
1509
- * Creates a rising effect where the line scales up from the bottom.
1510
- * Automatically respects user's prefers-reduced-motion system setting.
1511
- * @default false
1512
- */
1513
- animation?: boolean;
1478
+ /**
1479
+ * Array of numeric values to plot
1480
+ * @example [10, 25, 15, 30, 22, 35]
1481
+ */
1482
+ data: SparklineDataPoint[];
1483
+ /**
1484
+ * Width of the sparkline in pixels
1485
+ * @default 100
1486
+ */
1487
+ width?: number;
1488
+ /**
1489
+ * Height of the sparkline in pixels
1490
+ * @default 40
1491
+ */
1492
+ height?: number;
1493
+ /**
1494
+ * Size (used by responsive variant, equivalent to width for square charts)
1495
+ */
1496
+ size?: number;
1497
+ /**
1498
+ * Color for the line stroke (hex or CSS color)
1499
+ * @default Theme color (first color in theme.colors array)
1500
+ */
1501
+ color?: string;
1502
+ /**
1503
+ * Line stroke width in pixels
1504
+ * @default 1
1505
+ */
1506
+ strokeWidth?: number;
1507
+ /**
1508
+ * Whether to render the gradient fill beneath the line
1509
+ * @default true
1510
+ */
1511
+ withGradientFill?: boolean;
1512
+ /**
1513
+ * Gradient configuration for area fill
1514
+ * If not provided, uses color prop with default opacity values
1515
+ */
1516
+ gradient?: GradientConfig;
1517
+ /**
1518
+ * Additional CSS class name
1519
+ */
1520
+ className?: string;
1521
+ /**
1522
+ * Chart ID for unique gradient/element identification
1523
+ */
1524
+ chartId?: string;
1525
+ /**
1526
+ * Margin around the chart
1527
+ * @default { top: 2, right: 2, bottom: 2, left: 2 }
1528
+ */
1529
+ margin?: {
1530
+ top?: number;
1531
+ right?: number;
1532
+ bottom?: number;
1533
+ left?: number;
1534
+ };
1535
+ /**
1536
+ * Enable entry animation on initial render
1537
+ * Creates a rising effect where the line scales up from the bottom.
1538
+ * Automatically respects user's prefers-reduced-motion system setting.
1539
+ * @default false
1540
+ */
1541
+ animation?: boolean;
1514
1542
  }
1515
-
1543
+ //#endregion
1544
+ //#region src/charts/sparkline/sparkline.d.ts
1516
1545
  /**
1517
1546
  * Sparkline - A minimal line chart for inline data visualization.
1518
1547
  *
@@ -1523,86 +1552,107 @@ interface SparklineProps {
1523
1552
  * This component is built on top of LineChart with preconfigured settings
1524
1553
  * for minimal display (no axes, grid, tooltips, or legend).
1525
1554
  */
1526
- declare const SparklineUnresponsive: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<HTMLDivElement>>;
1555
+ declare const SparklineUnresponsive: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;
1527
1556
  /**
1528
1557
  * Responsive Sparkline chart component
1529
1558
  */
1530
- declare const Sparkline: ({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<SparklineProps, "width" | "height" | "size"> & {
1531
- width?: number;
1532
- height?: number;
1533
- size?: number;
1534
- } & ResponsiveConfig) => react_jsx_runtime.JSX.Element;
1535
-
1559
+ declare const Sparkline: ({
1560
+ resizeDebounceTime,
1561
+ maxWidth,
1562
+ aspectRatio,
1563
+ size,
1564
+ width,
1565
+ height,
1566
+ ...chartProps
1567
+ }: Omit<SparklineProps, "size" | "width" | "height"> & {
1568
+ width?: number;
1569
+ height?: number;
1570
+ size?: number;
1571
+ } & ResponsiveConfig) => import("react/jsx-runtime").JSX.Element;
1572
+ //#endregion
1573
+ //#region src/components/tooltip/base-tooltip.d.ts
1536
1574
  type TooltipData = {
1537
- label: string;
1538
- value: number;
1539
- valueDisplay?: string;
1575
+ label: string;
1576
+ value: number;
1577
+ valueDisplay?: string;
1540
1578
  };
1541
1579
  type TooltipComponentProps = {
1542
- data: TooltipData;
1543
- className?: string;
1580
+ data: TooltipData;
1581
+ className?: string;
1544
1582
  };
1545
1583
  type TooltipCommonProps = {
1546
- top: number;
1547
- left: number;
1548
- style?: CSSProperties;
1549
- className?: string;
1550
- /**
1551
- * Whether to render the tooltip container div. When false, only renders the content.
1552
- * Useful when the tooltip is rendered inside a portal or custom container.
1553
- * @default true
1554
- */
1555
- renderContainer?: boolean;
1584
+ top: number;
1585
+ left: number;
1586
+ style?: CSSProperties;
1587
+ className?: string;
1588
+ /**
1589
+ * Whether to render the tooltip container div. When false, only renders the content.
1590
+ * Useful when the tooltip is rendered inside a portal or custom container.
1591
+ * @default true
1592
+ */
1593
+ renderContainer?: boolean;
1556
1594
  };
1557
1595
  type DefaultDataTooltip = {
1558
- data: TooltipData;
1559
- component?: ComponentType<TooltipComponentProps>;
1560
- children?: never;
1596
+ data: TooltipData;
1597
+ component?: ComponentType<TooltipComponentProps>;
1598
+ children?: never;
1561
1599
  };
1562
1600
  type CustomTooltip = {
1563
- children: ReactNode;
1564
- data?: never;
1565
- component?: never;
1601
+ children: ReactNode;
1602
+ data?: never;
1603
+ component?: never;
1566
1604
  };
1567
1605
  type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
1568
- declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer, }: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
1569
-
1606
+ declare const BaseTooltip: ({
1607
+ data,
1608
+ top,
1609
+ left,
1610
+ component: Component,
1611
+ children,
1612
+ className,
1613
+ style,
1614
+ renderContainer
1615
+ }: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
1616
+ //#endregion
1617
+ //#region src/components/tooltip/accessible-tooltip.d.ts
1570
1618
  type FlattenedTooltipData = {
1571
- datum: DataPointDate;
1572
- seriesLabel: string;
1573
- seriesIndex: number;
1574
- dataPointIndex: number;
1619
+ datum: DataPointDate;
1620
+ seriesLabel: string;
1621
+ seriesIndex: number;
1622
+ dataPointIndex: number;
1575
1623
  };
1576
- interface AccessibleTooltipProps extends Omit<TooltipProps$1<DataPointDate>, 'renderTooltip'> {
1577
- renderTooltip?: (params: RenderTooltipParams<DataPointDate>) => ReactNode;
1578
- selectedIndex?: number | undefined;
1579
- tooltipRef?: (element: HTMLDivElement | null) => void;
1580
- keyboardFocusedClassName?: string;
1581
- /**
1582
- * Flattened tooltip data prepared by parent component
1583
- * Each index corresponds to one tooltip to show
1584
- */
1585
- tooltipData?: FlattenedTooltipData[];
1586
- /**
1587
- * For line charts: series data to show all series at selected data point
1588
- * When provided, shows all series instead of individual tooltips
1589
- */
1590
- series?: SeriesData[];
1591
- /**
1592
- * Whether to combine tooltip information from multiple series into a single tooltip. This is useful for line charts.
1593
- * Or to show individual tooltips for each series. This is useful for bar charts.
1594
- */
1595
- mode?: 'individual' | 'group';
1624
+ interface AccessibleTooltipProps extends Omit<BaseTooltipProps$1<DataPointDate>, 'renderTooltip'> {
1625
+ renderTooltip?: (params: RenderTooltipParams$1<DataPointDate>) => ReactNode;
1626
+ selectedIndex?: number | undefined;
1627
+ tooltipRef?: (element: HTMLDivElement | null) => void;
1628
+ keyboardFocusedClassName?: string;
1629
+ /**
1630
+ * Flattened tooltip data prepared by parent component
1631
+ * Each index corresponds to one tooltip to show
1632
+ */
1633
+ tooltipData?: FlattenedTooltipData[];
1634
+ /**
1635
+ * For line charts: series data to show all series at selected data point
1636
+ * When provided, shows all series instead of individual tooltips
1637
+ */
1638
+ series?: SeriesData[];
1639
+ /**
1640
+ * Whether to combine tooltip information from multiple series into a single tooltip. This is useful for line charts.
1641
+ * Or to show individual tooltips for each series. This is useful for bar charts.
1642
+ */
1643
+ mode?: 'individual' | 'group';
1596
1644
  }
1597
1645
  declare const AccessibleTooltip: React.FC<AccessibleTooltipProps>;
1598
-
1646
+ //#endregion
1647
+ //#region src/components/tooltip/types.d.ts
1599
1648
  type TooltipProps = {
1600
- data: {
1601
- label: string;
1602
- value: number;
1603
- };
1649
+ data: {
1650
+ label: string;
1651
+ value: number;
1652
+ };
1604
1653
  };
1605
-
1654
+ //#endregion
1655
+ //#region src/components/trend-indicator/types.d.ts
1606
1656
  /**
1607
1657
  * The direction of the trend
1608
1658
  */
@@ -1611,29 +1661,30 @@ type TrendDirection = 'up' | 'down' | 'neutral';
1611
1661
  * Props for the TrendIndicator component
1612
1662
  */
1613
1663
  type TrendIndicatorProps = {
1614
- /**
1615
- * The direction of the trend (up, down, or neutral)
1616
- */
1617
- direction: TrendDirection;
1618
- /**
1619
- * The value to display (e.g., "14%", "+$500", "2.5k")
1620
- */
1621
- value: string | number;
1622
- /**
1623
- * Additional CSS class name
1624
- */
1625
- className?: string;
1626
- /**
1627
- * Inline styles
1628
- */
1629
- style?: CSSProperties;
1630
- /**
1631
- * Whether to show the directional icon
1632
- * @default true
1633
- */
1634
- showIcon?: boolean;
1664
+ /**
1665
+ * The direction of the trend (up, down, or neutral)
1666
+ */
1667
+ direction: TrendDirection;
1668
+ /**
1669
+ * The value to display (e.g., "14%", "+$500", "2.5k")
1670
+ */
1671
+ value: string | number;
1672
+ /**
1673
+ * Additional CSS class name
1674
+ */
1675
+ className?: string;
1676
+ /**
1677
+ * Inline styles
1678
+ */
1679
+ style?: CSSProperties;
1680
+ /**
1681
+ * Whether to show the directional icon
1682
+ * @default true
1683
+ */
1684
+ showIcon?: boolean;
1635
1685
  };
1636
-
1686
+ //#endregion
1687
+ //#region src/components/trend-indicator/trend-indicator.d.ts
1637
1688
  /**
1638
1689
  * TrendIndicator displays a directional trend with a value.
1639
1690
  * Used to show percentage changes or growth metrics.
@@ -1641,57 +1692,69 @@ type TrendIndicatorProps = {
1641
1692
  * @param {TrendIndicatorProps} props - Component props
1642
1693
  * @return {JSX.Element} The rendered trend indicator
1643
1694
  */
1644
- declare function TrendIndicator({ direction, value, className, style, showIcon, }: TrendIndicatorProps): react_jsx_runtime.JSX.Element;
1645
-
1695
+ declare function TrendIndicator({
1696
+ direction,
1697
+ value,
1698
+ className,
1699
+ style,
1700
+ showIcon
1701
+ }: TrendIndicatorProps): import("react/jsx-runtime").JSX.Element;
1702
+ //#endregion
1703
+ //#region src/providers/chart-context/types.d.ts
1646
1704
  interface ChartRegistration {
1647
- legendItems: BaseLegendItem[];
1648
- chartType: ChartType;
1649
- metadata?: Record<string, unknown>;
1705
+ legendItems: BaseLegendItem[];
1706
+ chartType: ChartType;
1707
+ metadata?: Record<string, unknown>;
1650
1708
  }
1651
1709
  type GetElementStylesParams = {
1652
- index: number;
1653
- data?: SeriesData | DataPointPercentage;
1654
- overrideColor?: string;
1655
- legendShape?: LegendShape<SeriesData[], number>;
1710
+ index: number;
1711
+ data?: SeriesData | DataPointPercentage;
1712
+ overrideColor?: string;
1713
+ legendShape?: LegendShape<SeriesData[], number>;
1656
1714
  };
1657
1715
  type ElementStyles = {
1658
- color: string;
1659
- lineStyles: LineStyles;
1660
- glyph: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
1661
- shapeStyles: CSSProperties & LineStyles;
1716
+ color: string;
1717
+ lineStyles: LineStyles$1;
1718
+ glyph: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
1719
+ shapeStyles: CSSProperties & LineStyles$1;
1662
1720
  };
1663
1721
  interface GlobalChartsContextValue {
1664
- charts: Map<string, ChartRegistration>;
1665
- registerChart: (id: string, data: ChartRegistration) => void;
1666
- unregisterChart: (id: string) => void;
1667
- getChartData: (id: string) => ChartRegistration | undefined;
1668
- theme: CompleteChartTheme;
1669
- getElementStyles: (params: GetElementStylesParams) => ElementStyles;
1670
- toggleSeriesVisibility: (chartId: string, seriesLabel: string) => void;
1671
- isSeriesVisible: (chartId: string, seriesLabel: string) => boolean;
1672
- getHiddenSeries: (chartId: string) => Set<string>;
1673
- isColorPaletteResolved: boolean;
1722
+ charts: Map<string, ChartRegistration>;
1723
+ registerChart: (id: string, data: ChartRegistration) => void;
1724
+ unregisterChart: (id: string) => void;
1725
+ getChartData: (id: string) => ChartRegistration | undefined;
1726
+ theme: CompleteChartTheme;
1727
+ getElementStyles: (params: GetElementStylesParams) => ElementStyles;
1728
+ toggleSeriesVisibility: (chartId: string, seriesLabel: string) => void;
1729
+ isSeriesVisible: (chartId: string, seriesLabel: string) => boolean;
1730
+ getHiddenSeries: (chartId: string) => Set<string>;
1731
+ isColorPaletteResolved: boolean;
1674
1732
  }
1675
-
1676
- declare const GlobalChartsContext: react.Context<GlobalChartsContextValue>;
1733
+ //#endregion
1734
+ //#region src/providers/chart-context/global-charts-provider.d.ts
1735
+ declare const GlobalChartsContext: import("react").Context<GlobalChartsContextValue>;
1677
1736
  interface GlobalChartsProviderProps {
1678
- children: ReactNode;
1679
- theme?: Partial<ChartTheme>;
1737
+ children: ReactNode;
1738
+ theme?: Partial<ChartTheme>;
1680
1739
  }
1681
1740
  declare const GlobalChartsProvider: FC<GlobalChartsProviderProps>;
1682
-
1741
+ //#endregion
1742
+ //#region src/providers/chart-context/hooks/use-global-charts-context.d.ts
1683
1743
  declare const useGlobalChartsContext: () => GlobalChartsContextValue;
1684
-
1744
+ //#endregion
1745
+ //#region src/providers/chart-context/hooks/use-global-charts-theme.d.ts
1685
1746
  /**
1686
1747
  * Hook to get the global chart theme from GlobalChartsProvider
1687
1748
  *
1688
1749
  * @return The global chart theme
1689
1750
  */
1690
1751
  declare const useGlobalChartsTheme: () => CompleteChartTheme;
1691
-
1752
+ //#endregion
1753
+ //#region src/providers/chart-context/themes.d.ts
1692
1754
  /**
1693
1755
  * Default theme configuration
1694
1756
  */
1695
1757
  declare const defaultTheme: CompleteChartTheme;
1696
-
1697
- export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, type GradientConfig, type GradientStop, type GridProps, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type MainMetricRenderProps, type MetricValueType, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderValueProps, type ScaleOptions, type SeriesData, type SeriesDataOptions, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, GlobalChartsProvider as ThemeProvider, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
1758
+ //#endregion
1759
+ export { AccessibleTooltip, type AnnotationStyles, type ArcData, AreaChartResponsive as AreaChart, type AreaChartProps, AreaChart as AreaChartUnresponsive, type AxisOptions, BarChartResponsive as BarChart, type BarChartProps, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, type BarListChartProps, BarListChart as BarListChartUnresponsive, type BaseChartProps, type BaseLegendItem, type BaseLegendProps, BaseTooltip, type BaseTooltipProps, type ChartLegendConfig, type ChartLegendOptions, type ChartTheme, type CompleteChartTheme, ConversionFunnelChartWithProvider as ConversionFunnelChart, type ConversionFunnelChartProps, type CurveType, type DataPoint, type DataPointDate, type DataPointPercentage, type EventHandlerParams, type FunnelStep, GeoChartResponsive as GeoChart, type GeoChartProps, GeoChartWithProvider as GeoChartUnresponsive, type GeoData, type GeoRegion, type GeoResolution, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, type GoogleDataTableColumn, type GoogleDataTableColumnRoleType, type GoogleDataTableRow, type GradientConfig, type GradientStop, type GridProps, type GridStyles, LeaderboardChartResponsive as LeaderboardChart, type LeaderboardChartProps, LeaderboardChart as LeaderboardChartUnresponsive, type LeaderboardEntry, Legend, type LegendItemStyles, type LegendLabelStyles, type LegendPosition, type LegendProps, type LegendShapeStyles, type LegendValueDisplay, LineChartResponsive as LineChart, type LineChartAnnotationProps, type LineChartProps, LineChart as LineChartUnresponsive, type LineStyles, type MainMetricRenderProps, type MetricValueType, type MultipleDataPointsDate, type Optional, type OrientationType, PieChartResponsive as PieChart, type PieChartProps, type PieChartRenderTooltipParams, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, type PieSemiCircleChartProps, type PieSemiCircleChartRenderTooltipParams, PieSemiCircleChart as PieSemiCircleChartUnresponsive, type RenderLabelProps, type RenderLineGlyphProps, type RenderTooltipParams, type RenderValueProps, type ScaleOptions, type SeriesData, type SeriesDataOptions, Sparkline, type SparklineDataPoint, type SparklineProps, SparklineUnresponsive, type StepLabelRenderProps, type StepRateRenderProps, type TooltipData, type TooltipDatum, type TooltipProps, type TooltipRenderProps, type TrendDirection, TrendIndicator, type TrendIndicatorProps, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, useChartLegendItems, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
1760
+ //# sourceMappingURL=index.d.cts.map