@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,403 +0,0 @@
1
- import {
2
- getStringWidth
3
- } from "./chunk-NFRB2POF.js";
4
- import {
5
- radial_wipe_animation_default
6
- } from "./chunk-KXRWNFQJ.js";
7
- import {
8
- ChartHTML,
9
- ChartSVG,
10
- useChartChildren
11
- } from "./chunk-6CCZL2JJ.js";
12
- import {
13
- BaseTooltip
14
- } from "./chunk-BPYKWMI7.js";
15
- import {
16
- Stack
17
- } from "./chunk-Z26M4V2M.js";
18
- import {
19
- withResponsive
20
- } from "./chunk-OP6PHB2U.js";
21
- import {
22
- GlobalChartsContext,
23
- GlobalChartsProvider,
24
- Legend,
25
- SingleChartContext,
26
- useChartId,
27
- useChartLegendItems,
28
- useChartRegistration,
29
- useElementSize,
30
- useGlobalChartsContext,
31
- useGlobalChartsTheme,
32
- useInteractiveLegendData,
33
- usePrefersReducedMotion
34
- } from "./chunk-32DH6JDF.js";
35
- import {
36
- attachSubComponents
37
- } from "./chunk-DAU3HNEG.js";
38
-
39
- // src/charts/pie-chart/pie-chart.tsx
40
- import { Group } from "@visx/group";
41
- import { Pie } from "@visx/shape";
42
- import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
43
- import { __ } from "@wordpress/i18n";
44
- import clsx from "clsx";
45
- import { useCallback, useContext, useMemo } from "react";
46
-
47
- // src/charts/pie-chart/pie-chart.module.scss
48
- var pie_chart_module_default = {
49
- "pie-chart": "a8ccharts-C-n-Gu",
50
- "pie-chart--responsive": "a8ccharts-IQVR6j",
51
- "pie-chart__svg-wrapper": "a8ccharts-iQ1Rki"
52
- };
53
-
54
- // src/charts/pie-chart/pie-chart.tsx
55
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
56
- var renderDefaultPieTooltip = ({
57
- tooltipData
58
- }) => {
59
- return /* @__PURE__ */ _jsx(BaseTooltip, {
60
- data: tooltipData,
61
- top: 0,
62
- left: 0,
63
- renderContainer: false
64
- });
65
- };
66
- var validateData = (data) => {
67
- if (!data.length) {
68
- return {
69
- isValid: false,
70
- message: "No data available"
71
- };
72
- }
73
- const hasNegativeValues = data.some((item) => item.percentage < 0 || item.value < 0);
74
- if (hasNegativeValues) {
75
- return {
76
- isValid: false,
77
- message: "Invalid data: Negative values are not allowed"
78
- };
79
- }
80
- const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);
81
- if (Math.abs(totalPercentage - 100) > 0.01) {
82
- return {
83
- isValid: false,
84
- message: "Invalid percentage total: Must equal 100"
85
- };
86
- }
87
- return {
88
- isValid: true,
89
- message: ""
90
- };
91
- };
92
- var PieChartInternal = ({
93
- data,
94
- chartId: providedChartId,
95
- withTooltips = false,
96
- className,
97
- showLegend = false,
98
- legendOrientation = "horizontal",
99
- legendPosition = "bottom",
100
- legendAlignment = "center",
101
- legendMaxWidth,
102
- legendTextOverflow = "wrap",
103
- legendItemClassName,
104
- legendShape = "circle",
105
- width: propWidth,
106
- height: propHeight,
107
- size,
108
- animation,
109
- thickness = 1,
110
- padding = 0,
111
- gapScale = 0,
112
- cornerScale = 0,
113
- showLabels = true,
114
- legendValueDisplay = "percentage",
115
- legendInteractive = false,
116
- children = null,
117
- tooltipOffsetX = 0,
118
- tooltipOffsetY = -15,
119
- renderTooltip = renderDefaultPieTooltip,
120
- gap = "md"
121
- }) => {
122
- const providerTheme = useGlobalChartsTheme();
123
- const chartId = useChartId(providedChartId);
124
- const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = useElementSize();
125
- const {
126
- tooltipOpen,
127
- tooltipLeft,
128
- tooltipTop,
129
- tooltipData,
130
- hideTooltip,
131
- showTooltip
132
- } = useTooltip();
133
- const {
134
- containerRef,
135
- TooltipInPortal,
136
- containerBounds
137
- } = useTooltipInPortal({
138
- detectBounds: true,
139
- scroll: true,
140
- debounce: 0
141
- });
142
- const onMouseLeave = useCallback(() => {
143
- if (!withTooltips) {
144
- return;
145
- }
146
- hideTooltip();
147
- }, [withTooltips, hideTooltip]);
148
- const {
149
- getElementStyles,
150
- isSeriesVisible
151
- } = useGlobalChartsContext();
152
- const {
153
- visibleData,
154
- allSegmentsHidden,
155
- legendData
156
- } = useInteractiveLegendData({
157
- data,
158
- chartId,
159
- legendInteractive,
160
- isSeriesVisible
161
- });
162
- const legendOptions = useMemo(() => ({
163
- showValues: true,
164
- legendValueDisplay
165
- }), [legendValueDisplay]);
166
- const legendItems = useChartLegendItems(legendData, legendOptions);
167
- const {
168
- isValid,
169
- message
170
- } = validateData(data);
171
- const {
172
- svgChildren,
173
- htmlChildren,
174
- otherChildren
175
- } = useChartChildren(children, "PieChart");
176
- const chartMetadata = useMemo(() => ({
177
- thickness,
178
- gapScale,
179
- cornerScale
180
- }), [thickness, gapScale, cornerScale]);
181
- useChartRegistration({
182
- chartId,
183
- legendItems,
184
- chartType: "pie",
185
- isDataValid: isValid,
186
- metadata: chartMetadata
187
- });
188
- const prefersReducedMotion = usePrefersReducedMotion();
189
- if (!isValid) {
190
- return /* @__PURE__ */ _jsx("div", {
191
- className: clsx("pie-chart", pie_chart_module_default["pie-chart"], className),
192
- children: /* @__PURE__ */ _jsx("div", {
193
- className: pie_chart_module_default["error-message"],
194
- children: message
195
- })
196
- });
197
- }
198
- const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : 300;
199
- const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : 300;
200
- const availableSize = Math.min(availableWidth, availableHeight);
201
- const actualSize = size ? Math.min(size, availableSize) : availableSize;
202
- const width = actualSize;
203
- const height = actualSize;
204
- const radius = Math.min(width, height) / 2;
205
- const centerX = width / 2;
206
- const centerY = height / 2;
207
- const padAngle = gapScale * (2 * Math.PI / data.length);
208
- const outerRadius = radius - padding;
209
- const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
210
- const maxCornerRadius = (outerRadius - innerRadius) / 2;
211
- const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;
212
- const dataWithIndex = visibleData.map((d) => {
213
- const originalIndex = data.findIndex((item) => item.label === d.label);
214
- return {
215
- ...d,
216
- index: originalIndex >= 0 ? originalIndex : 0
217
- };
218
- });
219
- const accessors = {
220
- value: (d) => d.value,
221
- fill: (d) => {
222
- return getElementStyles({
223
- data: d,
224
- index: d.index
225
- }).color;
226
- }
227
- };
228
- const legendElement = showLegend && /* @__PURE__ */ _jsx(Legend, {
229
- orientation: legendOrientation,
230
- position: legendPosition,
231
- alignment: legendAlignment,
232
- labelStyles: {
233
- maxWidth: legendMaxWidth,
234
- textOverflow: legendTextOverflow
235
- },
236
- itemClassName: legendItemClassName,
237
- shape: legendShape,
238
- chartId,
239
- interactive: legendInteractive
240
- });
241
- return /* @__PURE__ */ _jsx(SingleChartContext.Provider, {
242
- value: {
243
- chartId,
244
- chartWidth: width,
245
- chartHeight: height
246
- },
247
- children: /* @__PURE__ */ _jsxs(Stack, {
248
- ref: containerRef,
249
- direction: "column",
250
- gap,
251
- className: clsx(
252
- "pie-chart",
253
- pie_chart_module_default["pie-chart"],
254
- // Fill parent when no explicit dimensions provided
255
- {
256
- [pie_chart_module_default["pie-chart--responsive"]]: !propWidth && !propHeight
257
- },
258
- className
259
- ),
260
- style: {
261
- width: propWidth || void 0,
262
- height: propHeight || void 0
263
- },
264
- children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsx("div", {
265
- className: pie_chart_module_default["pie-chart__svg-wrapper"],
266
- ref: svgWrapperRef,
267
- children: /* @__PURE__ */ _jsxs("svg", {
268
- viewBox: `0 0 ${width} ${height}`,
269
- preserveAspectRatio: "xMidYMid meet",
270
- width,
271
- height,
272
- children: [/* @__PURE__ */ _jsx("defs", {
273
- children: /* @__PURE__ */ _jsx(radial_wipe_animation_default, {
274
- id: `radial-wipe-${chartId}`,
275
- radius: outerRadius,
276
- innerRadius
277
- })
278
- }), /* @__PURE__ */ _jsxs(Group, {
279
- top: centerY,
280
- left: centerX,
281
- mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
282
- children: [allSegmentsHidden ? /* @__PURE__ */ _jsx("text", {
283
- textAnchor: "middle",
284
- dy: ".33em",
285
- fill: providerTheme.gridColor || "#ccc",
286
- fontSize: "14",
287
- fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
288
- children: __("All segments are hidden. Click legend items to show data.", "jetpack-charts")
289
- }) : /* @__PURE__ */ _jsx(Pie, {
290
- data: dataWithIndex,
291
- pieValue: accessors.value,
292
- outerRadius,
293
- innerRadius,
294
- padAngle,
295
- cornerRadius,
296
- children: (pie) => {
297
- return pie.arcs.map((arc, index) => {
298
- const [centroidX, centroidY] = pie.path.centroid(arc);
299
- const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
300
- const handleMouseMove = (event) => {
301
- if (!withTooltips) {
302
- return;
303
- }
304
- if (containerBounds.width === 0 || containerBounds.height === 0) {
305
- return;
306
- }
307
- showTooltip({
308
- tooltipData: arc.data,
309
- tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
310
- tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
311
- });
312
- };
313
- const pathProps = {
314
- d: pie.path(arc) || "",
315
- fill: accessors.fill(arc.data),
316
- "data-testid": "pie-segment"
317
- };
318
- const groupProps = {};
319
- if (withTooltips) {
320
- groupProps.onMouseMove = handleMouseMove;
321
- groupProps.onMouseLeave = onMouseLeave;
322
- }
323
- const fontSize = 12;
324
- const estimatedTextWidth = getStringWidth(arc.data.label, {
325
- fontSize
326
- });
327
- const labelPadding = 6;
328
- const backgroundWidth = estimatedTextWidth + labelPadding * 2;
329
- const backgroundHeight = fontSize + labelPadding * 2;
330
- return /* @__PURE__ */ _jsxs("g", {
331
- ...groupProps,
332
- children: [/* @__PURE__ */ _jsx("path", {
333
- ...pathProps
334
- }), showLabels && hasSpaceForLabel && /* @__PURE__ */ _jsxs("g", {
335
- children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ _jsx("rect", {
336
- x: centroidX - backgroundWidth / 2,
337
- y: centroidY - backgroundHeight / 2,
338
- width: backgroundWidth,
339
- height: backgroundHeight,
340
- fill: providerTheme.labelBackgroundColor,
341
- rx: 4,
342
- ry: 4,
343
- pointerEvents: "none"
344
- }), /* @__PURE__ */ _jsx("text", {
345
- x: centroidX,
346
- y: centroidY,
347
- dy: ".33em",
348
- fill: providerTheme.labelTextColor || "#333",
349
- fontSize,
350
- textAnchor: "middle",
351
- pointerEvents: "none",
352
- children: arc.data.label
353
- })]
354
- })]
355
- }, `arc-${index}`);
356
- });
357
- }
358
- }), !allSegmentsHidden && svgChildren]
359
- })]
360
- })
361
- }), legendPosition === "bottom" && legendElement, withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsx(TooltipInPortal, {
362
- top: tooltipTop || 0,
363
- left: tooltipLeft || 0,
364
- children: /* @__PURE__ */ _jsx("div", {
365
- role: "tooltip",
366
- children: renderTooltip({
367
- tooltipData
368
- })
369
- })
370
- }), htmlChildren, otherChildren]
371
- })
372
- });
373
- };
374
- var PieChartWithProvider = (props) => {
375
- const existingContext = useContext(GlobalChartsContext);
376
- if (existingContext) {
377
- return /* @__PURE__ */ _jsx(PieChartInternal, {
378
- ...props
379
- });
380
- }
381
- return /* @__PURE__ */ _jsx(GlobalChartsProvider, {
382
- children: /* @__PURE__ */ _jsx(PieChartInternal, {
383
- ...props
384
- })
385
- });
386
- };
387
- PieChartWithProvider.displayName = "PieChart";
388
- var PieChart = attachSubComponents(PieChartWithProvider, {
389
- Legend,
390
- SVG: ChartSVG,
391
- HTML: ChartHTML
392
- });
393
- var PieChartResponsive = attachSubComponents(withResponsive(PieChartWithProvider), {
394
- Legend,
395
- SVG: ChartSVG,
396
- HTML: ChartHTML
397
- });
398
-
399
- export {
400
- PieChart,
401
- PieChartResponsive
402
- };
403
- //# sourceMappingURL=chunk-BCX5THDQ.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/charts/pie-chart/pie-chart.tsx","../src/charts/pie-chart/pie-chart.module.scss"],"sourcesContent":["import { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { Legend, useChartLegendItems } from '../../components/legend';\nimport { BaseTooltip } from '../../components/tooltip';\nimport { useElementSize, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, useChartId, useChartRegistration, useGlobalChartsContext, useGlobalChartsTheme, GlobalChartsContext } from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { getStringWidth } from '../../visx/text';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { RadialWipeAnimation } from '../private/radial-wipe-animation/';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './pie-chart.module.scss';\n\n/**\n * Parameters passed to the renderTooltip function for pie charts.\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * Default tooltip renderer for pie charts.\n * Renders a BaseTooltip with the hovered segment's data.\n *\n * @param {PieChartRenderTooltipParams} params - The tooltip parameters containing the hovered data point\n * @return {ReactNode} The rendered tooltip content\n */\nconst renderDefaultPieTooltip = ({\n tooltipData\n}) => {\n return /*#__PURE__*/_jsx(BaseTooltip, {\n data: tooltipData,\n top: 0,\n left: 0,\n renderContainer: false\n });\n};\n\n// Base props type with optional responsive properties\n\n// Composition API types\n\n/**\n * Validates the pie chart data\n * @param data - The data to validate\n * @return Object containing validation result and error message\n */\nconst validateData = data => {\n if (!data.length) {\n return {\n isValid: false,\n message: 'No data available'\n };\n }\n\n // Check for negative values\n const hasNegativeValues = data.some(item => item.percentage < 0 || item.value < 0);\n if (hasNegativeValues) {\n return {\n isValid: false,\n message: 'Invalid data: Negative values are not allowed'\n };\n }\n\n // Validate total percentage\n const totalPercentage = data.reduce((sum, item) => sum + item.percentage, 0);\n if (Math.abs(totalPercentage - 100) > 0.01) {\n // Using small epsilon for floating point comparison\n return {\n isValid: false,\n message: 'Invalid percentage total: Must equal 100'\n };\n }\n return {\n isValid: true,\n message: ''\n };\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 PieChartInternal = ({\n data,\n chartId: providedChartId,\n withTooltips = false,\n className,\n showLegend = false,\n legendOrientation = 'horizontal',\n legendPosition = 'bottom',\n legendAlignment = 'center',\n legendMaxWidth,\n legendTextOverflow = 'wrap',\n legendItemClassName,\n legendShape = 'circle',\n width: propWidth,\n height: propHeight,\n size,\n animation,\n thickness = 1,\n padding = 0,\n gapScale = 0,\n cornerScale = 0,\n showLabels = true,\n legendValueDisplay = 'percentage',\n legendInteractive = false,\n children = null,\n tooltipOffsetX = 0,\n tooltipOffsetY = -15,\n renderTooltip = renderDefaultPieTooltip,\n gap = 'md'\n}) => {\n const providerTheme = useGlobalChartsTheme();\n const chartId = useChartId(providedChartId);\n const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = useElementSize();\n const {\n tooltipOpen,\n tooltipLeft,\n tooltipTop,\n tooltipData,\n hideTooltip,\n showTooltip\n } = useTooltip();\n\n // Set up portal tooltip for better z-index handling\n // We get containerBounds to cancel out stale offsets in the position calculation\n const {\n containerRef,\n TooltipInPortal,\n containerBounds\n } = useTooltipInPortal({\n detectBounds: true,\n scroll: true,\n debounce: 0\n });\n const onMouseLeave = useCallback(() => {\n if (!withTooltips) {\n return;\n }\n hideTooltip();\n }, [withTooltips, hideTooltip]);\n const {\n getElementStyles,\n isSeriesVisible\n } = useGlobalChartsContext();\n\n // Filter and recalculate data for interactive legends\n const {\n visibleData,\n allSegmentsHidden,\n legendData\n } = useInteractiveLegendData({\n data,\n chartId,\n legendInteractive,\n isSeriesVisible\n });\n\n // Memoize legend options to prevent unnecessary re-calculations\n const legendOptions = useMemo(() => ({\n showValues: true,\n legendValueDisplay\n }), [legendValueDisplay]);\n\n // Create legend items using legendData (has recalculated percentages for visible items)\n const legendItems = useChartLegendItems(legendData, legendOptions);\n const {\n isValid,\n message\n } = validateData(data);\n\n // Process children to extract compound components\n const {\n svgChildren,\n htmlChildren,\n otherChildren\n } = useChartChildren(children, 'PieChart');\n\n // Memoize metadata to prevent unnecessary re-registration\n const chartMetadata = useMemo(() => ({\n thickness,\n gapScale,\n cornerScale\n }), [thickness, gapScale, cornerScale]);\n\n // Register chart with context only if data is valid\n useChartRegistration({\n chartId,\n legendItems,\n chartType: 'pie',\n isDataValid: isValid,\n metadata: chartMetadata\n });\n const prefersReducedMotion = usePrefersReducedMotion();\n if (!isValid) {\n return /*#__PURE__*/_jsx(\"div\", {\n className: clsx('pie-chart', styles['pie-chart'], className),\n children: /*#__PURE__*/_jsx(\"div\", {\n className: styles['error-message'],\n children: message\n })\n });\n }\n\n // Calculate the actual pie size:\n // - Measure available space from the svg-wrapper\n // - If size prop provided: use it as max, but shrink if container is smaller\n // - If no size prop: fill available space\n const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : 300;\n const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : 300;\n const availableSize = Math.min(availableWidth, availableHeight);\n const actualSize = size ? Math.min(size, availableSize) : availableSize;\n const width = actualSize;\n const height = actualSize;\n\n // Calculate radius based on width/height\n const radius = Math.min(width, height) / 2;\n\n // Center the chart in the available space\n const centerX = width / 2;\n const centerY = height / 2;\n\n // Calculate the angle between each (use original data length for consistent spacing)\n const padAngle = gapScale * (2 * Math.PI / data.length);\n const outerRadius = radius - padding;\n const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);\n const maxCornerRadius = (outerRadius - innerRadius) / 2;\n const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;\n\n // Map the data to include index for color assignment\n // When interactive, we need to find the original index to maintain consistent colors\n const dataWithIndex = visibleData.map(d => {\n const originalIndex = data.findIndex(item => item.label === d.label);\n return {\n ...d,\n index: originalIndex >= 0 ? originalIndex : 0\n };\n });\n const accessors = {\n value: d => d.value,\n fill: d => {\n return getElementStyles({\n data: d,\n index: d.index\n }).color;\n }\n };\n const legendElement = showLegend && /*#__PURE__*/_jsx(Legend, {\n orientation: legendOrientation,\n position: legendPosition,\n alignment: legendAlignment,\n labelStyles: {\n maxWidth: legendMaxWidth,\n textOverflow: legendTextOverflow\n },\n itemClassName: legendItemClassName,\n shape: legendShape,\n chartId: chartId,\n interactive: legendInteractive\n });\n return /*#__PURE__*/_jsx(SingleChartContext.Provider, {\n value: {\n chartId,\n chartWidth: width,\n chartHeight: height\n },\n children: /*#__PURE__*/_jsxs(Stack, {\n ref: containerRef,\n direction: \"column\",\n gap: gap,\n className: clsx('pie-chart', styles['pie-chart'],\n // Fill parent when no explicit dimensions provided\n {\n [styles['pie-chart--responsive']]: !propWidth && !propHeight\n }, className),\n style: {\n width: propWidth || undefined,\n height: propHeight || undefined\n },\n children: [legendPosition === 'top' && legendElement, /*#__PURE__*/_jsx(\"div\", {\n className: styles['pie-chart__svg-wrapper'],\n ref: svgWrapperRef,\n children: /*#__PURE__*/_jsxs(\"svg\", {\n viewBox: `0 0 ${width} ${height}`,\n preserveAspectRatio: \"xMidYMid meet\",\n width: width,\n height: height,\n children: [/*#__PURE__*/_jsx(\"defs\", {\n children: /*#__PURE__*/_jsx(RadialWipeAnimation, {\n id: `radial-wipe-${chartId}`,\n radius: outerRadius,\n innerRadius: innerRadius\n })\n }), /*#__PURE__*/_jsxs(Group, {\n top: centerY,\n left: centerX,\n mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,\n children: [allSegmentsHidden ? /*#__PURE__*/_jsx(\"text\", {\n textAnchor: \"middle\",\n dy: \".33em\",\n fill: providerTheme.gridColor || '#ccc',\n fontSize: \"14\",\n fontFamily: \"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\",\n children: __('All segments are hidden. Click legend items to show data.', 'jetpack-charts')\n }) : /*#__PURE__*/_jsx(Pie, {\n data: dataWithIndex,\n pieValue: accessors.value,\n outerRadius: outerRadius,\n innerRadius: innerRadius,\n padAngle: padAngle,\n cornerRadius: cornerRadius,\n children: pie => {\n return pie.arcs.map((arc, index) => {\n const [centroidX, centroidY] = pie.path.centroid(arc);\n const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;\n const handleMouseMove = event => {\n if (!withTooltips) {\n return;\n }\n\n // Don't show tooltip until container bounds are measured\n if (containerBounds.width === 0 || containerBounds.height === 0) {\n return;\n }\n\n // Use clientX/Y and subtract containerBounds to cancel out any stale offset.\n // TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX\n // By passing (clientX - containerBounds.left), we get:\n // (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX\n // This gives correct page coordinates regardless of stale bounds.\n showTooltip({\n tooltipData: arc.data,\n tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,\n tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY\n });\n };\n const pathProps = {\n d: pie.path(arc) || '',\n fill: accessors.fill(arc.data),\n 'data-testid': 'pie-segment'\n };\n const groupProps = {};\n if (withTooltips) {\n groupProps.onMouseMove = handleMouseMove;\n groupProps.onMouseLeave = onMouseLeave;\n }\n\n // Estimate text width more accurately for background sizing\n const fontSize = 12;\n const estimatedTextWidth = getStringWidth(arc.data.label, {\n fontSize\n });\n const labelPadding = 6;\n const backgroundWidth = estimatedTextWidth + labelPadding * 2;\n const backgroundHeight = fontSize + labelPadding * 2;\n return /*#__PURE__*/_jsxs(\"g\", {\n ...groupProps,\n children: [/*#__PURE__*/_jsx(\"path\", {\n ...pathProps\n }), showLabels && hasSpaceForLabel && /*#__PURE__*/_jsxs(\"g\", {\n children: [providerTheme.labelBackgroundColor && /*#__PURE__*/_jsx(\"rect\", {\n x: centroidX - backgroundWidth / 2,\n y: centroidY - backgroundHeight / 2,\n width: backgroundWidth,\n height: backgroundHeight,\n fill: providerTheme.labelBackgroundColor,\n rx: 4,\n ry: 4,\n pointerEvents: \"none\"\n }), /*#__PURE__*/_jsx(\"text\", {\n x: centroidX,\n y: centroidY,\n dy: \".33em\",\n fill: providerTheme.labelTextColor || '#333',\n fontSize: fontSize,\n textAnchor: \"middle\",\n pointerEvents: \"none\",\n children: arc.data.label\n })]\n })]\n }, `arc-${index}`);\n });\n }\n }), !allSegmentsHidden && svgChildren]\n })]\n })\n }), legendPosition === 'bottom' && legendElement, withTooltips && tooltipOpen && tooltipData && /*#__PURE__*/_jsx(TooltipInPortal, {\n top: tooltipTop || 0,\n left: tooltipLeft || 0,\n children: /*#__PURE__*/_jsx(\"div\", {\n role: \"tooltip\",\n children: renderTooltip({\n tooltipData\n })\n })\n }), htmlChildren, otherChildren]\n })\n });\n};\nconst PieChartWithProvider = props => {\n const existingContext = useContext(GlobalChartsContext);\n\n // If we're already in a GlobalChartsProvider context, don't create a new one\n if (existingContext) {\n return /*#__PURE__*/_jsx(PieChartInternal, {\n ...props\n });\n }\n\n // Otherwise, create our own GlobalChartsProvider\n return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n children: /*#__PURE__*/_jsx(PieChartInternal, {\n ...props\n })\n });\n};\nPieChartWithProvider.displayName = 'PieChart';\n\n// Create PieChart with composition API\nconst PieChart = attachSubComponents(PieChartWithProvider, {\n Legend: Legend,\n SVG: ChartSVG,\n HTML: ChartHTML\n});\n\n// Create responsive PieChart with composition API\nconst PieChartResponsive = attachSubComponents(withResponsive(PieChartWithProvider), {\n Legend: Legend,\n SVG: ChartSVG,\n HTML: ChartHTML\n});\nexport { PieChartResponsive as default, PieChart as PieChartUnresponsive };","import 'css-chunk:src/charts/pie-chart/pie-chart.module.scss';export default {\n \"pie-chart\": \"a8ccharts-C-n-Gu\",\n \"pie-chart--responsive\": \"a8ccharts-IQVR6j\",\n \"pie-chart__svg-wrapper\": \"a8ccharts-iQ1Rki\"\n};"],"mappings":"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","names":[]}
@@ -1,194 +0,0 @@
1
- // src/components/tooltip/base-tooltip.tsx
2
- import { formatNumber } from "@automattic/number-formatters";
3
-
4
- // src/components/tooltip/base-tooltip.module.scss
5
- var base_tooltip_module_default = {
6
- "tooltip": "a8ccharts-OfX6nd"
7
- };
8
-
9
- // src/components/tooltip/base-tooltip.tsx
10
- import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
11
- var DefaultTooltipContent = ({
12
- data
13
- }) => /* @__PURE__ */ _jsxs(_Fragment, {
14
- children: [data?.label, ": ", data?.valueDisplay || formatNumber(data?.value)]
15
- });
16
- var BaseTooltip = ({
17
- data,
18
- top,
19
- left,
20
- component: Component = DefaultTooltipContent,
21
- children,
22
- className,
23
- style,
24
- renderContainer = true
25
- }) => {
26
- const content = children || data && /* @__PURE__ */ _jsx(Component, {
27
- data,
28
- className
29
- });
30
- if (!renderContainer) {
31
- return content;
32
- }
33
- return /* @__PURE__ */ _jsx("div", {
34
- className: base_tooltip_module_default.tooltip,
35
- style: {
36
- top,
37
- left,
38
- ...style
39
- },
40
- role: "tooltip",
41
- children: content
42
- });
43
- };
44
-
45
- // src/components/tooltip/accessible-tooltip.tsx
46
- import { Tooltip, TooltipContext } from "@visx/xychart";
47
- import { useContext, useEffect, useCallback, useMemo } from "react";
48
- import { jsx as _jsx2 } from "react/jsx-runtime";
49
- var AccessibleTooltip = ({
50
- renderTooltip,
51
- selectedIndex,
52
- tooltipRef,
53
- keyboardFocusedClassName,
54
- series = [],
55
- mode = "group",
56
- ...props
57
- }) => {
58
- const tooltipContext = useContext(TooltipContext);
59
- const tooltipData = useMemo(() => {
60
- if (mode !== "individual") return [];
61
- if (series.length === 0) return [];
62
- const maxDataPoints = Math.max(...series.map((s) => s.data.length));
63
- const flattened = [];
64
- for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {
65
- for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {
66
- const seriesData = series[seriesIndex];
67
- if (dataPointIndex < seriesData.data.length) {
68
- flattened.push({
69
- datum: seriesData.data[dataPointIndex],
70
- seriesLabel: seriesData.label,
71
- seriesIndex,
72
- dataPointIndex
73
- });
74
- }
75
- }
76
- }
77
- return flattened;
78
- }, [series, mode]);
79
- useEffect(() => {
80
- if (selectedIndex === void 0) {
81
- tooltipContext?.hideTooltip();
82
- return;
83
- }
84
- if (mode === "group") {
85
- series.forEach((s, index) => {
86
- if (selectedIndex < s.data.length) {
87
- const datum = s.data[selectedIndex];
88
- tooltipContext?.showTooltip({
89
- datum,
90
- key: s.label,
91
- index
92
- });
93
- }
94
- });
95
- } else if (mode === "individual") {
96
- if (selectedIndex < tooltipData.length) {
97
- const tooltipItem = tooltipData[selectedIndex];
98
- tooltipContext?.showTooltip({
99
- datum: tooltipItem.datum,
100
- key: tooltipItem.seriesLabel,
101
- index: tooltipItem.seriesIndex
102
- });
103
- }
104
- }
105
- }, [selectedIndex, tooltipData, series]);
106
- const focusableRenderTooltip = useMemo(() => {
107
- if (!renderTooltip) return void 0;
108
- return (params) => {
109
- const tooltipContent = renderTooltip(params);
110
- if (selectedIndex !== void 0) {
111
- return /* @__PURE__ */ _jsx2("div", {
112
- ref: tooltipRef,
113
- tabIndex: -1,
114
- role: "tooltip",
115
- "aria-atomic": "true",
116
- className: keyboardFocusedClassName,
117
- children: tooltipContent
118
- }, `chart-tooltip-${selectedIndex}`);
119
- }
120
- return /* @__PURE__ */ _jsx2("div", {
121
- role: "tooltip",
122
- "aria-live": "polite",
123
- children: tooltipContent
124
- });
125
- };
126
- }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);
127
- return /* @__PURE__ */ _jsx2(Tooltip, {
128
- ...props,
129
- renderTooltip: focusableRenderTooltip
130
- });
131
- };
132
- var useKeyboardNavigation = ({
133
- selectedIndex,
134
- setSelectedIndex,
135
- isNavigating,
136
- setIsNavigating,
137
- chartRef,
138
- totalPoints
139
- }) => {
140
- const tooltipRef = useCallback((element) => {
141
- if (element && selectedIndex !== void 0) {
142
- element.focus();
143
- }
144
- }, [selectedIndex]);
145
- const onChartFocus = useCallback(() => {
146
- if (!isNavigating && selectedIndex !== void 0) {
147
- setSelectedIndex(0);
148
- }
149
- }, [isNavigating, selectedIndex, setSelectedIndex]);
150
- const onChartBlur = useCallback(() => {
151
- setIsNavigating(false);
152
- }, [setIsNavigating]);
153
- const onChartKeyDown = useCallback((event) => {
154
- if (totalPoints === 0) return;
155
- if (event.key === "Tab") {
156
- chartRef.current?.focus();
157
- setSelectedIndex(void 0);
158
- setIsNavigating(false);
159
- return;
160
- }
161
- const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
162
- if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
163
- chartRef.current?.focus();
164
- setSelectedIndex(void 0);
165
- setIsNavigating(false);
166
- return;
167
- }
168
- event.preventDefault();
169
- if (["ArrowRight"].includes(event.key)) {
170
- setIsNavigating(true);
171
- setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
172
- } else if (["ArrowLeft"].includes(event.key)) {
173
- setIsNavigating(true);
174
- setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
175
- } else if (event.key === "Escape") {
176
- setSelectedIndex(void 0);
177
- setIsNavigating(false);
178
- chartRef.current?.focus();
179
- }
180
- }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);
181
- return {
182
- tooltipRef,
183
- onChartFocus,
184
- onChartBlur,
185
- onChartKeyDown
186
- };
187
- };
188
-
189
- export {
190
- BaseTooltip,
191
- AccessibleTooltip,
192
- useKeyboardNavigation
193
- };
194
- //# sourceMappingURL=chunk-BPYKWMI7.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/tooltip/base-tooltip.tsx","../src/components/tooltip/base-tooltip.module.scss","../src/components/tooltip/accessible-tooltip.tsx"],"sourcesContent":["import { formatNumber } from '@automattic/number-formatters';\nimport styles from './base-tooltip.module.scss';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nconst DefaultTooltipContent = ({\n data\n}) => /*#__PURE__*/_jsxs(_Fragment, {\n children: [data?.label, \": \", data?.valueDisplay || formatNumber(data?.value)]\n});\nexport const BaseTooltip = ({\n data,\n top,\n left,\n component: Component = DefaultTooltipContent,\n children,\n className,\n style,\n renderContainer = true\n}) => {\n const content = children || data && /*#__PURE__*/_jsx(Component, {\n data: data,\n className: className\n });\n if (!renderContainer) {\n return content;\n }\n return /*#__PURE__*/_jsx(\"div\", {\n className: styles.tooltip,\n style: {\n top,\n left,\n ...style\n },\n role: \"tooltip\",\n children: content\n });\n};","import 'css-chunk:src/components/tooltip/base-tooltip.module.scss';export default {\n \"tooltip\": \"a8ccharts-OfX6nd\"\n};","import { Tooltip, TooltipContext } from '@visx/xychart';\nimport { useContext, useEffect, useCallback, useMemo } from 'react';\n\n// Type for flattened tooltip data used in individual mode\n\n// Enhanced tooltip with keyboard navigation and accessibility\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const AccessibleTooltip = ({\n renderTooltip,\n selectedIndex,\n tooltipRef,\n keyboardFocusedClassName,\n series = [],\n mode = 'group',\n ...props\n}) => {\n const tooltipContext = useContext(TooltipContext);\n const tooltipData = useMemo(() => {\n if (mode !== 'individual') return [];\n if (series.length === 0) return [];\n const maxDataPoints = Math.max(...series.map(s => s.data.length));\n const flattened = [];\n\n // Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n for (let dataPointIndex = 0; dataPointIndex < maxDataPoints; dataPointIndex++) {\n for (let seriesIndex = 0; seriesIndex < series.length; seriesIndex++) {\n const seriesData = series[seriesIndex];\n if (dataPointIndex < seriesData.data.length) {\n flattened.push({\n datum: seriesData.data[dataPointIndex],\n seriesLabel: seriesData.label,\n seriesIndex,\n dataPointIndex\n });\n }\n }\n }\n return flattened;\n }, [series, mode]);\n\n // Handle tooltip highlighting for keyboard navigation\n useEffect(() => {\n if (selectedIndex === undefined) {\n tooltipContext?.hideTooltip();\n return;\n }\n if (mode === 'group') {\n // Show all series at the selected data point index in single tooltip.\n series.forEach((s, index) => {\n if (selectedIndex < s.data.length) {\n const datum = s.data[selectedIndex];\n tooltipContext?.showTooltip({\n datum,\n key: s.label,\n index\n });\n }\n });\n } else if (mode === 'individual') {\n // Show individual tooltips for each datapoint from each series.\n if (selectedIndex < tooltipData.length) {\n const tooltipItem = tooltipData[selectedIndex];\n tooltipContext?.showTooltip({\n datum: tooltipItem.datum,\n key: tooltipItem.seriesLabel,\n index: tooltipItem.seriesIndex\n });\n }\n }\n\n // Don't include tooltipContext in the dependency array to avoid loop.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedIndex, tooltipData, series]);\n\n // Create a focusable renderTooltip that includes accessibility features\n const focusableRenderTooltip = useMemo(() => {\n if (!renderTooltip) return undefined;\n return params => {\n const tooltipContent = renderTooltip(params);\n if (selectedIndex !== undefined) {\n return /*#__PURE__*/_jsx(\"div\", {\n ref: tooltipRef,\n tabIndex: -1,\n role: \"tooltip\",\n \"aria-atomic\": \"true\",\n className: keyboardFocusedClassName,\n children: tooltipContent\n }, `chart-tooltip-${selectedIndex}`);\n }\n return /*#__PURE__*/_jsx(\"div\", {\n role: \"tooltip\",\n \"aria-live\": \"polite\",\n children: tooltipContent\n });\n };\n }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);\n return /*#__PURE__*/_jsx(Tooltip, {\n ...props,\n renderTooltip: focusableRenderTooltip\n });\n};\n\n// Keyboard navigation hook for charts\n\nexport const useKeyboardNavigation = ({\n selectedIndex,\n setSelectedIndex,\n isNavigating,\n setIsNavigating,\n chartRef,\n totalPoints\n}) => {\n // Focus the tooltip as soon as it is rendered\n const tooltipRef = useCallback(element => {\n if (element && selectedIndex !== undefined) {\n element.focus();\n }\n }, [selectedIndex]);\n\n // On each focus of chart, reset the selectedIndex to 0, if keyboard navigation is not already active\n const onChartFocus = useCallback(() => {\n if (!isNavigating && selectedIndex !== undefined) {\n setSelectedIndex(0);\n }\n }, [isNavigating, selectedIndex, setSelectedIndex]);\n\n // On each blur of chart, keyboard navigation should restart from first tooltip\n const onChartBlur = useCallback(() => {\n setIsNavigating(false);\n }, [setIsNavigating]);\n const onChartKeyDown = useCallback(event => {\n if (totalPoints === 0) return;\n\n // Keep focus on the chart if tab is pressed\n if (event.key === 'Tab') {\n chartRef.current?.focus();\n setSelectedIndex(undefined);\n setIsNavigating(false);\n return;\n }\n const currentSelectedIndex = selectedIndex === undefined ? -1 : selectedIndex;\n if (currentSelectedIndex + 1 >= totalPoints && ['ArrowRight'].includes(event.key)) {\n chartRef.current?.focus();\n setSelectedIndex(undefined);\n setIsNavigating(false);\n return;\n }\n event.preventDefault();\n if (['ArrowRight'].includes(event.key)) {\n setIsNavigating(true);\n setSelectedIndex((currentSelectedIndex + 1) % totalPoints);\n } else if (['ArrowLeft'].includes(event.key)) {\n setIsNavigating(true);\n setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);\n } else if (event.key === 'Escape') {\n setSelectedIndex(undefined);\n setIsNavigating(false);\n chartRef.current?.focus();\n }\n }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);\n return {\n tooltipRef,\n onChartFocus,\n onChartBlur,\n onChartKeyDown\n };\n};\n\n// Re-export the base Tooltip for backwards compatibility\nexport { Tooltip };"],"mappings":";AAAA,SAAS,oBAAoB;;;ACAsC,IAAO,8BAAQ;AAAA,EAChF,WAAW;AACb;;;ADAA,SAAS,YAAY,WAAW,QAAQ,OAAO,OAAO,YAAY;AAClE,IAAM,wBAAwB,CAAC;AAAA,EAC7B;AACF,MAAmB,sBAAM,WAAW;AAAA,EAClC,UAAU,CAAC,MAAM,OAAO,MAAM,MAAM,gBAAgB,aAAa,MAAM,KAAK,CAAC;AAC/E,CAAC;AACM,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,YAAY;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,MAAM;AACJ,QAAM,UAAU,YAAY,QAAqB,qBAAK,WAAW;AAAA,IAC/D;AAAA,IACA;AAAA,EACF,CAAC;AACD,MAAI,CAAC,iBAAiB;AACpB,WAAO;AAAA,EACT;AACA,SAAoB,qBAAK,OAAO;AAAA,IAC9B,WAAW,4BAAO;AAAA,IAClB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN,UAAU;AAAA,EACZ,CAAC;AACH;;;AEnCA,SAAS,SAAS,sBAAsB;AACxC,SAAS,YAAY,WAAW,aAAa,eAAe;AAK5D,SAAS,OAAOA,aAAY;AACrB,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,QAAM,iBAAiB,WAAW,cAAc;AAChD,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,SAAS,aAAc,QAAO,CAAC;AACnC,QAAI,OAAO,WAAW,EAAG,QAAO,CAAC;AACjC,UAAM,gBAAgB,KAAK,IAAI,GAAG,OAAO,IAAI,OAAK,EAAE,KAAK,MAAM,CAAC;AAChE,UAAM,YAAY,CAAC;AAGnB,aAAS,iBAAiB,GAAG,iBAAiB,eAAe,kBAAkB;AAC7E,eAAS,cAAc,GAAG,cAAc,OAAO,QAAQ,eAAe;AACpE,cAAM,aAAa,OAAO,WAAW;AACrC,YAAI,iBAAiB,WAAW,KAAK,QAAQ;AAC3C,oBAAU,KAAK;AAAA,YACb,OAAO,WAAW,KAAK,cAAc;AAAA,YACrC,aAAa,WAAW;AAAA,YACxB;AAAA,YACA;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,IAAI,CAAC;AAGjB,YAAU,MAAM;AACd,QAAI,kBAAkB,QAAW;AAC/B,sBAAgB,YAAY;AAC5B;AAAA,IACF;AACA,QAAI,SAAS,SAAS;AAEpB,aAAO,QAAQ,CAAC,GAAG,UAAU;AAC3B,YAAI,gBAAgB,EAAE,KAAK,QAAQ;AACjC,gBAAM,QAAQ,EAAE,KAAK,aAAa;AAClC,0BAAgB,YAAY;AAAA,YAC1B;AAAA,YACA,KAAK,EAAE;AAAA,YACP;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH,WAAW,SAAS,cAAc;AAEhC,UAAI,gBAAgB,YAAY,QAAQ;AACtC,cAAM,cAAc,YAAY,aAAa;AAC7C,wBAAgB,YAAY;AAAA,UAC1B,OAAO,YAAY;AAAA,UACnB,KAAK,YAAY;AAAA,UACjB,OAAO,YAAY;AAAA,QACrB,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EAIF,GAAG,CAAC,eAAe,aAAa,MAAM,CAAC;AAGvC,QAAM,yBAAyB,QAAQ,MAAM;AAC3C,QAAI,CAAC,cAAe,QAAO;AAC3B,WAAO,YAAU;AACf,YAAM,iBAAiB,cAAc,MAAM;AAC3C,UAAI,kBAAkB,QAAW;AAC/B,eAAoB,gBAAAA,MAAK,OAAO;AAAA,UAC9B,KAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAM;AAAA,UACN,eAAe;AAAA,UACf,WAAW;AAAA,UACX,UAAU;AAAA,QACZ,GAAG,iBAAiB,aAAa,EAAE;AAAA,MACrC;AACA,aAAoB,gBAAAA,MAAK,OAAO;AAAA,QAC9B,MAAM;AAAA,QACN,aAAa;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,eAAe,eAAe,YAAY,wBAAwB,CAAC;AACvE,SAAoB,gBAAAA,MAAK,SAAS;AAAA,IAChC,GAAG;AAAA,IACH,eAAe;AAAA,EACjB,CAAC;AACH;AAIO,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,aAAa,YAAY,aAAW;AACxC,QAAI,WAAW,kBAAkB,QAAW;AAC1C,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,aAAa,CAAC;AAGlB,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,CAAC,gBAAgB,kBAAkB,QAAW;AAChD,uBAAiB,CAAC;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,cAAc,eAAe,gBAAgB,CAAC;AAGlD,QAAM,cAAc,YAAY,MAAM;AACpC,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAC,eAAe,CAAC;AACpB,QAAM,iBAAiB,YAAY,WAAS;AAC1C,QAAI,gBAAgB,EAAG;AAGvB,QAAI,MAAM,QAAQ,OAAO;AACvB,eAAS,SAAS,MAAM;AACxB,uBAAiB,MAAS;AAC1B,sBAAgB,KAAK;AACrB;AAAA,IACF;AACA,UAAM,uBAAuB,kBAAkB,SAAY,KAAK;AAChE,QAAI,uBAAuB,KAAK,eAAe,CAAC,YAAY,EAAE,SAAS,MAAM,GAAG,GAAG;AACjF,eAAS,SAAS,MAAM;AACxB,uBAAiB,MAAS;AAC1B,sBAAgB,KAAK;AACrB;AAAA,IACF;AACA,UAAM,eAAe;AACrB,QAAI,CAAC,YAAY,EAAE,SAAS,MAAM,GAAG,GAAG;AACtC,sBAAgB,IAAI;AACpB,wBAAkB,uBAAuB,KAAK,WAAW;AAAA,IAC3D,WAAW,CAAC,WAAW,EAAE,SAAS,MAAM,GAAG,GAAG;AAC5C,sBAAgB,IAAI;AACpB,wBAAkB,uBAAuB,IAAI,eAAe,WAAW;AAAA,IACzE,WAAW,MAAM,QAAQ,UAAU;AACjC,uBAAiB,MAAS;AAC1B,sBAAgB,KAAK;AACrB,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,aAAa,eAAe,kBAAkB,iBAAiB,QAAQ,CAAC;AAC5E,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["_jsx"]}