@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.
- package/CHANGELOG.md +5 -0
- package/dist/{chunk-KFWS6CHF.cjs → chunk-3PRIZR7Y.cjs} +26 -26
- package/dist/{chunk-KFWS6CHF.cjs.map → chunk-3PRIZR7Y.cjs.map} +1 -1
- package/dist/{chunk-FX2PTUFC.cjs → chunk-5NI3TGRD.cjs} +1 -1
- package/dist/{chunk-FX2PTUFC.cjs.map → chunk-5NI3TGRD.cjs.map} +1 -1
- package/dist/{chunk-5C2OMRXX.js → chunk-6SGGF26Z.js} +9 -9
- package/dist/{chunk-AS2SQOQ7.cjs → chunk-6UZHWL6W.cjs} +23 -23
- package/dist/{chunk-AS2SQOQ7.cjs.map → chunk-6UZHWL6W.cjs.map} +1 -1
- package/dist/{chunk-YH6KCYUQ.js → chunk-6WQWN5BF.js} +11 -11
- package/dist/{chunk-AVHWSXUP.js → chunk-7IZD3F7B.js} +1 -1
- package/dist/chunk-7IZD3F7B.js.map +1 -0
- package/dist/{chunk-SUMZU44N.js → chunk-7OWIZ5S7.js} +3 -3
- package/dist/{chunk-LACY6G6I.cjs → chunk-BZQFCAX7.cjs} +9 -9
- package/dist/{chunk-LACY6G6I.cjs.map → chunk-BZQFCAX7.cjs.map} +1 -1
- package/dist/{chunk-TYYW4BG3.js → chunk-D3E235JJ.js} +1 -1
- package/dist/chunk-D3E235JJ.js.map +1 -0
- package/dist/{chunk-S4ICPPSV.cjs → chunk-EKVFMS3A.cjs} +24 -24
- package/dist/{chunk-S4ICPPSV.cjs.map → chunk-EKVFMS3A.cjs.map} +1 -1
- package/dist/{chunk-CC2UH5Y7.js → chunk-EKVLCYHS.js} +4 -4
- package/dist/{chunk-WPSB7BRR.cjs → chunk-FI5B6KSH.cjs} +1 -1
- package/dist/chunk-FI5B6KSH.cjs.map +1 -0
- package/dist/{chunk-3VZG47VH.cjs → chunk-HA7WACBI.cjs} +8 -8
- package/dist/{chunk-3VZG47VH.cjs.map → chunk-HA7WACBI.cjs.map} +1 -1
- package/dist/{chunk-3ESDEDX4.cjs → chunk-KE4EDAQI.cjs} +14 -14
- package/dist/{chunk-3ESDEDX4.cjs.map → chunk-KE4EDAQI.cjs.map} +1 -1
- package/dist/{chunk-OZYA4QTY.js → chunk-MRCTAUHL.js} +2 -2
- package/dist/{chunk-I7MCBD76.cjs → chunk-N4ZDNOPY.cjs} +10 -10
- package/dist/{chunk-I7MCBD76.cjs.map → chunk-N4ZDNOPY.cjs.map} +1 -1
- package/dist/{chunk-MKU6O3UY.cjs → chunk-PEUZZ3WY.cjs} +25 -25
- package/dist/{chunk-MKU6O3UY.cjs.map → chunk-PEUZZ3WY.cjs.map} +1 -1
- package/dist/{chunk-BUSMF7CB.js → chunk-PTEEI2QM.js} +9 -9
- package/dist/{chunk-P7IYRJQW.js → chunk-RUG2O62B.js} +5 -5
- package/dist/{chunk-JVO6AK43.cjs → chunk-SLO4NLKC.cjs} +29 -29
- package/dist/{chunk-JVO6AK43.cjs.map → chunk-SLO4NLKC.cjs.map} +1 -1
- package/dist/{chunk-QDWN3ATP.js → chunk-VOWX5TBY.js} +8 -8
- package/dist/{chunk-Q2VQM74O.js → chunk-XVMWJANV.js} +3 -3
- package/dist/components/bar-chart/index.cjs +6 -6
- package/dist/components/bar-chart/index.js +5 -5
- package/dist/components/bar-list-chart/index.cjs +7 -7
- package/dist/components/bar-list-chart/index.js +6 -6
- package/dist/components/conversion-funnel-chart/index.cjs +4 -4
- package/dist/components/conversion-funnel-chart/index.js +3 -3
- package/dist/components/leaderboard-chart/index.cjs +6 -6
- package/dist/components/leaderboard-chart/index.d.cts +1 -1
- package/dist/components/leaderboard-chart/index.d.ts +1 -1
- package/dist/components/leaderboard-chart/index.js +5 -5
- package/dist/components/legend/index.cjs +4 -4
- package/dist/components/legend/index.js +3 -3
- package/dist/components/line-chart/index.cjs +6 -6
- package/dist/components/line-chart/index.js +5 -5
- package/dist/components/pie-chart/index.cjs +7 -7
- package/dist/components/pie-chart/index.js +6 -6
- package/dist/components/pie-semi-circle-chart/index.cjs +7 -7
- package/dist/components/pie-semi-circle-chart/index.js +6 -6
- package/dist/{format-metric-value-DVBZSN0R.d.cts → format-metric-value-MXm5DtQ_.d.cts} +1 -1
- package/dist/{format-metric-value-DVBZSN0R.d.ts → format-metric-value-MXm5DtQ_.d.ts} +1 -1
- package/dist/hooks/index.cjs +3 -3
- package/dist/hooks/index.js +2 -2
- package/dist/index.cjs +16 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +23 -23
- package/dist/providers/index.cjs +3 -3
- package/dist/providers/index.js +2 -2
- package/dist/utils/index.cjs +2 -2
- package/dist/utils/index.d.cts +7 -7
- package/dist/utils/index.d.ts +7 -7
- package/dist/utils/index.js +1 -1
- package/package.json +1 -1
- package/src/components/private/with-responsive/with-responsive.tsx +1 -1
- package/src/utils/color-utils.ts +7 -7
- package/src/utils/format-metric-value.ts +1 -1
- package/src/utils/format-percentage.ts +1 -1
- package/dist/chunk-AVHWSXUP.js.map +0 -1
- package/dist/chunk-TYYW4BG3.js.map +0 -1
- package/dist/chunk-WPSB7BRR.cjs.map +0 -1
- /package/dist/{chunk-5C2OMRXX.js.map → chunk-6SGGF26Z.js.map} +0 -0
- /package/dist/{chunk-YH6KCYUQ.js.map → chunk-6WQWN5BF.js.map} +0 -0
- /package/dist/{chunk-SUMZU44N.js.map → chunk-7OWIZ5S7.js.map} +0 -0
- /package/dist/{chunk-CC2UH5Y7.js.map → chunk-EKVLCYHS.js.map} +0 -0
- /package/dist/{chunk-OZYA4QTY.js.map → chunk-MRCTAUHL.js.map} +0 -0
- /package/dist/{chunk-BUSMF7CB.js.map → chunk-PTEEI2QM.js.map} +0 -0
- /package/dist/{chunk-P7IYRJQW.js.map → chunk-RUG2O62B.js.map} +0 -0
- /package/dist/{chunk-QDWN3ATP.js.map → chunk-VOWX5TBY.js.map} +0 -0
- /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
|
|
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
|
|
26
|
+
var _chunkN4ZDNOPYcjs = require('./chunk-N4ZDNOPY.cjs');
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
var
|
|
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 =
|
|
193
|
-
const theme =
|
|
194
|
-
const dataSorted =
|
|
195
|
-
const dataWithVisibleZeros =
|
|
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 =
|
|
198
|
+
const legendItems = _chunkBZQFCAX7cjs.useChartLegendItems.call(void 0, dataSorted);
|
|
199
199
|
const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);
|
|
200
|
-
const defaultMargin =
|
|
201
|
-
const [legendRef, legendHeight] =
|
|
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 } =
|
|
215
|
-
const providerTheme =
|
|
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
|
-
|
|
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 =
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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 =
|
|
495
|
-
Legend:
|
|
494
|
+
var BarChart = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0, BarChartWithProvider, {
|
|
495
|
+
Legend: _chunkBZQFCAX7cjs.Legend
|
|
496
496
|
});
|
|
497
|
-
var BarChartResponsive =
|
|
498
|
-
|
|
497
|
+
var BarChartResponsive = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0,
|
|
498
|
+
_chunk5NI3TGRDcjs.withResponsive.call(void 0, BarChartWithProvider),
|
|
499
499
|
{
|
|
500
|
-
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-
|
|
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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-
|
|
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-
|
|
3
|
+
} from "./chunk-D3E235JJ.js";
|
|
8
4
|
import {
|
|
9
5
|
Legend,
|
|
10
6
|
SingleChartContext,
|
|
11
7
|
useChartLegendItems,
|
|
12
8
|
useSingleChartContext
|
|
13
|
-
} from "./chunk-
|
|
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-
|
|
26
|
+
} from "./chunk-MRCTAUHL.js";
|
|
27
27
|
import {
|
|
28
28
|
attachSubComponents,
|
|
29
29
|
isSafari
|
|
30
|
-
} from "./chunk-
|
|
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-
|
|
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
|
|
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
|
|
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
|
|
29
|
+
var _chunkN4ZDNOPYcjs = require('./chunk-N4ZDNOPY.cjs');
|
|
30
30
|
|
|
31
31
|
|
|
32
|
-
var
|
|
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 =
|
|
95
|
-
const [legendRef, legendHeight] =
|
|
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 } =
|
|
127
|
-
const { visibleData, allSegmentsHidden, legendData } =
|
|
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 =
|
|
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
|
-
|
|
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 =
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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 =
|
|
335
|
-
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 =
|
|
340
|
-
|
|
339
|
+
var PieSemiCircleChartResponsive = _chunkFI5B6KSHcjs.attachSubComponents.call(void 0,
|
|
340
|
+
_chunk5NI3TGRDcjs.withResponsive.call(void 0, PieSemiCircleChartWithProvider),
|
|
341
341
|
{
|
|
342
|
-
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-
|
|
352
|
+
//# sourceMappingURL=chunk-6UZHWL6W.cjs.map
|