@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.
- package/CHANGELOG.md +8 -0
- package/dist/index.cjs +8969 -9570
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +315 -202
- package/dist/index.d.cts +1246 -1183
- package/dist/index.d.ts +1247 -1184
- package/dist/index.js +8548 -9570
- package/dist/index.js.map +1 -1
- package/dist/visx/group/index.cjs +8 -8
- package/dist/visx/group/index.d.cts +2 -3
- package/dist/visx/group/index.d.ts +2 -3
- package/dist/visx/group/index.js +1 -7
- package/dist/visx/legend/index.cjs +20 -10
- package/dist/visx/legend/index.d.cts +2 -1
- package/dist/visx/legend/index.d.ts +2 -1
- package/dist/visx/legend/index.js +2 -10
- package/dist/visx/text/index.cjs +20 -12
- package/dist/visx/text/index.d.cts +2 -1
- package/dist/visx/text/index.d.ts +2 -1
- package/dist/visx/text/index.js +2 -12
- package/package.json +11 -18
- package/src/charts/leaderboard-chart/leaderboard-chart.module.scss +99 -0
- package/src/charts/leaderboard-chart/leaderboard-chart.tsx +33 -5
- package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +35 -1
- package/src/types.ts +15 -1
- package/dist/chunk-5WRI5ZAA.js +0 -31
- package/dist/chunk-5WRI5ZAA.js.map +0 -1
- package/dist/chunk-7OZEQ5HE.cjs +0 -9
- package/dist/chunk-7OZEQ5HE.cjs.map +0 -1
- package/dist/chunk-DZUJEN5N.cjs +0 -31
- package/dist/chunk-DZUJEN5N.cjs.map +0 -1
- package/dist/chunk-NFRB2POF.js +0 -9
- package/dist/chunk-NFRB2POF.js.map +0 -1
- package/dist/index.css.map +0 -1
- package/dist/visx/group/index.cjs.map +0 -1
- package/dist/visx/group/index.js.map +0 -1
- package/dist/visx/legend/index.cjs.map +0 -1
- package/dist/visx/legend/index.js.map +0 -1
- package/dist/visx/text/index.cjs.map +0 -1
- package/dist/visx/text/index.js.map +0 -1
- package/tsup.config.ts +0 -46
package/dist/index.d.cts
CHANGED
|
@@ -1,43 +1,39 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
|
|
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
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
|
-
|
|
40
|
-
|
|
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
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
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
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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
|
-
|
|
127
|
-
|
|
128
|
-
|
|
135
|
+
offset: string;
|
|
136
|
+
color?: string;
|
|
137
|
+
opacity?: number;
|
|
129
138
|
};
|
|
130
139
|
type SeriesDataOptions = {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
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
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
153
|
+
group?: string;
|
|
154
|
+
label: string;
|
|
155
|
+
data: DataPointDate[] | DataPoint[];
|
|
156
|
+
options?: SeriesDataOptions;
|
|
148
157
|
};
|
|
149
158
|
type MultipleDataPointsDate = {
|
|
150
|
-
|
|
151
|
-
|
|
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
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
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
|
-
|
|
187
|
-
|
|
188
|
-
|
|
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
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
/**
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
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
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
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
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
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
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
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
|
-
|
|
360
|
-
|
|
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
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
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
|
-
|
|
379
|
-
|
|
380
|
-
|
|
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
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
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
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
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
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
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
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
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
|
-
|
|
591
|
-
|
|
555
|
+
items?: BaseLegendItem[];
|
|
556
|
+
chartId?: string;
|
|
592
557
|
};
|
|
593
558
|
type BaseLegendItem = {
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
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
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
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
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
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
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
662
|
-
|
|
630
|
+
glyphStyle?: SVGProps<SVGCircleElement>;
|
|
631
|
+
position?: 'start' | 'end';
|
|
663
632
|
};
|
|
664
633
|
interface LineChartProps extends BaseChartProps<SeriesData[]> {
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
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
|
-
|
|
688
|
-
|
|
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
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
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
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
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
|
-
|
|
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
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
*
|
|
772
|
+
* Scale for the y axis. Exclude the type property.
|
|
849
773
|
*/
|
|
850
|
-
|
|
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
|
-
*
|
|
788
|
+
* y offset of the label and value. Default is based on the number of series, automatically computed.
|
|
853
789
|
*/
|
|
854
|
-
|
|
855
|
-
|
|
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: ({
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
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
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
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
|
-
|
|
882
|
-
|
|
883
|
-
|
|
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
|
-
|
|
890
|
-
|
|
891
|
-
|
|
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
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
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
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
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
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
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
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
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: ({
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
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
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
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
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
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: (({
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
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
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
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, {
|
|
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({
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
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
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
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
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
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
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
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
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
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
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
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
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
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
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1466
|
-
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
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: ({
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
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
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1575
|
+
label: string;
|
|
1576
|
+
value: number;
|
|
1577
|
+
valueDisplay?: string;
|
|
1540
1578
|
};
|
|
1541
1579
|
type TooltipComponentProps = {
|
|
1542
|
-
|
|
1543
|
-
|
|
1580
|
+
data: TooltipData;
|
|
1581
|
+
className?: string;
|
|
1544
1582
|
};
|
|
1545
1583
|
type TooltipCommonProps = {
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
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
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1596
|
+
data: TooltipData;
|
|
1597
|
+
component?: ComponentType<TooltipComponentProps>;
|
|
1598
|
+
children?: never;
|
|
1561
1599
|
};
|
|
1562
1600
|
type CustomTooltip = {
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1601
|
+
children: ReactNode;
|
|
1602
|
+
data?: never;
|
|
1603
|
+
component?: never;
|
|
1566
1604
|
};
|
|
1567
1605
|
type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
|
|
1568
|
-
declare const BaseTooltip: ({
|
|
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
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1619
|
+
datum: DataPointDate;
|
|
1620
|
+
seriesLabel: string;
|
|
1621
|
+
seriesIndex: number;
|
|
1622
|
+
dataPointIndex: number;
|
|
1575
1623
|
};
|
|
1576
|
-
interface AccessibleTooltipProps extends Omit<
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
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
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
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
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
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({
|
|
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
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1705
|
+
legendItems: BaseLegendItem[];
|
|
1706
|
+
chartType: ChartType;
|
|
1707
|
+
metadata?: Record<string, unknown>;
|
|
1650
1708
|
}
|
|
1651
1709
|
type GetElementStylesParams = {
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1710
|
+
index: number;
|
|
1711
|
+
data?: SeriesData | DataPointPercentage;
|
|
1712
|
+
overrideColor?: string;
|
|
1713
|
+
legendShape?: LegendShape<SeriesData[], number>;
|
|
1656
1714
|
};
|
|
1657
1715
|
type ElementStyles = {
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
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
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1679
|
-
|
|
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,
|
|
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
|