@automattic/charts 0.23.0 → 0.25.0

package/CHANGELOG.md

@@ -5,6 +5,31 @@ 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.25.0] - 2025-08-11
+### Added
+- Add internationalization. [#44652]
+
+### Changed
+- Improve legend functionality and tidy up some legend layout issues. [#44573]
+- Update package dependencies. [#44677]
+
+### Removed
+- Remove redundant internal chart ID. [#44728]
+
+### Fixed
+- Fix legend alignment issues for right-aligned vertical legends. [#44622]
+
+## [0.24.0] - 2025-08-04
+### Added
+- Add Conversion Funnel Chart document to Storybook index page. [#44548]
+
+### Fixed
+- Tests: Specify locale in tooltip tests. [#44594]
+
+## [0.23.1] - 2025-08-01
+### Fixed
+- Line Chart: Improve pointer event types. [#44510]
+
 ## [0.23.0] - 2025-07-30
 ### Added
 - Add component ConversionFunnelChart. [#44433]
@@ -336,6 +361,9 @@ 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.25.0]: https://github.com/Automattic/charts/compare/v0.24.0...v0.25.0
+[0.24.0]: https://github.com/Automattic/charts/compare/v0.23.1...v0.24.0
+[0.23.1]: https://github.com/Automattic/charts/compare/v0.23.0...v0.23.1
 [0.23.0]: https://github.com/Automattic/charts/compare/v0.22.0...v0.23.0
 [0.22.0]: https://github.com/Automattic/charts/compare/v0.21.0...v0.22.0
 [0.21.0]: https://github.com/Automattic/charts/compare/v0.20.0...v0.21.0

package/dist/cjs/components/bar-chart/bar-chart.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var pattern = require('@visx/pattern');
 var xychart = require('@visx/xychart');
+var i18n = require('@wordpress/i18n');
 var clsx = require('clsx');
 var react = require('react');
 var chartContext = require('../../providers/chart-context/chart-context.js');
@@ -38,8 +39,6 @@ const validateData = (data) => {
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
 const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400, className, margin, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'rect', gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = 'vertical', withPatterns = false, showZeroValues = false, }) => {
     const horizontal = orientation === 'horizontal';
-    // Generate a unique chart ID to avoid pattern conflicts with multiple charts
-    const internalChartId = react.useId();
     const chartId = utils.useChartId(providedChartId);
     const providerTheme = themeProvider.useChartTheme();
     const theme = themeProvider.useXYChartTheme(data);
@@ -68,8 +67,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
     });
     const getColor = react.useCallback((seriesData, index) => seriesData?.options?.stroke || theme.colors[index % theme.colors.length], [theme]);
     const getBarBackground = react.useCallback((index) => () => withPatterns
-        ? `url(#${getPatternId(internalChartId, index)})`
-        : getColor(dataSorted[index], index), [withPatterns, getColor, dataSorted, internalChartId]);
+        ? `url(#${getPatternId(chartId, index)})`
+        : getColor(dataSorted[index], index), [withPatterns, getColor, dataSorted, chartId]);
     const renderDefaultTooltip = react.useCallback(({ tooltipData }) => {
         const nearestDatum = tooltipData?.nearestDatum?.datum;
         if (!nearestDatum)
@@ -78,7 +77,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
     }, [chartOptions.tooltip]);
     const renderPattern = react.useCallback((index, color) => {
         const patternType = index % 4;
-        const id = getPatternId(internalChartId, index);
+        const id = getPatternId(chartId, index);
         const commonProps = {
             id,
             stroke: 'white',
@@ -96,16 +95,16 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
             case 3:
                 return jsxRuntime.jsx(pattern.PatternHexagons, { ...commonProps, size: 8, height: 3 }, id);
         }
-    }, [internalChartId]);
+    }, [chartId]);
     const createPatternBorderStyle = react.useCallback((index, color) => {
-        const patternId = getPatternId(internalChartId, index);
+        const patternId = getPatternId(chartId, index);
         return `
 			.visx-bar[fill="url(#${patternId})"] {
 				stroke: ${color};
 				stroke-width: 1;
 				}
 			`;
-    }, [internalChartId]);
+    }, [chartId]);
     const createKeyboardHighlightStyle = react.useCallback(() => {
         if (selectedIndex === undefined)
             return '';
@@ -151,7 +150,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
     }
     const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
     const highlightedBarStyle = createKeyboardHighlightStyle();
-    return (jsxRuntime.jsxs("div", { className: clsx('bar-chart', barChart_module.default['bar-chart'], className), "data-testid": "bar-chart", role: "grid", "aria-label": "bar chart", style: {
+    return (jsxRuntime.jsxs("div", { className: clsx('bar-chart', barChart_module.default['bar-chart'], className), "data-testid": "bar-chart", role: "grid", "aria-label": i18n.__('Bar chart', 'jetpack-charts'), style: {
             width,
             height,
             display: 'flex',

package/dist/cjs/components/legend/base-legend.js

@@ -18,20 +18,24 @@ const orientationToFlexDirection = {
  * Base legend component that displays color-coded items with labels based on visx LegendOrdinal.
  * We avoid using LegendOrdinal directly to enable support for advanced features such as interactivity.
  */
-const BaseLegend = react.forwardRef(({ items, className, orientation = 'horizontal', alignmentHorizontal = 'center', alignmentVertical = 'bottom', shape = 'rect', fill = utils.valueOrIdentityString, size = utils.valueOrIdentityString, labelFormat = utils.valueOrIdentity, labelTransform = utils.labelTransformFactory, shapeWidth = 16, shapeHeight = 16, shapeMargin = '2px 4px 2px 0', labelAlign = 'left', labelFlex = '1', labelMargin = '0 4px', itemMargin = '0', itemDirection = 'row', legendLabelProps, ...legendItemProps }, ref) => {
+const BaseLegend = react.forwardRef(({ items, className, orientation = 'horizontal', alignmentHorizontal = 'center', alignmentVertical = 'bottom', shape = 'rect', fill = utils.valueOrIdentityString, size = utils.valueOrIdentityString, labelFormat = utils.valueOrIdentity, labelTransform = utils.labelTransformFactory, shapeWidth = 16, shapeHeight = 16, shapeMargin = '2px 4px 2px 0', labelAlign = 'left', labelFlex = '0 0 auto', // Use natural width instead of expanding to fill space
+labelMargin = '0 4px', itemMargin = '0', itemDirection = 'row', legendLabelProps, ...legendItemProps }, ref) => {
     const theme = themeProvider.useChartTheme();
     const legendScale = scale.scaleOrdinal({
         domain: items.map(item => item.label),
         range: items.map(item => item.color),
     });
     const domain = legendScale.domain();
+    // For right-aligned vertical legends, use row-reverse to align text consistently
     const getShapeStyle = react.useCallback(({ index }) => {
         return items[index]?.shapeStyle ?? theme.legendShapeStyles?.[index] ?? {};
     }, [items, theme]);
     return (jsxRuntime.jsx(legend.LegendOrdinal, { scale: legendScale, labelFormat: labelFormat, labelTransform: labelTransform, children: labels => (jsxRuntime.jsx("div", { ref: ref, role: "list", "data-testid": `legend-${orientation}`, className: clsx(legend_module.default.legend, legend_module.default[`legend--${orientation}`], legend_module.default[`legend--horizontal-align-${alignmentHorizontal}`], legend_module.default[`legend--vertical-align-${alignmentVertical}`], className), style: {
                 flexDirection: orientationToFlexDirection[orientation],
                 ...theme.legendContainerStyles,
-            }, children: labels.map((label, i) => (jsxRuntime.jsxs(legend.LegendItem, { className: legend_module.default['legend-item'], "data-testid": "legend-item", margin: itemMargin, flexDirection: itemDirection, ...legendItemProps, children: [items[i]?.renderGlyph ? (jsxRuntime.jsx("svg", { width: items[i]?.glyphSize * 2, height: items[i]?.glyphSize * 2, "data-testid": "legend-glyph", children: jsxRuntime.jsx(group.Group, { children: items[i]?.renderGlyph({
+            }, children: labels.map((label, i) => (jsxRuntime.jsxs(legend.LegendItem, { className: legend_module.default['legend-item'], "data-testid": "legend-item", margin: itemMargin, flexDirection: orientation === 'vertical' && alignmentHorizontal === 'right'
+                    ? 'row-reverse'
+                    : itemDirection, ...legendItemProps, children: [items[i]?.renderGlyph ? (jsxRuntime.jsx("svg", { width: items[i]?.glyphSize * 2, height: items[i]?.glyphSize * 2, "data-testid": "legend-glyph", children: jsxRuntime.jsx(group.Group, { children: items[i]?.renderGlyph({
                                 key: `legend-glyph-${label.text}`,
                                 datum: {},
                                 index: i,
@@ -44,7 +48,7 @@ const BaseLegend = react.forwardRef(({ items, className, orientation = 'horizont
                             flex: labelFlex,
                             margin: labelMargin,
                             ...theme.legendLabelStyles,
-                        }, ...legendLabelProps, children: [label.text, items.find(item => item.label === label.text)?.value && (jsxRuntime.jsx("span", { className: legend_module.default['legend-item-value'], children: items.find(item => item.label === label.text)?.value }))] })] }, `legend-${label.text}-${i}`))) })) }));
+                        }, ...legendLabelProps, children: [label.text, items.find(item => item.label === label.text)?.value && (jsxRuntime.jsxs("span", { className: legend_module.default['legend-item-value'], children: ['\u00A0', items.find(item => item.label === label.text)?.value] }))] })] }, `legend-${label.text}-${i}`))) })) }));
 });
 
 exports.BaseLegend = BaseLegend;

package/dist/cjs/components/legend/legend.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"legend--horizontal":"legend-module_legend--horizontal__IUN13","legend--vertical":"legend-module_legend--vertical__Scfzo","legend--vertical-align-top":"legend-module_legend--vertical-align-top__l6G1I","legend--horizontal-align-left":"legend-module_legend--horizontal-align-left__w2O7z","legend--horizontal-align-center":"legend-module_legend--horizontal-align-center__Fmcxd","legend--horizontal-align-right":"legend-module_legend--horizontal-align-right__tKgER","legend--vertical-align-bottom":"legend-module_legend--vertical-align-bottom__UzHCY","legend-item":"legend-module_legend-item__feemn","legend-item-label":"legend-module_legend-item-label__ksx6I","legend-item-value":"legend-module_legend-item-value__d9x1j"};
+var styles = {"legend--horizontal":"legend-module_legend--horizontal__IUN13","legend--vertical":"legend-module_legend--vertical__Scfzo","legend--horizontal-align-left":"legend-module_legend--horizontal-align-left__w2O7z","legend--horizontal-align-center":"legend-module_legend--horizontal-align-center__Fmcxd","legend--horizontal-align-right":"legend-module_legend--horizontal-align-right__tKgER","legend--vertical-align-top":"legend-module_legend--vertical-align-top__l6G1I","legend--vertical-align-bottom":"legend-module_legend--vertical-align-bottom__UzHCY","legend-item":"legend-module_legend-item__feemn","legend-item-label":"legend-module_legend-item-label__ksx6I","legend-item-value":"legend-module_legend-item-value__d9x1j"};
 
 exports.default = styles;

package/dist/cjs/components/line-chart/line-chart-annotation-label-popover.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var i18n = require('@wordpress/i18n');
 var clsx = require('clsx');
 var Gridicon = require('gridicons');
 var react = require('react');
@@ -50,10 +51,10 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
                     width: `${POPOVER_BUTTON_SIZE}px`,
                     height: `${POPOVER_BUTTON_SIZE}px`,
                     transform: `translate(${POPOVER_BUTTON_SIZE / 2}px, 0)`,
-                }, "aria-label": title || 'View details', children: renderLabel({ title, subtitle }) }), jsxRuntime.jsx("div", { ref: popoverRef, id: popoverId, ...{ popover: 'auto' }, className: clsx(lineChart_module.default['line-chart__annotation-label-popover'], isPositioned && lineChart_module.default['line-chart__annotation-label-popover--visible'], isBrowserSafari && lineChart_module.default['line-chart__annotation-label-popover--safari']), "data-testid": "line-chart-annotation-label-popover", children: jsxRuntime.jsxs("div", { className: lineChart_module.default['line-chart__annotation-label-popover-header'], children: [jsxRuntime.jsx("div", { className: lineChart_module.default['line-chart__annotation-label-popover-content'], children: renderLabelPopover({ title, subtitle }) }), jsxRuntime.jsx("button", { ...{
+                }, "aria-label": title || i18n.__('View details', 'jetpack-charts'), children: renderLabel({ title, subtitle }) }), jsxRuntime.jsx("div", { ref: popoverRef, id: popoverId, ...{ popover: 'auto' }, className: clsx(lineChart_module.default['line-chart__annotation-label-popover'], isPositioned && lineChart_module.default['line-chart__annotation-label-popover--visible'], isBrowserSafari && lineChart_module.default['line-chart__annotation-label-popover--safari']), "data-testid": "line-chart-annotation-label-popover", children: jsxRuntime.jsxs("div", { className: lineChart_module.default['line-chart__annotation-label-popover-header'], children: [jsxRuntime.jsx("div", { className: lineChart_module.default['line-chart__annotation-label-popover-content'], children: renderLabelPopover({ title, subtitle }) }), jsxRuntime.jsx("button", { ...{
                                 popovertarget: popoverId,
                                 popovertargetaction: 'hide',
-                            }, className: lineChart_module.default['line-chart__annotation-label-popover-close-button'], "aria-label": "Close", children: jsxRuntime.jsx(Gridicon, { icon: "cross", size: 16 }) })] }) })] }));
+                            }, className: lineChart_module.default['line-chart__annotation-label-popover-close-button'], "aria-label": i18n.__('Close', 'jetpack-charts'), children: jsxRuntime.jsx(Gridicon, { icon: "cross", size: 16 }) })] }) })] }));
 };
 
 exports.POPOVER_BUTTON_SIZE = POPOVER_BUTTON_SIZE;

package/dist/cjs/components/line-chart/line-chart.js

@@ -8,6 +8,7 @@ var numberFormatters = require('@automattic/number-formatters');
 var curve = require('@visx/curve');
 var gradient = require('@visx/gradient');
 var xychart = require('@visx/xychart');
+var i18n = require('@wordpress/i18n');
 var clsx = require('clsx');
 var chartContext = require('../../providers/chart-context/chart-context.js');
 var utils = require('../../providers/chart-context/utils.js');
@@ -136,7 +137,6 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', renderGlyph = defaultRenderGlyph, glyphStyle = {}, legendShape = 'line', withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, options = {}, onPointerDown = undefined, onPointerUp = undefined, onPointerMove = undefined, onPointerOut = undefined, children, }, ref) => {
     const providerTheme = themeProvider.useChartTheme();
     const theme = themeProvider.useXYChartTheme(data);
-    const internalChartId = react.useId(); // Ensure unique ids for gradient fill.
     const chartId = utils.useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
     const chartRef = react.useRef(null);
@@ -234,7 +234,7 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
                 display: 'flex',
                 flexDirection: showLegend && legendAlignmentVertical === 'top' ? 'column-reverse' : 'column',
                 position: 'relative',
-            }, children: [jsxRuntime.jsx("div", { role: "grid", "aria-label": "line chart", tabIndex: 0, onKeyDown: onChartKeyDown, onFocus: onChartFocus, onBlur: onChartBlur, ref: chartRef, children: jsxRuntime.jsxs(xychart.XYChart, { theme: theme, width: width, height: height - (showLegend ? legendHeight : 0), margin: {
+            }, children: [jsxRuntime.jsx("div", { role: "grid", "aria-label": i18n.__('Line chart', 'jetpack-charts'), tabIndex: 0, onKeyDown: onChartKeyDown, onFocus: onChartFocus, onBlur: onChartBlur, ref: chartRef, children: jsxRuntime.jsxs(xychart.XYChart, { theme: theme, width: width, height: height - (showLegend ? legendHeight : 0), margin: {
                             ...defaultMargin,
                             ...margin,
                             ...(showLegend && legendAlignmentVertical === 'top'
@@ -247,8 +247,8 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
                                 const lineProps = seriesData.options?.seriesLineStyle ??
                                     providerTheme?.seriesLineStyles?.[index % providerTheme.seriesLineStyles.length] ??
                                     {};
-                                return (jsxRuntime.jsxs("g", { children: [withStartGlyphs && (jsxRuntime.jsx(StartGlyph, { index: index, data: seriesData, color: stroke, renderGlyph: providerTheme.glyphs?.[index] ?? renderGlyph, accessors: accessors, glyphStyle: glyphStyle })), withGradientFill && (jsxRuntime.jsx(gradient.LinearGradient, { id: `area-gradient-${internalChartId}-${index + 1}`, from: stroke, fromOpacity: 0.4, toOpacity: 0.1, to: theme.backgroundColor, ...seriesData.options?.gradient, "data-testid": "line-gradient" })), jsxRuntime.jsx(xychart.AreaSeries, { dataKey: seriesData?.label, data: seriesData.data, ...accessors, fill: withGradientFill
-                                                ? `url(#area-gradient-${internalChartId}-${index + 1})`
+                                return (jsxRuntime.jsxs("g", { children: [withStartGlyphs && (jsxRuntime.jsx(StartGlyph, { index: index, data: seriesData, color: stroke, renderGlyph: providerTheme.glyphs?.[index] ?? renderGlyph, accessors: accessors, glyphStyle: glyphStyle })), withGradientFill && (jsxRuntime.jsx(gradient.LinearGradient, { id: `area-gradient-${chartId}-${index + 1}`, from: stroke, fromOpacity: 0.4, toOpacity: 0.1, to: theme.backgroundColor, ...seriesData.options?.gradient, "data-testid": "line-gradient" })), jsxRuntime.jsx(xychart.AreaSeries, { dataKey: seriesData?.label, data: seriesData.data, ...accessors, fill: withGradientFill
+                                                ? `url(#area-gradient-${chartId}-${index + 1})`
                                                 : 'transparent', renderLine: true, curve: getCurveType(curveType, smoothing), lineProps: lineProps }, seriesData?.label)] }, seriesData?.label || index));
                             }), withTooltips && (jsxRuntime.jsx(accessibleTooltip.AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, showSeriesGlyphs: true, renderTooltip: renderTooltip, renderGlyph: tooltipRenderGlyph, glyphStyle: glyphStyle, showVerticalCrosshair: withTooltipCrosshairs?.showVertical, showHorizontalCrosshair: withTooltipCrosshairs?.showHorizontal, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: lineChart_module.default['line-chart__tooltip--keyboard-focused'], series: dataSorted })), jsxRuntime.jsx(LineChartScalesRef, { chartRef: internalChartRef, width: width, height: height, margin: margin })] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: lineChart_module.default['line-chart-legend'], shape: legendShape, chartId: chartId, ref: legendRef })), children] }) }));
 });

package/dist/cjs/components/pie-chart/pie-chart.js

@@ -48,7 +48,7 @@ const validateData = (data) => {
  * @param {PieChartProps} props - Component props
  * @return {JSX.Element} The rendered chart component
  */
-const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend, legendOrientation, legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
+const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
     const providerTheme = themeProvider.useChartTheme();
     const chartId = utils.useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();

package/dist/cjs/components/pie-semi-circle-chart/pie-semi-circle-chart.js

@@ -15,6 +15,7 @@ var utils = require('../../providers/chart-context/utils.js');
 var themeProvider = require('../../providers/theme/theme-provider.js');
 var legend = require('../legend/legend.js');
 require('../legend/base-legend.js');
+var useChartLegendData = require('../legend/use-chart-legend-data.js');
 var useElementHeight = require('../shared/use-element-height.js');
 var withResponsive = require('../shared/with-responsive.js');
 var baseTooltip = require('../tooltip/base-tooltip.js');
@@ -72,12 +73,10 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 40
         // Use the color property from the data object as a last resort. The theme provides colours by default.
         fill: (d) => d.color || providerTheme.colors[d.index % providerTheme.colors.length],
     }), [providerTheme.colors]);
-    // Create legend items with color from accessors (which respects item.color)
-    const legendItems = react.useMemo(() => data.map((item, index) => ({
-        label: item.label,
-        value: item.valueDisplay || item.value.toString(),
-        color: accessors.fill({ ...item, index }),
-    })), [data, accessors]);
+    // Memoize legend options to prevent unnecessary re-calculations
+    const legendOptions = react.useMemo(() => ({ showValues: true }), []);
+    // Create legend items using the reusable hook
+    const legendItems = useChartLegendData.useChartLegendData(data, providerTheme, legendOptions);
     // Memoize metadata to prevent unnecessary re-registration
     const chartMetadata = react.useMemo(() => ({
         thickness,
@@ -112,10 +111,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 40
                     label: tooltipData.label,
                     value: tooltipData.value,
                     valueDisplay: tooltipData.valueDisplay,
-                }, top: tooltipTop || 0, left: tooltipLeft || 0 })), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: clsx(pieSemiCircleChart_module.default['pie-semi-circle-chart-legend'], {
-                    [pieSemiCircleChart_module.default['is-on-top']]: legendAlignmentVertical === 'top',
-                    [pieSemiCircleChart_module.default['is-on-bottom']]: legendAlignmentVertical === 'bottom',
-                }), shape: legendShape, ref: legendRef, chartId: chartId }))] }));
+                }, top: tooltipTop || 0, left: tooltipLeft || 0 })), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, shape: legendShape, ref: legendRef, chartId: chartId }))] }));
 };
 const PieSemiCircleChart = props => (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(PieSemiCircleChartInternal, { ...props }) }));
 PieSemiCircleChart.displayName = 'PieSemiCircleChart';

package/dist/cjs/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var styles = {"pie-semi-circle-chart":"pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9","pie-semi-circle-chart-legend":"pie-semi-circle-chart-module_pie-semi-circle-chart-legend__c8W1Y","is-on-top":"pie-semi-circle-chart-module_is-on-top__BamnZ","is-on-bottom":"pie-semi-circle-chart-module_is-on-bottom__NyS5q","label":"pie-semi-circle-chart-module_label__nPqOg","note":"pie-semi-circle-chart-module_note__LpBZQ"};
+var styles = {"pie-semi-circle-chart":"pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9","label":"pie-semi-circle-chart-module_label__nPqOg","note":"pie-semi-circle-chart-module_note__LpBZQ"};
 
 exports.default = styles;

package/dist/cjs/style.css

@@ -1 +1 @@
-.legend-module_legend--horizontal__IUN13{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.legend-module_legend--vertical__Scfzo{display:flex;flex-direction:column;gap:8px}.legend-module_legend--vertical-align-top__l6G1I{position:relative}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-left__w2O7z{justify-content:flex-start}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-center__Fmcxd{justify-content:center}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-right__tKgER{justify-content:flex-end}.legend-module_legend--vertical-align-bottom__UzHCY{position:relative}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-left__w2O7z{justify-content:flex-start}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-center__Fmcxd{justify-content:center}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-right__tKgER{justify-content:flex-end}.legend-module_legend-item__feemn{align-items:center;display:flex;font-size:.875rem}.legend-module_legend-item-label__ksx6I{align-items:center;display:flex;gap:.5rem}.legend-module_legend-item-value__d9x1j{font-weight:500}.bar-chart-module_bar-chart__lmYNi{display:flex;flex-direction:column}.bar-chart-module_bar-chart__lmYNi svg{overflow:visible}.bar-chart-module_bar-chart-legend__vgKKq{margin-top:1rem}.line-chart-module_line-chart__ITM3d{display:flex;flex-direction:column}.line-chart-module_line-chart__ITM3d svg{overflow:visible}.line-chart-module_line-chart__annotation-label-popover__TqNZk,.line-chart-module_line-chart__tooltip__aqcme{background:#fff;padding:.5rem}.line-chart-module_line-chart__tooltip-date__4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module_line-chart__tooltip-row__6A37G{align-items:center;display:flex;justify-content:space-between;padding:4px 0}.line-chart-module_line-chart__tooltip-label__IvnFF{font-weight:500;padding-right:1rem}.line-chart-module_line-chart__annotations-overlay__4nR2p{left:0;overflow:visible;pointer-events:none;position:absolute;top:0}.line-chart-module_line-chart__annotation-label__OmgiT{pointer-events:auto}.line-chart-module_line-chart__annotation-label-trigger-button__mcIb3{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;pointer-events:auto}.line-chart-module_line-chart__annotation-label-popover__TqNZk{background:#fff;border:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);font-size:14px;margin:.5rem;min-width:125px;position:fixed;visibility:hidden}.line-chart-module_line-chart__annotation-label-popover--visible__dE0cV{visibility:visible}.line-chart-module_line-chart__annotation-label-popover--safari__i3NHT{margin:auto;position:static}.line-chart-module_line-chart__annotation-label-popover-header__Owypo{align-items:start;display:flex;flex-direction:row;justify-content:space-between}.line-chart-module_line-chart__annotation-label-popover-content__vtgQt{padding:.5rem}.line-chart-module_line-chart__annotation-label-popover-close-button__i8KUc{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}.visx-tooltip-glyph svg{height:10px;width:10px}.base-tooltip-module_tooltip__OfX6n{background-color:rgba(0,0,0,.85);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:#fff;font-size:14px;padding:.5rem;pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.pie-chart-module_pie-chart__R12Vh{display:flex;flex-direction:column;overflow:hidden}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9{display:flex;flex-direction:column;text-align:center}.pie-semi-circle-chart-module_pie-semi-circle-chart-legend__c8W1Y.pie-semi-circle-chart-module_is-on-top__BamnZ{margin-bottom:1rem}.pie-semi-circle-chart-module_pie-semi-circle-chart-legend__c8W1Y.pie-semi-circle-chart-module_is-on-bottom__NyS5q{margin-top:1rem}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_label__nPqOg{font-size:16px;font-weight:600;margin-bottom:0}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_note__LpBZQ{font-size:14px;margin-top:0}.leaderboard-chart-module_leaderboardChart__zxakP{transition:opacity .3s ease-in-out}.leaderboard-chart-module_leaderboardChart__zxakP.leaderboard-chart-module_loading__-AGv-{opacity:.5}.leaderboard-chart-module_progressContainer__BZGbj{display:flex;flex-direction:column;gap:6px}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_progressBar__LAQaj{background-color:transparent;border-radius:2px;height:6px;overflow:hidden;transition:width .3s ease-in-out;width:100%}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_progressBar__LAQaj>div{background-color:var(--progress-color,#3858e9)}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_primaryBar__iybII{--progress-color:var(--primary-color,#3858e9)}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_secondaryBar__A7tLz{--progress-color:var(--secondary-color,#66bdff)}.leaderboard-chart-module_valueContainer__ZlLh4{display:flex;gap:4px;justify-content:flex-end}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}
+.legend-module_legend--horizontal__IUN13{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.legend-module_legend--vertical__Scfzo{display:flex;flex-direction:column;gap:8px}.legend-module_legend--vertical__Scfzo.legend-module_legend--horizontal-align-left__w2O7z{align-items:flex-start}.legend-module_legend--vertical__Scfzo.legend-module_legend--horizontal-align-center__Fmcxd{align-items:center}.legend-module_legend--vertical__Scfzo.legend-module_legend--horizontal-align-right__tKgER{align-items:flex-end}.legend-module_legend--vertical-align-top__l6G1I{position:relative}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-left__w2O7z{justify-content:flex-start}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-center__Fmcxd{justify-content:center}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-right__tKgER{justify-content:flex-end}.legend-module_legend--vertical-align-bottom__UzHCY{position:relative}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-left__w2O7z{justify-content:flex-start}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-center__Fmcxd{justify-content:center}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-right__tKgER{justify-content:flex-end}.legend-module_legend-item__feemn{align-items:center;display:flex;font-size:.875rem}.legend-module_legend-item-label__ksx6I{align-items:center;display:flex;gap:.5rem}.legend-module_legend-item-value__d9x1j{font-weight:500}.bar-chart-module_bar-chart__lmYNi{display:flex;flex-direction:column}.bar-chart-module_bar-chart__lmYNi svg{overflow:visible}.bar-chart-module_bar-chart-legend__vgKKq{margin-top:1rem}.line-chart-module_line-chart__ITM3d{display:flex;flex-direction:column}.line-chart-module_line-chart__ITM3d svg{overflow:visible}.line-chart-module_line-chart__annotation-label-popover__TqNZk,.line-chart-module_line-chart__tooltip__aqcme{background:#fff;padding:.5rem}.line-chart-module_line-chart__tooltip-date__4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module_line-chart__tooltip-row__6A37G{align-items:center;display:flex;justify-content:space-between;padding:4px 0}.line-chart-module_line-chart__tooltip-label__IvnFF{font-weight:500;padding-right:1rem}.line-chart-module_line-chart__annotations-overlay__4nR2p{left:0;overflow:visible;pointer-events:none;position:absolute;top:0}.line-chart-module_line-chart__annotation-label__OmgiT{pointer-events:auto}.line-chart-module_line-chart__annotation-label-trigger-button__mcIb3{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;pointer-events:auto}.line-chart-module_line-chart__annotation-label-popover__TqNZk{background:#fff;border:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);font-size:14px;margin:.5rem;min-width:125px;position:fixed;visibility:hidden}.line-chart-module_line-chart__annotation-label-popover--visible__dE0cV{visibility:visible}.line-chart-module_line-chart__annotation-label-popover--safari__i3NHT{margin:auto;position:static}.line-chart-module_line-chart__annotation-label-popover-header__Owypo{align-items:start;display:flex;flex-direction:row;justify-content:space-between}.line-chart-module_line-chart__annotation-label-popover-content__vtgQt{padding:.5rem}.line-chart-module_line-chart__annotation-label-popover-close-button__i8KUc{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}.visx-tooltip-glyph svg{height:10px;width:10px}.base-tooltip-module_tooltip__OfX6n{background-color:rgba(0,0,0,.85);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:#fff;font-size:14px;padding:.5rem;pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.pie-chart-module_pie-chart__R12Vh{display:flex;flex-direction:column;overflow:hidden}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9{display:flex;flex-direction:column;text-align:center}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_label__nPqOg{font-size:16px;font-weight:600;margin-bottom:0}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_note__LpBZQ{font-size:14px;margin-top:0}.leaderboard-chart-module_leaderboardChart__zxakP{transition:opacity .3s ease-in-out}.leaderboard-chart-module_leaderboardChart__zxakP.leaderboard-chart-module_loading__-AGv-{opacity:.5}.leaderboard-chart-module_progressContainer__BZGbj{display:flex;flex-direction:column;gap:6px}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_progressBar__LAQaj{background-color:transparent;border-radius:2px;height:6px;overflow:hidden;transition:width .3s ease-in-out;width:100%}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_progressBar__LAQaj>div{background-color:var(--progress-color,#3858e9)}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_primaryBar__iybII{--progress-color:var(--primary-color,#3858e9)}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_secondaryBar__A7tLz{--progress-color:var(--secondary-color,#66bdff)}.leaderboard-chart-module_valueContainer__ZlLh4{display:flex;gap:4px;justify-content:flex-end}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}

package/dist/mjs/components/bar-chart/bar-chart.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { PatternHexagons, PatternWaves, PatternCircles, PatternLines } from '@visx/pattern';
 import { XYChart, Grid, BarGroup, BarSeries, Axis } from '@visx/xychart';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { useContext, useId, useRef, useState, useCallback, useMemo } from 'react';
+import { useContext, useRef, useState, useCallback, useMemo } from 'react';
 import { ChartContext, ChartProvider } from '../../providers/chart-context/chart-context.js';
 import { useChartId, useChartRegistration } from '../../providers/chart-context/utils.js';
 import { useChartTheme, useXYChartTheme } from '../../providers/theme/theme-provider.js';
@@ -34,8 +35,6 @@ const validateData = (data) => {
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
 const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400, className, margin, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'rect', gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = 'vertical', withPatterns = false, showZeroValues = false, }) => {
     const horizontal = orientation === 'horizontal';
-    // Generate a unique chart ID to avoid pattern conflicts with multiple charts
-    const internalChartId = useId();
     const chartId = useChartId(providedChartId);
     const providerTheme = useChartTheme();
     const theme = useXYChartTheme(data);
@@ -64,8 +63,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
     });
     const getColor = useCallback((seriesData, index) => seriesData?.options?.stroke || theme.colors[index % theme.colors.length], [theme]);
     const getBarBackground = useCallback((index) => () => withPatterns
-        ? `url(#${getPatternId(internalChartId, index)})`
-        : getColor(dataSorted[index], index), [withPatterns, getColor, dataSorted, internalChartId]);
+        ? `url(#${getPatternId(chartId, index)})`
+        : getColor(dataSorted[index], index), [withPatterns, getColor, dataSorted, chartId]);
     const renderDefaultTooltip = useCallback(({ tooltipData }) => {
         const nearestDatum = tooltipData?.nearestDatum?.datum;
         if (!nearestDatum)
@@ -74,7 +73,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
     }, [chartOptions.tooltip]);
     const renderPattern = useCallback((index, color) => {
         const patternType = index % 4;
-        const id = getPatternId(internalChartId, index);
+        const id = getPatternId(chartId, index);
         const commonProps = {
             id,
             stroke: 'white',
@@ -92,16 +91,16 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
             case 3:
                 return jsx(PatternHexagons, { ...commonProps, size: 8, height: 3 }, id);
         }
-    }, [internalChartId]);
+    }, [chartId]);
     const createPatternBorderStyle = useCallback((index, color) => {
-        const patternId = getPatternId(internalChartId, index);
+        const patternId = getPatternId(chartId, index);
         return `
 			.visx-bar[fill="url(#${patternId})"] {
 				stroke: ${color};
 				stroke-width: 1;
 				}
 			`;
-    }, [internalChartId]);
+    }, [chartId]);
     const createKeyboardHighlightStyle = useCallback(() => {
         if (selectedIndex === undefined)
             return '';
@@ -147,7 +146,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
     }
     const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
     const highlightedBarStyle = createKeyboardHighlightStyle();
-    return (jsxs("div", { className: clsx('bar-chart', styles['bar-chart'], className), "data-testid": "bar-chart", role: "grid", "aria-label": "bar chart", style: {
+    return (jsxs("div", { className: clsx('bar-chart', styles['bar-chart'], className), "data-testid": "bar-chart", role: "grid", "aria-label": __('Bar chart', 'jetpack-charts'), style: {
             width,
             height,
             display: 'flex',

package/dist/mjs/components/legend/base-legend.js

@@ -16,20 +16,24 @@ const orientationToFlexDirection = {
  * Base legend component that displays color-coded items with labels based on visx LegendOrdinal.
  * We avoid using LegendOrdinal directly to enable support for advanced features such as interactivity.
  */
-const BaseLegend = forwardRef(({ items, className, orientation = 'horizontal', alignmentHorizontal = 'center', alignmentVertical = 'bottom', shape = 'rect', fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform = labelTransformFactory, shapeWidth = 16, shapeHeight = 16, shapeMargin = '2px 4px 2px 0', labelAlign = 'left', labelFlex = '1', labelMargin = '0 4px', itemMargin = '0', itemDirection = 'row', legendLabelProps, ...legendItemProps }, ref) => {
+const BaseLegend = forwardRef(({ items, className, orientation = 'horizontal', alignmentHorizontal = 'center', alignmentVertical = 'bottom', shape = 'rect', fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform = labelTransformFactory, shapeWidth = 16, shapeHeight = 16, shapeMargin = '2px 4px 2px 0', labelAlign = 'left', labelFlex = '0 0 auto', // Use natural width instead of expanding to fill space
+labelMargin = '0 4px', itemMargin = '0', itemDirection = 'row', legendLabelProps, ...legendItemProps }, ref) => {
     const theme = useChartTheme();
     const legendScale = scaleOrdinal({
         domain: items.map(item => item.label),
         range: items.map(item => item.color),
     });
     const domain = legendScale.domain();
+    // For right-aligned vertical legends, use row-reverse to align text consistently
     const getShapeStyle = useCallback(({ index }) => {
         return items[index]?.shapeStyle ?? theme.legendShapeStyles?.[index] ?? {};
     }, [items, theme]);
     return (jsx(LegendOrdinal, { scale: legendScale, labelFormat: labelFormat, labelTransform: labelTransform, children: labels => (jsx("div", { ref: ref, role: "list", "data-testid": `legend-${orientation}`, className: clsx(styles.legend, styles[`legend--${orientation}`], styles[`legend--horizontal-align-${alignmentHorizontal}`], styles[`legend--vertical-align-${alignmentVertical}`], className), style: {
                 flexDirection: orientationToFlexDirection[orientation],
                 ...theme.legendContainerStyles,
-            }, children: labels.map((label, i) => (jsxs(LegendItem, { className: styles['legend-item'], "data-testid": "legend-item", margin: itemMargin, flexDirection: itemDirection, ...legendItemProps, children: [items[i]?.renderGlyph ? (jsx("svg", { width: items[i]?.glyphSize * 2, height: items[i]?.glyphSize * 2, "data-testid": "legend-glyph", children: jsx(Group, { children: items[i]?.renderGlyph({
+            }, children: labels.map((label, i) => (jsxs(LegendItem, { className: styles['legend-item'], "data-testid": "legend-item", margin: itemMargin, flexDirection: orientation === 'vertical' && alignmentHorizontal === 'right'
+                    ? 'row-reverse'
+                    : itemDirection, ...legendItemProps, children: [items[i]?.renderGlyph ? (jsx("svg", { width: items[i]?.glyphSize * 2, height: items[i]?.glyphSize * 2, "data-testid": "legend-glyph", children: jsx(Group, { children: items[i]?.renderGlyph({
                                 key: `legend-glyph-${label.text}`,
                                 datum: {},
                                 index: i,
@@ -42,7 +46,7 @@ const BaseLegend = forwardRef(({ items, className, orientation = 'horizontal', a
                             flex: labelFlex,
                             margin: labelMargin,
                             ...theme.legendLabelStyles,
-                        }, ...legendLabelProps, children: [label.text, items.find(item => item.label === label.text)?.value && (jsx("span", { className: styles['legend-item-value'], children: items.find(item => item.label === label.text)?.value }))] })] }, `legend-${label.text}-${i}`))) })) }));
+                        }, ...legendLabelProps, children: [label.text, items.find(item => item.label === label.text)?.value && (jsxs("span", { className: styles['legend-item-value'], children: ['\u00A0', items.find(item => item.label === label.text)?.value] }))] })] }, `legend-${label.text}-${i}`))) })) }));
 });
 
 export { BaseLegend };

package/dist/mjs/components/legend/legend.module.scss.js

@@ -1,3 +1,3 @@
-var styles = {"legend--horizontal":"legend-module_legend--horizontal__IUN13","legend--vertical":"legend-module_legend--vertical__Scfzo","legend--vertical-align-top":"legend-module_legend--vertical-align-top__l6G1I","legend--horizontal-align-left":"legend-module_legend--horizontal-align-left__w2O7z","legend--horizontal-align-center":"legend-module_legend--horizontal-align-center__Fmcxd","legend--horizontal-align-right":"legend-module_legend--horizontal-align-right__tKgER","legend--vertical-align-bottom":"legend-module_legend--vertical-align-bottom__UzHCY","legend-item":"legend-module_legend-item__feemn","legend-item-label":"legend-module_legend-item-label__ksx6I","legend-item-value":"legend-module_legend-item-value__d9x1j"};
+var styles = {"legend--horizontal":"legend-module_legend--horizontal__IUN13","legend--vertical":"legend-module_legend--vertical__Scfzo","legend--horizontal-align-left":"legend-module_legend--horizontal-align-left__w2O7z","legend--horizontal-align-center":"legend-module_legend--horizontal-align-center__Fmcxd","legend--horizontal-align-right":"legend-module_legend--horizontal-align-right__tKgER","legend--vertical-align-top":"legend-module_legend--vertical-align-top__l6G1I","legend--vertical-align-bottom":"legend-module_legend--vertical-align-bottom__UzHCY","legend-item":"legend-module_legend-item__feemn","legend-item-label":"legend-module_legend-item-label__ksx6I","legend-item-value":"legend-module_legend-item-value__d9x1j"};
 
 export { styles as default };

package/dist/mjs/components/line-chart/line-chart-annotation-label-popover.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import Gridicon from 'gridicons';
 import { useId, useRef, useState, useEffect } from 'react';
@@ -46,10 +47,10 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
                     width: `${POPOVER_BUTTON_SIZE}px`,
                     height: `${POPOVER_BUTTON_SIZE}px`,
                     transform: `translate(${POPOVER_BUTTON_SIZE / 2}px, 0)`,
-                }, "aria-label": title || 'View details', children: renderLabel({ title, subtitle }) }), jsx("div", { ref: popoverRef, id: popoverId, ...{ popover: 'auto' }, className: clsx(styles['line-chart__annotation-label-popover'], isPositioned && styles['line-chart__annotation-label-popover--visible'], isBrowserSafari && styles['line-chart__annotation-label-popover--safari']), "data-testid": "line-chart-annotation-label-popover", children: jsxs("div", { className: styles['line-chart__annotation-label-popover-header'], children: [jsx("div", { className: styles['line-chart__annotation-label-popover-content'], children: renderLabelPopover({ title, subtitle }) }), jsx("button", { ...{
+                }, "aria-label": title || __('View details', 'jetpack-charts'), children: renderLabel({ title, subtitle }) }), jsx("div", { ref: popoverRef, id: popoverId, ...{ popover: 'auto' }, className: clsx(styles['line-chart__annotation-label-popover'], isPositioned && styles['line-chart__annotation-label-popover--visible'], isBrowserSafari && styles['line-chart__annotation-label-popover--safari']), "data-testid": "line-chart-annotation-label-popover", children: jsxs("div", { className: styles['line-chart__annotation-label-popover-header'], children: [jsx("div", { className: styles['line-chart__annotation-label-popover-content'], children: renderLabelPopover({ title, subtitle }) }), jsx("button", { ...{
                                 popovertarget: popoverId,
                                 popovertargetaction: 'hide',
-                            }, className: styles['line-chart__annotation-label-popover-close-button'], "aria-label": "Close", children: jsx(Gridicon, { icon: "cross", size: 16 }) })] }) })] }));
+                            }, className: styles['line-chart__annotation-label-popover-close-button'], "aria-label": __('Close', 'jetpack-charts'), children: jsx(Gridicon, { icon: "cross", size: 16 }) })] }) })] }));
 };
 
 export { POPOVER_BUTTON_SIZE, LineChartAnnotationLabelWithPopover as default };

package/dist/mjs/components/line-chart/line-chart.js

@@ -1,9 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useState, useImperativeHandle, useMemo, useContext, createElement } from 'react';
+import { forwardRef, useRef, useState, useImperativeHandle, useMemo, useContext, createElement } from 'react';
 import { formatNumberCompact } from '@automattic/number-formatters';
 import { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';
 import { LinearGradient } from '@visx/gradient';
 import { XYChart, Grid, Axis, AreaSeries, DataContext } from '@visx/xychart';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { ChartContext, ChartProvider } from '../../providers/chart-context/chart-context.js';
 import { useChartId, useChartRegistration } from '../../providers/chart-context/utils.js';
@@ -132,7 +133,6 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', renderGlyph = defaultRenderGlyph, glyphStyle = {}, legendShape = 'line', withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, options = {}, onPointerDown = undefined, onPointerUp = undefined, onPointerMove = undefined, onPointerOut = undefined, children, }, ref) => {
     const providerTheme = useChartTheme();
     const theme = useXYChartTheme(data);
-    const internalChartId = useId(); // Ensure unique ids for gradient fill.
     const chartId = useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight();
     const chartRef = useRef(null);
@@ -230,7 +230,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
                 display: 'flex',
                 flexDirection: showLegend && legendAlignmentVertical === 'top' ? 'column-reverse' : 'column',
                 position: 'relative',
-            }, children: [jsx("div", { role: "grid", "aria-label": "line chart", tabIndex: 0, onKeyDown: onChartKeyDown, onFocus: onChartFocus, onBlur: onChartBlur, ref: chartRef, children: jsxs(XYChart, { theme: theme, width: width, height: height - (showLegend ? legendHeight : 0), margin: {
+            }, children: [jsx("div", { role: "grid", "aria-label": __('Line chart', 'jetpack-charts'), tabIndex: 0, onKeyDown: onChartKeyDown, onFocus: onChartFocus, onBlur: onChartBlur, ref: chartRef, children: jsxs(XYChart, { theme: theme, width: width, height: height - (showLegend ? legendHeight : 0), margin: {
                             ...defaultMargin,
                             ...margin,
                             ...(showLegend && legendAlignmentVertical === 'top'
@@ -243,8 +243,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
                                 const lineProps = seriesData.options?.seriesLineStyle ??
                                     providerTheme?.seriesLineStyles?.[index % providerTheme.seriesLineStyles.length] ??
                                     {};
-                                return (jsxs("g", { children: [withStartGlyphs && (jsx(StartGlyph, { index: index, data: seriesData, color: stroke, renderGlyph: providerTheme.glyphs?.[index] ?? renderGlyph, accessors: accessors, glyphStyle: glyphStyle })), withGradientFill && (jsx(LinearGradient, { id: `area-gradient-${internalChartId}-${index + 1}`, from: stroke, fromOpacity: 0.4, toOpacity: 0.1, to: theme.backgroundColor, ...seriesData.options?.gradient, "data-testid": "line-gradient" })), jsx(AreaSeries, { dataKey: seriesData?.label, data: seriesData.data, ...accessors, fill: withGradientFill
-                                                ? `url(#area-gradient-${internalChartId}-${index + 1})`
+                                return (jsxs("g", { children: [withStartGlyphs && (jsx(StartGlyph, { index: index, data: seriesData, color: stroke, renderGlyph: providerTheme.glyphs?.[index] ?? renderGlyph, accessors: accessors, glyphStyle: glyphStyle })), withGradientFill && (jsx(LinearGradient, { id: `area-gradient-${chartId}-${index + 1}`, from: stroke, fromOpacity: 0.4, toOpacity: 0.1, to: theme.backgroundColor, ...seriesData.options?.gradient, "data-testid": "line-gradient" })), jsx(AreaSeries, { dataKey: seriesData?.label, data: seriesData.data, ...accessors, fill: withGradientFill
+                                                ? `url(#area-gradient-${chartId}-${index + 1})`
                                                 : 'transparent', renderLine: true, curve: getCurveType(curveType, smoothing), lineProps: lineProps }, seriesData?.label)] }, seriesData?.label || index));
                             }), withTooltips && (jsx(AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, showSeriesGlyphs: true, renderTooltip: renderTooltip, renderGlyph: tooltipRenderGlyph, glyphStyle: glyphStyle, showVerticalCrosshair: withTooltipCrosshairs?.showVertical, showHorizontalCrosshair: withTooltipCrosshairs?.showHorizontal, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: styles['line-chart__tooltip--keyboard-focused'], series: dataSorted })), jsx(LineChartScalesRef, { chartRef: internalChartRef, width: width, height: height, margin: margin })] }) }), showLegend && (jsx(Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: styles['line-chart-legend'], shape: legendShape, chartId: chartId, ref: legendRef })), children] }) }));
 });

package/dist/mjs/components/pie-chart/pie-chart.js

@@ -44,7 +44,7 @@ const validateData = (data) => {
  * @param {PieChartProps} props - Component props
  * @return {JSX.Element} The rendered chart component
  */
-const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend, legendOrientation, legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
+const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
     const providerTheme = useChartTheme();
     const chartId = useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight();

package/dist/mjs/components/pie-semi-circle-chart/pie-semi-circle-chart.js

@@ -11,6 +11,7 @@ import { useChartId, useChartRegistration } from '../../providers/chart-context/
 import { useChartTheme } from '../../providers/theme/theme-provider.js';
 import { Legend } from '../legend/legend.js';
 import '../legend/base-legend.js';
+import { useChartLegendData } from '../legend/use-chart-legend-data.js';
 import { useElementHeight } from '../shared/use-element-height.js';
 import { withResponsive } from '../shared/with-responsive.js';
 import { BaseTooltip } from '../tooltip/base-tooltip.js';
@@ -68,12 +69,10 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 40
         // Use the color property from the data object as a last resort. The theme provides colours by default.
         fill: (d) => d.color || providerTheme.colors[d.index % providerTheme.colors.length],
     }), [providerTheme.colors]);
-    // Create legend items with color from accessors (which respects item.color)
-    const legendItems = useMemo(() => data.map((item, index) => ({
-        label: item.label,
-        value: item.valueDisplay || item.value.toString(),
-        color: accessors.fill({ ...item, index }),
-    })), [data, accessors]);
+    // Memoize legend options to prevent unnecessary re-calculations
+    const legendOptions = useMemo(() => ({ showValues: true }), []);
+    // Create legend items using the reusable hook
+    const legendItems = useChartLegendData(data, providerTheme, legendOptions);
     // Memoize metadata to prevent unnecessary re-registration
     const chartMetadata = useMemo(() => ({
         thickness,
@@ -108,10 +107,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 40
                     label: tooltipData.label,
                     value: tooltipData.value,
                     valueDisplay: tooltipData.valueDisplay,
-                }, top: tooltipTop || 0, left: tooltipLeft || 0 })), showLegend && (jsx(Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: clsx(styles['pie-semi-circle-chart-legend'], {
-                    [styles['is-on-top']]: legendAlignmentVertical === 'top',
-                    [styles['is-on-bottom']]: legendAlignmentVertical === 'bottom',
-                }), shape: legendShape, ref: legendRef, chartId: chartId }))] }));
+                }, top: tooltipTop || 0, left: tooltipLeft || 0 })), showLegend && (jsx(Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, shape: legendShape, ref: legendRef, chartId: chartId }))] }));
 };
 const PieSemiCircleChart = props => (jsx(ChartProvider, { children: jsx(PieSemiCircleChartInternal, { ...props }) }));
 PieSemiCircleChart.displayName = 'PieSemiCircleChart';

package/dist/mjs/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss.js

@@ -1,3 +1,3 @@
-var styles = {"pie-semi-circle-chart":"pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9","pie-semi-circle-chart-legend":"pie-semi-circle-chart-module_pie-semi-circle-chart-legend__c8W1Y","is-on-top":"pie-semi-circle-chart-module_is-on-top__BamnZ","is-on-bottom":"pie-semi-circle-chart-module_is-on-bottom__NyS5q","label":"pie-semi-circle-chart-module_label__nPqOg","note":"pie-semi-circle-chart-module_note__LpBZQ"};
+var styles = {"pie-semi-circle-chart":"pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9","label":"pie-semi-circle-chart-module_label__nPqOg","note":"pie-semi-circle-chart-module_note__LpBZQ"};
 
 export { styles as default };

package/dist/mjs/style.css

@@ -1 +1 @@
-.legend-module_legend--horizontal__IUN13{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.legend-module_legend--vertical__Scfzo{display:flex;flex-direction:column;gap:8px}.legend-module_legend--vertical-align-top__l6G1I{position:relative}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-left__w2O7z{justify-content:flex-start}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-center__Fmcxd{justify-content:center}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-right__tKgER{justify-content:flex-end}.legend-module_legend--vertical-align-bottom__UzHCY{position:relative}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-left__w2O7z{justify-content:flex-start}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-center__Fmcxd{justify-content:center}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-right__tKgER{justify-content:flex-end}.legend-module_legend-item__feemn{align-items:center;display:flex;font-size:.875rem}.legend-module_legend-item-label__ksx6I{align-items:center;display:flex;gap:.5rem}.legend-module_legend-item-value__d9x1j{font-weight:500}.bar-chart-module_bar-chart__lmYNi{display:flex;flex-direction:column}.bar-chart-module_bar-chart__lmYNi svg{overflow:visible}.bar-chart-module_bar-chart-legend__vgKKq{margin-top:1rem}.line-chart-module_line-chart__ITM3d{display:flex;flex-direction:column}.line-chart-module_line-chart__ITM3d svg{overflow:visible}.line-chart-module_line-chart__annotation-label-popover__TqNZk,.line-chart-module_line-chart__tooltip__aqcme{background:#fff;padding:.5rem}.line-chart-module_line-chart__tooltip-date__4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module_line-chart__tooltip-row__6A37G{align-items:center;display:flex;justify-content:space-between;padding:4px 0}.line-chart-module_line-chart__tooltip-label__IvnFF{font-weight:500;padding-right:1rem}.line-chart-module_line-chart__annotations-overlay__4nR2p{left:0;overflow:visible;pointer-events:none;position:absolute;top:0}.line-chart-module_line-chart__annotation-label__OmgiT{pointer-events:auto}.line-chart-module_line-chart__annotation-label-trigger-button__mcIb3{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;pointer-events:auto}.line-chart-module_line-chart__annotation-label-popover__TqNZk{background:#fff;border:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);font-size:14px;margin:.5rem;min-width:125px;position:fixed;visibility:hidden}.line-chart-module_line-chart__annotation-label-popover--visible__dE0cV{visibility:visible}.line-chart-module_line-chart__annotation-label-popover--safari__i3NHT{margin:auto;position:static}.line-chart-module_line-chart__annotation-label-popover-header__Owypo{align-items:start;display:flex;flex-direction:row;justify-content:space-between}.line-chart-module_line-chart__annotation-label-popover-content__vtgQt{padding:.5rem}.line-chart-module_line-chart__annotation-label-popover-close-button__i8KUc{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}.visx-tooltip-glyph svg{height:10px;width:10px}.base-tooltip-module_tooltip__OfX6n{background-color:rgba(0,0,0,.85);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:#fff;font-size:14px;padding:.5rem;pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.pie-chart-module_pie-chart__R12Vh{display:flex;flex-direction:column;overflow:hidden}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9{display:flex;flex-direction:column;text-align:center}.pie-semi-circle-chart-module_pie-semi-circle-chart-legend__c8W1Y.pie-semi-circle-chart-module_is-on-top__BamnZ{margin-bottom:1rem}.pie-semi-circle-chart-module_pie-semi-circle-chart-legend__c8W1Y.pie-semi-circle-chart-module_is-on-bottom__NyS5q{margin-top:1rem}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_label__nPqOg{font-size:16px;font-weight:600;margin-bottom:0}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_note__LpBZQ{font-size:14px;margin-top:0}.leaderboard-chart-module_leaderboardChart__zxakP{transition:opacity .3s ease-in-out}.leaderboard-chart-module_leaderboardChart__zxakP.leaderboard-chart-module_loading__-AGv-{opacity:.5}.leaderboard-chart-module_progressContainer__BZGbj{display:flex;flex-direction:column;gap:6px}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_progressBar__LAQaj{background-color:transparent;border-radius:2px;height:6px;overflow:hidden;transition:width .3s ease-in-out;width:100%}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_progressBar__LAQaj>div{background-color:var(--progress-color,#3858e9)}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_primaryBar__iybII{--progress-color:var(--primary-color,#3858e9)}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_secondaryBar__A7tLz{--progress-color:var(--secondary-color,#66bdff)}.leaderboard-chart-module_valueContainer__ZlLh4{display:flex;gap:4px;justify-content:flex-end}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}
+.legend-module_legend--horizontal__IUN13{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px}.legend-module_legend--vertical__Scfzo{display:flex;flex-direction:column;gap:8px}.legend-module_legend--vertical__Scfzo.legend-module_legend--horizontal-align-left__w2O7z{align-items:flex-start}.legend-module_legend--vertical__Scfzo.legend-module_legend--horizontal-align-center__Fmcxd{align-items:center}.legend-module_legend--vertical__Scfzo.legend-module_legend--horizontal-align-right__tKgER{align-items:flex-end}.legend-module_legend--vertical-align-top__l6G1I{position:relative}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-left__w2O7z{justify-content:flex-start}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-center__Fmcxd{justify-content:center}.legend-module_legend--vertical-align-top__l6G1I.legend-module_legend--horizontal-align-right__tKgER{justify-content:flex-end}.legend-module_legend--vertical-align-bottom__UzHCY{position:relative}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-left__w2O7z{justify-content:flex-start}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-center__Fmcxd{justify-content:center}.legend-module_legend--vertical-align-bottom__UzHCY.legend-module_legend--horizontal-align-right__tKgER{justify-content:flex-end}.legend-module_legend-item__feemn{align-items:center;display:flex;font-size:.875rem}.legend-module_legend-item-label__ksx6I{align-items:center;display:flex;gap:.5rem}.legend-module_legend-item-value__d9x1j{font-weight:500}.bar-chart-module_bar-chart__lmYNi{display:flex;flex-direction:column}.bar-chart-module_bar-chart__lmYNi svg{overflow:visible}.bar-chart-module_bar-chart-legend__vgKKq{margin-top:1rem}.line-chart-module_line-chart__ITM3d{display:flex;flex-direction:column}.line-chart-module_line-chart__ITM3d svg{overflow:visible}.line-chart-module_line-chart__annotation-label-popover__TqNZk,.line-chart-module_line-chart__tooltip__aqcme{background:#fff;padding:.5rem}.line-chart-module_line-chart__tooltip-date__4Dzab{font-weight:700;padding-bottom:10px}.line-chart-module_line-chart__tooltip-row__6A37G{align-items:center;display:flex;justify-content:space-between;padding:4px 0}.line-chart-module_line-chart__tooltip-label__IvnFF{font-weight:500;padding-right:1rem}.line-chart-module_line-chart__annotations-overlay__4nR2p{left:0;overflow:visible;pointer-events:none;position:absolute;top:0}.line-chart-module_line-chart__annotation-label__OmgiT{pointer-events:auto}.line-chart-module_line-chart__annotation-label-trigger-button__mcIb3{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;pointer-events:auto}.line-chart-module_line-chart__annotation-label-popover__TqNZk{background:#fff;border:none;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);font-size:14px;margin:.5rem;min-width:125px;position:fixed;visibility:hidden}.line-chart-module_line-chart__annotation-label-popover--visible__dE0cV{visibility:visible}.line-chart-module_line-chart__annotation-label-popover--safari__i3NHT{margin:auto;position:static}.line-chart-module_line-chart__annotation-label-popover-header__Owypo{align-items:start;display:flex;flex-direction:row;justify-content:space-between}.line-chart-module_line-chart__annotation-label-popover-content__vtgQt{padding:.5rem}.line-chart-module_line-chart__annotation-label-popover-close-button__i8KUc{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:44px;justify-content:center;padding:0;width:44px}.visx-tooltip-glyph svg{height:10px;width:10px}.base-tooltip-module_tooltip__OfX6n{background-color:rgba(0,0,0,.85);border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.1);color:#fff;font-size:14px;padding:.5rem;pointer-events:none;position:absolute;transform:translate(-50%,-100%)}.pie-chart-module_pie-chart__R12Vh{display:flex;flex-direction:column;overflow:hidden}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9{display:flex;flex-direction:column;text-align:center}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_label__nPqOg{font-size:16px;font-weight:600;margin-bottom:0}.pie-semi-circle-chart-module_pie-semi-circle-chart__r5jk9 .pie-semi-circle-chart-module_note__LpBZQ{font-size:14px;margin-top:0}.leaderboard-chart-module_leaderboardChart__zxakP{transition:opacity .3s ease-in-out}.leaderboard-chart-module_leaderboardChart__zxakP.leaderboard-chart-module_loading__-AGv-{opacity:.5}.leaderboard-chart-module_progressContainer__BZGbj{display:flex;flex-direction:column;gap:6px}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_progressBar__LAQaj{background-color:transparent;border-radius:2px;height:6px;overflow:hidden;transition:width .3s ease-in-out;width:100%}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_progressBar__LAQaj>div{background-color:var(--progress-color,#3858e9)}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_primaryBar__iybII{--progress-color:var(--primary-color,#3858e9)}.leaderboard-chart-module_progressContainer__BZGbj .leaderboard-chart-module_secondaryBar__A7tLz{--progress-color:var(--secondary-color,#66bdff)}.leaderboard-chart-module_valueContainer__ZlLh4{display:flex;gap:4px;justify-content:flex-end}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}

package/dist/types/components/line-chart/line-chart.d.ts

@@ -19,7 +19,7 @@ interface LineChartProps extends BaseChartProps<SeriesData[]> {
     withStartGlyphs?: boolean;
     renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;
     glyphStyle?: SVGProps<SVGCircleElement>;
-    withLegendGlyph: boolean;
+    withLegendGlyph?: boolean;
     withTooltipCrosshairs?: {
         showVertical?: boolean;
         showHorizontal?: boolean;

package/dist/types/index.d.ts

@@ -18,5 +18,5 @@ export { defaultTheme, jetpackTheme, wooTheme } from './providers/theme/themes.j
 export { default as useChartMouseHandler } from './hooks/use-chart-mouse-handler.js';
 export { BaseChartProps, ButtonWithPopover, ChartTheme, DataPoint, DataPointDate, DataPointPercentage, GridProps, MultipleDataPointsDate, Optional, OrientationType, PopoverButtonAttributes, PopoverElement, PopoverElementAttributes, ScaleOptions, SeriesData, ToggleEvent } from './types.js';
 export { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-export { GridStyles, LineStyles } from '@visx/xychart';
+export { EventHandlerParams, GridStyles, LineStyles } from '@visx/xychart';
 export { ConversionFunnelChartProps, FunnelStep } from './components/conversion-funnel-chart/conversion-funnel-chart.js';

package/dist/types/types.d.ts

@@ -209,17 +209,17 @@ type BaseChartProps<T = DataPoint | DataPointDate> = {
     /**
      * Callback function for pointer down event
      */
-    onPointerDown?: (event: EventHandlerParams<object>) => void;
+    onPointerDown?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
     /**
-     * Callback function for pointer down event
+     * Callback function for pointer up event
      */
-    onPointerUp?: (event: EventHandlerParams<object>) => void;
+    onPointerUp?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
     /**
-     * Callback function for pointer down event
+     * Callback function for pointer move event
      */
-    onPointerMove?: (event: EventHandlerParams<object>) => void;
+    onPointerMove?: (event: EventHandlerParams<DataPoint | DataPointDate>) => void;
     /**
-     * Callback function for pointer up event
+     * Callback function for pointer out event
      */
     onPointerOut?: (event: PointerEvent<Element>) => void;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.23.0",
+	"version": "0.25.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -13,23 +13,6 @@
 	},
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
-	"scripts": {
-		"clean": "rm -rf dist",
-		"test": "TZ=UTC jest --config=tests/jest.config.cjs",
-		"test-coverage": "pnpm run test --coverage",
-		"storybook": "cd ../storybook && pnpm run storybook:dev",
-		"compile-ts": "tsc --pretty",
-		"clean-build": "rm -rf dist/",
-		"typecheck": "tsc --noEmit",
-		"build": "pnpm run build:prod",
-		"build:prod": "pnpm run clean && rollup -c --environment NODE_ENV:production",
-		"build:dev": "rollup -c --environment NODE_ENV:development",
-		"build:webpack": "pnpm run clean-build && webpack --config webpack.config.cjs --mode production && pnpm run build:types",
-		"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
-	},
-	"main": "./dist/cjs/index.js",
-	"module": "./dist/mjs/index.js",
-	"types": "./dist/types/index.d.ts",
 	"sideEffects": [
 		"*.css",
 		"*.scss"
@@ -40,10 +23,10 @@
 			"require": "./dist/cjs/index.js",
 			"types": "./dist/types/index.d.ts"
 		},
-		"./visx/*": {
-			"import": "./dist/mjs/visx/*/index.js",
-			"require": "./dist/cjs/visx/*/index.js",
-			"types": "./dist/types/visx/*/index.d.ts"
+		"./*": {
+			"import": "./dist/mjs/components/*/index.js",
+			"require": "./dist/cjs/components/*/index.js",
+			"types": "./dist/types/components/*/index.d.ts"
 		},
 		"./providers/*": {
 			"import": "./dist/mjs/providers/*/index.js",
@@ -51,14 +34,31 @@
 			"types": "./dist/types/providers/*/index.d.ts"
 		},
 		"./style.css": "./dist/mjs/style.css",
-		"./*": {
-			"import": "./dist/mjs/components/*/index.js",
-			"require": "./dist/cjs/components/*/index.js",
-			"types": "./dist/types/components/*/index.d.ts"
+		"./visx/*": {
+			"import": "./dist/mjs/visx/*/index.js",
+			"require": "./dist/cjs/visx/*/index.js",
+			"types": "./dist/types/visx/*/index.d.ts"
 		}
 	},
+	"main": "./dist/cjs/index.js",
+	"module": "./dist/mjs/index.js",
+	"types": "./dist/types/index.d.ts",
+	"scripts": {
+		"build": "pnpm run build:prod",
+		"build:dev": "rollup -c --environment NODE_ENV:development",
+		"build:prod": "pnpm run clean && rollup -c --environment NODE_ENV:production",
+		"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+		"build:webpack": "pnpm run clean-build && webpack --config webpack.config.cjs --mode production && pnpm run build:types",
+		"clean": "rm -rf dist",
+		"clean-build": "rm -rf dist/",
+		"compile-ts": "tsc --pretty",
+		"storybook": "cd ../storybook && pnpm run storybook:dev",
+		"test": "TZ=UTC jest --config=tests/jest.config.cjs",
+		"test-coverage": "pnpm run test --coverage",
+		"typecheck": "tsc --noEmit"
+	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.0.9",
+		"@automattic/number-formatters": "^1.0.10",
 		"@babel/runtime": "7.27.6",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -76,6 +76,7 @@
 		"@visx/text": "^3.12.0",
 		"@visx/tooltip": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
+		"@wordpress/i18n": "^6.0.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -105,8 +106,8 @@
 		"@types/react": "18.3.23",
 		"@types/react-dom": "18.3.7",
 		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "29.12.0",
-		"@wordpress/element": "6.26.0",
+		"@wordpress/components": "30.0.0",
+		"@wordpress/element": "6.27.0",
 		"babel-jest": "30.0.0",
 		"babel-loader": "9.1.2",
 		"css-loader": "^6.7.0",