@automattic/charts 0.53.4 → 0.54.0

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.54.0] - 2026-01-21
+### Added
+- Add labelOverflow ellipsis option to truncate long axis labels for bar chart. [#46656]
+
 ## [0.53.4] - 2026-01-19
 ### Changed
 - Update package dependencies. [#46647]
@@ -632,6 +636,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[0.54.0]: https://github.com/Automattic/charts/compare/v0.53.4...v0.54.0
 [0.53.4]: https://github.com/Automattic/charts/compare/v0.53.3...v0.53.4
 [0.53.3]: https://github.com/Automattic/charts/compare/v0.53.2...v0.53.3
 [0.53.2]: https://github.com/Automattic/charts/compare/v0.53.1...v0.53.2

package/dist/charts/bar-chart/index.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkDDV5726Qcjs = require('../../chunk-DDV5726Q.cjs');
+var _chunk3OONWZ4Zcjs = require('../../chunk-3OONWZ4Z.cjs');
 require('../../chunk-ZPJHWKEK.cjs');
 require('../../chunk-7HROSZRS.cjs');
 require('../../chunk-MUUSZ7J5.cjs');
@@ -11,5 +11,5 @@ require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.BarChart = _chunkDDV5726Qcjs.BarChartResponsive; exports.BarChartUnresponsive = _chunkDDV5726Qcjs.BarChart;
+exports.BarChart = _chunk3OONWZ4Zcjs.BarChartResponsive; exports.BarChartUnresponsive = _chunk3OONWZ4Zcjs.BarChart;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/bar-chart/index.d.cts

@@ -1,5 +1,5 @@
 import { L as Legend } from '../../legend-C9ahiwOt.cjs';
-import { O as Optional, B as BaseChartProps, d as SeriesData, b as DataPointDate } from '../../types-D1lTxRyg.cjs';
+import { O as Optional, B as BaseChartProps, d as SeriesData, b as DataPointDate } from '../../types-B1_Q_Lhh.cjs';
 import { FC, ReactNode, ComponentType } from 'react';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.cjs';
 import { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';

package/dist/charts/bar-chart/index.d.ts

@@ -1,5 +1,5 @@
 import { L as Legend } from '../../legend-jjMmhSg3.js';
-import { O as Optional, B as BaseChartProps, d as SeriesData, b as DataPointDate } from '../../types-D1lTxRyg.js';
+import { O as Optional, B as BaseChartProps, d as SeriesData, b as DataPointDate } from '../../types-B1_Q_Lhh.js';
 import { FC, ReactNode, ComponentType } from 'react';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.js';
 import { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';

package/dist/charts/bar-chart/index.js

@@ -1,7 +1,7 @@
 import {
   BarChart,
   BarChartResponsive
-} from "../../chunk-KBORJZKC.js";
+} from "../../chunk-PU2UO4EG.js";
 import "../../chunk-ALDWCNLH.js";
 import "../../chunk-5XI443YP.js";
 import "../../chunk-NONODB3K.js";

package/dist/charts/bar-list-chart/index.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkFVWTBK44cjs = require('../../chunk-FVWTBK44.cjs');
-require('../../chunk-DDV5726Q.cjs');
+var _chunkEGGRTD4Vcjs = require('../../chunk-EGGRTD4V.cjs');
+require('../../chunk-3OONWZ4Z.cjs');
 require('../../chunk-ZPJHWKEK.cjs');
 require('../../chunk-7HROSZRS.cjs');
 require('../../chunk-MUUSZ7J5.cjs');
@@ -12,5 +12,5 @@ require('../../chunk-EMMSS5I5.cjs');
 
 
 
-exports.BarListChart = _chunkFVWTBK44cjs.BarListChartResponsive; exports.BarListChartUnresponsive = _chunkFVWTBK44cjs.BarListChart;
+exports.BarListChart = _chunkEGGRTD4Vcjs.BarListChartResponsive; exports.BarListChartUnresponsive = _chunkEGGRTD4Vcjs.BarListChart;
 //# sourceMappingURL=index.cjs.map

package/dist/charts/bar-list-chart/index.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.cjs';
 import { TextProps } from '@visx/text';
 import { BarChartProps } from '../bar-chart/index.cjs';
-import { g as ScaleOptions, d as SeriesData } from '../../types-D1lTxRyg.cjs';
+import { g as ScaleOptions, d as SeriesData } from '../../types-B1_Q_Lhh.cjs';
 import { ComponentType, FC } from 'react';
 import '../../legend-C9ahiwOt.cjs';
 import '../../types-C05PdDJa.cjs';

package/dist/charts/bar-list-chart/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.js';
 import { TextProps } from '@visx/text';
 import { BarChartProps } from '../bar-chart/index.js';
-import { g as ScaleOptions, d as SeriesData } from '../../types-D1lTxRyg.js';
+import { g as ScaleOptions, d as SeriesData } from '../../types-B1_Q_Lhh.js';
 import { ComponentType, FC } from 'react';
 import '../../legend-jjMmhSg3.js';
 import '../../types-C05PdDJa.js';

package/dist/charts/bar-list-chart/index.js

@@ -1,8 +1,8 @@
 import {
   BarListChart,
   BarListChartResponsive
-} from "../../chunk-KORG7ITC.js";
-import "../../chunk-KBORJZKC.js";
+} from "../../chunk-2NRSBKV2.js";
+import "../../chunk-PU2UO4EG.js";
 import "../../chunk-ALDWCNLH.js";
 import "../../chunk-5XI443YP.js";
 import "../../chunk-NONODB3K.js";

package/dist/charts/conversion-funnel-chart/index.d.cts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { B as BaseChartProps } from '../../types-D1lTxRyg.cjs';
+import { B as BaseChartProps } from '../../types-B1_Q_Lhh.cjs';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/charts/conversion-funnel-chart/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { B as BaseChartProps } from '../../types-D1lTxRyg.js';
+import { B as BaseChartProps } from '../../types-B1_Q_Lhh.js';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/charts/geo-chart/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.cjs';
 import { FC } from 'react';
-import { B as BaseChartProps, G as GeoData } from '../../types-D1lTxRyg.cjs';
+import { B as BaseChartProps, G as GeoData } from '../../types-B1_Q_Lhh.cjs';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/charts/geo-chart/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.js';
 import { FC } from 'react';
-import { B as BaseChartProps, G as GeoData } from '../../types-D1lTxRyg.js';
+import { B as BaseChartProps, G as GeoData } from '../../types-B1_Q_Lhh.js';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/charts/leaderboard-chart/index.d.cts

@@ -1,5 +1,5 @@
-export { L as LeaderboardChart, b as LeaderboardChartProps, a as LeaderboardChartUnresponsive } from '../../leaderboard-chart-CN80sJmQ.cjs';
-import { L as LeaderboardEntry } from '../../types-D1lTxRyg.cjs';
+export { L as LeaderboardChart, b as LeaderboardChartProps, a as LeaderboardChartUnresponsive } from '../../leaderboard-chart-Df6kkqtI.cjs';
+import { L as LeaderboardEntry } from '../../types-B1_Q_Lhh.cjs';
 export { M as MetricValueType, f as formatMetricValue } from '../../format-metric-value-MXm5DtQ_.cjs';
 import { B as BaseLegendItem } from '../../types-C05PdDJa.cjs';
 import 'react/jsx-runtime';

package/dist/charts/leaderboard-chart/index.d.ts

@@ -1,5 +1,5 @@
-export { L as LeaderboardChart, b as LeaderboardChartProps, a as LeaderboardChartUnresponsive } from '../../leaderboard-chart-DPi2ueOg.js';
-import { L as LeaderboardEntry } from '../../types-D1lTxRyg.js';
+export { L as LeaderboardChart, b as LeaderboardChartProps, a as LeaderboardChartUnresponsive } from '../../leaderboard-chart-BOgMT2BT.js';
+import { L as LeaderboardEntry } from '../../types-B1_Q_Lhh.js';
 export { M as MetricValueType, f as formatMetricValue } from '../../format-metric-value-MXm5DtQ_.js';
 import { B as BaseLegendItem } from '../../types-C05PdDJa.js';
 import 'react/jsx-runtime';

package/dist/charts/line-chart/index.d.cts

@@ -1,5 +1,5 @@
 import { L as Legend } from '../../legend-C9ahiwOt.cjs';
-import { B as BaseChartProps, d as SeriesData, b as DataPointDate, A as AnnotationStyles, O as Optional } from '../../types-D1lTxRyg.cjs';
+import { B as BaseChartProps, d as SeriesData, b as DataPointDate, A as AnnotationStyles, O as Optional } from '../../types-B1_Q_Lhh.cjs';
 import { FC, ReactNode, SVGProps } from 'react';
 import { GlyphProps } from '@visx/xychart';
 import { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';

package/dist/charts/line-chart/index.d.ts

@@ -1,5 +1,5 @@
 import { L as Legend } from '../../legend-jjMmhSg3.js';
-import { B as BaseChartProps, d as SeriesData, b as DataPointDate, A as AnnotationStyles, O as Optional } from '../../types-D1lTxRyg.js';
+import { B as BaseChartProps, d as SeriesData, b as DataPointDate, A as AnnotationStyles, O as Optional } from '../../types-B1_Q_Lhh.js';
 import { FC, ReactNode, SVGProps } from 'react';
 import { GlyphProps } from '@visx/xychart';
 import { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';

package/dist/charts/pie-chart/index.d.cts

@@ -1,7 +1,7 @@
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.cjs';
 import { ReactNode } from 'react';
 import { LegendValueDisplay } from '../../components/legend/index.cjs';
-import { O as Optional, B as BaseChartProps, e as DataPointPercentage } from '../../types-D1lTxRyg.cjs';
+import { O as Optional, B as BaseChartProps, e as DataPointPercentage } from '../../types-B1_Q_Lhh.cjs';
 import { C as ChartComponentWithComposition } from '../../types-BBwg4Evw.cjs';
 import '../../legend-C9ahiwOt.cjs';
 import '../../types-C05PdDJa.cjs';

package/dist/charts/pie-chart/index.d.ts

@@ -1,7 +1,7 @@
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.js';
 import { ReactNode } from 'react';
 import { LegendValueDisplay } from '../../components/legend/index.js';
-import { O as Optional, B as BaseChartProps, e as DataPointPercentage } from '../../types-D1lTxRyg.js';
+import { O as Optional, B as BaseChartProps, e as DataPointPercentage } from '../../types-B1_Q_Lhh.js';
 import { C as ChartComponentWithComposition } from '../../types-DQNnq5Fr.js';
 import '../../legend-jjMmhSg3.js';
 import '../../types-C05PdDJa.js';

package/dist/charts/pie-semi-circle-chart/index.d.cts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { LegendValueDisplay } from '../../components/legend/index.cjs';
-import { O as Optional, B as BaseChartProps, e as DataPointPercentage } from '../../types-D1lTxRyg.cjs';
+import { O as Optional, B as BaseChartProps, e as DataPointPercentage } from '../../types-B1_Q_Lhh.cjs';
 import { C as ChartComponentWithComposition } from '../../types-BBwg4Evw.cjs';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.cjs';
 import { PieArcDatum } from '@visx/shape/lib/shapes/Pie';

package/dist/charts/pie-semi-circle-chart/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { LegendValueDisplay } from '../../components/legend/index.js';
-import { O as Optional, B as BaseChartProps, e as DataPointPercentage } from '../../types-D1lTxRyg.js';
+import { O as Optional, B as BaseChartProps, e as DataPointPercentage } from '../../types-B1_Q_Lhh.js';
 import { C as ChartComponentWithComposition } from '../../types-DQNnq5Fr.js';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.js';
 import { PieArcDatum } from '@visx/shape/lib/shapes/Pie';

package/dist/{chunk-KORG7ITC.js → chunk-2NRSBKV2.js}

@@ -1,6 +1,6 @@
 import {
   BarChartResponsive
-} from "./chunk-KBORJZKC.js";
+} from "./chunk-PU2UO4EG.js";
 import {
   withResponsive
 } from "./chunk-NONODB3K.js";
@@ -193,4 +193,4 @@ export {
   BarListChart,
   BarListChartResponsive
 };
-//# sourceMappingURL=chunk-KORG7ITC.js.map
+//# sourceMappingURL=chunk-2NRSBKV2.js.map

package/dist/{chunk-DDV5726Q.cjs → chunk-3OONWZ4Z.cjs}

@@ -26,6 +26,7 @@ var _chunkMUUSZ7J5cjs = require('./chunk-MUUSZ7J5.cjs');
 var _chunkWKN6C4ZEcjs = require('./chunk-WKN6C4ZE.cjs');
 
 
+
 var _chunkZVGEDXDPcjs = require('./chunk-ZVGEDXDP.cjs');
 
 // src/charts/bar-chart/bar-chart.tsx
@@ -50,6 +51,81 @@ var bar_chart_module_default = {
 // src/charts/bar-chart/private/use-bar-chart-options.ts
 
 
+
+// src/charts/bar-chart/private/truncated-tick-component.tsx
+
+
+var _jsxruntime = require('react/jsx-runtime');
+var getScaleBandwidth = (scale) => {
+  return scale && "bandwidth" in scale ? _nullishCoalesce(scale.bandwidth(), () => ( 0)) : 0;
+};
+var MIN_TICK_LABEL_WIDTH = 20;
+var TruncatedTickComponent = ({
+  x,
+  y,
+  formattedValue,
+  axis,
+  textAnchor,
+  fill,
+  dy,
+  ...textProps
+}) => {
+  const { xScale, yScale } = _react.useContext.call(void 0, _xychart.DataContext) || {};
+  const scale = axis === "x" ? xScale : yScale;
+  const bandwidth = getScaleBandwidth(scale);
+  const maxWidth = Math.max(bandwidth, MIN_TICK_LABEL_WIDTH);
+  let textAlign = "center";
+  if (textAnchor === "start") {
+    textAlign = "left";
+  } else if (textAnchor === "end") {
+    textAlign = "right";
+  } else if (textAnchor === "middle") {
+    textAlign = "center";
+  }
+  let xOffset = 0;
+  if (textAlign === "center") {
+    xOffset = -maxWidth / 2;
+  } else if (textAlign === "right") {
+    xOffset = -maxWidth;
+  }
+  const { fontSize, fontFamily, fontWeight, fontStyle, letterSpacing, opacity } = textProps;
+  const textStyles = {
+    /**
+     * SVG <text> elements are vertically aligned to the baseline by default, but HTML <div> elements inside <foreignObject>
+     * are positioned relative to the top-left corner. To visually align the tick label like SVG text,
+     * we shift the div up by 100% of its height and adjust by twice the SVG dy value (from visx) to approximate original placement.
+     */
+    transform: `translateY(calc(-100% + ${_nullishCoalesce(dy, () => ( "0"))} * 2))`,
+    // Safari doesn't work well with foreignObject positioning. Use position: fixed as a workaround.
+    ..._chunkZVGEDXDPcjs.isSafari.call(void 0, ) ? { position: "fixed" } : {},
+    // Apply compatible SVG text styles
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    letterSpacing,
+    opacity,
+    // Convert svg text styles to CSS styles for the div
+    color: _nullishCoalesce(fill, () => ( "inherit")),
+    textAlign,
+    // Ensure text is truncated with ellipsis, remains on one line, and shows the full value in a tooltip on hover.
+    // The surrounding div uses CSS to handle overflow, and the 'title' attribute is set for accessibility.
+    width: maxWidth,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    cursor: "default",
+    pointerEvents: "auto"
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "foreignObject", { x: x + xOffset, y, width: maxWidth, height: 0, overflow: "visible", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: textStyles, title: formattedValue, children: formattedValue }) });
+};
+var createTruncatedTickComponent = (axis) => (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TruncatedTickComponent, { ...props, axis });
+};
+var TruncatedXTickComponent = createTruncatedTickComponent("x");
+var TruncatedYTickComponent = createTruncatedTickComponent("y");
+
+// src/charts/bar-chart/private/use-bar-chart-options.ts
 var formatDateTick = (timestamp) => {
   const date = new Date(timestamp);
   return date.toLocaleDateString(void 0, {
@@ -117,6 +193,8 @@ function useBarChartOptions(data, horizontal, options = {}) {
     const xScale = { ...baseXScale, ...options.xScale || {} };
     const yScale = { ...baseYScale, ...options.yScale || {} };
     const providedToolTipLabelFormatter = horizontal ? _optionalChain([options, 'access', _9 => _9.axis, 'optionalAccess', _10 => _10.y, 'optionalAccess', _11 => _11.tickFormat]) : _optionalChain([options, 'access', _12 => _12.axis, 'optionalAccess', _13 => _13.x, 'optionalAccess', _14 => _14.tickFormat]);
+    const { labelOverflow: xLabelOverflow, ...xAxisOptions } = _optionalChain([options, 'access', _15 => _15.axis, 'optionalAccess', _16 => _16.x]) || {};
+    const { labelOverflow: yLabelOverflow, ...yAxisOptions } = _optionalChain([options, 'access', _17 => _17.axis, 'optionalAccess', _18 => _18.y]) || {};
     return {
       gridVisibility,
       xScale,
@@ -130,13 +208,15 @@ function useBarChartOptions(data, horizontal, options = {}) {
           orientation: "bottom",
           numTicks: 4,
           tickFormat: xTickFormat,
-          ..._optionalChain([options, 'access', _15 => _15.axis, 'optionalAccess', _16 => _16.x]) || {}
+          ...xLabelOverflow === "ellipsis" ? { tickComponent: TruncatedXTickComponent } : {},
+          ...xAxisOptions
         },
         y: {
           orientation: "left",
           numTicks: 4,
           tickFormat: yTickFormat,
-          ..._optionalChain([options, 'access', _17 => _17.axis, 'optionalAccess', _18 => _18.y]) || {}
+          ...yLabelOverflow === "ellipsis" ? { tickComponent: TruncatedYTickComponent } : {},
+          ...yAxisOptions
         }
       },
       barGroup: {
@@ -150,7 +230,7 @@ function useBarChartOptions(data, horizontal, options = {}) {
 }
 
 // src/charts/bar-chart/bar-chart.tsx
-var _jsxruntime = require('react/jsx-runtime');
+
 var validateData = (data) => {
   if (!_optionalChain([data, 'optionalAccess', _19 => _19.length])) return "No data available";
   const hasInvalidData = data.some(
@@ -505,4 +585,4 @@ var BarChartResponsive = _chunkZVGEDXDPcjs.attachSubComponents.call(void 0,
 
 
 exports.BarChart = BarChart; exports.BarChartResponsive = BarChartResponsive;
-//# sourceMappingURL=chunk-DDV5726Q.cjs.map
+//# sourceMappingURL=chunk-3OONWZ4Z.cjs.map

package/dist/chunk-3OONWZ4Z.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-3OONWZ4Z.cjs","../src/charts/bar-chart/bar-chart.tsx","../src/charts/bar-chart/bar-chart.module.scss","../src/charts/bar-chart/private/use-bar-chart-options.ts","../src/charts/bar-chart/private/truncated-tick-component.tsx"],"names":["jsx","useMemo"],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-3OONWZ4Z.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 { Legend, useChartLegendItems } from '../../components/legend';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';\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 { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\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/charts/bar-chart/bar-chart.module.scss';export default {\n  \"bar-chart\": \"a8ccharts-3gflnB\",\n  \"bar-chart--legend-top\": \"a8ccharts-8Vnz-c\",\n  \"bar-chart-legend\": \"a8ccharts-XhI9HR\",\n  \"bar-chart--animated\": \"a8ccharts-98W-yu\",\n  \"rise\": \"a8ccharts-z6AsiQ\",\n  \"bar-chart--animated-horizontal\": \"a8ccharts-HFA3FF\",\n  \"stretch\": \"a8ccharts-DQp37O\"\n};","import { formatNumberCompact } from '@automattic/number-formatters';\nimport { useMemo } from 'react';\nimport { TruncatedXTickComponent, TruncatedYTickComponent } from './truncated-tick-component';\nimport type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';\nimport type { DataPointDate, BaseChartProps, SeriesData } from '../../../types';\nimport type { TickFormatter } from '@visx/axis';\n\nconst formatDateTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t} );\n};\n\n/**\n * Get the group padding of a scale.\n *\n * @param scale - The scale to get the group padding of.\n * @return The group padding of the scale.\n */\nconst getGroupPadding = ( scale: Record< string, unknown > ): number => {\n\treturn typeof scale.paddingInner === 'number' ? ( scale.paddingInner as number ) : 0;\n};\n\n/**\n * Returns the merged options for the bar chart, including axis and scale configuration based on the orientation.\n *\n * @param data       - The data to be displayed in the chart.\n * @param horizontal - Whether the chart is horizontal or vertical.\n * @param options    - The options for the chart.\n * @return The merged options for the chart.\n */\nexport function useBarChartOptions(\n\tdata: SeriesData[],\n\thorizontal: boolean,\n\toptions: BaseChartProps[ 'options' ] = {}\n) {\n\tconst defaultOptions = useMemo( () => {\n\t\tconst bandScale = {\n\t\t\ttype: 'band' as const,\n\t\t\tpadding: 0.2,\n\t\t\tpaddingInner: 0.1,\n\t\t};\n\t\tconst linearScale = {\n\t\t\ttype: 'linear' as const,\n\t\t\tnice: true,\n\t\t\tzero: false,\n\t\t};\n\n\t\tconst labelFormatter = data?.[ 0 ]?.data?.[ 0 ]?.label\n\t\t\t? ( label: string ) => label\n\t\t\t: formatDateTick;\n\t\tconst valueFormatter = formatNumberCompact as TickFormatter< unknown >;\n\n\t\tconst labelAccessor = ( d: DataPointDate ) => d?.label || d?.date;\n\t\tconst valueAccessor = ( d: DataPointDate | EnhancedDataPoint ) => {\n\t\t\t// Use visualValue for bar rendering if available (for zero values), otherwise use value\n\t\t\tconst enhancedPoint = d as EnhancedDataPoint;\n\t\t\treturn enhancedPoint?.visualValue !== undefined ? enhancedPoint.visualValue : d?.value;\n\t\t};\n\n\t\treturn {\n\t\t\tvertical: {\n\t\t\t\txTickFormat: labelFormatter,\n\t\t\t\tyTickFormat: valueFormatter,\n\t\t\t\ttooltipLabelFormatter: labelFormatter,\n\t\t\t\txAccessor: labelAccessor,\n\t\t\t\tyAccessor: valueAccessor,\n\t\t\t\tgridVisibility: 'x',\n\t\t\t\txScale: bandScale,\n\t\t\t\tyScale: linearScale,\n\t\t\t},\n\t\t\thorizontal: {\n\t\t\t\txTickFormat: valueFormatter,\n\t\t\t\tyTickFormat: labelFormatter,\n\t\t\t\ttooltipLabelFormatter: labelFormatter,\n\t\t\t\txAccessor: valueAccessor,\n\t\t\t\tyAccessor: labelAccessor,\n\t\t\t\tgridVisibility: 'y',\n\t\t\t\txScale: linearScale,\n\t\t\t\tyScale: bandScale,\n\t\t\t},\n\t\t};\n\t}, [ data ] );\n\n\treturn useMemo( () => {\n\t\tconst orientationKey = horizontal ? 'horizontal' : 'vertical';\n\t\tconst {\n\t\t\txTickFormat,\n\t\t\tyTickFormat,\n\t\t\ttooltipLabelFormatter: defaultTooltipLabelFormatter,\n\t\t\txAccessor,\n\t\t\tyAccessor,\n\t\t\tgridVisibility,\n\t\t\txScale: baseXScale,\n\t\t\tyScale: baseYScale,\n\t\t} = defaultOptions[ orientationKey ];\n\n\t\tconst xScale = { ...baseXScale, ...( options.xScale || {} ) };\n\t\tconst yScale = { ...baseYScale, ...( options.yScale || {} ) };\n\t\tconst providedToolTipLabelFormatter = horizontal\n\t\t\t? options.axis?.y?.tickFormat\n\t\t\t: options.axis?.x?.tickFormat;\n\n\t\tconst { labelOverflow: xLabelOverflow, ...xAxisOptions } = options.axis?.x || {};\n\t\tconst { labelOverflow: yLabelOverflow, ...yAxisOptions } = options.axis?.y || {};\n\n\t\treturn {\n\t\t\tgridVisibility,\n\t\t\txScale,\n\t\t\tyScale,\n\t\t\taccessors: {\n\t\t\t\txAccessor,\n\t\t\t\tyAccessor,\n\t\t\t},\n\t\t\taxis: {\n\t\t\t\tx: {\n\t\t\t\t\torientation: 'bottom' as const,\n\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\ttickFormat: xTickFormat,\n\t\t\t\t\t...( xLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedXTickComponent } : {} ),\n\t\t\t\t\t...xAxisOptions,\n\t\t\t\t},\n\t\t\t\ty: {\n\t\t\t\t\torientation: 'left' as const,\n\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\ttickFormat: yTickFormat,\n\t\t\t\t\t...( yLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedYTickComponent } : {} ),\n\t\t\t\t\t...yAxisOptions,\n\t\t\t\t},\n\t\t\t},\n\t\t\tbarGroup: {\n\t\t\t\tpadding: getGroupPadding( horizontal ? yScale : xScale ),\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tlabelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,\n\t\t\t},\n\t\t};\n\t}, [ defaultOptions, options, horizontal ] );\n}\n","import { DataContext } from '@visx/xychart';\nimport { useContext } from 'react';\nimport { isSafari } from '../../../utils';\nimport type { AxisScale, TickRendererProps } from '@visx/axis';\nimport type { FC, CSSProperties } from 'react';\n\n/**\n * Get the bandwidth of a scale\n *\n * @param scale - The scale to get the bandwidth of\n * @return The bandwidth of the scale\n */\nconst getScaleBandwidth = < Scale extends AxisScale >( scale?: Scale ) => {\n\treturn scale && 'bandwidth' in scale ? scale.bandwidth() ?? 0 : 0;\n};\ninterface TruncatedTickComponentProps extends TickRendererProps {\n\t/** Which axis this tick belongs to */\n\taxis: 'x' | 'y';\n}\n\n/**\n * Minimum width in pixels for tick labels when scale bandwidth is very small.\n * Prevents labels from collapsing to unreadable widths on dense charts.\n *\n * Trade-off: When bandwidth is less than this minimum (e.g., many bars in a narrow chart),\n * adjacent labels may overlap since each label uses this minimum width regardless of\n * available space. This prioritizes label readability over preventing overlap.\n *\n * For very dense charts where overlap occurs, consider:\n * - Using `numTicks` option to reduce the number of displayed labels\n * - Using `tickFormat` to abbreviate label text\n * - Increasing chart width or reducing data points\n */\nconst MIN_TICK_LABEL_WIDTH = 20;\n\n/**\n * A tick component that renders labels with text truncation (ellipsis) when they exceed\n * the available bandwidth. Shows the full text on hover via native title attribute.\n *\n * Uses foreignObject to embed HTML within SVG, enabling CSS text-overflow: ellipsis.\n * Inherits text styles from tickLabelProps passed by visx Axis component.\n *\n * Note: A minimum label width (MIN_TICK_LABEL_WIDTH) is enforced to keep labels readable.\n * On very dense charts where bandwidth < 20px, this may cause label overlap.\n * See MIN_TICK_LABEL_WIDTH documentation for mitigation strategies.\n *\n * @param props                - The props for the truncated tick component\n * @param props.x              - The x position of the tick\n * @param props.y              - The y position of the tick\n * @param props.formattedValue - The formatted value of the tick\n * @param props.axis           - The axis this tick belongs to\n * @param props.textAnchor     - The text anchor of the tick\n * @param props.fill           - The fill color of the tick\n * @param props.dy             - The dy offset of the tick\n *\n * @return The truncated tick component\n */\nexport const TruncatedTickComponent: FC< TruncatedTickComponentProps > = ( {\n\tx,\n\ty,\n\tformattedValue,\n\taxis,\n\ttextAnchor,\n\tfill,\n\tdy,\n\t...textProps\n} ) => {\n\t// Get max width of the tick label\n\tconst { xScale, yScale } = useContext( DataContext ) || {};\n\tconst scale = axis === 'x' ? xScale : yScale;\n\tconst bandwidth = getScaleBandwidth( scale );\n\tconst maxWidth = Math.max( bandwidth, MIN_TICK_LABEL_WIDTH );\n\n\t// Map SVG textAnchor to CSS textAlign\n\tlet textAlign: 'left' | 'right' | 'center' = 'center';\n\tif ( textAnchor === 'start' ) {\n\t\ttextAlign = 'left';\n\t} else if ( textAnchor === 'end' ) {\n\t\ttextAlign = 'right';\n\t} else if ( textAnchor === 'middle' ) {\n\t\ttextAlign = 'center';\n\t}\n\n\t// Calculate x offset based on text alignment\n\tlet xOffset = 0;\n\tif ( textAlign === 'center' ) {\n\t\txOffset = -maxWidth / 2;\n\t} else if ( textAlign === 'right' ) {\n\t\txOffset = -maxWidth;\n\t}\n\n\t// Extract compatible style properties from SVG text props\n\tconst { fontSize, fontFamily, fontWeight, fontStyle, letterSpacing, opacity } = textProps as {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\topacity?: CSSProperties[ 'opacity' ];\n\t};\n\n\tconst textStyles: CSSProperties = {\n\t\t/**\n\t\t * SVG <text> elements are vertically aligned to the baseline by default, but HTML <div> elements inside <foreignObject>\n\t\t * are positioned relative to the top-left corner. To visually align the tick label like SVG text,\n\t\t * we shift the div up by 100% of its height and adjust by twice the SVG dy value (from visx) to approximate original placement.\n\t\t */\n\t\ttransform: `translateY(calc(-100% + ${ dy ?? '0' } * 2))`,\n\t\t// Safari doesn't work well with foreignObject positioning. Use position: fixed as a workaround.\n\t\t...( isSafari() ? { position: 'fixed' as const } : {} ),\n\t\t// Apply compatible SVG text styles\n\t\tfontSize,\n\t\tfontFamily,\n\t\tfontWeight,\n\t\tfontStyle,\n\t\tletterSpacing,\n\t\topacity,\n\t\t// Convert svg text styles to CSS styles for the div\n\t\tcolor: fill ?? 'inherit',\n\t\ttextAlign,\n\t\t// Ensure text is truncated with ellipsis, remains on one line, and shows the full value in a tooltip on hover.\n\t\t// The surrounding div uses CSS to handle overflow, and the 'title' attribute is set for accessibility.\n\t\twidth: maxWidth,\n\t\toverflow: 'hidden',\n\t\ttextOverflow: 'ellipsis',\n\t\twhiteSpace: 'nowrap',\n\t\tcursor: 'default',\n\t\tpointerEvents: 'auto',\n\t};\n\n\treturn (\n\t\t<foreignObject x={ x + xOffset } y={ y } width={ maxWidth } height={ 0 } overflow=\"visible\">\n\t\t\t<div style={ textStyles } title={ formattedValue }>\n\t\t\t\t{ formattedValue }\n\t\t\t</div>\n\t\t</foreignObject>\n\t);\n};\n\n/**\n * Factory function to create a truncated tick component for a specific axis.\n * Returns a component that can be passed to visx's tickComponent prop.\n *\n * @param axis - The axis this tick component is for ('x' or 'y')\n * @return A tick component function compatible with visx's TickRendererProps\n */\nconst createTruncatedTickComponent = ( axis: 'x' | 'y' ) => ( props: TickRendererProps ) => {\n\treturn <TruncatedTickComponent { ...props } axis={ axis } />;\n};\n\n/**\n * Pre-created tick components for x and y axes.\n * These functions are created once at module initialization and reused,\n * avoiding repeated factory calls when configuring axes.\n */\nexport const TruncatedXTickComponent = createTruncatedTickComponent( 'x' );\nexport const TruncatedYTickComponent = createTruncatedTickComponent( 'y' );\n"]}

package/dist/{chunk-FVWTBK44.cjs → chunk-EGGRTD4V.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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; }
 
-var _chunkDDV5726Qcjs = require('./chunk-DDV5726Q.cjs');
+var _chunk3OONWZ4Zcjs = require('./chunk-3OONWZ4Z.cjs');
 
 
 var _chunkMUUSZ7J5cjs = require('./chunk-MUUSZ7J5.cjs');
@@ -142,7 +142,7 @@ var BarListChartInternal = ({
     };
   }, [options, width, data, height]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkDDV5726Qcjs.BarChartResponsive,
+    _chunk3OONWZ4Zcjs.BarChartResponsive,
     {
       orientation: "horizontal",
       gridVisibility: "none",
@@ -193,4 +193,4 @@ var BarListChartResponsive = _chunkMUUSZ7J5cjs.withResponsive.call(void 0, BarLi
 
 
 exports.BarListChart = BarListChart; exports.BarListChartResponsive = BarListChartResponsive;
-//# sourceMappingURL=chunk-FVWTBK44.cjs.map
+//# sourceMappingURL=chunk-EGGRTD4V.cjs.map

package/dist/{chunk-FVWTBK44.cjs.map → chunk-EGGRTD4V.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-FVWTBK44.cjs","../src/charts/bar-list-chart/bar-list-chart.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACXA,iEAAoC;AACpC,oCAAsB;AACtB,oCAAuC;AACvC,kCAAqC;AACrC,8BAAoC;AA0FlC,+CAAA;AARF,IAAM,kBAAA,EAAoB,CAA6B,KAAA,EAAA,GAAmB;AAEzE,EAAA,MAAM,EAAA,EAAI,KAAA;AACV,EAAA,OAAO,EAAA,GAAK,YAAA,GAAe,EAAA,mCAAI,CAAA,2BAAG,SAAA,mBAAU,GAAA,UAAK,IAAA,EAAI,CAAA;AACtD,CAAA;AAEA,IAAM,sBAAA,EAAwB,CAAE,EAAE,SAAA,EAAW,CAAA,EAAG,CAAA,EAAG,KAAA,EAAO,UAAU,CAAA,EAAA,GAAO;AAC1E,EAAA,uBACC,6BAAA,UAAC,EAAA,EAAO,GAAG,SAAA,EAAY,UAAA,EAAW,OAAA,EAAQ,CAAA,EAAQ,CAAA,EAC/C,QAAA,EAAA,SAAA,CAAW,KAAM,EAAA,CACpB,CAAA;AAEF,CAAA;AAEA,IAAM,sBAAA,EAAwB,CAAE,EAAE,SAAA,EAAW,CAAA,EAAG,CAAA,EAAG,KAAA,EAAO,UAAU,CAAA,EAAA,GAAyB;AAC5F,EAAA,uBACC,6BAAA,UAAC,EAAA,EAAO,GAAG,SAAA,EAAY,UAAA,EAAW,KAAA,EAAM,CAAA,EAAQ,CAAA,EAAQ,UAAA,EAAa,GAAA,EAClE,QAAA,EAAA,SAAA,CAAW,KAAM,EAAA,CACpB,CAAA;AAEF,CAAA;AAEA,IAAM,aAAA,EAAe,CAAE;AAAA,EACtB,KAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA,EAAiB,qBAAA;AAAA,EACjB,eAAA,EAAiB;AAClB,CAAA,EAAA,GASO;AACN,EAAA,GAAA,CAAK,KAAA,CAAM,OAAA,IAAW,CAAA,EAAI;AACzB,IAAA,OAAO,IAAA;AAAA,EACR;AAGA,EAAA,MAAM,kBAAA,EAAoB,KAAA,CAAM,GAAA;AAAA,IAAK,CAAE,EAAE,KAAA,EAAO,MAAM,CAAA,EAAA,GACrD,OAAO,eAAA,IAAmB,WAAA,EAAa,cAAA,CAAgB,KAAA,EAAO,KAAA,EAAO,KAAM,EAAA,EAAI,CAAC;AAAA,EACjF,CAAA;AAEA,EAAA,OAAO,KAAA,CAAM,GAAA,CAAK,CAAE,EAAE,IAAA,EAAM,eAAe,CAAA,EAAG,KAAA,EAAA,GAAW;AACxD,IAAA,MAAM,UAAA,mBAAY,iBAAA,CAAmB,KAAM,CAAA,UAAK,CAAC,GAAA;AAEjD,IAAA,OAAO,SAAA,CAAU,UAAA;AACjB,IAAA,OAAO,SAAA,CAAU,EAAA;AAEjB,IAAA,MAAM,IAAA,EAAM,IAAA,CAAK,MAAA;AAAA,MAChB,CAAE,GAAA,EAAK,EAAE,IAAA,EAAM,WAAW,CAAA,EAAA,GAAO,IAAA,EAAA,kCAAQ,UAAA,qBAAY,KAAM,CAAA,6BAAG,OAAA,UAAS,GAAA,CAAA;AAAA,MACvE;AAAA,IACD,CAAA;AACA,IAAA,MAAM,EAAA,EAAI,IAAA,CAAK,EAAA,EAAI,OAAA;AAEnB,IAAA,uBACC,8BAAA,YAAC,EAAA,EACA,QAAA,EAAA;AAAA,sBAAA,6BAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,CAAA,EAAI,aAAA;AAAA,UACJ,CAAA;AAAA,UACA,KAAA,EAAQ,cAAA;AAAA,UACR,SAAA,EAAY;AAAA,QAAA;AAAA,MACb,CAAA;AAAA,sBACA,6BAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,CAAA,EAAI,aAAA;AAAA,UACJ,CAAA;AAAA,UACA,KAAA,EAAQ,GAAA;AAAA,UACR,SAAA,EAAY,cAAA;AAAA,UACZ,IAAA;AAAA,UACA;AAAA,QAAA;AAAA,MACD;AAAA,IAAA,EAAA,CAAA,EAhBY,KAiBb,CAAA;AAAA,EAEF,CAAE,CAAA;AACH,CAAA;AAUA,IAAM,kBAAA,EAAoB,CACzB,IAAA,EACA,YAAA,EACA,MAAA,EACA,aAAA,EAAA,GACI;AACJ,EAAA,GAAA,CAAK,CAAE,aAAA,EAAgB;AACtB,IAAA,OAAO,CAAA;AAAA,EACR;AAEA,EAAA,MAAM,SAAA,EAAW,IAAA,CAAK,GAAA,CAAK,CAAE,EAAE,MAAM,CAAA,EAAA,GAAO,KAAM,CAAA;AAElD,EAAA,MAAM,OAAA,EAAS,gCAAA;AAAuB,IACrC,IAAA,EAAM,MAAA;AAAA,IACN,KAAA,EAAO,CAAE,CAAA,EAAG,MAAO,CAAA;AAAA,IACnB,MAAA,EAAQ,QAAA;AAAA,IACR,GAAG;AAAA,EACJ,CAAE,CAAA;AAEF,EAAA,MAAM,WAAA,EAAa,8BAAA;AAAqB,IACvC,MAAA,EAAQ,QAAA;AAAA,IACR,KAAA,EAAO,CAAE,CAAA,EAAG,iBAAA,CAAmB,MAAO,CAAE,CAAA;AAAA,IACxC,OAAA,EAAS,YAAA,CAAa;AAAA,EACvB,CAAE,CAAA;AAEF,EAAA,MAAM,iBAAA,EAAmB,CAAA;AACzB,EAAA,MAAM,aAAA,EAAe,iBAAA,CAAmB,UAAW,CAAA;AAGnD,EAAA,OAAO,CAAA,CAAG,aAAA,EAAe,gBAAA,CAAA;AAC1B,CAAA;AAEA,IAAM,qBAAA,EAAgD,CAAE;AAAA,EACvD,IAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,EAAU,CAAC,CAAA;AAAA,EACX,OAAA,EAAS;AAAA,IACR,IAAA,EAAM,CAAA;AAAA,IACN,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,CAAA;AAAA,IACR,GAAA,EAAK;AAAA,EACN,CAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAAA,GAAO;AACN,EAAA,MAAM,aAAA,EAAe,4BAAA,CAAS,EAAA,GAAM;AACnC,IAAA,MAAM,cAAA,EAAgB,IAAA,CAAK,OAAA,EAAS,CAAA;AAEpC,IAAA,MAAM,cAAA,EAAgB;AAAA;AAAA,MAErB,YAAA,EAAc,cAAA,EAAgB,IAAA,EAAM,GAAA;AAAA,MACpC,OAAA,EAAS,cAAA,EAAgB,IAAA,EAAM;AAAA,IAChC,CAAA;AACA,IAAA,MAAM,cAAA,EAAgB;AAAA;AAAA,MAErB,IAAA,EAAM;AAAA,IACP,CAAA;AACA,IAAA,MAAM,OAAA,EAAS;AAAA,MACd,GAAG,aAAA;AAAA,MACH,oBAAK,OAAA,CAAQ,MAAA,UAAU,CAAC;AAAA,IACzB,CAAA;AACA,IAAA,MAAM,OAAA,EAAS;AAAA,MACd,GAAG,aAAA;AAAA,MACH,oBAAK,OAAA,CAAQ,MAAA,UAAU,CAAC;AAAA,IACzB,CAAA;AAEA,IAAA,OAAO;AAAA,MACN,MAAA;AAAA,MACA,MAAA;AAAA,MACA,aAAA,mBAAe,OAAA,CAAQ,aAAA,UAAA,CAAmB,cAAA,EAAgB,EAAA,EAAI,EAAA,GAAA;AAAA,MAC9D,cAAA,mBAAgB,OAAA,CAAQ,cAAA,UAAA,CAAoB,CAAA,KAAA,EAAA,GAAS,mDAAA,KAA2B,CAAA,GAAA;AAAA,MAChF,cAAA,mBAAgB,OAAA,CAAQ,cAAA,UAAA,CAAoB,CAAA,KAAA,EAAA,GAAS,MAAA,CAAQ,KAAM,CAAA,GAAA;AAAA,MACnE,aAAA,mBAAe,OAAA,CAAQ,aAAA,UAAiB,OAAA;AAAA,MACxC,OAAA,mBAAS,OAAA,CAAQ,OAAA,UAAW,iBAAA,CAAmB,IAAA,EAAM,MAAA,EAAQ,MAAA,EAAQ,aAAc;AAAA,IACpF,CAAA;AAAA,EACD,CAAA,EAAG,CAAE,OAAA,EAAS,KAAA,EAAO,IAAA,EAAM,MAAO,CAAE,CAAA;AAEpC,EAAA,uBACC,6BAAA;AAAA,IAAC,oCAAA;AAAA,IAAA;AAAA,MACA,WAAA,EAAY,YAAA;AAAA,MACZ,cAAA,EAAiB,MAAA;AAAA,MACjB,IAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA,EAAU;AAAA,QACT,IAAA,EAAM;AAAA,UACL,CAAA,EAAG;AAAA,YACF,QAAA,EAAU,CAAE,WAAA,EAAA,mBACX,6BAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACE,GAAG,WAAA;AAAA,gBACL,IAAA;AAAA,gBACA,OAAA,EAAU,YAAA,CAAa,OAAA;AAAA,gBACvB,aAAA,EAAgB,YAAA,CAAa,aAAA;AAAA,gBAC7B,aAAA,EAAgB,YAAA,CAAa,aAAA;AAAA,gBAC7B,cAAA,EAAiB,YAAA,CAAa,cAAA;AAAA,gBAC9B,cAAA,EAAiB,YAAA,CAAa,cAAA;AAAA,gBAC9B,cAAA,EAAiB,OAAA,CAAQ,cAAA;AAAA,gBACzB,cAAA,EAAiB,OAAA,CAAQ;AAAA,cAAA;AAAA,YAC1B;AAAA,UAEF,CAAA;AAAA,UACA,CAAA,EAAG;AAAA,YACF,QAAA,EAAU,CAAA,EAAA,GAAM;AAAA,UACjB;AAAA,QACD,CAAA;AAAA,QACA,MAAA,EAAQ,YAAA,CAAa,MAAA;AAAA,QACrB,MAAA,EAAQ,YAAA,CAAa;AAAA,MACtB,CAAA;AAAA,MACE,GAAG;AAAA,IAAA;AAAA,EACN,CAAA;AAEF,CAAA;AAEA,IAAM,aAAA,EAAwC,CAAA,KAAA,EAAA,GAAS;AACtD,EAAA,MAAM,gBAAA,EAAkB,+BAAA,qCAAgC,CAAA;AAGxD,EAAA,GAAA,CAAK,eAAA,EAAkB;AACtB,IAAA,uBAAO,6BAAA,oBAAC,EAAA,EAAuB,GAAG,MAAA,CAAQ,CAAA;AAAA,EAC3C;AAGA,EAAA,uBACC,6BAAA,sCAAC,EAAA,EACA,QAAA,kBAAA,6BAAA,oBAAC,EAAA,EAAuB,GAAG,MAAA,CAAQ,EAAA,CACpC,CAAA;AAEF,CAAA;AAEA,YAAA,CAAa,YAAA,EAAc,cAAA;AAE3B,IAAM,uBAAA,EAAyB,8CAAA,YAAkD,CAAA;AD3HjF;AACA;AACE;AACA;AACF,6FAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-FVWTBK44.cjs","sourcesContent":[null,"import { formatNumberCompact } from '@automattic/number-formatters';\nimport { Group } from '@visx/group';\nimport { createScale, scaleBand } from '@visx/scale';\nimport { Text, type TextProps } from '@visx/text';\nimport { useContext, useMemo } from 'react';\nimport { GlobalChartsContext, GlobalChartsProvider } from '../../providers';\nimport { BarChart } from '../bar-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport type { SeriesData } from '../..';\nimport type { ScaleOptions } from '../../types';\nimport type { BarChartProps } from '../bar-chart/bar-chart';\nimport type { AxisRendererProps, AxisScale } from '@visx/axis';\nimport type { AnyD3Scale } from '@visx/scale';\nimport type { ComponentType, FC } from 'react';\n\nexport interface BarListChartProps\n\textends Exclude< BarChartProps, 'orientation' | 'size' | 'gridVisibility' > {\n\toptions?: {\n\t\t/**\n\t\t * Scale for the y axis. Exclude the type property.\n\t\t */\n\t\tyScale: Omit< ScaleOptions, 'type' >;\n\t\t/**\n\t\t * Scale for the x axis. Exclude the type property.\n\t\t */\n\t\txScale: Omit< ScaleOptions, 'type' >;\n\t\t/**\n\t\t * Formatter for the label.\n\t\t */\n\t\tlabelFormatter?: ( value: string ) => string;\n\t\t/**\n\t\t * Formatter for the value.\n\t\t */\n\t\tvalueFormatter?: ( value: number ) => string;\n\t\t/**\n\t\t * y offset of the label and value. Default is based on the number of series, automatically computed.\n\t\t */\n\t\tyOffset?: number;\n\t\t/**\n\t\t * x position of the label.\n\t\t */\n\t\tlabelPosition?: number;\n\t\t/**\n\t\t * x position of the value.\n\t\t */\n\t\tvaluePosition?: number;\n\t\t/**\n\t\t * Custom render function for the label.\n\t\t */\n\t\tlabelComponent?: ComponentType< RenderLabelProps >;\n\t\t/**\n\t\t * Custom render function for the value.\n\t\t */\n\t\tvalueComponent?: ComponentType< RenderValueProps >;\n\t};\n}\n\nexport interface RenderLabelProps {\n\ttextProps: TextProps;\n\tx: number;\n\ty: number;\n\tlabel: string;\n\tformatter: ( value: string ) => string;\n}\n\nexport interface RenderValueProps {\n\ttextProps: TextProps;\n\tx: number;\n\ty: number;\n\tvalue: number;\n\t/**\n\t * Original data\n\t */\n\tdata: SeriesData[];\n\t/**\n\t * Index of the data point\n\t */\n\tindex: number;\n\tformatter: ( value: number ) => string;\n}\n\n/**\n * Get the bandwidth of a scale\n * @param scale - The scale to get the bandwidth of\n * @return The bandwidth of the scale\n */\nconst getScaleBandwidth = < Scale extends AxisScale >( scale?: Scale ) => {\n\t// Broaden type before using 'xxx' in s as typeguard.\n\tconst s = scale as AxisScale;\n\treturn s && 'bandwidth' in s ? s?.bandwidth() ?? 0 : 0;\n};\n\nconst DefaultLabelComponent = ( { textProps, x, y, label, formatter } ) => {\n\treturn (\n\t\t<Text { ...textProps } textAnchor=\"start\" x={ x } y={ y }>\n\t\t\t{ formatter( label ) }\n\t\t</Text>\n\t);\n};\n\nconst DefaultValueComponent = ( { textProps, x, y, value, formatter }: RenderValueProps ) => {\n\treturn (\n\t\t<Text { ...textProps } textAnchor=\"end\" x={ x } y={ y } fontWeight={ 500 }>\n\t\t\t{ formatter( value ) }\n\t\t</Text>\n\t);\n};\n\nconst AxisRenderer = ( {\n\tticks,\n\ttickLabelProps,\n\tyOffset,\n\tlabelPosition,\n\tvaluePosition,\n\tdata,\n\tlabelFormatter,\n\tvalueFormatter,\n\tLabelComponent = DefaultLabelComponent,\n\tValueComponent = DefaultValueComponent,\n}: AxisRendererProps< AnyD3Scale > & {\n\tyOffset: number;\n\tlabelPosition: number;\n\tvaluePosition: number;\n\tdata: SeriesData[];\n\tlabelFormatter?: ( value: string ) => string;\n\tvalueFormatter?: ( value: number ) => string;\n\tLabelComponent?: ComponentType< RenderLabelProps >;\n\tValueComponent?: ComponentType< RenderValueProps >;\n} ) => {\n\tif ( ticks.length === 0 ) {\n\t\treturn null;\n\t}\n\n\t// compute the max tick label size to compute label offset\n\tconst allTickLabelProps = ticks.map( ( { value, index } ) =>\n\t\ttypeof tickLabelProps === 'function' ? tickLabelProps( value, index, ticks ) : {}\n\t);\n\n\treturn ticks.map( ( { from, formattedValue }, index ) => {\n\t\tconst textProps = allTickLabelProps[ index ] ?? {};\n\t\t// No need to pass textAnchor and dx. It will be handled by the component.\n\t\tdelete textProps.textAnchor;\n\t\tdelete textProps.dx;\n\n\t\tconst sum = data.reduce(\n\t\t\t( acc, { data: seriesData } ) => acc + ( seriesData[ index ]?.value ?? 0 ),\n\t\t\t0\n\t\t);\n\t\tconst y = from.y + yOffset;\n\n\t\treturn (\n\t\t\t<Group key={ index }>\n\t\t\t\t<LabelComponent\n\t\t\t\t\ttextProps={ textProps }\n\t\t\t\t\tx={ labelPosition }\n\t\t\t\t\ty={ y }\n\t\t\t\t\tlabel={ formattedValue }\n\t\t\t\t\tformatter={ labelFormatter }\n\t\t\t\t/>\n\t\t\t\t<ValueComponent\n\t\t\t\t\ttextProps={ textProps }\n\t\t\t\t\tx={ valuePosition }\n\t\t\t\t\ty={ y }\n\t\t\t\t\tvalue={ sum }\n\t\t\t\t\tformatter={ valueFormatter }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tindex={ index }\n\t\t\t\t/>\n\t\t\t</Group>\n\t\t);\n\t} );\n};\n\n/**\n * Calculate the default y offset for the bar list chart.\n * @param data          - The data to calculate the default y offset for.\n * @param yScaleConfig  - The y scale configuration.\n * @param height        - The height of the chart.\n * @param isMultiSeries - Whether the chart is a multi series chart.\n * @return The default y offset.\n */\nconst getDefaultYOffset = (\n\tdata: SeriesData[],\n\tyScaleConfig: Omit< ScaleOptions, 'type' >,\n\theight: number,\n\tisMultiSeries: boolean\n) => {\n\tif ( ! isMultiSeries ) {\n\t\treturn 0;\n\t}\n\n\tconst dataKeys = data.map( ( { label } ) => label );\n\n\tconst yScale = createScale< string >( {\n\t\ttype: 'band' as const,\n\t\trange: [ 0, height ],\n\t\tdomain: dataKeys,\n\t\t...yScaleConfig,\n\t} );\n\n\tconst groupScale = scaleBand< string >( {\n\t\tdomain: dataKeys,\n\t\trange: [ 0, getScaleBandwidth( yScale ) ],\n\t\tpadding: yScaleConfig.paddingInner,\n\t} );\n\n\tconst GAP_BETWEEN_BARS = 6;\n\tconst barThickness = getScaleBandwidth( groupScale );\n\n\t// Use negative value to move the label up.\n\treturn -( barThickness + GAP_BETWEEN_BARS );\n};\n\nconst BarListChartInternal: FC< BarListChartProps > = ( {\n\tdata,\n\twidth,\n\theight,\n\toptions = {},\n\tmargin = {\n\t\tleft: 0,\n\t\tright: 20,\n\t\tbottom: 0,\n\t\ttop: 0,\n\t},\n\t...rest\n} ) => {\n\tconst chartOptions = useMemo( () => {\n\t\tconst isMultiSeries = data.length > 1;\n\n\t\tconst defaultYScale = {\n\t\t\t// For multi series, set default padding larger to look better.\n\t\t\tpaddingInner: isMultiSeries ? 0.3 : 0.1,\n\t\t\tpadding: isMultiSeries ? 0.3 : 0.1,\n\t\t};\n\t\tconst defaultXScale = {\n\t\t\t// Always begin at zero since the x axis is hidden.\n\t\t\tzero: true,\n\t\t};\n\t\tconst yScale = {\n\t\t\t...defaultYScale,\n\t\t\t...( options.yScale ?? {} ),\n\t\t};\n\t\tconst xScale = {\n\t\t\t...defaultXScale,\n\t\t\t...( options.xScale ?? {} ),\n\t\t};\n\n\t\treturn {\n\t\t\tyScale,\n\t\t\txScale,\n\t\t\tlabelPosition: options.labelPosition ?? ( isMultiSeries ? 0 : 10 ),\n\t\t\tvalueFormatter: options.valueFormatter ?? ( value => formatNumberCompact( value ) ),\n\t\t\tlabelFormatter: options.labelFormatter ?? ( value => String( value ) ),\n\t\t\tvaluePosition: options.valuePosition ?? width,\n\t\t\tyOffset: options.yOffset ?? getDefaultYOffset( data, yScale, height, isMultiSeries ),\n\t\t};\n\t}, [ options, width, data, height ] );\n\n\treturn (\n\t\t<BarChart\n\t\t\torientation=\"horizontal\"\n\t\t\tgridVisibility={ 'none' }\n\t\t\tdata={ data }\n\t\t\twidth={ width }\n\t\t\theight={ height }\n\t\t\tmargin={ margin }\n\t\t\toptions={ {\n\t\t\t\taxis: {\n\t\t\t\t\ty: {\n\t\t\t\t\t\tchildren: ( renderProps: AxisRendererProps< AnyD3Scale > ) => (\n\t\t\t\t\t\t\t<AxisRenderer\n\t\t\t\t\t\t\t\t{ ...renderProps }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tyOffset={ chartOptions.yOffset }\n\t\t\t\t\t\t\t\tlabelPosition={ chartOptions.labelPosition }\n\t\t\t\t\t\t\t\tvaluePosition={ chartOptions.valuePosition }\n\t\t\t\t\t\t\t\tlabelFormatter={ chartOptions.labelFormatter }\n\t\t\t\t\t\t\t\tvalueFormatter={ chartOptions.valueFormatter }\n\t\t\t\t\t\t\t\tLabelComponent={ options.labelComponent }\n\t\t\t\t\t\t\t\tValueComponent={ options.valueComponent }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tx: {\n\t\t\t\t\t\tchildren: () => null,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\txScale: chartOptions.xScale,\n\t\t\t\tyScale: chartOptions.yScale,\n\t\t\t} }\n\t\t\t{ ...rest }\n\t\t/>\n\t);\n};\n\nconst BarListChart: FC< BarListChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, render the core component directly\n\tif ( existingContext ) {\n\t\treturn <BarListChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, wrap with our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<BarListChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nBarListChart.displayName = 'BarListChart';\n\nconst BarListChartResponsive = withResponsive< BarListChartProps >( BarListChart );\n\nexport { BarListChartResponsive as default, BarListChart as BarListChartUnresponsive };\n"]}
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-EGGRTD4V.cjs","../src/charts/bar-list-chart/bar-list-chart.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-EGGRTD4V.cjs","sourcesContent":[null,"import { formatNumberCompact } from '@automattic/number-formatters';\nimport { Group } from '@visx/group';\nimport { createScale, scaleBand } from '@visx/scale';\nimport { Text, type TextProps } from '@visx/text';\nimport { useContext, useMemo } from 'react';\nimport { GlobalChartsContext, GlobalChartsProvider } from '../../providers';\nimport { BarChart } from '../bar-chart';\nimport { withResponsive } from '../private/with-responsive';\nimport type { SeriesData } from '../..';\nimport type { ScaleOptions } from '../../types';\nimport type { BarChartProps } from '../bar-chart/bar-chart';\nimport type { AxisRendererProps, AxisScale } from '@visx/axis';\nimport type { AnyD3Scale } from '@visx/scale';\nimport type { ComponentType, FC } from 'react';\n\nexport interface BarListChartProps\n\textends Exclude< BarChartProps, 'orientation' | 'size' | 'gridVisibility' > {\n\toptions?: {\n\t\t/**\n\t\t * Scale for the y axis. Exclude the type property.\n\t\t */\n\t\tyScale: Omit< ScaleOptions, 'type' >;\n\t\t/**\n\t\t * Scale for the x axis. Exclude the type property.\n\t\t */\n\t\txScale: Omit< ScaleOptions, 'type' >;\n\t\t/**\n\t\t * Formatter for the label.\n\t\t */\n\t\tlabelFormatter?: ( value: string ) => string;\n\t\t/**\n\t\t * Formatter for the value.\n\t\t */\n\t\tvalueFormatter?: ( value: number ) => string;\n\t\t/**\n\t\t * y offset of the label and value. Default is based on the number of series, automatically computed.\n\t\t */\n\t\tyOffset?: number;\n\t\t/**\n\t\t * x position of the label.\n\t\t */\n\t\tlabelPosition?: number;\n\t\t/**\n\t\t * x position of the value.\n\t\t */\n\t\tvaluePosition?: number;\n\t\t/**\n\t\t * Custom render function for the label.\n\t\t */\n\t\tlabelComponent?: ComponentType< RenderLabelProps >;\n\t\t/**\n\t\t * Custom render function for the value.\n\t\t */\n\t\tvalueComponent?: ComponentType< RenderValueProps >;\n\t};\n}\n\nexport interface RenderLabelProps {\n\ttextProps: TextProps;\n\tx: number;\n\ty: number;\n\tlabel: string;\n\tformatter: ( value: string ) => string;\n}\n\nexport interface RenderValueProps {\n\ttextProps: TextProps;\n\tx: number;\n\ty: number;\n\tvalue: number;\n\t/**\n\t * Original data\n\t */\n\tdata: SeriesData[];\n\t/**\n\t * Index of the data point\n\t */\n\tindex: number;\n\tformatter: ( value: number ) => string;\n}\n\n/**\n * Get the bandwidth of a scale\n * @param scale - The scale to get the bandwidth of\n * @return The bandwidth of the scale\n */\nconst getScaleBandwidth = < Scale extends AxisScale >( scale?: Scale ) => {\n\t// Broaden type before using 'xxx' in s as typeguard.\n\tconst s = scale as AxisScale;\n\treturn s && 'bandwidth' in s ? s?.bandwidth() ?? 0 : 0;\n};\n\nconst DefaultLabelComponent = ( { textProps, x, y, label, formatter } ) => {\n\treturn (\n\t\t<Text { ...textProps } textAnchor=\"start\" x={ x } y={ y }>\n\t\t\t{ formatter( label ) }\n\t\t</Text>\n\t);\n};\n\nconst DefaultValueComponent = ( { textProps, x, y, value, formatter }: RenderValueProps ) => {\n\treturn (\n\t\t<Text { ...textProps } textAnchor=\"end\" x={ x } y={ y } fontWeight={ 500 }>\n\t\t\t{ formatter( value ) }\n\t\t</Text>\n\t);\n};\n\nconst AxisRenderer = ( {\n\tticks,\n\ttickLabelProps,\n\tyOffset,\n\tlabelPosition,\n\tvaluePosition,\n\tdata,\n\tlabelFormatter,\n\tvalueFormatter,\n\tLabelComponent = DefaultLabelComponent,\n\tValueComponent = DefaultValueComponent,\n}: AxisRendererProps< AnyD3Scale > & {\n\tyOffset: number;\n\tlabelPosition: number;\n\tvaluePosition: number;\n\tdata: SeriesData[];\n\tlabelFormatter?: ( value: string ) => string;\n\tvalueFormatter?: ( value: number ) => string;\n\tLabelComponent?: ComponentType< RenderLabelProps >;\n\tValueComponent?: ComponentType< RenderValueProps >;\n} ) => {\n\tif ( ticks.length === 0 ) {\n\t\treturn null;\n\t}\n\n\t// compute the max tick label size to compute label offset\n\tconst allTickLabelProps = ticks.map( ( { value, index } ) =>\n\t\ttypeof tickLabelProps === 'function' ? tickLabelProps( value, index, ticks ) : {}\n\t);\n\n\treturn ticks.map( ( { from, formattedValue }, index ) => {\n\t\tconst textProps = allTickLabelProps[ index ] ?? {};\n\t\t// No need to pass textAnchor and dx. It will be handled by the component.\n\t\tdelete textProps.textAnchor;\n\t\tdelete textProps.dx;\n\n\t\tconst sum = data.reduce(\n\t\t\t( acc, { data: seriesData } ) => acc + ( seriesData[ index ]?.value ?? 0 ),\n\t\t\t0\n\t\t);\n\t\tconst y = from.y + yOffset;\n\n\t\treturn (\n\t\t\t<Group key={ index }>\n\t\t\t\t<LabelComponent\n\t\t\t\t\ttextProps={ textProps }\n\t\t\t\t\tx={ labelPosition }\n\t\t\t\t\ty={ y }\n\t\t\t\t\tlabel={ formattedValue }\n\t\t\t\t\tformatter={ labelFormatter }\n\t\t\t\t/>\n\t\t\t\t<ValueComponent\n\t\t\t\t\ttextProps={ textProps }\n\t\t\t\t\tx={ valuePosition }\n\t\t\t\t\ty={ y }\n\t\t\t\t\tvalue={ sum }\n\t\t\t\t\tformatter={ valueFormatter }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tindex={ index }\n\t\t\t\t/>\n\t\t\t</Group>\n\t\t);\n\t} );\n};\n\n/**\n * Calculate the default y offset for the bar list chart.\n * @param data          - The data to calculate the default y offset for.\n * @param yScaleConfig  - The y scale configuration.\n * @param height        - The height of the chart.\n * @param isMultiSeries - Whether the chart is a multi series chart.\n * @return The default y offset.\n */\nconst getDefaultYOffset = (\n\tdata: SeriesData[],\n\tyScaleConfig: Omit< ScaleOptions, 'type' >,\n\theight: number,\n\tisMultiSeries: boolean\n) => {\n\tif ( ! isMultiSeries ) {\n\t\treturn 0;\n\t}\n\n\tconst dataKeys = data.map( ( { label } ) => label );\n\n\tconst yScale = createScale< string >( {\n\t\ttype: 'band' as const,\n\t\trange: [ 0, height ],\n\t\tdomain: dataKeys,\n\t\t...yScaleConfig,\n\t} );\n\n\tconst groupScale = scaleBand< string >( {\n\t\tdomain: dataKeys,\n\t\trange: [ 0, getScaleBandwidth( yScale ) ],\n\t\tpadding: yScaleConfig.paddingInner,\n\t} );\n\n\tconst GAP_BETWEEN_BARS = 6;\n\tconst barThickness = getScaleBandwidth( groupScale );\n\n\t// Use negative value to move the label up.\n\treturn -( barThickness + GAP_BETWEEN_BARS );\n};\n\nconst BarListChartInternal: FC< BarListChartProps > = ( {\n\tdata,\n\twidth,\n\theight,\n\toptions = {},\n\tmargin = {\n\t\tleft: 0,\n\t\tright: 20,\n\t\tbottom: 0,\n\t\ttop: 0,\n\t},\n\t...rest\n} ) => {\n\tconst chartOptions = useMemo( () => {\n\t\tconst isMultiSeries = data.length > 1;\n\n\t\tconst defaultYScale = {\n\t\t\t// For multi series, set default padding larger to look better.\n\t\t\tpaddingInner: isMultiSeries ? 0.3 : 0.1,\n\t\t\tpadding: isMultiSeries ? 0.3 : 0.1,\n\t\t};\n\t\tconst defaultXScale = {\n\t\t\t// Always begin at zero since the x axis is hidden.\n\t\t\tzero: true,\n\t\t};\n\t\tconst yScale = {\n\t\t\t...defaultYScale,\n\t\t\t...( options.yScale ?? {} ),\n\t\t};\n\t\tconst xScale = {\n\t\t\t...defaultXScale,\n\t\t\t...( options.xScale ?? {} ),\n\t\t};\n\n\t\treturn {\n\t\t\tyScale,\n\t\t\txScale,\n\t\t\tlabelPosition: options.labelPosition ?? ( isMultiSeries ? 0 : 10 ),\n\t\t\tvalueFormatter: options.valueFormatter ?? ( value => formatNumberCompact( value ) ),\n\t\t\tlabelFormatter: options.labelFormatter ?? ( value => String( value ) ),\n\t\t\tvaluePosition: options.valuePosition ?? width,\n\t\t\tyOffset: options.yOffset ?? getDefaultYOffset( data, yScale, height, isMultiSeries ),\n\t\t};\n\t}, [ options, width, data, height ] );\n\n\treturn (\n\t\t<BarChart\n\t\t\torientation=\"horizontal\"\n\t\t\tgridVisibility={ 'none' }\n\t\t\tdata={ data }\n\t\t\twidth={ width }\n\t\t\theight={ height }\n\t\t\tmargin={ margin }\n\t\t\toptions={ {\n\t\t\t\taxis: {\n\t\t\t\t\ty: {\n\t\t\t\t\t\tchildren: ( renderProps: AxisRendererProps< AnyD3Scale > ) => (\n\t\t\t\t\t\t\t<AxisRenderer\n\t\t\t\t\t\t\t\t{ ...renderProps }\n\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\tyOffset={ chartOptions.yOffset }\n\t\t\t\t\t\t\t\tlabelPosition={ chartOptions.labelPosition }\n\t\t\t\t\t\t\t\tvaluePosition={ chartOptions.valuePosition }\n\t\t\t\t\t\t\t\tlabelFormatter={ chartOptions.labelFormatter }\n\t\t\t\t\t\t\t\tvalueFormatter={ chartOptions.valueFormatter }\n\t\t\t\t\t\t\t\tLabelComponent={ options.labelComponent }\n\t\t\t\t\t\t\t\tValueComponent={ options.valueComponent }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tx: {\n\t\t\t\t\t\tchildren: () => null,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\txScale: chartOptions.xScale,\n\t\t\t\tyScale: chartOptions.yScale,\n\t\t\t} }\n\t\t\t{ ...rest }\n\t\t/>\n\t);\n};\n\nconst BarListChart: FC< BarListChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, render the core component directly\n\tif ( existingContext ) {\n\t\treturn <BarListChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, wrap with our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<BarListChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nBarListChart.displayName = 'BarListChart';\n\nconst BarListChartResponsive = withResponsive< BarListChartProps >( BarListChart );\n\nexport { BarListChartResponsive as default, BarListChart as BarListChartUnresponsive };\n"]}