@automattic/charts 0.57.0 → 0.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/CHANGELOG.md +36 -2
  2. package/README.md +7 -54
  3. package/dist/index.cjs +9607 -21
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +32 -49
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.d.cts +1612 -33
  8. package/dist/index.d.ts +1612 -33
  9. package/dist/index.js +9640 -54
  10. package/dist/index.js.map +1 -1
  11. package/package.json +9 -126
  12. package/src/charts/bar-chart/bar-chart.module.scss +0 -5
  13. package/src/charts/bar-chart/bar-chart.tsx +142 -149
  14. package/src/charts/bar-chart/test/bar-chart.test.tsx +48 -31
  15. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +54 -74
  16. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +4 -5
  17. package/src/charts/leaderboard-chart/types.ts +1 -11
  18. package/src/charts/line-chart/line-chart.module.scss +0 -5
  19. package/src/charts/line-chart/line-chart.tsx +202 -193
  20. package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx +1 -2
  21. package/src/charts/line-chart/test/line-chart.test.tsx +49 -27
  22. package/src/charts/line-chart/types.ts +0 -1
  23. package/src/charts/pie-chart/pie-chart.module.scss +2 -10
  24. package/src/charts/pie-chart/pie-chart.tsx +212 -212
  25. package/src/charts/pie-chart/test/composition-api.test.tsx +44 -3
  26. package/src/charts/pie-chart/test/pie-chart.test.tsx +51 -44
  27. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +2 -8
  28. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +166 -168
  29. package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx +58 -30
  30. package/src/charts/private/chart-composition/index.ts +2 -0
  31. package/src/charts/private/chart-composition/render-legend-slot.ts +22 -0
  32. package/src/charts/private/chart-composition/test/render-legend-slot.test.tsx +60 -0
  33. package/src/charts/private/chart-composition/test/use-chart-children.test.tsx +91 -0
  34. package/src/charts/private/chart-composition/use-chart-children.ts +34 -2
  35. package/src/charts/private/chart-layout/chart-layout.module.scss +7 -0
  36. package/src/charts/private/chart-layout/chart-layout.tsx +106 -0
  37. package/src/charts/private/chart-layout/index.ts +2 -0
  38. package/src/charts/private/chart-layout/test/chart-layout.test.tsx +167 -0
  39. package/src/charts/private/single-chart-context/single-chart-context.tsx +2 -2
  40. package/src/charts/private/svg-empty-state/index.ts +1 -0
  41. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +7 -0
  42. package/src/charts/private/svg-empty-state/svg-empty-state.tsx +40 -0
  43. package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx +12 -8
  44. package/src/components/legend/hooks/use-chart-legend-items.ts +12 -13
  45. package/src/components/legend/index.ts +1 -8
  46. package/src/components/legend/legend.tsx +33 -8
  47. package/src/components/legend/private/base-legend.module.scss +19 -37
  48. package/src/components/legend/private/base-legend.tsx +0 -2
  49. package/src/components/legend/test/legend.test.tsx +93 -1
  50. package/src/components/legend/types.ts +7 -34
  51. package/src/hooks/index.ts +1 -1
  52. package/src/hooks/use-data-with-percentages.ts +24 -0
  53. package/src/hooks/use-interactive-legend-data.ts +18 -15
  54. package/src/index.ts +66 -9
  55. package/src/providers/chart-context/global-charts-provider.tsx +7 -1
  56. package/src/providers/chart-context/hooks/use-chart-registration.ts +2 -1
  57. package/src/providers/chart-context/types.ts +2 -2
  58. package/src/types.ts +110 -45
  59. package/src/utils/date-parsing.ts +10 -1
  60. package/src/utils/test/date-parsing.test.ts +12 -0
  61. package/src/utils/test/resolve-css-var.test.ts +4 -2
  62. package/tsup.config.ts +1 -1
  63. package/dist/base-tooltip-DOq93wjU.d.cts +0 -38
  64. package/dist/base-tooltip-DOq93wjU.d.ts +0 -38
  65. package/dist/charts/bar-chart/index.cjs +0 -15
  66. package/dist/charts/bar-chart/index.cjs.map +0 -1
  67. package/dist/charts/bar-chart/index.css +0 -153
  68. package/dist/charts/bar-chart/index.css.map +0 -1
  69. package/dist/charts/bar-chart/index.d.cts +0 -37
  70. package/dist/charts/bar-chart/index.d.ts +0 -37
  71. package/dist/charts/bar-chart/index.js +0 -15
  72. package/dist/charts/bar-chart/index.js.map +0 -1
  73. package/dist/charts/bar-list-chart/index.cjs +0 -16
  74. package/dist/charts/bar-list-chart/index.cjs.map +0 -1
  75. package/dist/charts/bar-list-chart/index.css +0 -153
  76. package/dist/charts/bar-list-chart/index.css.map +0 -1
  77. package/dist/charts/bar-list-chart/index.d.cts +0 -92
  78. package/dist/charts/bar-list-chart/index.d.ts +0 -92
  79. package/dist/charts/bar-list-chart/index.js +0 -16
  80. package/dist/charts/bar-list-chart/index.js.map +0 -1
  81. package/dist/charts/conversion-funnel-chart/index.cjs +0 -11
  82. package/dist/charts/conversion-funnel-chart/index.cjs.map +0 -1
  83. package/dist/charts/conversion-funnel-chart/index.css +0 -251
  84. package/dist/charts/conversion-funnel-chart/index.css.map +0 -1
  85. package/dist/charts/conversion-funnel-chart/index.d.cts +0 -97
  86. package/dist/charts/conversion-funnel-chart/index.d.ts +0 -97
  87. package/dist/charts/conversion-funnel-chart/index.js +0 -11
  88. package/dist/charts/conversion-funnel-chart/index.js.map +0 -1
  89. package/dist/charts/geo-chart/index.cjs +0 -13
  90. package/dist/charts/geo-chart/index.cjs.map +0 -1
  91. package/dist/charts/geo-chart/index.css +0 -117
  92. package/dist/charts/geo-chart/index.css.map +0 -1
  93. package/dist/charts/geo-chart/index.d.cts +0 -67
  94. package/dist/charts/geo-chart/index.d.ts +0 -67
  95. package/dist/charts/geo-chart/index.js +0 -13
  96. package/dist/charts/geo-chart/index.js.map +0 -1
  97. package/dist/charts/leaderboard-chart/index.cjs +0 -20
  98. package/dist/charts/leaderboard-chart/index.cjs.map +0 -1
  99. package/dist/charts/leaderboard-chart/index.css +0 -172
  100. package/dist/charts/leaderboard-chart/index.css.map +0 -1
  101. package/dist/charts/leaderboard-chart/index.d.cts +0 -46
  102. package/dist/charts/leaderboard-chart/index.d.ts +0 -46
  103. package/dist/charts/leaderboard-chart/index.js +0 -20
  104. package/dist/charts/leaderboard-chart/index.js.map +0 -1
  105. package/dist/charts/line-chart/index.cjs +0 -15
  106. package/dist/charts/line-chart/index.cjs.map +0 -1
  107. package/dist/charts/line-chart/index.css +0 -225
  108. package/dist/charts/line-chart/index.css.map +0 -1
  109. package/dist/charts/line-chart/index.d.cts +0 -99
  110. package/dist/charts/line-chart/index.d.ts +0 -99
  111. package/dist/charts/line-chart/index.js +0 -15
  112. package/dist/charts/line-chart/index.js.map +0 -1
  113. package/dist/charts/pie-chart/index.cjs +0 -18
  114. package/dist/charts/pie-chart/index.cjs.map +0 -1
  115. package/dist/charts/pie-chart/index.css +0 -143
  116. package/dist/charts/pie-chart/index.css.map +0 -1
  117. package/dist/charts/pie-chart/index.d.cts +0 -97
  118. package/dist/charts/pie-chart/index.d.ts +0 -97
  119. package/dist/charts/pie-chart/index.js +0 -18
  120. package/dist/charts/pie-chart/index.js.map +0 -1
  121. package/dist/charts/pie-semi-circle-chart/index.cjs +0 -17
  122. package/dist/charts/pie-semi-circle-chart/index.cjs.map +0 -1
  123. package/dist/charts/pie-semi-circle-chart/index.css +0 -144
  124. package/dist/charts/pie-semi-circle-chart/index.css.map +0 -1
  125. package/dist/charts/pie-semi-circle-chart/index.d.cts +0 -94
  126. package/dist/charts/pie-semi-circle-chart/index.d.ts +0 -94
  127. package/dist/charts/pie-semi-circle-chart/index.js +0 -17
  128. package/dist/charts/pie-semi-circle-chart/index.js.map +0 -1
  129. package/dist/charts/sparkline/index.cjs +0 -16
  130. package/dist/charts/sparkline/index.cjs.map +0 -1
  131. package/dist/charts/sparkline/index.css +0 -242
  132. package/dist/charts/sparkline/index.css.map +0 -1
  133. package/dist/charts/sparkline/index.d.cts +0 -113
  134. package/dist/charts/sparkline/index.d.ts +0 -113
  135. package/dist/charts/sparkline/index.js +0 -16
  136. package/dist/charts/sparkline/index.js.map +0 -1
  137. package/dist/chunk-2A34OA5O.cjs +0 -51
  138. package/dist/chunk-2A34OA5O.cjs.map +0 -1
  139. package/dist/chunk-2NCY7R4G.js +0 -3897
  140. package/dist/chunk-2NCY7R4G.js.map +0 -1
  141. package/dist/chunk-32DH6JDF.js +0 -1263
  142. package/dist/chunk-32DH6JDF.js.map +0 -1
  143. package/dist/chunk-4OPFE4RM.js +0 -614
  144. package/dist/chunk-4OPFE4RM.js.map +0 -1
  145. package/dist/chunk-6CCZL2JJ.js +0 -63
  146. package/dist/chunk-6CCZL2JJ.js.map +0 -1
  147. package/dist/chunk-77OKCVQN.cjs +0 -421
  148. package/dist/chunk-77OKCVQN.cjs.map +0 -1
  149. package/dist/chunk-7FQX4ALL.cjs +0 -219
  150. package/dist/chunk-7FQX4ALL.cjs.map +0 -1
  151. package/dist/chunk-ASLARV7L.cjs +0 -81
  152. package/dist/chunk-ASLARV7L.cjs.map +0 -1
  153. package/dist/chunk-BCX5THDQ.js +0 -403
  154. package/dist/chunk-BCX5THDQ.js.map +0 -1
  155. package/dist/chunk-BPYKWMI7.js +0 -194
  156. package/dist/chunk-BPYKWMI7.js.map +0 -1
  157. package/dist/chunk-CZGYJKG6.js +0 -421
  158. package/dist/chunk-CZGYJKG6.js.map +0 -1
  159. package/dist/chunk-D2UH4CFE.cjs +0 -120
  160. package/dist/chunk-D2UH4CFE.cjs.map +0 -1
  161. package/dist/chunk-DAU3HNEG.js +0 -344
  162. package/dist/chunk-DAU3HNEG.js.map +0 -1
  163. package/dist/chunk-H2V4JMSA.js +0 -219
  164. package/dist/chunk-H2V4JMSA.js.map +0 -1
  165. package/dist/chunk-I2276W3I.cjs +0 -66
  166. package/dist/chunk-I2276W3I.cjs.map +0 -1
  167. package/dist/chunk-I35UYJJR.cjs +0 -468
  168. package/dist/chunk-I35UYJJR.cjs.map +0 -1
  169. package/dist/chunk-IU4DYUAV.js +0 -120
  170. package/dist/chunk-IU4DYUAV.js.map +0 -1
  171. package/dist/chunk-KXRWNFQJ.js +0 -51
  172. package/dist/chunk-KXRWNFQJ.js.map +0 -1
  173. package/dist/chunk-OP6PHB2U.js +0 -81
  174. package/dist/chunk-OP6PHB2U.js.map +0 -1
  175. package/dist/chunk-PXLEMUGJ.js +0 -165
  176. package/dist/chunk-PXLEMUGJ.js.map +0 -1
  177. package/dist/chunk-RCY6XLGU.cjs +0 -63
  178. package/dist/chunk-RCY6XLGU.cjs.map +0 -1
  179. package/dist/chunk-RHHVEJHJ.cjs +0 -1263
  180. package/dist/chunk-RHHVEJHJ.cjs.map +0 -1
  181. package/dist/chunk-TO3OQBXG.cjs +0 -165
  182. package/dist/chunk-TO3OQBXG.cjs.map +0 -1
  183. package/dist/chunk-V36ERY7Y.js +0 -375
  184. package/dist/chunk-V36ERY7Y.js.map +0 -1
  185. package/dist/chunk-VJM5XCB4.cjs +0 -614
  186. package/dist/chunk-VJM5XCB4.cjs.map +0 -1
  187. package/dist/chunk-VTS3PNMS.cjs +0 -344
  188. package/dist/chunk-VTS3PNMS.cjs.map +0 -1
  189. package/dist/chunk-WLODYNLB.js +0 -1067
  190. package/dist/chunk-WLODYNLB.js.map +0 -1
  191. package/dist/chunk-XKRJL2QT.cjs +0 -375
  192. package/dist/chunk-XKRJL2QT.cjs.map +0 -1
  193. package/dist/chunk-XWYZIFZW.js +0 -66
  194. package/dist/chunk-XWYZIFZW.js.map +0 -1
  195. package/dist/chunk-Y3NNQMAX.cjs +0 -194
  196. package/dist/chunk-Y3NNQMAX.cjs.map +0 -1
  197. package/dist/chunk-YE2T52VZ.cjs +0 -1067
  198. package/dist/chunk-YE2T52VZ.cjs.map +0 -1
  199. package/dist/chunk-Z26M4V2M.js +0 -468
  200. package/dist/chunk-Z26M4V2M.js.map +0 -1
  201. package/dist/chunk-Z45KX47P.cjs +0 -3897
  202. package/dist/chunk-Z45KX47P.cjs.map +0 -1
  203. package/dist/chunk-ZH4F5RMG.cjs +0 -403
  204. package/dist/chunk-ZH4F5RMG.cjs.map +0 -1
  205. package/dist/components/legend/index.cjs +0 -11
  206. package/dist/components/legend/index.cjs.map +0 -1
  207. package/dist/components/legend/index.css +0 -103
  208. package/dist/components/legend/index.css.map +0 -1
  209. package/dist/components/legend/index.d.cts +0 -37
  210. package/dist/components/legend/index.d.ts +0 -37
  211. package/dist/components/legend/index.js +0 -11
  212. package/dist/components/legend/index.js.map +0 -1
  213. package/dist/components/tooltip/index.cjs +0 -12
  214. package/dist/components/tooltip/index.cjs.map +0 -1
  215. package/dist/components/tooltip/index.css +0 -13
  216. package/dist/components/tooltip/index.css.map +0 -1
  217. package/dist/components/tooltip/index.d.cts +0 -71
  218. package/dist/components/tooltip/index.d.ts +0 -71
  219. package/dist/components/tooltip/index.js +0 -12
  220. package/dist/components/tooltip/index.js.map +0 -1
  221. package/dist/components/trend-indicator/index.cjs +0 -8
  222. package/dist/components/trend-indicator/index.cjs.map +0 -1
  223. package/dist/components/trend-indicator/index.css +0 -27
  224. package/dist/components/trend-indicator/index.css.map +0 -1
  225. package/dist/components/trend-indicator/index.d.cts +0 -44
  226. package/dist/components/trend-indicator/index.d.ts +0 -44
  227. package/dist/components/trend-indicator/index.js +0 -8
  228. package/dist/components/trend-indicator/index.js.map +0 -1
  229. package/dist/format-metric-value-MXm5DtQ_.d.cts +0 -24
  230. package/dist/format-metric-value-MXm5DtQ_.d.ts +0 -24
  231. package/dist/hooks/index.cjs +0 -31
  232. package/dist/hooks/index.cjs.map +0 -1
  233. package/dist/hooks/index.css +0 -103
  234. package/dist/hooks/index.css.map +0 -1
  235. package/dist/hooks/index.d.cts +0 -272
  236. package/dist/hooks/index.d.ts +0 -272
  237. package/dist/hooks/index.js +0 -31
  238. package/dist/hooks/index.js.map +0 -1
  239. package/dist/leaderboard-chart-BKYYXcg2.d.ts +0 -83
  240. package/dist/leaderboard-chart-DR7CGb0L.d.cts +0 -83
  241. package/dist/legend-C2grwnWk.d.cts +0 -9
  242. package/dist/legend-Cj0xM5dU.d.ts +0 -9
  243. package/dist/providers/index.cjs +0 -21
  244. package/dist/providers/index.cjs.map +0 -1
  245. package/dist/providers/index.css +0 -103
  246. package/dist/providers/index.css.map +0 -1
  247. package/dist/providers/index.d.cts +0 -28
  248. package/dist/providers/index.d.ts +0 -28
  249. package/dist/providers/index.js +0 -21
  250. package/dist/providers/index.js.map +0 -1
  251. package/dist/themes-BmVGrYnF.d.ts +0 -67
  252. package/dist/themes-CyjKm-P_.d.cts +0 -67
  253. package/dist/types-CuUEszrM.d.ts +0 -19
  254. package/dist/types-DZordNiO.d.cts +0 -505
  255. package/dist/types-DZordNiO.d.ts +0 -505
  256. package/dist/types-I67mddpr.d.cts +0 -78
  257. package/dist/types-I67mddpr.d.ts +0 -78
  258. package/dist/types-KtOPPzPX.d.cts +0 -19
  259. package/dist/utils/index.cjs +0 -44
  260. package/dist/utils/index.cjs.map +0 -1
  261. package/dist/utils/index.d.cts +0 -226
  262. package/dist/utils/index.d.ts +0 -226
  263. package/dist/utils/index.js +0 -44
  264. package/dist/utils/index.js.map +0 -1
  265. package/dist/with-responsive-CNfhzAUu.d.cts +0 -18
  266. package/dist/with-responsive-CNfhzAUu.d.ts +0 -18
  267. package/src/hooks/use-has-legend-child.ts +0 -22
@@ -1,272 +0,0 @@
1
- import { MouseEvent, ReactNode, RefObject } from 'react';
2
- import { D as DataPoint, j as SeriesData, k as SeriesDataOptions, B as BaseChartProps, c as DataPointDate } from '../types-DZordNiO.cjs';
3
- import * as _visx_xychart from '@visx/xychart';
4
- import { XYChartTheme } from '@visx/xychart';
5
- import '@visx/annotation/lib/components/CircleSubject';
6
- import '@visx/annotation/lib/components/Connector';
7
- import '@visx/annotation/lib/components/Label';
8
- import '@visx/annotation/lib/components/LineSubject';
9
- import '@visx/axis';
10
- import '@visx/legend/lib/types';
11
- import '@visx/scale';
12
- import '@visx/text/lib/Text';
13
- import '@wordpress/theme';
14
- import 'react-google-charts';
15
-
16
- /**
17
- * Custom hook to memoize a value using deep equality comparison.
18
- * Prevents unnecessary re-renders when objects have the same content but different references.
19
- *
20
- * @param value - The value to memoize with deep equality comparison
21
- * @return The memoized value that only changes when deeply different
22
- */
23
- declare const useDeepMemo: <T>(value: T) => T;
24
-
25
- type UseChartMouseHandlerProps = {
26
- /**
27
- * Whether tooltips are enabled
28
- */
29
- withTooltips: boolean;
30
- /**
31
- * Horizontal offset for tooltip positioning in pixels (default: 0)
32
- */
33
- offsetX?: number;
34
- /**
35
- * Vertical offset for tooltip positioning in pixels (default: -10)
36
- */
37
- offsetY?: number;
38
- };
39
- type UseChartMouseHandlerReturn = {
40
- /**
41
- * Handler for mouse move events
42
- */
43
- onMouseMove: (event: MouseEvent<SVGElement>, data: DataPoint) => void;
44
- /**
45
- * Handler for mouse leave events
46
- */
47
- onMouseLeave: () => void;
48
- /**
49
- * Whether the tooltip is currently open
50
- */
51
- tooltipOpen: boolean;
52
- /**
53
- * The current tooltip data
54
- */
55
- tooltipData: DataPoint | null;
56
- /**
57
- * The current tooltip left position
58
- */
59
- tooltipLeft: number | undefined;
60
- /**
61
- * The current tooltip top position
62
- */
63
- tooltipTop: number | undefined;
64
- };
65
- /**
66
- * Hook to handle mouse interactions for chart components
67
- *
68
- * @param {UseChartMouseHandlerProps} props - Hook configuration
69
- * @return {UseChartMouseHandlerReturn} Object containing handlers and tooltip state
70
- */
71
- declare const useChartMouseHandler: ({ withTooltips, offsetX, offsetY, }: UseChartMouseHandlerProps) => UseChartMouseHandlerReturn;
72
-
73
- declare const useXYChartTheme: (data: SeriesData[]) => _visx_xychart.XYChartTheme;
74
-
75
- /**
76
- * Hook that transforms and sorts chart data, handling date parsing and sorting
77
- *
78
- * This hook extracts the common data transformation logic used in both line-chart
79
- * and bar-chart components. It:
80
- * 1. Parses date strings into Date objects using parseAsLocalDate
81
- * 2. Sorts data points by date when date properties are present
82
- * 3. Returns the original data unchanged when no date properties are found
83
- *
84
- * @param {SeriesData[]} data - The raw chart data to transform
85
- * @return {SeriesData[]} The transformed and sorted data
86
- */
87
- declare const useChartDataTransform: (data: SeriesData[]) => {
88
- data: any[];
89
- group?: string;
90
- label: string;
91
- options?: SeriesDataOptions;
92
- }[];
93
-
94
- declare const useChartMargin: (height: number, options: BaseChartProps["options"], data: SeriesData[], theme: XYChartTheme, horizontal?: boolean) => {
95
- top: number;
96
- right: number;
97
- bottom: number;
98
- left: number;
99
- };
100
-
101
- /**
102
- * Hook to measure the width and height of a DOM element.
103
- * Returns a ref callback to attach to the element and the current dimensions in pixels.
104
- *
105
- * @param {object} props - Optional props.
106
- * @param {number} props.initialWidth - The initial width to use.
107
- * @param {number} props.initialHeight - The initial height to use.
108
- *
109
- * @return {[Function, number, number]} A tuple containing a ref callback, width, and height in pixels
110
- */
111
- declare function useElementSize<T extends HTMLElement = HTMLDivElement>({ initialWidth, initialHeight, }?: {
112
- initialWidth?: number;
113
- initialHeight?: number;
114
- }): [(node: T | null) => void, number, number];
115
-
116
- /**
117
- * Hook to detect if children contain a Legend component (composition pattern).
118
- *
119
- * @param {ReactNode} children - React children to search through
120
- * @return {boolean} Whether a Legend component is present in children
121
- */
122
- declare function useHasLegendChild(children: ReactNode): boolean;
123
-
124
- /**
125
- * Hook to detect if text content is truncated within its container.
126
- * Uses ResizeObserver to dynamically track changes in element size.
127
- *
128
- * @param enabled - Whether truncation detection should be active. Defaults to true.
129
- * @return A tuple containing:
130
- * - [0] refCallback: Function to attach to the text element as a ref
131
- * - [1] isTruncated: Boolean indicating if the text is currently truncated
132
- *
133
- * @example
134
- * ```tsx
135
- * const [textRef, isTruncated] = useTextTruncation(true);
136
- *
137
- * return (
138
- * <span ref={textRef} title={isTruncated ? fullText : undefined}>
139
- * {text}
140
- * </span>
141
- * );
142
- * ```
143
- */
144
- declare function useTextTruncation(enabled?: boolean): [(node: HTMLElement | null) => void, boolean];
145
-
146
- type EnhancedDataPoint = DataPointDate & {
147
- visualValue?: number;
148
- };
149
- interface EnhancedSeriesData extends Omit<SeriesData, 'data'> {
150
- data: EnhancedDataPoint[];
151
- }
152
- interface UseZeroValueDisplayOptions {
153
- enabled: boolean;
154
- /**
155
- * The pixel length of the value axis (height for vertical charts, width for
156
- * horizontal charts). Used to calculate a minimum visible value that ensures
157
- * zero-value bars are at least MIN_PIXEL_HEIGHT pixels tall along that axis.
158
- */
159
- valueAxisLength?: number;
160
- }
161
- declare const useZeroValueDisplay: (data: SeriesData[], options?: UseZeroValueDisplayOptions) => SeriesData[] | EnhancedSeriesData[];
162
-
163
- /**
164
- * Data point interface for charts with interactive legends.
165
- * Requires label for series identification, value for calculations, and percentage for display.
166
- */
167
- interface DataPointWithPercentage {
168
- label: string;
169
- value: number;
170
- percentage: number;
171
- }
172
- /**
173
- * Parameters for the useInteractiveLegendData hook.
174
- */
175
- interface UseInteractiveLegendDataParams<T extends DataPointWithPercentage> {
176
- /** The chart data to filter based on legend visibility */
177
- data: T[];
178
- /** Unique chart identifier, required for interactive legends */
179
- chartId: string | undefined;
180
- /** Whether interactive legend filtering is enabled */
181
- legendInteractive: boolean;
182
- /** Function to check if a series is visible in the legend */
183
- isSeriesVisible: (chartId: string, label: string) => boolean;
184
- }
185
- /**
186
- * Return value from the useInteractiveLegendData hook.
187
- */
188
- interface UseInteractiveLegendDataResult<T extends DataPointWithPercentage> {
189
- /** Filtered data array containing only visible segments with recalculated percentages */
190
- visibleData: T[];
191
- /** Boolean indicating if all segments are hidden */
192
- allSegmentsHidden: boolean;
193
- /**
194
- * Legend data with recalculated percentages for visible items.
195
- * Uses original data for hidden items, but shows recalculated percentages for visible ones.
196
- * This ensures the legend displays accurate percentages while maintaining all entries.
197
- */
198
- legendData: T[];
199
- }
200
- /**
201
- * Custom hook to filter and recalculate chart data for interactive legends.
202
- *
203
- * When interactive legends are enabled, this hook:
204
- * 1. Filters data to show only visible series based on legend selection
205
- * 2. Recalculates percentages so visible segments total 100%
206
- * 3. Tracks whether all segments are hidden to show empty state
207
- *
208
- * This is particularly useful for pie charts, donut charts, and semi-circle charts
209
- * where segment visibility and percentages need to be dynamically adjusted.
210
- *
211
- * @example
212
- * ```tsx
213
- * const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
214
- * data: chartData,
215
- * chartId: 'my-pie-chart',
216
- * legendInteractive: true,
217
- * isSeriesVisible: (id, label) => context.isSeriesVisible(id, label),
218
- * });
219
- *
220
- * // Use legendData for creating legend items (shows recalculated percentages)
221
- * const legendItems = useChartLegendItems(legendData, legendOptions);
222
- *
223
- * if (allSegmentsHidden) {
224
- * return <EmptyState />;
225
- * }
226
- *
227
- * // Use visibleData for rendering the chart (only visible segments)
228
- * return <PieChart data={visibleData} />;
229
- * ```
230
- *
231
- * @param params - Configuration object for the hook
232
- * @param params.data - The chart data to filter
233
- * @param params.chartId - Unique identifier for the chart (required for interactive mode)
234
- * @param params.legendInteractive - Whether to enable interactive filtering
235
- * @param params.isSeriesVisible - Function to check series visibility
236
- * @return Object containing visibleData, allSegmentsHidden flag, and legendData with recalculated percentages
237
- */
238
- declare const useInteractiveLegendData: <T extends DataPointWithPercentage>({ data, chartId, legendInteractive, isSeriesVisible, }: UseInteractiveLegendDataParams<T>) => UseInteractiveLegendDataResult<T>;
239
-
240
- /**
241
- * Custom hook to determine if the user prefers reduced motion.
242
- * @return {boolean} A boolean indicating the user's preference for reduced motion.
243
- */
244
- declare function usePrefersReducedMotion(): boolean;
245
-
246
- /**
247
- * Relocates visx chart tooltip portals from `document.body` into a target
248
- * container element. This allows the tooltips to participate in the same CSS
249
- * stacking context as other elements in the container (e.g. a sticky header),
250
- * so z-index ordering works correctly between them.
251
- *
252
- * The relocated portal divs use `position: fixed` at the viewport origin to
253
- * preserve the tooltip coordinate system (visx calculates positions relative
254
- * to the viewport).
255
- *
256
- * Because the visx Portal class calls `document.body.removeChild(node)` during
257
- * unmount, we patch `document.body.removeChild` to gracefully handle nodes that
258
- * were moved out of body. Without this, React throws a "not a child of this
259
- * node" error when tooltips unmount.
260
- *
261
- * **Important:** The container and its ancestors must not have CSS `transform`,
262
- * `perspective`, or `filter` properties set, as these create a new containing
263
- * block for `position: fixed` children, breaking viewport-relative positioning.
264
- *
265
- * @param containerRef - Ref to the element that portals should be relocated into.
266
- * The element referenced here, or one of its ancestors,
267
- * should establish the desired stacking context (for example
268
- * by using position and z-index).
269
- */
270
- declare function useTooltipPortalRelocator(containerRef: RefObject<HTMLElement | null> | undefined): void;
271
-
272
- export { useChartDataTransform, useChartMargin, useChartMouseHandler, useDeepMemo, useElementSize, useHasLegendChild, useInteractiveLegendData, usePrefersReducedMotion, useTextTruncation, useTooltipPortalRelocator, useXYChartTheme, useZeroValueDisplay };
@@ -1,272 +0,0 @@
1
- import { MouseEvent, ReactNode, RefObject } from 'react';
2
- import { D as DataPoint, j as SeriesData, k as SeriesDataOptions, B as BaseChartProps, c as DataPointDate } from '../types-DZordNiO.js';
3
- import * as _visx_xychart from '@visx/xychart';
4
- import { XYChartTheme } from '@visx/xychart';
5
- import '@visx/annotation/lib/components/CircleSubject';
6
- import '@visx/annotation/lib/components/Connector';
7
- import '@visx/annotation/lib/components/Label';
8
- import '@visx/annotation/lib/components/LineSubject';
9
- import '@visx/axis';
10
- import '@visx/legend/lib/types';
11
- import '@visx/scale';
12
- import '@visx/text/lib/Text';
13
- import '@wordpress/theme';
14
- import 'react-google-charts';
15
-
16
- /**
17
- * Custom hook to memoize a value using deep equality comparison.
18
- * Prevents unnecessary re-renders when objects have the same content but different references.
19
- *
20
- * @param value - The value to memoize with deep equality comparison
21
- * @return The memoized value that only changes when deeply different
22
- */
23
- declare const useDeepMemo: <T>(value: T) => T;
24
-
25
- type UseChartMouseHandlerProps = {
26
- /**
27
- * Whether tooltips are enabled
28
- */
29
- withTooltips: boolean;
30
- /**
31
- * Horizontal offset for tooltip positioning in pixels (default: 0)
32
- */
33
- offsetX?: number;
34
- /**
35
- * Vertical offset for tooltip positioning in pixels (default: -10)
36
- */
37
- offsetY?: number;
38
- };
39
- type UseChartMouseHandlerReturn = {
40
- /**
41
- * Handler for mouse move events
42
- */
43
- onMouseMove: (event: MouseEvent<SVGElement>, data: DataPoint) => void;
44
- /**
45
- * Handler for mouse leave events
46
- */
47
- onMouseLeave: () => void;
48
- /**
49
- * Whether the tooltip is currently open
50
- */
51
- tooltipOpen: boolean;
52
- /**
53
- * The current tooltip data
54
- */
55
- tooltipData: DataPoint | null;
56
- /**
57
- * The current tooltip left position
58
- */
59
- tooltipLeft: number | undefined;
60
- /**
61
- * The current tooltip top position
62
- */
63
- tooltipTop: number | undefined;
64
- };
65
- /**
66
- * Hook to handle mouse interactions for chart components
67
- *
68
- * @param {UseChartMouseHandlerProps} props - Hook configuration
69
- * @return {UseChartMouseHandlerReturn} Object containing handlers and tooltip state
70
- */
71
- declare const useChartMouseHandler: ({ withTooltips, offsetX, offsetY, }: UseChartMouseHandlerProps) => UseChartMouseHandlerReturn;
72
-
73
- declare const useXYChartTheme: (data: SeriesData[]) => _visx_xychart.XYChartTheme;
74
-
75
- /**
76
- * Hook that transforms and sorts chart data, handling date parsing and sorting
77
- *
78
- * This hook extracts the common data transformation logic used in both line-chart
79
- * and bar-chart components. It:
80
- * 1. Parses date strings into Date objects using parseAsLocalDate
81
- * 2. Sorts data points by date when date properties are present
82
- * 3. Returns the original data unchanged when no date properties are found
83
- *
84
- * @param {SeriesData[]} data - The raw chart data to transform
85
- * @return {SeriesData[]} The transformed and sorted data
86
- */
87
- declare const useChartDataTransform: (data: SeriesData[]) => {
88
- data: any[];
89
- group?: string;
90
- label: string;
91
- options?: SeriesDataOptions;
92
- }[];
93
-
94
- declare const useChartMargin: (height: number, options: BaseChartProps["options"], data: SeriesData[], theme: XYChartTheme, horizontal?: boolean) => {
95
- top: number;
96
- right: number;
97
- bottom: number;
98
- left: number;
99
- };
100
-
101
- /**
102
- * Hook to measure the width and height of a DOM element.
103
- * Returns a ref callback to attach to the element and the current dimensions in pixels.
104
- *
105
- * @param {object} props - Optional props.
106
- * @param {number} props.initialWidth - The initial width to use.
107
- * @param {number} props.initialHeight - The initial height to use.
108
- *
109
- * @return {[Function, number, number]} A tuple containing a ref callback, width, and height in pixels
110
- */
111
- declare function useElementSize<T extends HTMLElement = HTMLDivElement>({ initialWidth, initialHeight, }?: {
112
- initialWidth?: number;
113
- initialHeight?: number;
114
- }): [(node: T | null) => void, number, number];
115
-
116
- /**
117
- * Hook to detect if children contain a Legend component (composition pattern).
118
- *
119
- * @param {ReactNode} children - React children to search through
120
- * @return {boolean} Whether a Legend component is present in children
121
- */
122
- declare function useHasLegendChild(children: ReactNode): boolean;
123
-
124
- /**
125
- * Hook to detect if text content is truncated within its container.
126
- * Uses ResizeObserver to dynamically track changes in element size.
127
- *
128
- * @param enabled - Whether truncation detection should be active. Defaults to true.
129
- * @return A tuple containing:
130
- * - [0] refCallback: Function to attach to the text element as a ref
131
- * - [1] isTruncated: Boolean indicating if the text is currently truncated
132
- *
133
- * @example
134
- * ```tsx
135
- * const [textRef, isTruncated] = useTextTruncation(true);
136
- *
137
- * return (
138
- * <span ref={textRef} title={isTruncated ? fullText : undefined}>
139
- * {text}
140
- * </span>
141
- * );
142
- * ```
143
- */
144
- declare function useTextTruncation(enabled?: boolean): [(node: HTMLElement | null) => void, boolean];
145
-
146
- type EnhancedDataPoint = DataPointDate & {
147
- visualValue?: number;
148
- };
149
- interface EnhancedSeriesData extends Omit<SeriesData, 'data'> {
150
- data: EnhancedDataPoint[];
151
- }
152
- interface UseZeroValueDisplayOptions {
153
- enabled: boolean;
154
- /**
155
- * The pixel length of the value axis (height for vertical charts, width for
156
- * horizontal charts). Used to calculate a minimum visible value that ensures
157
- * zero-value bars are at least MIN_PIXEL_HEIGHT pixels tall along that axis.
158
- */
159
- valueAxisLength?: number;
160
- }
161
- declare const useZeroValueDisplay: (data: SeriesData[], options?: UseZeroValueDisplayOptions) => SeriesData[] | EnhancedSeriesData[];
162
-
163
- /**
164
- * Data point interface for charts with interactive legends.
165
- * Requires label for series identification, value for calculations, and percentage for display.
166
- */
167
- interface DataPointWithPercentage {
168
- label: string;
169
- value: number;
170
- percentage: number;
171
- }
172
- /**
173
- * Parameters for the useInteractiveLegendData hook.
174
- */
175
- interface UseInteractiveLegendDataParams<T extends DataPointWithPercentage> {
176
- /** The chart data to filter based on legend visibility */
177
- data: T[];
178
- /** Unique chart identifier, required for interactive legends */
179
- chartId: string | undefined;
180
- /** Whether interactive legend filtering is enabled */
181
- legendInteractive: boolean;
182
- /** Function to check if a series is visible in the legend */
183
- isSeriesVisible: (chartId: string, label: string) => boolean;
184
- }
185
- /**
186
- * Return value from the useInteractiveLegendData hook.
187
- */
188
- interface UseInteractiveLegendDataResult<T extends DataPointWithPercentage> {
189
- /** Filtered data array containing only visible segments with recalculated percentages */
190
- visibleData: T[];
191
- /** Boolean indicating if all segments are hidden */
192
- allSegmentsHidden: boolean;
193
- /**
194
- * Legend data with recalculated percentages for visible items.
195
- * Uses original data for hidden items, but shows recalculated percentages for visible ones.
196
- * This ensures the legend displays accurate percentages while maintaining all entries.
197
- */
198
- legendData: T[];
199
- }
200
- /**
201
- * Custom hook to filter and recalculate chart data for interactive legends.
202
- *
203
- * When interactive legends are enabled, this hook:
204
- * 1. Filters data to show only visible series based on legend selection
205
- * 2. Recalculates percentages so visible segments total 100%
206
- * 3. Tracks whether all segments are hidden to show empty state
207
- *
208
- * This is particularly useful for pie charts, donut charts, and semi-circle charts
209
- * where segment visibility and percentages need to be dynamically adjusted.
210
- *
211
- * @example
212
- * ```tsx
213
- * const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
214
- * data: chartData,
215
- * chartId: 'my-pie-chart',
216
- * legendInteractive: true,
217
- * isSeriesVisible: (id, label) => context.isSeriesVisible(id, label),
218
- * });
219
- *
220
- * // Use legendData for creating legend items (shows recalculated percentages)
221
- * const legendItems = useChartLegendItems(legendData, legendOptions);
222
- *
223
- * if (allSegmentsHidden) {
224
- * return <EmptyState />;
225
- * }
226
- *
227
- * // Use visibleData for rendering the chart (only visible segments)
228
- * return <PieChart data={visibleData} />;
229
- * ```
230
- *
231
- * @param params - Configuration object for the hook
232
- * @param params.data - The chart data to filter
233
- * @param params.chartId - Unique identifier for the chart (required for interactive mode)
234
- * @param params.legendInteractive - Whether to enable interactive filtering
235
- * @param params.isSeriesVisible - Function to check series visibility
236
- * @return Object containing visibleData, allSegmentsHidden flag, and legendData with recalculated percentages
237
- */
238
- declare const useInteractiveLegendData: <T extends DataPointWithPercentage>({ data, chartId, legendInteractive, isSeriesVisible, }: UseInteractiveLegendDataParams<T>) => UseInteractiveLegendDataResult<T>;
239
-
240
- /**
241
- * Custom hook to determine if the user prefers reduced motion.
242
- * @return {boolean} A boolean indicating the user's preference for reduced motion.
243
- */
244
- declare function usePrefersReducedMotion(): boolean;
245
-
246
- /**
247
- * Relocates visx chart tooltip portals from `document.body` into a target
248
- * container element. This allows the tooltips to participate in the same CSS
249
- * stacking context as other elements in the container (e.g. a sticky header),
250
- * so z-index ordering works correctly between them.
251
- *
252
- * The relocated portal divs use `position: fixed` at the viewport origin to
253
- * preserve the tooltip coordinate system (visx calculates positions relative
254
- * to the viewport).
255
- *
256
- * Because the visx Portal class calls `document.body.removeChild(node)` during
257
- * unmount, we patch `document.body.removeChild` to gracefully handle nodes that
258
- * were moved out of body. Without this, React throws a "not a child of this
259
- * node" error when tooltips unmount.
260
- *
261
- * **Important:** The container and its ancestors must not have CSS `transform`,
262
- * `perspective`, or `filter` properties set, as these create a new containing
263
- * block for `position: fixed` children, breaking viewport-relative positioning.
264
- *
265
- * @param containerRef - Ref to the element that portals should be relocated into.
266
- * The element referenced here, or one of its ancestors,
267
- * should establish the desired stacking context (for example
268
- * by using position and z-index).
269
- */
270
- declare function useTooltipPortalRelocator(containerRef: RefObject<HTMLElement | null> | undefined): void;
271
-
272
- export { useChartDataTransform, useChartMargin, useChartMouseHandler, useDeepMemo, useElementSize, useHasLegendChild, useInteractiveLegendData, usePrefersReducedMotion, useTextTruncation, useTooltipPortalRelocator, useXYChartTheme, useZeroValueDisplay };
@@ -1,31 +0,0 @@
1
- import {
2
- useChartDataTransform,
3
- useChartMargin,
4
- useChartMouseHandler,
5
- useDeepMemo,
6
- useElementSize,
7
- useHasLegendChild,
8
- useInteractiveLegendData,
9
- usePrefersReducedMotion,
10
- useTextTruncation,
11
- useTooltipPortalRelocator,
12
- useXYChartTheme,
13
- useZeroValueDisplay
14
- } from "../chunk-32DH6JDF.js";
15
- import "../chunk-DAU3HNEG.js";
16
- import "../chunk-G3PMV62Z.js";
17
- export {
18
- useChartDataTransform,
19
- useChartMargin,
20
- useChartMouseHandler,
21
- useDeepMemo,
22
- useElementSize,
23
- useHasLegendChild,
24
- useInteractiveLegendData,
25
- usePrefersReducedMotion,
26
- useTextTruncation,
27
- useTooltipPortalRelocator,
28
- useXYChartTheme,
29
- useZeroValueDisplay
30
- };
31
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,83 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { R as ResponsiveConfig } from './with-responsive-CNfhzAUu.js';
3
- import * as react from 'react';
4
- import { ReactNode, FC } from 'react';
5
- import { b as LegendShapeStyles, c as BaseLegendProps, B as BaseLegendItem } from './types-I67mddpr.js';
6
- import { B as BaseChartProps, L as LeaderboardEntry } from './types-DZordNiO.js';
7
-
8
- interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legendOrientation' | 'legendPosition' | 'legendAlignment' | 'legendShape' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'legendInteractive' | 'animation'> {
9
- /**
10
- * Whether to show comparison data
11
- */
12
- withComparison?: boolean;
13
- /**
14
- * Whether to overlay the label on top of bar
15
- */
16
- withOverlayLabel?: boolean;
17
- /**
18
- * Primary color for current period bars
19
- */
20
- primaryColor?: string;
21
- /**
22
- * Secondary color for comparison period bars
23
- */
24
- secondaryColor?: string;
25
- /**
26
- * Formatter for values
27
- */
28
- valueFormatter?: (value: number) => string;
29
- /**
30
- * Formatter for delta values
31
- */
32
- deltaFormatter?: (value: number) => string;
33
- /**
34
- * Whether the chart is in loading state
35
- */
36
- loading?: boolean;
37
- /**
38
- * Custom styling for the chart container
39
- */
40
- style?: React.CSSProperties & {
41
- '--a8c--charts--leaderboard--bar--border-radius'?: string;
42
- };
43
- /**
44
- * Styles for legend shapes (width, height, margin).
45
- */
46
- legendShapeStyles?: LegendShapeStyles;
47
- /**
48
- * Custom labels for legend items
49
- */
50
- legendLabels?: {
51
- /**
52
- * Label for primary period data
53
- */
54
- primary?: string;
55
- /**
56
- * Label for comparison period data (only used when withComparison is true)
57
- */
58
- comparison?: string;
59
- };
60
- /**
61
- * Child components for composition API
62
- */
63
- children?: ReactNode;
64
- }
65
-
66
- declare const LeaderboardChart: FC<LeaderboardChartProps> & {
67
- Legend: react.ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
68
- items?: BaseLegendItem[];
69
- chartId?: string;
70
- } & react.RefAttributes<HTMLDivElement>>;
71
- };
72
- declare const LeaderboardChartResponsive: (({ resizeDebounceTime, maxWidth, aspectRatio, size, width, height, ...chartProps }: Omit<LeaderboardChartProps, "width" | "height" | "size"> & {
73
- width?: number;
74
- height?: number;
75
- size?: number;
76
- } & ResponsiveConfig) => react_jsx_runtime.JSX.Element) & {
77
- Legend: react.ForwardRefExoticComponent<Omit<BaseLegendProps, "items"> & {
78
- items?: BaseLegendItem[];
79
- chartId?: string;
80
- } & react.RefAttributes<HTMLDivElement>>;
81
- };
82
-
83
- export { LeaderboardChartResponsive as L, LeaderboardChart as a, type LeaderboardChartProps as b };