@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,1071 +0,0 @@
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
-
3
-
4
- var _chunkTZRUHQOHcjs = require('./chunk-TZRUHQOH.cjs');
5
-
6
-
7
-
8
-
9
-
10
- var _chunkXVBH5XHEcjs = require('./chunk-XVBH5XHE.cjs');
11
-
12
-
13
-
14
- var _chunkY3NNQMAXcjs = require('./chunk-Y3NNQMAX.cjs');
15
-
16
-
17
- var _chunkREZTQ4PHcjs = require('./chunk-REZTQ4PH.cjs');
18
-
19
-
20
- var _chunkASLARV7Lcjs = require('./chunk-ASLARV7L.cjs');
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
- var _chunkWYK7EL5Rcjs = require('./chunk-WYK7EL5R.cjs');
34
-
35
-
36
-
37
- var _chunkMXGLYWVPcjs = require('./chunk-MXGLYWVP.cjs');
38
-
39
- // src/charts/line-chart/line-chart.tsx
40
- var _numberformatters = require('@automattic/number-formatters');
41
- var _curve = require('@visx/curve');
42
- var _gradient = require('@visx/gradient');
43
- var _scale = require('@visx/scale');
44
- var _xychart = require('@visx/xychart');
45
- var _i18n = require('@wordpress/i18n');
46
- var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
47
- var _datefns = require('date-fns');
48
- var _react = require('react');
49
-
50
- // src/charts/private/default-glyph/default-glyph.tsx
51
-
52
-
53
- var _jsxruntime = require('react/jsx-runtime');
54
- var DefaultGlyph = (props) => {
55
- const {
56
- theme
57
- } = _react.useContext.call(void 0, _xychart.DataContext) || {};
58
- const position = props.position || "start";
59
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", {
60
- cx: props.x,
61
- cy: props.y,
62
- r: props.size,
63
- fill: props.color,
64
- stroke: _optionalChain([theme, 'optionalAccess', _ => _.backgroundColor]),
65
- strokeWidth: 1.5,
66
- paintOrder: "fill",
67
- ...props.glyphStyle
68
- });
69
- };
70
-
71
- // src/charts/line-chart/line-chart.module.scss
72
- var line_chart_module_default = {
73
- "line-chart": "a8ccharts-v-oO8E",
74
- "line-chart__svg-wrapper": "a8ccharts-cpMNjj",
75
- "line-chart--animated": "a8ccharts-QrkuTW",
76
- "rise": "a8ccharts--rxDU3",
77
- "line-chart__tooltip": "a8ccharts-Tu0rR-",
78
- "line-chart__annotation-label-popover": "a8ccharts--RSWXi",
79
- "line-chart__tooltip-date": "a8ccharts-Q-b5A1",
80
- "line-chart__tooltip-row": "a8ccharts-19N7T9",
81
- "line-chart__tooltip-label": "a8ccharts-HOAXrD",
82
- "line-chart__annotations-overlay": "a8ccharts-rQiY8O",
83
- "line-chart__annotation-label": "a8ccharts-8AKWOe",
84
- "line-chart__annotation-label-trigger-button": "a8ccharts-7mh3Cl",
85
- "line-chart__annotation-label-popover--visible": "a8ccharts-VAeVuJ",
86
- "line-chart__annotation-label-popover--safari": "a8ccharts-TEe-iV",
87
- "line-chart__annotation-label-popover-header": "a8ccharts-LAUpx7",
88
- "line-chart__annotation-label-popover-content": "a8ccharts-b76gEu",
89
- "line-chart__annotation-label-popover-close-button": "a8ccharts-LIpFoS"
90
- };
91
-
92
- // src/charts/line-chart/private/line-chart-annotation-label-popover.tsx
93
-
94
-
95
- var _gridicons = require('gridicons'); var _gridicons2 = _interopRequireDefault(_gridicons);
96
-
97
-
98
- var POPOVER_BUTTON_SIZE = 44;
99
- var LineChartAnnotationLabelWithPopover = ({
100
- title,
101
- subtitle,
102
- renderLabel,
103
- renderLabelPopover
104
- }) => {
105
- const popoverId = _react.useId.call(void 0, );
106
- const buttonRef = _react.useRef.call(void 0, null);
107
- const popoverRef = _react.useRef.call(void 0, null);
108
- const [isPositioned, setIsPositioned] = _react.useState.call(void 0, false);
109
- const isBrowserSafari = _chunkMXGLYWVPcjs.isSafari.call(void 0, );
110
- _react.useEffect.call(void 0, () => {
111
- const button = buttonRef.current;
112
- const popover = popoverRef.current;
113
- if (!button || !popover) return;
114
- const positionPopover = () => {
115
- if (!isBrowserSafari) {
116
- const buttonRect = button.getBoundingClientRect();
117
- popover.style.left = `${buttonRect.right}px`;
118
- popover.style.top = `${buttonRect.top}px`;
119
- }
120
- setIsPositioned(true);
121
- };
122
- popover.addEventListener("toggle", (e) => {
123
- if (e.newState === "open") {
124
- positionPopover();
125
- }
126
- });
127
- try {
128
- if (popover.matches(":popover-open")) {
129
- positionPopover();
130
- }
131
- } catch (e2) {
132
- }
133
- }, [isBrowserSafari]);
134
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
135
- className: line_chart_module_default["line-chart__annotation-label"],
136
- children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", {
137
- ref: buttonRef,
138
- popovertarget: popoverId,
139
- className: line_chart_module_default["line-chart__annotation-label-trigger-button"],
140
- style: {
141
- width: `${POPOVER_BUTTON_SIZE}px`,
142
- height: `${POPOVER_BUTTON_SIZE}px`,
143
- transform: `translate(${POPOVER_BUTTON_SIZE / 2}px, 0)`
144
- },
145
- "aria-label": title || _i18n.__.call(void 0, "View details", "jetpack-charts"),
146
- children: renderLabel({
147
- title,
148
- subtitle
149
- })
150
- }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
151
- ref: popoverRef,
152
- id: popoverId,
153
- popover: "auto",
154
- className: _clsx2.default.call(void 0, line_chart_module_default["line-chart__annotation-label-popover"], isPositioned && line_chart_module_default["line-chart__annotation-label-popover--visible"], isBrowserSafari && line_chart_module_default["line-chart__annotation-label-popover--safari"]),
155
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
156
- className: line_chart_module_default["line-chart__annotation-label-popover-header"],
157
- children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
158
- className: line_chart_module_default["line-chart__annotation-label-popover-content"],
159
- children: renderLabelPopover({
160
- title,
161
- subtitle
162
- })
163
- }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", {
164
- popovertarget: popoverId,
165
- popovertargetaction: "hide",
166
- className: line_chart_module_default["line-chart__annotation-label-popover-close-button"],
167
- "aria-label": _i18n.__.call(void 0, "Close", "jetpack-charts"),
168
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _gridicons2.default, {
169
- icon: "cross",
170
- size: 16
171
- })
172
- })]
173
- })
174
- })]
175
- });
176
- };
177
- var line_chart_annotation_label_popover_default = LineChartAnnotationLabelWithPopover;
178
-
179
- // src/charts/line-chart/private/line-chart-annotations-overlay.tsx
180
-
181
-
182
-
183
- var LineChartAnnotationsOverlay = ({
184
- children
185
- }) => {
186
- const {
187
- chartRef,
188
- chartWidth,
189
- chartHeight
190
- } = _chunkXVBH5XHEcjs.useSingleChartContext.call(void 0, );
191
- const [scales, setScales] = _react.useState.call(void 0, null);
192
- const [scalesStable, setScalesStable] = _react.useState.call(void 0, false);
193
- const createScaleSignature = _react.useCallback.call(void 0, (scaleData) => {
194
- const xDomain = scaleData.xScale.domain();
195
- const yDomain = scaleData.yScale.domain();
196
- const xRange = scaleData.xScale.range();
197
- const yRange = scaleData.yScale.range();
198
- return `${xDomain.join(",")}-${yDomain.join(",")}-${xRange.join(",")}-${yRange.join(",")}`;
199
- }, []);
200
- const getScalesData = _react.useCallback.call(void 0, () => {
201
- if (_optionalChain([chartRef, 'optionalAccess', _2 => _2.current])) {
202
- const scaleData = chartRef.current.getScales();
203
- if (scaleData) {
204
- const scaleInfo = {
205
- xScale: scaleData.xScale,
206
- yScale: scaleData.yScale
207
- };
208
- return {
209
- scales: scaleInfo,
210
- signature: createScaleSignature(scaleInfo)
211
- };
212
- }
213
- }
214
- return null;
215
- }, [chartRef, createScaleSignature]);
216
- _react.useEffect.call(void 0, () => {
217
- let timeoutId = null;
218
- let lastSignature = null;
219
- let retryCount = 0;
220
- const maxRetries = 20;
221
- const checkInterval = 50;
222
- setScalesStable(false);
223
- const monitorScales = () => {
224
- const currentScaleData = getScalesData();
225
- if (currentScaleData) {
226
- const scalesSettled = lastSignature && currentScaleData.signature === lastSignature;
227
- if (scalesSettled) {
228
- setScalesStable(true);
229
- return;
230
- }
231
- setScales(currentScaleData.scales);
232
- lastSignature = currentScaleData.signature;
233
- }
234
- if (retryCount < maxRetries) {
235
- retryCount++;
236
- timeoutId = setTimeout(monitorScales, checkInterval);
237
- }
238
- };
239
- monitorScales();
240
- return () => {
241
- if (timeoutId) {
242
- clearTimeout(timeoutId);
243
- }
244
- };
245
- }, [getScalesData, chartWidth, chartHeight]);
246
- if (!chartRef || !children) {
247
- return null;
248
- }
249
- if (!scales || !scalesStable) {
250
- return null;
251
- }
252
- const dataContextValue = {
253
- xScale: scales.xScale,
254
- yScale: scales.yScale,
255
- margin: {
256
- top: 0,
257
- right: 0,
258
- bottom: 0,
259
- left: 0
260
- },
261
- width: chartWidth,
262
- height: chartHeight
263
- };
264
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.DataContext.Provider, {
265
- value: dataContextValue,
266
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", {
267
- width: chartWidth,
268
- height: chartHeight,
269
- className: line_chart_module_default["line-chart__annotations-overlay"],
270
- children
271
- })
272
- });
273
- };
274
- var line_chart_annotations_overlay_default = LineChartAnnotationsOverlay;
275
-
276
- // src/charts/line-chart/private/line-chart-annotation.tsx
277
- var _annotation = require('@visx/annotation');
278
-
279
- var _deepmerge = require('deepmerge'); var _deepmerge2 = _interopRequireDefault(_deepmerge);
280
-
281
-
282
- var ANNOTATION_MAX_WIDTH = 125;
283
- var ANNOTATION_INIT_HEIGHT = 100;
284
- var getLabelPosition = ({
285
- subjectType,
286
- x,
287
- xMax,
288
- y,
289
- yMin,
290
- yMax,
291
- maxWidth,
292
- height
293
- }) => {
294
- const annotationMaxWidth = _nullishCoalesce(maxWidth, () => ( ANNOTATION_MAX_WIDTH));
295
- const annotationHeight = _nullishCoalesce(height, () => ( ANNOTATION_INIT_HEIGHT));
296
- let dx = 15;
297
- let dy = 15;
298
- let isFlippedHorizontally = false;
299
- let isFlippedVertically = false;
300
- if (subjectType === "line-horizontal") {
301
- dx = 0;
302
- dy = 20;
303
- }
304
- if (subjectType === "line-vertical") {
305
- dx = 20;
306
- dy = 0;
307
- }
308
- const effectiveX = x + dx;
309
- if (effectiveX + annotationMaxWidth > xMax) {
310
- isFlippedHorizontally = true;
311
- if (subjectType === "circle") {
312
- dx = -dx;
313
- } else if (subjectType === "line-vertical") {
314
- dx = -20;
315
- }
316
- }
317
- if (subjectType === "circle") {
318
- if (y + dy + annotationHeight > yMin) {
319
- isFlippedVertically = true;
320
- dy = -Math.abs(dy);
321
- }
322
- } else if (y - annotationHeight < yMax) {
323
- if (subjectType === "line-horizontal") {
324
- isFlippedVertically = true;
325
- dy = Math.abs(dy);
326
- } else if (subjectType === "line-vertical") {
327
- isFlippedVertically = true;
328
- }
329
- } else if (y + annotationHeight > yMin) {
330
- if (subjectType === "line-horizontal") {
331
- isFlippedVertically = true;
332
- dy = -Math.abs(dy);
333
- } else if (subjectType === "line-vertical") {
334
- isFlippedVertically = true;
335
- }
336
- }
337
- return {
338
- dx,
339
- dy,
340
- isFlippedHorizontally,
341
- isFlippedVertically
342
- };
343
- };
344
- var getHorizontalAnchor = (subjectType, isFlippedHorizontally) => {
345
- if (subjectType === "line-horizontal") {
346
- return isFlippedHorizontally ? "end" : "start";
347
- }
348
- return void 0;
349
- };
350
- var getVerticalAnchor = (subjectType, isFlippedVertically, y, yMax, height) => {
351
- if (subjectType === "line-vertical") {
352
- if (isFlippedVertically) {
353
- return y - height < yMax ? "start" : "end";
354
- }
355
- return "start";
356
- }
357
- return void 0;
358
- };
359
- var LineChartAnnotation = ({
360
- datum,
361
- title,
362
- subtitle,
363
- subjectType = "circle",
364
- styles: datumStyles,
365
- testId,
366
- renderLabel,
367
- renderLabelPopover
368
- }) => {
369
- const providerTheme = _chunkWYK7EL5Rcjs.useGlobalChartsTheme.call(void 0, );
370
- const {
371
- xScale,
372
- yScale
373
- } = _react.useContext.call(void 0, _xychart.DataContext) || {};
374
- const labelRef = _react.useRef.call(void 0, null);
375
- const [height, setHeight] = _react.useState.call(void 0, null);
376
- const styles = _deepmerge2.default.call(void 0, _nullishCoalesce(providerTheme.annotationStyles, () => ( {})), _nullishCoalesce(datumStyles, () => ( {})));
377
- _react.useEffect.call(void 0, () => {
378
- if (_optionalChain([labelRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.getBBox])) {
379
- const bbox = labelRef.current.getBBox();
380
- setHeight(bbox.height);
381
- }
382
- }, []);
383
- const positionData = _react.useMemo.call(void 0, () => {
384
- if (!datum || !datum.date || datum.value == null || !xScale || !yScale) return null;
385
- const x2 = xScale(datum.date);
386
- const y2 = yScale(datum.value);
387
- if (typeof x2 !== "number" || typeof y2 !== "number") return null;
388
- const [yMin2, yMax2] = yScale.range().map(Number);
389
- const [xMin2, xMax2] = xScale.range().map(Number);
390
- if (renderLabel) {
391
- return {
392
- x: x2,
393
- dx: 0,
394
- y: y2,
395
- dy: 0,
396
- yMin: yMin2,
397
- yMax: yMax2,
398
- xMin: xMin2,
399
- xMax: xMax2,
400
- isFlippedHorizontally: false,
401
- isFlippedVertically: false
402
- };
403
- }
404
- const position = getLabelPosition({
405
- subjectType,
406
- x: x2,
407
- xMax: xMax2,
408
- y: y2,
409
- yMin: yMin2,
410
- yMax: yMax2,
411
- maxWidth: _optionalChain([styles, 'optionalAccess', _5 => _5.label, 'optionalAccess', _6 => _6.maxWidth]),
412
- height
413
- });
414
- return {
415
- x: x2,
416
- y: y2,
417
- yMin: yMin2,
418
- yMax: yMax2,
419
- xMin: xMin2,
420
- xMax: xMax2,
421
- ...position
422
- };
423
- }, [datum, xScale, yScale, subjectType, _optionalChain([styles, 'optionalAccess', _7 => _7.label, 'optionalAccess', _8 => _8.maxWidth]), height, renderLabel]);
424
- if (!positionData) return null;
425
- const {
426
- x,
427
- y,
428
- yMin,
429
- yMax,
430
- xMin,
431
- xMax,
432
- dx,
433
- dy,
434
- isFlippedHorizontally,
435
- isFlippedVertically
436
- } = positionData;
437
- const getLabelY = () => {
438
- const labelY = _optionalChain([styles, 'optionalAccess', _9 => _9.label, 'optionalAccess', _10 => _10.y]);
439
- if (labelY === "start") return yMax;
440
- if (labelY === "end") return yMin;
441
- return labelY;
442
- };
443
- const getLabelX = () => {
444
- const labelX = _optionalChain([styles, 'optionalAccess', _11 => _11.label, 'optionalAccess', _12 => _12.x]);
445
- if (labelX === "start") return xMin;
446
- if (labelX === "end") return xMax;
447
- return labelX;
448
- };
449
- const labelPosition = {
450
- x: getLabelX(),
451
- y: getLabelY()
452
- };
453
- const getSafariHTMLLabelPosition = () => {
454
- const labelWidth = POPOVER_BUTTON_SIZE;
455
- const labelHeight = POPOVER_BUTTON_SIZE;
456
- return _chunkMXGLYWVPcjs.isSafari.call(void 0, ) ? {
457
- transform: `translate(${x + (dx || 0) + (typeof labelPosition.x === "number" ? labelPosition.x - x : 0) - labelWidth}px, ${y + (dy || 0) + (typeof labelPosition.y === "number" ? labelPosition.y - y : 0) - labelHeight}px)`,
458
- width: labelWidth,
459
- height: labelHeight
460
- } : void 0;
461
- };
462
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", {
463
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _annotation.Annotation, {
464
- x,
465
- y,
466
- dx,
467
- dy,
468
- children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.Connector, {
469
- ..._optionalChain([styles, 'optionalAccess', _13 => _13.connector])
470
- }), subjectType === "circle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.CircleSubject, {
471
- ..._optionalChain([styles, 'optionalAccess', _14 => _14.circleSubject])
472
- }), subjectType === "line-vertical" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.LineSubject, {
473
- min: yMax,
474
- max: yMin,
475
- ..._optionalChain([styles, 'optionalAccess', _15 => _15.lineSubject]),
476
- orientation: "vertical"
477
- }), subjectType === "line-horizontal" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.LineSubject, {
478
- min: xMin,
479
- max: xMax,
480
- ..._optionalChain([styles, 'optionalAccess', _16 => _16.lineSubject]),
481
- orientation: "horizontal"
482
- }), renderLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.HtmlLabel, {
483
- ..._optionalChain([styles, 'optionalAccess', _17 => _17.label]),
484
- ...labelPosition,
485
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
486
- style: getSafariHTMLLabelPosition(),
487
- children: renderLabelPopover ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, line_chart_annotation_label_popover_default, {
488
- title,
489
- subtitle,
490
- renderLabel,
491
- renderLabelPopover
492
- }) : renderLabel({
493
- title,
494
- subtitle
495
- })
496
- })
497
- }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "g", {
498
- ref: labelRef,
499
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _annotation.Label, {
500
- title,
501
- subtitle,
502
- ..._optionalChain([styles, 'optionalAccess', _18 => _18.label]),
503
- ...labelPosition,
504
- horizontalAnchor: getHorizontalAnchor(subjectType, isFlippedHorizontally),
505
- verticalAnchor: getVerticalAnchor(subjectType, isFlippedVertically, y, yMax, _nullishCoalesce(height, () => ( ANNOTATION_INIT_HEIGHT)))
506
- })
507
- })]
508
- })
509
- });
510
- };
511
- var line_chart_annotation_default = LineChartAnnotation;
512
-
513
- // src/charts/line-chart/private/line-chart-glyph.tsx
514
-
515
-
516
- var toNumber = (val) => {
517
- const num = typeof val === "number" ? val : parseFloat(val);
518
- return isNaN(num) ? void 0 : num;
519
- };
520
- var LineChartGlyph = ({
521
- data,
522
- index,
523
- color,
524
- glyphStyle,
525
- renderGlyph,
526
- accessors,
527
- position
528
- }) => {
529
- const {
530
- xScale,
531
- yScale
532
- } = _react.useContext.call(void 0, _xychart.DataContext) || {};
533
- if (!xScale || !yScale) return null;
534
- if (data.data.length === 0) return null;
535
- const point = position === "start" ? data.data[0] : data.data[data.data.length - 1];
536
- const x = xScale(accessors.xAccessor(point));
537
- const y = yScale(accessors.yAccessor(point));
538
- if (typeof x !== "number" || typeof y !== "number") return null;
539
- const size = Math.max(0, _nullishCoalesce(toNumber(_optionalChain([glyphStyle, 'optionalAccess', _19 => _19.radius])), () => ( 4)));
540
- return renderGlyph({
541
- key: `${position}-glyph-${data.label}`,
542
- index,
543
- datum: point,
544
- color,
545
- size,
546
- x,
547
- y,
548
- glyphStyle,
549
- position
550
- });
551
- };
552
- var line_chart_glyph_default = LineChartGlyph;
553
-
554
- // src/charts/line-chart/line-chart.tsx
555
-
556
- var X_TICK_WIDTH = 60;
557
- var defaultRenderGlyph = (props) => {
558
- return /* @__PURE__ */ _react.createElement.call(void 0, DefaultGlyph, {
559
- ...props,
560
- key: props.key
561
- });
562
- };
563
- var toNumber2 = (val) => {
564
- const num = typeof val === "number" ? val : parseFloat(val);
565
- return isNaN(num) ? void 0 : num;
566
- };
567
- var getCurveType = (type, smoothing) => {
568
- if (!type) {
569
- return smoothing ? _curve.curveCatmullRom : _curve.curveLinear;
570
- }
571
- switch (type) {
572
- case "smooth":
573
- return _curve.curveCatmullRom;
574
- case "monotone":
575
- return _curve.curveMonotoneX;
576
- case "linear":
577
- return _curve.curveLinear;
578
- default:
579
- return _curve.curveLinear;
580
- }
581
- };
582
- var renderDefaultTooltip = (params) => {
583
- const {
584
- tooltipData
585
- } = params;
586
- const nearestDatum = _optionalChain([tooltipData, 'optionalAccess', _20 => _20.nearestDatum, 'optionalAccess', _21 => _21.datum]);
587
- if (!nearestDatum) return null;
588
- const tooltipPoints = Object.entries(_optionalChain([tooltipData, 'optionalAccess', _22 => _22.datumByKey]) || {}).map(([key, {
589
- datum
590
- }]) => ({
591
- key,
592
- value: datum.value
593
- })).sort((a, b) => b.value - a.value);
594
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
595
- className: line_chart_module_default["line-chart__tooltip"],
596
- children: [/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
597
- className: line_chart_module_default["line-chart__tooltip-date"],
598
- children: _optionalChain([nearestDatum, 'access', _23 => _23.date, 'optionalAccess', _24 => _24.toLocaleDateString, 'call', _25 => _25()])
599
- }), tooltipPoints.map((point) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", {
600
- className: line_chart_module_default["line-chart__tooltip-row"],
601
- children: [/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", {
602
- className: line_chart_module_default["line-chart__tooltip-label"],
603
- children: [point.key, ":"]
604
- }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {
605
- className: line_chart_module_default["line-chart__tooltip-value"],
606
- children: _numberformatters.formatNumber.call(void 0, point.value)
607
- })]
608
- }, point.key))]
609
- });
610
- };
611
- var formatYearTick = (timestamp) => {
612
- const date = new Date(timestamp);
613
- return date.toLocaleDateString(void 0, {
614
- year: "numeric"
615
- });
616
- };
617
- var formatDateTick = (timestamp) => {
618
- const date = new Date(timestamp);
619
- return date.toLocaleDateString(void 0, {
620
- month: "short",
621
- day: "numeric"
622
- });
623
- };
624
- var formatHourTick = (timestamp) => {
625
- const date = new Date(timestamp);
626
- return date.toLocaleTimeString(void 0, {
627
- hour: "numeric",
628
- hour12: true
629
- });
630
- };
631
- var getFormatter = (sortedData) => {
632
- const minX = Math.min(...sortedData.map((datom) => _optionalChain([datom, 'access', _26 => _26.data, 'access', _27 => _27.at, 'call', _28 => _28(0), 'optionalAccess', _29 => _29.date])));
633
- const maxX = Math.max(...sortedData.map((datom) => _optionalChain([datom, 'access', _30 => _30.data, 'access', _31 => _31.at, 'call', _32 => _32(-1), 'optionalAccess', _33 => _33.date])));
634
- const diffInHours = Math.abs(_datefns.differenceInHours.call(void 0, maxX, minX));
635
- if (diffInHours <= 24) {
636
- return formatHourTick;
637
- }
638
- const diffInYears = Math.abs(_datefns.differenceInYears.call(void 0, maxX, minX));
639
- if (diffInYears <= 1) {
640
- return formatDateTick;
641
- }
642
- return formatYearTick;
643
- };
644
- var guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
645
- const minX = Math.min(...data.map((datom) => _optionalChain([datom, 'access', _34 => _34.data, 'access', _35 => _35.at, 'call', _36 => _36(0), 'optionalAccess', _37 => _37.date])));
646
- const maxX = Math.max(...data.map((datom) => _optionalChain([datom, 'access', _38 => _38.data, 'access', _39 => _39.at, 'call', _40 => _40(-1), 'optionalAccess', _41 => _41.date])));
647
- const xScale = _scale.scaleTime.call(void 0, {
648
- domain: [minX, maxX]
649
- });
650
- const upperBound = Math.min(
651
- _optionalChain([data, 'access', _42 => _42[0], 'optionalAccess', _43 => _43.data, 'access', _44 => _44.length]) || 3,
652
- // A sane fallback to avoid NaN when no data is present
653
- Math.ceil(chartWidth / X_TICK_WIDTH)
654
- );
655
- let secondBestGuess = 1;
656
- for (let numTicks = upperBound; numTicks > 1; --numTicks) {
657
- const ticks = xScale.ticks(numTicks).map((d) => tickFormatter(d.getTime()));
658
- if (ticks.length > upperBound) {
659
- continue;
660
- }
661
- secondBestGuess = Math.max(secondBestGuess, ticks.length);
662
- const uniqueTicks = Array.from(new Set(ticks));
663
- if (uniqueTicks.length === 1) {
664
- return 1;
665
- }
666
- const hasConsecutiveDuplicate = ticks.some((tick, idx) => idx > 0 && tick === ticks[idx - 1]);
667
- if (hasConsecutiveDuplicate) {
668
- continue;
669
- }
670
- return ticks.length;
671
- }
672
- return secondBestGuess;
673
- };
674
- var validateData = (data) => {
675
- if (!_optionalChain([data, 'optionalAccess', _45 => _45.length])) return "No data available";
676
- const hasInvalidData = data.some((series) => series.data.some((point) => isNaN(point.value) || point.value === null || point.value === void 0 || "date" in point && point.date && isNaN(point.date.getTime())));
677
- if (hasInvalidData) return "Invalid data";
678
- return null;
679
- };
680
- var LineChartScalesRef = ({
681
- chartRef,
682
- width,
683
- height,
684
- margin
685
- }) => {
686
- const context = _react.useContext.call(void 0, _xychart.DataContext);
687
- _react.useImperativeHandle.call(void 0, chartRef, () => ({
688
- getScales: () => {
689
- if (!_optionalChain([context, 'optionalAccess', _46 => _46.xScale]) || !_optionalChain([context, 'optionalAccess', _47 => _47.yScale])) {
690
- return null;
691
- }
692
- return {
693
- xScale: context.xScale,
694
- yScale: context.yScale
695
- };
696
- },
697
- getChartDimensions: () => ({
698
- width,
699
- height,
700
- margin: margin || {}
701
- })
702
- }), [context, width, height, margin]);
703
- return null;
704
- };
705
- var LineChartInternal = /* @__PURE__ */ _react.forwardRef.call(void 0, ({
706
- data,
707
- chartId: providedChartId,
708
- width,
709
- height,
710
- className,
711
- margin,
712
- withTooltips = true,
713
- withTooltipCrosshairs,
714
- showLegend = false,
715
- legend = {},
716
- renderGlyph = defaultRenderGlyph,
717
- glyphStyle = {},
718
- withLegendGlyph = false,
719
- withGradientFill = false,
720
- smoothing = true,
721
- curveType,
722
- renderTooltip = renderDefaultTooltip,
723
- withStartGlyphs = false,
724
- withEndGlyphs = false,
725
- animation,
726
- options = {},
727
- onPointerDown = void 0,
728
- onPointerUp = void 0,
729
- onPointerMove = void 0,
730
- onPointerOut = void 0,
731
- children,
732
- gridVisibility,
733
- gap = "md"
734
- }, ref) => {
735
- const legendInteractive = _nullishCoalesce(legend.interactive, () => ( false));
736
- const legendShape = _nullishCoalesce(legend.shape, () => ( "line"));
737
- const legendPosition = _nullishCoalesce(legend.position, () => ( "bottom"));
738
- const providerTheme = _chunkWYK7EL5Rcjs.useGlobalChartsTheme.call(void 0, );
739
- const theme = _chunkWYK7EL5Rcjs.useXYChartTheme.call(void 0, data);
740
- const chartId = _chunkWYK7EL5Rcjs.useChartId.call(void 0, providedChartId);
741
- const [svgWrapperRef, , svgWrapperHeight] = _chunkWYK7EL5Rcjs.useElementSize.call(void 0, );
742
- const chartRef = _react.useRef.call(void 0, null);
743
- const [selectedIndex, setSelectedIndex] = _react.useState.call(void 0, void 0);
744
- const [isNavigating, setIsNavigating] = _react.useState.call(void 0, false);
745
- const internalChartRef = _react.useRef.call(void 0, null);
746
- const {
747
- legendChildren,
748
- nonLegendChildren
749
- } = _chunkTZRUHQOHcjs.useChartChildren.call(void 0, children, "LineChart");
750
- const hasLegendChild = legendChildren.length > 0;
751
- const chartHeight = svgWrapperHeight > 0 ? svgWrapperHeight : height;
752
- const hasLegend = showLegend || hasLegendChild;
753
- const isWaitingForMeasurement = hasLegend ? svgWrapperHeight === 0 : !chartHeight;
754
- _react.useImperativeHandle.call(void 0, ref, () => ({
755
- getScales: () => _optionalChain([internalChartRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.getScales, 'call', _50 => _50()]) || null,
756
- getChartDimensions: () => _optionalChain([internalChartRef, 'access', _51 => _51.current, 'optionalAccess', _52 => _52.getChartDimensions, 'call', _53 => _53()]) || {
757
- width: 0,
758
- height: 0,
759
- margin: {}
760
- }
761
- }), [internalChartRef]);
762
- const dataSorted = _chunkWYK7EL5Rcjs.useChartDataTransform.call(void 0, data);
763
- const {
764
- getElementStyles,
765
- isSeriesVisible
766
- } = _chunkWYK7EL5Rcjs.useGlobalChartsContext.call(void 0, );
767
- const seriesWithVisibility = _react.useMemo.call(void 0, () => {
768
- if (!chartId || !legendInteractive) {
769
- return dataSorted.map((series, index) => ({
770
- series,
771
- index,
772
- isVisible: true
773
- }));
774
- }
775
- return dataSorted.map((series, index) => ({
776
- series,
777
- index,
778
- isVisible: isSeriesVisible(chartId, series.label)
779
- }));
780
- }, [dataSorted, chartId, isSeriesVisible, legendInteractive]);
781
- const allSeriesHidden = _react.useMemo.call(void 0, () => {
782
- return seriesWithVisibility.every(({
783
- isVisible
784
- }) => !isVisible);
785
- }, [seriesWithVisibility]);
786
- const {
787
- tooltipRef,
788
- onChartFocus,
789
- onChartBlur,
790
- onChartKeyDown
791
- } = _chunkY3NNQMAXcjs.useKeyboardNavigation.call(void 0, {
792
- selectedIndex,
793
- setSelectedIndex,
794
- isNavigating,
795
- setIsNavigating,
796
- chartRef,
797
- totalPoints: _optionalChain([dataSorted, 'access', _54 => _54[0], 'optionalAccess', _55 => _55.data, 'access', _56 => _56.length]) || 0
798
- });
799
- const chartOptions = _react.useMemo.call(void 0, () => {
800
- const formatter = _optionalChain([options, 'optionalAccess', _57 => _57.axis, 'optionalAccess', _58 => _58.x, 'optionalAccess', _59 => _59.tickFormat]) || getFormatter(dataSorted);
801
- return {
802
- axis: {
803
- x: {
804
- orientation: "bottom",
805
- numTicks: guessOptimalNumTicks(dataSorted, width, formatter),
806
- tickFormat: formatter,
807
- display: true,
808
- ..._optionalChain([options, 'optionalAccess', _60 => _60.axis, 'optionalAccess', _61 => _61.x])
809
- },
810
- y: {
811
- orientation: "left",
812
- numTicks: 4,
813
- tickFormat: _numberformatters.formatNumberCompact,
814
- display: true,
815
- ..._optionalChain([options, 'optionalAccess', _62 => _62.axis, 'optionalAccess', _63 => _63.y])
816
- }
817
- },
818
- xScale: {
819
- type: "time",
820
- ..._optionalChain([options, 'optionalAccess', _64 => _64.xScale])
821
- },
822
- yScale: {
823
- type: "linear",
824
- nice: true,
825
- zero: false,
826
- ..._optionalChain([options, 'optionalAccess', _65 => _65.yScale])
827
- }
828
- };
829
- }, [options, dataSorted, width]);
830
- const tooltipRenderGlyph = _react.useMemo.call(void 0, () => {
831
- return (props) => {
832
- const seriesIndex = dataSorted.findIndex((series) => series.label === props.key || series.data.includes(props.datum));
833
- const seriesData = dataSorted[seriesIndex];
834
- const {
835
- color,
836
- glyph: themeGlyph
837
- } = getElementStyles({
838
- data: seriesData,
839
- index: seriesIndex
840
- });
841
- const propsWithResolvedColor = {
842
- ...props,
843
- color
844
- };
845
- return themeGlyph ? themeGlyph(propsWithResolvedColor) : renderGlyph(propsWithResolvedColor);
846
- };
847
- }, [dataSorted, renderGlyph, getElementStyles]);
848
- const defaultMargin = _chunkWYK7EL5Rcjs.useChartMargin.call(void 0, height, chartOptions, dataSorted, theme);
849
- const error = validateData(dataSorted);
850
- const isDataValid = !error;
851
- const legendOptions = _react.useMemo.call(void 0, () => ({
852
- withGlyph: withLegendGlyph,
853
- glyphSize: Math.max(0, _nullishCoalesce(toNumber2(_optionalChain([glyphStyle, 'optionalAccess', _66 => _66.radius])), () => ( 4))),
854
- renderGlyph
855
- }), [withLegendGlyph, _optionalChain([glyphStyle, 'optionalAccess', _67 => _67.radius]), renderGlyph]);
856
- const legendItems = _chunkXVBH5XHEcjs.useChartLegendItems.call(void 0, dataSorted, legendOptions, legendShape);
857
- const chartMetadata = _react.useMemo.call(void 0, () => ({
858
- withGradientFill,
859
- smoothing,
860
- curveType,
861
- withStartGlyphs,
862
- withEndGlyphs,
863
- withLegendGlyph
864
- }), [withGradientFill, smoothing, curveType, withStartGlyphs, withEndGlyphs, withLegendGlyph]);
865
- _chunkWYK7EL5Rcjs.useChartRegistration.call(void 0, {
866
- chartId,
867
- legendItems,
868
- chartType: "line",
869
- isDataValid,
870
- metadata: chartMetadata
871
- });
872
- const prefersReducedMotion = _chunkWYK7EL5Rcjs.usePrefersReducedMotion.call(void 0, );
873
- const accessors = {
874
- xAccessor: (d) => _optionalChain([d, 'optionalAccess', _68 => _68.date]),
875
- yAccessor: (d) => _optionalChain([d, 'optionalAccess', _69 => _69.value])
876
- };
877
- if (error) {
878
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
879
- className: _clsx2.default.call(void 0, "line-chart", line_chart_module_default["line-chart"]),
880
- children: error
881
- });
882
- }
883
- const legendElement = showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXVBH5XHEcjs.Legend, {
884
- orientation: _nullishCoalesce(legend.orientation, () => ( "horizontal")),
885
- alignment: _nullishCoalesce(legend.alignment, () => ( "center")),
886
- position: legendPosition,
887
- labelStyles: legend.labelStyles,
888
- itemClassName: legend.itemClassName,
889
- itemStyles: legend.itemStyles,
890
- shapeStyles: legend.shapeStyles,
891
- className: line_chart_module_default["line-chart__legend"],
892
- shape: legendShape,
893
- chartId,
894
- interactive: legendInteractive
895
- });
896
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXVBH5XHEcjs.SingleChartContext.Provider, {
897
- value: {
898
- chartId,
899
- chartRef: internalChartRef,
900
- chartWidth: width,
901
- chartHeight
902
- },
903
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkREZTQ4PHcjs.Stack, {
904
- direction: "column",
905
- gap,
906
- className: _clsx2.default.call(void 0, "line-chart", line_chart_module_default["line-chart"], {
907
- [line_chart_module_default["line-chart--animated"]]: animation && !prefersReducedMotion
908
- }, className),
909
- style: {
910
- width,
911
- height,
912
- visibility: isWaitingForMeasurement ? "hidden" : "visible"
913
- },
914
- children: [legendPosition === "top" && legendElement, _chunkTZRUHQOHcjs.renderLegendSlot.call(void 0, legendChildren, "top"), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
915
- className: line_chart_module_default["line-chart__svg-wrapper"],
916
- ref: svgWrapperRef,
917
- role: "grid",
918
- "aria-label": _i18n.__.call(void 0, "Line chart", "jetpack-charts"),
919
- tabIndex: 0,
920
- onKeyDown: onChartKeyDown,
921
- onFocus: onChartFocus,
922
- onBlur: onChartBlur,
923
- children: !isWaitingForMeasurement && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {
924
- ref: chartRef,
925
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _xychart.XYChart, {
926
- theme,
927
- width,
928
- height: chartHeight,
929
- margin: {
930
- ...defaultMargin,
931
- ...margin
932
- },
933
- xScale: chartOptions.xScale,
934
- yScale: chartOptions.yScale,
935
- onPointerDown,
936
- onPointerUp,
937
- onPointerMove,
938
- onPointerOut,
939
- pointerEventsDataKey: "nearest",
940
- children: [gridVisibility !== "none" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Grid, {
941
- columns: false,
942
- numTicks: 4
943
- }), chartOptions.axis.x.display && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, {
944
- ...chartOptions.axis.x
945
- }), chartOptions.axis.y.display && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.Axis, {
946
- ...chartOptions.axis.y
947
- }), allSeriesHidden ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", {
948
- x: width / 2,
949
- y: chartHeight / 2,
950
- textAnchor: "middle",
951
- fill: _optionalChain([providerTheme, 'access', _70 => _70.gridStyles, 'optionalAccess', _71 => _71.stroke]) || "#ccc",
952
- fontSize: "14",
953
- fontFamily: "-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif",
954
- children: _i18n.__.call(void 0, "All series are hidden. Click legend items to show data.", "jetpack-charts")
955
- }) : null, seriesWithVisibility.map(({
956
- series: seriesData,
957
- index,
958
- isVisible
959
- }) => {
960
- if (!isVisible) {
961
- return null;
962
- }
963
- const {
964
- color,
965
- lineStyles,
966
- glyph
967
- } = getElementStyles({
968
- data: seriesData,
969
- index
970
- });
971
- const lineProps = {
972
- stroke: color,
973
- ...lineStyles
974
- };
975
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", {
976
- children: [withGradientFill && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _gradient.LinearGradient, {
977
- id: `area-gradient-${chartId}-${index + 1}`,
978
- from: color,
979
- fromOpacity: 0.4,
980
- toOpacity: 0.1,
981
- to: providerTheme.backgroundColor,
982
- ..._optionalChain([seriesData, 'access', _72 => _72.options, 'optionalAccess', _73 => _73.gradient]),
983
- children: _optionalChain([seriesData, 'access', _74 => _74.options, 'optionalAccess', _75 => _75.gradient, 'optionalAccess', _76 => _76.stops, 'optionalAccess', _77 => _77.map, 'call', _78 => _78((stop, stopIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", {
984
- offset: stop.offset,
985
- stopColor: stop.color || color,
986
- stopOpacity: _nullishCoalesce(stop.opacity, () => ( 1))
987
- }, `${stop.offset}-${stop.color || color}`))])
988
- }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _xychart.AreaSeries, {
989
- dataKey: _optionalChain([seriesData, 'optionalAccess', _79 => _79.label]),
990
- data: seriesData.data,
991
- ...accessors,
992
- fill: withGradientFill ? `url(#area-gradient-${chartId}-${index + 1})` : "transparent",
993
- renderLine: true,
994
- curve: getCurveType(curveType, smoothing),
995
- lineProps
996
- }, _optionalChain([seriesData, 'optionalAccess', _80 => _80.label])), withStartGlyphs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, line_chart_glyph_default, {
997
- index,
998
- data: seriesData,
999
- color,
1000
- renderGlyph: _nullishCoalesce(glyph, () => ( renderGlyph)),
1001
- accessors,
1002
- glyphStyle,
1003
- position: "start"
1004
- }), withEndGlyphs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, line_chart_glyph_default, {
1005
- index,
1006
- data: seriesData,
1007
- color,
1008
- renderGlyph: _nullishCoalesce(glyph, () => ( renderGlyph)),
1009
- accessors,
1010
- glyphStyle,
1011
- position: "end"
1012
- })]
1013
- }, _optionalChain([seriesData, 'optionalAccess', _81 => _81.label]) || index);
1014
- }), withTooltips && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkY3NNQMAXcjs.AccessibleTooltip, {
1015
- detectBounds: true,
1016
- snapTooltipToDatumX: true,
1017
- snapTooltipToDatumY: true,
1018
- showSeriesGlyphs: true,
1019
- renderTooltip,
1020
- renderGlyph: tooltipRenderGlyph,
1021
- glyphStyle,
1022
- showVerticalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _82 => _82.showVertical]),
1023
- showHorizontalCrosshair: _optionalChain([withTooltipCrosshairs, 'optionalAccess', _83 => _83.showHorizontal]),
1024
- selectedIndex,
1025
- tooltipRef,
1026
- keyboardFocusedClassName: line_chart_module_default["line-chart__tooltip--keyboard-focused"],
1027
- series: dataSorted
1028
- }), /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LineChartScalesRef, {
1029
- chartRef: internalChartRef,
1030
- width,
1031
- height,
1032
- margin
1033
- })]
1034
- })
1035
- })
1036
- }), legendPosition === "bottom" && legendElement, _chunkTZRUHQOHcjs.renderLegendSlot.call(void 0, legendChildren, "bottom"), nonLegendChildren]
1037
- })
1038
- });
1039
- });
1040
- var LineChartWithProvider = /* @__PURE__ */ _react.forwardRef.call(void 0, (props, ref) => {
1041
- const existingContext = _react.useContext.call(void 0, _chunkWYK7EL5Rcjs.GlobalChartsContext);
1042
- if (existingContext) {
1043
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LineChartInternal, {
1044
- ...props,
1045
- ref
1046
- });
1047
- }
1048
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWYK7EL5Rcjs.GlobalChartsProvider, {
1049
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LineChartInternal, {
1050
- ...props,
1051
- ref
1052
- })
1053
- });
1054
- });
1055
- LineChartWithProvider.displayName = "LineChart";
1056
- var LineChart = _chunkMXGLYWVPcjs.attachSubComponents.call(void 0, LineChartWithProvider, {
1057
- Legend: _chunkXVBH5XHEcjs.Legend,
1058
- AnnotationsOverlay: line_chart_annotations_overlay_default,
1059
- Annotation: line_chart_annotation_default
1060
- });
1061
- var LineChartResponsive = _chunkMXGLYWVPcjs.attachSubComponents.call(void 0, _chunkASLARV7Lcjs.withResponsive.call(void 0, LineChartWithProvider), {
1062
- Legend: _chunkXVBH5XHEcjs.Legend,
1063
- AnnotationsOverlay: line_chart_annotations_overlay_default,
1064
- Annotation: line_chart_annotation_default
1065
- });
1066
-
1067
-
1068
-
1069
-
1070
- exports.LineChart = LineChart; exports.LineChartResponsive = LineChartResponsive;
1071
- //# sourceMappingURL=chunk-CPPXJATQ.cjs.map