@automattic/charts 0.57.0 → 0.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (267) hide show
  1. package/CHANGELOG.md +36 -2
  2. package/README.md +7 -54
  3. package/dist/index.cjs +9607 -21
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +32 -49
  6. package/dist/index.css.map +1 -1
  7. package/dist/index.d.cts +1612 -33
  8. package/dist/index.d.ts +1612 -33
  9. package/dist/index.js +9640 -54
  10. package/dist/index.js.map +1 -1
  11. package/package.json +9 -126
  12. package/src/charts/bar-chart/bar-chart.module.scss +0 -5
  13. package/src/charts/bar-chart/bar-chart.tsx +142 -149
  14. package/src/charts/bar-chart/test/bar-chart.test.tsx +48 -31
  15. package/src/charts/leaderboard-chart/leaderboard-chart.tsx +54 -74
  16. package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx +4 -5
  17. package/src/charts/leaderboard-chart/types.ts +1 -11
  18. package/src/charts/line-chart/line-chart.module.scss +0 -5
  19. package/src/charts/line-chart/line-chart.tsx +202 -193
  20. package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx +1 -2
  21. package/src/charts/line-chart/test/line-chart.test.tsx +49 -27
  22. package/src/charts/line-chart/types.ts +0 -1
  23. package/src/charts/pie-chart/pie-chart.module.scss +2 -10
  24. package/src/charts/pie-chart/pie-chart.tsx +212 -212
  25. package/src/charts/pie-chart/test/composition-api.test.tsx +44 -3
  26. package/src/charts/pie-chart/test/pie-chart.test.tsx +51 -44
  27. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss +2 -8
  28. package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx +166 -168
  29. package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx +58 -30
  30. package/src/charts/private/chart-composition/index.ts +2 -0
  31. package/src/charts/private/chart-composition/render-legend-slot.ts +22 -0
  32. package/src/charts/private/chart-composition/test/render-legend-slot.test.tsx +60 -0
  33. package/src/charts/private/chart-composition/test/use-chart-children.test.tsx +91 -0
  34. package/src/charts/private/chart-composition/use-chart-children.ts +34 -2
  35. package/src/charts/private/chart-layout/chart-layout.module.scss +7 -0
  36. package/src/charts/private/chart-layout/chart-layout.tsx +106 -0
  37. package/src/charts/private/chart-layout/index.ts +2 -0
  38. package/src/charts/private/chart-layout/test/chart-layout.test.tsx +167 -0
  39. package/src/charts/private/single-chart-context/single-chart-context.tsx +2 -2
  40. package/src/charts/private/svg-empty-state/index.ts +1 -0
  41. package/src/charts/private/svg-empty-state/svg-empty-state.module.scss +7 -0
  42. package/src/charts/private/svg-empty-state/svg-empty-state.tsx +40 -0
  43. package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx +12 -8
  44. package/src/components/legend/hooks/use-chart-legend-items.ts +12 -13
  45. package/src/components/legend/index.ts +1 -8
  46. package/src/components/legend/legend.tsx +33 -8
  47. package/src/components/legend/private/base-legend.module.scss +19 -37
  48. package/src/components/legend/private/base-legend.tsx +0 -2
  49. package/src/components/legend/test/legend.test.tsx +93 -1
  50. package/src/components/legend/types.ts +7 -34
  51. package/src/hooks/index.ts +1 -1
  52. package/src/hooks/use-data-with-percentages.ts +24 -0
  53. package/src/hooks/use-interactive-legend-data.ts +18 -15
  54. package/src/index.ts +66 -9
  55. package/src/providers/chart-context/global-charts-provider.tsx +7 -1
  56. package/src/providers/chart-context/hooks/use-chart-registration.ts +2 -1
  57. package/src/providers/chart-context/types.ts +2 -2
  58. package/src/types.ts +110 -45
  59. package/src/utils/date-parsing.ts +10 -1
  60. package/src/utils/test/date-parsing.test.ts +12 -0
  61. package/src/utils/test/resolve-css-var.test.ts +4 -2
  62. package/tsup.config.ts +1 -1
  63. package/dist/base-tooltip-DOq93wjU.d.cts +0 -38
  64. package/dist/base-tooltip-DOq93wjU.d.ts +0 -38
  65. package/dist/charts/bar-chart/index.cjs +0 -15
  66. package/dist/charts/bar-chart/index.cjs.map +0 -1
  67. package/dist/charts/bar-chart/index.css +0 -153
  68. package/dist/charts/bar-chart/index.css.map +0 -1
  69. package/dist/charts/bar-chart/index.d.cts +0 -37
  70. package/dist/charts/bar-chart/index.d.ts +0 -37
  71. package/dist/charts/bar-chart/index.js +0 -15
  72. package/dist/charts/bar-chart/index.js.map +0 -1
  73. package/dist/charts/bar-list-chart/index.cjs +0 -16
  74. package/dist/charts/bar-list-chart/index.cjs.map +0 -1
  75. package/dist/charts/bar-list-chart/index.css +0 -153
  76. package/dist/charts/bar-list-chart/index.css.map +0 -1
  77. package/dist/charts/bar-list-chart/index.d.cts +0 -92
  78. package/dist/charts/bar-list-chart/index.d.ts +0 -92
  79. package/dist/charts/bar-list-chart/index.js +0 -16
  80. package/dist/charts/bar-list-chart/index.js.map +0 -1
  81. package/dist/charts/conversion-funnel-chart/index.cjs +0 -11
  82. package/dist/charts/conversion-funnel-chart/index.cjs.map +0 -1
  83. package/dist/charts/conversion-funnel-chart/index.css +0 -251
  84. package/dist/charts/conversion-funnel-chart/index.css.map +0 -1
  85. package/dist/charts/conversion-funnel-chart/index.d.cts +0 -97
  86. package/dist/charts/conversion-funnel-chart/index.d.ts +0 -97
  87. package/dist/charts/conversion-funnel-chart/index.js +0 -11
  88. package/dist/charts/conversion-funnel-chart/index.js.map +0 -1
  89. package/dist/charts/geo-chart/index.cjs +0 -13
  90. package/dist/charts/geo-chart/index.cjs.map +0 -1
  91. package/dist/charts/geo-chart/index.css +0 -117
  92. package/dist/charts/geo-chart/index.css.map +0 -1
  93. package/dist/charts/geo-chart/index.d.cts +0 -67
  94. package/dist/charts/geo-chart/index.d.ts +0 -67
  95. package/dist/charts/geo-chart/index.js +0 -13
  96. package/dist/charts/geo-chart/index.js.map +0 -1
  97. package/dist/charts/leaderboard-chart/index.cjs +0 -20
  98. package/dist/charts/leaderboard-chart/index.cjs.map +0 -1
  99. package/dist/charts/leaderboard-chart/index.css +0 -172
  100. package/dist/charts/leaderboard-chart/index.css.map +0 -1
  101. package/dist/charts/leaderboard-chart/index.d.cts +0 -46
  102. package/dist/charts/leaderboard-chart/index.d.ts +0 -46
  103. package/dist/charts/leaderboard-chart/index.js +0 -20
  104. package/dist/charts/leaderboard-chart/index.js.map +0 -1
  105. package/dist/charts/line-chart/index.cjs +0 -15
  106. package/dist/charts/line-chart/index.cjs.map +0 -1
  107. package/dist/charts/line-chart/index.css +0 -225
  108. package/dist/charts/line-chart/index.css.map +0 -1
  109. package/dist/charts/line-chart/index.d.cts +0 -99
  110. package/dist/charts/line-chart/index.d.ts +0 -99
  111. package/dist/charts/line-chart/index.js +0 -15
  112. package/dist/charts/line-chart/index.js.map +0 -1
  113. package/dist/charts/pie-chart/index.cjs +0 -18
  114. package/dist/charts/pie-chart/index.cjs.map +0 -1
  115. package/dist/charts/pie-chart/index.css +0 -143
  116. package/dist/charts/pie-chart/index.css.map +0 -1
  117. package/dist/charts/pie-chart/index.d.cts +0 -97
  118. package/dist/charts/pie-chart/index.d.ts +0 -97
  119. package/dist/charts/pie-chart/index.js +0 -18
  120. package/dist/charts/pie-chart/index.js.map +0 -1
  121. package/dist/charts/pie-semi-circle-chart/index.cjs +0 -17
  122. package/dist/charts/pie-semi-circle-chart/index.cjs.map +0 -1
  123. package/dist/charts/pie-semi-circle-chart/index.css +0 -144
  124. package/dist/charts/pie-semi-circle-chart/index.css.map +0 -1
  125. package/dist/charts/pie-semi-circle-chart/index.d.cts +0 -94
  126. package/dist/charts/pie-semi-circle-chart/index.d.ts +0 -94
  127. package/dist/charts/pie-semi-circle-chart/index.js +0 -17
  128. package/dist/charts/pie-semi-circle-chart/index.js.map +0 -1
  129. package/dist/charts/sparkline/index.cjs +0 -16
  130. package/dist/charts/sparkline/index.cjs.map +0 -1
  131. package/dist/charts/sparkline/index.css +0 -242
  132. package/dist/charts/sparkline/index.css.map +0 -1
  133. package/dist/charts/sparkline/index.d.cts +0 -113
  134. package/dist/charts/sparkline/index.d.ts +0 -113
  135. package/dist/charts/sparkline/index.js +0 -16
  136. package/dist/charts/sparkline/index.js.map +0 -1
  137. package/dist/chunk-2A34OA5O.cjs +0 -51
  138. package/dist/chunk-2A34OA5O.cjs.map +0 -1
  139. package/dist/chunk-2NCY7R4G.js +0 -3897
  140. package/dist/chunk-2NCY7R4G.js.map +0 -1
  141. package/dist/chunk-32DH6JDF.js +0 -1263
  142. package/dist/chunk-32DH6JDF.js.map +0 -1
  143. package/dist/chunk-4OPFE4RM.js +0 -614
  144. package/dist/chunk-4OPFE4RM.js.map +0 -1
  145. package/dist/chunk-6CCZL2JJ.js +0 -63
  146. package/dist/chunk-6CCZL2JJ.js.map +0 -1
  147. package/dist/chunk-77OKCVQN.cjs +0 -421
  148. package/dist/chunk-77OKCVQN.cjs.map +0 -1
  149. package/dist/chunk-7FQX4ALL.cjs +0 -219
  150. package/dist/chunk-7FQX4ALL.cjs.map +0 -1
  151. package/dist/chunk-ASLARV7L.cjs +0 -81
  152. package/dist/chunk-ASLARV7L.cjs.map +0 -1
  153. package/dist/chunk-BCX5THDQ.js +0 -403
  154. package/dist/chunk-BCX5THDQ.js.map +0 -1
  155. package/dist/chunk-BPYKWMI7.js +0 -194
  156. package/dist/chunk-BPYKWMI7.js.map +0 -1
  157. package/dist/chunk-CZGYJKG6.js +0 -421
  158. package/dist/chunk-CZGYJKG6.js.map +0 -1
  159. package/dist/chunk-D2UH4CFE.cjs +0 -120
  160. package/dist/chunk-D2UH4CFE.cjs.map +0 -1
  161. package/dist/chunk-DAU3HNEG.js +0 -344
  162. package/dist/chunk-DAU3HNEG.js.map +0 -1
  163. package/dist/chunk-H2V4JMSA.js +0 -219
  164. package/dist/chunk-H2V4JMSA.js.map +0 -1
  165. package/dist/chunk-I2276W3I.cjs +0 -66
  166. package/dist/chunk-I2276W3I.cjs.map +0 -1
  167. package/dist/chunk-I35UYJJR.cjs +0 -468
  168. package/dist/chunk-I35UYJJR.cjs.map +0 -1
  169. package/dist/chunk-IU4DYUAV.js +0 -120
  170. package/dist/chunk-IU4DYUAV.js.map +0 -1
  171. package/dist/chunk-KXRWNFQJ.js +0 -51
  172. package/dist/chunk-KXRWNFQJ.js.map +0 -1
  173. package/dist/chunk-OP6PHB2U.js +0 -81
  174. package/dist/chunk-OP6PHB2U.js.map +0 -1
  175. package/dist/chunk-PXLEMUGJ.js +0 -165
  176. package/dist/chunk-PXLEMUGJ.js.map +0 -1
  177. package/dist/chunk-RCY6XLGU.cjs +0 -63
  178. package/dist/chunk-RCY6XLGU.cjs.map +0 -1
  179. package/dist/chunk-RHHVEJHJ.cjs +0 -1263
  180. package/dist/chunk-RHHVEJHJ.cjs.map +0 -1
  181. package/dist/chunk-TO3OQBXG.cjs +0 -165
  182. package/dist/chunk-TO3OQBXG.cjs.map +0 -1
  183. package/dist/chunk-V36ERY7Y.js +0 -375
  184. package/dist/chunk-V36ERY7Y.js.map +0 -1
  185. package/dist/chunk-VJM5XCB4.cjs +0 -614
  186. package/dist/chunk-VJM5XCB4.cjs.map +0 -1
  187. package/dist/chunk-VTS3PNMS.cjs +0 -344
  188. package/dist/chunk-VTS3PNMS.cjs.map +0 -1
  189. package/dist/chunk-WLODYNLB.js +0 -1067
  190. package/dist/chunk-WLODYNLB.js.map +0 -1
  191. package/dist/chunk-XKRJL2QT.cjs +0 -375
  192. package/dist/chunk-XKRJL2QT.cjs.map +0 -1
  193. package/dist/chunk-XWYZIFZW.js +0 -66
  194. package/dist/chunk-XWYZIFZW.js.map +0 -1
  195. package/dist/chunk-Y3NNQMAX.cjs +0 -194
  196. package/dist/chunk-Y3NNQMAX.cjs.map +0 -1
  197. package/dist/chunk-YE2T52VZ.cjs +0 -1067
  198. package/dist/chunk-YE2T52VZ.cjs.map +0 -1
  199. package/dist/chunk-Z26M4V2M.js +0 -468
  200. package/dist/chunk-Z26M4V2M.js.map +0 -1
  201. package/dist/chunk-Z45KX47P.cjs +0 -3897
  202. package/dist/chunk-Z45KX47P.cjs.map +0 -1
  203. package/dist/chunk-ZH4F5RMG.cjs +0 -403
  204. package/dist/chunk-ZH4F5RMG.cjs.map +0 -1
  205. package/dist/components/legend/index.cjs +0 -11
  206. package/dist/components/legend/index.cjs.map +0 -1
  207. package/dist/components/legend/index.css +0 -103
  208. package/dist/components/legend/index.css.map +0 -1
  209. package/dist/components/legend/index.d.cts +0 -37
  210. package/dist/components/legend/index.d.ts +0 -37
  211. package/dist/components/legend/index.js +0 -11
  212. package/dist/components/legend/index.js.map +0 -1
  213. package/dist/components/tooltip/index.cjs +0 -12
  214. package/dist/components/tooltip/index.cjs.map +0 -1
  215. package/dist/components/tooltip/index.css +0 -13
  216. package/dist/components/tooltip/index.css.map +0 -1
  217. package/dist/components/tooltip/index.d.cts +0 -71
  218. package/dist/components/tooltip/index.d.ts +0 -71
  219. package/dist/components/tooltip/index.js +0 -12
  220. package/dist/components/tooltip/index.js.map +0 -1
  221. package/dist/components/trend-indicator/index.cjs +0 -8
  222. package/dist/components/trend-indicator/index.cjs.map +0 -1
  223. package/dist/components/trend-indicator/index.css +0 -27
  224. package/dist/components/trend-indicator/index.css.map +0 -1
  225. package/dist/components/trend-indicator/index.d.cts +0 -44
  226. package/dist/components/trend-indicator/index.d.ts +0 -44
  227. package/dist/components/trend-indicator/index.js +0 -8
  228. package/dist/components/trend-indicator/index.js.map +0 -1
  229. package/dist/format-metric-value-MXm5DtQ_.d.cts +0 -24
  230. package/dist/format-metric-value-MXm5DtQ_.d.ts +0 -24
  231. package/dist/hooks/index.cjs +0 -31
  232. package/dist/hooks/index.cjs.map +0 -1
  233. package/dist/hooks/index.css +0 -103
  234. package/dist/hooks/index.css.map +0 -1
  235. package/dist/hooks/index.d.cts +0 -272
  236. package/dist/hooks/index.d.ts +0 -272
  237. package/dist/hooks/index.js +0 -31
  238. package/dist/hooks/index.js.map +0 -1
  239. package/dist/leaderboard-chart-BKYYXcg2.d.ts +0 -83
  240. package/dist/leaderboard-chart-DR7CGb0L.d.cts +0 -83
  241. package/dist/legend-C2grwnWk.d.cts +0 -9
  242. package/dist/legend-Cj0xM5dU.d.ts +0 -9
  243. package/dist/providers/index.cjs +0 -21
  244. package/dist/providers/index.cjs.map +0 -1
  245. package/dist/providers/index.css +0 -103
  246. package/dist/providers/index.css.map +0 -1
  247. package/dist/providers/index.d.cts +0 -28
  248. package/dist/providers/index.d.ts +0 -28
  249. package/dist/providers/index.js +0 -21
  250. package/dist/providers/index.js.map +0 -1
  251. package/dist/themes-BmVGrYnF.d.ts +0 -67
  252. package/dist/themes-CyjKm-P_.d.cts +0 -67
  253. package/dist/types-CuUEszrM.d.ts +0 -19
  254. package/dist/types-DZordNiO.d.cts +0 -505
  255. package/dist/types-DZordNiO.d.ts +0 -505
  256. package/dist/types-I67mddpr.d.cts +0 -78
  257. package/dist/types-I67mddpr.d.ts +0 -78
  258. package/dist/types-KtOPPzPX.d.cts +0 -19
  259. package/dist/utils/index.cjs +0 -44
  260. package/dist/utils/index.cjs.map +0 -1
  261. package/dist/utils/index.d.cts +0 -226
  262. package/dist/utils/index.d.ts +0 -226
  263. package/dist/utils/index.js +0 -44
  264. package/dist/utils/index.js.map +0 -1
  265. package/dist/with-responsive-CNfhzAUu.d.cts +0 -18
  266. package/dist/with-responsive-CNfhzAUu.d.ts +0 -18
  267. package/src/hooks/use-has-legend-child.ts +0 -22
@@ -1 +0,0 @@
1
- {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-VJM5XCB4.cjs","../src/charts/bar-chart/bar-chart.tsx","../src/charts/bar-chart/bar-chart.module.scss","../src/charts/bar-chart/private/use-bar-chart-options.ts","../src/charts/bar-chart/private/truncated-tick-component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-VJM5XCB4.cjs","sourcesContent":[null,"import { formatNumber } from '@automattic/number-formatters';\nimport { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';\nimport { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';\nimport { __ } from '@wordpress/i18n';\nimport { Stack } from '@wordpress/ui';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useState, useRef, useMemo } from 'react';\nimport { Legend, useChartLegendItems } from '../../components/legend';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';\nimport { useXYChartTheme, useChartDataTransform, useZeroValueDisplay, useChartMargin, useElementSize, useHasLegendChild, usePrefersReducedMotion } from '../../hooks';\nimport { GlobalChartsProvider, useChartId, useChartRegistration, useGlobalChartsContext, useGlobalChartsTheme, GlobalChartsContext } from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport styles from './bar-chart.module.scss';\nimport { useBarChartOptions } from './private';\n\n// Base props type with optional responsive properties\n\n// Composition API types\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\n// Validation function similar to LineChart\nconst validateData = data => {\n if (!data?.length) return 'No data available';\n const hasInvalidData = data.some(series => series.data.some(point => isNaN(point.value) || point.value === null || point.value === undefined || !point.label && (!('date' in point && point.date) || isNaN(point.date.getTime()))));\n if (hasInvalidData) return 'Invalid data';\n return null;\n};\nconst getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;\nconst BarChartInternal = ({\n data,\n chartId: providedChartId,\n width,\n height,\n className,\n margin,\n withTooltips = false,\n showLegend = false,\n legendOrientation = 'horizontal',\n legendPosition = 'bottom',\n legendAlignment = 'center',\n legendMaxWidth,\n legendTextOverflow = 'wrap',\n legendItemClassName,\n legendShape = 'rect',\n gridVisibility: gridVisibilityProp,\n renderTooltip,\n options = {},\n orientation = 'vertical',\n withPatterns = false,\n showZeroValues = false,\n legendInteractive = false,\n animation,\n children,\n gap = 'md'\n}) => {\n const horizontal = orientation === 'horizontal';\n const chartId = useChartId(providedChartId);\n const theme = useXYChartTheme(data);\n const dataSorted = useChartDataTransform(data);\n\n // Transform data to add a small value for zero bars to make them visible\n // For vertical bars, height determines bar pixel height; for horizontal bars, width does\n const dataWithVisibleZeros = useZeroValueDisplay(dataSorted, {\n enabled: showZeroValues,\n valueAxisLength: horizontal ? width : height\n });\n\n // Create legend items using the reusable hook\n const legendItems = useChartLegendItems(dataSorted);\n const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);\n const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);\n const [svgWrapperRef,, svgWrapperHeight] = useElementSize();\n const chartRef = useRef(null);\n\n // Check if children contain a Legend component (composition pattern)\n const hasLegendChild = useHasLegendChild(children);\n\n // Use the measured SVG wrapper height, falling back to the passed height if provided.\n // When there's a legend (via prop or composition), we must wait for measurement because\n // the legend takes space and the svg-wrapper height will be less than the total height.\n const chartHeight = svgWrapperHeight > 0 ? svgWrapperHeight : height;\n const hasLegend = showLegend || hasLegendChild;\n const isWaitingForMeasurement = hasLegend ? svgWrapperHeight === 0 : !chartHeight;\n const [selectedIndex, setSelectedIndex] = useState(undefined);\n const [isNavigating, setIsNavigating] = useState(false);\n const totalPoints = Math.max(0, ...data.map(series => series.data?.length || 0)) * data.length;\n\n // Use the keyboard navigation hook\n const {\n tooltipRef,\n onChartFocus,\n onChartBlur,\n onChartKeyDown\n } = useKeyboardNavigation({\n selectedIndex,\n setSelectedIndex,\n isNavigating,\n setIsNavigating,\n chartRef,\n totalPoints\n });\n const {\n getElementStyles,\n isSeriesVisible\n } = useGlobalChartsContext();\n const providerTheme = useGlobalChartsTheme();\n\n // Add visibility information to series when using interactive legends\n const seriesWithVisibility = useMemo(() => {\n if (!chartId || !legendInteractive) {\n return dataWithVisibleZeros.map((series, index) => ({\n series,\n index,\n isVisible: true\n }));\n }\n return dataWithVisibleZeros.map((series, index) => ({\n series,\n index,\n isVisible: isSeriesVisible(chartId, series.label)\n }));\n }, [dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive]);\n\n // Check if all series are hidden\n const allSeriesHidden = useMemo(() => {\n return seriesWithVisibility.every(({\n isVisible\n }) => !isVisible);\n }, [seriesWithVisibility]);\n const getBarBackground = useCallback(index => () => withPatterns ? `url(#${getPatternId(chartId, index)})` : getElementStyles({\n data: dataSorted[index],\n index\n }).color, [withPatterns, getElementStyles, dataSorted, chartId]);\n const renderDefaultTooltip = useCallback(({\n tooltipData\n }) => {\n const nearestDatum = tooltipData?.nearestDatum?.datum;\n if (!nearestDatum) return null;\n return /*#__PURE__*/_jsxs(\"div\", {\n className: styles['bar-chart__tooltip'],\n children: [/*#__PURE__*/_jsx(\"div\", {\n className: styles['bar-chart__tooltip-header'],\n children: tooltipData?.nearestDatum?.key\n }), /*#__PURE__*/_jsxs(\"div\", {\n className: styles['bar-chart__tooltip-row'],\n children: [/*#__PURE__*/_jsxs(\"span\", {\n className: styles['bar-chart__tooltip-label'],\n children: [chartOptions.tooltip.labelFormatter(nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0), 0, []), \":\"]\n }), /*#__PURE__*/_jsx(\"span\", {\n className: styles['bar-chart__tooltip-value'],\n children: formatNumber(nearestDatum.value)\n })]\n })]\n });\n }, [chartOptions.tooltip]);\n const renderPattern = useCallback((index, color) => {\n const patternType = index % 4;\n const id = getPatternId(chartId, index);\n const commonProps = {\n id,\n stroke: 'white',\n strokeWidth: 1,\n background: color\n };\n switch (patternType) {\n case 0:\n default:\n return /*#__PURE__*/_jsx(PatternLines, {\n ...commonProps,\n width: 5,\n height: 5,\n orientation: ['diagonal']\n }, id);\n case 1:\n return /*#__PURE__*/_jsx(PatternCircles, {\n ...commonProps,\n width: 6,\n height: 6,\n fill: \"white\"\n }, id);\n case 2:\n return /*#__PURE__*/_jsx(PatternWaves, {\n ...commonProps,\n width: 4,\n height: 4\n }, id);\n case 3:\n return /*#__PURE__*/_jsx(PatternHexagons, {\n ...commonProps,\n size: 8,\n height: 3\n }, id);\n }\n }, [chartId]);\n const createPatternBorderStyle = useCallback((index, color) => {\n const patternId = getPatternId(chartId, index);\n return `\n\t\t\t.visx-bar[fill=\"url(#${patternId})\"] {\n\t\t\t\tstroke: ${color};\n\t\t\t\tstroke-width: 1;\n\t\t\t\t}\n\t\t\t`;\n }, [chartId]);\n const createKeyboardHighlightStyle = useCallback(() => {\n if (selectedIndex === undefined) return '';\n\n // Calculate which bar should be highlighted based on selectedIndex\n // Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n const maxDataPoints = Math.max(...data.map(s => s.data.length));\n const dataPointIndex = Math.floor(selectedIndex / data.length);\n const seriesIndex = selectedIndex % data.length;\n\n // Only highlight if we're within valid bounds\n if (dataPointIndex >= maxDataPoints || seriesIndex >= data.length) {\n return '';\n }\n const seriesData = data[seriesIndex];\n if (dataPointIndex >= seriesData.data.length) {\n return '';\n }\n\n // Based on the DOM structure analysis:\n // - All bars are in a single .visx-bar-group\n // - Bars are ordered as: [series1[0], series1[1], series2[0], series2[1], ...]\n // - So we need to calculate the actual bar index in the DOM\n const actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;\n\n // Use a CSS class selector instead of ID since useId() generates invalid CSS ID characters\n const generatedStyles = `\n\t\t\t.bar-chart[data-chart-id=\"bar-chart-${chartId}\"] .visx-bar-group .visx-bar:nth-child(${actualBarIndex + 1}) {\n\t\t\t\tstroke: #005fcc;\n\t\t\t\tstroke-width: 2px;\n\t\t\t}\n\t\t`;\n return generatedStyles;\n }, [selectedIndex, data, chartId]);\n\n // Validate data first\n const error = validateData(dataSorted);\n const isDataValid = !error;\n\n // Memoize metadata to prevent unnecessary re-registration\n const chartMetadata = useMemo(() => ({\n orientation,\n withPatterns\n }), [orientation, withPatterns]);\n\n // Register chart with context only if data is valid\n useChartRegistration({\n chartId,\n legendItems,\n chartType: 'bar',\n isDataValid,\n metadata: chartMetadata\n });\n const prefersReducedMotion = usePrefersReducedMotion();\n if (error) {\n return /*#__PURE__*/_jsx(\"div\", {\n className: clsx('bar-chart', styles['bar-chart']),\n children: error\n });\n }\n const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;\n const highlightedBarStyle = createKeyboardHighlightStyle();\n const legendElement = showLegend && /*#__PURE__*/_jsx(Legend, {\n orientation: legendOrientation,\n position: legendPosition,\n alignment: legendAlignment,\n labelStyles: {\n maxWidth: legendMaxWidth,\n textOverflow: legendTextOverflow\n },\n itemClassName: legendItemClassName,\n className: styles['bar-chart__legend'],\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\n },\n children: /*#__PURE__*/_jsxs(Stack, {\n direction: \"column\",\n gap: gap,\n className: clsx('bar-chart', styles['bar-chart'], {\n [styles[`bar-chart--animated${horizontal ? '-horizontal' : ''}`]]: animation && !prefersReducedMotion\n }, className),\n style: {\n width,\n height,\n visibility: isWaitingForMeasurement ? 'hidden' : 'visible'\n },\n \"data-chart-id\": `bar-chart-${chartId}`,\n children: [legendPosition === 'top' && legendElement, /*#__PURE__*/_jsx(\"div\", {\n className: styles['bar-chart__svg-wrapper'],\n ref: svgWrapperRef,\n role: \"grid\",\n \"aria-label\": __('Bar chart', 'jetpack-charts'),\n tabIndex: 0,\n onKeyDown: onChartKeyDown,\n onFocus: onChartFocus,\n onBlur: onChartBlur,\n children: !isWaitingForMeasurement && /*#__PURE__*/_jsx(\"div\", {\n ref: chartRef,\n children: /*#__PURE__*/_jsxs(XYChart, {\n theme: theme,\n width: width,\n height: chartHeight,\n margin: {\n ...defaultMargin,\n ...margin\n },\n xScale: chartOptions.xScale,\n yScale: chartOptions.yScale,\n horizontal: horizontal,\n pointerEventsDataKey: \"nearest\",\n children: [/*#__PURE__*/_jsx(Grid, {\n columns: gridVisibility.includes('y'),\n rows: gridVisibility.includes('x'),\n numTicks: 4\n }), withPatterns && /*#__PURE__*/_jsxs(_Fragment, {\n children: [/*#__PURE__*/_jsx(\"defs\", {\n children: dataSorted.map((seriesData, index) => renderPattern(index, getElementStyles({\n data: seriesData,\n index\n }).color))\n }), /*#__PURE__*/_jsx(\"style\", {\n children: dataSorted.map((seriesData, index) => createPatternBorderStyle(index, getElementStyles({\n data: seriesData,\n index\n }).color))\n })]\n }), highlightedBarStyle && /*#__PURE__*/_jsx(\"style\", {\n children: highlightedBarStyle\n }), allSeriesHidden ? /*#__PURE__*/_jsx(\"text\", {\n x: width / 2,\n y: chartHeight / 2,\n textAnchor: \"middle\",\n fill: providerTheme.gridStyles?.stroke || '#ccc',\n fontSize: \"14\",\n fontFamily: \"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\",\n children: __('All series are hidden. Click legend items to show data.', 'jetpack-charts')\n }) : null, /*#__PURE__*/_jsx(BarGroup, {\n padding: chartOptions.barGroup.padding,\n children: seriesWithVisibility.map(({\n series: seriesData,\n index,\n isVisible\n }) => {\n // Skip rendering invisible series\n if (!isVisible) {\n return null;\n }\n return /*#__PURE__*/_jsx(BarSeries, {\n dataKey: seriesData?.label,\n data: seriesData.data,\n yAccessor: chartOptions.accessors.yAccessor,\n xAccessor: chartOptions.accessors.xAccessor,\n colorAccessor: getBarBackground(index)\n }, seriesData?.label);\n })\n }), /*#__PURE__*/_jsx(Axis, {\n ...chartOptions.axis.x\n }), /*#__PURE__*/_jsx(Axis, {\n ...chartOptions.axis.y\n }), withTooltips && /*#__PURE__*/_jsx(AccessibleTooltip, {\n detectBounds: true,\n snapTooltipToDatumX: true,\n snapTooltipToDatumY: true,\n renderTooltip: renderTooltip || renderDefaultTooltip,\n selectedIndex: selectedIndex,\n tooltipRef: tooltipRef,\n keyboardFocusedClassName: styles['bar-chart__tooltip--keyboard-focused'],\n series: data,\n mode: \"individual\"\n })]\n })\n })\n }), legendPosition === 'bottom' && legendElement, children]\n })\n });\n};\nconst BarChartWithProvider = 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(BarChartInternal, {\n ...props\n });\n }\n\n // Otherwise, create our own GlobalChartsProvider\n return /*#__PURE__*/_jsx(GlobalChartsProvider, {\n children: /*#__PURE__*/_jsx(BarChartInternal, {\n ...props\n })\n });\n};\nBarChartWithProvider.displayName = 'BarChart';\n\n// Create BarChart with composition API\nconst BarChart = attachSubComponents(BarChartWithProvider, {\n Legend: Legend\n});\n\n// Create responsive BarChart with composition API\nconst BarChartResponsive = attachSubComponents(withResponsive(BarChartWithProvider), {\n Legend: Legend\n});\nexport { BarChartResponsive as default, BarChart as BarChartUnresponsive };","import 'css-chunk:src/charts/bar-chart/bar-chart.module.scss';export default {\n \"bar-chart__svg-wrapper\": \"a8ccharts-9CsqC0\",\n \"bar-chart\": \"a8ccharts-3gflnB\",\n \"bar-chart--animated\": \"a8ccharts-98W-yu\",\n \"rise\": \"a8ccharts-z6AsiQ\",\n \"bar-chart--animated-horizontal\": \"a8ccharts-HFA3FF\",\n \"stretch\": \"a8ccharts-DQp37O\"\n};","import { formatNumberCompact } from '@automattic/number-formatters';\nimport { useMemo } from 'react';\nimport { TruncatedXTickComponent, TruncatedYTickComponent } from './truncated-tick-component';\nimport type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';\nimport type { DataPointDate, BaseChartProps, SeriesData } from '../../../types';\nimport type { TickFormatter } from '@visx/axis';\n\nconst formatDateTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t} );\n};\n\n/**\n * Get the group padding of a scale.\n *\n * @param scale - The scale to get the group padding of.\n * @return The group padding of the scale.\n */\nconst getGroupPadding = ( scale: Record< string, unknown > ): number => {\n\treturn typeof scale.paddingInner === 'number' ? ( scale.paddingInner as number ) : 0;\n};\n\n/**\n * Returns the merged options for the bar chart, including axis and scale configuration based on the orientation.\n *\n * @param data - The data to be displayed in the chart.\n * @param horizontal - Whether the chart is horizontal or vertical.\n * @param options - The options for the chart.\n * @return The merged options for the chart.\n */\nexport function useBarChartOptions(\n\tdata: SeriesData[],\n\thorizontal: boolean,\n\toptions: BaseChartProps[ 'options' ] = {}\n) {\n\tconst defaultOptions = useMemo( () => {\n\t\tconst bandScale = {\n\t\t\ttype: 'band' as const,\n\t\t\tpadding: 0.2,\n\t\t\tpaddingInner: 0.1,\n\t\t};\n\t\tconst linearScale = {\n\t\t\ttype: 'linear' as const,\n\t\t\tnice: true,\n\t\t\tzero: false,\n\t\t};\n\n\t\tconst labelFormatter = data?.[ 0 ]?.data?.[ 0 ]?.label\n\t\t\t? ( label: string ) => label\n\t\t\t: formatDateTick;\n\t\tconst valueFormatter = formatNumberCompact as TickFormatter< unknown >;\n\n\t\tconst labelAccessor = ( d: DataPointDate ) => d?.label || d?.date;\n\t\tconst valueAccessor = ( d: DataPointDate | EnhancedDataPoint ) => {\n\t\t\t// Use visualValue for bar rendering if available (for zero values), otherwise use value\n\t\t\tconst enhancedPoint = d as EnhancedDataPoint;\n\t\t\treturn enhancedPoint?.visualValue !== undefined ? enhancedPoint.visualValue : d?.value;\n\t\t};\n\n\t\treturn {\n\t\t\tvertical: {\n\t\t\t\txTickFormat: labelFormatter,\n\t\t\t\tyTickFormat: valueFormatter,\n\t\t\t\ttooltipLabelFormatter: labelFormatter,\n\t\t\t\txAccessor: labelAccessor,\n\t\t\t\tyAccessor: valueAccessor,\n\t\t\t\tgridVisibility: 'x',\n\t\t\t\txScale: bandScale,\n\t\t\t\tyScale: linearScale,\n\t\t\t},\n\t\t\thorizontal: {\n\t\t\t\txTickFormat: valueFormatter,\n\t\t\t\tyTickFormat: labelFormatter,\n\t\t\t\ttooltipLabelFormatter: labelFormatter,\n\t\t\t\txAccessor: valueAccessor,\n\t\t\t\tyAccessor: labelAccessor,\n\t\t\t\tgridVisibility: 'y',\n\t\t\t\txScale: linearScale,\n\t\t\t\tyScale: bandScale,\n\t\t\t},\n\t\t};\n\t}, [ data ] );\n\n\treturn useMemo( () => {\n\t\tconst orientationKey = horizontal ? 'horizontal' : 'vertical';\n\t\tconst {\n\t\t\txTickFormat,\n\t\t\tyTickFormat,\n\t\t\ttooltipLabelFormatter: defaultTooltipLabelFormatter,\n\t\t\txAccessor,\n\t\t\tyAccessor,\n\t\t\tgridVisibility,\n\t\t\txScale: baseXScale,\n\t\t\tyScale: baseYScale,\n\t\t} = defaultOptions[ orientationKey ];\n\n\t\tconst xScale = { ...baseXScale, ...( options.xScale || {} ) };\n\t\tconst yScale = { ...baseYScale, ...( options.yScale || {} ) };\n\t\tconst providedToolTipLabelFormatter = horizontal\n\t\t\t? options.axis?.y?.tickFormat\n\t\t\t: options.axis?.x?.tickFormat;\n\n\t\tconst { labelOverflow: xLabelOverflow, ...xAxisOptions } = options.axis?.x || {};\n\t\tconst { labelOverflow: yLabelOverflow, ...yAxisOptions } = options.axis?.y || {};\n\n\t\treturn {\n\t\t\tgridVisibility,\n\t\t\txScale,\n\t\t\tyScale,\n\t\t\taccessors: {\n\t\t\t\txAccessor,\n\t\t\t\tyAccessor,\n\t\t\t},\n\t\t\taxis: {\n\t\t\t\tx: {\n\t\t\t\t\torientation: 'bottom' as const,\n\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\ttickFormat: xTickFormat,\n\t\t\t\t\t...( xLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedXTickComponent } : {} ),\n\t\t\t\t\t...xAxisOptions,\n\t\t\t\t},\n\t\t\t\ty: {\n\t\t\t\t\torientation: 'left' as const,\n\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\ttickFormat: yTickFormat,\n\t\t\t\t\t...( yLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedYTickComponent } : {} ),\n\t\t\t\t\t...yAxisOptions,\n\t\t\t\t},\n\t\t\t},\n\t\t\tbarGroup: {\n\t\t\t\tpadding: getGroupPadding( horizontal ? yScale : xScale ),\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tlabelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,\n\t\t\t},\n\t\t};\n\t}, [ defaultOptions, options, horizontal ] );\n}\n","import { DataContext } from '@visx/xychart';\nimport { useContext } from 'react';\nimport { isSafari } from '../../../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n/**\n * Get the bandwidth of a scale\n *\n * @param scale - The scale to get the bandwidth of\n * @return The bandwidth of the scale\n */\nconst getScaleBandwidth = scale => {\n return scale && 'bandwidth' in scale ? scale.bandwidth() ?? 0 : 0;\n};\n/**\n * Minimum width in pixels for tick labels when scale bandwidth is very small.\n * Prevents labels from collapsing to unreadable widths on dense charts.\n *\n * Trade-off: When bandwidth is less than this minimum (e.g., many bars in a narrow chart),\n * adjacent labels may overlap since each label uses this minimum width regardless of\n * available space. This prioritizes label readability over preventing overlap.\n *\n * For very dense charts where overlap occurs, consider:\n * - Using `numTicks` option to reduce the number of displayed labels\n * - Using `tickFormat` to abbreviate label text\n * - Increasing chart width or reducing data points\n */\nconst MIN_TICK_LABEL_WIDTH = 20;\n\n/**\n * A tick component that renders labels with text truncation (ellipsis) when they exceed\n * the available bandwidth. Shows the full text on hover via native title attribute.\n *\n * Uses foreignObject to embed HTML within SVG, enabling CSS text-overflow: ellipsis.\n * Inherits text styles from tickLabelProps passed by visx Axis component.\n *\n * Note: A minimum label width (MIN_TICK_LABEL_WIDTH) is enforced to keep labels readable.\n * On very dense charts where bandwidth < 20px, this may cause label overlap.\n * See MIN_TICK_LABEL_WIDTH documentation for mitigation strategies.\n *\n * @param props - The props for the truncated tick component\n * @param props.x - The x position of the tick\n * @param props.y - The y position of the tick\n * @param props.formattedValue - The formatted value of the tick\n * @param props.axis - The axis this tick belongs to\n * @param props.textAnchor - The text anchor of the tick\n * @param props.fill - The fill color of the tick\n * @param props.dy - The dy offset of the tick\n *\n * @return The truncated tick component\n */\nexport const TruncatedTickComponent = ({\n x,\n y,\n formattedValue,\n axis,\n textAnchor,\n fill,\n dy,\n ...textProps\n}) => {\n // Get max width of the tick label\n const {\n xScale,\n yScale\n } = useContext(DataContext) || {};\n const scale = axis === 'x' ? xScale : yScale;\n const bandwidth = getScaleBandwidth(scale);\n const maxWidth = Math.max(bandwidth, MIN_TICK_LABEL_WIDTH);\n\n // Map SVG textAnchor to CSS textAlign\n let textAlign = 'center';\n if (textAnchor === 'start') {\n textAlign = 'left';\n } else if (textAnchor === 'end') {\n textAlign = 'right';\n } else if (textAnchor === 'middle') {\n textAlign = 'center';\n }\n\n // Calculate x offset based on text alignment\n let xOffset = 0;\n if (textAlign === 'center') {\n xOffset = -maxWidth / 2;\n } else if (textAlign === 'right') {\n xOffset = -maxWidth;\n }\n\n // Extract compatible style properties from SVG text props\n const {\n fontSize,\n fontFamily,\n fontWeight,\n fontStyle,\n letterSpacing,\n opacity\n } = textProps;\n const textStyles = {\n /**\n * SVG <text> elements are vertically aligned to the baseline by default, but HTML <div> elements inside <foreignObject>\n * are positioned relative to the top-left corner. To visually align the tick label like SVG text,\n * we shift the div up by 100% of its height and adjust by twice the SVG dy value (from visx) to approximate original placement.\n */\n transform: `translateY(calc(-100% + ${dy ?? '0'} * 2))`,\n // Safari doesn't work well with foreignObject positioning. Use position: fixed as a workaround.\n ...(isSafari() ? {\n position: 'fixed'\n } : {}),\n // Apply compatible SVG text styles\n fontSize,\n fontFamily,\n fontWeight,\n fontStyle,\n letterSpacing,\n opacity,\n // Convert svg text styles to CSS styles for the div\n color: fill ?? 'inherit',\n textAlign,\n // Ensure text is truncated with ellipsis, remains on one line, and shows the full value in a tooltip on hover.\n // The surrounding div uses CSS to handle overflow, and the 'title' attribute is set for accessibility.\n width: maxWidth,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n cursor: 'default',\n pointerEvents: 'auto'\n };\n return /*#__PURE__*/_jsx(\"foreignObject\", {\n x: x + xOffset,\n y: y,\n width: maxWidth,\n height: 0,\n overflow: \"visible\",\n children: /*#__PURE__*/_jsx(\"div\", {\n style: textStyles,\n title: formattedValue,\n children: formattedValue\n })\n });\n};\n\n/**\n * Factory function to create a truncated tick component for a specific axis.\n * Returns a component that can be passed to visx's tickComponent prop.\n *\n * @param axis - The axis this tick component is for ('x' or 'y')\n * @return A tick component function compatible with visx's TickRendererProps\n */\nconst createTruncatedTickComponent = axis => props => {\n return /*#__PURE__*/_jsx(TruncatedTickComponent, {\n ...props,\n axis: axis\n });\n};\n\n/**\n * Pre-created tick components for x and y axes.\n * These functions are created once at module initialization and reused,\n * avoiding repeated factory calls when configuring axes.\n */\nexport const TruncatedXTickComponent = createTruncatedTickComponent('x');\nexport const TruncatedYTickComponent = createTruncatedTickComponent('y');"]}
@@ -1,344 +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; }// src/utils/create-composition.ts
2
- function attachSubComponents(Chart, subComponents) {
3
- return Object.assign(Chart, subComponents);
4
- }
5
-
6
- // src/utils/date-parsing.ts
7
- var _datefns = require('date-fns');
8
- var hasTimezone = (dateString) => {
9
- return /T.*[Z]$|T.*[+-]\d{2}:?\d{2}$/.test(dateString);
10
- };
11
- var parseAsLocalDate = (dateString) => {
12
- const trimmedString = dateString.trim();
13
- if (hasTimezone(trimmedString)) {
14
- const isoDate = _datefns.parseISO.call(void 0, trimmedString);
15
- if (!_datefns.isValid.call(void 0, isoDate)) {
16
- return /* @__PURE__ */ new Date(NaN);
17
- }
18
- return isoDate;
19
- }
20
- const formats = [
21
- "yyyy-MM-dd",
22
- // 2025-01-01
23
- "yyyy-MM-dd HH:mm:ss",
24
- // 2025-01-01 14:30:45
25
- "yyyy-MM-dd HH:mm",
26
- // 2025-01-01 14:30
27
- "yyyy-MM-dd'T'HH:mm:ss",
28
- // 2025-01-01T14:30:45
29
- "yyyy-MM-dd'T'HH:mm:ss.SSS",
30
- // 2025-01-01T14:30:45.123
31
- "yyyy-MM-dd'T'HH:mm"
32
- // 2025-01-01T14:30
33
- ];
34
- for (const format of formats) {
35
- const result = _datefns.parse.call(void 0, trimmedString, format, /* @__PURE__ */ new Date());
36
- if (_datefns.isValid.call(void 0, result)) {
37
- return result;
38
- }
39
- }
40
- return /* @__PURE__ */ new Date(NaN);
41
- };
42
-
43
- // src/utils/format-metric-value.ts
44
- var _numberformatters = require('@automattic/number-formatters');
45
- var formatMetricValue = (value, type = "number", { decimals, useMultipliers = false, signDisplay } = {}) => {
46
- if (value === null || value === void 0) {
47
- return "";
48
- }
49
- const numericValue = Number(value);
50
- if (isNaN(numericValue)) {
51
- return "";
52
- }
53
- switch (type) {
54
- case "currency": {
55
- const formatted = useMultipliers ? _numberformatters.formatNumberCompact.call(void 0, numericValue, {
56
- decimals: _nullishCoalesce(decimals, () => ( 2)),
57
- numberFormatOptions: {
58
- maximumFractionDigits: _nullishCoalesce(decimals, () => ( 2)),
59
- signDisplay
60
- }
61
- }) : _numberformatters.formatNumber.call(void 0, numericValue, {
62
- decimals: _nullishCoalesce(decimals, () => ( 2)),
63
- numberFormatOptions: {
64
- signDisplay
65
- }
66
- });
67
- return `$${formatted}`;
68
- }
69
- case "average": {
70
- if (!Number.isFinite(numericValue)) {
71
- return "\u2014";
72
- }
73
- return _numberformatters.formatNumber.call(void 0, numericValue, {
74
- decimals: _nullishCoalesce(decimals, () => ( 0)),
75
- numberFormatOptions: {
76
- style: "percent",
77
- signDisplay: _nullishCoalesce(signDisplay, () => ( "exceptZero"))
78
- }
79
- });
80
- }
81
- case "number":
82
- default: {
83
- return useMultipliers ? _numberformatters.formatNumberCompact.call(void 0, numericValue, {
84
- decimals: _nullishCoalesce(decimals, () => ( 0)),
85
- numberFormatOptions: {
86
- maximumFractionDigits: _nullishCoalesce(decimals, () => ( 0)),
87
- signDisplay
88
- }
89
- }) : _numberformatters.formatNumber.call(void 0, numericValue, {
90
- decimals: _nullishCoalesce(decimals, () => ( 0)),
91
- numberFormatOptions: {
92
- signDisplay
93
- }
94
- });
95
- }
96
- }
97
- };
98
-
99
- // src/utils/format-percentage.ts
100
-
101
- var formatPercentage = (value) => {
102
- return _numberformatters.formatNumber.call(void 0, value / 100, {
103
- numberFormatOptions: {
104
- style: "percent",
105
- minimumFractionDigits: 0,
106
- maximumFractionDigits: 2
107
- }
108
- });
109
- };
110
-
111
- // src/utils/get-longest-tick-width.ts
112
- var _text = require('@visx/text');
113
- var getLongestTickWidth = (ticks, formatTick, labelStyle) => {
114
- const formattedTicks = ticks.map((tick) => formatTick(tick, 0, []));
115
- const longestTick = formattedTicks.reduce(
116
- (longest, current) => longest.length >= current.length ? longest : current,
117
- formattedTicks[0]
118
- );
119
- return _text.getStringWidth.call(void 0, longestTick, labelStyle);
120
- };
121
-
122
- // src/utils/get-styles.ts
123
- function getSeriesLineStyles(seriesData, index, providerTheme) {
124
- const themeSemanticLineStyle = _optionalChain([providerTheme, 'optionalAccess', _ => _.lineChart, 'optionalAccess', _2 => _2.lineStyles, 'optionalAccess', _3 => _3[_optionalChain([seriesData, 'access', _4 => _4.options, 'optionalAccess', _5 => _5.type])]]);
125
- const themeSeriesLineStyle = _optionalChain([providerTheme, 'optionalAccess', _6 => _6.seriesLineStyles, 'optionalAccess', _7 => _7[index % providerTheme.seriesLineStyles.length]]);
126
- return _nullishCoalesce(_nullishCoalesce(_nullishCoalesce(_optionalChain([seriesData, 'access', _8 => _8.options, 'optionalAccess', _9 => _9.seriesLineStyle]), () => ( themeSemanticLineStyle)), () => ( themeSeriesLineStyle)), () => ( {}));
127
- }
128
- function getSeriesStroke(seriesData, index, themeColors) {
129
- return _nullishCoalesce(_optionalChain([seriesData, 'access', _10 => _10.options, 'optionalAccess', _11 => _11.stroke]), () => ( themeColors[index % themeColors.length]));
130
- }
131
- function getItemShapeStyles(series, index, theme, legendShape) {
132
- const seriesShapeStyles = _nullishCoalesce(_optionalChain([series, 'access', _12 => _12.options, 'optionalAccess', _13 => _13.legendShapeStyle]), () => ( {}));
133
- const lineStyles = legendShape === "line" ? getSeriesLineStyles(series, index, theme) : {};
134
- const themeShapeStyles = _optionalChain([theme, 'access', _14 => _14.legend, 'optionalAccess', _15 => _15.shapeStyles, 'optionalAccess', _16 => _16[index]]);
135
- const itemShapeStyles = {
136
- ...seriesShapeStyles,
137
- ...lineStyles
138
- };
139
- if (Object.values(itemShapeStyles).some(
140
- (value) => value !== void 0 && value !== null && value !== ""
141
- )) {
142
- return itemShapeStyles;
143
- }
144
- return _nullishCoalesce(themeShapeStyles, () => ( {}));
145
- }
146
-
147
- // src/utils/is-safari.ts
148
- var isSafari = () => {
149
- if (typeof navigator !== "undefined" && navigator.userAgent) {
150
- return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
151
- }
152
- return false;
153
- };
154
-
155
- // src/utils/merge-themes.ts
156
- var _deepmerge = require('deepmerge'); var _deepmerge2 = _interopRequireDefault(_deepmerge);
157
- function mergeThemes(baseTheme, overrideTheme) {
158
- return _deepmerge2.default.call(void 0, baseTheme, overrideTheme, {
159
- // Ensure arrays are replaced rather than concatenated
160
- arrayMerge: (_destinationArray, sourceArray) => sourceArray
161
- });
162
- }
163
-
164
- // src/utils/color-utils.ts
165
- var _d3color = require('@visx/vendor/d3-color');
166
- var isValidHexColor = (hex) => {
167
- return typeof hex === "string" && /^#[0-9a-fA-F]{6}$/.test(hex);
168
- };
169
- var validateHexColor = (hex) => {
170
- if (isValidHexColor(hex)) {
171
- return;
172
- }
173
- if (typeof hex !== "string") {
174
- throw new Error("Hex color must be a string");
175
- }
176
- if (!hex.startsWith("#")) {
177
- throw new Error("Hex color must start with #");
178
- }
179
- if (hex.length !== 7) {
180
- throw new Error("Hex color must be 7 characters long (e.g., #ff0000)");
181
- }
182
- throw new Error("Hex color contains invalid characters. Only 0-9, a-f, A-F are allowed");
183
- };
184
- var hexToRgba = (hex, alpha) => {
185
- validateHexColor(hex);
186
- if (typeof alpha !== "number" || isNaN(alpha)) {
187
- throw new Error("Alpha must be a number");
188
- }
189
- return _d3color.color.call(void 0, hex).copy({ opacity: alpha }).formatRgb();
190
- };
191
- var getColorDistance = (hsl1, hsl2) => {
192
- const [h1, s1, l1] = hsl1;
193
- const [h2, s2, l2] = hsl2;
194
- let hueDiff = Math.abs(h1 - h2);
195
- hueDiff = Math.min(hueDiff, 360 - hueDiff);
196
- const hueWeight = 2;
197
- const lightnessWeight = 1;
198
- const saturationWeight = 0.5;
199
- return Math.sqrt(
200
- Math.pow(hueDiff * hueWeight, 2) + Math.pow((l1 - l2) * lightnessWeight, 2) + Math.pow((s1 - s2) * saturationWeight, 2)
201
- );
202
- };
203
- var parseHslString = (hslString) => {
204
- const lower = hslString.toLowerCase().trim();
205
- if (!lower.startsWith("hsl(")) {
206
- return null;
207
- }
208
- const parsed = _d3color.hsl.call(void 0, lower);
209
- if (isNaN(parsed.h) && isNaN(parsed.s) && isNaN(parsed.l)) {
210
- return null;
211
- }
212
- const h = isNaN(parsed.h) ? 0 : (parsed.h % 360 + 360) % 360;
213
- return [h, parsed.s * 100, parsed.l * 100];
214
- };
215
- var parseRgbString = (rgbString) => {
216
- const lower = rgbString.toLowerCase().trim();
217
- if (!lower.startsWith("rgb(") || lower.startsWith("rgba(")) {
218
- return null;
219
- }
220
- const parsed = _d3color.color.call(void 0, lower);
221
- if (!parsed) {
222
- return null;
223
- }
224
- return parsed.formatHex();
225
- };
226
- var normalizeColorToHex = (color, element, resolveCss) => {
227
- if (!color || typeof color !== "string") {
228
- return "";
229
- }
230
- if (/^#[0-9a-fA-F]{6}$/.test(color)) {
231
- return color;
232
- }
233
- const trimmed = color.trim().toLowerCase();
234
- if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
235
- const r = trimmed[1];
236
- const g = trimmed[2];
237
- const b = trimmed[3];
238
- return `#${r}${r}${g}${g}${b}${b}`;
239
- }
240
- if (trimmed.startsWith("--") || trimmed.startsWith("var(")) {
241
- if (resolveCss) {
242
- const resolved = resolveCss(color, element);
243
- if (resolved) {
244
- return normalizeColorToHex(resolved, element, resolveCss);
245
- }
246
- }
247
- return color;
248
- }
249
- if (trimmed.startsWith("hsl(") || trimmed.startsWith("rgb(")) {
250
- if (trimmed.startsWith("rgba(")) {
251
- return color;
252
- }
253
- const parsed = _d3color.color.call(void 0, trimmed);
254
- if (parsed) {
255
- return parsed.formatHex();
256
- }
257
- return color;
258
- }
259
- return color;
260
- };
261
- var lightenHexColor = (hex, blend) => {
262
- validateHexColor(hex);
263
- const r = parseInt(hex.slice(1, 3), 16);
264
- const g = parseInt(hex.slice(3, 5), 16);
265
- const b = parseInt(hex.slice(5, 7), 16);
266
- const newR = Math.round(r + (255 - r) * blend);
267
- const newG = Math.round(g + (255 - g) * blend);
268
- const newB = Math.round(b + (255 - b) * blend);
269
- return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
270
- };
271
-
272
- // src/utils/resolve-css-var.ts
273
- var CSS_VAR_NAME_PATTERN = /^--[\w-]+$/;
274
- var resolveCssVariable = (value, element) => {
275
- if (!value) {
276
- return null;
277
- }
278
- if (value.startsWith("var(") && value.endsWith(")")) {
279
- const parsed = parseVarExpression(value);
280
- if (parsed) {
281
- const resolved = resolveVariableName(parsed.varName, element);
282
- return resolved || parsed.fallback;
283
- }
284
- }
285
- if (value.startsWith("--")) {
286
- return resolveVariableName(value, element);
287
- }
288
- return value;
289
- };
290
- function parseVarExpression(expr) {
291
- const inner = expr.slice(4, -1).trim();
292
- if (!inner.startsWith("--")) {
293
- return null;
294
- }
295
- const commaIndex = inner.indexOf(",");
296
- if (commaIndex === -1) {
297
- const varName2 = inner.trim();
298
- if (!CSS_VAR_NAME_PATTERN.test(varName2)) {
299
- return null;
300
- }
301
- return { varName: varName2, fallback: null };
302
- }
303
- const varName = inner.slice(0, commaIndex).trim();
304
- if (!CSS_VAR_NAME_PATTERN.test(varName)) {
305
- return null;
306
- }
307
- const fallback = inner.slice(commaIndex + 1).trim();
308
- return { varName, fallback: fallback || null };
309
- }
310
- function resolveVariableName(varName, element) {
311
- if (typeof window === "undefined" || typeof document === "undefined") {
312
- return null;
313
- }
314
- try {
315
- const targetElement = element || document.documentElement;
316
- const computedValue = getComputedStyle(targetElement).getPropertyValue(varName).trim();
317
- return computedValue || null;
318
- } catch (e) {
319
- return null;
320
- }
321
- }
322
-
323
-
324
-
325
-
326
-
327
-
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
-
336
-
337
-
338
-
339
-
340
-
341
-
342
-
343
- exports.attachSubComponents = attachSubComponents; exports.parseAsLocalDate = parseAsLocalDate; exports.formatMetricValue = formatMetricValue; exports.formatPercentage = formatPercentage; exports.getLongestTickWidth = getLongestTickWidth; exports.getSeriesLineStyles = getSeriesLineStyles; exports.getSeriesStroke = getSeriesStroke; exports.getItemShapeStyles = getItemShapeStyles; exports.isSafari = isSafari; exports.mergeThemes = mergeThemes; exports.isValidHexColor = isValidHexColor; exports.validateHexColor = validateHexColor; exports.hexToRgba = hexToRgba; exports.getColorDistance = getColorDistance; exports.parseHslString = parseHslString; exports.parseRgbString = parseRgbString; exports.normalizeColorToHex = normalizeColorToHex; exports.lightenHexColor = lightenHexColor; exports.resolveCssVariable = resolveCssVariable;
344
- //# sourceMappingURL=chunk-VTS3PNMS.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-VTS3PNMS.cjs","../src/utils/create-composition.ts","../src/utils/date-parsing.ts","../src/utils/format-metric-value.ts","../src/utils/format-percentage.ts","../src/utils/get-longest-tick-width.ts","../src/utils/get-styles.ts","../src/utils/is-safari.ts","../src/utils/merge-themes.ts","../src/utils/color-utils.ts","../src/utils/resolve-css-var.ts"],"names":["formatNumber","varName"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-VTS3PNMS.cjs","sourcesContent":[null,"/**\n * Utility function to create chart components with composition API.\n *\n * This function attaches subcomponents to a chart component to enable\n * dot notation access like <Chart.Legend />, <Chart.Tooltip />, etc.\n *\n * @param Chart - The main chart component\n * @param subComponents - Object containing subcomponents to attach\n * @return Chart component with attached subcomponents\n */\nexport function attachSubComponents< TChart, TSubComponents extends Record< string, unknown > >(\n\tChart: TChart,\n\tsubComponents: TSubComponents\n): TChart & TSubComponents {\n\treturn Object.assign( Chart, subComponents );\n}\n","/**\n * @file Date parsing utilities using date-fns for local timezone handling\n *\n * This module provides utilities for parsing various date string formats and converting\n * them to local timezone dates using the battle-tested date-fns library. For formats\n * without timezone info, they're treated as local. For formats with timezone info,\n * they're converted to the equivalent local time.\n *\n * Note: And specifically it prevents format `YYYY-MM-DD` being parsed as UTC date.\n *\n * Key Features:\n * - All parsed dates are in local timezone\n * - Converts timezone-aware strings to local equivalent\n * - Robust input validation and error handling using date-fns\n * - TypeScript type safety\n * - Much smaller codebase than custom parsing\n *\n * Supported Formats:\n * - YYYY-MM-DD (treated as local)\n * - YYYY-MM-DD HH:mm:ss (treated as local)\n * - YYYY-MM-DD HH:mm (treated as local)\n * - YYYY-MM-DDTHH:mm:ss (treated as local)\n * - YYYY-MM-DDTHH:mm:ss.SSS (treated as local)\n * - YYYY-MM-DDTHH:mm (treated as local)\n * - YYYY-MM-DDTHH:mm:ssZ (converted to local)\n * - YYYY-MM-DDTHH:mm:ss±HH:mm (converted to local)\n *\n * @example\n * ```typescript\n * parseAsLocalDate(\"2025-01-01\"); // Local timezone\n * parseAsLocalDate(\"2025-01-01 14:30:00\"); // Local timezone\n * parseAsLocalDate(\"2025-01-01 14:30\"); // Local timezone\n * parseAsLocalDate(\"2025-01-01T14:30:45.123\"); // Local timezone\n * parseAsLocalDate(\"2025-01-01T14:30:00Z\"); // UTC 14:30 → Local equivalent\n * parseAsLocalDate(\"2025-01-01T14:30:00+05:00\"); // +05:00 14:30 → Local equivalent\n * ```\n */\n\nimport { parse, parseISO, isValid } from 'date-fns';\n\n/**\n * Checks if a date string contains timezone information\n * @param {string} dateString - The date string to check for timezone information\n * @return {boolean} True if the date string contains timezone information, false otherwise\n */\nconst hasTimezone = ( dateString: string ): boolean => {\n\treturn /T.*[Z]$|T.*[+-]\\d{2}:?\\d{2}$/.test( dateString );\n};\n\n/**\n * Parses any supported date string format and returns a local timezone date\n *\n * Uses date-fns for robust parsing and validation. For strings without timezone\n * info, treats as local timezone. For strings with timezone info, converts to\n * local timezone equivalent.\n *\n * Supports:\n * - YYYY-MM-DD (local)\n * - YYYY-MM-DD HH:mm:ss (local)\n * - YYYY-MM-DD HH:mm (local)\n * - YYYY-MM-DDTHH:mm:ss (local)\n * - YYYY-MM-DDTHH:mm:ss.SSS (local)\n * - YYYY-MM-DDTHH:mm (local)\n * - YYYY-MM-DDTHH:mm:ssZ (UTC → local)\n * - YYYY-MM-DDTHH:mm:ss±HH:mm (offset → local)\n * @param {string} dateString - The date string to parse into a local timezone date\n * @return {Date} A Date object representing the parsed date in local timezone, or an invalid Date if parsing fails\n */\nexport const parseAsLocalDate = ( dateString: string ): Date => {\n\tconst trimmedString = dateString.trim();\n\n\t// If it has timezone information, parse as ISO and convert to local\n\tif ( hasTimezone( trimmedString ) ) {\n\t\tconst isoDate = parseISO( trimmedString );\n\n\t\tif ( ! isValid( isoDate ) ) {\n\t\t\treturn new Date( NaN );\n\t\t}\n\n\t\t// parseISO automatically converts to local timezone\n\t\treturn isoDate;\n\t}\n\n\t// For naive strings, try different local formats\n\tconst formats = [\n\t\t'yyyy-MM-dd', // 2025-01-01\n\t\t'yyyy-MM-dd HH:mm:ss', // 2025-01-01 14:30:45\n\t\t'yyyy-MM-dd HH:mm', // 2025-01-01 14:30\n\t\t\"yyyy-MM-dd'T'HH:mm:ss\", // 2025-01-01T14:30:45\n\t\t\"yyyy-MM-dd'T'HH:mm:ss.SSS\", // 2025-01-01T14:30:45.123\n\t\t\"yyyy-MM-dd'T'HH:mm\", // 2025-01-01T14:30\n\t];\n\n\tfor ( const format of formats ) {\n\t\tconst result = parse( trimmedString, format, new Date() );\n\t\tif ( isValid( result ) ) {\n\t\t\treturn result;\n\t\t}\n\t}\n\n\t// If no format matched, return invalid date\n\treturn new Date( NaN );\n};\n","import { formatNumberCompact, formatNumber } from '@automattic/number-formatters';\n\n/**\n * Types for formatMetricValue\n */\nexport type MetricValueType = 'number' | 'average' | 'currency';\n\ntype FormatMetricValueOptions = {\n\tdecimals?: number;\n\tuseMultipliers?: boolean;\n\tsignDisplay?: Intl.NumberFormatOptions[ 'signDisplay' ];\n};\n\n/**\n * Format a numeric metric value based on type, precision and scale.\n * Supports currency, number and percentage, using `@automattic/number-formatters`.\n *\n * @param value - The value to format\n * @param type - The type of formatting to apply\n * @param options - Formatting options\n * @param options.decimals - Number of decimal places to show\n * @param options.useMultipliers - Whether to use K, M, B suffixes for large numbers\n * @param options.signDisplay - Controls when to display the sign (auto, always, never, exceptZero)\n * @return Formatted string\n */\nexport const formatMetricValue = (\n\tvalue: string | number,\n\ttype: MetricValueType = 'number',\n\t{ decimals, useMultipliers = false, signDisplay }: FormatMetricValueOptions = {}\n): string => {\n\tif ( value === null || value === undefined ) {\n\t\treturn '';\n\t}\n\n\tconst numericValue = Number( value );\n\tif ( isNaN( numericValue ) ) {\n\t\treturn '';\n\t}\n\n\tswitch ( type ) {\n\t\tcase 'currency': {\n\t\t\t// Basic currency formatting - can be enhanced with full currency support\n\t\t\tconst formatted = useMultipliers\n\t\t\t\t? formatNumberCompact( numericValue, {\n\t\t\t\t\t\tdecimals: decimals ?? 2,\n\t\t\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\t\t\tmaximumFractionDigits: decimals ?? 2,\n\t\t\t\t\t\t\tsignDisplay,\n\t\t\t\t\t\t},\n\t\t\t\t } )\n\t\t\t\t: formatNumber( numericValue, {\n\t\t\t\t\t\tdecimals: decimals ?? 2,\n\t\t\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\t\t\tsignDisplay,\n\t\t\t\t\t\t},\n\t\t\t\t } );\n\t\t\treturn `$${ formatted }`;\n\t\t}\n\n\t\tcase 'average': {\n\t\t\tif ( ! Number.isFinite( numericValue ) ) {\n\t\t\t\treturn '—';\n\t\t\t}\n\n\t\t\treturn formatNumber( numericValue, {\n\t\t\t\tdecimals: decimals ?? 0,\n\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\tstyle: 'percent',\n\t\t\t\t\tsignDisplay: signDisplay ?? 'exceptZero',\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\n\t\tcase 'number':\n\t\tdefault: {\n\t\t\treturn useMultipliers\n\t\t\t\t? formatNumberCompact( numericValue, {\n\t\t\t\t\t\tdecimals: decimals ?? 0,\n\t\t\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\t\t\tmaximumFractionDigits: decimals ?? 0,\n\t\t\t\t\t\t\tsignDisplay,\n\t\t\t\t\t\t},\n\t\t\t\t } )\n\t\t\t\t: formatNumber( numericValue, {\n\t\t\t\t\t\tdecimals: decimals ?? 0,\n\t\t\t\t\t\tnumberFormatOptions: {\n\t\t\t\t\t\t\tsignDisplay,\n\t\t\t\t\t\t},\n\t\t\t\t } );\n\t\t}\n\t}\n};\n","import { formatNumber } from '@automattic/number-formatters';\n\n/**\n * Format a percentage value with smart decimal handling.\n * Uses `@automattic/number-formatters` for consistent formatting.\n * Removes unnecessary trailing zeros and caps at 2 decimal places.\n *\n * @param value - The percentage value (0-100 range)\n * @return Formatted percentage string (e.g., \"30%\", \"30.1%\", \"30.25%\")\n */\nexport const formatPercentage = ( value: number ): string => {\n\t// Use formatNumber with percentage style, but convert from 0-100 range to 0-1 range\n\treturn formatNumber( value / 100, {\n\t\tnumberFormatOptions: {\n\t\t\tstyle: 'percent',\n\t\t\tminimumFractionDigits: 0,\n\t\t\tmaximumFractionDigits: 2,\n\t\t},\n\t} );\n};\n","import { getStringWidth } from '@visx/text';\nimport type { TickFormatter } from '@visx/axis';\nimport type { AnyD3Scale, ScaleInput } from '@visx/scale';\n\n/**\n * Returns the width of the longest tick.\n *\n * @param ticks - Ticks to get the width of.\n * @param formatTick - Function to format the tick.\n * @param {object} labelStyle - Style object for the label.\n * @return {number} - Width of the longest tick.\n */\nexport const getLongestTickWidth = < T extends AnyD3Scale >(\n\tticks: ScaleInput< T >[],\n\tformatTick: TickFormatter< ScaleInput< T > >,\n\tlabelStyle?: object\n) => {\n\tconst formattedTicks = ticks.map( tick => formatTick( tick, 0, [] ) );\n\tconst longestTick = formattedTicks.reduce(\n\t\t( longest, current ) => ( longest.length >= current.length ? longest : current ),\n\t\tformattedTicks[ 0 ]\n\t);\n\n\treturn getStringWidth( longestTick, labelStyle );\n};\n","import type { ChartTheme, SeriesData } from '../types';\nimport type { LegendShape } from '@visx/legend/lib/types';\nimport type { LineStyles } from '@visx/xychart';\n\n/**\n * Utility function to get consolidated line styles for a series\n * This consolidates the logic used by both LineChart and Legend components\n *\n * @param {SeriesData} seriesData - The series data containing styling options\n * @param {number} index - The index of the series in the data array\n * @param {ChartTheme} providerTheme - The chart theme configuration\n * @return {LineStyles} The consolidated line styles for the series\n */\nexport function getSeriesLineStyles(\n\tseriesData: SeriesData,\n\tindex: number,\n\tproviderTheme: ChartTheme\n): LineStyles {\n\t// Get theme-based line styles for line type\n\tconst themeSemanticLineStyle = providerTheme?.lineChart?.lineStyles?.[ seriesData.options?.type ];\n\n\t// Get theme-based line styles for index of series data\n\tconst themeSeriesLineStyle =\n\t\tproviderTheme?.seriesLineStyles?.[ index % providerTheme.seriesLineStyles.length ];\n\n\t// Priority order: custom series style > theme line type style > default theme series style\n\treturn (\n\t\tseriesData.options?.seriesLineStyle ?? themeSemanticLineStyle ?? themeSeriesLineStyle ?? {}\n\t);\n}\n\n/**\n * Utility function to get stroke color for a series\n *\n * @param {SeriesData} seriesData - The series data containing styling options\n * @param {number} index - The index of the series in the data array\n * @param {string[]} themeColors - Array of theme colors\n * @return {string} The stroke color for the series\n */\nexport function getSeriesStroke(\n\tseriesData: SeriesData,\n\tindex: number,\n\tthemeColors: string[]\n): string {\n\treturn seriesData.options?.stroke ?? themeColors[ index % themeColors.length ];\n}\n\n/**\n * Utility function to get shape styles for a legend item\n *\n * @param {SeriesData} series - The series data containing styling options\n * @param {number} index - The index of the series in the data array\n * @param {ChartTheme} theme - The chart theme configuration\n * @param {LegendShape} legendShape - The shape to use for the item (optional)\n * @return {Record< string, unknown >} The shape styles for the item\n */\nexport function getItemShapeStyles(\n\tseries: SeriesData,\n\tindex: number,\n\ttheme: ChartTheme,\n\tlegendShape?: LegendShape< SeriesData[], number >\n): Record< string, unknown > {\n\tconst seriesShapeStyles = series.options?.legendShapeStyle ?? {};\n\tconst lineStyles = legendShape === 'line' ? getSeriesLineStyles( series, index, theme ) : {};\n\tconst themeShapeStyles = theme.legend?.shapeStyles?.[ index ];\n\n\tconst itemShapeStyles = {\n\t\t...seriesShapeStyles,\n\t\t...lineStyles,\n\t};\n\n\t// Return item shape styles if they are not empty\n\tif (\n\t\tObject.values( itemShapeStyles ).some(\n\t\t\tvalue => value !== undefined && value !== null && value !== ''\n\t\t)\n\t) {\n\t\treturn itemShapeStyles;\n\t}\n\n\t// Fallback to theme shape styles if defined\n\treturn themeShapeStyles ?? {};\n}\n","export const isSafari = () => {\n\tif ( typeof navigator !== 'undefined' && navigator.userAgent ) {\n\t\treturn /^((?!chrome|android).)*safari/i.test( navigator.userAgent );\n\t}\n\treturn false;\n};\n","import deepmerge from 'deepmerge';\nimport type { ChartTheme, CompleteChartTheme } from '../types';\n\n/**\n * Merges chart themes with proper precedence.\n * The second theme (override) takes precedence over the first theme (base).\n *\n * @param baseTheme - Base theme object\n * @param overrideTheme - Theme to override base with (takes precedence)\n * @return Merged theme with overrideTheme values taking precedence\n */\nexport function mergeThemes(\n\tbaseTheme: CompleteChartTheme,\n\toverrideTheme: Partial< ChartTheme >\n): CompleteChartTheme;\nexport function mergeThemes(\n\tbaseTheme: ChartTheme,\n\toverrideTheme: Partial< ChartTheme >\n): ChartTheme;\nexport function mergeThemes(\n\tbaseTheme: ChartTheme,\n\toverrideTheme: Partial< ChartTheme >\n): ChartTheme {\n\t// Use deepmerge to properly merge nested objects, with overrideTheme taking precedence\n\treturn deepmerge( baseTheme, overrideTheme, {\n\t\t// Ensure arrays are replaced rather than concatenated\n\t\tarrayMerge: ( _destinationArray, sourceArray ) => sourceArray,\n\t} ) as ChartTheme;\n}\n","import { color as d3Color, hsl as d3Hsl } from '@visx/vendor/d3-color';\n\n/**\n * Check if a value is a valid 6-digit hex color\n * @param hex - The value to check\n * @return true if valid hex color format (e.g., '#ff0000')\n */\nexport const isValidHexColor = ( hex: unknown ): hex is string => {\n\treturn typeof hex === 'string' && /^#[0-9a-fA-F]{6}$/.test( hex );\n};\n\n/**\n * Validate hex color format, throwing descriptive errors if invalid\n * @param hex - The hex color string to validate\n * @throws {Error} if hex string is malformed\n */\nexport const validateHexColor = ( hex: unknown ): void => {\n\tif ( isValidHexColor( hex ) ) {\n\t\treturn;\n\t}\n\n\t// Provide specific error messages for common issues\n\tif ( typeof hex !== 'string' ) {\n\t\tthrow new Error( 'Hex color must be a string' );\n\t}\n\tif ( ! hex.startsWith( '#' ) ) {\n\t\tthrow new Error( 'Hex color must start with #' );\n\t}\n\tif ( hex.length !== 7 ) {\n\t\tthrow new Error( 'Hex color must be 7 characters long (e.g., #ff0000)' );\n\t}\n\tthrow new Error( 'Hex color contains invalid characters. Only 0-9, a-f, A-F are allowed' );\n};\n\n/**\n * Convert hex color to rgba with specified opacity.\n * This is genuinely reusable across chart components.\n * @param hex - The hex color string (e.g., '#ff0000')\n * @param alpha - The opacity value. Values outside the [0, 1] range will be clamped by the underlying d3 color library.\n * @return The rgba color string (e.g., 'rgba(255, 0, 0, 0.5)')\n * @throws {Error} if hex string is malformed or alpha is not a valid number\n */\nexport const hexToRgba = ( hex: string, alpha: number ): string => {\n\tvalidateHexColor( hex );\n\n\tif ( typeof alpha !== 'number' || isNaN( alpha ) ) {\n\t\tthrow new Error( 'Alpha must be a number' );\n\t}\n\n\t// Safe to use non-null assertion since validateHexColor ensures valid hex\n\treturn d3Color( hex )!.copy( { opacity: alpha } ).formatRgb();\n};\n\n/**\n * Calculate the perceptual distance between two HSL colors\n * @param hsl1 - first color in HSL format [h, s, l]\n * @param hsl2 - second color in HSL format [h, s, l]\n * @return distance value (0-100+, lower means more similar)\n */\nexport const getColorDistance = (\n\thsl1: [ number, number, number ],\n\thsl2: [ number, number, number ]\n): number => {\n\tconst [ h1, s1, l1 ] = hsl1;\n\tconst [ h2, s2, l2 ] = hsl2;\n\n\t// Calculate hue difference, accounting for circular nature (0° = 360°)\n\tlet hueDiff = Math.abs( h1 - h2 );\n\thueDiff = Math.min( hueDiff, 360 - hueDiff );\n\n\t// Weight the differences: hue is most important, then lightness, then saturation\n\tconst hueWeight = 2;\n\tconst lightnessWeight = 1;\n\tconst saturationWeight = 0.5;\n\n\treturn Math.sqrt(\n\t\tMath.pow( hueDiff * hueWeight, 2 ) +\n\t\t\tMath.pow( ( l1 - l2 ) * lightnessWeight, 2 ) +\n\t\t\tMath.pow( ( s1 - s2 ) * saturationWeight, 2 )\n\t);\n};\n\n/**\n * Parse an HSL string like 'hsl(120, 50%, 50%)' into an HSL tuple.\n *\n * @param hslString - HSL color string\n * @return HSL tuple [h, s, l] or null if invalid\n */\nexport const parseHslString = ( hslString: string ): [ number, number, number ] | null => {\n\tconst lower = hslString.toLowerCase().trim();\n\n\t// Check prefix - d3-color handles the parsing\n\tif ( ! lower.startsWith( 'hsl(' ) ) {\n\t\treturn null;\n\t}\n\n\tconst parsed = d3Hsl( lower );\n\n\t// d3Hsl returns NaN values for invalid colors\n\tif ( isNaN( parsed.h ) && isNaN( parsed.s ) && isNaN( parsed.l ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize hue to 0-360 range (d3 may return NaN for achromatic colors)\n\tconst h = isNaN( parsed.h ) ? 0 : ( ( parsed.h % 360 ) + 360 ) % 360;\n\n\t// d3-color uses 0-1 scale, convert to 0-100\n\treturn [ h, parsed.s * 100, parsed.l * 100 ];\n};\n\n/**\n * Parse an RGB string like 'rgb(255, 0, 0)' into a hex color.\n *\n * @param rgbString - RGB color string\n * @return hex color string or null if invalid\n */\nexport const parseRgbString = ( rgbString: string ): string | null => {\n\tconst lower = rgbString.toLowerCase().trim();\n\n\t// Check prefix - only handle rgb(), not rgba()\n\tif ( ! lower.startsWith( 'rgb(' ) || lower.startsWith( 'rgba(' ) ) {\n\t\treturn null;\n\t}\n\n\tconst parsed = d3Color( lower );\n\n\t// d3Color returns null for invalid colors\n\tif ( ! parsed ) {\n\t\treturn null;\n\t}\n\n\t// d3-color clamps values automatically\n\treturn parsed.formatHex();\n};\n\n/**\n * Normalize any CSS color value to a hex color string.\n * Handles hex colors, HSL strings, RGB strings, and CSS variables.\n *\n * @param color - Any CSS color value\n * @param element - Optional DOM element for resolving CSS variables\n * @param resolveCss - Function to resolve CSS variables (injected for testability)\n * @return hex color string, or the original value if conversion fails\n */\nexport const normalizeColorToHex = (\n\tcolor: string,\n\telement?: HTMLElement | null,\n\tresolveCss?: ( value: string, el?: HTMLElement | null ) => string | null\n): string => {\n\tif ( ! color || typeof color !== 'string' ) {\n\t\treturn '';\n\t}\n\n\t// Already a valid hex color (6-digit format)\n\tif ( /^#[0-9a-fA-F]{6}$/.test( color ) ) {\n\t\treturn color;\n\t}\n\n\tconst trimmed = color.trim().toLowerCase();\n\n\t// Handle 3-digit hex colors - expand to 6-digit\n\tif ( /^#[0-9a-f]{3}$/i.test( trimmed ) ) {\n\t\tconst r = trimmed[ 1 ];\n\t\tconst g = trimmed[ 2 ];\n\t\tconst b = trimmed[ 3 ];\n\t\treturn `#${ r }${ r }${ g }${ g }${ b }${ b }`;\n\t}\n\n\t// Handle CSS variables - must be resolved before d3-color can parse\n\tif ( trimmed.startsWith( '--' ) || trimmed.startsWith( 'var(' ) ) {\n\t\tif ( resolveCss ) {\n\t\t\tconst resolved = resolveCss( color, element );\n\t\t\tif ( resolved ) {\n\t\t\t\t// Recursively normalize the resolved value\n\t\t\t\treturn normalizeColorToHex( resolved, element, resolveCss );\n\t\t\t}\n\t\t}\n\t\t// Can't resolve CSS variable, return original\n\t\treturn color;\n\t}\n\n\t// Handle HSL and RGB strings using d3-color\n\tif ( trimmed.startsWith( 'hsl(' ) || trimmed.startsWith( 'rgb(' ) ) {\n\t\t// Reject rgba() - we only handle rgb()\n\t\tif ( trimmed.startsWith( 'rgba(' ) ) {\n\t\t\treturn color;\n\t\t}\n\t\tconst parsed = d3Color( trimmed );\n\t\tif ( parsed ) {\n\t\t\treturn parsed.formatHex();\n\t\t}\n\t\treturn color;\n\t}\n\n\t// Unknown format, return as-is\n\treturn color;\n};\n\n/**\n * Lighten a hex color by blending it with white.\n * Useful for creating color gradients or lighter variants.\n *\n * @param hex - Hex color string (e.g., '#98C8DF')\n * @param blend - Blend amount with white (0 = original color, 1 = white)\n * @return Lightened hex color string (e.g., '#cce4ef')\n * @throws {Error} if hex string is malformed\n */\nexport const lightenHexColor = ( hex: string, blend: number ): string => {\n\tvalidateHexColor( hex );\n\n\tconst r = parseInt( hex.slice( 1, 3 ), 16 );\n\tconst g = parseInt( hex.slice( 3, 5 ), 16 );\n\tconst b = parseInt( hex.slice( 5, 7 ), 16 );\n\n\t// Blend with white (255, 255, 255)\n\tconst newR = Math.round( r + ( 255 - r ) * blend );\n\tconst newG = Math.round( g + ( 255 - g ) * blend );\n\tconst newB = Math.round( b + ( 255 - b ) * blend );\n\n\treturn `#${ newR.toString( 16 ).padStart( 2, '0' ) }${ newG\n\t\t.toString( 16 )\n\t\t.padStart( 2, '0' ) }${ newB.toString( 16 ).padStart( 2, '0' ) }`;\n};\n","/**\n * Pattern for valid CSS custom property names (e.g., '--my-color', '--jp-gray-10')\n */\nconst CSS_VAR_NAME_PATTERN = /^--[\\w-]+$/;\n\n/**\n * Resolves a CSS custom property (variable) to its computed value.\n * Handles multiple formats:\n * - Plain variable names: '--my-color'\n * - CSS var() syntax: 'var(--my-color)'\n * - CSS var() with fallback: 'var(--my-color, #ffffff)'\n * - Regular values (returned as-is): '#ffffff', 'red'\n *\n * @param value - A CSS variable name, var() expression, or regular value\n * @param element - Optional DOM element to resolve the variable from (defaults to document.documentElement)\n * @return The resolved value, fallback value, or null if unresolvable\n */\nexport const resolveCssVariable = (\n\tvalue: string,\n\telement?: HTMLElement | null\n): string | null => {\n\tif ( ! value ) {\n\t\treturn null;\n\t}\n\n\t// Check if it's a var() expression: var(--name) or var(--name, fallback)\n\t// Parse manually to avoid regex backtracking vulnerabilities\n\tif ( value.startsWith( 'var(' ) && value.endsWith( ')' ) ) {\n\t\tconst parsed = parseVarExpression( value );\n\n\t\tif ( parsed ) {\n\t\t\tconst resolved = resolveVariableName( parsed.varName, element );\n\n\t\t\treturn resolved || parsed.fallback;\n\t\t}\n\t}\n\n\t// Check if it's a plain variable name (starts with --)\n\tif ( value.startsWith( '--' ) ) {\n\t\treturn resolveVariableName( value, element );\n\t}\n\n\t// Return regular values as-is (e.g., '#ffffff', 'red')\n\treturn value;\n};\n\n/**\n * Parses a var() expression into its variable name and optional fallback.\n * Uses string manipulation instead of complex regex to avoid ReDoS.\n *\n * @param expr - A var() expression like 'var(--name)' or 'var(--name, fallback)'\n * @return Parsed result or null if invalid\n */\nfunction parseVarExpression( expr: string ): { varName: string; fallback: string | null } | null {\n\t// Remove 'var(' prefix and ')' suffix\n\tconst inner = expr.slice( 4, -1 ).trim();\n\n\tif ( ! inner.startsWith( '--' ) ) {\n\t\treturn null;\n\t}\n\n\t// Find the comma separator (if any)\n\tconst commaIndex = inner.indexOf( ',' );\n\n\tif ( commaIndex === -1 ) {\n\t\t// No fallback: var(--name)\n\t\tconst varName = inner.trim();\n\t\t// Validate variable name format\n\t\tif ( ! CSS_VAR_NAME_PATTERN.test( varName ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn { varName, fallback: null };\n\t}\n\n\t// Has fallback: var(--name, fallback)\n\tconst varName = inner.slice( 0, commaIndex ).trim();\n\n\t// Validate variable name format\n\tif ( ! CSS_VAR_NAME_PATTERN.test( varName ) ) {\n\t\treturn null;\n\t}\n\n\tconst fallback = inner.slice( commaIndex + 1 ).trim();\n\n\treturn { varName, fallback: fallback || null };\n}\n\n/**\n * Resolves a plain CSS variable name to its computed value.\n *\n * @param varName - A CSS variable name like '--my-color'\n * @param element - Optional DOM element to resolve from\n * @return The computed value or null\n */\nfunction resolveVariableName( varName: string, element?: HTMLElement | null ): string | null {\n\tif ( typeof window === 'undefined' || typeof document === 'undefined' ) {\n\t\treturn null;\n\t}\n\n\ttry {\n\t\tconst targetElement = element || document.documentElement;\n\t\tconst computedValue = getComputedStyle( targetElement ).getPropertyValue( varName ).trim();\n\n\t\treturn computedValue || null;\n\t} catch {\n\t\t// Return null if getComputedStyle throws (e.g., detached element)\n\t\treturn null;\n\t}\n}\n"]}