@automattic/charts 0.50.1 → 0.50.2

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 (84) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/{chunk-KFWS6CHF.cjs → chunk-3PRIZR7Y.cjs} +26 -26
  3. package/dist/{chunk-KFWS6CHF.cjs.map → chunk-3PRIZR7Y.cjs.map} +1 -1
  4. package/dist/{chunk-FX2PTUFC.cjs → chunk-5NI3TGRD.cjs} +1 -1
  5. package/dist/{chunk-FX2PTUFC.cjs.map → chunk-5NI3TGRD.cjs.map} +1 -1
  6. package/dist/{chunk-5C2OMRXX.js → chunk-6SGGF26Z.js} +9 -9
  7. package/dist/{chunk-AS2SQOQ7.cjs → chunk-6UZHWL6W.cjs} +23 -23
  8. package/dist/{chunk-AS2SQOQ7.cjs.map → chunk-6UZHWL6W.cjs.map} +1 -1
  9. package/dist/{chunk-YH6KCYUQ.js → chunk-6WQWN5BF.js} +11 -11
  10. package/dist/{chunk-AVHWSXUP.js → chunk-7IZD3F7B.js} +1 -1
  11. package/dist/chunk-7IZD3F7B.js.map +1 -0
  12. package/dist/{chunk-SUMZU44N.js → chunk-7OWIZ5S7.js} +3 -3
  13. package/dist/{chunk-LACY6G6I.cjs → chunk-BZQFCAX7.cjs} +9 -9
  14. package/dist/{chunk-LACY6G6I.cjs.map → chunk-BZQFCAX7.cjs.map} +1 -1
  15. package/dist/{chunk-TYYW4BG3.js → chunk-D3E235JJ.js} +1 -1
  16. package/dist/chunk-D3E235JJ.js.map +1 -0
  17. package/dist/{chunk-S4ICPPSV.cjs → chunk-EKVFMS3A.cjs} +24 -24
  18. package/dist/{chunk-S4ICPPSV.cjs.map → chunk-EKVFMS3A.cjs.map} +1 -1
  19. package/dist/{chunk-CC2UH5Y7.js → chunk-EKVLCYHS.js} +4 -4
  20. package/dist/{chunk-WPSB7BRR.cjs → chunk-FI5B6KSH.cjs} +1 -1
  21. package/dist/chunk-FI5B6KSH.cjs.map +1 -0
  22. package/dist/{chunk-3VZG47VH.cjs → chunk-HA7WACBI.cjs} +8 -8
  23. package/dist/{chunk-3VZG47VH.cjs.map → chunk-HA7WACBI.cjs.map} +1 -1
  24. package/dist/{chunk-3ESDEDX4.cjs → chunk-KE4EDAQI.cjs} +14 -14
  25. package/dist/{chunk-3ESDEDX4.cjs.map → chunk-KE4EDAQI.cjs.map} +1 -1
  26. package/dist/{chunk-OZYA4QTY.js → chunk-MRCTAUHL.js} +2 -2
  27. package/dist/{chunk-I7MCBD76.cjs → chunk-N4ZDNOPY.cjs} +10 -10
  28. package/dist/{chunk-I7MCBD76.cjs.map → chunk-N4ZDNOPY.cjs.map} +1 -1
  29. package/dist/{chunk-MKU6O3UY.cjs → chunk-PEUZZ3WY.cjs} +25 -25
  30. package/dist/{chunk-MKU6O3UY.cjs.map → chunk-PEUZZ3WY.cjs.map} +1 -1
  31. package/dist/{chunk-BUSMF7CB.js → chunk-PTEEI2QM.js} +9 -9
  32. package/dist/{chunk-P7IYRJQW.js → chunk-RUG2O62B.js} +5 -5
  33. package/dist/{chunk-JVO6AK43.cjs → chunk-SLO4NLKC.cjs} +29 -29
  34. package/dist/{chunk-JVO6AK43.cjs.map → chunk-SLO4NLKC.cjs.map} +1 -1
  35. package/dist/{chunk-QDWN3ATP.js → chunk-VOWX5TBY.js} +8 -8
  36. package/dist/{chunk-Q2VQM74O.js → chunk-XVMWJANV.js} +3 -3
  37. package/dist/components/bar-chart/index.cjs +6 -6
  38. package/dist/components/bar-chart/index.js +5 -5
  39. package/dist/components/bar-list-chart/index.cjs +7 -7
  40. package/dist/components/bar-list-chart/index.js +6 -6
  41. package/dist/components/conversion-funnel-chart/index.cjs +4 -4
  42. package/dist/components/conversion-funnel-chart/index.js +3 -3
  43. package/dist/components/leaderboard-chart/index.cjs +6 -6
  44. package/dist/components/leaderboard-chart/index.d.cts +1 -1
  45. package/dist/components/leaderboard-chart/index.d.ts +1 -1
  46. package/dist/components/leaderboard-chart/index.js +5 -5
  47. package/dist/components/legend/index.cjs +4 -4
  48. package/dist/components/legend/index.js +3 -3
  49. package/dist/components/line-chart/index.cjs +6 -6
  50. package/dist/components/line-chart/index.js +5 -5
  51. package/dist/components/pie-chart/index.cjs +7 -7
  52. package/dist/components/pie-chart/index.js +6 -6
  53. package/dist/components/pie-semi-circle-chart/index.cjs +7 -7
  54. package/dist/components/pie-semi-circle-chart/index.js +6 -6
  55. package/dist/{format-metric-value-DVBZSN0R.d.cts → format-metric-value-MXm5DtQ_.d.cts} +1 -1
  56. package/dist/{format-metric-value-DVBZSN0R.d.ts → format-metric-value-MXm5DtQ_.d.ts} +1 -1
  57. package/dist/hooks/index.cjs +3 -3
  58. package/dist/hooks/index.js +2 -2
  59. package/dist/index.cjs +16 -16
  60. package/dist/index.cjs.map +1 -1
  61. package/dist/index.js +23 -23
  62. package/dist/providers/index.cjs +3 -3
  63. package/dist/providers/index.js +2 -2
  64. package/dist/utils/index.cjs +2 -2
  65. package/dist/utils/index.d.cts +7 -7
  66. package/dist/utils/index.d.ts +7 -7
  67. package/dist/utils/index.js +1 -1
  68. package/package.json +1 -1
  69. package/src/components/private/with-responsive/with-responsive.tsx +1 -1
  70. package/src/utils/color-utils.ts +7 -7
  71. package/src/utils/format-metric-value.ts +1 -1
  72. package/src/utils/format-percentage.ts +1 -1
  73. package/dist/chunk-AVHWSXUP.js.map +0 -1
  74. package/dist/chunk-TYYW4BG3.js.map +0 -1
  75. package/dist/chunk-WPSB7BRR.cjs.map +0 -1
  76. /package/dist/{chunk-5C2OMRXX.js.map → chunk-6SGGF26Z.js.map} +0 -0
  77. /package/dist/{chunk-YH6KCYUQ.js.map → chunk-6WQWN5BF.js.map} +0 -0
  78. /package/dist/{chunk-SUMZU44N.js.map → chunk-7OWIZ5S7.js.map} +0 -0
  79. /package/dist/{chunk-CC2UH5Y7.js.map → chunk-EKVLCYHS.js.map} +0 -0
  80. /package/dist/{chunk-OZYA4QTY.js.map → chunk-MRCTAUHL.js.map} +0 -0
  81. /package/dist/{chunk-BUSMF7CB.js.map → chunk-PTEEI2QM.js.map} +0 -0
  82. /package/dist/{chunk-P7IYRJQW.js.map → chunk-RUG2O62B.js.map} +0 -0
  83. /package/dist/{chunk-QDWN3ATP.js.map → chunk-VOWX5TBY.js.map} +0 -0
  84. /package/dist/{chunk-Q2VQM74O.js.map → chunk-XVMWJANV.js.map} +0 -0
package/CHANGELOG.md CHANGED
@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.50.2] - 2025-12-08
9
+ ### Changed
10
+ - Internal updates.
11
+
8
12
  ## [0.50.1] - 2025-12-01
9
13
  ### Changed
10
14
  - Update package dependencies. [#46143]
@@ -583,6 +587,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
583
587
  - Fixed lints following ESLint rule changes for TS [#40584]
584
588
  - Fixing a bug in Chart storybook data. [#40640]
585
589
 
590
+ [0.50.2]: https://github.com/Automattic/charts/compare/v0.50.1...v0.50.2
586
591
  [0.50.1]: https://github.com/Automattic/charts/compare/v0.50.0...v0.50.1
587
592
  [0.50.0]: https://github.com/Automattic/charts/compare/v0.49.1...v0.50.0
588
593
  [0.49.1]: https://github.com/Automattic/charts/compare/v0.49.0...v0.49.1
@@ -1,15 +1,15 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
2
2
 
3
+ var _chunk5NI3TGRDcjs = require('./chunk-5NI3TGRD.cjs');
3
4
 
4
- var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
5
5
 
6
6
 
7
- var _chunkFX2PTUFCcjs = require('./chunk-FX2PTUFC.cjs');
8
7
 
8
+ var _chunkBZQFCAX7cjs = require('./chunk-BZQFCAX7.cjs');
9
9
 
10
10
 
11
11
 
12
- var _chunkLACY6G6Icjs = require('./chunk-LACY6G6I.cjs');
12
+ var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
13
13
 
14
14
 
15
15
 
@@ -23,10 +23,10 @@ var _chunkLACY6G6Icjs = require('./chunk-LACY6G6I.cjs');
23
23
 
24
24
 
25
25
 
26
- var _chunkI7MCBD76cjs = require('./chunk-I7MCBD76.cjs');
26
+ var _chunkN4ZDNOPYcjs = require('./chunk-N4ZDNOPY.cjs');
27
27
 
28
28
 
29
- var _chunkWPSB7BRRcjs = require('./chunk-WPSB7BRR.cjs');
29
+ var _chunkFI5B6KSHcjs = require('./chunk-FI5B6KSH.cjs');
30
30
 
31
31
  // src/components/bar-chart/bar-chart.tsx
32
32
  var _numberformatters = require('@automattic/number-formatters');
@@ -189,16 +189,16 @@ var BarChartInternal = ({
189
189
  children
190
190
  }) => {
191
191
  const horizontal = orientation === "horizontal";
192
- const chartId = _chunkI7MCBD76cjs.useChartId.call(void 0, providedChartId);
193
- const theme = _chunkI7MCBD76cjs.useXYChartTheme.call(void 0, data);
194
- const dataSorted = _chunkI7MCBD76cjs.useChartDataTransform.call(void 0, data);
195
- const dataWithVisibleZeros = _chunkI7MCBD76cjs.useZeroValueDisplay.call(void 0, dataSorted, {
192
+ const chartId = _chunkN4ZDNOPYcjs.useChartId.call(void 0, providedChartId);
193
+ const theme = _chunkN4ZDNOPYcjs.useXYChartTheme.call(void 0, data);
194
+ const dataSorted = _chunkN4ZDNOPYcjs.useChartDataTransform.call(void 0, data);
195
+ const dataWithVisibleZeros = _chunkN4ZDNOPYcjs.useZeroValueDisplay.call(void 0, dataSorted, {
196
196
  enabled: showZeroValues
197
197
  });
198
- const legendItems = _chunkLACY6G6Icjs.useChartLegendItems.call(void 0, dataSorted);
198
+ const legendItems = _chunkBZQFCAX7cjs.useChartLegendItems.call(void 0, dataSorted);
199
199
  const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);
200
- const defaultMargin = _chunkI7MCBD76cjs.useChartMargin.call(void 0, height, chartOptions, dataSorted, theme, horizontal);
201
- const [legendRef, legendHeight] = _chunkI7MCBD76cjs.useElementHeight.call(void 0, );
200
+ const defaultMargin = _chunkN4ZDNOPYcjs.useChartMargin.call(void 0, height, chartOptions, dataSorted, theme, horizontal);
201
+ const [legendRef, legendHeight] = _chunkN4ZDNOPYcjs.useElementHeight.call(void 0, );
202
202
  const chartRef = _react.useRef.call(void 0, null);
203
203
  const [selectedIndex, setSelectedIndex] = _react.useState.call(void 0, void 0);
204
204
  const [isNavigating, setIsNavigating] = _react.useState.call(void 0, false);
@@ -211,8 +211,8 @@ var BarChartInternal = ({
211
211
  chartRef,
212
212
  totalPoints
213
213
  });
214
- const { getElementStyles, isSeriesVisible } = _chunkI7MCBD76cjs.useGlobalChartsContext.call(void 0, );
215
- const providerTheme = _chunkI7MCBD76cjs.useGlobalChartsTheme.call(void 0, );
214
+ const { getElementStyles, isSeriesVisible } = _chunkN4ZDNOPYcjs.useGlobalChartsContext.call(void 0, );
215
+ const providerTheme = _chunkN4ZDNOPYcjs.useGlobalChartsTheme.call(void 0, );
216
216
  const seriesWithVisibility = _react.useMemo.call(void 0, () => {
217
217
  if (!chartId || !legendInteractive) {
218
218
  return dataWithVisibleZeros.map((series, index) => ({
@@ -330,21 +330,21 @@ var BarChartInternal = ({
330
330
  }),
331
331
  [orientation, withPatterns]
332
332
  );
333
- _chunkI7MCBD76cjs.useChartRegistration.call(void 0, {
333
+ _chunkN4ZDNOPYcjs.useChartRegistration.call(void 0, {
334
334
  chartId,
335
335
  legendItems,
336
336
  chartType: "bar",
337
337
  isDataValid,
338
338
  metadata: chartMetadata
339
339
  });
340
- const prefersReducedMotion = _chunkI7MCBD76cjs.usePrefersReducedMotion.call(void 0, );
340
+ const prefersReducedMotion = _chunkN4ZDNOPYcjs.usePrefersReducedMotion.call(void 0, );
341
341
  if (error) {
342
342
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _clsx2.default.call(void 0, "bar-chart", bar_chart_module_default["bar-chart"]), children: error });
343
343
  }
344
344
  const gridVisibility = _nullishCoalesce(gridVisibilityProp, () => ( chartOptions.gridVisibility));
345
345
  const highlightedBarStyle = createKeyboardHighlightStyle();
346
346
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
347
- _chunkLACY6G6Icjs.SingleChartContext.Provider,
347
+ _chunkBZQFCAX7cjs.SingleChartContext.Provider,
348
348
  {
349
349
  value: {
350
350
  chartId,
@@ -461,7 +461,7 @@ var BarChartInternal = ({
461
461
  }
462
462
  ),
463
463
  showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
464
- _chunkLACY6G6Icjs.Legend,
464
+ _chunkBZQFCAX7cjs.Legend,
465
465
  {
466
466
  orientation: legendOrientation,
467
467
  position: legendPosition,
@@ -484,20 +484,20 @@ var BarChartInternal = ({
484
484
  );
485
485
  };
486
486
  var BarChartWithProvider = (props) => {
487
- const existingContext = _react.useContext.call(void 0, _chunkI7MCBD76cjs.GlobalChartsContext);
487
+ const existingContext = _react.useContext.call(void 0, _chunkN4ZDNOPYcjs.GlobalChartsContext);
488
488
  if (existingContext) {
489
489
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarChartInternal, { ...props });
490
490
  }
491
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkI7MCBD76cjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarChartInternal, { ...props }) });
491
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4ZDNOPYcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BarChartInternal, { ...props }) });
492
492
  };
493
493
  BarChartWithProvider.displayName = "BarChart";
494
- var BarChart = _chunkWPSB7BRRcjs.attachSubComponents.call(void 0, BarChartWithProvider, {
495
- Legend: _chunkLACY6G6Icjs.Legend
494
+ var BarChart = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0, BarChartWithProvider, {
495
+ Legend: _chunkBZQFCAX7cjs.Legend
496
496
  });
497
- var BarChartResponsive = _chunkWPSB7BRRcjs.attachSubComponents.call(void 0,
498
- _chunkFX2PTUFCcjs.withResponsive.call(void 0, BarChartWithProvider),
497
+ var BarChartResponsive = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0,
498
+ _chunk5NI3TGRDcjs.withResponsive.call(void 0, BarChartWithProvider),
499
499
  {
500
- Legend: _chunkLACY6G6Icjs.Legend
500
+ Legend: _chunkBZQFCAX7cjs.Legend
501
501
  }
502
502
  );
503
503
 
@@ -505,4 +505,4 @@ var BarChartResponsive = _chunkWPSB7BRRcjs.attachSubComponents.call(void 0,
505
505
 
506
506
 
507
507
  exports.BarChart = BarChart; exports.BarChartResponsive = BarChartResponsive;
508
- //# sourceMappingURL=chunk-KFWS6CHF.cjs.map
508
+ //# sourceMappingURL=chunk-3PRIZR7Y.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-KFWS6CHF.cjs","../src/components/bar-chart/bar-chart.tsx","../src/components/bar-chart/bar-chart.module.scss","../src/components/bar-chart/private/use-bar-chart-options.ts"],"names":["useMemo"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-KFWS6CHF.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 clsx from 'clsx';\nimport { useCallback, useContext, useState, useRef, useMemo } from 'react';\nimport {\n\tuseXYChartTheme,\n\tuseChartDataTransform,\n\tuseZeroValueDisplay,\n\tuseChartMargin,\n\tuseElementHeight,\n\tusePrefersReducedMotion,\n} from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n\tGlobalChartsContext,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';\nimport styles from './bar-chart.module.scss';\nimport { useBarChartOptions } from './private';\nimport type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';\nimport type { FC, ReactNode, ComponentType } from 'react';\n\nexport interface BarChartProps extends BaseChartProps< SeriesData[] > {\n\trenderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;\n\torientation?: 'horizontal' | 'vertical';\n\twithPatterns?: boolean;\n\tshowZeroValues?: boolean;\n\tlegendInteractive?: boolean;\n\tchildren?: ReactNode;\n}\n\n// Base props type with optional responsive properties\ntype BarChartBaseProps = Optional< BarChartProps, 'width' | 'height' | 'size' >;\n\n// Composition API types\ninterface BarChartSubComponents {\n\tLegend: ComponentType< React.ComponentProps< typeof Legend > >;\n}\n\ntype BarChartComponent = FC< BarChartBaseProps > & BarChartSubComponents;\ntype BarChartResponsiveComponent = FC< BarChartBaseProps & ResponsiveConfig > &\n\tBarChartSubComponents;\n\n// Validation function similar to LineChart\nconst validateData = ( data: SeriesData[] ) => {\n\tif ( ! data?.length ) return 'No data available';\n\n\tconst hasInvalidData = data.some( series =>\n\t\tseries.data.some(\n\t\t\tpoint =>\n\t\t\t\tisNaN( point.value as number ) ||\n\t\t\t\tpoint.value === null ||\n\t\t\t\tpoint.value === undefined ||\n\t\t\t\t( ! point.label &&\n\t\t\t\t\t( ! ( 'date' in point && point.date ) || isNaN( point.date.getTime() ) ) )\n\t\t)\n\t);\n\n\tif ( hasInvalidData ) return 'Invalid data';\n\treturn null;\n};\n\nconst getPatternId = ( chartId: string, index: number ) => `bar-pattern-${ chartId }-${ index }`;\n\nconst BarChartInternal: FC< BarChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth,\n\theight = 400,\n\tclassName,\n\tmargin,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendMaxWidth,\n\tlegendTextOverflow = 'wrap',\n\tlegendItemClassName,\n\tlegendShape = 'rect',\n\tgridVisibility: gridVisibilityProp,\n\trenderTooltip,\n\toptions = {},\n\torientation = 'vertical',\n\twithPatterns = false,\n\tshowZeroValues = false,\n\tlegendInteractive = false,\n\tanimation,\n\tchildren,\n} ) => {\n\tconst horizontal = orientation === 'horizontal';\n\tconst chartId = useChartId( providedChartId );\n\tconst theme = useXYChartTheme( data );\n\n\tconst dataSorted = useChartDataTransform( data );\n\n\t// Transform data to add a small value for zero bars to make them visible\n\tconst dataWithVisibleZeros = useZeroValueDisplay( dataSorted, {\n\t\tenabled: showZeroValues,\n\t} );\n\n\t// Create legend items using the reusable hook\n\tconst legendItems = useChartLegendItems( dataSorted );\n\tconst chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );\n\tconst defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst chartRef = useRef< HTMLDivElement >( null );\n\tconst [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );\n\tconst [ isNavigating, setIsNavigating ] = useState( false );\n\n\tconst totalPoints =\n\t\tMath.max( 0, ...data.map( series => series.data?.length || 0 ) ) * data.length;\n\n\t// Use the keyboard navigation hook\n\tconst { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {\n\t\tselectedIndex,\n\t\tsetSelectedIndex,\n\t\tisNavigating,\n\t\tsetIsNavigating,\n\t\tchartRef,\n\t\ttotalPoints,\n\t} );\n\n\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\tconst providerTheme = useGlobalChartsTheme();\n\n\t// Add visibility information to series when using interactive legends\n\tconst seriesWithVisibility = useMemo( () => {\n\t\tif ( ! chartId || ! legendInteractive ) {\n\t\t\treturn dataWithVisibleZeros.map( ( series, index ) => ( {\n\t\t\t\tseries,\n\t\t\t\tindex,\n\t\t\t\tisVisible: true,\n\t\t\t} ) );\n\t\t}\n\t\treturn dataWithVisibleZeros.map( ( series, index ) => ( {\n\t\t\tseries,\n\t\t\tindex,\n\t\t\tisVisible: isSeriesVisible( chartId, series.label ),\n\t\t} ) );\n\t}, [ dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive ] );\n\n\t// Check if all series are hidden\n\tconst allSeriesHidden = useMemo( () => {\n\t\treturn seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );\n\t}, [ seriesWithVisibility ] );\n\n\tconst getBarBackground = useCallback(\n\t\t( index: number ) => () =>\n\t\t\twithPatterns\n\t\t\t\t? `url(#${ getPatternId( chartId, index ) })`\n\t\t\t\t: getElementStyles( { data: dataSorted[ index ], index } ).color,\n\t\t[ withPatterns, getElementStyles, dataSorted, chartId ]\n\t);\n\n\tconst renderDefaultTooltip = useCallback(\n\t\t( { tooltipData }: RenderTooltipParams< DataPointDate > ) => {\n\t\t\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\t\t\tif ( ! nearestDatum ) return null;\n\n\t\t\treturn (\n\t\t\t\t<div className={ styles[ 'bar-chart__tooltip' ] }>\n\t\t\t\t\t<div className={ styles[ 'bar-chart__tooltip-header' ] }>\n\t\t\t\t\t\t{ tooltipData?.nearestDatum?.key }\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={ styles[ 'bar-chart__tooltip-row' ] }>\n\t\t\t\t\t\t<span className={ styles[ 'bar-chart__tooltip-label' ] }>\n\t\t\t\t\t\t\t{ chartOptions.tooltip.labelFormatter(\n\t\t\t\t\t\t\t\tnearestDatum.label || ( nearestDatum.date ? nearestDatum.date.getTime() : 0 ),\n\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t[]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className={ styles[ 'bar-chart__tooltip-value' ] }>\n\t\t\t\t\t\t\t{ formatNumber( nearestDatum.value as number ) }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[ chartOptions.tooltip ]\n\t);\n\n\tconst renderPattern = useCallback(\n\t\t( index: number, color: string ) => {\n\t\t\tconst patternType = index % 4;\n\t\t\tconst id = getPatternId( chartId, index );\n\t\t\tconst commonProps = {\n\t\t\t\tid,\n\t\t\t\tstroke: 'white',\n\t\t\t\tstrokeWidth: 1,\n\t\t\t\tbackground: color,\n\t\t\t};\n\n\t\t\tswitch ( patternType ) {\n\t\t\t\tcase 0:\n\t\t\t\tdefault:\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PatternLines\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\twidth={ 5 }\n\t\t\t\t\t\t\theight={ 5 }\n\t\t\t\t\t\t\torientation={ [ 'diagonal' ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\tcase 1:\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PatternCircles key={ id } { ...commonProps } width={ 6 } height={ 6 } fill=\"white\" />\n\t\t\t\t\t);\n\t\t\t\tcase 2:\n\t\t\t\t\treturn <PatternWaves key={ id } { ...commonProps } width={ 4 } height={ 4 } />;\n\t\t\t\tcase 3:\n\t\t\t\t\treturn <PatternHexagons key={ id } { ...commonProps } size={ 8 } height={ 3 } />;\n\t\t\t}\n\t\t},\n\t\t[ chartId ]\n\t);\n\n\tconst createPatternBorderStyle = useCallback(\n\t\t( index: number, color: string ) => {\n\t\t\tconst patternId = getPatternId( chartId, index );\n\t\t\treturn `\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\t\t},\n\t\t[ chartId ]\n\t);\n\n\tconst createKeyboardHighlightStyle = useCallback( () => {\n\t\tif ( selectedIndex === undefined ) return '';\n\n\t\t// Calculate which bar should be highlighted based on selectedIndex\n\t\t// Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n\t\tconst maxDataPoints = Math.max( ...data.map( s => s.data.length ) );\n\t\tconst dataPointIndex = Math.floor( selectedIndex / data.length );\n\t\tconst seriesIndex = selectedIndex % data.length;\n\n\t\t// Only highlight if we're within valid bounds\n\t\tif ( dataPointIndex >= maxDataPoints || seriesIndex >= data.length ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst seriesData = data[ seriesIndex ];\n\t\tif ( dataPointIndex >= seriesData.data.length ) {\n\t\t\treturn '';\n\t\t}\n\n\t\t// Based on the DOM structure analysis:\n\t\t// - All bars are in a single .visx-bar-group\n\t\t// - Bars are ordered as: [series1[0], series1[1], series2[0], series2[1], ...]\n\t\t// - So we need to calculate the actual bar index in the DOM\n\t\tconst actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;\n\n\t\t// Use a CSS class selector instead of ID since useId() generates invalid CSS ID characters\n\t\tconst generatedStyles = `\n\t\t\t.bar-chart[data-chart-id=\"bar-chart-${ chartId }\"] .visx-bar-group .visx-bar:nth-child(${\n\t\t\t\tactualBarIndex + 1\n\t\t\t}) {\n\t\t\t\tstroke: #005fcc;\n\t\t\t\tstroke-width: 2px;\n\t\t\t}\n\t\t`;\n\n\t\treturn generatedStyles;\n\t}, [ selectedIndex, data, chartId ] );\n\n\t// Validate data first\n\tconst error = validateData( dataSorted );\n\tconst isDataValid = ! error;\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\torientation,\n\t\t\twithPatterns,\n\t\t} ),\n\t\t[ orientation, withPatterns ]\n\t);\n\n\t// Register chart with context only if data is valid\n\tuseChartRegistration( {\n\t\tchartId,\n\t\tlegendItems,\n\t\tchartType: 'bar',\n\t\tisDataValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\tif ( error ) {\n\t\treturn <div className={ clsx( 'bar-chart', styles[ 'bar-chart' ] ) }>{ error }</div>;\n\t}\n\n\tconst gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;\n\tconst highlightedBarStyle = createKeyboardHighlightStyle();\n\n\treturn (\n\t\t<SingleChartContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tchartId,\n\t\t\t\tchartWidth: width,\n\t\t\t\tchartHeight: height - ( showLegend ? legendHeight : 0 ),\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'bar-chart',\n\t\t\t\t\tstyles[ 'bar-chart' ],\n\t\t\t\t\t{\n\t\t\t\t\t\t[ styles[ `bar-chart--animated${ horizontal ? '-horizontal' : '' }` ] ]:\n\t\t\t\t\t\t\tanimation && ! prefersReducedMotion,\n\t\t\t\t\t\t[ styles[ 'bar-chart--legend-top' ] ]: showLegend && legendPosition === 'top',\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tdata-testid=\"bar-chart\"\n\t\t\t\trole=\"grid\"\n\t\t\t\taria-label={ __( 'Bar chart', 'jetpack-charts' ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t} }\n\t\t\t\ttabIndex={ 0 }\n\t\t\t\tonKeyDown={ onChartKeyDown }\n\t\t\t\tonFocus={ onChartFocus }\n\t\t\t\tonBlur={ onChartBlur }\n\t\t\t\tref={ chartRef }\n\t\t\t\tdata-chart-id={ `bar-chart-${ chartId }` } // Unique ID for the chart\n\t\t\t>\n\t\t\t\t<XYChart\n\t\t\t\t\ttheme={ theme }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ height - ( showLegend ? legendHeight : 0 ) }\n\t\t\t\t\tmargin={ {\n\t\t\t\t\t\t...defaultMargin,\n\t\t\t\t\t\t...margin,\n\t\t\t\t\t\t...( showLegend && legendPosition === 'top'\n\t\t\t\t\t\t\t? { top: ( defaultMargin.top || 0 ) + legendHeight }\n\t\t\t\t\t\t\t: {} ),\n\t\t\t\t\t} }\n\t\t\t\t\txScale={ chartOptions.xScale }\n\t\t\t\t\tyScale={ chartOptions.yScale }\n\t\t\t\t\thorizontal={ horizontal }\n\t\t\t\t\tpointerEventsDataKey=\"nearest\"\n\t\t\t\t>\n\t\t\t\t\t<Grid\n\t\t\t\t\t\tcolumns={ gridVisibility.includes( 'y' ) }\n\t\t\t\t\t\trows={ gridVisibility.includes( 'x' ) }\n\t\t\t\t\t\tnumTicks={ 4 }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ withPatterns && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<defs data-testid=\"bar-chart-patterns\">\n\t\t\t\t\t\t\t\t{ dataSorted.map( ( seriesData, index ) =>\n\t\t\t\t\t\t\t\t\trenderPattern( index, getElementStyles( { data: seriesData, index } ).color )\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{ dataSorted.map( ( seriesData, index ) =>\n\t\t\t\t\t\t\t\t\tcreatePatternBorderStyle(\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tgetElementStyles( { data: seriesData, index } ).color\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }\n\n\t\t\t\t\t{ allSeriesHidden ? (\n\t\t\t\t\t\t<text\n\t\t\t\t\t\t\tx={ width / 2 }\n\t\t\t\t\t\t\ty={ ( height - ( showLegend ? legendHeight : 0 ) ) / 2 }\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tfill={ providerTheme.gridStyles?.stroke || '#ccc' }\n\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }\n\t\t\t\t\t\t</text>\n\t\t\t\t\t) : null }\n\n\t\t\t\t\t<BarGroup padding={ chartOptions.barGroup.padding }>\n\t\t\t\t\t\t{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {\n\t\t\t\t\t\t\t// Skip rendering invisible series\n\t\t\t\t\t\t\tif ( ! isVisible ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<BarSeries\n\t\t\t\t\t\t\t\t\tkey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\tdataKey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\tdata={ seriesData.data as DataPointDate[] }\n\t\t\t\t\t\t\t\t\tyAccessor={ chartOptions.accessors.yAccessor }\n\t\t\t\t\t\t\t\t\txAccessor={ chartOptions.accessors.xAccessor }\n\t\t\t\t\t\t\t\t\tcolorAccessor={ getBarBackground( index ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</BarGroup>\n\n\t\t\t\t\t<Axis { ...chartOptions.axis.x } />\n\t\t\t\t\t<Axis { ...chartOptions.axis.y } />\n\n\t\t\t\t\t{ withTooltips && (\n\t\t\t\t\t\t<AccessibleTooltip\n\t\t\t\t\t\t\tdetectBounds\n\t\t\t\t\t\t\tsnapTooltipToDatumX\n\t\t\t\t\t\t\tsnapTooltipToDatumY\n\t\t\t\t\t\t\trenderTooltip={ renderTooltip || renderDefaultTooltip }\n\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\ttooltipRef={ tooltipRef }\n\t\t\t\t\t\t\tkeyboardFocusedClassName={ styles[ 'bar-chart__tooltip--keyboard-focused' ] }\n\t\t\t\t\t\t\tseries={ data }\n\t\t\t\t\t\t\tmode=\"individual\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</XYChart>\n\n\t\t\t\t{ showLegend && (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\n\t\t\t\t\t\tclassName={ styles[ 'bar-chart__legend' ] }\n\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t\tinteractive={ legendInteractive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst BarChartWithProvider: FC< BarChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <BarChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<BarChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nBarChartWithProvider.displayName = 'BarChart';\n\n// Create BarChart with composition API\nconst BarChart = attachSubComponents( BarChartWithProvider, {\n\tLegend: Legend,\n} ) as BarChartComponent;\n\n// Create responsive BarChart with composition API\nconst BarChartResponsive = attachSubComponents(\n\twithResponsive< BarChartProps >( BarChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t}\n) as BarChartResponsiveComponent;\n\nexport { BarChartResponsive as default, BarChart as BarChartUnresponsive };\n","import 'css-chunk:src/components/bar-chart/bar-chart.module.scss';export default {\n \"bar-chart\": \"a8ccharts-lmYNi-\",\n \"bar-chart--legend-top\": \"a8ccharts-SQjaa0\",\n \"bar-chart-legend\": \"a8ccharts-vgKKqG\",\n \"bar-chart--animated\": \"a8ccharts-Fqw3aR\",\n \"rise\": \"a8ccharts-wCPctT\",\n \"bar-chart--animated-horizontal\": \"a8ccharts-tkoNmn\",\n \"stretch\": \"a8ccharts-MtfGVm\"\n};","import { formatNumberCompact } from '@automattic/number-formatters';\nimport { useMemo } from 'react';\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\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...( options.axis?.x || {} ),\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...( options.axis?.y || {} ),\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"]}
1
+ {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-3PRIZR7Y.cjs","../src/components/bar-chart/bar-chart.tsx","../src/components/bar-chart/bar-chart.module.scss","../src/components/bar-chart/private/use-bar-chart-options.ts"],"names":["useMemo"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-3PRIZR7Y.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 clsx from 'clsx';\nimport { useCallback, useContext, useState, useRef, useMemo } from 'react';\nimport {\n\tuseXYChartTheme,\n\tuseChartDataTransform,\n\tuseZeroValueDisplay,\n\tuseChartMargin,\n\tuseElementHeight,\n\tusePrefersReducedMotion,\n} from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n\tGlobalChartsContext,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';\nimport styles from './bar-chart.module.scss';\nimport { useBarChartOptions } from './private';\nimport type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';\nimport type { FC, ReactNode, ComponentType } from 'react';\n\nexport interface BarChartProps extends BaseChartProps< SeriesData[] > {\n\trenderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;\n\torientation?: 'horizontal' | 'vertical';\n\twithPatterns?: boolean;\n\tshowZeroValues?: boolean;\n\tlegendInteractive?: boolean;\n\tchildren?: ReactNode;\n}\n\n// Base props type with optional responsive properties\ntype BarChartBaseProps = Optional< BarChartProps, 'width' | 'height' | 'size' >;\n\n// Composition API types\ninterface BarChartSubComponents {\n\tLegend: ComponentType< React.ComponentProps< typeof Legend > >;\n}\n\ntype BarChartComponent = FC< BarChartBaseProps > & BarChartSubComponents;\ntype BarChartResponsiveComponent = FC< BarChartBaseProps & ResponsiveConfig > &\n\tBarChartSubComponents;\n\n// Validation function similar to LineChart\nconst validateData = ( data: SeriesData[] ) => {\n\tif ( ! data?.length ) return 'No data available';\n\n\tconst hasInvalidData = data.some( series =>\n\t\tseries.data.some(\n\t\t\tpoint =>\n\t\t\t\tisNaN( point.value as number ) ||\n\t\t\t\tpoint.value === null ||\n\t\t\t\tpoint.value === undefined ||\n\t\t\t\t( ! point.label &&\n\t\t\t\t\t( ! ( 'date' in point && point.date ) || isNaN( point.date.getTime() ) ) )\n\t\t)\n\t);\n\n\tif ( hasInvalidData ) return 'Invalid data';\n\treturn null;\n};\n\nconst getPatternId = ( chartId: string, index: number ) => `bar-pattern-${ chartId }-${ index }`;\n\nconst BarChartInternal: FC< BarChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth,\n\theight = 400,\n\tclassName,\n\tmargin,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendMaxWidth,\n\tlegendTextOverflow = 'wrap',\n\tlegendItemClassName,\n\tlegendShape = 'rect',\n\tgridVisibility: gridVisibilityProp,\n\trenderTooltip,\n\toptions = {},\n\torientation = 'vertical',\n\twithPatterns = false,\n\tshowZeroValues = false,\n\tlegendInteractive = false,\n\tanimation,\n\tchildren,\n} ) => {\n\tconst horizontal = orientation === 'horizontal';\n\tconst chartId = useChartId( providedChartId );\n\tconst theme = useXYChartTheme( data );\n\n\tconst dataSorted = useChartDataTransform( data );\n\n\t// Transform data to add a small value for zero bars to make them visible\n\tconst dataWithVisibleZeros = useZeroValueDisplay( dataSorted, {\n\t\tenabled: showZeroValues,\n\t} );\n\n\t// Create legend items using the reusable hook\n\tconst legendItems = useChartLegendItems( dataSorted );\n\tconst chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );\n\tconst defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst chartRef = useRef< HTMLDivElement >( null );\n\tconst [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );\n\tconst [ isNavigating, setIsNavigating ] = useState( false );\n\n\tconst totalPoints =\n\t\tMath.max( 0, ...data.map( series => series.data?.length || 0 ) ) * data.length;\n\n\t// Use the keyboard navigation hook\n\tconst { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {\n\t\tselectedIndex,\n\t\tsetSelectedIndex,\n\t\tisNavigating,\n\t\tsetIsNavigating,\n\t\tchartRef,\n\t\ttotalPoints,\n\t} );\n\n\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\tconst providerTheme = useGlobalChartsTheme();\n\n\t// Add visibility information to series when using interactive legends\n\tconst seriesWithVisibility = useMemo( () => {\n\t\tif ( ! chartId || ! legendInteractive ) {\n\t\t\treturn dataWithVisibleZeros.map( ( series, index ) => ( {\n\t\t\t\tseries,\n\t\t\t\tindex,\n\t\t\t\tisVisible: true,\n\t\t\t} ) );\n\t\t}\n\t\treturn dataWithVisibleZeros.map( ( series, index ) => ( {\n\t\t\tseries,\n\t\t\tindex,\n\t\t\tisVisible: isSeriesVisible( chartId, series.label ),\n\t\t} ) );\n\t}, [ dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive ] );\n\n\t// Check if all series are hidden\n\tconst allSeriesHidden = useMemo( () => {\n\t\treturn seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );\n\t}, [ seriesWithVisibility ] );\n\n\tconst getBarBackground = useCallback(\n\t\t( index: number ) => () =>\n\t\t\twithPatterns\n\t\t\t\t? `url(#${ getPatternId( chartId, index ) })`\n\t\t\t\t: getElementStyles( { data: dataSorted[ index ], index } ).color,\n\t\t[ withPatterns, getElementStyles, dataSorted, chartId ]\n\t);\n\n\tconst renderDefaultTooltip = useCallback(\n\t\t( { tooltipData }: RenderTooltipParams< DataPointDate > ) => {\n\t\t\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\t\t\tif ( ! nearestDatum ) return null;\n\n\t\t\treturn (\n\t\t\t\t<div className={ styles[ 'bar-chart__tooltip' ] }>\n\t\t\t\t\t<div className={ styles[ 'bar-chart__tooltip-header' ] }>\n\t\t\t\t\t\t{ tooltipData?.nearestDatum?.key }\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={ styles[ 'bar-chart__tooltip-row' ] }>\n\t\t\t\t\t\t<span className={ styles[ 'bar-chart__tooltip-label' ] }>\n\t\t\t\t\t\t\t{ chartOptions.tooltip.labelFormatter(\n\t\t\t\t\t\t\t\tnearestDatum.label || ( nearestDatum.date ? nearestDatum.date.getTime() : 0 ),\n\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t[]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className={ styles[ 'bar-chart__tooltip-value' ] }>\n\t\t\t\t\t\t\t{ formatNumber( nearestDatum.value as number ) }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[ chartOptions.tooltip ]\n\t);\n\n\tconst renderPattern = useCallback(\n\t\t( index: number, color: string ) => {\n\t\t\tconst patternType = index % 4;\n\t\t\tconst id = getPatternId( chartId, index );\n\t\t\tconst commonProps = {\n\t\t\t\tid,\n\t\t\t\tstroke: 'white',\n\t\t\t\tstrokeWidth: 1,\n\t\t\t\tbackground: color,\n\t\t\t};\n\n\t\t\tswitch ( patternType ) {\n\t\t\t\tcase 0:\n\t\t\t\tdefault:\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PatternLines\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\twidth={ 5 }\n\t\t\t\t\t\t\theight={ 5 }\n\t\t\t\t\t\t\torientation={ [ 'diagonal' ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\tcase 1:\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PatternCircles key={ id } { ...commonProps } width={ 6 } height={ 6 } fill=\"white\" />\n\t\t\t\t\t);\n\t\t\t\tcase 2:\n\t\t\t\t\treturn <PatternWaves key={ id } { ...commonProps } width={ 4 } height={ 4 } />;\n\t\t\t\tcase 3:\n\t\t\t\t\treturn <PatternHexagons key={ id } { ...commonProps } size={ 8 } height={ 3 } />;\n\t\t\t}\n\t\t},\n\t\t[ chartId ]\n\t);\n\n\tconst createPatternBorderStyle = useCallback(\n\t\t( index: number, color: string ) => {\n\t\t\tconst patternId = getPatternId( chartId, index );\n\t\t\treturn `\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\t\t},\n\t\t[ chartId ]\n\t);\n\n\tconst createKeyboardHighlightStyle = useCallback( () => {\n\t\tif ( selectedIndex === undefined ) return '';\n\n\t\t// Calculate which bar should be highlighted based on selectedIndex\n\t\t// Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n\t\tconst maxDataPoints = Math.max( ...data.map( s => s.data.length ) );\n\t\tconst dataPointIndex = Math.floor( selectedIndex / data.length );\n\t\tconst seriesIndex = selectedIndex % data.length;\n\n\t\t// Only highlight if we're within valid bounds\n\t\tif ( dataPointIndex >= maxDataPoints || seriesIndex >= data.length ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst seriesData = data[ seriesIndex ];\n\t\tif ( dataPointIndex >= seriesData.data.length ) {\n\t\t\treturn '';\n\t\t}\n\n\t\t// Based on the DOM structure analysis:\n\t\t// - All bars are in a single .visx-bar-group\n\t\t// - Bars are ordered as: [series1[0], series1[1], series2[0], series2[1], ...]\n\t\t// - So we need to calculate the actual bar index in the DOM\n\t\tconst actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;\n\n\t\t// Use a CSS class selector instead of ID since useId() generates invalid CSS ID characters\n\t\tconst generatedStyles = `\n\t\t\t.bar-chart[data-chart-id=\"bar-chart-${ chartId }\"] .visx-bar-group .visx-bar:nth-child(${\n\t\t\t\tactualBarIndex + 1\n\t\t\t}) {\n\t\t\t\tstroke: #005fcc;\n\t\t\t\tstroke-width: 2px;\n\t\t\t}\n\t\t`;\n\n\t\treturn generatedStyles;\n\t}, [ selectedIndex, data, chartId ] );\n\n\t// Validate data first\n\tconst error = validateData( dataSorted );\n\tconst isDataValid = ! error;\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\torientation,\n\t\t\twithPatterns,\n\t\t} ),\n\t\t[ orientation, withPatterns ]\n\t);\n\n\t// Register chart with context only if data is valid\n\tuseChartRegistration( {\n\t\tchartId,\n\t\tlegendItems,\n\t\tchartType: 'bar',\n\t\tisDataValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tconst prefersReducedMotion = usePrefersReducedMotion();\n\n\tif ( error ) {\n\t\treturn <div className={ clsx( 'bar-chart', styles[ 'bar-chart' ] ) }>{ error }</div>;\n\t}\n\n\tconst gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;\n\tconst highlightedBarStyle = createKeyboardHighlightStyle();\n\n\treturn (\n\t\t<SingleChartContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tchartId,\n\t\t\t\tchartWidth: width,\n\t\t\t\tchartHeight: height - ( showLegend ? legendHeight : 0 ),\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'bar-chart',\n\t\t\t\t\tstyles[ 'bar-chart' ],\n\t\t\t\t\t{\n\t\t\t\t\t\t[ styles[ `bar-chart--animated${ horizontal ? '-horizontal' : '' }` ] ]:\n\t\t\t\t\t\t\tanimation && ! prefersReducedMotion,\n\t\t\t\t\t\t[ styles[ 'bar-chart--legend-top' ] ]: showLegend && legendPosition === 'top',\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tdata-testid=\"bar-chart\"\n\t\t\t\trole=\"grid\"\n\t\t\t\taria-label={ __( 'Bar chart', 'jetpack-charts' ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t} }\n\t\t\t\ttabIndex={ 0 }\n\t\t\t\tonKeyDown={ onChartKeyDown }\n\t\t\t\tonFocus={ onChartFocus }\n\t\t\t\tonBlur={ onChartBlur }\n\t\t\t\tref={ chartRef }\n\t\t\t\tdata-chart-id={ `bar-chart-${ chartId }` } // Unique ID for the chart\n\t\t\t>\n\t\t\t\t<XYChart\n\t\t\t\t\ttheme={ theme }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ height - ( showLegend ? legendHeight : 0 ) }\n\t\t\t\t\tmargin={ {\n\t\t\t\t\t\t...defaultMargin,\n\t\t\t\t\t\t...margin,\n\t\t\t\t\t\t...( showLegend && legendPosition === 'top'\n\t\t\t\t\t\t\t? { top: ( defaultMargin.top || 0 ) + legendHeight }\n\t\t\t\t\t\t\t: {} ),\n\t\t\t\t\t} }\n\t\t\t\t\txScale={ chartOptions.xScale }\n\t\t\t\t\tyScale={ chartOptions.yScale }\n\t\t\t\t\thorizontal={ horizontal }\n\t\t\t\t\tpointerEventsDataKey=\"nearest\"\n\t\t\t\t>\n\t\t\t\t\t<Grid\n\t\t\t\t\t\tcolumns={ gridVisibility.includes( 'y' ) }\n\t\t\t\t\t\trows={ gridVisibility.includes( 'x' ) }\n\t\t\t\t\t\tnumTicks={ 4 }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ withPatterns && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<defs data-testid=\"bar-chart-patterns\">\n\t\t\t\t\t\t\t\t{ dataSorted.map( ( seriesData, index ) =>\n\t\t\t\t\t\t\t\t\trenderPattern( index, getElementStyles( { data: seriesData, index } ).color )\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{ dataSorted.map( ( seriesData, index ) =>\n\t\t\t\t\t\t\t\t\tcreatePatternBorderStyle(\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tgetElementStyles( { data: seriesData, index } ).color\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }\n\n\t\t\t\t\t{ allSeriesHidden ? (\n\t\t\t\t\t\t<text\n\t\t\t\t\t\t\tx={ width / 2 }\n\t\t\t\t\t\t\ty={ ( height - ( showLegend ? legendHeight : 0 ) ) / 2 }\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tfill={ providerTheme.gridStyles?.stroke || '#ccc' }\n\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }\n\t\t\t\t\t\t</text>\n\t\t\t\t\t) : null }\n\n\t\t\t\t\t<BarGroup padding={ chartOptions.barGroup.padding }>\n\t\t\t\t\t\t{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {\n\t\t\t\t\t\t\t// Skip rendering invisible series\n\t\t\t\t\t\t\tif ( ! isVisible ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<BarSeries\n\t\t\t\t\t\t\t\t\tkey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\tdataKey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\tdata={ seriesData.data as DataPointDate[] }\n\t\t\t\t\t\t\t\t\tyAccessor={ chartOptions.accessors.yAccessor }\n\t\t\t\t\t\t\t\t\txAccessor={ chartOptions.accessors.xAccessor }\n\t\t\t\t\t\t\t\t\tcolorAccessor={ getBarBackground( index ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</BarGroup>\n\n\t\t\t\t\t<Axis { ...chartOptions.axis.x } />\n\t\t\t\t\t<Axis { ...chartOptions.axis.y } />\n\n\t\t\t\t\t{ withTooltips && (\n\t\t\t\t\t\t<AccessibleTooltip\n\t\t\t\t\t\t\tdetectBounds\n\t\t\t\t\t\t\tsnapTooltipToDatumX\n\t\t\t\t\t\t\tsnapTooltipToDatumY\n\t\t\t\t\t\t\trenderTooltip={ renderTooltip || renderDefaultTooltip }\n\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\ttooltipRef={ tooltipRef }\n\t\t\t\t\t\t\tkeyboardFocusedClassName={ styles[ 'bar-chart__tooltip--keyboard-focused' ] }\n\t\t\t\t\t\t\tseries={ data }\n\t\t\t\t\t\t\tmode=\"individual\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</XYChart>\n\n\t\t\t\t{ showLegend && (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\n\t\t\t\t\t\tclassName={ styles[ 'bar-chart__legend' ] }\n\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t\tinteractive={ legendInteractive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst BarChartWithProvider: FC< BarChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <BarChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<BarChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nBarChartWithProvider.displayName = 'BarChart';\n\n// Create BarChart with composition API\nconst BarChart = attachSubComponents( BarChartWithProvider, {\n\tLegend: Legend,\n} ) as BarChartComponent;\n\n// Create responsive BarChart with composition API\nconst BarChartResponsive = attachSubComponents(\n\twithResponsive< BarChartProps >( BarChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t}\n) as BarChartResponsiveComponent;\n\nexport { BarChartResponsive as default, BarChart as BarChartUnresponsive };\n","import 'css-chunk:src/components/bar-chart/bar-chart.module.scss';export default {\n \"bar-chart\": \"a8ccharts-lmYNi-\",\n \"bar-chart--legend-top\": \"a8ccharts-SQjaa0\",\n \"bar-chart-legend\": \"a8ccharts-vgKKqG\",\n \"bar-chart--animated\": \"a8ccharts-Fqw3aR\",\n \"rise\": \"a8ccharts-wCPctT\",\n \"bar-chart--animated-horizontal\": \"a8ccharts-tkoNmn\",\n \"stretch\": \"a8ccharts-MtfGVm\"\n};","import { formatNumberCompact } from '@automattic/number-formatters';\nimport { useMemo } from 'react';\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\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...( options.axis?.x || {} ),\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...( options.axis?.y || {} ),\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"]}
@@ -55,4 +55,4 @@ function withResponsive(WrappedComponent) {
55
55
 
56
56
 
57
57
  exports.withResponsive = withResponsive;
58
- //# sourceMappingURL=chunk-FX2PTUFC.cjs.map
58
+ //# sourceMappingURL=chunk-5NI3TGRD.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-FX2PTUFC.cjs","../src/components/private/with-responsive/with-responsive.tsx"],"names":[],"mappings":"AAAA;ACAA,8CAA8B;AAqE1B,+CAAA;AAlDJ,IAAM,wBAAA,EAA0B,CAAE;AAAA,EACjC,mBAAA,EAAqB,GAAA;AAAA,EACrB,SAAA,EAAW,IAAA;AAAA,EACX,YAAA,EAAc;AACf,CAAA,EAAA,GAAyB;AACxB,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,YAAY,EAAA,EAAI,uCAAA;AAAe,IACxD,YAAA,EAAc,kBAAA;AAAA,IACd,yBAAA,EAA2B;AAAA,EAC5B,CAAE,CAAA;AAEF,EAAA,MAAM,eAAA,EAAiB,YAAA,EAAc,EAAA,EAAI,IAAA,CAAK,GAAA,CAAK,WAAA,EAAa,QAAS,EAAA,EAAI,CAAA;AAC7E,EAAA,MAAM,gBAAA,EAAkB,eAAA,EAAiB,WAAA;AAEzC,EAAA,OAAO,EAAE,SAAA,EAAW,KAAA,EAAO,cAAA,EAAgB,MAAA,EAAQ,gBAAgB,CAAA;AACpE,CAAA;AASO,SAAS,cAAA,CACf,gBAAA,EACC;AACD,EAAA,OAAO,SAAS,eAAA,CAAiB;AAAA,IAChC,mBAAA,EAAqB,GAAA;AAAA,IACrB,SAAA,EAAW,IAAA;AAAA,IACX,YAAA,EAAc,GAAA;AAAA,IACd,GAAG;AAAA,EACJ,CAAA,EAAmE;AAClE,IAAA,MAAM;AAAA,MACL,SAAA;AAAA,MACA,KAAA,EAAO,cAAA;AAAA,MACP,MAAA,EAAQ;AAAA,IACT,EAAA,EAAI,uBAAA,CAAyB;AAAA,MAC5B,kBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,IACD,CAAE,CAAA;AAEF,IAAA,uBACC,6BAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,GAAA,EAAM,SAAA;AAAA,QACN,KAAA,EAAQ;AAAA,UACP,KAAA,oCAAO,UAAA,CAAW,IAAA,UAAQ,UAAA,CAAW,OAAA,UAAS,QAAA;AAAA,UAC9C,MAAA,oCAAQ,UAAA,CAAW,IAAA,UAAQ,UAAA,CAAW,QAAA,UAAU;AAAA,QACjD,CAAA;AAAA,QAEA,QAAA,kBAAA,6BAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAQ,cAAA;AAAA,YACR,MAAA,EAAS,eAAA;AAAA,YACT,IAAA,EAAO,cAAA;AAAA,YACL,GAAK;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACD,CAAA;AAAA,EAEF,CAAA;AACD;ADzBA;AACA;AACE;AACF,wCAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-FX2PTUFC.cjs","sourcesContent":[null,"import { useParentSize } from '@visx/responsive';\nimport type { BaseChartProps, Optional } from '../../../types';\nimport type { ComponentType } from 'react';\n\nexport type ResponsiveConfig = {\n\t/**\n\t * The maximum width of the chart. Defaults to 1200.\n\t */\n\tmaxWidth?: number;\n\t/**\n\t * The aspect ratio of the chart.\n\t */\n\taspectRatio?: number;\n\t/**\n\t * Child render updates upon resize are delayed until debounceTime milliseconds after the last resize event is observed.\n\t */\n\tresizeDebounceTime?: number;\n};\n\nconst useResponsiveDimensions = ( {\n\tresizeDebounceTime = 300,\n\tmaxWidth = 1200,\n\taspectRatio = 0.5,\n}: ResponsiveConfig ) => {\n\tconst { parentRef, width: parentWidth } = useParentSize( {\n\t\tdebounceTime: resizeDebounceTime,\n\t\tenableDebounceLeadingCall: true,\n\t} );\n\n\tconst containerWidth = parentWidth > 0 ? Math.min( parentWidth, maxWidth ) : 0;\n\tconst containerHeight = containerWidth * aspectRatio;\n\n\treturn { parentRef, width: containerWidth, height: containerHeight };\n};\n\n/**\n * A higher-order component that provides responsive dimensions\n * to the wrapped chart component using useParentSize from @visx/responsive.\n *\n * @param WrappedComponent - The chart component to be wrapped.\n * @return A functional component that renders the wrapped component with responsive dimensions.\n */\nexport function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'options' > >( // 'options' is excluded so that each chart can define its own options type\n\tWrappedComponent: ComponentType< T >\n) {\n\treturn function ResponsiveChart( {\n\t\tresizeDebounceTime = 300,\n\t\tmaxWidth = 1200,\n\t\taspectRatio = 0.5,\n\t\t...chartProps\n\t}: Optional< T, 'width' | 'height' | 'size' > & ResponsiveConfig ) {\n\t\tconst {\n\t\t\tparentRef,\n\t\t\twidth: containerWidth,\n\t\t\theight: containerHeight,\n\t\t} = useResponsiveDimensions( {\n\t\t\tresizeDebounceTime,\n\t\t\tmaxWidth,\n\t\t\taspectRatio,\n\t\t} );\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ parentRef }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: chartProps.size ?? chartProps.width ?? '100%',\n\t\t\t\t\theight: chartProps.size ?? chartProps.height ?? 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<WrappedComponent\n\t\t\t\t\twidth={ containerWidth }\n\t\t\t\t\theight={ containerHeight }\n\t\t\t\t\tsize={ containerWidth }\n\t\t\t\t\t{ ...( chartProps as T ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t};\n}\n"]}
1
+ {"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-5NI3TGRD.cjs","../src/components/private/with-responsive/with-responsive.tsx"],"names":[],"mappings":"AAAA;ACAA,8CAA8B;AAqE1B,+CAAA;AAlDJ,IAAM,wBAAA,EAA0B,CAAE;AAAA,EACjC,mBAAA,EAAqB,GAAA;AAAA,EACrB,SAAA,EAAW,IAAA;AAAA,EACX,YAAA,EAAc;AACf,CAAA,EAAA,GAAyB;AACxB,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,YAAY,EAAA,EAAI,uCAAA;AAAe,IACxD,YAAA,EAAc,kBAAA;AAAA,IACd,yBAAA,EAA2B;AAAA,EAC5B,CAAE,CAAA;AAEF,EAAA,MAAM,eAAA,EAAiB,YAAA,EAAc,EAAA,EAAI,IAAA,CAAK,GAAA,CAAK,WAAA,EAAa,QAAS,EAAA,EAAI,CAAA;AAC7E,EAAA,MAAM,gBAAA,EAAkB,eAAA,EAAiB,WAAA;AAEzC,EAAA,OAAO,EAAE,SAAA,EAAW,KAAA,EAAO,cAAA,EAAgB,MAAA,EAAQ,gBAAgB,CAAA;AACpE,CAAA;AASO,SAAS,cAAA,CACf,gBAAA,EACC;AACD,EAAA,OAAO,SAAS,eAAA,CAAiB;AAAA,IAChC,mBAAA,EAAqB,GAAA;AAAA,IACrB,SAAA,EAAW,IAAA;AAAA,IACX,YAAA,EAAc,GAAA;AAAA,IACd,GAAG;AAAA,EACJ,CAAA,EAAmE;AAClE,IAAA,MAAM;AAAA,MACL,SAAA;AAAA,MACA,KAAA,EAAO,cAAA;AAAA,MACP,MAAA,EAAQ;AAAA,IACT,EAAA,EAAI,uBAAA,CAAyB;AAAA,MAC5B,kBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,IACD,CAAE,CAAA;AAEF,IAAA,uBACC,6BAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,GAAA,EAAM,SAAA;AAAA,QACN,KAAA,EAAQ;AAAA,UACP,KAAA,oCAAO,UAAA,CAAW,IAAA,UAAQ,UAAA,CAAW,OAAA,UAAS,QAAA;AAAA,UAC9C,MAAA,oCAAQ,UAAA,CAAW,IAAA,UAAQ,UAAA,CAAW,QAAA,UAAU;AAAA,QACjD,CAAA;AAAA,QAEA,QAAA,kBAAA,6BAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAQ,cAAA;AAAA,YACR,MAAA,EAAS,eAAA;AAAA,YACT,IAAA,EAAO,cAAA;AAAA,YACL,GAAK;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACD,CAAA;AAAA,EAEF,CAAA;AACD;ADzBA;AACA;AACE;AACF,wCAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-5NI3TGRD.cjs","sourcesContent":[null,"import { useParentSize } from '@visx/responsive';\nimport type { BaseChartProps, Optional } from '../../../types';\nimport type { ComponentType } from 'react';\n\nexport type ResponsiveConfig = {\n\t/**\n\t * The maximum width of the chart. Defaults to 1200.\n\t */\n\tmaxWidth?: number;\n\t/**\n\t * The aspect ratio of the chart.\n\t */\n\taspectRatio?: number;\n\t/**\n\t * Child render updates upon resize are delayed until debounceTime milliseconds after the last resize event is observed.\n\t */\n\tresizeDebounceTime?: number;\n};\n\nconst useResponsiveDimensions = ( {\n\tresizeDebounceTime = 300,\n\tmaxWidth = 1200,\n\taspectRatio = 0.5,\n}: ResponsiveConfig ) => {\n\tconst { parentRef, width: parentWidth } = useParentSize( {\n\t\tdebounceTime: resizeDebounceTime,\n\t\tenableDebounceLeadingCall: true,\n\t} );\n\n\tconst containerWidth = parentWidth > 0 ? Math.min( parentWidth, maxWidth ) : 0;\n\tconst containerHeight = containerWidth * aspectRatio;\n\n\treturn { parentRef, width: containerWidth, height: containerHeight };\n};\n\n/**\n * A higher-order component that provides responsive dimensions\n * to the wrapped chart component using useParentSize from `@visx/responsive`.\n *\n * @param WrappedComponent - The chart component to be wrapped.\n * @return A functional component that renders the wrapped component with responsive dimensions.\n */\nexport function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'options' > >( // 'options' is excluded so that each chart can define its own options type\n\tWrappedComponent: ComponentType< T >\n) {\n\treturn function ResponsiveChart( {\n\t\tresizeDebounceTime = 300,\n\t\tmaxWidth = 1200,\n\t\taspectRatio = 0.5,\n\t\t...chartProps\n\t}: Optional< T, 'width' | 'height' | 'size' > & ResponsiveConfig ) {\n\t\tconst {\n\t\t\tparentRef,\n\t\t\twidth: containerWidth,\n\t\t\theight: containerHeight,\n\t\t} = useResponsiveDimensions( {\n\t\t\tresizeDebounceTime,\n\t\t\tmaxWidth,\n\t\t\taspectRatio,\n\t\t} );\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ parentRef }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: chartProps.size ?? chartProps.width ?? '100%',\n\t\t\t\t\theight: chartProps.size ?? chartProps.height ?? 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<WrappedComponent\n\t\t\t\t\twidth={ containerWidth }\n\t\t\t\t\theight={ containerHeight }\n\t\t\t\t\tsize={ containerWidth }\n\t\t\t\t\t{ ...( chartProps as T ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t};\n}\n"]}
@@ -1,16 +1,16 @@
1
- import {
2
- AccessibleTooltip,
3
- useKeyboardNavigation
4
- } from "./chunk-5XI443YP.js";
5
1
  import {
6
2
  withResponsive
7
- } from "./chunk-TYYW4BG3.js";
3
+ } from "./chunk-D3E235JJ.js";
8
4
  import {
9
5
  Legend,
10
6
  SingleChartContext,
11
7
  useChartLegendItems,
12
8
  useSingleChartContext
13
- } from "./chunk-SUMZU44N.js";
9
+ } from "./chunk-7OWIZ5S7.js";
10
+ import {
11
+ AccessibleTooltip,
12
+ useKeyboardNavigation
13
+ } from "./chunk-5XI443YP.js";
14
14
  import {
15
15
  GlobalChartsContext,
16
16
  GlobalChartsProvider,
@@ -23,11 +23,11 @@ import {
23
23
  useGlobalChartsTheme,
24
24
  usePrefersReducedMotion,
25
25
  useXYChartTheme
26
- } from "./chunk-OZYA4QTY.js";
26
+ } from "./chunk-MRCTAUHL.js";
27
27
  import {
28
28
  attachSubComponents,
29
29
  isSafari
30
- } from "./chunk-AVHWSXUP.js";
30
+ } from "./chunk-7IZD3F7B.js";
31
31
 
32
32
  // src/components/line-chart/line-chart.tsx
33
33
  import { formatNumberCompact, formatNumber } from "@automattic/number-formatters";
@@ -1042,4 +1042,4 @@ export {
1042
1042
  LineChart,
1043
1043
  LineChartResponsive
1044
1044
  };
1045
- //# sourceMappingURL=chunk-5C2OMRXX.js.map
1045
+ //# sourceMappingURL=chunk-6SGGF26Z.js.map
@@ -3,20 +3,20 @@
3
3
  var _chunkSDNRKKBPcjs = require('./chunk-SDNRKKBP.cjs');
4
4
 
5
5
 
6
- var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
7
6
 
8
7
 
8
+ var _chunk3Z526IL2cjs = require('./chunk-3Z526IL2.cjs');
9
9
 
10
10
 
11
- var _chunk3Z526IL2cjs = require('./chunk-3Z526IL2.cjs');
11
+ var _chunk5NI3TGRDcjs = require('./chunk-5NI3TGRD.cjs');
12
12
 
13
13
 
14
- var _chunkFX2PTUFCcjs = require('./chunk-FX2PTUFC.cjs');
15
14
 
16
15
 
16
+ var _chunkBZQFCAX7cjs = require('./chunk-BZQFCAX7.cjs');
17
17
 
18
18
 
19
- var _chunkLACY6G6Icjs = require('./chunk-LACY6G6I.cjs');
19
+ var _chunk7HROSZRScjs = require('./chunk-7HROSZRS.cjs');
20
20
 
21
21
 
22
22
 
@@ -26,10 +26,10 @@ var _chunkLACY6G6Icjs = require('./chunk-LACY6G6I.cjs');
26
26
 
27
27
 
28
28
 
29
- var _chunkI7MCBD76cjs = require('./chunk-I7MCBD76.cjs');
29
+ var _chunkN4ZDNOPYcjs = require('./chunk-N4ZDNOPY.cjs');
30
30
 
31
31
 
32
- var _chunkWPSB7BRRcjs = require('./chunk-WPSB7BRR.cjs');
32
+ var _chunkFI5B6KSHcjs = require('./chunk-FI5B6KSH.cjs');
33
33
 
34
34
  // src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx
35
35
  var _event = require('@visx/event');
@@ -91,8 +91,8 @@ var PieSemiCircleChartInternal = ({
91
91
  tooltipOffsetX = 0,
92
92
  tooltipOffsetY = -15
93
93
  }) => {
94
- const chartId = _chunkI7MCBD76cjs.useChartId.call(void 0, providedChartId);
95
- const [legendRef, legendHeight] = _chunkI7MCBD76cjs.useElementHeight.call(void 0, );
94
+ const chartId = _chunkN4ZDNOPYcjs.useChartId.call(void 0, providedChartId);
95
+ const [legendRef, legendHeight] = _chunkN4ZDNOPYcjs.useElementHeight.call(void 0, );
96
96
  const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = _tooltip.useTooltip.call(void 0, );
97
97
  const { containerRef, TooltipInPortal } = _tooltip.useTooltipInPortal.call(void 0, {
98
98
  detectBounds: true,
@@ -123,8 +123,8 @@ var PieSemiCircleChartInternal = ({
123
123
  [handleMouseMove]
124
124
  );
125
125
  const { isValid, message } = validateData(data);
126
- const { getElementStyles, isSeriesVisible } = _chunkI7MCBD76cjs.useGlobalChartsContext.call(void 0, );
127
- const { visibleData, allSegmentsHidden, legendData } = _chunkI7MCBD76cjs.useInteractiveLegendData.call(void 0, {
126
+ const { getElementStyles, isSeriesVisible } = _chunkN4ZDNOPYcjs.useGlobalChartsContext.call(void 0, );
127
+ const { visibleData, allSegmentsHidden, legendData } = _chunkN4ZDNOPYcjs.useInteractiveLegendData.call(void 0, {
128
128
  data,
129
129
  chartId,
130
130
  legendInteractive,
@@ -142,7 +142,7 @@ var PieSemiCircleChartInternal = ({
142
142
  () => ({ showValues: true, legendValueDisplay }),
143
143
  [legendValueDisplay]
144
144
  );
145
- const legendItems = _chunkLACY6G6Icjs.useChartLegendItems.call(void 0, legendData, legendOptions);
145
+ const legendItems = _chunkBZQFCAX7cjs.useChartLegendItems.call(void 0, legendData, legendOptions);
146
146
  const { svgChildren, htmlChildren, otherChildren } = _chunk3Z526IL2cjs.useChartChildren.call(void 0,
147
147
  children,
148
148
  "PieSemiCircleChart"
@@ -154,14 +154,14 @@ var PieSemiCircleChartInternal = ({
154
154
  }),
155
155
  [thickness, clockwise]
156
156
  );
157
- _chunkI7MCBD76cjs.useChartRegistration.call(void 0, {
157
+ _chunkN4ZDNOPYcjs.useChartRegistration.call(void 0, {
158
158
  chartId,
159
159
  legendItems,
160
160
  chartType: "pie-semi-circle",
161
161
  isDataValid: isValid,
162
162
  metadata: chartMetadata
163
163
  });
164
- const prefersReducedMotion = _chunkI7MCBD76cjs.usePrefersReducedMotion.call(void 0, );
164
+ const prefersReducedMotion = _chunkN4ZDNOPYcjs.usePrefersReducedMotion.call(void 0, );
165
165
  if (!isValid) {
166
166
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: pie_semi_circle_chart_module_default["pie-semi-circle-chart"], children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width, height: width / 2, "data-testid": "pie-chart-svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "text", { x: "50%", y: "50%", textAnchor: "middle", className: pie_semi_circle_chart_module_default.error, children: message }) }) });
167
167
  }
@@ -179,7 +179,7 @@ var PieSemiCircleChartInternal = ({
179
179
  const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
180
180
  const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
181
181
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
182
- _chunkLACY6G6Icjs.SingleChartContext.Provider,
182
+ _chunkBZQFCAX7cjs.SingleChartContext.Provider,
183
183
  {
184
184
  value: {
185
185
  chartId,
@@ -301,7 +301,7 @@ var PieSemiCircleChartInternal = ({
301
301
  ),
302
302
  withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TooltipInPortal, { top: tooltipTop || 0, left: tooltipLeft || 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "tooltip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HROSZRScjs.BaseTooltip, { data: tooltipData, top: 0, left: 0, renderContainer: false }) }) }),
303
303
  showLegend && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
304
- _chunkLACY6G6Icjs.Legend,
304
+ _chunkBZQFCAX7cjs.Legend,
305
305
  {
306
306
  orientation: legendOrientation,
307
307
  position: legendPosition,
@@ -324,22 +324,22 @@ var PieSemiCircleChartInternal = ({
324
324
  );
325
325
  };
326
326
  var PieSemiCircleChartWithProvider = (props) => {
327
- const existingContext = _react.useContext.call(void 0, _chunkI7MCBD76cjs.GlobalChartsContext);
327
+ const existingContext = _react.useContext.call(void 0, _chunkN4ZDNOPYcjs.GlobalChartsContext);
328
328
  if (existingContext) {
329
329
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props });
330
330
  }
331
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkI7MCBD76cjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props }) });
331
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkN4ZDNOPYcjs.GlobalChartsProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PieSemiCircleChartInternal, { ...props }) });
332
332
  };
333
333
  PieSemiCircleChartWithProvider.displayName = "PieSemiCircleChart";
334
- var PieSemiCircleChart = _chunkWPSB7BRRcjs.attachSubComponents.call(void 0, PieSemiCircleChartWithProvider, {
335
- Legend: _chunkLACY6G6Icjs.Legend,
334
+ var PieSemiCircleChart = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0, PieSemiCircleChartWithProvider, {
335
+ Legend: _chunkBZQFCAX7cjs.Legend,
336
336
  SVG: _chunk3Z526IL2cjs.ChartSVG,
337
337
  HTML: _chunk3Z526IL2cjs.ChartHTML
338
338
  });
339
- var PieSemiCircleChartResponsive = _chunkWPSB7BRRcjs.attachSubComponents.call(void 0,
340
- _chunkFX2PTUFCcjs.withResponsive.call(void 0, PieSemiCircleChartWithProvider),
339
+ var PieSemiCircleChartResponsive = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0,
340
+ _chunk5NI3TGRDcjs.withResponsive.call(void 0, PieSemiCircleChartWithProvider),
341
341
  {
342
- Legend: _chunkLACY6G6Icjs.Legend,
342
+ Legend: _chunkBZQFCAX7cjs.Legend,
343
343
  SVG: _chunk3Z526IL2cjs.ChartSVG,
344
344
  HTML: _chunk3Z526IL2cjs.ChartHTML
345
345
  }
@@ -349,4 +349,4 @@ var PieSemiCircleChartResponsive = _chunkWPSB7BRRcjs.attachSubComponents.call(vo
349
349
 
350
350
 
351
351
  exports.PieSemiCircleChart = PieSemiCircleChart; exports.PieSemiCircleChartResponsive = PieSemiCircleChartResponsive;
352
- //# sourceMappingURL=chunk-AS2SQOQ7.cjs.map
352
+ //# sourceMappingURL=chunk-6UZHWL6W.cjs.map