@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,505 +0,0 @@
1
- import { CircleSubjectProps } from '@visx/annotation/lib/components/CircleSubject';
2
- import { ConnectorProps } from '@visx/annotation/lib/components/Connector';
3
- import { LabelProps } from '@visx/annotation/lib/components/Label';
4
- import { LineSubjectProps } from '@visx/annotation/lib/components/LineSubject';
5
- import { Orientation, TickFormatter, AxisScale, AxisRendererProps } from '@visx/axis';
6
- import { LegendShape } from '@visx/legend/lib/types';
7
- import { ScaleType, ScaleInput } from '@visx/scale';
8
- import { TextProps } from '@visx/text/lib/Text';
9
- import { EventHandlerParams, LineStyles, GridStyles, GlyphProps } from '@visx/xychart';
10
- import { GapSize } from '@wordpress/theme';
11
- import { PointerEvent, ReactNode, CSSProperties } from 'react';
12
- import { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
13
-
14
- type ValueOf<T> = T[keyof T];
15
- type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
16
- type OrientationType = ValueOf<typeof Orientation>;
17
- type AnnotationStyles = {
18
- circleSubject?: Omit<CircleSubjectProps, 'x' | 'y'> & {
19
- fill?: string;
20
- };
21
- lineSubject?: Omit<LineSubjectProps, 'x' | 'y'>;
22
- connector?: Omit<ConnectorProps, 'x' | 'y' | 'dx' | 'dy'>;
23
- label?: Omit<LabelProps, 'title' | 'subtitle' | 'x' | 'y'> & {
24
- x?: number | 'start' | 'end';
25
- y?: number | 'start' | 'end';
26
- };
27
- };
28
- type DataPoint = {
29
- label: string;
30
- value: number;
31
- };
32
- /**
33
- * Data format for GeoChart - uses Google Charts native data format for maximum flexibility.
34
- * First element is the header row, subsequent elements are data rows.
35
- *
36
- * Country identifiers can be either full country names or ISO 3166-1 alpha-2 codes (e.g., 'United States' or 'US').
37
- * Full names are recommended for better readability in tooltips.
38
- *
39
- * @example Basic usage with country names:
40
- * [['Country', 'Value'], ['United States', 100], ['Canada', 50], ['United Kingdom', 75]]
41
- *
42
- * @example With custom HTML tooltips:
43
- * [
44
- * ['Country', 'Value', { type: 'string', role: 'tooltip', p: { html: true } }],
45
- * ['United States', 100, '<b>United States</b><br/>100 visitors'],
46
- * ['Canada', 50, '<b>Canada</b><br/>50 visitors']
47
- * ]
48
- *
49
- * @example With formatted values (v = value, f = formatted):
50
- * [
51
- * ['Country', 'Value'],
52
- * ['United States', { v: 100, f: '100 visitors' }],
53
- * ['Canada', { v: 50, f: '50 visitors' }]
54
- * ]
55
- *
56
- * @example With multiple columns:
57
- * [
58
- * ['Country', 'Population', 'Area'],
59
- * ['United States', 331000000, 9834000],
60
- * ['Canada', 38000000, 9985000]
61
- * ]
62
- */
63
- type GeoData = [GoogleDataTableColumn[], ...GoogleDataTableRow[]];
64
- type DataPointDate = {
65
- date?: Date;
66
- /**
67
- * Supported Formats:
68
- * - YYYY-MM-DD (local)
69
- * - YYYY-MM-DD HH:mm:ss (local)
70
- * - YYYY-MM-DD HH:mm (local)
71
- * - YYYY-MM-DDTHH:mm:ss (local)
72
- * - YYYY-MM-DDTHH:mm:ss.SSS (local)
73
- * - YYYY-MM-DDTHH:mm (local)
74
- * - YYYY-MM-DDTHH:mm:ssZ (UTC → local)
75
- * - YYYY-MM-DDTHH:mm:ss±HH:mm (offset → local)
76
- */
77
- dateString?: string;
78
- value: number | null;
79
- label?: string;
80
- };
81
- type LeaderboardEntry = {
82
- /**
83
- * Unique internal key (e.g., 'key-direct')
84
- */
85
- id: string;
86
- /**
87
- * Human-readable name (e.g., 'Direct') or a JSX element (e.g., <h4>Direct</h4>)
88
- */
89
- label: string | JSX.Element;
90
- /**
91
- * Value of the entry
92
- */
93
- currentValue: number;
94
- /**
95
- * Value of the entry in the previous period
96
- */
97
- previousValue: number;
98
- /**
99
- * Width of current bar, as % of the current value
100
- */
101
- currentShare: number;
102
- /**
103
- * Width of previous bar, as % of the current value
104
- */
105
- previousShare: number;
106
- /**
107
- * Delta of the entry
108
- */
109
- delta: number;
110
- /**
111
- * Optional color for the entry's image/icon
112
- */
113
- imageColor?: string;
114
- };
115
- type GradientStop = {
116
- offset: string;
117
- color?: string;
118
- opacity?: number;
119
- };
120
- type SeriesDataOptions = {
121
- gradient?: {
122
- from: string;
123
- to: string;
124
- fromOpacity?: number;
125
- toOpacity?: number;
126
- stops?: GradientStop[];
127
- };
128
- stroke?: string;
129
- seriesLineStyle?: LineStyles;
130
- legendShapeStyle?: CSSProperties;
131
- type?: 'comparison';
132
- };
133
- type SeriesData = {
134
- group?: string;
135
- label: string;
136
- data: DataPointDate[] | DataPoint[];
137
- options?: SeriesDataOptions;
138
- };
139
- type MultipleDataPointsDate = {
140
- label: string;
141
- data: DataPointDate[];
142
- };
143
- type DataPointPercentage = {
144
- /**
145
- * Label for the data point
146
- */
147
- label: string;
148
- /**
149
- * Numerical value
150
- */
151
- value: number;
152
- /**
153
- * Formatted value for display
154
- */
155
- valueDisplay?: string;
156
- /**
157
- * Percentage value
158
- */
159
- percentage: number;
160
- /**
161
- * Color code for the segment, by default colours are taken from the theme but this property can overrides it
162
- */
163
- color?: string;
164
- /**
165
- * Group for the data point, used to match color with groups on other charts
166
- */
167
- group?: string;
168
- };
169
- /**
170
- * Base theme configuration for chart components with optional properties
171
- */
172
- type ChartTheme = {
173
- /** Background color for chart components */
174
- backgroundColor: string;
175
- /** Background color for labels */
176
- labelBackgroundColor?: string;
177
- /** Text color for labels */
178
- labelTextColor?: string;
179
- /** Array of colors used for data visualization */
180
- colors: string[];
181
- /** Optional CSS styles for grid lines */
182
- gridStyles?: GridStyles;
183
- /** Length of axis ticks in pixels */
184
- tickLength: number;
185
- /** Color of the grid lines */
186
- gridColor: string;
187
- /** Color of the grid lines in dark mode */
188
- gridColorDark: string;
189
- /** Styles for x-axis tick lines */
190
- xTickLineStyles?: LineStyles;
191
- /** Styles for x-axis line */
192
- xAxisLineStyles?: LineStyles;
193
- /** Styles for series lines */
194
- seriesLineStyles?: LineStyles[];
195
- /** Array of render functions for glyphs */
196
- glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>;
197
- /** Legend specific settings */
198
- legend?: {
199
- /** Styles for legend shapes */
200
- shapeStyles?: Record<string, unknown>[];
201
- /** Styles for legend labels */
202
- labelStyles?: CSSProperties;
203
- /** Styles for legend container */
204
- containerStyles?: CSSProperties;
205
- };
206
- /** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
207
- svgLabelSmall?: TextProps;
208
- annotationStyles?: AnnotationStyles;
209
- /** GeoChart specific settings */
210
- geoChart?: {
211
- /** Default fill color for a geo chart feature (e.g. country) with no data */
212
- featureFillColor?: string;
213
- };
214
- /** LeaderboardChart specific settings */
215
- leaderboardChart?: {
216
- /** Gap between rows in the leaderboard grid */
217
- rowGap?: number;
218
- /** Gap between columns in the leaderboard grid */
219
- columnGap?: number;
220
- /** Spacing between label and progress bars */
221
- labelSpacing?: number;
222
- /** Primary color for current period bars */
223
- primaryColor?: string;
224
- /** Secondary color for comparison period bars */
225
- secondaryColor?: string;
226
- /** Delta colors: [negative, neutral, positive] */
227
- deltaColors?: [string, string, string];
228
- };
229
- /** ConversionFunnelChart specific settings */
230
- conversionFunnelChart?: {
231
- /** Primary color for funnel bars */
232
- primaryColor?: string;
233
- /** Background color for chart container */
234
- backgroundColor?: string;
235
- /** Color for positive change indicators */
236
- positiveChangeColor?: string;
237
- /** Color for negative change indicators */
238
- negativeChangeColor?: string;
239
- };
240
- lineChart?: {
241
- lineStyles?: Partial<Record<NonNullable<SeriesDataOptions['type']>, LineStyles>>;
242
- };
243
- /** Sparkline specific settings */
244
- sparkline?: {
245
- /** Margin around the sparkline chart */
246
- margin?: {
247
- top?: number;
248
- right?: number;
249
- bottom?: number;
250
- left?: number;
251
- };
252
- /** Stroke width for the sparkline line */
253
- strokeWidth?: number;
254
- };
255
- };
256
- /**
257
- * Theme configuration with all properties guaranteed to be defined.
258
- * Useful for merged themes where defaults are provided for all optional properties.
259
- */
260
- type CompleteChartTheme = Required<ChartTheme> & {
261
- leaderboardChart: Omit<Required<NonNullable<ChartTheme['leaderboardChart']>>, 'primaryColor' | 'secondaryColor'> & Pick<NonNullable<ChartTheme['leaderboardChart']>, 'primaryColor' | 'secondaryColor'>;
262
- conversionFunnelChart: Omit<Required<NonNullable<ChartTheme['conversionFunnelChart']>>, 'primaryColor'> & Pick<NonNullable<ChartTheme['conversionFunnelChart']>, 'primaryColor'>;
263
- lineChart: {
264
- lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles>;
265
- };
266
- legend: Required<NonNullable<ChartTheme['legend']>>;
267
- sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
268
- margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
269
- };
270
- };
271
- declare type AxisOptions = {
272
- orientation?: OrientationType;
273
- numTicks?: number;
274
- axisClassName?: string;
275
- axisLineClassName?: string;
276
- labelClassName?: string;
277
- tickClassName?: string;
278
- tickFormat?: TickFormatter<ScaleInput<AxisScale>>;
279
- /**
280
- * Whether to display this axis. Defaults to true.
281
- */
282
- display?: boolean;
283
- /**
284
- * For more control over rendering or to add event handlers to datum, pass a function as children.
285
- */
286
- children?: (renderProps: AxisRendererProps<AxisScale>) => ReactNode;
287
- /**
288
- * Controls tick label overflow (bar charts only):
289
- *
290
- * - 'ellipsis': Truncate with ellipsis and fit to available space. Labels show full text
291
- * on hover via native tooltip. Note: A minimum width (20px) is enforced for readability.
292
- * On very dense charts (bandwidth < 20px), adjacent labels may overlap. To mitigate, use `numTicks`
293
- * to reduce labels or `tickFormat` to abbreviate text.
294
- * - undefined: No truncation; labels may overlap.
295
- *
296
- * Default: No truncation; labels may overlap.
297
- */
298
- labelOverflow?: 'ellipsis';
299
- };
300
- type ScaleOptions = {
301
- type?: ScaleType;
302
- zero?: boolean;
303
- domain?: [number, number];
304
- range?: [number, number];
305
- /**
306
- * For band scale, shortcut for setting `paddingInner` and `paddingOuter` to the same value.
307
- *
308
- * For point scale, the outer padding (spacing) at the ends of the range.
309
- * This is similar to band scale's `paddingOuter`.
310
- *
311
- */
312
- padding?: number;
313
- /**
314
- * The inner padding (spacing) within each band step of band scales, as a fraction of the step size. This value must lie in the range [0,1].
315
- *
316
- */
317
- paddingInner?: number;
318
- /**
319
- * The outer padding (spacing) at the ends of the range of band and point scales,
320
- * as a fraction of the step size. This value must lie in the range [0,1].
321
- *
322
- */
323
- paddingOuter?: number;
324
- };
325
- /**
326
- * Base properties shared across all chart components
327
- */
328
- type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
329
- /**
330
- * Array of data points to display in the chart
331
- */
332
- data: T extends DataPoint | DataPointDate | LeaderboardEntry ? T[] : T;
333
- /**
334
- * Optional unique identifier for the chart (auto-generated if not provided)
335
- */
336
- chartId?: string;
337
- /**
338
- * Additional CSS class name for the chart container
339
- */
340
- className?: string;
341
- /**
342
- * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
343
- */
344
- width?: number;
345
- /**
346
- * Height of the chart container in pixels. When omitted, the chart fills its parent's height.
347
- */
348
- height?: number;
349
- /**
350
- * Maximum diameter of the pie in pixels (pie and donut charts only).
351
- * The pie will shrink if the container is smaller than this value.
352
- * When omitted, the pie fills the available space.
353
- */
354
- size?: number;
355
- /**
356
- * Chart margins
357
- */
358
- margin?: {
359
- top?: number;
360
- right?: number;
361
- bottom?: number;
362
- left?: number;
363
- };
364
- /**
365
- * Callback function for pointer down event
366
- */
367
- onPointerDown?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
368
- /**
369
- * Callback function for pointer up event
370
- */
371
- onPointerUp?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
372
- /**
373
- * Callback function for pointer move event
374
- */
375
- onPointerMove?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
376
- /**
377
- * Callback function for pointer out event
378
- */
379
- onPointerOut?: (event: PointerEvent<Element>) => void;
380
- /**
381
- * Whether to show tooltips on hover. False by default.
382
- */
383
- withTooltips?: boolean;
384
- /**
385
- * Whether to show legend
386
- */
387
- showLegend?: boolean;
388
- /**
389
- * Legend orientation
390
- */
391
- legendOrientation?: 'horizontal' | 'vertical';
392
- /**
393
- * Legend shape
394
- */
395
- legendShape?: LegendShape<T, number>;
396
- /**
397
- * Legend position (where the legend appears)
398
- * TODO: Add 'left' | 'right' positioning support in future implementation
399
- */
400
- legendPosition?: 'top' | 'bottom';
401
- /**
402
- * Legend alignment within its position
403
- */
404
- legendAlignment?: 'start' | 'center' | 'end';
405
- /**
406
- * Maximum width for legend items. When set, text overflow behavior is controlled by legendTextOverflow.
407
- * Should be a CSS value string (e.g. '200px', '50%', '10rem')
408
- */
409
- legendMaxWidth?: string;
410
- /**
411
- * Controls how text behaves when it exceeds legendMaxWidth.
412
- * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
413
- * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
414
- */
415
- legendTextOverflow?: 'ellipsis' | 'wrap';
416
- /**
417
- * Additional CSS class name for legend items.
418
- * This allows consumers to customize individual legend item styling.
419
- */
420
- legendItemClassName?: string;
421
- /**
422
- * Enable interactive legend items that can toggle series visibility.
423
- * Supported for all chart types that render series.
424
- * Requires chartId and GlobalChartsProvider.
425
- * For pie charts, percentages are recalculated so visible segments total 100%.
426
- */
427
- legendInteractive?: boolean;
428
- /**
429
- * Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
430
- */
431
- gridVisibility?: 'x' | 'y' | 'xy' | 'none';
432
- /**
433
- * Whether to show chart animation on initial render or not
434
- */
435
- animation?: boolean;
436
- /**
437
- * Gap between chart elements (SVG, legend, children).
438
- * Uses WordPress design system tokens.
439
- * @default 'md'
440
- */
441
- gap?: GapSize;
442
- /**
443
- * More options for the chart.
444
- */
445
- options?: {
446
- yScale?: ScaleOptions;
447
- xScale?: ScaleOptions;
448
- axis?: {
449
- x?: AxisOptions;
450
- y?: AxisOptions;
451
- };
452
- };
453
- };
454
- /**
455
- * Properties for grid components
456
- */
457
- type GridProps = {
458
- /**
459
- * Width of the grid in pixels
460
- */
461
- width: number;
462
- /**
463
- * Height of the grid in pixels
464
- */
465
- height: number;
466
- /**
467
- * Grid visibility. x is default.
468
- */
469
- gridVisibility?: 'x' | 'y' | 'xy' | 'none';
470
- /**
471
- * X-axis scale for the grid
472
- * TODO: Fix any type after resolving visx scale type issues
473
- */
474
- xScale: any;
475
- /**
476
- * Y-axis scale for the grid
477
- * TODO: Fix any type after resolving visx scale type issues
478
- */
479
- yScale: any;
480
- /**
481
- * Top offset for the grid
482
- */
483
- top?: number;
484
- };
485
- /**
486
- * Local type definitions for Popover API attributes and events
487
- * These are used to avoid extending React module types while still getting type safety
488
- * NOTE: These type definitions are only needed for React 18 and below.
489
- * React 19+ includes Popover API types in the official React type definitions, so these can be removed when upgrading.
490
- */
491
- interface PopoverButtonAttributes {
492
- popovertarget?: string;
493
- popovertargetaction?: 'hide' | 'show' | 'toggle';
494
- }
495
- interface PopoverElementAttributes {
496
- popover?: 'auto' | 'manual' | '';
497
- }
498
- type ButtonWithPopover = PopoverButtonAttributes;
499
- type PopoverElement = PopoverElementAttributes;
500
- interface ToggleEvent extends Event {
501
- newState: 'open' | 'closed';
502
- oldState: 'open' | 'closed';
503
- }
504
-
505
- export type { AnnotationStyles as A, BaseChartProps as B, ChartTheme as C, DataPoint as D, GeoData as G, LeaderboardEntry as L, MultipleDataPointsDate as M, Optional as O, PopoverButtonAttributes as P, ScaleOptions as S, ToggleEvent as T, ButtonWithPopover as a, CompleteChartTheme as b, DataPointDate as c, DataPointPercentage as d, GradientStop as e, GridProps as f, OrientationType as g, PopoverElement as h, PopoverElementAttributes as i, SeriesData as j, SeriesDataOptions as k };
@@ -1,78 +0,0 @@
1
- import { LegendOrdinal } from '@visx/legend';
2
- import { GlyphProps, LineStyles } from '@visx/xychart';
3
- import { ComponentProps, ReactNode, CSSProperties } from 'react';
4
-
5
- type VisxLegendProps = Pick<ComponentProps<typeof LegendOrdinal>, 'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'>;
6
- type LegendItemStyles = {
7
- /** Margin around each legend item. */
8
- margin?: CSSProperties['margin'];
9
- /** Flex direction for items within each legend entry. */
10
- flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
11
- };
12
- type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin'> & {
13
- /**
14
- * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
15
- * When set, text overflow behavior is controlled by textOverflow.
16
- */
17
- maxWidth?: string;
18
- /**
19
- * Controls how text behaves when it exceeds maxWidth.
20
- * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
21
- * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
22
- */
23
- textOverflow?: 'ellipsis' | 'wrap';
24
- };
25
- type LegendShapeStyles = {
26
- /** Width of the legend shape in pixels. */
27
- width?: number;
28
- /** Height of the legend shape in pixels. */
29
- height?: number;
30
- /** Margin around the legend shape. */
31
- margin?: CSSProperties['margin'];
32
- };
33
- type BaseLegendProps = VisxLegendProps & {
34
- items: BaseLegendItem[];
35
- orientation?: 'horizontal' | 'vertical';
36
- /**
37
- * TODO: Add 'left' | 'right' positioning support in future implementation
38
- */
39
- position?: 'top' | 'bottom';
40
- alignment?: 'start' | 'center' | 'end';
41
- /** Additional CSS class name for legend items. */
42
- itemClassName?: string;
43
- /** CSS styles for each legend item (margin, flexDirection). */
44
- itemStyles?: LegendItemStyles;
45
- /** Additional CSS class name for legend labels. */
46
- labelClassName?: string;
47
- /** CSS styles for legend labels (justifyContent, flex, margin). */
48
- labelStyles?: LegendLabelStyles;
49
- /** Styles for legend shapes (width, height, margin). */
50
- shapeStyles?: LegendShapeStyles;
51
- /**
52
- * Function for rendering a custom legend layout.
53
- */
54
- render?: (items: BaseLegendItem[]) => ReactNode;
55
- /**
56
- * Enable interactive legend items that can toggle series visibility.
57
- * Requires GlobalChartsProvider and chartId to be set.
58
- */
59
- interactive?: boolean;
60
- /**
61
- * Chart ID for series visibility tracking when interactive mode is enabled.
62
- */
63
- chartId?: string;
64
- };
65
- type LegendProps = Omit<BaseLegendProps, 'items'> & {
66
- items?: BaseLegendItem[];
67
- chartId?: string;
68
- };
69
- type BaseLegendItem = {
70
- label: string;
71
- value?: number | string;
72
- color: string;
73
- glyphSize?: number;
74
- renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
75
- shapeStyle?: CSSProperties & LineStyles;
76
- };
77
-
78
- export type { BaseLegendItem as B, LegendItemStyles as L, LegendLabelStyles as a, LegendShapeStyles as b, BaseLegendProps as c, LegendProps as d };
@@ -1,78 +0,0 @@
1
- import { LegendOrdinal } from '@visx/legend';
2
- import { GlyphProps, LineStyles } from '@visx/xychart';
3
- import { ComponentProps, ReactNode, CSSProperties } from 'react';
4
-
5
- type VisxLegendProps = Pick<ComponentProps<typeof LegendOrdinal>, 'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'>;
6
- type LegendItemStyles = {
7
- /** Margin around each legend item. */
8
- margin?: CSSProperties['margin'];
9
- /** Flex direction for items within each legend entry. */
10
- flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
11
- };
12
- type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin'> & {
13
- /**
14
- * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
15
- * When set, text overflow behavior is controlled by textOverflow.
16
- */
17
- maxWidth?: string;
18
- /**
19
- * Controls how text behaves when it exceeds maxWidth.
20
- * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
21
- * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
22
- */
23
- textOverflow?: 'ellipsis' | 'wrap';
24
- };
25
- type LegendShapeStyles = {
26
- /** Width of the legend shape in pixels. */
27
- width?: number;
28
- /** Height of the legend shape in pixels. */
29
- height?: number;
30
- /** Margin around the legend shape. */
31
- margin?: CSSProperties['margin'];
32
- };
33
- type BaseLegendProps = VisxLegendProps & {
34
- items: BaseLegendItem[];
35
- orientation?: 'horizontal' | 'vertical';
36
- /**
37
- * TODO: Add 'left' | 'right' positioning support in future implementation
38
- */
39
- position?: 'top' | 'bottom';
40
- alignment?: 'start' | 'center' | 'end';
41
- /** Additional CSS class name for legend items. */
42
- itemClassName?: string;
43
- /** CSS styles for each legend item (margin, flexDirection). */
44
- itemStyles?: LegendItemStyles;
45
- /** Additional CSS class name for legend labels. */
46
- labelClassName?: string;
47
- /** CSS styles for legend labels (justifyContent, flex, margin). */
48
- labelStyles?: LegendLabelStyles;
49
- /** Styles for legend shapes (width, height, margin). */
50
- shapeStyles?: LegendShapeStyles;
51
- /**
52
- * Function for rendering a custom legend layout.
53
- */
54
- render?: (items: BaseLegendItem[]) => ReactNode;
55
- /**
56
- * Enable interactive legend items that can toggle series visibility.
57
- * Requires GlobalChartsProvider and chartId to be set.
58
- */
59
- interactive?: boolean;
60
- /**
61
- * Chart ID for series visibility tracking when interactive mode is enabled.
62
- */
63
- chartId?: string;
64
- };
65
- type LegendProps = Omit<BaseLegendProps, 'items'> & {
66
- items?: BaseLegendItem[];
67
- chartId?: string;
68
- };
69
- type BaseLegendItem = {
70
- label: string;
71
- value?: number | string;
72
- color: string;
73
- glyphSize?: number;
74
- renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
75
- shapeStyle?: CSSProperties & LineStyles;
76
- };
77
-
78
- export type { BaseLegendItem as B, LegendItemStyles as L, LegendLabelStyles as a, LegendShapeStyles as b, BaseLegendProps as c, LegendProps as d };
@@ -1,19 +0,0 @@
1
- import { L as Legend } from './legend-C2grwnWk.cjs';
2
- import { ComponentType, FC, PropsWithChildren } from 'react';
3
-
4
- /**
5
- * Base interface for chart subcomponents in the composition API
6
- */
7
- interface BaseChartSubComponents {
8
- Legend: ComponentType<React.ComponentProps<typeof Legend>>;
9
- SVG: FC<PropsWithChildren>;
10
- HTML: FC<PropsWithChildren>;
11
- }
12
- /**
13
- * Type helper for creating chart components with composition API
14
- * @template TProps - The props type for the chart component
15
- * @template TSubComponents - Additional subcomponents beyond the base ones
16
- */
17
- type ChartComponentWithComposition<TProps, TSubComponents extends BaseChartSubComponents = BaseChartSubComponents> = FC<TProps> & TSubComponents;
18
-
19
- export type { ChartComponentWithComposition as C };