@automattic/charts 0.56.5 → 0.56.7

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 (179) hide show
  1. package/AGENTS.md +135 -0
  2. package/CHANGELOG.md +17 -0
  3. package/README.md +2 -1
  4. package/dist/charts/bar-chart/index.cjs +6 -6
  5. package/dist/charts/bar-chart/index.css +1 -4
  6. package/dist/charts/bar-chart/index.css.map +1 -1
  7. package/dist/charts/bar-chart/index.d.cts +2 -8
  8. package/dist/charts/bar-chart/index.d.ts +2 -8
  9. package/dist/charts/bar-chart/index.js +5 -5
  10. package/dist/charts/bar-list-chart/index.cjs +7 -7
  11. package/dist/charts/bar-list-chart/index.css +1 -4
  12. package/dist/charts/bar-list-chart/index.css.map +1 -1
  13. package/dist/charts/bar-list-chart/index.d.cts +2 -2
  14. package/dist/charts/bar-list-chart/index.d.ts +2 -2
  15. package/dist/charts/bar-list-chart/index.js +6 -6
  16. package/dist/charts/conversion-funnel-chart/index.cjs +5 -5
  17. package/dist/charts/conversion-funnel-chart/index.css +1 -4
  18. package/dist/charts/conversion-funnel-chart/index.css.map +1 -1
  19. package/dist/charts/conversion-funnel-chart/index.d.cts +2 -1
  20. package/dist/charts/conversion-funnel-chart/index.d.ts +2 -1
  21. package/dist/charts/conversion-funnel-chart/index.js +4 -4
  22. package/dist/charts/geo-chart/index.cjs +4 -4
  23. package/dist/charts/geo-chart/index.css +1 -4
  24. package/dist/charts/geo-chart/index.css.map +1 -1
  25. package/dist/charts/geo-chart/index.d.cts +2 -1
  26. package/dist/charts/geo-chart/index.d.ts +2 -1
  27. package/dist/charts/geo-chart/index.js +3 -3
  28. package/dist/charts/leaderboard-chart/index.cjs +5 -5
  29. package/dist/charts/leaderboard-chart/index.css +1 -4
  30. package/dist/charts/leaderboard-chart/index.css.map +1 -1
  31. package/dist/charts/leaderboard-chart/index.d.cts +3 -2
  32. package/dist/charts/leaderboard-chart/index.d.ts +3 -2
  33. package/dist/charts/leaderboard-chart/index.js +4 -4
  34. package/dist/charts/line-chart/index.cjs +6 -6
  35. package/dist/charts/line-chart/index.css +1 -4
  36. package/dist/charts/line-chart/index.css.map +1 -1
  37. package/dist/charts/line-chart/index.d.cts +2 -8
  38. package/dist/charts/line-chart/index.d.ts +2 -8
  39. package/dist/charts/line-chart/index.js +5 -5
  40. package/dist/charts/pie-chart/index.cjs +6 -4
  41. package/dist/charts/pie-chart/index.cjs.map +1 -1
  42. package/dist/charts/pie-chart/index.css +13 -7
  43. package/dist/charts/pie-chart/index.css.map +1 -1
  44. package/dist/charts/pie-chart/index.d.cts +2 -1
  45. package/dist/charts/pie-chart/index.d.ts +2 -1
  46. package/dist/charts/pie-chart/index.js +5 -3
  47. package/dist/charts/pie-semi-circle-chart/index.cjs +6 -4
  48. package/dist/charts/pie-semi-circle-chart/index.cjs.map +1 -1
  49. package/dist/charts/pie-semi-circle-chart/index.css +12 -13
  50. package/dist/charts/pie-semi-circle-chart/index.css.map +1 -1
  51. package/dist/charts/pie-semi-circle-chart/index.d.cts +5 -2
  52. package/dist/charts/pie-semi-circle-chart/index.d.ts +5 -2
  53. package/dist/charts/pie-semi-circle-chart/index.js +5 -3
  54. package/dist/charts/sparkline/index.cjs +7 -7
  55. package/dist/charts/sparkline/index.css +1 -4
  56. package/dist/charts/sparkline/index.css.map +1 -1
  57. package/dist/charts/sparkline/index.js +6 -6
  58. package/dist/{chunk-NGHXTIUE.cjs → chunk-3EXJP67N.cjs} +7 -7
  59. package/dist/{chunk-NGHXTIUE.cjs.map → chunk-3EXJP67N.cjs.map} +1 -1
  60. package/dist/{chunk-FIFSYVN6.cjs → chunk-55ZCOYDF.cjs} +117 -132
  61. package/dist/chunk-55ZCOYDF.cjs.map +1 -0
  62. package/dist/{chunk-LT4YOIMM.js → chunk-7FDQGBY7.js} +145 -119
  63. package/dist/chunk-7FDQGBY7.js.map +1 -0
  64. package/dist/{chunk-7QDEU3KN.cjs → chunk-ASLARV7L.cjs} +6 -6
  65. package/dist/chunk-ASLARV7L.cjs.map +1 -0
  66. package/dist/chunk-BXFD7JIG.cjs +401 -0
  67. package/dist/chunk-BXFD7JIG.cjs.map +1 -0
  68. package/dist/{chunk-XCXAWMJQ.cjs → chunk-CAFJRZPZ.cjs} +12 -12
  69. package/dist/{chunk-XCXAWMJQ.cjs.map → chunk-CAFJRZPZ.cjs.map} +1 -1
  70. package/dist/{chunk-KHRPRH4V.js → chunk-E62LCBGD.js} +4 -4
  71. package/dist/{chunk-PCOI2GT5.js → chunk-GWBS65VC.js} +3 -3
  72. package/dist/{chunk-MEIVKY4K.js → chunk-IS5YYLTV.js} +18 -18
  73. package/dist/{chunk-MEIVKY4K.js.map → chunk-IS5YYLTV.js.map} +1 -1
  74. package/dist/{chunk-Q6G3BGCL.cjs → chunk-K6TGILHX.cjs} +8 -8
  75. package/dist/{chunk-Q6G3BGCL.cjs.map → chunk-K6TGILHX.cjs.map} +1 -1
  76. package/dist/{chunk-X6GX4QUJ.js → chunk-KHQPN77E.js} +3 -3
  77. package/dist/{chunk-SEKPIG5K.js → chunk-KNIMXN6Z.js} +2 -2
  78. package/dist/{chunk-SEKPIG5K.js.map → chunk-KNIMXN6Z.js.map} +1 -1
  79. package/dist/{chunk-AFWQR3SM.js → chunk-MDRCAGKZ.js} +4 -4
  80. package/dist/{chunk-TKPK4RFS.cjs → chunk-NQJE2CC7.cjs} +120 -98
  81. package/dist/chunk-NQJE2CC7.cjs.map +1 -0
  82. package/dist/{chunk-FY325WQ4.cjs → chunk-O2JIANHK.cjs} +25 -25
  83. package/dist/chunk-O2JIANHK.cjs.map +1 -0
  84. package/dist/{chunk-DLSUC7RN.js → chunk-OMS5QIJN.js} +6 -6
  85. package/dist/chunk-OMS5QIJN.js.map +1 -0
  86. package/dist/{chunk-TYIH5LMV.js → chunk-OP6PHB2U.js} +6 -6
  87. package/dist/chunk-OP6PHB2U.js.map +1 -0
  88. package/dist/{chunk-32ESS4MV.js → chunk-RFSHE3HL.js} +17 -7
  89. package/dist/chunk-RFSHE3HL.js.map +1 -0
  90. package/dist/{chunk-KXSLMOW5.js → chunk-SSFFCBCF.js} +6 -6
  91. package/dist/chunk-SSFFCBCF.js.map +1 -0
  92. package/dist/{chunk-I5467ZJ5.cjs → chunk-SUDERBUA.cjs} +2 -2
  93. package/dist/{chunk-I5467ZJ5.cjs.map → chunk-SUDERBUA.cjs.map} +1 -1
  94. package/dist/{chunk-SH32YSZO.cjs → chunk-UFRBUT2D.cjs} +19 -19
  95. package/dist/{chunk-SH32YSZO.cjs.map → chunk-UFRBUT2D.cjs.map} +1 -1
  96. package/dist/{chunk-7TQSPLIN.js → chunk-VPAEBI2F.js} +109 -87
  97. package/dist/chunk-VPAEBI2F.js.map +1 -0
  98. package/dist/{chunk-IHESL7H5.cjs → chunk-X7JL2NYJ.cjs} +24 -24
  99. package/dist/chunk-X7JL2NYJ.cjs.map +1 -0
  100. package/dist/{chunk-DBY6C4O2.js → chunk-XD2HV7M5.js} +77 -92
  101. package/dist/chunk-XD2HV7M5.js.map +1 -0
  102. package/dist/{chunk-LTPJPIDP.cjs → chunk-YAXY5L7I.cjs} +7 -7
  103. package/dist/{chunk-LTPJPIDP.cjs.map → chunk-YAXY5L7I.cjs.map} +1 -1
  104. package/dist/{chunk-EJJO2QNB.cjs → chunk-YDVHT7GS.cjs} +17 -7
  105. package/dist/chunk-YDVHT7GS.cjs.map +1 -0
  106. package/dist/components/legend/index.cjs +2 -2
  107. package/dist/components/legend/index.css +1 -4
  108. package/dist/components/legend/index.css.map +1 -1
  109. package/dist/components/legend/index.d.cts +2 -1
  110. package/dist/components/legend/index.d.ts +2 -1
  111. package/dist/components/legend/index.js +1 -1
  112. package/dist/components/tooltip/index.d.cts +2 -1
  113. package/dist/components/tooltip/index.d.ts +2 -1
  114. package/dist/hooks/index.cjs +2 -2
  115. package/dist/hooks/index.cjs.map +1 -1
  116. package/dist/hooks/index.css +1 -4
  117. package/dist/hooks/index.css.map +1 -1
  118. package/dist/hooks/index.d.cts +10 -7
  119. package/dist/hooks/index.d.ts +10 -7
  120. package/dist/hooks/index.js +3 -3
  121. package/dist/index.cjs +14 -14
  122. package/dist/index.css +24 -16
  123. package/dist/index.css.map +1 -1
  124. package/dist/index.d.cts +4 -4
  125. package/dist/index.d.ts +4 -4
  126. package/dist/index.js +13 -13
  127. package/dist/{leaderboard-chart-B5gWcqe7.d.ts → leaderboard-chart-BSgEw_Um.d.ts} +1 -1
  128. package/dist/{leaderboard-chart-C_6QDcqj.d.cts → leaderboard-chart-COtgamhe.d.cts} +1 -1
  129. package/dist/providers/index.cjs +2 -2
  130. package/dist/providers/index.css +1 -4
  131. package/dist/providers/index.css.map +1 -1
  132. package/dist/providers/index.d.cts +3 -2
  133. package/dist/providers/index.d.ts +3 -2
  134. package/dist/providers/index.js +1 -1
  135. package/dist/{themes-BDVaIfBz.d.cts → themes-CVR5rmIs.d.cts} +1 -1
  136. package/dist/{themes-mcS8QNkQ.d.ts → themes-DQzmaSze.d.ts} +1 -1
  137. package/dist/{types-BCFQlzTM.d.ts → types-CzdN7rUe.d.cts} +12 -3
  138. package/dist/{types-BCFQlzTM.d.cts → types-CzdN7rUe.d.ts} +12 -3
  139. package/dist/utils/index.d.cts +2 -1
  140. package/dist/utils/index.d.ts +2 -1
  141. package/package.json +9 -9
  142. package/src/charts/bar-chart/bar-chart.tsx +2 -9
  143. package/src/charts/bar-chart/test/bar-chart.test.tsx +3 -3
  144. package/src/charts/line-chart/line-chart.tsx +2 -2
  145. package/src/charts/line-chart/test/line-chart.test.tsx +3 -3
  146. package/src/charts/line-chart/types.ts +0 -7
  147. package/src/charts/pie-chart/pie-chart.module.scss +14 -3
  148. package/src/charts/pie-chart/pie-chart.tsx +172 -148
  149. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +17 -11
  150. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +147 -119
  151. package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx +46 -6
  152. package/src/charts/private/with-responsive/test/with-responsive.test.tsx +5 -5
  153. package/src/charts/private/with-responsive/with-responsive.tsx +8 -7
  154. package/src/hooks/index.ts +1 -1
  155. package/src/hooks/test/{use-element-height.test.tsx → use-element-size.test.tsx} +45 -36
  156. package/src/hooks/use-element-size.ts +43 -0
  157. package/src/hooks/use-tooltip-portal-relocator.module.scss +1 -4
  158. package/src/hooks/use-tooltip-portal-relocator.ts +11 -0
  159. package/src/types.ts +13 -3
  160. package/dist/chunk-32ESS4MV.js.map +0 -1
  161. package/dist/chunk-7QDEU3KN.cjs.map +0 -1
  162. package/dist/chunk-7TQSPLIN.js.map +0 -1
  163. package/dist/chunk-DBY6C4O2.js.map +0 -1
  164. package/dist/chunk-DLSUC7RN.js.map +0 -1
  165. package/dist/chunk-EJJO2QNB.cjs.map +0 -1
  166. package/dist/chunk-FIFSYVN6.cjs.map +0 -1
  167. package/dist/chunk-FY325WQ4.cjs.map +0 -1
  168. package/dist/chunk-IHESL7H5.cjs.map +0 -1
  169. package/dist/chunk-JL4ZKKZU.cjs +0 -375
  170. package/dist/chunk-JL4ZKKZU.cjs.map +0 -1
  171. package/dist/chunk-KXSLMOW5.js.map +0 -1
  172. package/dist/chunk-LT4YOIMM.js.map +0 -1
  173. package/dist/chunk-TKPK4RFS.cjs.map +0 -1
  174. package/dist/chunk-TYIH5LMV.js.map +0 -1
  175. package/src/hooks/use-element-height.ts +0 -37
  176. /package/dist/{chunk-KHRPRH4V.js.map → chunk-E62LCBGD.js.map} +0 -0
  177. /package/dist/{chunk-PCOI2GT5.js.map → chunk-GWBS65VC.js.map} +0 -0
  178. /package/dist/{chunk-X6GX4QUJ.js.map → chunk-KHQPN77E.js.map} +0 -0
  179. /package/dist/{chunk-AFWQR3SM.js.map → chunk-MDRCAGKZ.js.map} +0 -0
@@ -0,0 +1,401 @@
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2
+
3
+ var _chunk7OZEQ5HEcjs = require('./chunk-7OZEQ5HE.cjs');
4
+
5
+
6
+ var _chunk2A34OA5Ocjs = require('./chunk-2A34OA5O.cjs');
7
+
8
+
9
+
10
+
11
+ var _chunkRCY6XLGUcjs = require('./chunk-RCY6XLGU.cjs');
12
+
13
+
14
+ var _chunkY3NNQMAXcjs = require('./chunk-Y3NNQMAX.cjs');
15
+
16
+
17
+ var _chunkUFRBUT2Dcjs = require('./chunk-UFRBUT2D.cjs');
18
+
19
+
20
+ var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+ var _chunkYDVHT7GScjs = require('./chunk-YDVHT7GS.cjs');
35
+
36
+
37
+ var _chunkZVGEDXDPcjs = require('./chunk-ZVGEDXDP.cjs');
38
+
39
+ // src/charts/pie-chart/pie-chart.tsx
40
+ var _group = require('@visx/group');
41
+ var _shape = require('@visx/shape');
42
+ var _tooltip = require('@visx/tooltip');
43
+ var _i18n = require('@wordpress/i18n');
44
+ var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
45
+ var _react = require('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
+ var _jsxruntime = require('react/jsx-runtime');
56
+ var renderDefaultPieTooltip = ({
57
+ tooltipData
58
+ }) => {
59
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY3NNQMAXcjs.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 = _chunkYDVHT7GScjs.useGlobalChartsTheme.call(void 0, );
123
+ const chartId = _chunkYDVHT7GScjs.useChartId.call(void 0, providedChartId);
124
+ const [svgWrapperRef, svgWrapperWidth, svgWrapperHeight] = _chunkYDVHT7GScjs.useElementSize.call(void 0, );
125
+ const {
126
+ tooltipOpen,
127
+ tooltipLeft,
128
+ tooltipTop,
129
+ tooltipData,
130
+ hideTooltip,
131
+ showTooltip
132
+ } = _tooltip.useTooltip.call(void 0, );
133
+ const {
134
+ containerRef,
135
+ TooltipInPortal,
136
+ containerBounds
137
+ } = _tooltip.useTooltipInPortal.call(void 0, {
138
+ detectBounds: true,
139
+ scroll: true,
140
+ debounce: 0
141
+ });
142
+ const onMouseLeave = _react.useCallback.call(void 0, () => {
143
+ if (!withTooltips) {
144
+ return;
145
+ }
146
+ hideTooltip();
147
+ }, [withTooltips, hideTooltip]);
148
+ const {
149
+ getElementStyles,
150
+ isSeriesVisible
151
+ } = _chunkYDVHT7GScjs.useGlobalChartsContext.call(void 0, );
152
+ const {
153
+ visibleData,
154
+ allSegmentsHidden,
155
+ legendData
156
+ } = _chunkYDVHT7GScjs.useInteractiveLegendData.call(void 0, {
157
+ data,
158
+ chartId,
159
+ legendInteractive,
160
+ isSeriesVisible
161
+ });
162
+ const legendOptions = _react.useMemo.call(void 0, () => ({
163
+ showValues: true,
164
+ legendValueDisplay
165
+ }), [legendValueDisplay]);
166
+ const legendItems = _chunkYDVHT7GScjs.useChartLegendItems.call(void 0, legendData, legendOptions);
167
+ const {
168
+ isValid,
169
+ message
170
+ } = validateData(data);
171
+ const {
172
+ svgChildren,
173
+ htmlChildren,
174
+ otherChildren
175
+ } = _chunkRCY6XLGUcjs.useChartChildren.call(void 0, children, "PieChart");
176
+ const chartMetadata = _react.useMemo.call(void 0, () => ({
177
+ thickness,
178
+ gapScale,
179
+ cornerScale
180
+ }), [thickness, gapScale, cornerScale]);
181
+ _chunkYDVHT7GScjs.useChartRegistration.call(void 0, {
182
+ chartId,
183
+ legendItems,
184
+ chartType: "pie",
185
+ isDataValid: isValid,
186
+ metadata: chartMetadata
187
+ });
188
+ const prefersReducedMotion = _chunkYDVHT7GScjs.usePrefersReducedMotion.call(void 0, );
189
+ if (!isValid) {
190
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
191
+ className: _clsx2.default.call(void 0, "pie-chart", pie_chart_module_default["pie-chart"], className),
192
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, _chunkYDVHT7GScjs.Legend, {
229
+ orientation: legendOrientation,
230
+ position: legendPosition,
231
+ alignment: legendAlignment,
232
+ maxWidth: legendMaxWidth,
233
+ textOverflow: legendTextOverflow,
234
+ legendItemClassName,
235
+ shape: legendShape,
236
+ chartId,
237
+ interactive: legendInteractive
238
+ });
239
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYDVHT7GScjs.SingleChartContext.Provider, {
240
+ value: {
241
+ chartId,
242
+ chartWidth: width,
243
+ chartHeight: height
244
+ },
245
+ children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUFRBUT2Dcjs.Stack, {
246
+ ref: containerRef,
247
+ direction: "column",
248
+ gap,
249
+ className: _clsx2.default.call(void 0,
250
+ "pie-chart",
251
+ pie_chart_module_default["pie-chart"],
252
+ // Fill parent when no explicit dimensions provided
253
+ {
254
+ [pie_chart_module_default["pie-chart--responsive"]]: !propWidth && !propHeight
255
+ },
256
+ className
257
+ ),
258
+ style: {
259
+ width: propWidth || void 0,
260
+ height: propHeight || void 0
261
+ },
262
+ children: [legendPosition === "top" && legendElement, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
263
+ className: pie_chart_module_default["pie-chart__svg-wrapper"],
264
+ ref: svgWrapperRef,
265
+ children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", {
266
+ viewBox: `0 0 ${width} ${height}`,
267
+ preserveAspectRatio: "xMidYMid meet",
268
+ width,
269
+ height,
270
+ children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", {
271
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2A34OA5Ocjs.radial_wipe_animation_default, {
272
+ id: `radial-wipe-${chartId}`,
273
+ radius: outerRadius,
274
+ innerRadius
275
+ })
276
+ }), /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _group.Group, {
277
+ top: centerY,
278
+ left: centerX,
279
+ mask: animation && !prefersReducedMotion ? `url(#radial-wipe-${chartId})` : null,
280
+ children: [allSegmentsHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", {
281
+ textAnchor: "middle",
282
+ dy: ".33em",
283
+ fill: providerTheme.gridColor || "#ccc",
284
+ fontSize: "14",
285
+ fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
286
+ children: _i18n.__.call(void 0, "All segments are hidden. Click legend items to show data.", "jetpack-charts")
287
+ }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _shape.Pie, {
288
+ data: dataWithIndex,
289
+ pieValue: accessors.value,
290
+ outerRadius,
291
+ innerRadius,
292
+ padAngle,
293
+ cornerRadius,
294
+ children: (pie) => {
295
+ return pie.arcs.map((arc, index) => {
296
+ const [centroidX, centroidY] = pie.path.centroid(arc);
297
+ const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
298
+ const handleMouseMove = (event) => {
299
+ if (!withTooltips) {
300
+ return;
301
+ }
302
+ if (containerBounds.width === 0 || containerBounds.height === 0) {
303
+ return;
304
+ }
305
+ showTooltip({
306
+ tooltipData: arc.data,
307
+ tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
308
+ tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY
309
+ });
310
+ };
311
+ const pathProps = {
312
+ d: pie.path(arc) || "",
313
+ fill: accessors.fill(arc.data),
314
+ "data-testid": "pie-segment"
315
+ };
316
+ const groupProps = {};
317
+ if (withTooltips) {
318
+ groupProps.onMouseMove = handleMouseMove;
319
+ groupProps.onMouseLeave = onMouseLeave;
320
+ }
321
+ const fontSize = 12;
322
+ const estimatedTextWidth = _chunk7OZEQ5HEcjs.getStringWidth.call(void 0, arc.data.label, {
323
+ fontSize
324
+ });
325
+ const labelPadding = 6;
326
+ const backgroundWidth = estimatedTextWidth + labelPadding * 2;
327
+ const backgroundHeight = fontSize + labelPadding * 2;
328
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", {
329
+ ...groupProps,
330
+ children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", {
331
+ ...pathProps
332
+ }), showLabels && hasSpaceForLabel && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", {
333
+ children: [providerTheme.labelBackgroundColor && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", {
334
+ x: centroidX - backgroundWidth / 2,
335
+ y: centroidY - backgroundHeight / 2,
336
+ width: backgroundWidth,
337
+ height: backgroundHeight,
338
+ fill: providerTheme.labelBackgroundColor,
339
+ rx: 4,
340
+ ry: 4,
341
+ pointerEvents: "none"
342
+ }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", {
343
+ x: centroidX,
344
+ y: centroidY,
345
+ dy: ".33em",
346
+ fill: providerTheme.labelTextColor || "#333",
347
+ fontSize,
348
+ textAnchor: "middle",
349
+ pointerEvents: "none",
350
+ children: arc.data.label
351
+ })]
352
+ })]
353
+ }, `arc-${index}`);
354
+ });
355
+ }
356
+ }), !allSegmentsHidden && svgChildren]
357
+ })]
358
+ })
359
+ }), legendPosition === "bottom" && legendElement, withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipInPortal, {
360
+ top: tooltipTop || 0,
361
+ left: tooltipLeft || 0,
362
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
363
+ role: "tooltip",
364
+ children: renderTooltip({
365
+ tooltipData
366
+ })
367
+ })
368
+ }), htmlChildren, otherChildren]
369
+ })
370
+ });
371
+ };
372
+ var PieChartWithProvider = (props) => {
373
+ const existingContext = _react.useContext.call(void 0, _chunkYDVHT7GScjs.GlobalChartsContext);
374
+ if (existingContext) {
375
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieChartInternal, {
376
+ ...props
377
+ });
378
+ }
379
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYDVHT7GScjs.GlobalChartsProvider, {
380
+ children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieChartInternal, {
381
+ ...props
382
+ })
383
+ });
384
+ };
385
+ PieChartWithProvider.displayName = "PieChart";
386
+ var PieChart = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0, PieChartWithProvider, {
387
+ Legend: _chunkYDVHT7GScjs.Legend,
388
+ SVG: _chunkRCY6XLGUcjs.ChartSVG,
389
+ HTML: _chunkRCY6XLGUcjs.ChartHTML
390
+ });
391
+ var PieChartResponsive = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0, _chunkASLARV7Lcjs.withResponsive.call(void 0, PieChartWithProvider), {
392
+ Legend: _chunkYDVHT7GScjs.Legend,
393
+ SVG: _chunkRCY6XLGUcjs.ChartSVG,
394
+ HTML: _chunkRCY6XLGUcjs.ChartHTML
395
+ });
396
+
397
+
398
+
399
+
400
+ exports.PieChart = PieChart; exports.PieChartResponsive = PieChartResponsive;
401
+ //# sourceMappingURL=chunk-BXFD7JIG.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-BXFD7JIG.cjs","../src/charts/pie-chart/pie-chart.tsx","../src/charts/pie-chart/pie-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-BXFD7JIG.cjs","sourcesContent":[null,"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 maxWidth: legendMaxWidth,\n textOverflow: legendTextOverflow,\n legendItemClassName: 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};"]}
@@ -1,6 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } 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; }
2
2
 
3
- var _chunkSH32YSZOcjs = require('./chunk-SH32YSZO.cjs');
3
+ var _chunkUFRBUT2Dcjs = require('./chunk-UFRBUT2D.cjs');
4
4
 
5
5
 
6
6
 
@@ -9,7 +9,7 @@ var _chunkSH32YSZOcjs = require('./chunk-SH32YSZO.cjs');
9
9
 
10
10
 
11
11
 
12
- var _chunkEJJO2QNBcjs = require('./chunk-EJJO2QNB.cjs');
12
+ var _chunkYDVHT7GScjs = require('./chunk-YDVHT7GS.cjs');
13
13
 
14
14
 
15
15
 
@@ -115,13 +115,13 @@ var ConversionFunnelChartInternal = ({
115
115
  renderMainMetric,
116
116
  renderTooltip
117
117
  }) => {
118
- const chartId = _chunkEJJO2QNBcjs.useChartId.call(void 0, providedChartId);
118
+ const chartId = _chunkYDVHT7GScjs.useChartId.call(void 0, providedChartId);
119
119
  const {
120
120
  conversionFunnelChart: conversionFunnelChartSettings
121
- } = _chunkEJJO2QNBcjs.useGlobalChartsTheme.call(void 0, );
121
+ } = _chunkYDVHT7GScjs.useGlobalChartsTheme.call(void 0, );
122
122
  const {
123
123
  getElementStyles
124
- } = _chunkEJJO2QNBcjs.useGlobalChartsContext.call(void 0, );
124
+ } = _chunkYDVHT7GScjs.useGlobalChartsContext.call(void 0, );
125
125
  const chartRef = _react.useRef.call(void 0, null);
126
126
  const selectedBarRef = _react.useRef.call(void 0, null);
127
127
  const {
@@ -286,16 +286,16 @@ var ConversionFunnelChartInternal = ({
286
286
  changeIndicator,
287
287
  stepsCount: _optionalChain([steps, 'optionalAccess', _8 => _8.length]) || 0
288
288
  }), [mainRate, changeIndicator, _optionalChain([steps, 'optionalAccess', _9 => _9.length])]);
289
- _chunkEJJO2QNBcjs.useChartRegistration.call(void 0, {
289
+ _chunkYDVHT7GScjs.useChartRegistration.call(void 0, {
290
290
  chartId,
291
291
  legendItems: [],
292
292
  chartType: "conversion-funnel",
293
293
  isDataValid,
294
294
  metadata: chartMetadata
295
295
  });
296
- const prefersReducedMotion = _chunkEJJO2QNBcjs.usePrefersReducedMotion.call(void 0, );
296
+ const prefersReducedMotion = _chunkYDVHT7GScjs.usePrefersReducedMotion.call(void 0, );
297
297
  if (!isDataValid) {
298
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSH32YSZOcjs.Stack, {
298
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUFRBUT2Dcjs.Stack, {
299
299
  direction: "column",
300
300
  className: _clsx2.default.call(void 0, conversion_funnel_chart_module_default.conversionFunnelChart, loading && conversion_funnel_chart_module_default.loading, className),
301
301
  style: {
@@ -310,7 +310,7 @@ var ConversionFunnelChartInternal = ({
310
310
  }
311
311
  const maxRate = Math.max(...steps.map((step) => step.rate));
312
312
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, {
313
- children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkSH32YSZOcjs.Stack, {
313
+ children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUFRBUT2Dcjs.Stack, {
314
314
  direction: "column",
315
315
  ref: (node) => {
316
316
  portalContainerRef(node);
@@ -401,13 +401,13 @@ var ConversionFunnelChartInternal = ({
401
401
  });
402
402
  };
403
403
  var ConversionFunnelChartWithProvider = (props) => {
404
- const existingContext = _react.useContext.call(void 0, _chunkEJJO2QNBcjs.GlobalChartsContext);
404
+ const existingContext = _react.useContext.call(void 0, _chunkYDVHT7GScjs.GlobalChartsContext);
405
405
  if (existingContext) {
406
406
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConversionFunnelChartInternal, {
407
407
  ...props
408
408
  });
409
409
  }
410
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEJJO2QNBcjs.GlobalChartsProvider, {
410
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYDVHT7GScjs.GlobalChartsProvider, {
411
411
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConversionFunnelChartInternal, {
412
412
  ...props
413
413
  })
@@ -418,4 +418,4 @@ ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
418
418
 
419
419
 
420
420
  exports.ConversionFunnelChartWithProvider = ConversionFunnelChartWithProvider;
421
- //# sourceMappingURL=chunk-XCXAWMJQ.cjs.map
421
+ //# sourceMappingURL=chunk-CAFJRZPZ.cjs.map