@automattic/charts 0.2.0 → 0.2.1
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 +5 -0
- package/dist/index.css +2 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +287 -0
- package/dist/index.d.ts +287 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.2.1] - 2024-12-31
|
|
9
|
+
### Added
|
|
10
|
+
- Added dist to mirror repo [#40776]
|
|
11
|
+
|
|
8
12
|
## [0.2.0] - 2024-12-31
|
|
9
13
|
### Added
|
|
10
14
|
- Charts: adds grid component to charts [#40683]
|
|
@@ -33,4 +37,5 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
33
37
|
- Fixed lints following ESLint rule changes for TS [#40584]
|
|
34
38
|
- Fixing a bug in Chart storybook data. [#40640]
|
|
35
39
|
|
|
40
|
+
[0.2.1]: https://github.com/Automattic/charts/compare/v0.2.0...v0.2.1
|
|
36
41
|
[0.2.0]: https://github.com/Automattic/charts/compare/v0.1.0...v0.2.0
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.grid-control-module__grid-control___KOnZN .visx-line{stroke:#d7d6d6;stroke-width:1px;shape-rendering:crispEdges}.legend-module__legend--horizontal___IUN13{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.legend-module__legend--vertical___Scfzo{display:flex;flex-direction:column;gap:8px}.legend-module__legend-item___feemn{display:flex;align-items:center;gap:8px;font-size:.875rem}.legend-module__legend-item-swatch___nRyXf{border-radius:2px}.legend-module__legend-item-label___ksx6I{color:var(--jp-gray-80, #2c3338);display:flex;align-items:center;gap:.5rem}.legend-module__legend-item-value___d9x1j{font-weight:500}.base-tooltip-module__tooltip___OfX6n{padding:.5rem;background-color:#000000d9;color:#fff;border-radius:4px;font-size:14px;box-shadow:0 1px 2px #0000001a;position:absolute;pointer-events:none;transform:translate(-50%,-100%)}.bar-chart-module__bar-chart___lmYNi{position:relative}.bar-chart-module__bar-chart-legend___vgKKq{margin-top:1rem}.line-chart-module__line-chart___ITM3d{position:relative}.line-chart-module__line-chart__tooltip___aqcme{background:#fff;padding:.5rem}.line-chart-module__line-chart__tooltip-date___4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module__line-chart__tooltip-row___6A37G{display:flex;align-items:center;padding:4px 0;justify-content:space-between}.line-chart-module__line-chart__tooltip-label___IvnFF{font-weight:500;padding-right:1rem}.pie-chart-module__pie-chart___R12Vh{position:relative}.pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9{position:relative;text-align:center}.pie-semi-circle-chart-module__pie-semi-circle-chart-legend___c8W1Y{margin-top:1rem}.pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9 .pie-semi-circle-chart-module__label___nPqOg{margin-bottom:0;font-weight:600;font-size:16px}.pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9 .pie-semi-circle-chart-module__note___LpBZQ{margin-top:0;font-size:14px}
|
|
2
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/components/grid-control/grid-control.module.scss","esbuild-sass-plugin:css-chunk:src/components/legend/legend.module.scss","esbuild-sass-plugin:css-chunk:src/components/tooltip/base-tooltip.module.scss","esbuild-sass-plugin:css-chunk:src/components/bar-chart/bar-chart.module.scss","esbuild-sass-plugin:css-chunk:src/components/line-chart/line-chart.module.scss","esbuild-sass-plugin:css-chunk:src/components/pie-chart/pie-chart.module.scss","esbuild-sass-plugin:css-chunk:src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"sourcesContent":[".grid-control-module__grid-control___KOnZN .visx-line {\n stroke: #d7d6d6;\n stroke-width: 1px;\n shape-rendering: crispEdges;\n}",".legend-module__legend--horizontal___IUN13 {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 16px;\n}\n.legend-module__legend--vertical___Scfzo {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.legend-module__legend-item___feemn {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 0.875rem;\n}\n\n.legend-module__legend-item-swatch___nRyXf {\n border-radius: 2px;\n}\n\n.legend-module__legend-item-label___ksx6I {\n color: var(--jp-gray-80, #2c3338);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.legend-module__legend-item-value___d9x1j {\n font-weight: 500;\n}",".base-tooltip-module__tooltip___OfX6n {\n padding: 0.5rem;\n background-color: rgba(0, 0, 0, 0.85);\n color: white;\n border-radius: 4px;\n font-size: 14px;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n position: absolute;\n pointer-events: none;\n transform: translate(-50%, -100%);\n}",".bar-chart-module__bar-chart___lmYNi {\n position: relative;\n}\n.bar-chart-module__bar-chart-legend___vgKKq {\n margin-top: 1rem;\n}",".line-chart-module__line-chart___ITM3d {\n position: relative;\n}\n.line-chart-module__line-chart__tooltip___aqcme {\n background: #fff;\n padding: 0.5rem;\n}\n.line-chart-module__line-chart__tooltip-date___4Dzab {\n font-weight: bold;\n padding-bottom: 10px;\n}\n.line-chart-module__line-chart__tooltip-row___6A37G {\n display: flex;\n align-items: center;\n padding: 4px 0;\n justify-content: space-between;\n}\n.line-chart-module__line-chart__tooltip-label___IvnFF {\n font-weight: 500;\n padding-right: 1rem;\n}",".pie-chart-module__pie-chart___R12Vh {\n position: relative;\n}",".pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9 {\n position: relative;\n text-align: center;\n}\n.pie-semi-circle-chart-module__pie-semi-circle-chart-legend___c8W1Y {\n margin-top: 1rem;\n}\n.pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9 .pie-semi-circle-chart-module__label___nPqOg {\n margin-bottom: 0px;\n font-weight: 600;\n font-size: 16px;\n}\n.pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9 .pie-semi-circle-chart-module__note___LpBZQ {\n margin-top: 0px;\n font-size: 14px;\n}"],"mappings":"AAAA,CAAC,0CAA0C,CAAC,UAC1C,OAAQ,QACR,aAAc,IACd,gBAAiB,UACnB,CCJA,CAAC,0CACC,QAAS,KACT,eAAgB,IAChB,UAAW,KACX,IAAK,IACP,CACA,CAAC,wCACC,QAAS,KACT,eAAgB,OAChB,IAAK,GACP,CAEA,CAAC,mCACC,QAAS,KACT,YAAa,OACb,IAAK,IACL,UAAW,OACb,CAEA,CAAC,0CAnBD,cAoBiB,GACjB,CAEA,CAAC,yCACC,MAAO,IAAI,YAAY,EAAE,SACzB,QAAS,KACT,YAAa,OACb,IAAK,KACP,CAEA,CAAC,yCACC,YAAa,GACf,CChCA,CAAC,qCAAD,QACW,MACT,iBAAkB,UAClB,MAAO,KAHT,cAIiB,IACf,UAAW,KACX,WAAY,EAAE,IAAI,IAAI,UACtB,SAAU,SACV,eAAgB,KAChB,UAAW,UAAU,IAAI,CAAE,MAC7B,CCVA,CAAC,oCACC,SAAU,QACZ,CACA,CAAC,2CACC,WAAY,IACd,CCLA,CAAC,sCACC,SAAU,QACZ,CACA,CAAC,+CACC,WAAY,KAJd,QAKW,KACX,CACA,CAAC,oDACC,YAAa,IACb,eAAgB,IAClB,CACA,CAAC,mDACC,QAAS,KACT,YAAa,OAbf,QAcW,IAAI,EACb,gBAAiB,aACnB,CACA,CAAC,qDACC,YAAa,IACb,cAAe,IACjB,CCpBA,CAAC,oCACC,SAAU,QACZ,CCFA,CAAC,4DACC,SAAU,SACV,WAAY,MACd,CACA,CAAC,mEACC,WAAY,IACd,CACA,CAPC,4DAO4D,CAAC,4CAC5D,cAAe,EACf,YAAa,IACb,UAAW,IACb,CACA,CAZC,4DAY4D,CAAC,2CAC5D,WAAY,EACZ,UAAW,IACb","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
import { CSSProperties, FC, ComponentType, ReactNode } from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
import { scaleOrdinal } from '@visx/scale';
|
|
4
|
+
|
|
5
|
+
type DataPoint = {
|
|
6
|
+
label: string;
|
|
7
|
+
value: number;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
type DataPointDate = {
|
|
11
|
+
date: Date;
|
|
12
|
+
label?: string;
|
|
13
|
+
value: number;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
type SeriesData = {
|
|
17
|
+
group?: string;
|
|
18
|
+
label: string;
|
|
19
|
+
data: DataPointDate[] | DataPoint[];
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
type MultipleDataPointsDate = {
|
|
23
|
+
label: string;
|
|
24
|
+
data: DataPointDate[];
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
type DataPointPercentage = {
|
|
28
|
+
/**
|
|
29
|
+
* Label for the data point
|
|
30
|
+
*/
|
|
31
|
+
label: string;
|
|
32
|
+
/**
|
|
33
|
+
* Numerical value
|
|
34
|
+
*/
|
|
35
|
+
value: number;
|
|
36
|
+
/**
|
|
37
|
+
* Formatted value for display
|
|
38
|
+
*/
|
|
39
|
+
valueDisplay?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Percentage value
|
|
42
|
+
*/
|
|
43
|
+
percentage: number;
|
|
44
|
+
/**
|
|
45
|
+
* Color code for the segment, by default colours are taken from the theme but this property can overrides it
|
|
46
|
+
*/
|
|
47
|
+
color?: string;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Theme configuration for chart components
|
|
52
|
+
*/
|
|
53
|
+
type ChartTheme = {
|
|
54
|
+
/** Background color for chart components */
|
|
55
|
+
backgroundColor: string;
|
|
56
|
+
/** Background color for labels */
|
|
57
|
+
labelBackgroundColor?: string;
|
|
58
|
+
/** Array of colors used for data visualization */
|
|
59
|
+
colors: string[];
|
|
60
|
+
/** Optional CSS styles for grid lines */
|
|
61
|
+
gridStyles?: CSSProperties;
|
|
62
|
+
/** Length of axis ticks in pixels */
|
|
63
|
+
tickLength: number;
|
|
64
|
+
/** Color of the grid lines */
|
|
65
|
+
gridColor: string;
|
|
66
|
+
/** Color of the grid lines in dark mode */
|
|
67
|
+
gridColorDark: string;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Base properties shared across all chart components
|
|
72
|
+
*/
|
|
73
|
+
type BaseChartProps< T = DataPoint | DataPointDate > = {
|
|
74
|
+
/**
|
|
75
|
+
* Array of data points to display in the chart
|
|
76
|
+
*/
|
|
77
|
+
data: T extends DataPoint | DataPointDate ? T[] : T;
|
|
78
|
+
/**
|
|
79
|
+
* Additional CSS class name for the chart container
|
|
80
|
+
*/
|
|
81
|
+
className?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Width of the chart in pixels
|
|
84
|
+
*/
|
|
85
|
+
width: number;
|
|
86
|
+
/**
|
|
87
|
+
* Height of the chart in pixels
|
|
88
|
+
*/
|
|
89
|
+
height?: number;
|
|
90
|
+
/**
|
|
91
|
+
* Chart margins
|
|
92
|
+
*/
|
|
93
|
+
margin?: {
|
|
94
|
+
top: number;
|
|
95
|
+
right: number;
|
|
96
|
+
bottom: number;
|
|
97
|
+
left: number;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* Whether to show tooltips on hover. False by default.
|
|
101
|
+
*/
|
|
102
|
+
withTooltips?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Whether to show legend
|
|
105
|
+
*/
|
|
106
|
+
showLegend?: boolean;
|
|
107
|
+
/**
|
|
108
|
+
* Legend orientation
|
|
109
|
+
*/
|
|
110
|
+
legendOrientation?: 'horizontal' | 'vertical';
|
|
111
|
+
/**
|
|
112
|
+
* Grid visibility. x is default.
|
|
113
|
+
*/
|
|
114
|
+
gridVisibility?: 'x' | 'y' | 'xy' | 'none';
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Properties for grid components
|
|
119
|
+
*/
|
|
120
|
+
type GridProps = {
|
|
121
|
+
/**
|
|
122
|
+
* Width of the grid in pixels
|
|
123
|
+
*/
|
|
124
|
+
width: number;
|
|
125
|
+
/**
|
|
126
|
+
* Height of the grid in pixels
|
|
127
|
+
*/
|
|
128
|
+
height: number;
|
|
129
|
+
/**
|
|
130
|
+
* Grid visibility. x is default.
|
|
131
|
+
*/
|
|
132
|
+
gridVisibility?: 'x' | 'y' | 'xy' | 'none';
|
|
133
|
+
/**
|
|
134
|
+
* X-axis scale for the grid
|
|
135
|
+
* TODO: Fix any type after resolving visx scale type issues
|
|
136
|
+
*/
|
|
137
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
138
|
+
xScale: any;
|
|
139
|
+
/**
|
|
140
|
+
* Y-axis scale for the grid
|
|
141
|
+
* TODO: Fix any type after resolving visx scale type issues
|
|
142
|
+
*/
|
|
143
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
144
|
+
yScale: any;
|
|
145
|
+
/**
|
|
146
|
+
* Top offset for the grid
|
|
147
|
+
*/
|
|
148
|
+
top?: number;
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
interface BarChartProps extends BaseChartProps<SeriesData[]> {
|
|
152
|
+
}
|
|
153
|
+
declare const BarChart: FC<BarChartProps>;
|
|
154
|
+
|
|
155
|
+
interface LineChartProps extends BaseChartProps<SeriesData[]> {
|
|
156
|
+
}
|
|
157
|
+
declare const LineChart: FC<LineChartProps>;
|
|
158
|
+
|
|
159
|
+
interface PieChartProps extends BaseChartProps<DataPoint[]> {
|
|
160
|
+
/**
|
|
161
|
+
* Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.
|
|
162
|
+
*/
|
|
163
|
+
innerRadius?: number;
|
|
164
|
+
}
|
|
165
|
+
/**
|
|
166
|
+
* Renders a pie or donut chart using the provided data.
|
|
167
|
+
*
|
|
168
|
+
* @param {PieChartProps} props - Component props
|
|
169
|
+
* @return {JSX.Element} The rendered chart component
|
|
170
|
+
*/
|
|
171
|
+
declare const PieChart: ({ data, width, height, withTooltips, innerRadius, className, showLegend, legendOrientation, }: PieChartProps) => react_jsx_runtime.JSX.Element;
|
|
172
|
+
|
|
173
|
+
interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]> {
|
|
174
|
+
/**
|
|
175
|
+
* Label text to display above the chart
|
|
176
|
+
*/
|
|
177
|
+
label: string;
|
|
178
|
+
/**
|
|
179
|
+
* Note text to display below the label
|
|
180
|
+
*/
|
|
181
|
+
note: string;
|
|
182
|
+
/**
|
|
183
|
+
* Direction of chart rendering
|
|
184
|
+
* true for clockwise, false for counter-clockwise
|
|
185
|
+
*/
|
|
186
|
+
clockwise?: boolean;
|
|
187
|
+
/**
|
|
188
|
+
* Thickness of the pie chart. A value between 0 and 1
|
|
189
|
+
*/
|
|
190
|
+
thickness?: number;
|
|
191
|
+
}
|
|
192
|
+
declare const PieSemiCircleChart: FC<PieSemiCircleChartProps>;
|
|
193
|
+
|
|
194
|
+
type TooltipData = {
|
|
195
|
+
label: string;
|
|
196
|
+
value: number;
|
|
197
|
+
valueDisplay?: string;
|
|
198
|
+
};
|
|
199
|
+
type TooltipComponentProps = {
|
|
200
|
+
data: TooltipData;
|
|
201
|
+
className?: string;
|
|
202
|
+
};
|
|
203
|
+
type TooltipCommonProps = {
|
|
204
|
+
top: number;
|
|
205
|
+
left: number;
|
|
206
|
+
style?: CSSProperties;
|
|
207
|
+
className?: string;
|
|
208
|
+
};
|
|
209
|
+
type DefaultDataTooltip = {
|
|
210
|
+
data: TooltipData;
|
|
211
|
+
component?: ComponentType<TooltipComponentProps>;
|
|
212
|
+
children?: never;
|
|
213
|
+
};
|
|
214
|
+
type CustomTooltip = {
|
|
215
|
+
children: ReactNode;
|
|
216
|
+
data?: never;
|
|
217
|
+
component?: never;
|
|
218
|
+
};
|
|
219
|
+
type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
|
|
220
|
+
declare const BaseTooltip: ({ data, top, left, component: Component, children, className, }: BaseTooltipProps) => react_jsx_runtime.JSX.Element;
|
|
221
|
+
|
|
222
|
+
type LegendItem = {
|
|
223
|
+
label: string;
|
|
224
|
+
value: number | string;
|
|
225
|
+
color: string;
|
|
226
|
+
};
|
|
227
|
+
type LegendProps = {
|
|
228
|
+
items: LegendItem[];
|
|
229
|
+
className?: string;
|
|
230
|
+
orientation?: 'horizontal' | 'vertical';
|
|
231
|
+
scale?: ReturnType<typeof scaleOrdinal>;
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
declare const BaseLegend: FC<LegendProps>;
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* Props for the ThemeProvider component
|
|
238
|
+
*/
|
|
239
|
+
type ThemeProviderProps = {
|
|
240
|
+
/** Optional partial theme override */
|
|
241
|
+
theme?: Partial<ChartTheme>;
|
|
242
|
+
/** Child components that will have access to the theme */
|
|
243
|
+
children: ReactNode;
|
|
244
|
+
};
|
|
245
|
+
declare const ThemeProvider: FC<ThemeProviderProps>;
|
|
246
|
+
|
|
247
|
+
type UseChartMouseHandlerProps = {
|
|
248
|
+
/**
|
|
249
|
+
* Whether tooltips are enabled
|
|
250
|
+
*/
|
|
251
|
+
withTooltips: boolean;
|
|
252
|
+
};
|
|
253
|
+
type UseChartMouseHandlerReturn = {
|
|
254
|
+
/**
|
|
255
|
+
* Handler for mouse move events
|
|
256
|
+
*/
|
|
257
|
+
onMouseMove: (event: React.MouseEvent<SVGElement>, data: DataPoint) => void;
|
|
258
|
+
/**
|
|
259
|
+
* Handler for mouse leave events
|
|
260
|
+
*/
|
|
261
|
+
onMouseLeave: () => void;
|
|
262
|
+
/**
|
|
263
|
+
* Whether the tooltip is currently open
|
|
264
|
+
*/
|
|
265
|
+
tooltipOpen: boolean;
|
|
266
|
+
/**
|
|
267
|
+
* The current tooltip data
|
|
268
|
+
*/
|
|
269
|
+
tooltipData: DataPoint | null;
|
|
270
|
+
/**
|
|
271
|
+
* The current tooltip left position
|
|
272
|
+
*/
|
|
273
|
+
tooltipLeft: number | undefined;
|
|
274
|
+
/**
|
|
275
|
+
* The current tooltip top position
|
|
276
|
+
*/
|
|
277
|
+
tooltipTop: number | undefined;
|
|
278
|
+
};
|
|
279
|
+
/**
|
|
280
|
+
* Hook to handle mouse interactions for chart components
|
|
281
|
+
*
|
|
282
|
+
* @param {UseChartMouseHandlerProps} props - Hook configuration
|
|
283
|
+
* @return {UseChartMouseHandlerReturn} Object containing handlers and tooltip state
|
|
284
|
+
*/
|
|
285
|
+
declare const useChartMouseHandler: ({ withTooltips, }: UseChartMouseHandlerProps) => UseChartMouseHandlerReturn;
|
|
286
|
+
|
|
287
|
+
export { BarChart, type BaseChartProps, BaseTooltip, type BaseTooltipProps, type ChartTheme, type DataPoint, type DataPointDate, type DataPointPercentage, type GridProps, BaseLegend as Legend, LineChart, type MultipleDataPointsDate, PieChart, PieSemiCircleChart, type SeriesData, ThemeProvider, useChartMouseHandler };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
import { CSSProperties, FC, ComponentType, ReactNode } from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
import { scaleOrdinal } from '@visx/scale';
|
|
4
|
+
|
|
5
|
+
type DataPoint = {
|
|
6
|
+
label: string;
|
|
7
|
+
value: number;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
type DataPointDate = {
|
|
11
|
+
date: Date;
|
|
12
|
+
label?: string;
|
|
13
|
+
value: number;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
type SeriesData = {
|
|
17
|
+
group?: string;
|
|
18
|
+
label: string;
|
|
19
|
+
data: DataPointDate[] | DataPoint[];
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
type MultipleDataPointsDate = {
|
|
23
|
+
label: string;
|
|
24
|
+
data: DataPointDate[];
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
type DataPointPercentage = {
|
|
28
|
+
/**
|
|
29
|
+
* Label for the data point
|
|
30
|
+
*/
|
|
31
|
+
label: string;
|
|
32
|
+
/**
|
|
33
|
+
* Numerical value
|
|
34
|
+
*/
|
|
35
|
+
value: number;
|
|
36
|
+
/**
|
|
37
|
+
* Formatted value for display
|
|
38
|
+
*/
|
|
39
|
+
valueDisplay?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Percentage value
|
|
42
|
+
*/
|
|
43
|
+
percentage: number;
|
|
44
|
+
/**
|
|
45
|
+
* Color code for the segment, by default colours are taken from the theme but this property can overrides it
|
|
46
|
+
*/
|
|
47
|
+
color?: string;
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Theme configuration for chart components
|
|
52
|
+
*/
|
|
53
|
+
type ChartTheme = {
|
|
54
|
+
/** Background color for chart components */
|
|
55
|
+
backgroundColor: string;
|
|
56
|
+
/** Background color for labels */
|
|
57
|
+
labelBackgroundColor?: string;
|
|
58
|
+
/** Array of colors used for data visualization */
|
|
59
|
+
colors: string[];
|
|
60
|
+
/** Optional CSS styles for grid lines */
|
|
61
|
+
gridStyles?: CSSProperties;
|
|
62
|
+
/** Length of axis ticks in pixels */
|
|
63
|
+
tickLength: number;
|
|
64
|
+
/** Color of the grid lines */
|
|
65
|
+
gridColor: string;
|
|
66
|
+
/** Color of the grid lines in dark mode */
|
|
67
|
+
gridColorDark: string;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Base properties shared across all chart components
|
|
72
|
+
*/
|
|
73
|
+
type BaseChartProps< T = DataPoint | DataPointDate > = {
|
|
74
|
+
/**
|
|
75
|
+
* Array of data points to display in the chart
|
|
76
|
+
*/
|
|
77
|
+
data: T extends DataPoint | DataPointDate ? T[] : T;
|
|
78
|
+
/**
|
|
79
|
+
* Additional CSS class name for the chart container
|
|
80
|
+
*/
|
|
81
|
+
className?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Width of the chart in pixels
|
|
84
|
+
*/
|
|
85
|
+
width: number;
|
|
86
|
+
/**
|
|
87
|
+
* Height of the chart in pixels
|
|
88
|
+
*/
|
|
89
|
+
height?: number;
|
|
90
|
+
/**
|
|
91
|
+
* Chart margins
|
|
92
|
+
*/
|
|
93
|
+
margin?: {
|
|
94
|
+
top: number;
|
|
95
|
+
right: number;
|
|
96
|
+
bottom: number;
|
|
97
|
+
left: number;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* Whether to show tooltips on hover. False by default.
|
|
101
|
+
*/
|
|
102
|
+
withTooltips?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Whether to show legend
|
|
105
|
+
*/
|
|
106
|
+
showLegend?: boolean;
|
|
107
|
+
/**
|
|
108
|
+
* Legend orientation
|
|
109
|
+
*/
|
|
110
|
+
legendOrientation?: 'horizontal' | 'vertical';
|
|
111
|
+
/**
|
|
112
|
+
* Grid visibility. x is default.
|
|
113
|
+
*/
|
|
114
|
+
gridVisibility?: 'x' | 'y' | 'xy' | 'none';
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Properties for grid components
|
|
119
|
+
*/
|
|
120
|
+
type GridProps = {
|
|
121
|
+
/**
|
|
122
|
+
* Width of the grid in pixels
|
|
123
|
+
*/
|
|
124
|
+
width: number;
|
|
125
|
+
/**
|
|
126
|
+
* Height of the grid in pixels
|
|
127
|
+
*/
|
|
128
|
+
height: number;
|
|
129
|
+
/**
|
|
130
|
+
* Grid visibility. x is default.
|
|
131
|
+
*/
|
|
132
|
+
gridVisibility?: 'x' | 'y' | 'xy' | 'none';
|
|
133
|
+
/**
|
|
134
|
+
* X-axis scale for the grid
|
|
135
|
+
* TODO: Fix any type after resolving visx scale type issues
|
|
136
|
+
*/
|
|
137
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
138
|
+
xScale: any;
|
|
139
|
+
/**
|
|
140
|
+
* Y-axis scale for the grid
|
|
141
|
+
* TODO: Fix any type after resolving visx scale type issues
|
|
142
|
+
*/
|
|
143
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
144
|
+
yScale: any;
|
|
145
|
+
/**
|
|
146
|
+
* Top offset for the grid
|
|
147
|
+
*/
|
|
148
|
+
top?: number;
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
interface BarChartProps extends BaseChartProps<SeriesData[]> {
|
|
152
|
+
}
|
|
153
|
+
declare const BarChart: FC<BarChartProps>;
|
|
154
|
+
|
|
155
|
+
interface LineChartProps extends BaseChartProps<SeriesData[]> {
|
|
156
|
+
}
|
|
157
|
+
declare const LineChart: FC<LineChartProps>;
|
|
158
|
+
|
|
159
|
+
interface PieChartProps extends BaseChartProps<DataPoint[]> {
|
|
160
|
+
/**
|
|
161
|
+
* Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.
|
|
162
|
+
*/
|
|
163
|
+
innerRadius?: number;
|
|
164
|
+
}
|
|
165
|
+
/**
|
|
166
|
+
* Renders a pie or donut chart using the provided data.
|
|
167
|
+
*
|
|
168
|
+
* @param {PieChartProps} props - Component props
|
|
169
|
+
* @return {JSX.Element} The rendered chart component
|
|
170
|
+
*/
|
|
171
|
+
declare const PieChart: ({ data, width, height, withTooltips, innerRadius, className, showLegend, legendOrientation, }: PieChartProps) => react_jsx_runtime.JSX.Element;
|
|
172
|
+
|
|
173
|
+
interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]> {
|
|
174
|
+
/**
|
|
175
|
+
* Label text to display above the chart
|
|
176
|
+
*/
|
|
177
|
+
label: string;
|
|
178
|
+
/**
|
|
179
|
+
* Note text to display below the label
|
|
180
|
+
*/
|
|
181
|
+
note: string;
|
|
182
|
+
/**
|
|
183
|
+
* Direction of chart rendering
|
|
184
|
+
* true for clockwise, false for counter-clockwise
|
|
185
|
+
*/
|
|
186
|
+
clockwise?: boolean;
|
|
187
|
+
/**
|
|
188
|
+
* Thickness of the pie chart. A value between 0 and 1
|
|
189
|
+
*/
|
|
190
|
+
thickness?: number;
|
|
191
|
+
}
|
|
192
|
+
declare const PieSemiCircleChart: FC<PieSemiCircleChartProps>;
|
|
193
|
+
|
|
194
|
+
type TooltipData = {
|
|
195
|
+
label: string;
|
|
196
|
+
value: number;
|
|
197
|
+
valueDisplay?: string;
|
|
198
|
+
};
|
|
199
|
+
type TooltipComponentProps = {
|
|
200
|
+
data: TooltipData;
|
|
201
|
+
className?: string;
|
|
202
|
+
};
|
|
203
|
+
type TooltipCommonProps = {
|
|
204
|
+
top: number;
|
|
205
|
+
left: number;
|
|
206
|
+
style?: CSSProperties;
|
|
207
|
+
className?: string;
|
|
208
|
+
};
|
|
209
|
+
type DefaultDataTooltip = {
|
|
210
|
+
data: TooltipData;
|
|
211
|
+
component?: ComponentType<TooltipComponentProps>;
|
|
212
|
+
children?: never;
|
|
213
|
+
};
|
|
214
|
+
type CustomTooltip = {
|
|
215
|
+
children: ReactNode;
|
|
216
|
+
data?: never;
|
|
217
|
+
component?: never;
|
|
218
|
+
};
|
|
219
|
+
type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
|
|
220
|
+
declare const BaseTooltip: ({ data, top, left, component: Component, children, className, }: BaseTooltipProps) => react_jsx_runtime.JSX.Element;
|
|
221
|
+
|
|
222
|
+
type LegendItem = {
|
|
223
|
+
label: string;
|
|
224
|
+
value: number | string;
|
|
225
|
+
color: string;
|
|
226
|
+
};
|
|
227
|
+
type LegendProps = {
|
|
228
|
+
items: LegendItem[];
|
|
229
|
+
className?: string;
|
|
230
|
+
orientation?: 'horizontal' | 'vertical';
|
|
231
|
+
scale?: ReturnType<typeof scaleOrdinal>;
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
declare const BaseLegend: FC<LegendProps>;
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* Props for the ThemeProvider component
|
|
238
|
+
*/
|
|
239
|
+
type ThemeProviderProps = {
|
|
240
|
+
/** Optional partial theme override */
|
|
241
|
+
theme?: Partial<ChartTheme>;
|
|
242
|
+
/** Child components that will have access to the theme */
|
|
243
|
+
children: ReactNode;
|
|
244
|
+
};
|
|
245
|
+
declare const ThemeProvider: FC<ThemeProviderProps>;
|
|
246
|
+
|
|
247
|
+
type UseChartMouseHandlerProps = {
|
|
248
|
+
/**
|
|
249
|
+
* Whether tooltips are enabled
|
|
250
|
+
*/
|
|
251
|
+
withTooltips: boolean;
|
|
252
|
+
};
|
|
253
|
+
type UseChartMouseHandlerReturn = {
|
|
254
|
+
/**
|
|
255
|
+
* Handler for mouse move events
|
|
256
|
+
*/
|
|
257
|
+
onMouseMove: (event: React.MouseEvent<SVGElement>, data: DataPoint) => void;
|
|
258
|
+
/**
|
|
259
|
+
* Handler for mouse leave events
|
|
260
|
+
*/
|
|
261
|
+
onMouseLeave: () => void;
|
|
262
|
+
/**
|
|
263
|
+
* Whether the tooltip is currently open
|
|
264
|
+
*/
|
|
265
|
+
tooltipOpen: boolean;
|
|
266
|
+
/**
|
|
267
|
+
* The current tooltip data
|
|
268
|
+
*/
|
|
269
|
+
tooltipData: DataPoint | null;
|
|
270
|
+
/**
|
|
271
|
+
* The current tooltip left position
|
|
272
|
+
*/
|
|
273
|
+
tooltipLeft: number | undefined;
|
|
274
|
+
/**
|
|
275
|
+
* The current tooltip top position
|
|
276
|
+
*/
|
|
277
|
+
tooltipTop: number | undefined;
|
|
278
|
+
};
|
|
279
|
+
/**
|
|
280
|
+
* Hook to handle mouse interactions for chart components
|
|
281
|
+
*
|
|
282
|
+
* @param {UseChartMouseHandlerProps} props - Hook configuration
|
|
283
|
+
* @return {UseChartMouseHandlerReturn} Object containing handlers and tooltip state
|
|
284
|
+
*/
|
|
285
|
+
declare const useChartMouseHandler: ({ withTooltips, }: UseChartMouseHandlerProps) => UseChartMouseHandlerReturn;
|
|
286
|
+
|
|
287
|
+
export { BarChart, type BaseChartProps, BaseTooltip, type BaseTooltipProps, type ChartTheme, type DataPoint, type DataPointDate, type DataPointPercentage, type GridProps, BaseLegend as Legend, LineChart, type MultipleDataPointsDate, PieChart, PieSemiCircleChart, type SeriesData, ThemeProvider, useChartMouseHandler };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var Ee=Object.create;var Z=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var Xe=Object.getOwnPropertyNames;var Ve=Object.getPrototypeOf,Ke=Object.prototype.hasOwnProperty;var We=(e,t)=>{for(var o in t)Z(e,o,{get:t[o],enumerable:!0})},fe=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Xe(t))!Ke.call(e,r)&&r!==o&&Z(e,r,{get:()=>t[r],enumerable:!(a=Ie(t,r))||a.enumerable});return e};var W=(e,t,o)=>(o=e!=null?Ee(Ve(e)):{},fe(t||!e||!e.__esModule?Z(o,"default",{value:e,enumerable:!0}):o,e)),Ye=e=>fe(Z({},"__esModule",{value:!0}),e);var tt={};We(tt,{BarChart:()=>se,BaseTooltip:()=>N,Legend:()=>T,LineChart:()=>me,PieChart:()=>he,PieSemiCircleChart:()=>ge,ThemeProvider:()=>re,useChartMouseHandler:()=>te});module.exports=Ye(tt);var ee=require("@visx/axis"),De=require("@visx/event"),le=require("@visx/group"),U=require("@visx/scale"),Fe=require("@visx/shape"),ke=require("@visx/tooltip"),ie=W(require("clsx")),ne=require("react");var j=require("react");var Y={backgroundColor:"#FFFFFF",labelBackgroundColor:"#FFFFFF",colors:["#98C8DF","#006DAB","#A6DC80","#1F9828","#FF8C8F"],gridStyles:{stroke:"#787C82",strokeWidth:1},tickLength:0,gridColor:"",gridColorDark:""};var Ce=require("react/jsx-runtime"),ve=(0,j.createContext)(Y),B=()=>(0,j.useContext)(ve),re=({theme:e={},children:t})=>{let o={...Y,...e};return(0,Ce.jsx)(ve.Provider,{value:o,children:t})};var Q=require("@visx/grid");var be={"grid-control":"grid-control-module__grid-control___KOnZN"};var q=require("react/jsx-runtime"),He=({width:e,height:t,xScale:o,yScale:a,gridVisibility:r="x",top:i=0})=>(0,q.jsxs)("g",{transform:`translate(0, ${i})`,className:be["grid-control"],children:[r.includes("x")&&(0,q.jsx)(Q.GridRows,{scale:o,width:e}),r.includes("y")&&(0,q.jsx)(Q.GridColumns,{scale:a,height:t})]}),ae=He;var ye=require("@visx/legend"),xe=require("@visx/scale"),Pe=W(require("clsx"));var S={"legend--horizontal":"legend-module__legend--horizontal___IUN13","legend--vertical":"legend-module__legend--vertical___Scfzo","legend-item":"legend-module__legend-item___feemn","legend-item-swatch":"legend-module__legend-item-swatch___nRyXf","legend-item-label":"legend-module__legend-item-label___ksx6I","legend-item-value":"legend-module__legend-item-value___d9x1j"};var k=require("react/jsx-runtime"),qe={horizontal:"row",vertical:"column"},T=({items:e,className:t,orientation:o="horizontal"})=>{let a=(0,xe.scaleOrdinal)({domain:e.map(r=>r.label),range:e.map(r=>r.color)});return(0,k.jsx)("div",{className:(0,Pe.default)(S.legend,S[`legend--${o}`],t),role:"list",children:(0,k.jsx)(ye.LegendOrdinal,{scale:a,direction:qe[o],shape:"rect",shapeWidth:16,shapeHeight:16,className:S["legend-items"],children:r=>(0,k.jsx)("div",{className:S[`legend--${o}`],children:r.map(i=>(0,k.jsxs)("div",{className:S["legend-item"],children:[(0,k.jsx)("svg",{width:16,height:16,children:(0,k.jsx)("rect",{width:16,height:16,fill:i.value,className:S["legend-item-swatch"]})}),(0,k.jsxs)("span",{className:S["legend-item-label"],children:[i.text,e.find(_=>_.label===i.text)?.value&&(0,k.jsx)("span",{className:S["legend-item-value"],children:e.find(_=>_.label===i.text)?.value})]})]},i.text))})})})};var Te={tooltip:"base-tooltip-module__tooltip___OfX6n"};var E=require("react/jsx-runtime"),Ue=({data:e})=>(0,E.jsxs)(E.Fragment,{children:[e?.label,": ",e?.valueDisplay||e?.value]}),N=({data:e,top:t,left:o,component:a=Ue,children:r,className:i})=>(0,E.jsx)("div",{className:Te.tooltip,style:{top:t,left:o},role:"tooltip",children:r||(0,E.jsx)(a,{data:e,className:i})});var J={"bar-chart":"bar-chart-module__bar-chart___lmYNi","bar-chart-legend":"bar-chart-module__bar-chart-legend___vgKKq"};var h=require("react/jsx-runtime"),Me=({data:e,width:t,height:o,margin:a={top:20,right:20,bottom:40,left:40},withTooltips:r=!1,showLegend:i=!1,legendOrientation:_="horizontal",className:M,gridVisibility:s="x"})=>{let b=B(),{tooltipOpen:F,tooltipLeft:g,tooltipTop:c,tooltipData:y,hideTooltip:L,showTooltip:z}=(0,ke.useTooltip)(),I=(0,ne.useCallback)((d,m,x,K,l)=>{let n=(0,De.localPoint)(d);n&&z({tooltipData:{value:m,xLabel:x,yLabel:K,seriesIndex:l},tooltipLeft:n.x,tooltipTop:n.y-10})},[z]),X=(0,ne.useCallback)(()=>{L()},[L]);if(!e?.length)return(0,h.jsx)("div",{className:(0,ie.default)("bar-chart-empty",J["bat-chart-empty"]),children:"Empty..."});let P=a,O=t-P.left-P.right,p=o-P.top-P.bottom,f=e[0].data?.map(d=>d?.label),w=(0,U.scaleBand)({range:[0,O],domain:f,padding:.2}),V=(0,U.scaleBand)({range:[0,w.bandwidth()],domain:e.map((d,m)=>m.toString()),padding:.1}),G=(0,U.scaleLinear)({range:[p,0],domain:[0,Math.max(...e.map(d=>Math.max(...d.data.map(m=>m?.value||0))))]}),R=e.map((d,m)=>({label:d.label,value:"",color:b.colors[m%b.colors.length]}));return(0,h.jsxs)("div",{className:(0,ie.default)("bar-chart",M,J["bar-chart"]),children:[(0,h.jsx)("svg",{width:t,height:o,children:(0,h.jsxs)(le.Group,{left:P.left,top:P.top,children:[(0,h.jsx)(ae,{width:O,height:p,xScale:w,yScale:G,gridVisibility:s}),e.map((d,m)=>(0,h.jsx)(le.Group,{children:d.data.map(x=>{let K=w(x.label);if(K===void 0)return null;let l=V.bandwidth(),n=K+(V(m.toString())??0),H=Oe=>I(Oe,x.value,x.label,d.label,m);return(0,h.jsx)(Fe.Bar,{x:n,y:G(x.value),width:l,height:p-(G(x.value)??0),fill:b.colors[m%b.colors.length],onMouseMove:r?H:void 0,onMouseLeave:r?X:void 0},`bar-${m}-${x.label}`)})},m)),(0,h.jsx)(ee.AxisLeft,{scale:G}),(0,h.jsx)(ee.AxisBottom,{scale:w,top:p})]})}),r&&F&&y&&(0,h.jsx)(N,{top:c,left:g,children:(0,h.jsxs)("div",{children:[(0,h.jsx)("div",{children:y.yLabel}),(0,h.jsxs)("div",{children:[y.xLabel,": ",y.value]})]})}),i&&(0,h.jsx)(T,{items:R,orientation:_,className:J["bar-chart-legend"]})]})};Me.displayName="BarChart";var se=Me;var v=require("@visx/xychart"),pe=W(require("clsx"));var A={"line-chart":"line-chart-module__line-chart___ITM3d","line-chart__tooltip":"line-chart-module__line-chart__tooltip___aqcme","line-chart__tooltip-date":"line-chart-module__line-chart__tooltip-date___4Dzab","line-chart__tooltip-row":"line-chart-module__line-chart__tooltip-row___6A37G","line-chart__tooltip-label":"line-chart-module__line-chart__tooltip-label___IvnFF"};var u=require("react/jsx-runtime"),$e=({tooltipData:e})=>{let t=e?.nearestDatum?.datum;if(!t)return null;let o=Object.entries(e?.datumByKey||{}).map(([a,{datum:r}])=>({key:a,value:r.value})).sort((a,r)=>r.value-a.value);return(0,u.jsxs)("div",{className:A["line-chart__tooltip"],children:[(0,u.jsx)("div",{className:A["line-chart__tooltip-date"],children:t.date.toLocaleDateString()}),o.map(a=>(0,u.jsxs)("div",{className:A["line-chart__tooltip-row"],children:[(0,u.jsxs)("span",{className:A["line-chart__tooltip-label"],children:[a.key,":"]}),(0,u.jsx)("span",{className:A["line-chart__tooltip-value"],children:a.value})]},a.key))]})},Ze=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"}),je=({data:e,width:t,height:o,margin:a={top:20,right:20,bottom:40,left:40},className:r,withTooltips:i=!0,showLegend:_=!1,legendOrientation:M="horizontal"})=>{let s=B();if(!e?.length)return(0,u.jsx)("div",{className:(0,pe.default)("line-chart-empty",A["line-chart-empty"]),children:"Empty..."});let b=e.map((c,y)=>({label:c.label,value:"",color:s.colors[y%s.colors.length]})),F={xAccessor:c=>c.date,yAccessor:c=>c.value},g=(0,v.buildChartTheme)({backgroundColor:s.backgroundColor,colors:s.colors,gridStyles:s.gridStyles,tickLength:s?.tickLength||0,gridColor:s?.gridColor||"",gridColorDark:s?.gridColorDark||""});return(0,u.jsxs)("div",{className:(0,pe.default)("line-chart",A["line-chart"],r),children:[(0,u.jsxs)(v.XYChart,{theme:g,width:t,height:o,margin:a,xScale:{type:"time"},yScale:{type:"linear",nice:!0},children:[(0,u.jsx)(v.AnimatedGrid,{columns:!1,numTicks:4}),(0,u.jsx)(v.AnimatedAxis,{orientation:"bottom",numTicks:5,tickFormat:Ze}),(0,u.jsx)(v.AnimatedAxis,{orientation:"left",numTicks:4}),e.map((c,y)=>(0,u.jsx)(v.AnimatedLineSeries,{dataKey:c?.label,data:c.data,...F,stroke:g.colors[y%g.colors.length],strokeWidth:2},c?.label)),i&&(0,u.jsx)(v.Tooltip,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:$e})]}),_&&(0,u.jsx)(T,{items:b,orientation:M,className:A["line-chart-legend"]})]})},me=je;var Se=require("@visx/group"),Ne=require("@visx/shape"),Ae=W(require("clsx"));var Le=require("@visx/event"),Be=require("@visx/tooltip"),ce=require("react"),Qe=({withTooltips:e})=>{let{tooltipOpen:t,tooltipLeft:o,tooltipTop:a,tooltipData:r,hideTooltip:i,showTooltip:_}=(0,Be.useTooltip)(),M=(0,ce.useCallback)((b,F)=>{if(!e)return;let g=(0,Le.localPoint)(b);g&&_({tooltipData:F,tooltipLeft:g.x,tooltipTop:g.y-10})},[e,_]),s=(0,ce.useCallback)(()=>{e&&i()},[e,i]);return{onMouseMove:M,onMouseLeave:s,tooltipOpen:t,tooltipData:r,tooltipLeft:o,tooltipTop:a}},te=Qe;var de={"pie-chart":"pie-chart-module__pie-chart___R12Vh"};var D=require("react/jsx-runtime"),Je=({data:e,width:t,height:o,withTooltips:a=!1,innerRadius:r=0,className:i,showLegend:_,legendOrientation:M})=>{let s=B(),{onMouseMove:b,onMouseLeave:F,tooltipOpen:g,tooltipData:c,tooltipLeft:y,tooltipTop:L}=te({withTooltips:a}),z=Math.min(t,o)/2,I=t/2,X=o/2,P={value:p=>p.value,fill:p=>p.color||s.colors[p.index]},O=e.map((p,f)=>({label:p.label,value:p.value.toString(),color:s.colors[f%s.colors.length]}));return(0,D.jsxs)("div",{className:(0,Ae.default)("pie-chart",de["pie-chart"],i),children:[(0,D.jsx)("svg",{width:t,height:o,children:(0,D.jsx)(Se.Group,{top:X,left:I,children:(0,D.jsx)(Ne.Pie,{data:e,pieValue:P.value,outerRadius:z-20,innerRadius:r,children:p=>p.arcs.map((f,w)=>{let[V,G]=p.path.centroid(f),R=f.endAngle-f.startAngle>=.25,d=x=>b(x,f.data),m={d:p.path(f)||"",fill:P.fill(f)};return a&&(m.onMouseMove=d,m.onMouseLeave=F),(0,D.jsxs)("g",{children:[(0,D.jsx)("path",{...m}),R&&(0,D.jsx)("text",{x:V,y:G,dy:".33em",fill:s.labelBackgroundColor||Y.labelBackgroundColor,fontSize:12,textAnchor:"middle",pointerEvents:"none",children:f.data.label})]},`arc-${w}`)})})})}),_&&(0,D.jsx)(T,{items:O,orientation:M,className:de["pie-chart-legend"]}),a&&g&&c&&(0,D.jsx)(N,{data:c,top:L,left:y,style:{transform:"translate(-50%, -100%)"}})]})},he=Je;var we=require("@visx/event"),ue=require("@visx/group"),Ge=W(require("@visx/shape/lib/shapes/Pie")),_e=require("@visx/text"),Re=require("@visx/tooltip"),ze=W(require("clsx")),oe=require("react");var $={"pie-semi-circle-chart":"pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9","pie-semi-circle-chart-legend":"pie-semi-circle-chart-module__pie-semi-circle-chart-legend___c8W1Y",label:"pie-semi-circle-chart-module__label___nPqOg",note:"pie-semi-circle-chart-module__note___LpBZQ"};var C=require("react/jsx-runtime"),et=({data:e,width:t,label:o,note:a,className:r,withTooltips:i=!1,clockwise:_=!0,thickness:M=.4,showLegend:s,legendOrientation:b})=>{let F=B(),{tooltipOpen:g,tooltipLeft:c,tooltipTop:y,tooltipData:L,hideTooltip:z,showTooltip:I}=(0,Re.useTooltip)(),X=t/2,P=t/2,O=t/2,p=.03,f=O*(1-M+p),w=e.map((l,n)=>({...l,index:n})),V=_?-Math.PI/2:Math.PI/2,G=_?Math.PI/2:-Math.PI/2,R={value:l=>l.value,sort:(l,n)=>n.value-l.value,fill:l=>l.color||F.colors[l.index%F.colors.length]},d=(0,oe.useCallback)((l,n)=>{let H=(0,we.localPoint)(l);H&&I({tooltipData:n.data,tooltipLeft:H.x,tooltipTop:H.y-10})},[I]),m=(0,oe.useCallback)(()=>{z()},[z]),x=(0,oe.useCallback)(l=>n=>{d(n,l)},[d]),K=e.map((l,n)=>({label:l.label,value:l.valueDisplay||l.value.toString(),color:R.fill({...l,index:n})}));return(0,C.jsxs)("div",{className:(0,ze.default)("pie-semi-circle-chart",$["pie-semi-circle-chart"],r),children:[(0,C.jsx)("svg",{width:t,height:P,children:(0,C.jsxs)(ue.Group,{top:X,left:X,children:[(0,C.jsx)(Ge.default,{data:w,pieValue:R.value,outerRadius:O,innerRadius:f,cornerRadius:3,padAngle:p,startAngle:V,endAngle:G,pieSort:R.sort,children:l=>l.arcs.map(n=>(0,C.jsx)("g",{onMouseMove:x(n),onMouseLeave:m,children:(0,C.jsx)("path",{d:l.path(n)||"",fill:R.fill(n.data)})},n.data.label))}),(0,C.jsxs)(ue.Group,{children:[(0,C.jsx)(_e.Text,{textAnchor:"middle",verticalAnchor:"start",y:-40,className:$.label,children:o}),(0,C.jsx)(_e.Text,{textAnchor:"middle",verticalAnchor:"start",y:-20,className:$.note,children:a})]})]})}),i&&g&&L&&(0,C.jsx)(N,{data:{label:L.label,value:L.value,valueDisplay:L.valueDisplay},top:y,left:c}),s&&(0,C.jsx)(T,{items:K,orientation:b,className:$["pie-semi-circle-chart-legend"]})]})},ge=et;0&&(module.exports={BarChart,BaseTooltip,Legend,LineChart,PieChart,PieSemiCircleChart,ThemeProvider,useChartMouseHandler});
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/bar-chart/bar-chart.tsx","../src/providers/theme/theme-provider.tsx","../src/providers/theme/themes.ts","../src/components/grid-control/grid-control.tsx","../src/components/grid-control/grid-control.module.scss","../src/components/legend/base-legend.tsx","../src/components/legend/legend.module.scss","../src/components/tooltip/base-tooltip.module.scss","../src/components/tooltip/base-tooltip.tsx","../src/components/bar-chart/bar-chart.module.scss","../src/components/line-chart/line-chart.tsx","../src/components/line-chart/line-chart.module.scss","../src/components/pie-chart/pie-chart.tsx","../src/hooks/use-chart-mouse-handler.ts","../src/components/pie-chart/pie-chart.module.scss","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"sourcesContent":["// Charts\nexport { BarChart } from './components/bar-chart';\nexport { LineChart } from './components/line-chart';\nexport { PieChart } from './components/pie-chart';\nexport { PieSemiCircleChart } from './components/pie-semi-circle-chart';\n\n// Chart components\nexport { BaseTooltip } from './components/tooltip';\nexport { Legend } from './components/legend';\n\n// Providers\nexport { ThemeProvider } from './providers/theme';\n\n// Hooks\nexport { default as useChartMouseHandler } from './hooks/use-chart-mouse-handler';\n\n// Types\nexport type * from './components/shared/types';\nexport type { BaseTooltipProps } from './components/tooltip';\n","import { AxisLeft, AxisBottom } from '@visx/axis';\nimport { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { scaleBand, scaleLinear } from '@visx/scale';\nimport { Bar } from '@visx/shape';\nimport { useTooltip } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { FC, useCallback, type MouseEvent } from 'react';\nimport { useChartTheme } from '../../providers/theme';\nimport { GridControl } from '../grid-control';\nimport { Legend } from '../legend';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './bar-chart.module.scss';\nimport type { BaseChartProps, SeriesData } from '../shared/types';\n\ninterface BarChartProps extends BaseChartProps< SeriesData[] > {}\n\ntype BarChartTooltipData = { value: number; xLabel: string; yLabel: string; seriesIndex: number };\n\nconst BarChart: FC< BarChartProps > = ( {\n\tdata,\n\twidth,\n\theight,\n\tmargin = { top: 20, right: 20, bottom: 40, left: 40 },\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tclassName,\n\tgridVisibility = 'x',\n} ) => {\n\tconst theme = useChartTheme();\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< BarChartTooltipData >();\n\n\tconst handleMouseMove = useCallback(\n\t\t(\n\t\t\tevent: MouseEvent< SVGRectElement >,\n\t\t\tvalue: number,\n\t\t\txLabel: string,\n\t\t\tyLabel: string,\n\t\t\tseriesIndex: number\n\t\t) => {\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) return;\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: { value, xLabel, yLabel, seriesIndex },\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tif ( ! data?.length ) {\n\t\treturn <div className={ clsx( 'bar-chart-empty', styles[ 'bat-chart-empty' ] ) }>Empty...</div>;\n\t}\n\n\tconst margins = margin;\n\tconst xMax = width - margins.left - margins.right;\n\tconst yMax = height - margins.top - margins.bottom;\n\n\t// Get labels for x-axis from the first series (assuming all series have same labels)\n\tconst labels = data[ 0 ].data?.map( d => d?.label );\n\n\t// Create scales\n\tconst xScale = scaleBand< string >( {\n\t\trange: [ 0, xMax ],\n\t\tdomain: labels,\n\t\tpadding: 0.2,\n\t} );\n\n\tconst innerScale = scaleBand( {\n\t\trange: [ 0, xScale.bandwidth() ],\n\t\tdomain: data.map( ( _, i ) => i.toString() ),\n\t\tpadding: 0.1,\n\t} );\n\n\tconst yScale = scaleLinear< number >( {\n\t\trange: [ yMax, 0 ],\n\t\tdomain: [\n\t\t\t0,\n\t\t\tMath.max( ...data.map( series => Math.max( ...series.data.map( d => d?.value || 0 ) ) ) ),\n\t\t],\n\t} );\n\n\t// Create legend items from group labels, this iterates over groups rather than data points\n\tconst legendItems = data.map( ( group, index ) => ( {\n\t\tlabel: group.label, // Label for each unique group\n\t\tvalue: '', // Empty string since we don't want to show a specific value\n\t\tcolor: theme.colors[ index % theme.colors.length ],\n\t} ) );\n\n\treturn (\n\t\t<div className={ clsx( 'bar-chart', className, styles[ 'bar-chart' ] ) }>\n\t\t\t<svg width={ width } height={ height }>\n\t\t\t\t<Group left={ margins.left } top={ margins.top }>\n\t\t\t\t\t<GridControl\n\t\t\t\t\t\twidth={ xMax }\n\t\t\t\t\t\theight={ yMax }\n\t\t\t\t\t\txScale={ xScale }\n\t\t\t\t\t\tyScale={ yScale }\n\t\t\t\t\t\tgridVisibility={ gridVisibility }\n\t\t\t\t\t/>\n\t\t\t\t\t{ data.map( ( series, seriesIndex ) => (\n\t\t\t\t\t\t<Group key={ seriesIndex }>\n\t\t\t\t\t\t\t{ series.data.map( d => {\n\t\t\t\t\t\t\t\tconst xPos = xScale( d.label );\n\t\t\t\t\t\t\t\tif ( xPos === undefined ) return null;\n\n\t\t\t\t\t\t\t\tconst barWidth = innerScale.bandwidth();\n\t\t\t\t\t\t\t\tconst barX = xPos + ( innerScale( seriesIndex.toString() ) ?? 0 );\n\n\t\t\t\t\t\t\t\tconst handleBarMouseMove = event =>\n\t\t\t\t\t\t\t\t\thandleMouseMove( event, d.value, d.label, series.label, seriesIndex );\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Bar\n\t\t\t\t\t\t\t\t\t\tkey={ `bar-${ seriesIndex }-${ d.label }` }\n\t\t\t\t\t\t\t\t\t\tx={ barX }\n\t\t\t\t\t\t\t\t\t\ty={ yScale( d.value ) }\n\t\t\t\t\t\t\t\t\t\twidth={ barWidth }\n\t\t\t\t\t\t\t\t\t\theight={ yMax - ( yScale( d.value ) ?? 0 ) }\n\t\t\t\t\t\t\t\t\t\tfill={ theme.colors[ seriesIndex % theme.colors.length ] }\n\t\t\t\t\t\t\t\t\t\tonMouseMove={ withTooltips ? handleBarMouseMove : undefined }\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={ withTooltips ? handleMouseLeave : undefined }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Group>\n\t\t\t\t\t) ) }\n\t\t\t\t\t<AxisLeft scale={ yScale } />\n\t\t\t\t\t<AxisBottom scale={ xScale } top={ yMax } />\n\t\t\t\t</Group>\n\t\t\t</svg>\n\n\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t<BaseTooltip top={ tooltipTop } left={ tooltipLeft }>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<div>{ tooltipData.yLabel }</div>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{ tooltipData.xLabel }: { tooltipData.value }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</BaseTooltip>\n\t\t\t) }\n\n\t\t\t{ showLegend && (\n\t\t\t\t<Legend\n\t\t\t\t\titems={ legendItems }\n\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\tclassName={ styles[ 'bar-chart-legend' ] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nBarChart.displayName = 'BarChart';\nexport default BarChart;\n","import { createContext, useContext, FC, ReactNode } from 'react';\nimport { defaultTheme } from './themes';\nimport type { ChartTheme } from '../../components/shared/types';\n\n/**\n * Context for sharing theme configuration across components\n */\nconst ThemeContext = createContext< ChartTheme >( defaultTheme );\n\n/**\n * Hook to access chart theme\n * @return {object} A built theme configuration compatible with visx charts\n */\nconst useChartTheme = () => {\n\tconst theme = useContext( ThemeContext );\n\treturn theme;\n};\n\n/**\n * Props for the ThemeProvider component\n */\ntype ThemeProviderProps = {\n\t/** Optional partial theme override */\n\ttheme?: Partial< ChartTheme >;\n\t/** Child components that will have access to the theme */\n\tchildren: ReactNode;\n};\n\n// Provider component for chart theming\n// Allows theme customization through props while maintaining default values\nconst ThemeProvider: FC< ThemeProviderProps > = ( { theme = {}, children } ) => {\n\tconst mergedTheme = { ...defaultTheme, ...theme };\n\treturn <ThemeContext.Provider value={ mergedTheme }>{ children }</ThemeContext.Provider>;\n};\n\nexport { ThemeProvider, useChartTheme };\n","import type { ChartTheme } from '../../components/shared/types';\n\n/**\n * Default theme configuration\n */\nconst defaultTheme: ChartTheme = {\n\tbackgroundColor: '#FFFFFF', // chart background color\n\tlabelBackgroundColor: '#FFFFFF', // label background color\n\tcolors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],\n\tgridStyles: {\n\t\tstroke: '#787C82',\n\t\tstrokeWidth: 1,\n\t},\n\ttickLength: 0,\n\tgridColor: '',\n\tgridColorDark: '',\n};\n\n/**\n * Jetpack theme configuration\n */\nconst jetpackTheme: ChartTheme = {\n\tbackgroundColor: '#FFFFFF', // chart background color\n\tlabelBackgroundColor: '#FFFFFF', // label background color\n\tcolors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],\n\tgridStyles: {\n\t\tstroke: '#787C82',\n\t\tstrokeWidth: 1,\n\t},\n\ttickLength: 0,\n\tgridColor: '',\n\tgridColorDark: '',\n};\n\n/**\n * Woo theme configuration\n */\nconst wooTheme: ChartTheme = {\n\tbackgroundColor: '#FFFFFF', // chart background color\n\tlabelBackgroundColor: '#FFFFFF', // label background color\n\tcolors: [ '#80C8FF', '#B999FF', '#3858E9' ],\n\tgridStyles: {\n\t\tstroke: '#787C82',\n\t\tstrokeWidth: 1,\n\t},\n\ttickLength: 0,\n\tgridColor: '',\n\tgridColorDark: '',\n};\n\nexport { defaultTheme, jetpackTheme, wooTheme };\n","import { GridRows, GridColumns } from '@visx/grid';\nimport React from 'react';\nimport styles from './grid-control.module.scss';\nimport type { GridProps } from '../shared/types';\n\nconst GridControl: React.FC< GridProps > = ( {\n\twidth,\n\theight,\n\txScale,\n\tyScale,\n\tgridVisibility = 'x',\n\ttop = 0,\n} ) => {\n\treturn (\n\t\t<g transform={ `translate(0, ${ top })` } className={ styles[ 'grid-control' ] }>\n\t\t\t{ gridVisibility.includes( 'x' ) && <GridRows scale={ xScale } width={ width } /> }\n\t\t\t{ gridVisibility.includes( 'y' ) && <GridColumns scale={ yScale } height={ height } /> }\n\t\t</g>\n\t);\n};\n\nexport default GridControl;\n","import 'css-chunk:src/components/grid-control/grid-control.module.scss';export default {\n \"grid-control\": \"grid-control-module__grid-control___KOnZN\"\n};","import { LegendOrdinal } from '@visx/legend';\nimport { scaleOrdinal } from '@visx/scale';\nimport clsx from 'clsx';\nimport { FC } from 'react';\nimport styles from './legend.module.scss';\nimport type { LegendProps } from './types';\n\n/**\n * Base legend component that displays color-coded items with labels using visx\n * @param {object} props - Component properties\n * @param {Array} props.items - Array of legend items to display\n * @param {string} props.className - Additional CSS class names\n * @param {string} props.orientation - Layout orientation (horizontal/vertical)\n * @return {JSX.Element} Rendered legend component\n */\nconst orientationToFlexDirection = {\n\thorizontal: 'row' as const,\n\tvertical: 'column' as const,\n};\n\nexport const BaseLegend: FC< LegendProps > = ( {\n\titems,\n\tclassName,\n\torientation = 'horizontal',\n} ) => {\n\tconst legendScale = scaleOrdinal( {\n\t\tdomain: items.map( item => item.label ),\n\t\trange: items.map( item => item.color ),\n\t} );\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( styles.legend, styles[ `legend--${ orientation }` ], className ) }\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t<LegendOrdinal\n\t\t\t\tscale={ legendScale }\n\t\t\t\tdirection={ orientationToFlexDirection[ orientation ] }\n\t\t\t\tshape=\"rect\"\n\t\t\t\tshapeWidth={ 16 }\n\t\t\t\tshapeHeight={ 16 }\n\t\t\t\tclassName={ styles[ 'legend-items' ] }\n\t\t\t>\n\t\t\t\t{ labels => (\n\t\t\t\t\t<div className={ styles[ `legend--${ orientation }` ] }>\n\t\t\t\t\t\t{ labels.map( label => (\n\t\t\t\t\t\t\t<div key={ label.text } className={ styles[ 'legend-item' ] }>\n\t\t\t\t\t\t\t\t<svg width={ 16 } height={ 16 }>\n\t\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\t\twidth={ 16 }\n\t\t\t\t\t\t\t\t\t\theight={ 16 }\n\t\t\t\t\t\t\t\t\t\tfill={ label.value }\n\t\t\t\t\t\t\t\t\t\tclassName={ styles[ 'legend-item-swatch' ] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t<span className={ styles[ 'legend-item-label' ] }>\n\t\t\t\t\t\t\t\t\t{ label.text }\n\t\t\t\t\t\t\t\t\t{ items.find( item => item.label === label.text )?.value && (\n\t\t\t\t\t\t\t\t\t\t<span className={ styles[ 'legend-item-value' ] }>\n\t\t\t\t\t\t\t\t\t\t\t{ items.find( item => item.label === label.text )?.value }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</LegendOrdinal>\n\t\t</div>\n\t);\n};\n","import 'css-chunk:src/components/legend/legend.module.scss';export default {\n \"legend--horizontal\": \"legend-module__legend--horizontal___IUN13\",\n \"legend--vertical\": \"legend-module__legend--vertical___Scfzo\",\n \"legend-item\": \"legend-module__legend-item___feemn\",\n \"legend-item-swatch\": \"legend-module__legend-item-swatch___nRyXf\",\n \"legend-item-label\": \"legend-module__legend-item-label___ksx6I\",\n \"legend-item-value\": \"legend-module__legend-item-value___d9x1j\"\n};","import 'css-chunk:src/components/tooltip/base-tooltip.module.scss';export default {\n \"tooltip\": \"base-tooltip-module__tooltip___OfX6n\"\n};","import styles from './base-tooltip.module.scss';\nimport type { CSSProperties, ComponentType, ReactNode } from 'react';\n\ntype TooltipData = {\n\tlabel: string;\n\tvalue: number;\n\tvalueDisplay?: string;\n};\n\ntype TooltipComponentProps = {\n\tdata: TooltipData;\n\tclassName?: string;\n};\n\ntype TooltipCommonProps = {\n\ttop: number;\n\tleft: number;\n\tstyle?: CSSProperties;\n\tclassName?: string;\n};\n\ntype DefaultDataTooltip = {\n\tdata: TooltipData;\n\tcomponent?: ComponentType< TooltipComponentProps >;\n\tchildren?: never;\n};\n\ntype CustomTooltip = {\n\tchildren: ReactNode;\n\tdata?: never;\n\tcomponent?: never;\n};\n\ntype BaseTooltipProps = TooltipCommonProps & ( DefaultDataTooltip | CustomTooltip );\n\nconst DefaultTooltipContent = ( { data }: TooltipComponentProps ) => (\n\t<>\n\t\t{ data?.label }: { data?.valueDisplay || data?.value }\n\t</>\n);\n\nexport const BaseTooltip = ( {\n\tdata,\n\ttop,\n\tleft,\n\tcomponent: Component = DefaultTooltipContent,\n\tchildren,\n\tclassName,\n}: BaseTooltipProps ) => {\n\treturn (\n\t\t<div className={ styles.tooltip } style={ { top, left } } role=\"tooltip\">\n\t\t\t{ children || <Component data={ data } className={ className } /> }\n\t\t</div>\n\t);\n};\n\nexport type { BaseTooltipProps, TooltipData };\n","import 'css-chunk:src/components/bar-chart/bar-chart.module.scss';export default {\n \"bar-chart\": \"bar-chart-module__bar-chart___lmYNi\",\n \"bar-chart-legend\": \"bar-chart-module__bar-chart-legend___vgKKq\"\n};","import {\n\tXYChart,\n\tAnimatedLineSeries,\n\tAnimatedAxis,\n\tAnimatedGrid,\n\tTooltip,\n\tbuildChartTheme,\n} from '@visx/xychart';\nimport clsx from 'clsx';\nimport { FC } from 'react';\nimport { useChartTheme } from '../../providers/theme/theme-provider';\nimport { Legend } from '../legend';\nimport styles from './line-chart.module.scss';\nimport type { BaseChartProps, DataPointDate, SeriesData } from '../shared/types';\n\n// TODO: revisit grid and axis options - accept as props for frid lines, axis, values: x, y, all, none\n\ninterface LineChartProps extends BaseChartProps< SeriesData[] > {}\n\ntype TooltipData = {\n\tdate: Date;\n\t[ key: string ]: number | Date;\n};\n\ntype TooltipDatum = {\n\tkey: string;\n\tvalue: number;\n};\n\nconst renderTooltip = ( {\n\ttooltipData,\n}: {\n\ttooltipData?: {\n\t\tnearestDatum?: {\n\t\t\tdatum: TooltipData;\n\t\t\tkey: string;\n\t\t};\n\t\tdatumByKey?: { [ key: string ]: { datum: TooltipData } };\n\t};\n} ) => {\n\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\tif ( ! nearestDatum ) return null;\n\n\tconst tooltipPoints: TooltipDatum[] = Object.entries( tooltipData?.datumByKey || {} )\n\t\t.map( ( [ key, { datum } ] ) => ( {\n\t\t\tkey,\n\t\t\tvalue: datum.value as number,\n\t\t} ) )\n\t\t.sort( ( a, b ) => b.value - a.value );\n\n\treturn (\n\t\t<div className={ styles[ 'line-chart__tooltip' ] }>\n\t\t\t<div className={ styles[ 'line-chart__tooltip-date' ] }>\n\t\t\t\t{ nearestDatum.date.toLocaleDateString() }\n\t\t\t</div>\n\t\t\t{ tooltipPoints.map( point => (\n\t\t\t\t<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-label' ] }>{ point.key }:</span>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-value' ] }>{ point.value }</span>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</div>\n\t);\n};\n\nconst formatDateTick = ( value: number ) => {\n\tconst date = new Date( value );\n\treturn date.toLocaleDateString( undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t} );\n};\n\nconst LineChart: FC< LineChartProps > = ( {\n\tdata,\n\twidth,\n\theight,\n\tmargin = { top: 20, right: 20, bottom: 40, left: 40 },\n\tclassName,\n\twithTooltips = true,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n} ) => {\n\tconst providerTheme = useChartTheme();\n\n\tif ( ! data?.length ) {\n\t\treturn (\n\t\t\t<div className={ clsx( 'line-chart-empty', styles[ 'line-chart-empty' ] ) }>Empty...</div>\n\t\t);\n\t}\n\n\t// Create legend items from group labels, this iterates over groups rather than data points\n\tconst legendItems = data.map( ( group, index ) => ( {\n\t\tlabel: group.label, // Label for each unique group\n\t\tvalue: '', // Empty string since we don't want to show a specific value\n\t\tcolor: providerTheme.colors[ index % providerTheme.colors.length ],\n\t} ) );\n\n\tconst accessors = {\n\t\txAccessor: ( d: DataPointDate ) => d.date,\n\t\tyAccessor: ( d: DataPointDate ) => d.value,\n\t};\n\n\tconst theme = buildChartTheme( {\n\t\tbackgroundColor: providerTheme.backgroundColor,\n\t\tcolors: providerTheme.colors,\n\t\tgridStyles: providerTheme.gridStyles,\n\t\ttickLength: providerTheme?.tickLength || 0,\n\t\tgridColor: providerTheme?.gridColor || '',\n\t\tgridColorDark: providerTheme?.gridColorDark || '',\n\t} );\n\n\treturn (\n\t\t<div className={ clsx( 'line-chart', styles[ 'line-chart' ], className ) }>\n\t\t\t<XYChart\n\t\t\t\ttheme={ theme }\n\t\t\t\twidth={ width }\n\t\t\t\theight={ height }\n\t\t\t\tmargin={ margin }\n\t\t\t\txScale={ { type: 'time' } }\n\t\t\t\tyScale={ { type: 'linear', nice: true } }\n\t\t\t>\n\t\t\t\t<AnimatedGrid columns={ false } numTicks={ 4 } />\n\t\t\t\t<AnimatedAxis orientation=\"bottom\" numTicks={ 5 } tickFormat={ formatDateTick } />\n\t\t\t\t<AnimatedAxis orientation=\"left\" numTicks={ 4 } />\n\n\t\t\t\t{ data.map( ( seriesData, index ) => (\n\t\t\t\t\t<AnimatedLineSeries\n\t\t\t\t\t\tkey={ seriesData?.label }\n\t\t\t\t\t\tdataKey={ seriesData?.label }\n\t\t\t\t\t\tdata={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart\n\t\t\t\t\t\t{ ...accessors }\n\t\t\t\t\t\tstroke={ theme.colors[ index % theme.colors.length ] }\n\t\t\t\t\t\tstrokeWidth={ 2 }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\n\t\t\t\t{ withTooltips && (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tsnapTooltipToDatumX\n\t\t\t\t\t\tsnapTooltipToDatumY\n\t\t\t\t\t\tshowSeriesGlyphs\n\t\t\t\t\t\trenderTooltip={ renderTooltip }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</XYChart>\n\n\t\t\t{ showLegend && (\n\t\t\t\t<Legend\n\t\t\t\t\titems={ legendItems }\n\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\tclassName={ styles[ 'line-chart-legend' ] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport default LineChart;\n","import 'css-chunk:src/components/line-chart/line-chart.module.scss';export default {\n \"line-chart\": \"line-chart-module__line-chart___ITM3d\",\n \"line-chart__tooltip\": \"line-chart-module__line-chart__tooltip___aqcme\",\n \"line-chart__tooltip-date\": \"line-chart-module__line-chart__tooltip-date___4Dzab\",\n \"line-chart__tooltip-row\": \"line-chart-module__line-chart__tooltip-row___6A37G\",\n \"line-chart__tooltip-label\": \"line-chart-module__line-chart__tooltip-label___IvnFF\"\n};","import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport clsx from 'clsx';\nimport { SVGProps } from 'react';\nimport useChartMouseHandler from '../../hooks/use-chart-mouse-handler';\nimport { useChartTheme, defaultTheme } from '../../providers/theme';\nimport { Legend } from '../legend';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-chart.module.scss';\nimport type { BaseChartProps, DataPoint } from '../shared/types';\n\n// TODO: add animation\n\ninterface PieChartProps extends BaseChartProps< DataPoint[] > {\n\t/**\n\t * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.\n\t */\n\tinnerRadius?: number;\n}\n\n/**\n * Renders a pie or donut chart using the provided data.\n *\n * @param {PieChartProps} props - Component props\n * @return {JSX.Element} The rendered chart component\n */\nconst PieChart = ( {\n\tdata,\n\twidth,\n\theight,\n\twithTooltips = false,\n\tinnerRadius = 0,\n\tclassName,\n\tshowLegend,\n\tlegendOrientation,\n}: PieChartProps ) => {\n\tconst providerTheme = useChartTheme();\n\tconst { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } =\n\t\tuseChartMouseHandler( {\n\t\t\twithTooltips,\n\t\t} );\n\n\t// Calculate radius based on width/height\n\tconst radius = Math.min( width, height ) / 2;\n\tconst centerX = width / 2;\n\tconst centerY = height / 2;\n\n\tconst accessors = {\n\t\tvalue: d => d.value,\n\t\t// Use the color property from the data object as a last resort. The theme provides colours by default.\n\t\tfill: d => d.color || providerTheme.colors[ d.index ],\n\t};\n\n\t// Create legend items from data\n\tconst legendItems = data.map( ( item, index ) => ( {\n\t\tlabel: item.label,\n\t\tvalue: item.value.toString(),\n\t\tcolor: providerTheme.colors[ index % providerTheme.colors.length ],\n\t} ) );\n\n\treturn (\n\t\t<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>\n\t\t\t<svg width={ width } height={ height }>\n\t\t\t\t<Group top={ centerY } left={ centerX }>\n\t\t\t\t\t<Pie\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\touterRadius={ radius - 20 } // Leave space for labels/tooltips\n\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\treturn pie.arcs.map( ( arc, index ) => {\n\t\t\t\t\t\t\t\tconst [ centroidX, centroidY ] = pie.path.centroid( arc );\n\t\t\t\t\t\t\t\tconst hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;\n\t\t\t\t\t\t\t\tconst handleMouseMove = event => onMouseMove( event, arc.data );\n\n\t\t\t\t\t\t\t\tconst pathProps: SVGProps< SVGPathElement > = {\n\t\t\t\t\t\t\t\t\td: pie.path( arc ) || '',\n\t\t\t\t\t\t\t\t\tfill: accessors.fill( arc ),\n\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\tif ( withTooltips ) {\n\t\t\t\t\t\t\t\t\tpathProps.onMouseMove = handleMouseMove;\n\t\t\t\t\t\t\t\t\tpathProps.onMouseLeave = onMouseLeave;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<g key={ `arc-${ index }` }>\n\t\t\t\t\t\t\t\t\t\t<path { ...pathProps } />\n\t\t\t\t\t\t\t\t\t\t{ hasSpaceForLabel && (\n\t\t\t\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\t\t\t\tx={ centroidX }\n\t\t\t\t\t\t\t\t\t\t\t\ty={ centroidY }\n\t\t\t\t\t\t\t\t\t\t\t\tdy=\".33em\"\n\t\t\t\t\t\t\t\t\t\t\t\tfill={\n\t\t\t\t\t\t\t\t\t\t\t\t\tproviderTheme.labelBackgroundColor || defaultTheme.labelBackgroundColor\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ 12 }\n\t\t\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ arc.data.label }\n\t\t\t\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t</Pie>\n\t\t\t\t</Group>\n\t\t\t</svg>\n\n\t\t\t{ showLegend && (\n\t\t\t\t<Legend\n\t\t\t\t\titems={ legendItems }\n\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\tclassName={ styles[ 'pie-chart-legend' ] }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t<BaseTooltip\n\t\t\t\t\tdata={ tooltipData }\n\t\t\t\t\ttop={ tooltipTop }\n\t\t\t\t\tleft={ tooltipLeft }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\ttransform: 'translate(-50%, -100%)',\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport default PieChart;\n","import { localPoint } from '@visx/event';\nimport { useTooltip } from '@visx/tooltip';\nimport { useCallback, type MouseEvent } from 'react';\nimport type { DataPoint } from '../components/shared/types';\n\ntype UseChartMouseHandlerProps = {\n\t/**\n\t * Whether tooltips are enabled\n\t */\n\twithTooltips: boolean;\n};\n\ntype UseChartMouseHandlerReturn = {\n\t/**\n\t * Handler for mouse move events\n\t */\n\tonMouseMove: ( event: React.MouseEvent< SVGElement >, data: DataPoint ) => void;\n\t/**\n\t * Handler for mouse leave events\n\t */\n\tonMouseLeave: () => void;\n\t/**\n\t * Whether the tooltip is currently open\n\t */\n\ttooltipOpen: boolean;\n\t/**\n\t * The current tooltip data\n\t */\n\ttooltipData: DataPoint | null;\n\t/**\n\t * The current tooltip left position\n\t */\n\ttooltipLeft: number | undefined;\n\t/**\n\t * The current tooltip top position\n\t */\n\ttooltipTop: number | undefined;\n};\n\n/**\n * Hook to handle mouse interactions for chart components\n *\n * @param {UseChartMouseHandlerProps} props - Hook configuration\n * @return {UseChartMouseHandlerReturn} Object containing handlers and tooltip state\n */\nconst useChartMouseHandler = ( {\n\twithTooltips,\n}: UseChartMouseHandlerProps ): UseChartMouseHandlerReturn => {\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPoint >();\n\n\t// TODO: either debounce/throttle or use useTooltipInPortal with built-in debounce\n\tconst onMouseMove = useCallback(\n\t\t( event: MouseEvent< SVGElement >, data: DataPoint ) => {\n\t\t\tif ( ! withTooltips ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: data,\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ withTooltips, showTooltip ]\n\t);\n\n\tconst onMouseLeave = useCallback( () => {\n\t\tif ( ! withTooltips ) {\n\t\t\treturn;\n\t\t}\n\t\thideTooltip();\n\t}, [ withTooltips, hideTooltip ] );\n\n\treturn {\n\t\tonMouseMove,\n\t\tonMouseLeave,\n\t\ttooltipOpen,\n\t\ttooltipData,\n\t\ttooltipLeft,\n\t\ttooltipTop,\n\t};\n};\n\nexport default useChartMouseHandler;\n","import 'css-chunk:src/components/pie-chart/pie-chart.module.scss';export default {\n \"pie-chart\": \"pie-chart-module__pie-chart___R12Vh\"\n};","import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport Pie, { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport { Text } from '@visx/text';\nimport { useTooltip } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { FC, useCallback } from 'react';\nimport { useChartTheme } from '../../providers/theme/theme-provider';\nimport { Legend } from '../legend';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-semi-circle-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage } from '../shared/types';\n\ninterface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Label text to display above the chart\n\t */\n\tlabel: string;\n\t/**\n\t * Note text to display below the label\n\t */\n\tnote: string;\n\t/**\n\t * Direction of chart rendering\n\t * true for clockwise, false for counter-clockwise\n\t */\n\tclockwise?: boolean;\n\t/**\n\t * Thickness of the pie chart. A value between 0 and 1\n\t */\n\tthickness?: number;\n}\n\ntype ArcData = PieArcDatum< DataPointPercentage >;\n\nconst PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( {\n\tdata,\n\twidth,\n\tlabel,\n\tnote,\n\tclassName,\n\twithTooltips = false,\n\tclockwise = true,\n\tthickness = 0.4,\n\tshowLegend,\n\tlegendOrientation,\n} ) => {\n\tconst providerTheme = useChartTheme();\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPointPercentage >();\n\n\tconst centerX = width / 2;\n\tconst height = width / 2;\n\tconst radius = width / 2;\n\tconst pad = 0.03;\n\tconst innerRadius = radius * ( 1 - thickness + pad );\n\n\t// Map the data to include index for color assignment\n\tconst dataWithIndex = data.map( ( d, index ) => ( {\n\t\t...d,\n\t\tindex,\n\t} ) );\n\n\t// Set the clockwise direction based on the prop\n\tconst startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n\tconst endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\n\n\tconst accessors = {\n\t\tvalue: ( d: DataPointPercentage & { index: number } ) => d.value,\n\t\tsort: (\n\t\t\ta: DataPointPercentage & { index: number },\n\t\t\tb: DataPointPercentage & { index: number }\n\t\t) => b.value - a.value,\n\t\t// Use the color property from the data object as a last resort. The theme provides colours by default.\n\t\tfill: ( d: DataPointPercentage & { index: number } ) =>\n\t\t\td.color || providerTheme.colors[ d.index % providerTheme.colors.length ],\n\t};\n\n\tconst handleMouseMove = useCallback(\n\t\t( event: React.MouseEvent, arc: ArcData ) => {\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) return;\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: arc.data,\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tconst handleArcMouseMove = useCallback(\n\t\t( arc: ArcData ) => ( event: React.MouseEvent ) => {\n\t\t\thandleMouseMove( event, arc );\n\t\t},\n\t\t[ handleMouseMove ]\n\t);\n\n\t// Create legend items\n\tconst legendItems = data.map( ( item, index ) => ( {\n\t\tlabel: item.label,\n\t\tvalue: item.valueDisplay || item.value.toString(),\n\t\tcolor: accessors.fill( { ...item, index } ),\n\t} ) );\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }\n\t\t>\n\t\t\t<svg width={ width } height={ height }>\n\t\t\t\t{ /* Main chart group that contains both the pie and text elements */ }\n\t\t\t\t<Group top={ centerX } left={ centerX }>\n\t\t\t\t\t{ /* Pie chart */ }\n\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\touterRadius={ radius }\n\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\tpadAngle={ pad }\n\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\tpieSort={ accessors.sort }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\treturn pie.arcs.map( arc => (\n\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\tonMouseMove={ handleArcMouseMove( arc ) }\n\t\t\t\t\t\t\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path d={ pie.path( arc ) || '' } fill={ accessors.fill( arc.data ) } />\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t) );\n\t\t\t\t\t\t} }\n\t\t\t\t\t</Pie>\n\n\t\t\t\t\t<Group>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\ty={ -40 } // double font size to make room for a note\n\t\t\t\t\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\ty={ -20 } // font size with padding\n\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</Group>\n\t\t\t\t</Group>\n\t\t\t</svg>\n\n\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t<BaseTooltip\n\t\t\t\t\tdata={ {\n\t\t\t\t\t\tlabel: tooltipData.label,\n\t\t\t\t\t\tvalue: tooltipData.value,\n\t\t\t\t\t\tvalueDisplay: tooltipData.valueDisplay,\n\t\t\t\t\t} }\n\t\t\t\t\ttop={ tooltipTop }\n\t\t\t\t\tleft={ tooltipLeft }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ showLegend && (\n\t\t\t\t<Legend\n\t\t\t\t\titems={ legendItems }\n\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\tclassName={ styles[ 'pie-semi-circle-chart-legend' ] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport default PieSemiCircleChart;\n","import 'css-chunk:src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n \"pie-semi-circle-chart\": \"pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9\",\n \"pie-semi-circle-chart-legend\": \"pie-semi-circle-chart-module__pie-semi-circle-chart-legend___c8W1Y\",\n \"label\": \"pie-semi-circle-chart-module__label___nPqOg\",\n \"note\": \"pie-semi-circle-chart-module__note___LpBZQ\"\n};"],"mappings":"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","names":["index_exports","__export","bar_chart_default","BaseTooltip","BaseLegend","line_chart_default","pie_chart_default","pie_semi_circle_chart_default","ThemeProvider","use_chart_mouse_handler_default","__toCommonJS","import_axis","import_event","import_group","import_scale","import_shape","import_tooltip","import_clsx","import_react","import_react","defaultTheme","import_jsx_runtime","ThemeContext","defaultTheme","useChartTheme","ThemeProvider","theme","children","mergedTheme","import_grid","grid_control_module_default","import_jsx_runtime","GridControl","width","height","xScale","yScale","gridVisibility","top","grid_control_module_default","grid_control_default","import_legend","import_scale","import_clsx","legend_module_default","import_jsx_runtime","orientationToFlexDirection","BaseLegend","items","className","orientation","legendScale","item","clsx","legend_module_default","labels","label","base_tooltip_module_default","import_jsx_runtime","DefaultTooltipContent","data","BaseTooltip","top","left","Component","children","className","base_tooltip_module_default","bar_chart_module_default","import_jsx_runtime","BarChart","data","width","height","margin","withTooltips","showLegend","legendOrientation","className","gridVisibility","theme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","handleMouseMove","event","value","xLabel","yLabel","seriesIndex","coords","handleMouseLeave","clsx","bar_chart_module_default","margins","xMax","yMax","labels","xScale","innerScale","_","i","yScale","series","d","legendItems","group","index","grid_control_default","xPos","barWidth","barX","handleBarMouseMove","BaseTooltip","BaseLegend","bar_chart_default","import_xychart","import_clsx","line_chart_module_default","import_jsx_runtime","renderTooltip","tooltipData","nearestDatum","tooltipPoints","key","datum","b","line_chart_module_default","point","formatDateTick","value","LineChart","data","width","height","margin","className","withTooltips","showLegend","legendOrientation","providerTheme","useChartTheme","clsx","legendItems","group","index","accessors","d","theme","seriesData","BaseLegend","line_chart_default","import_group","import_shape","import_clsx","import_event","import_tooltip","import_react","useChartMouseHandler","withTooltips","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","onMouseMove","event","data","coords","onMouseLeave","use_chart_mouse_handler_default","pie_chart_module_default","import_jsx_runtime","PieChart","data","width","height","withTooltips","innerRadius","className","showLegend","legendOrientation","providerTheme","useChartTheme","onMouseMove","onMouseLeave","tooltipOpen","tooltipData","tooltipLeft","tooltipTop","use_chart_mouse_handler_default","radius","centerX","centerY","accessors","d","legendItems","item","index","clsx","pie_chart_module_default","pie","arc","centroidX","centroidY","hasSpaceForLabel","handleMouseMove","event","pathProps","defaultTheme","BaseLegend","BaseTooltip","pie_chart_default","import_event","import_group","import_Pie","import_text","import_tooltip","import_clsx","import_react","pie_semi_circle_chart_module_default","import_jsx_runtime","PieSemiCircleChart","data","width","label","note","className","withTooltips","clockwise","thickness","showLegend","legendOrientation","providerTheme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","centerX","height","radius","pad","innerRadius","dataWithIndex","d","index","startAngle","endAngle","accessors","a","b","handleMouseMove","event","arc","coords","handleMouseLeave","handleArcMouseMove","legendItems","item","clsx","pie_semi_circle_chart_module_default","Pie","pie","BaseTooltip","BaseLegend","pie_semi_circle_chart_default"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{AxisLeft as Re,AxisBottom as ze}from"@visx/axis";import{localPoint as Oe}from"@visx/event";import{Group as ie}from"@visx/group";import{scaleBand as ne,scaleLinear as Ee}from"@visx/scale";import{Bar as Ie}from"@visx/shape";import{useTooltip as Xe}from"@visx/tooltip";import se from"clsx";import{useCallback as pe}from"react";import{createContext as xe,useContext as Pe}from"react";var X={backgroundColor:"#FFFFFF",labelBackgroundColor:"#FFFFFF",colors:["#98C8DF","#006DAB","#A6DC80","#1F9828","#FF8C8F"],gridStyles:{stroke:"#787C82",strokeWidth:1},tickLength:0,gridColor:"",gridColorDark:""};import{jsx as Te}from"react/jsx-runtime";var J=xe(X),D=()=>Pe(J),ee=({theme:e={},children:t})=>{let a={...X,...e};return Te(J.Provider,{value:a,children:t})};import{GridRows as De,GridColumns as Fe}from"@visx/grid";var te={"grid-control":"grid-control-module__grid-control___KOnZN"};import{jsx as oe,jsxs as Me}from"react/jsx-runtime";var ke=({width:e,height:t,xScale:a,yScale:r,gridVisibility:o="x",top:i=0})=>Me("g",{transform:`translate(0, ${i})`,className:te["grid-control"],children:[o.includes("x")&&oe(De,{scale:a,width:e}),o.includes("y")&&oe(Fe,{scale:r,height:t})]}),U=ke;import{LegendOrdinal as Le}from"@visx/legend";import{scaleOrdinal as Be}from"@visx/scale";import Se from"clsx";var F={"legend--horizontal":"legend-module__legend--horizontal___IUN13","legend--vertical":"legend-module__legend--vertical___Scfzo","legend-item":"legend-module__legend-item___feemn","legend-item-swatch":"legend-module__legend-item-swatch___nRyXf","legend-item-label":"legend-module__legend-item-label___ksx6I","legend-item-value":"legend-module__legend-item-value___d9x1j"};import{jsx as V,jsxs as re}from"react/jsx-runtime";var Ne={horizontal:"row",vertical:"column"},y=({items:e,className:t,orientation:a="horizontal"})=>{let r=Be({domain:e.map(o=>o.label),range:e.map(o=>o.color)});return V("div",{className:Se(F.legend,F[`legend--${a}`],t),role:"list",children:V(Le,{scale:r,direction:Ne[a],shape:"rect",shapeWidth:16,shapeHeight:16,className:F["legend-items"],children:o=>V("div",{className:F[`legend--${a}`],children:o.map(i=>re("div",{className:F["legend-item"],children:[V("svg",{width:16,height:16,children:V("rect",{width:16,height:16,fill:i.value,className:F["legend-item-swatch"]})}),re("span",{className:F["legend-item-label"],children:[i.text,e.find(h=>h.label===i.text)?.value&&V("span",{className:F["legend-item-value"],children:e.find(h=>h.label===i.text)?.value})]})]},i.text))})})})};var ae={tooltip:"base-tooltip-module__tooltip___OfX6n"};import{Fragment as we,jsx as le,jsxs as Ge}from"react/jsx-runtime";var Ae=({data:e})=>Ge(we,{children:[e?.label,": ",e?.valueDisplay||e?.value]}),N=({data:e,top:t,left:a,component:r=Ae,children:o,className:i})=>le("div",{className:ae.tooltip,style:{top:t,left:a},role:"tooltip",children:o||le(r,{data:e,className:i})});var H={"bar-chart":"bar-chart-module__bar-chart___lmYNi","bar-chart-legend":"bar-chart-module__bar-chart-legend___vgKKq"};import{jsx as x,jsxs as q}from"react/jsx-runtime";var me=({data:e,width:t,height:a,margin:r={top:20,right:20,bottom:40,left:40},withTooltips:o=!1,showLegend:i=!1,legendOrientation:h="horizontal",className:P,gridVisibility:s="x"})=>{let g=D(),{tooltipOpen:b,tooltipLeft:u,tooltipTop:c,tooltipData:f,hideTooltip:T,showTooltip:w}=Xe(),z=pe((d,m,v,I,l)=>{let n=Oe(d);n&&w({tooltipData:{value:m,xLabel:v,yLabel:I,seriesIndex:l},tooltipLeft:n.x,tooltipTop:n.y-10})},[w]),O=pe(()=>{T()},[T]);if(!e?.length)return x("div",{className:se("bar-chart-empty",H["bat-chart-empty"]),children:"Empty..."});let C=r,G=t-C.left-C.right,p=a-C.top-C.bottom,_=e[0].data?.map(d=>d?.label),L=ne({range:[0,G],domain:_,padding:.2}),E=ne({range:[0,L.bandwidth()],domain:e.map((d,m)=>m.toString()),padding:.1}),B=Ee({range:[p,0],domain:[0,Math.max(...e.map(d=>Math.max(...d.data.map(m=>m?.value||0))))]}),S=e.map((d,m)=>({label:d.label,value:"",color:g.colors[m%g.colors.length]}));return q("div",{className:se("bar-chart",P,H["bar-chart"]),children:[x("svg",{width:t,height:a,children:q(ie,{left:C.left,top:C.top,children:[x(U,{width:G,height:p,xScale:L,yScale:B,gridVisibility:s}),e.map((d,m)=>x(ie,{children:d.data.map(v=>{let I=L(v.label);if(I===void 0)return null;let l=E.bandwidth(),n=I+(E(m.toString())??0),K=ye=>z(ye,v.value,v.label,d.label,m);return x(Ie,{x:n,y:B(v.value),width:l,height:p-(B(v.value)??0),fill:g.colors[m%g.colors.length],onMouseMove:o?K:void 0,onMouseLeave:o?O:void 0},`bar-${m}-${v.label}`)})},m)),x(Re,{scale:B}),x(ze,{scale:L,top:p})]})}),o&&b&&f&&x(N,{top:c,left:u,children:q("div",{children:[x("div",{children:f.yLabel}),q("div",{children:[f.xLabel,": ",f.value]})]})}),i&&x(y,{items:S,orientation:h,className:H["bar-chart-legend"]})]})};me.displayName="BarChart";var ce=me;import{XYChart as Ve,AnimatedLineSeries as Ke,AnimatedAxis as de,AnimatedGrid as We,Tooltip as Ye,buildChartTheme as He}from"@visx/xychart";import he from"clsx";var k={"line-chart":"line-chart-module__line-chart___ITM3d","line-chart__tooltip":"line-chart-module__line-chart__tooltip___aqcme","line-chart__tooltip-date":"line-chart-module__line-chart__tooltip-date___4Dzab","line-chart__tooltip-row":"line-chart-module__line-chart__tooltip-row___6A37G","line-chart__tooltip-label":"line-chart-module__line-chart__tooltip-label___IvnFF"};import{jsx as M,jsxs as W}from"react/jsx-runtime";var qe=({tooltipData:e})=>{let t=e?.nearestDatum?.datum;if(!t)return null;let a=Object.entries(e?.datumByKey||{}).map(([r,{datum:o}])=>({key:r,value:o.value})).sort((r,o)=>o.value-r.value);return W("div",{className:k["line-chart__tooltip"],children:[M("div",{className:k["line-chart__tooltip-date"],children:t.date.toLocaleDateString()}),a.map(r=>W("div",{className:k["line-chart__tooltip-row"],children:[W("span",{className:k["line-chart__tooltip-label"],children:[r.key,":"]}),M("span",{className:k["line-chart__tooltip-value"],children:r.value})]},r.key))]})},Ue=e=>new Date(e).toLocaleDateString(void 0,{month:"short",day:"numeric"}),$e=({data:e,width:t,height:a,margin:r={top:20,right:20,bottom:40,left:40},className:o,withTooltips:i=!0,showLegend:h=!1,legendOrientation:P="horizontal"})=>{let s=D();if(!e?.length)return M("div",{className:he("line-chart-empty",k["line-chart-empty"]),children:"Empty..."});let g=e.map((c,f)=>({label:c.label,value:"",color:s.colors[f%s.colors.length]})),b={xAccessor:c=>c.date,yAccessor:c=>c.value},u=He({backgroundColor:s.backgroundColor,colors:s.colors,gridStyles:s.gridStyles,tickLength:s?.tickLength||0,gridColor:s?.gridColor||"",gridColorDark:s?.gridColorDark||""});return W("div",{className:he("line-chart",k["line-chart"],o),children:[W(Ve,{theme:u,width:t,height:a,margin:r,xScale:{type:"time"},yScale:{type:"linear",nice:!0},children:[M(We,{columns:!1,numTicks:4}),M(de,{orientation:"bottom",numTicks:5,tickFormat:Ue}),M(de,{orientation:"left",numTicks:4}),e.map((c,f)=>M(Ke,{dataKey:c?.label,data:c.data,...b,stroke:u.colors[f%u.colors.length],strokeWidth:2},c?.label)),i&&M(Ye,{snapTooltipToDatumX:!0,snapTooltipToDatumY:!0,showSeriesGlyphs:!0,renderTooltip:qe})]}),h&&M(y,{items:g,orientation:P,className:k["line-chart-legend"]})]})},ue=$e;import{Group as Je}from"@visx/group";import{Pie as et}from"@visx/shape";import tt from"clsx";import{localPoint as Ze}from"@visx/event";import{useTooltip as je}from"@visx/tooltip";import{useCallback as _e}from"react";var Qe=({withTooltips:e})=>{let{tooltipOpen:t,tooltipLeft:a,tooltipTop:r,tooltipData:o,hideTooltip:i,showTooltip:h}=je(),P=_e((g,b)=>{if(!e)return;let u=Ze(g);u&&h({tooltipData:b,tooltipLeft:u.x,tooltipTop:u.y-10})},[e,h]),s=_e(()=>{e&&i()},[e,i]);return{onMouseMove:P,onMouseLeave:s,tooltipOpen:t,tooltipData:o,tooltipLeft:a,tooltipTop:r}},$=Qe;var Z={"pie-chart":"pie-chart-module__pie-chart___R12Vh"};import{jsx as R,jsxs as ge}from"react/jsx-runtime";var ot=({data:e,width:t,height:a,withTooltips:r=!1,innerRadius:o=0,className:i,showLegend:h,legendOrientation:P})=>{let s=D(),{onMouseMove:g,onMouseLeave:b,tooltipOpen:u,tooltipData:c,tooltipLeft:f,tooltipTop:T}=$({withTooltips:r}),w=Math.min(t,a)/2,z=t/2,O=a/2,C={value:p=>p.value,fill:p=>p.color||s.colors[p.index]},G=e.map((p,_)=>({label:p.label,value:p.value.toString(),color:s.colors[_%s.colors.length]}));return ge("div",{className:tt("pie-chart",Z["pie-chart"],i),children:[R("svg",{width:t,height:a,children:R(Je,{top:O,left:z,children:R(et,{data:e,pieValue:C.value,outerRadius:w-20,innerRadius:o,children:p=>p.arcs.map((_,L)=>{let[E,B]=p.path.centroid(_),S=_.endAngle-_.startAngle>=.25,d=v=>g(v,_.data),m={d:p.path(_)||"",fill:C.fill(_)};return r&&(m.onMouseMove=d,m.onMouseLeave=b),ge("g",{children:[R("path",{...m}),S&&R("text",{x:E,y:B,dy:".33em",fill:s.labelBackgroundColor||X.labelBackgroundColor,fontSize:12,textAnchor:"middle",pointerEvents:"none",children:_.data.label})]},`arc-${L}`)})})})}),h&&R(y,{items:G,orientation:P,className:Z["pie-chart-legend"]}),r&&u&&c&&R(N,{data:c,top:T,left:f,style:{transform:"translate(-50%, -100%)"}})]})},fe=ot;import{localPoint as rt}from"@visx/event";import{Group as ve}from"@visx/group";import at from"@visx/shape/lib/shapes/Pie";import{Text as Ce}from"@visx/text";import{useTooltip as lt}from"@visx/tooltip";import it from"clsx";import{useCallback as j}from"react";var Y={"pie-semi-circle-chart":"pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9","pie-semi-circle-chart-legend":"pie-semi-circle-chart-module__pie-semi-circle-chart-legend___c8W1Y",label:"pie-semi-circle-chart-module__label___nPqOg",note:"pie-semi-circle-chart-module__note___LpBZQ"};import{jsx as A,jsxs as Q}from"react/jsx-runtime";var nt=({data:e,width:t,label:a,note:r,className:o,withTooltips:i=!1,clockwise:h=!0,thickness:P=.4,showLegend:s,legendOrientation:g})=>{let b=D(),{tooltipOpen:u,tooltipLeft:c,tooltipTop:f,tooltipData:T,hideTooltip:w,showTooltip:z}=lt(),O=t/2,C=t/2,G=t/2,p=.03,_=G*(1-P+p),L=e.map((l,n)=>({...l,index:n})),E=h?-Math.PI/2:Math.PI/2,B=h?Math.PI/2:-Math.PI/2,S={value:l=>l.value,sort:(l,n)=>n.value-l.value,fill:l=>l.color||b.colors[l.index%b.colors.length]},d=j((l,n)=>{let K=rt(l);K&&z({tooltipData:n.data,tooltipLeft:K.x,tooltipTop:K.y-10})},[z]),m=j(()=>{w()},[w]),v=j(l=>n=>{d(n,l)},[d]),I=e.map((l,n)=>({label:l.label,value:l.valueDisplay||l.value.toString(),color:S.fill({...l,index:n})}));return Q("div",{className:it("pie-semi-circle-chart",Y["pie-semi-circle-chart"],o),children:[A("svg",{width:t,height:C,children:Q(ve,{top:O,left:O,children:[A(at,{data:L,pieValue:S.value,outerRadius:G,innerRadius:_,cornerRadius:3,padAngle:p,startAngle:E,endAngle:B,pieSort:S.sort,children:l=>l.arcs.map(n=>A("g",{onMouseMove:v(n),onMouseLeave:m,children:A("path",{d:l.path(n)||"",fill:S.fill(n.data)})},n.data.label))}),Q(ve,{children:[A(Ce,{textAnchor:"middle",verticalAnchor:"start",y:-40,className:Y.label,children:a}),A(Ce,{textAnchor:"middle",verticalAnchor:"start",y:-20,className:Y.note,children:r})]})]})}),i&&u&&T&&A(N,{data:{label:T.label,value:T.value,valueDisplay:T.valueDisplay},top:f,left:c}),s&&A(y,{items:I,orientation:g,className:Y["pie-semi-circle-chart-legend"]})]})},be=nt;export{ce as BarChart,N as BaseTooltip,y as Legend,ue as LineChart,fe as PieChart,be as PieSemiCircleChart,ee as ThemeProvider,$ as useChartMouseHandler};
|
|
2
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/bar-chart/bar-chart.tsx","../src/providers/theme/theme-provider.tsx","../src/providers/theme/themes.ts","../src/components/grid-control/grid-control.tsx","../src/components/grid-control/grid-control.module.scss","../src/components/legend/base-legend.tsx","../src/components/legend/legend.module.scss","../src/components/tooltip/base-tooltip.module.scss","../src/components/tooltip/base-tooltip.tsx","../src/components/bar-chart/bar-chart.module.scss","../src/components/line-chart/line-chart.tsx","../src/components/line-chart/line-chart.module.scss","../src/components/pie-chart/pie-chart.tsx","../src/hooks/use-chart-mouse-handler.ts","../src/components/pie-chart/pie-chart.module.scss","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"sourcesContent":["import { AxisLeft, AxisBottom } from '@visx/axis';\nimport { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { scaleBand, scaleLinear } from '@visx/scale';\nimport { Bar } from '@visx/shape';\nimport { useTooltip } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { FC, useCallback, type MouseEvent } from 'react';\nimport { useChartTheme } from '../../providers/theme';\nimport { GridControl } from '../grid-control';\nimport { Legend } from '../legend';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './bar-chart.module.scss';\nimport type { BaseChartProps, SeriesData } from '../shared/types';\n\ninterface BarChartProps extends BaseChartProps< SeriesData[] > {}\n\ntype BarChartTooltipData = { value: number; xLabel: string; yLabel: string; seriesIndex: number };\n\nconst BarChart: FC< BarChartProps > = ( {\n\tdata,\n\twidth,\n\theight,\n\tmargin = { top: 20, right: 20, bottom: 40, left: 40 },\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tclassName,\n\tgridVisibility = 'x',\n} ) => {\n\tconst theme = useChartTheme();\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< BarChartTooltipData >();\n\n\tconst handleMouseMove = useCallback(\n\t\t(\n\t\t\tevent: MouseEvent< SVGRectElement >,\n\t\t\tvalue: number,\n\t\t\txLabel: string,\n\t\t\tyLabel: string,\n\t\t\tseriesIndex: number\n\t\t) => {\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) return;\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: { value, xLabel, yLabel, seriesIndex },\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tif ( ! data?.length ) {\n\t\treturn <div className={ clsx( 'bar-chart-empty', styles[ 'bat-chart-empty' ] ) }>Empty...</div>;\n\t}\n\n\tconst margins = margin;\n\tconst xMax = width - margins.left - margins.right;\n\tconst yMax = height - margins.top - margins.bottom;\n\n\t// Get labels for x-axis from the first series (assuming all series have same labels)\n\tconst labels = data[ 0 ].data?.map( d => d?.label );\n\n\t// Create scales\n\tconst xScale = scaleBand< string >( {\n\t\trange: [ 0, xMax ],\n\t\tdomain: labels,\n\t\tpadding: 0.2,\n\t} );\n\n\tconst innerScale = scaleBand( {\n\t\trange: [ 0, xScale.bandwidth() ],\n\t\tdomain: data.map( ( _, i ) => i.toString() ),\n\t\tpadding: 0.1,\n\t} );\n\n\tconst yScale = scaleLinear< number >( {\n\t\trange: [ yMax, 0 ],\n\t\tdomain: [\n\t\t\t0,\n\t\t\tMath.max( ...data.map( series => Math.max( ...series.data.map( d => d?.value || 0 ) ) ) ),\n\t\t],\n\t} );\n\n\t// Create legend items from group labels, this iterates over groups rather than data points\n\tconst legendItems = data.map( ( group, index ) => ( {\n\t\tlabel: group.label, // Label for each unique group\n\t\tvalue: '', // Empty string since we don't want to show a specific value\n\t\tcolor: theme.colors[ index % theme.colors.length ],\n\t} ) );\n\n\treturn (\n\t\t<div className={ clsx( 'bar-chart', className, styles[ 'bar-chart' ] ) }>\n\t\t\t<svg width={ width } height={ height }>\n\t\t\t\t<Group left={ margins.left } top={ margins.top }>\n\t\t\t\t\t<GridControl\n\t\t\t\t\t\twidth={ xMax }\n\t\t\t\t\t\theight={ yMax }\n\t\t\t\t\t\txScale={ xScale }\n\t\t\t\t\t\tyScale={ yScale }\n\t\t\t\t\t\tgridVisibility={ gridVisibility }\n\t\t\t\t\t/>\n\t\t\t\t\t{ data.map( ( series, seriesIndex ) => (\n\t\t\t\t\t\t<Group key={ seriesIndex }>\n\t\t\t\t\t\t\t{ series.data.map( d => {\n\t\t\t\t\t\t\t\tconst xPos = xScale( d.label );\n\t\t\t\t\t\t\t\tif ( xPos === undefined ) return null;\n\n\t\t\t\t\t\t\t\tconst barWidth = innerScale.bandwidth();\n\t\t\t\t\t\t\t\tconst barX = xPos + ( innerScale( seriesIndex.toString() ) ?? 0 );\n\n\t\t\t\t\t\t\t\tconst handleBarMouseMove = event =>\n\t\t\t\t\t\t\t\t\thandleMouseMove( event, d.value, d.label, series.label, seriesIndex );\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Bar\n\t\t\t\t\t\t\t\t\t\tkey={ `bar-${ seriesIndex }-${ d.label }` }\n\t\t\t\t\t\t\t\t\t\tx={ barX }\n\t\t\t\t\t\t\t\t\t\ty={ yScale( d.value ) }\n\t\t\t\t\t\t\t\t\t\twidth={ barWidth }\n\t\t\t\t\t\t\t\t\t\theight={ yMax - ( yScale( d.value ) ?? 0 ) }\n\t\t\t\t\t\t\t\t\t\tfill={ theme.colors[ seriesIndex % theme.colors.length ] }\n\t\t\t\t\t\t\t\t\t\tonMouseMove={ withTooltips ? handleBarMouseMove : undefined }\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={ withTooltips ? handleMouseLeave : undefined }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Group>\n\t\t\t\t\t) ) }\n\t\t\t\t\t<AxisLeft scale={ yScale } />\n\t\t\t\t\t<AxisBottom scale={ xScale } top={ yMax } />\n\t\t\t\t</Group>\n\t\t\t</svg>\n\n\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t<BaseTooltip top={ tooltipTop } left={ tooltipLeft }>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<div>{ tooltipData.yLabel }</div>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{ tooltipData.xLabel }: { tooltipData.value }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</BaseTooltip>\n\t\t\t) }\n\n\t\t\t{ showLegend && (\n\t\t\t\t<Legend\n\t\t\t\t\titems={ legendItems }\n\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\tclassName={ styles[ 'bar-chart-legend' ] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nBarChart.displayName = 'BarChart';\nexport default BarChart;\n","import { createContext, useContext, FC, ReactNode } from 'react';\nimport { defaultTheme } from './themes';\nimport type { ChartTheme } from '../../components/shared/types';\n\n/**\n * Context for sharing theme configuration across components\n */\nconst ThemeContext = createContext< ChartTheme >( defaultTheme );\n\n/**\n * Hook to access chart theme\n * @return {object} A built theme configuration compatible with visx charts\n */\nconst useChartTheme = () => {\n\tconst theme = useContext( ThemeContext );\n\treturn theme;\n};\n\n/**\n * Props for the ThemeProvider component\n */\ntype ThemeProviderProps = {\n\t/** Optional partial theme override */\n\ttheme?: Partial< ChartTheme >;\n\t/** Child components that will have access to the theme */\n\tchildren: ReactNode;\n};\n\n// Provider component for chart theming\n// Allows theme customization through props while maintaining default values\nconst ThemeProvider: FC< ThemeProviderProps > = ( { theme = {}, children } ) => {\n\tconst mergedTheme = { ...defaultTheme, ...theme };\n\treturn <ThemeContext.Provider value={ mergedTheme }>{ children }</ThemeContext.Provider>;\n};\n\nexport { ThemeProvider, useChartTheme };\n","import type { ChartTheme } from '../../components/shared/types';\n\n/**\n * Default theme configuration\n */\nconst defaultTheme: ChartTheme = {\n\tbackgroundColor: '#FFFFFF', // chart background color\n\tlabelBackgroundColor: '#FFFFFF', // label background color\n\tcolors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],\n\tgridStyles: {\n\t\tstroke: '#787C82',\n\t\tstrokeWidth: 1,\n\t},\n\ttickLength: 0,\n\tgridColor: '',\n\tgridColorDark: '',\n};\n\n/**\n * Jetpack theme configuration\n */\nconst jetpackTheme: ChartTheme = {\n\tbackgroundColor: '#FFFFFF', // chart background color\n\tlabelBackgroundColor: '#FFFFFF', // label background color\n\tcolors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],\n\tgridStyles: {\n\t\tstroke: '#787C82',\n\t\tstrokeWidth: 1,\n\t},\n\ttickLength: 0,\n\tgridColor: '',\n\tgridColorDark: '',\n};\n\n/**\n * Woo theme configuration\n */\nconst wooTheme: ChartTheme = {\n\tbackgroundColor: '#FFFFFF', // chart background color\n\tlabelBackgroundColor: '#FFFFFF', // label background color\n\tcolors: [ '#80C8FF', '#B999FF', '#3858E9' ],\n\tgridStyles: {\n\t\tstroke: '#787C82',\n\t\tstrokeWidth: 1,\n\t},\n\ttickLength: 0,\n\tgridColor: '',\n\tgridColorDark: '',\n};\n\nexport { defaultTheme, jetpackTheme, wooTheme };\n","import { GridRows, GridColumns } from '@visx/grid';\nimport React from 'react';\nimport styles from './grid-control.module.scss';\nimport type { GridProps } from '../shared/types';\n\nconst GridControl: React.FC< GridProps > = ( {\n\twidth,\n\theight,\n\txScale,\n\tyScale,\n\tgridVisibility = 'x',\n\ttop = 0,\n} ) => {\n\treturn (\n\t\t<g transform={ `translate(0, ${ top })` } className={ styles[ 'grid-control' ] }>\n\t\t\t{ gridVisibility.includes( 'x' ) && <GridRows scale={ xScale } width={ width } /> }\n\t\t\t{ gridVisibility.includes( 'y' ) && <GridColumns scale={ yScale } height={ height } /> }\n\t\t</g>\n\t);\n};\n\nexport default GridControl;\n","import 'css-chunk:src/components/grid-control/grid-control.module.scss';export default {\n \"grid-control\": \"grid-control-module__grid-control___KOnZN\"\n};","import { LegendOrdinal } from '@visx/legend';\nimport { scaleOrdinal } from '@visx/scale';\nimport clsx from 'clsx';\nimport { FC } from 'react';\nimport styles from './legend.module.scss';\nimport type { LegendProps } from './types';\n\n/**\n * Base legend component that displays color-coded items with labels using visx\n * @param {object} props - Component properties\n * @param {Array} props.items - Array of legend items to display\n * @param {string} props.className - Additional CSS class names\n * @param {string} props.orientation - Layout orientation (horizontal/vertical)\n * @return {JSX.Element} Rendered legend component\n */\nconst orientationToFlexDirection = {\n\thorizontal: 'row' as const,\n\tvertical: 'column' as const,\n};\n\nexport const BaseLegend: FC< LegendProps > = ( {\n\titems,\n\tclassName,\n\torientation = 'horizontal',\n} ) => {\n\tconst legendScale = scaleOrdinal( {\n\t\tdomain: items.map( item => item.label ),\n\t\trange: items.map( item => item.color ),\n\t} );\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( styles.legend, styles[ `legend--${ orientation }` ], className ) }\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t<LegendOrdinal\n\t\t\t\tscale={ legendScale }\n\t\t\t\tdirection={ orientationToFlexDirection[ orientation ] }\n\t\t\t\tshape=\"rect\"\n\t\t\t\tshapeWidth={ 16 }\n\t\t\t\tshapeHeight={ 16 }\n\t\t\t\tclassName={ styles[ 'legend-items' ] }\n\t\t\t>\n\t\t\t\t{ labels => (\n\t\t\t\t\t<div className={ styles[ `legend--${ orientation }` ] }>\n\t\t\t\t\t\t{ labels.map( label => (\n\t\t\t\t\t\t\t<div key={ label.text } className={ styles[ 'legend-item' ] }>\n\t\t\t\t\t\t\t\t<svg width={ 16 } height={ 16 }>\n\t\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\t\twidth={ 16 }\n\t\t\t\t\t\t\t\t\t\theight={ 16 }\n\t\t\t\t\t\t\t\t\t\tfill={ label.value }\n\t\t\t\t\t\t\t\t\t\tclassName={ styles[ 'legend-item-swatch' ] }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t<span className={ styles[ 'legend-item-label' ] }>\n\t\t\t\t\t\t\t\t\t{ label.text }\n\t\t\t\t\t\t\t\t\t{ items.find( item => item.label === label.text )?.value && (\n\t\t\t\t\t\t\t\t\t\t<span className={ styles[ 'legend-item-value' ] }>\n\t\t\t\t\t\t\t\t\t\t\t{ items.find( item => item.label === label.text )?.value }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t</LegendOrdinal>\n\t\t</div>\n\t);\n};\n","import 'css-chunk:src/components/legend/legend.module.scss';export default {\n \"legend--horizontal\": \"legend-module__legend--horizontal___IUN13\",\n \"legend--vertical\": \"legend-module__legend--vertical___Scfzo\",\n \"legend-item\": \"legend-module__legend-item___feemn\",\n \"legend-item-swatch\": \"legend-module__legend-item-swatch___nRyXf\",\n \"legend-item-label\": \"legend-module__legend-item-label___ksx6I\",\n \"legend-item-value\": \"legend-module__legend-item-value___d9x1j\"\n};","import 'css-chunk:src/components/tooltip/base-tooltip.module.scss';export default {\n \"tooltip\": \"base-tooltip-module__tooltip___OfX6n\"\n};","import styles from './base-tooltip.module.scss';\nimport type { CSSProperties, ComponentType, ReactNode } from 'react';\n\ntype TooltipData = {\n\tlabel: string;\n\tvalue: number;\n\tvalueDisplay?: string;\n};\n\ntype TooltipComponentProps = {\n\tdata: TooltipData;\n\tclassName?: string;\n};\n\ntype TooltipCommonProps = {\n\ttop: number;\n\tleft: number;\n\tstyle?: CSSProperties;\n\tclassName?: string;\n};\n\ntype DefaultDataTooltip = {\n\tdata: TooltipData;\n\tcomponent?: ComponentType< TooltipComponentProps >;\n\tchildren?: never;\n};\n\ntype CustomTooltip = {\n\tchildren: ReactNode;\n\tdata?: never;\n\tcomponent?: never;\n};\n\ntype BaseTooltipProps = TooltipCommonProps & ( DefaultDataTooltip | CustomTooltip );\n\nconst DefaultTooltipContent = ( { data }: TooltipComponentProps ) => (\n\t<>\n\t\t{ data?.label }: { data?.valueDisplay || data?.value }\n\t</>\n);\n\nexport const BaseTooltip = ( {\n\tdata,\n\ttop,\n\tleft,\n\tcomponent: Component = DefaultTooltipContent,\n\tchildren,\n\tclassName,\n}: BaseTooltipProps ) => {\n\treturn (\n\t\t<div className={ styles.tooltip } style={ { top, left } } role=\"tooltip\">\n\t\t\t{ children || <Component data={ data } className={ className } /> }\n\t\t</div>\n\t);\n};\n\nexport type { BaseTooltipProps, TooltipData };\n","import 'css-chunk:src/components/bar-chart/bar-chart.module.scss';export default {\n \"bar-chart\": \"bar-chart-module__bar-chart___lmYNi\",\n \"bar-chart-legend\": \"bar-chart-module__bar-chart-legend___vgKKq\"\n};","import {\n\tXYChart,\n\tAnimatedLineSeries,\n\tAnimatedAxis,\n\tAnimatedGrid,\n\tTooltip,\n\tbuildChartTheme,\n} from '@visx/xychart';\nimport clsx from 'clsx';\nimport { FC } from 'react';\nimport { useChartTheme } from '../../providers/theme/theme-provider';\nimport { Legend } from '../legend';\nimport styles from './line-chart.module.scss';\nimport type { BaseChartProps, DataPointDate, SeriesData } from '../shared/types';\n\n// TODO: revisit grid and axis options - accept as props for frid lines, axis, values: x, y, all, none\n\ninterface LineChartProps extends BaseChartProps< SeriesData[] > {}\n\ntype TooltipData = {\n\tdate: Date;\n\t[ key: string ]: number | Date;\n};\n\ntype TooltipDatum = {\n\tkey: string;\n\tvalue: number;\n};\n\nconst renderTooltip = ( {\n\ttooltipData,\n}: {\n\ttooltipData?: {\n\t\tnearestDatum?: {\n\t\t\tdatum: TooltipData;\n\t\t\tkey: string;\n\t\t};\n\t\tdatumByKey?: { [ key: string ]: { datum: TooltipData } };\n\t};\n} ) => {\n\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\tif ( ! nearestDatum ) return null;\n\n\tconst tooltipPoints: TooltipDatum[] = Object.entries( tooltipData?.datumByKey || {} )\n\t\t.map( ( [ key, { datum } ] ) => ( {\n\t\t\tkey,\n\t\t\tvalue: datum.value as number,\n\t\t} ) )\n\t\t.sort( ( a, b ) => b.value - a.value );\n\n\treturn (\n\t\t<div className={ styles[ 'line-chart__tooltip' ] }>\n\t\t\t<div className={ styles[ 'line-chart__tooltip-date' ] }>\n\t\t\t\t{ nearestDatum.date.toLocaleDateString() }\n\t\t\t</div>\n\t\t\t{ tooltipPoints.map( point => (\n\t\t\t\t<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-label' ] }>{ point.key }:</span>\n\t\t\t\t\t<span className={ styles[ 'line-chart__tooltip-value' ] }>{ point.value }</span>\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t</div>\n\t);\n};\n\nconst formatDateTick = ( value: number ) => {\n\tconst date = new Date( value );\n\treturn date.toLocaleDateString( undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t} );\n};\n\nconst LineChart: FC< LineChartProps > = ( {\n\tdata,\n\twidth,\n\theight,\n\tmargin = { top: 20, right: 20, bottom: 40, left: 40 },\n\tclassName,\n\twithTooltips = true,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n} ) => {\n\tconst providerTheme = useChartTheme();\n\n\tif ( ! data?.length ) {\n\t\treturn (\n\t\t\t<div className={ clsx( 'line-chart-empty', styles[ 'line-chart-empty' ] ) }>Empty...</div>\n\t\t);\n\t}\n\n\t// Create legend items from group labels, this iterates over groups rather than data points\n\tconst legendItems = data.map( ( group, index ) => ( {\n\t\tlabel: group.label, // Label for each unique group\n\t\tvalue: '', // Empty string since we don't want to show a specific value\n\t\tcolor: providerTheme.colors[ index % providerTheme.colors.length ],\n\t} ) );\n\n\tconst accessors = {\n\t\txAccessor: ( d: DataPointDate ) => d.date,\n\t\tyAccessor: ( d: DataPointDate ) => d.value,\n\t};\n\n\tconst theme = buildChartTheme( {\n\t\tbackgroundColor: providerTheme.backgroundColor,\n\t\tcolors: providerTheme.colors,\n\t\tgridStyles: providerTheme.gridStyles,\n\t\ttickLength: providerTheme?.tickLength || 0,\n\t\tgridColor: providerTheme?.gridColor || '',\n\t\tgridColorDark: providerTheme?.gridColorDark || '',\n\t} );\n\n\treturn (\n\t\t<div className={ clsx( 'line-chart', styles[ 'line-chart' ], className ) }>\n\t\t\t<XYChart\n\t\t\t\ttheme={ theme }\n\t\t\t\twidth={ width }\n\t\t\t\theight={ height }\n\t\t\t\tmargin={ margin }\n\t\t\t\txScale={ { type: 'time' } }\n\t\t\t\tyScale={ { type: 'linear', nice: true } }\n\t\t\t>\n\t\t\t\t<AnimatedGrid columns={ false } numTicks={ 4 } />\n\t\t\t\t<AnimatedAxis orientation=\"bottom\" numTicks={ 5 } tickFormat={ formatDateTick } />\n\t\t\t\t<AnimatedAxis orientation=\"left\" numTicks={ 4 } />\n\n\t\t\t\t{ data.map( ( seriesData, index ) => (\n\t\t\t\t\t<AnimatedLineSeries\n\t\t\t\t\t\tkey={ seriesData?.label }\n\t\t\t\t\t\tdataKey={ seriesData?.label }\n\t\t\t\t\t\tdata={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart\n\t\t\t\t\t\t{ ...accessors }\n\t\t\t\t\t\tstroke={ theme.colors[ index % theme.colors.length ] }\n\t\t\t\t\t\tstrokeWidth={ 2 }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\n\t\t\t\t{ withTooltips && (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tsnapTooltipToDatumX\n\t\t\t\t\t\tsnapTooltipToDatumY\n\t\t\t\t\t\tshowSeriesGlyphs\n\t\t\t\t\t\trenderTooltip={ renderTooltip }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</XYChart>\n\n\t\t\t{ showLegend && (\n\t\t\t\t<Legend\n\t\t\t\t\titems={ legendItems }\n\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\tclassName={ styles[ 'line-chart-legend' ] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport default LineChart;\n","import 'css-chunk:src/components/line-chart/line-chart.module.scss';export default {\n \"line-chart\": \"line-chart-module__line-chart___ITM3d\",\n \"line-chart__tooltip\": \"line-chart-module__line-chart__tooltip___aqcme\",\n \"line-chart__tooltip-date\": \"line-chart-module__line-chart__tooltip-date___4Dzab\",\n \"line-chart__tooltip-row\": \"line-chart-module__line-chart__tooltip-row___6A37G\",\n \"line-chart__tooltip-label\": \"line-chart-module__line-chart__tooltip-label___IvnFF\"\n};","import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport clsx from 'clsx';\nimport { SVGProps } from 'react';\nimport useChartMouseHandler from '../../hooks/use-chart-mouse-handler';\nimport { useChartTheme, defaultTheme } from '../../providers/theme';\nimport { Legend } from '../legend';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-chart.module.scss';\nimport type { BaseChartProps, DataPoint } from '../shared/types';\n\n// TODO: add animation\n\ninterface PieChartProps extends BaseChartProps< DataPoint[] > {\n\t/**\n\t * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.\n\t */\n\tinnerRadius?: number;\n}\n\n/**\n * Renders a pie or donut chart using the provided data.\n *\n * @param {PieChartProps} props - Component props\n * @return {JSX.Element} The rendered chart component\n */\nconst PieChart = ( {\n\tdata,\n\twidth,\n\theight,\n\twithTooltips = false,\n\tinnerRadius = 0,\n\tclassName,\n\tshowLegend,\n\tlegendOrientation,\n}: PieChartProps ) => {\n\tconst providerTheme = useChartTheme();\n\tconst { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } =\n\t\tuseChartMouseHandler( {\n\t\t\twithTooltips,\n\t\t} );\n\n\t// Calculate radius based on width/height\n\tconst radius = Math.min( width, height ) / 2;\n\tconst centerX = width / 2;\n\tconst centerY = height / 2;\n\n\tconst accessors = {\n\t\tvalue: d => d.value,\n\t\t// Use the color property from the data object as a last resort. The theme provides colours by default.\n\t\tfill: d => d.color || providerTheme.colors[ d.index ],\n\t};\n\n\t// Create legend items from data\n\tconst legendItems = data.map( ( item, index ) => ( {\n\t\tlabel: item.label,\n\t\tvalue: item.value.toString(),\n\t\tcolor: providerTheme.colors[ index % providerTheme.colors.length ],\n\t} ) );\n\n\treturn (\n\t\t<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>\n\t\t\t<svg width={ width } height={ height }>\n\t\t\t\t<Group top={ centerY } left={ centerX }>\n\t\t\t\t\t<Pie\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\touterRadius={ radius - 20 } // Leave space for labels/tooltips\n\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\treturn pie.arcs.map( ( arc, index ) => {\n\t\t\t\t\t\t\t\tconst [ centroidX, centroidY ] = pie.path.centroid( arc );\n\t\t\t\t\t\t\t\tconst hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;\n\t\t\t\t\t\t\t\tconst handleMouseMove = event => onMouseMove( event, arc.data );\n\n\t\t\t\t\t\t\t\tconst pathProps: SVGProps< SVGPathElement > = {\n\t\t\t\t\t\t\t\t\td: pie.path( arc ) || '',\n\t\t\t\t\t\t\t\t\tfill: accessors.fill( arc ),\n\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\tif ( withTooltips ) {\n\t\t\t\t\t\t\t\t\tpathProps.onMouseMove = handleMouseMove;\n\t\t\t\t\t\t\t\t\tpathProps.onMouseLeave = onMouseLeave;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<g key={ `arc-${ index }` }>\n\t\t\t\t\t\t\t\t\t\t<path { ...pathProps } />\n\t\t\t\t\t\t\t\t\t\t{ hasSpaceForLabel && (\n\t\t\t\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\t\t\t\tx={ centroidX }\n\t\t\t\t\t\t\t\t\t\t\t\ty={ centroidY }\n\t\t\t\t\t\t\t\t\t\t\t\tdy=\".33em\"\n\t\t\t\t\t\t\t\t\t\t\t\tfill={\n\t\t\t\t\t\t\t\t\t\t\t\t\tproviderTheme.labelBackgroundColor || defaultTheme.labelBackgroundColor\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ 12 }\n\t\t\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ arc.data.label }\n\t\t\t\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t</Pie>\n\t\t\t\t</Group>\n\t\t\t</svg>\n\n\t\t\t{ showLegend && (\n\t\t\t\t<Legend\n\t\t\t\t\titems={ legendItems }\n\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\tclassName={ styles[ 'pie-chart-legend' ] }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t<BaseTooltip\n\t\t\t\t\tdata={ tooltipData }\n\t\t\t\t\ttop={ tooltipTop }\n\t\t\t\t\tleft={ tooltipLeft }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\ttransform: 'translate(-50%, -100%)',\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport default PieChart;\n","import { localPoint } from '@visx/event';\nimport { useTooltip } from '@visx/tooltip';\nimport { useCallback, type MouseEvent } from 'react';\nimport type { DataPoint } from '../components/shared/types';\n\ntype UseChartMouseHandlerProps = {\n\t/**\n\t * Whether tooltips are enabled\n\t */\n\twithTooltips: boolean;\n};\n\ntype UseChartMouseHandlerReturn = {\n\t/**\n\t * Handler for mouse move events\n\t */\n\tonMouseMove: ( event: React.MouseEvent< SVGElement >, data: DataPoint ) => void;\n\t/**\n\t * Handler for mouse leave events\n\t */\n\tonMouseLeave: () => void;\n\t/**\n\t * Whether the tooltip is currently open\n\t */\n\ttooltipOpen: boolean;\n\t/**\n\t * The current tooltip data\n\t */\n\ttooltipData: DataPoint | null;\n\t/**\n\t * The current tooltip left position\n\t */\n\ttooltipLeft: number | undefined;\n\t/**\n\t * The current tooltip top position\n\t */\n\ttooltipTop: number | undefined;\n};\n\n/**\n * Hook to handle mouse interactions for chart components\n *\n * @param {UseChartMouseHandlerProps} props - Hook configuration\n * @return {UseChartMouseHandlerReturn} Object containing handlers and tooltip state\n */\nconst useChartMouseHandler = ( {\n\twithTooltips,\n}: UseChartMouseHandlerProps ): UseChartMouseHandlerReturn => {\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPoint >();\n\n\t// TODO: either debounce/throttle or use useTooltipInPortal with built-in debounce\n\tconst onMouseMove = useCallback(\n\t\t( event: MouseEvent< SVGElement >, data: DataPoint ) => {\n\t\t\tif ( ! withTooltips ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: data,\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ withTooltips, showTooltip ]\n\t);\n\n\tconst onMouseLeave = useCallback( () => {\n\t\tif ( ! withTooltips ) {\n\t\t\treturn;\n\t\t}\n\t\thideTooltip();\n\t}, [ withTooltips, hideTooltip ] );\n\n\treturn {\n\t\tonMouseMove,\n\t\tonMouseLeave,\n\t\ttooltipOpen,\n\t\ttooltipData,\n\t\ttooltipLeft,\n\t\ttooltipTop,\n\t};\n};\n\nexport default useChartMouseHandler;\n","import 'css-chunk:src/components/pie-chart/pie-chart.module.scss';export default {\n \"pie-chart\": \"pie-chart-module__pie-chart___R12Vh\"\n};","import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport Pie, { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport { Text } from '@visx/text';\nimport { useTooltip } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { FC, useCallback } from 'react';\nimport { useChartTheme } from '../../providers/theme/theme-provider';\nimport { Legend } from '../legend';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-semi-circle-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage } from '../shared/types';\n\ninterface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Label text to display above the chart\n\t */\n\tlabel: string;\n\t/**\n\t * Note text to display below the label\n\t */\n\tnote: string;\n\t/**\n\t * Direction of chart rendering\n\t * true for clockwise, false for counter-clockwise\n\t */\n\tclockwise?: boolean;\n\t/**\n\t * Thickness of the pie chart. A value between 0 and 1\n\t */\n\tthickness?: number;\n}\n\ntype ArcData = PieArcDatum< DataPointPercentage >;\n\nconst PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( {\n\tdata,\n\twidth,\n\tlabel,\n\tnote,\n\tclassName,\n\twithTooltips = false,\n\tclockwise = true,\n\tthickness = 0.4,\n\tshowLegend,\n\tlegendOrientation,\n} ) => {\n\tconst providerTheme = useChartTheme();\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPointPercentage >();\n\n\tconst centerX = width / 2;\n\tconst height = width / 2;\n\tconst radius = width / 2;\n\tconst pad = 0.03;\n\tconst innerRadius = radius * ( 1 - thickness + pad );\n\n\t// Map the data to include index for color assignment\n\tconst dataWithIndex = data.map( ( d, index ) => ( {\n\t\t...d,\n\t\tindex,\n\t} ) );\n\n\t// Set the clockwise direction based on the prop\n\tconst startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n\tconst endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\n\n\tconst accessors = {\n\t\tvalue: ( d: DataPointPercentage & { index: number } ) => d.value,\n\t\tsort: (\n\t\t\ta: DataPointPercentage & { index: number },\n\t\t\tb: DataPointPercentage & { index: number }\n\t\t) => b.value - a.value,\n\t\t// Use the color property from the data object as a last resort. The theme provides colours by default.\n\t\tfill: ( d: DataPointPercentage & { index: number } ) =>\n\t\t\td.color || providerTheme.colors[ d.index % providerTheme.colors.length ],\n\t};\n\n\tconst handleMouseMove = useCallback(\n\t\t( event: React.MouseEvent, arc: ArcData ) => {\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) return;\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: arc.data,\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tconst handleArcMouseMove = useCallback(\n\t\t( arc: ArcData ) => ( event: React.MouseEvent ) => {\n\t\t\thandleMouseMove( event, arc );\n\t\t},\n\t\t[ handleMouseMove ]\n\t);\n\n\t// Create legend items\n\tconst legendItems = data.map( ( item, index ) => ( {\n\t\tlabel: item.label,\n\t\tvalue: item.valueDisplay || item.value.toString(),\n\t\tcolor: accessors.fill( { ...item, index } ),\n\t} ) );\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }\n\t\t>\n\t\t\t<svg width={ width } height={ height }>\n\t\t\t\t{ /* Main chart group that contains both the pie and text elements */ }\n\t\t\t\t<Group top={ centerX } left={ centerX }>\n\t\t\t\t\t{ /* Pie chart */ }\n\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\touterRadius={ radius }\n\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\tpadAngle={ pad }\n\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\tpieSort={ accessors.sort }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\treturn pie.arcs.map( arc => (\n\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\tonMouseMove={ handleArcMouseMove( arc ) }\n\t\t\t\t\t\t\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path d={ pie.path( arc ) || '' } fill={ accessors.fill( arc.data ) } />\n\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t) );\n\t\t\t\t\t\t} }\n\t\t\t\t\t</Pie>\n\n\t\t\t\t\t<Group>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\ty={ -40 } // double font size to make room for a note\n\t\t\t\t\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\ty={ -20 } // font size with padding\n\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</Group>\n\t\t\t\t</Group>\n\t\t\t</svg>\n\n\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t<BaseTooltip\n\t\t\t\t\tdata={ {\n\t\t\t\t\t\tlabel: tooltipData.label,\n\t\t\t\t\t\tvalue: tooltipData.value,\n\t\t\t\t\t\tvalueDisplay: tooltipData.valueDisplay,\n\t\t\t\t\t} }\n\t\t\t\t\ttop={ tooltipTop }\n\t\t\t\t\tleft={ tooltipLeft }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ showLegend && (\n\t\t\t\t<Legend\n\t\t\t\t\titems={ legendItems }\n\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\tclassName={ styles[ 'pie-semi-circle-chart-legend' ] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport default PieSemiCircleChart;\n","import 'css-chunk:src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n \"pie-semi-circle-chart\": \"pie-semi-circle-chart-module__pie-semi-circle-chart___r5jk9\",\n \"pie-semi-circle-chart-legend\": \"pie-semi-circle-chart-module__pie-semi-circle-chart-legend___c8W1Y\",\n \"label\": \"pie-semi-circle-chart-module__label___nPqOg\",\n \"note\": \"pie-semi-circle-chart-module__note___LpBZQ\"\n};"],"mappings":"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","names":["AxisLeft","AxisBottom","localPoint","Group","scaleBand","scaleLinear","Bar","useTooltip","clsx","useCallback","createContext","useContext","defaultTheme","jsx","ThemeContext","createContext","defaultTheme","useChartTheme","useContext","ThemeProvider","theme","children","mergedTheme","GridRows","GridColumns","grid_control_module_default","jsx","jsxs","GridControl","width","height","xScale","yScale","gridVisibility","top","grid_control_module_default","GridRows","GridColumns","grid_control_default","LegendOrdinal","scaleOrdinal","clsx","legend_module_default","jsx","jsxs","orientationToFlexDirection","BaseLegend","items","className","orientation","legendScale","scaleOrdinal","item","clsx","legend_module_default","LegendOrdinal","labels","label","base_tooltip_module_default","Fragment","jsx","jsxs","DefaultTooltipContent","data","BaseTooltip","top","left","Component","children","className","base_tooltip_module_default","bar_chart_module_default","jsx","jsxs","BarChart","data","width","height","margin","withTooltips","showLegend","legendOrientation","className","gridVisibility","theme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","useTooltip","handleMouseMove","useCallback","event","value","xLabel","yLabel","seriesIndex","coords","localPoint","handleMouseLeave","clsx","bar_chart_module_default","margins","xMax","yMax","labels","xScale","scaleBand","innerScale","_","i","yScale","scaleLinear","series","d","legendItems","group","index","Group","grid_control_default","xPos","barWidth","barX","handleBarMouseMove","Bar","AxisLeft","AxisBottom","BaseTooltip","BaseLegend","bar_chart_default","XYChart","AnimatedLineSeries","AnimatedAxis","AnimatedGrid","Tooltip","buildChartTheme","clsx","line_chart_module_default","jsx","jsxs","renderTooltip","tooltipData","nearestDatum","tooltipPoints","key","datum","a","b","line_chart_module_default","point","formatDateTick","value","LineChart","data","width","height","margin","className","withTooltips","showLegend","legendOrientation","providerTheme","useChartTheme","clsx","legendItems","group","index","accessors","d","theme","buildChartTheme","XYChart","AnimatedGrid","AnimatedAxis","seriesData","AnimatedLineSeries","Tooltip","BaseLegend","line_chart_default","Group","Pie","clsx","localPoint","useTooltip","useCallback","useChartMouseHandler","withTooltips","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","onMouseMove","event","data","coords","onMouseLeave","use_chart_mouse_handler_default","pie_chart_module_default","jsx","jsxs","PieChart","data","width","height","withTooltips","innerRadius","className","showLegend","legendOrientation","providerTheme","useChartTheme","onMouseMove","onMouseLeave","tooltipOpen","tooltipData","tooltipLeft","tooltipTop","use_chart_mouse_handler_default","radius","centerX","centerY","accessors","d","legendItems","item","index","clsx","pie_chart_module_default","Group","Pie","pie","arc","centroidX","centroidY","hasSpaceForLabel","handleMouseMove","event","pathProps","defaultTheme","BaseLegend","BaseTooltip","pie_chart_default","localPoint","Group","Pie","Text","useTooltip","clsx","useCallback","pie_semi_circle_chart_module_default","jsx","jsxs","PieSemiCircleChart","data","width","label","note","className","withTooltips","clockwise","thickness","showLegend","legendOrientation","providerTheme","useChartTheme","tooltipOpen","tooltipLeft","tooltipTop","tooltipData","hideTooltip","showTooltip","useTooltip","centerX","height","radius","pad","innerRadius","dataWithIndex","d","index","startAngle","endAngle","accessors","a","b","handleMouseMove","useCallback","event","arc","coords","localPoint","handleMouseLeave","handleArcMouseMove","legendItems","item","clsx","pie_semi_circle_chart_module_default","Group","Pie","pie","Text","BaseTooltip","BaseLegend","pie_semi_circle_chart_default"]}
|
package/package.json
CHANGED