@automattic/charts 0.58.0 → 1.0.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 (253) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +7 -54
  3. package/dist/index.cjs +9606 -22
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +20 -25
  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 -56
  10. package/dist/index.js.map +1 -1
  11. package/package.json +8 -125
  12. package/src/charts/bar-chart/bar-chart.module.scss +0 -5
  13. package/src/charts/bar-chart/bar-chart.tsx +131 -137
  14. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +23 -40
  15. package/src/charts/line-chart/line-chart.module.scss +0 -5
  16. package/src/charts/line-chart/line-chart.tsx +190 -183
  17. package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx +1 -2
  18. package/src/charts/pie-chart/pie-chart.module.scss +2 -10
  19. package/src/charts/pie-chart/pie-chart.tsx +198 -199
  20. package/src/charts/pie-chart/test/composition-api.test.tsx +3 -3
  21. package/src/charts/pie-chart/test/pie-chart.test.tsx +42 -35
  22. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +2 -8
  23. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +155 -155
  24. package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx +25 -25
  25. package/src/charts/private/chart-layout/chart-layout.module.scss +7 -0
  26. package/src/charts/private/chart-layout/chart-layout.tsx +106 -0
  27. package/src/charts/private/chart-layout/index.ts +2 -0
  28. package/src/charts/private/chart-layout/test/chart-layout.test.tsx +167 -0
  29. package/src/charts/private/single-chart-context/single-chart-context.tsx +2 -2
  30. package/src/charts/private/svg-empty-state/index.ts +1 -0
  31. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +7 -0
  32. package/src/charts/private/svg-empty-state/svg-empty-state.tsx +40 -0
  33. package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx +12 -8
  34. package/src/components/legend/hooks/use-chart-legend-items.ts +12 -13
  35. package/src/components/legend/legend.tsx +33 -8
  36. package/src/components/legend/test/legend.test.tsx +93 -1
  37. package/src/hooks/index.ts +1 -0
  38. package/src/hooks/use-data-with-percentages.ts +24 -0
  39. package/src/hooks/use-interactive-legend-data.ts +18 -15
  40. package/src/index.ts +65 -2
  41. package/src/providers/chart-context/global-charts-provider.tsx +7 -1
  42. package/src/providers/chart-context/hooks/use-chart-registration.ts +2 -1
  43. package/src/providers/chart-context/types.ts +2 -2
  44. package/src/types.ts +27 -7
  45. package/src/utils/test/resolve-css-var.test.ts +2 -0
  46. package/dist/base-tooltip-DOq93wjU.d.cts +0 -38
  47. package/dist/base-tooltip-DOq93wjU.d.ts +0 -38
  48. package/dist/charts/bar-chart/index.cjs +0 -17
  49. package/dist/charts/bar-chart/index.cjs.map +0 -1
  50. package/dist/charts/bar-chart/index.css +0 -141
  51. package/dist/charts/bar-chart/index.css.map +0 -1
  52. package/dist/charts/bar-chart/index.d.cts +0 -36
  53. package/dist/charts/bar-chart/index.d.ts +0 -36
  54. package/dist/charts/bar-chart/index.js +0 -17
  55. package/dist/charts/bar-chart/index.js.map +0 -1
  56. package/dist/charts/bar-list-chart/index.cjs +0 -18
  57. package/dist/charts/bar-list-chart/index.cjs.map +0 -1
  58. package/dist/charts/bar-list-chart/index.css +0 -141
  59. package/dist/charts/bar-list-chart/index.css.map +0 -1
  60. package/dist/charts/bar-list-chart/index.d.cts +0 -92
  61. package/dist/charts/bar-list-chart/index.d.ts +0 -92
  62. package/dist/charts/bar-list-chart/index.js +0 -18
  63. package/dist/charts/bar-list-chart/index.js.map +0 -1
  64. package/dist/charts/conversion-funnel-chart/index.cjs +0 -11
  65. package/dist/charts/conversion-funnel-chart/index.cjs.map +0 -1
  66. package/dist/charts/conversion-funnel-chart/index.css +0 -157
  67. package/dist/charts/conversion-funnel-chart/index.css.map +0 -1
  68. package/dist/charts/conversion-funnel-chart/index.d.cts +0 -97
  69. package/dist/charts/conversion-funnel-chart/index.d.ts +0 -97
  70. package/dist/charts/conversion-funnel-chart/index.js +0 -11
  71. package/dist/charts/conversion-funnel-chart/index.js.map +0 -1
  72. package/dist/charts/geo-chart/index.cjs +0 -13
  73. package/dist/charts/geo-chart/index.cjs.map +0 -1
  74. package/dist/charts/geo-chart/index.css +0 -23
  75. package/dist/charts/geo-chart/index.css.map +0 -1
  76. package/dist/charts/geo-chart/index.d.cts +0 -67
  77. package/dist/charts/geo-chart/index.d.ts +0 -67
  78. package/dist/charts/geo-chart/index.js +0 -13
  79. package/dist/charts/geo-chart/index.js.map +0 -1
  80. package/dist/charts/leaderboard-chart/index.cjs +0 -21
  81. package/dist/charts/leaderboard-chart/index.cjs.map +0 -1
  82. package/dist/charts/leaderboard-chart/index.css +0 -160
  83. package/dist/charts/leaderboard-chart/index.css.map +0 -1
  84. package/dist/charts/leaderboard-chart/index.d.cts +0 -46
  85. package/dist/charts/leaderboard-chart/index.d.ts +0 -46
  86. package/dist/charts/leaderboard-chart/index.js +0 -21
  87. package/dist/charts/leaderboard-chart/index.js.map +0 -1
  88. package/dist/charts/line-chart/index.cjs +0 -17
  89. package/dist/charts/line-chart/index.cjs.map +0 -1
  90. package/dist/charts/line-chart/index.css +0 -213
  91. package/dist/charts/line-chart/index.css.map +0 -1
  92. package/dist/charts/line-chart/index.d.cts +0 -98
  93. package/dist/charts/line-chart/index.d.ts +0 -98
  94. package/dist/charts/line-chart/index.js +0 -17
  95. package/dist/charts/line-chart/index.js.map +0 -1
  96. package/dist/charts/pie-chart/index.cjs +0 -19
  97. package/dist/charts/pie-chart/index.cjs.map +0 -1
  98. package/dist/charts/pie-chart/index.css +0 -131
  99. package/dist/charts/pie-chart/index.css.map +0 -1
  100. package/dist/charts/pie-chart/index.d.cts +0 -91
  101. package/dist/charts/pie-chart/index.d.ts +0 -91
  102. package/dist/charts/pie-chart/index.js +0 -19
  103. package/dist/charts/pie-chart/index.js.map +0 -1
  104. package/dist/charts/pie-semi-circle-chart/index.cjs +0 -18
  105. package/dist/charts/pie-semi-circle-chart/index.cjs.map +0 -1
  106. package/dist/charts/pie-semi-circle-chart/index.css +0 -132
  107. package/dist/charts/pie-semi-circle-chart/index.css.map +0 -1
  108. package/dist/charts/pie-semi-circle-chart/index.d.cts +0 -88
  109. package/dist/charts/pie-semi-circle-chart/index.d.ts +0 -88
  110. package/dist/charts/pie-semi-circle-chart/index.js +0 -18
  111. package/dist/charts/pie-semi-circle-chart/index.js.map +0 -1
  112. package/dist/charts/sparkline/index.cjs +0 -18
  113. package/dist/charts/sparkline/index.cjs.map +0 -1
  114. package/dist/charts/sparkline/index.css +0 -230
  115. package/dist/charts/sparkline/index.css.map +0 -1
  116. package/dist/charts/sparkline/index.d.cts +0 -113
  117. package/dist/charts/sparkline/index.d.ts +0 -113
  118. package/dist/charts/sparkline/index.js +0 -18
  119. package/dist/charts/sparkline/index.js.map +0 -1
  120. package/dist/chunk-2A34OA5O.cjs +0 -51
  121. package/dist/chunk-2A34OA5O.cjs.map +0 -1
  122. package/dist/chunk-2I67QUIV.js +0 -895
  123. package/dist/chunk-2I67QUIV.js.map +0 -1
  124. package/dist/chunk-2ICEEQOC.js +0 -1071
  125. package/dist/chunk-2ICEEQOC.js.map +0 -1
  126. package/dist/chunk-4B7BL2DD.js +0 -120
  127. package/dist/chunk-4B7BL2DD.js.map +0 -1
  128. package/dist/chunk-4OXMTKAL.js +0 -401
  129. package/dist/chunk-4OXMTKAL.js.map +0 -1
  130. package/dist/chunk-ASLARV7L.cjs +0 -81
  131. package/dist/chunk-ASLARV7L.cjs.map +0 -1
  132. package/dist/chunk-B6NLZFRW.js +0 -617
  133. package/dist/chunk-B6NLZFRW.js.map +0 -1
  134. package/dist/chunk-BBAUQOW6.cjs +0 -120
  135. package/dist/chunk-BBAUQOW6.cjs.map +0 -1
  136. package/dist/chunk-BPYKWMI7.js +0 -194
  137. package/dist/chunk-BPYKWMI7.js.map +0 -1
  138. package/dist/chunk-CMMHCTBX.cjs +0 -373
  139. package/dist/chunk-CMMHCTBX.cjs.map +0 -1
  140. package/dist/chunk-CPPXJATQ.cjs +0 -1071
  141. package/dist/chunk-CPPXJATQ.cjs.map +0 -1
  142. package/dist/chunk-DKU775VC.js +0 -219
  143. package/dist/chunk-DKU775VC.js.map +0 -1
  144. package/dist/chunk-GRA7Y2ZG.cjs +0 -401
  145. package/dist/chunk-GRA7Y2ZG.cjs.map +0 -1
  146. package/dist/chunk-I2276W3I.cjs +0 -66
  147. package/dist/chunk-I2276W3I.cjs.map +0 -1
  148. package/dist/chunk-JJIMABHT.js +0 -351
  149. package/dist/chunk-JJIMABHT.js.map +0 -1
  150. package/dist/chunk-KJHWXOCZ.js +0 -421
  151. package/dist/chunk-KJHWXOCZ.js.map +0 -1
  152. package/dist/chunk-KRWGSOJ2.js +0 -91
  153. package/dist/chunk-KRWGSOJ2.js.map +0 -1
  154. package/dist/chunk-KXRWNFQJ.js +0 -51
  155. package/dist/chunk-KXRWNFQJ.js.map +0 -1
  156. package/dist/chunk-LTFH7SEG.js +0 -373
  157. package/dist/chunk-LTFH7SEG.js.map +0 -1
  158. package/dist/chunk-MUNOKLLE.js +0 -165
  159. package/dist/chunk-MUNOKLLE.js.map +0 -1
  160. package/dist/chunk-MXGLYWVP.cjs +0 -351
  161. package/dist/chunk-MXGLYWVP.cjs.map +0 -1
  162. package/dist/chunk-OP6PHB2U.js +0 -81
  163. package/dist/chunk-OP6PHB2U.js.map +0 -1
  164. package/dist/chunk-OYC34VTO.cjs +0 -3957
  165. package/dist/chunk-OYC34VTO.cjs.map +0 -1
  166. package/dist/chunk-PQL5I3F6.cjs +0 -421
  167. package/dist/chunk-PQL5I3F6.cjs.map +0 -1
  168. package/dist/chunk-REZTQ4PH.cjs +0 -488
  169. package/dist/chunk-REZTQ4PH.cjs.map +0 -1
  170. package/dist/chunk-TZRUHQOH.cjs +0 -91
  171. package/dist/chunk-TZRUHQOH.cjs.map +0 -1
  172. package/dist/chunk-UTYVIOWZ.js +0 -3957
  173. package/dist/chunk-UTYVIOWZ.js.map +0 -1
  174. package/dist/chunk-W2LDIX26.cjs +0 -165
  175. package/dist/chunk-W2LDIX26.cjs.map +0 -1
  176. package/dist/chunk-WSG64BVN.cjs +0 -219
  177. package/dist/chunk-WSG64BVN.cjs.map +0 -1
  178. package/dist/chunk-WTQYGUNF.js +0 -400
  179. package/dist/chunk-WTQYGUNF.js.map +0 -1
  180. package/dist/chunk-WYK7EL5R.cjs +0 -895
  181. package/dist/chunk-WYK7EL5R.cjs.map +0 -1
  182. package/dist/chunk-XC4KHJYX.cjs +0 -617
  183. package/dist/chunk-XC4KHJYX.cjs.map +0 -1
  184. package/dist/chunk-XVBH5XHE.cjs +0 -400
  185. package/dist/chunk-XVBH5XHE.cjs.map +0 -1
  186. package/dist/chunk-XWYZIFZW.js +0 -66
  187. package/dist/chunk-XWYZIFZW.js.map +0 -1
  188. package/dist/chunk-Y3NNQMAX.cjs +0 -194
  189. package/dist/chunk-Y3NNQMAX.cjs.map +0 -1
  190. package/dist/chunk-YAFQVVDI.js +0 -488
  191. package/dist/chunk-YAFQVVDI.js.map +0 -1
  192. package/dist/components/legend/index.cjs +0 -12
  193. package/dist/components/legend/index.cjs.map +0 -1
  194. package/dist/components/legend/index.css +0 -91
  195. package/dist/components/legend/index.css.map +0 -1
  196. package/dist/components/legend/index.d.cts +0 -37
  197. package/dist/components/legend/index.d.ts +0 -37
  198. package/dist/components/legend/index.js +0 -12
  199. package/dist/components/legend/index.js.map +0 -1
  200. package/dist/components/tooltip/index.cjs +0 -12
  201. package/dist/components/tooltip/index.cjs.map +0 -1
  202. package/dist/components/tooltip/index.css +0 -13
  203. package/dist/components/tooltip/index.css.map +0 -1
  204. package/dist/components/tooltip/index.d.cts +0 -71
  205. package/dist/components/tooltip/index.d.ts +0 -71
  206. package/dist/components/tooltip/index.js +0 -12
  207. package/dist/components/tooltip/index.js.map +0 -1
  208. package/dist/components/trend-indicator/index.cjs +0 -8
  209. package/dist/components/trend-indicator/index.cjs.map +0 -1
  210. package/dist/components/trend-indicator/index.css +0 -27
  211. package/dist/components/trend-indicator/index.css.map +0 -1
  212. package/dist/components/trend-indicator/index.d.cts +0 -44
  213. package/dist/components/trend-indicator/index.d.ts +0 -44
  214. package/dist/components/trend-indicator/index.js +0 -8
  215. package/dist/components/trend-indicator/index.js.map +0 -1
  216. package/dist/format-metric-value-MXm5DtQ_.d.cts +0 -24
  217. package/dist/format-metric-value-MXm5DtQ_.d.ts +0 -24
  218. package/dist/hooks/index.cjs +0 -29
  219. package/dist/hooks/index.cjs.map +0 -1
  220. package/dist/hooks/index.css +0 -9
  221. package/dist/hooks/index.css.map +0 -1
  222. package/dist/hooks/index.d.cts +0 -264
  223. package/dist/hooks/index.d.ts +0 -264
  224. package/dist/hooks/index.js +0 -29
  225. package/dist/hooks/index.js.map +0 -1
  226. package/dist/leaderboard-chart-BSbg0ufV.d.cts +0 -79
  227. package/dist/leaderboard-chart-odEYxxEC.d.ts +0 -79
  228. package/dist/legend-DFkosEvC.d.cts +0 -9
  229. package/dist/legend-DLswHhOk.d.ts +0 -9
  230. package/dist/providers/index.cjs +0 -21
  231. package/dist/providers/index.cjs.map +0 -1
  232. package/dist/providers/index.css +0 -9
  233. package/dist/providers/index.css.map +0 -1
  234. package/dist/providers/index.d.cts +0 -28
  235. package/dist/providers/index.d.ts +0 -28
  236. package/dist/providers/index.js +0 -21
  237. package/dist/providers/index.js.map +0 -1
  238. package/dist/themes-D0qc5JaW.d.cts +0 -67
  239. package/dist/themes-itO4Ht5g.d.ts +0 -67
  240. package/dist/types-B5f6XQ7Q.d.cts +0 -19
  241. package/dist/types-BsHooDbM.d.ts +0 -19
  242. package/dist/types-BuSrRM4p.d.ts +0 -49
  243. package/dist/types-ChOUI9-N.d.cts +0 -545
  244. package/dist/types-ChOUI9-N.d.ts +0 -545
  245. package/dist/types-Dfw9VOKI.d.cts +0 -49
  246. package/dist/utils/index.cjs +0 -44
  247. package/dist/utils/index.cjs.map +0 -1
  248. package/dist/utils/index.d.cts +0 -226
  249. package/dist/utils/index.d.ts +0 -226
  250. package/dist/utils/index.js +0 -44
  251. package/dist/utils/index.js.map +0 -1
  252. package/dist/with-responsive-CNfhzAUu.d.cts +0 -18
  253. package/dist/with-responsive-CNfhzAUu.d.ts +0 -18
@@ -1,194 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/tooltip/base-tooltip.tsx
2
- var _numberformatters = require('@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
- var _jsxruntime = require('react/jsx-runtime');
11
- var DefaultTooltipContent = ({
12
- data
13
- }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
14
- children: [_optionalChain([data, 'optionalAccess', _ => _.label]), ": ", _optionalChain([data, 'optionalAccess', _2 => _2.valueDisplay]) || _numberformatters.formatNumber.call(void 0, _optionalChain([data, 'optionalAccess', _3 => _3.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__ */ _jsxruntime.jsx.call(void 0, Component, {
27
- data,
28
- className
29
- });
30
- if (!renderContainer) {
31
- return content;
32
- }
33
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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
- var _xychart = require('@visx/xychart');
47
- var _react = require('react');
48
-
49
- var AccessibleTooltip = ({
50
- renderTooltip,
51
- selectedIndex,
52
- tooltipRef,
53
- keyboardFocusedClassName,
54
- series = [],
55
- mode = "group",
56
- ...props
57
- }) => {
58
- const tooltipContext = _react.useContext.call(void 0, _xychart.TooltipContext);
59
- const tooltipData = _react.useMemo.call(void 0, () => {
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
- _react.useEffect.call(void 0, () => {
80
- if (selectedIndex === void 0) {
81
- _optionalChain([tooltipContext, 'optionalAccess', _4 => _4.hideTooltip, 'call', _5 => _5()]);
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
- _optionalChain([tooltipContext, 'optionalAccess', _6 => _6.showTooltip, 'call', _7 => _7({
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
- _optionalChain([tooltipContext, 'optionalAccess', _8 => _8.showTooltip, 'call', _9 => _9({
99
- datum: tooltipItem.datum,
100
- key: tooltipItem.seriesLabel,
101
- index: tooltipItem.seriesIndex
102
- })]);
103
- }
104
- }
105
- }, [selectedIndex, tooltipData, series]);
106
- const focusableRenderTooltip = _react.useMemo.call(void 0, () => {
107
- if (!renderTooltip) return void 0;
108
- return (params) => {
109
- const tooltipContent = renderTooltip(params);
110
- if (selectedIndex !== void 0) {
111
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", {
121
- role: "tooltip",
122
- "aria-live": "polite",
123
- children: tooltipContent
124
- });
125
- };
126
- }, [renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName]);
127
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.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 = _react.useCallback.call(void 0, (element) => {
141
- if (element && selectedIndex !== void 0) {
142
- element.focus();
143
- }
144
- }, [selectedIndex]);
145
- const onChartFocus = _react.useCallback.call(void 0, () => {
146
- if (!isNavigating && selectedIndex !== void 0) {
147
- setSelectedIndex(0);
148
- }
149
- }, [isNavigating, selectedIndex, setSelectedIndex]);
150
- const onChartBlur = _react.useCallback.call(void 0, () => {
151
- setIsNavigating(false);
152
- }, [setIsNavigating]);
153
- const onChartKeyDown = _react.useCallback.call(void 0, (event) => {
154
- if (totalPoints === 0) return;
155
- if (event.key === "Tab") {
156
- _optionalChain([chartRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.focus, 'call', _12 => _12()]);
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
- _optionalChain([chartRef, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15()]);
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
- _optionalChain([chartRef, 'access', _16 => _16.current, 'optionalAccess', _17 => _17.focus, 'call', _18 => _18()]);
179
- }
180
- }, [totalPoints, selectedIndex, setSelectedIndex, setIsNavigating, chartRef]);
181
- return {
182
- tooltipRef,
183
- onChartFocus,
184
- onChartBlur,
185
- onChartKeyDown
186
- };
187
- };
188
-
189
-
190
-
191
-
192
-
193
- exports.BaseTooltip = BaseTooltip; exports.AccessibleTooltip = AccessibleTooltip; exports.useKeyboardNavigation = useKeyboardNavigation;
194
- //# sourceMappingURL=chunk-Y3NNQMAX.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-Y3NNQMAX.cjs","../src/components/tooltip/base-tooltip.tsx","../src/components/tooltip/base-tooltip.module.scss","../src/components/tooltip/accessible-tooltip.tsx"],"names":["_jsx"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-Y3NNQMAX.cjs","sourcesContent":[null,"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 };"]}