@automattic/charts 0.26.0 → 0.28.0

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

@@ -10,12 +10,16 @@ var text = require('@visx/text');
 var tooltip = require('@visx/tooltip');
 var clsx = require('clsx');
 var react = require('react');
+require('fast-deep-equal');
+var useGlobalChartTheme = require('../../hooks/use-global-chart-theme.js');
+require('@visx/xychart');
 var globalChartsProvider = require('../../providers/chart-context/global-charts-provider.js');
 var utils = require('../../providers/chart-context/utils.js');
-var themeProvider = require('../../providers/theme/theme-provider.js');
+var createComposition = require('../../utils/create-composition.js');
 var legend = require('../legend/legend.js');
 require('../legend/base-legend.js');
 var useChartLegendData = require('../legend/use-chart-legend-data.js');
+var singleChartContext = require('../shared/single-chart-context.js');
 var useElementHeight = require('../shared/use-element-height.js');
 var withResponsive = require('../shared/with-responsive.js');
 var baseTooltip = require('../tooltip/base-tooltip.js');
@@ -43,8 +47,34 @@ const validateData = (data) => {
     }
     return { isValid: true, message: '' };
 };
-const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 400, thickness = 0.4, clockwise = true, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', label, note, className, }) => {
-    const providerTheme = themeProvider.useChartTheme();
+/**
+ * Compound component for SVG children in the PieSemiCircleChart
+ * @param {PropsWithChildren} props          - Component props
+ * @param {ReactNode}         props.children - Child elements to render
+ * @return {JSX.Element} The children wrapped in a fragment
+ */
+const PieSemiCircleChartSVG = ({ children }) => {
+    // This component doesn't render directly - its children are extracted by PieSemiCircleChart
+    // We just return the children as-is
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+// Set displayName for better debugging and type checking
+PieSemiCircleChartSVG.displayName = 'PieSemiCircleChart.SVG';
+/**
+ * Compound component for HTML children in the PieSemiCircleChart
+ * @param {PropsWithChildren} props          - Component props
+ * @param {ReactNode}         props.children - Child elements to render
+ * @return {JSX.Element} The children wrapped in a fragment
+ */
+const PieSemiCircleChartHTML = ({ children }) => {
+    // This component doesn't render directly - its children are extracted by PieSemiCircleChart
+    // We just return the children as-is
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+// Set displayName for better debugging and type checking
+PieSemiCircleChartHTML.displayName = 'PieSemiCircleChart.HTML';
+const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 400, thickness = 0.4, clockwise = true, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', label, note, className, children, }) => {
+    const providerTheme = useGlobalChartTheme.useGlobalChartTheme();
     const chartId = utils.useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
     const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } = tooltip.useTooltip();
@@ -76,14 +106,53 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 40
     // 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);
+    const legendItems = useChartLegendData.useChartLegendData(data, legendOptions);
+    // Process children to extract compound components
+    const { svgChildren, htmlChildren, otherChildren } = react.useMemo(() => {
+        const svg = [];
+        const html = [];
+        const other = [];
+        react.Children.forEach(children, child => {
+            if (react.isValidElement(child)) {
+                // Check displayName for compound components
+                const childType = child.type;
+                const displayName = childType?.displayName;
+                if (displayName === 'PieSemiCircleChart.SVG') {
+                    // Extract children from PieSemiCircleChart.SVG
+                    react.Children.forEach(child.props.children, svgChild => {
+                        svg.push(svgChild);
+                    });
+                }
+                else if (displayName === 'PieSemiCircleChart.HTML') {
+                    // Extract children from PieSemiCircleChart.HTML
+                    react.Children.forEach(child.props.children, htmlChild => {
+                        html.push(htmlChild);
+                    });
+                }
+                else if (child.type === group.Group) {
+                    // Legacy support: still check for Group type for backward compatibility
+                    svg.push(child);
+                }
+                else {
+                    other.push(child);
+                }
+            }
+        });
+        return { svgChildren: svg, htmlChildren: html, otherChildren: other };
+    }, [children]);
     // Memoize metadata to prevent unnecessary re-registration
     const chartMetadata = react.useMemo(() => ({
         thickness,
         clockwise,
     }), [thickness, clockwise]);
     // Register chart with context only if data is valid
-    utils.useChartRegistration(chartId, legendItems, providerTheme, 'pie-semi-circle', isValid, chartMetadata);
+    utils.useChartRegistration({
+        chartId,
+        legendItems,
+        chartType: 'pie-semi-circle',
+        isDataValid: isValid,
+        metadata: chartMetadata,
+    });
     if (!isValid) {
         return (jsxRuntime.jsx("div", { className: pieSemiCircleChart_module.default['pie-semi-circle-chart'], children: jsxRuntime.jsx("svg", { width: width, height: width / 2, "data-testid": "pie-chart-svg", children: jsxRuntime.jsx("text", { x: "50%", y: "50%", textAnchor: "middle", className: pieSemiCircleChart_module.default.error, children: message }) }) }));
     }
@@ -102,19 +171,42 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width = 40
     // Configure pie angles based on clockwise direction
     const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
     const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
-    return (jsxRuntime.jsxs("div", { className: clsx('pie-semi-circle-chart', pieSemiCircleChart_module.default['pie-semi-circle-chart'], className), "data-testid": "pie-chart-container", style: {
-            display: 'flex',
-            flexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',
-        }, children: [jsxRuntime.jsx("svg", { width: width, height: radius, viewBox: `0 0 ${width} ${chartHeight}`, "data-testid": "pie-chart-svg", children: jsxRuntime.jsxs(group.Group, { top: chartHeight, left: width / 2, children: [jsxRuntime.jsx(shape.Pie, { data: dataWithIndex, pieValue: accessors.value, outerRadius: radius, innerRadius: innerRadius, cornerRadius: 3, padAngle: PAD_ANGLE, startAngle: startAngle, endAngle: endAngle, pieSort: accessors.sort, children: pie => {
-                                return pie.arcs.map(arc => (jsxRuntime.jsx("g", { onMouseMove: handleArcMouseMove(arc), onMouseLeave: handleMouseLeave, children: jsxRuntime.jsx("path", { d: pie.path(arc) || '', fill: accessors.fill(arc.data), "data-testid": "pie-segment" }) }, arc.data.label)));
-                            } }), jsxRuntime.jsxs(group.Group, { children: [jsxRuntime.jsx(text.Text, { textAnchor: "middle", verticalAnchor: "start", y: -40, className: pieSemiCircleChart_module.default.label, children: label }), jsxRuntime.jsx(text.Text, { textAnchor: "middle", verticalAnchor: "start", y: -20, className: pieSemiCircleChart_module.default.note, children: note })] })] }) }), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: {
-                    label: tooltipData.label,
-                    value: tooltipData.value,
-                    valueDisplay: tooltipData.valueDisplay,
-                }, top: tooltipTop || 0, left: tooltipLeft || 0 })), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, shape: legendShape, ref: legendRef, chartId: chartId }))] }));
+    return (jsxRuntime.jsx(singleChartContext.SingleChartContext.Provider, { value: {
+            chartId,
+            chartWidth: width,
+            chartHeight: radius,
+        }, children: jsxRuntime.jsxs("div", { className: clsx('pie-semi-circle-chart', pieSemiCircleChart_module.default['pie-semi-circle-chart'], className), "data-testid": "pie-chart-container", style: {
+                display: 'flex',
+                flexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',
+            }, children: [jsxRuntime.jsx("svg", { width: width, height: radius, viewBox: `0 0 ${width} ${chartHeight}`, "data-testid": "pie-chart-svg", children: jsxRuntime.jsxs(group.Group, { top: chartHeight, left: width / 2, children: [jsxRuntime.jsx(shape.Pie, { data: dataWithIndex, pieValue: accessors.value, outerRadius: radius, innerRadius: innerRadius, cornerRadius: 3, padAngle: PAD_ANGLE, startAngle: startAngle, endAngle: endAngle, pieSort: accessors.sort, children: pie => {
+                                    return pie.arcs.map(arc => (jsxRuntime.jsx("g", { onMouseMove: handleArcMouseMove(arc), onMouseLeave: handleMouseLeave, children: jsxRuntime.jsx("path", { d: pie.path(arc) || '', fill: accessors.fill(arc.data), "data-testid": "pie-segment" }) }, arc.data.label)));
+                                } }), jsxRuntime.jsxs(group.Group, { children: [jsxRuntime.jsx(text.Text, { textAnchor: "middle", verticalAnchor: "start", y: -40, className: pieSemiCircleChart_module.default.label, children: label }), jsxRuntime.jsx(text.Text, { textAnchor: "middle", verticalAnchor: "start", y: -20, className: pieSemiCircleChart_module.default.note, children: note })] }), svgChildren] }) }), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: {
+                        label: tooltipData.label,
+                        value: tooltipData.value,
+                        valueDisplay: tooltipData.valueDisplay,
+                    }, top: tooltipTop || 0, left: tooltipLeft || 0 })), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, shape: legendShape, ref: legendRef, chartId: chartId })), htmlChildren, otherChildren] }) }));
+};
+const PieSemiCircleChartWithProvider = props => {
+    const existingContext = react.useContext(globalChartsProvider.GlobalChartsContext);
+    // If we're already in a GlobalChartsProvider context, don't create a new one
+    if (existingContext) {
+        return jsxRuntime.jsx(PieSemiCircleChartInternal, { ...props });
+    }
+    // Otherwise, create our own GlobalChartsProvider
+    return (jsxRuntime.jsx(globalChartsProvider.GlobalChartsProvider, { children: jsxRuntime.jsx(PieSemiCircleChartInternal, { ...props }) }));
 };
-const PieSemiCircleChart = props => (jsxRuntime.jsx(globalChartsProvider.GlobalChartsProvider, { children: jsxRuntime.jsx(PieSemiCircleChartInternal, { ...props }) }));
-PieSemiCircleChart.displayName = 'PieSemiCircleChart';
-var pieSemiCircleChart = withResponsive.withResponsive(PieSemiCircleChart);
+PieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';
+// Create PieSemiCircleChart with composition API
+createComposition.attachSubComponents(PieSemiCircleChartWithProvider, {
+    Legend: legend.Legend,
+    SVG: PieSemiCircleChartSVG,
+    HTML: PieSemiCircleChartHTML,
+});
+// Create responsive PieSemiCircleChart with composition API
+const PieSemiCircleChartResponsive = createComposition.attachSubComponents(withResponsive.withResponsive(PieSemiCircleChartWithProvider), {
+    Legend: legend.Legend,
+    SVG: PieSemiCircleChartSVG,
+    HTML: PieSemiCircleChartHTML,
+});
 
-exports.default = pieSemiCircleChart;
+exports.default = PieSemiCircleChartResponsive;

package/dist/cjs/hooks/use-chart-mouse-handler.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var event = require('@visx/event');
 var tooltip = require('@visx/tooltip');
 var react = require('react');
@@ -45,4 +43,4 @@ const useChartMouseHandler = ({ withTooltips, }) => {
     };
 };
 
-exports.default = useChartMouseHandler;
+exports.useChartMouseHandler = useChartMouseHandler;

package/dist/cjs/hooks/use-deep-memo.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var isEqual = require('fast-deep-equal');
+var react = require('react');
+
+/**
+ * Custom hook to memoize a value using deep equality comparison.
+ * Prevents unnecessary re-renders when objects have the same content but different references.
+ *
+ * @param value - The value to memoize with deep equality comparison
+ * @return The memoized value that only changes when deeply different
+ */
+const useDeepMemo = (value) => {
+    const ref = react.useRef(value);
+    if (!isEqual(ref.current, value)) {
+        ref.current = value;
+    }
+    return ref.current;
+};
+
+exports.useDeepMemo = useDeepMemo;

package/dist/cjs/hooks/use-global-chart-theme.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var react = require('react');
+var globalChartsProvider = require('../providers/chart-context/global-charts-provider.js');
+var themeProvider = require('../providers/theme/theme-provider.js');
+var themes = require('../providers/theme/themes.js');
+var mergeThemes = require('../utils/merge-themes.js');
+
+/**
+ * Hook to get the effective chart theme, merging global and local themes.
+ *
+ * This hook combines the global theme from GlobalChartsProvider with the local theme
+ * from ThemeProvider. The global theme provides the base, while the local theme
+ * can override specific properties for fine-grained customization.
+ *
+ * @return The effective chart theme to use
+ */
+const useGlobalChartTheme = () => {
+    // Get context but don't throw if it doesn't exist (for testing or standalone usage)
+    const context = react.useContext(globalChartsProvider.GlobalChartsContext);
+    const globalTheme = context?.theme;
+    const localTheme = themeProvider.useChartTheme();
+    // Memoize the theme to prevent unnecessary re-renders
+    const effectiveTheme = react.useMemo(() => mergeThemes.mergeThemes(globalTheme ?? themes.defaultTheme, localTheme), [globalTheme, localTheme]);
+    return effectiveTheme;
+};
+
+exports.useGlobalChartTheme = useGlobalChartTheme;

package/dist/cjs/hooks/use-xychart-theme.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var xychart = require('@visx/xychart');
+var react = require('react');
+var useGlobalChartTheme = require('./use-global-chart-theme.js');
+
+const useXYChartTheme = (data) => {
+    const theme = useGlobalChartTheme.useGlobalChartTheme();
+    return react.useMemo(() => {
+        const seriesColors = (data ?? [])
+            .map(series => series.options?.stroke)
+            .filter((color) => Boolean(color));
+        return xychart.buildChartTheme({
+            ...theme,
+            colors: [...seriesColors, ...(theme.colors ?? [])],
+        });
+    }, [theme, data]);
+};
+
+exports.useXYChartTheme = useXYChartTheme;

package/dist/cjs/index.js

@@ -16,7 +16,11 @@ var group = require('@visx/group');
 var legend$1 = require('@visx/legend');
 var themeProvider = require('./providers/theme/theme-provider.js');
 var themes = require('./providers/theme/themes.js');
+var mergeThemes = require('./utils/merge-themes.js');
+var useDeepMemo = require('./hooks/use-deep-memo.js');
+var useGlobalChartTheme = require('./hooks/use-global-chart-theme.js');
 var useChartMouseHandler = require('./hooks/use-chart-mouse-handler.js');
+var useXychartTheme = require('./hooks/use-xychart-theme.js');
 
 
 
@@ -63,4 +67,8 @@ exports.ThemeProvider = themeProvider.ThemeProvider;
 exports.defaultTheme = themes.defaultTheme;
 exports.jetpackTheme = themes.jetpackTheme;
 exports.wooTheme = themes.wooTheme;
-exports.useChartMouseHandler = useChartMouseHandler.default;
+exports.mergeThemes = mergeThemes.mergeThemes;
+exports.useDeepMemo = useDeepMemo.useDeepMemo;
+exports.useGlobalChartTheme = useGlobalChartTheme.useGlobalChartTheme;
+exports.useChartMouseHandler = useChartMouseHandler.useChartMouseHandler;
+exports.useXYChartTheme = useXychartTheme.useXYChartTheme;

package/dist/cjs/providers/chart-context/global-charts-provider.js

@@ -2,10 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var themes = require('../theme/themes.js');
 
 const GlobalChartsContext = react.createContext(null);
-const GlobalChartsProvider = ({ children }) => {
+const GlobalChartsProvider = ({ children, theme = {}, }) => {
     const [charts, setCharts] = react.useState(() => new Map());
+    const providerTheme = react.useMemo(() => ({ ...themes.defaultTheme, ...theme }), [theme]);
     const registerChart = react.useCallback((id, data) => {
         setCharts(prev => new Map(prev).set(id, data));
     }, []);
@@ -24,7 +26,8 @@ const GlobalChartsProvider = ({ children }) => {
         registerChart,
         unregisterChart,
         getChartData,
-    }), [charts, registerChart, unregisterChart, getChartData]);
+        theme: providerTheme,
+    }), [charts, registerChart, unregisterChart, getChartData, providerTheme]);
     return jsxRuntime.jsx(GlobalChartsContext.Provider, { value: value, children: children });
 };
 const useGlobalChartsContext = () => {

package/dist/cjs/providers/chart-context/utils.js

@@ -1,22 +1,29 @@
 'use strict';
 
 var react = require('react');
+var useDeepMemo = require('../../hooks/use-deep-memo.js');
 var globalChartsProvider = require('./global-charts-provider.js');
+require('../theme/theme-provider.js');
+require('deepmerge');
+require('@visx/event');
+require('@visx/tooltip');
+require('@visx/xychart');
 
 const useChartId = (providedId) => {
     const generatedId = react.useId();
     return providedId || generatedId;
 };
-const useChartRegistration = (chartId, legendItems, theme, chartType, isDataValid, metadata) => {
+const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, metadata, }) => {
     const { registerChart, unregisterChart } = globalChartsProvider.useGlobalChartsContext();
+    // Memoize legendItems with deep comparison to prevent infinite loops
+    const stableLegendItems = useDeepMemo.useDeepMemo(legendItems);
     // Memoize metadata to prevent unnecessary re-renders
     const memoizedMetadata = react.useMemo(() => metadata, [metadata]);
     react.useEffect(() => {
         // Only register if data is valid
         if (isDataValid) {
             registerChart(chartId, {
-                legendItems,
-                theme,
+                legendItems: stableLegendItems,
                 chartType,
                 metadata: memoizedMetadata,
             });
@@ -27,8 +34,7 @@ const useChartRegistration = (chartId, legendItems, theme, chartType, isDataVali
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         chartId,
-        legendItems,
-        theme,
+        stableLegendItems,
         chartType,
         memoizedMetadata,
         isDataValid,

package/dist/cjs/providers/theme/index.js

@@ -7,7 +7,6 @@ var themes = require('./themes.js');
 
 exports.ThemeProvider = themeProvider.ThemeProvider;
 exports.useChartTheme = themeProvider.useChartTheme;
-exports.useXYChartTheme = themeProvider.useXYChartTheme;
 exports.defaultTheme = themes.defaultTheme;
 exports.jetpackTheme = themes.jetpackTheme;
 exports.wooTheme = themes.wooTheme;

package/dist/cjs/providers/theme/theme-provider.js

@@ -1,14 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var xychart = require('@visx/xychart');
 var react = require('react');
-var themes = require('./themes.js');
 
 /**
  * Context for sharing theme configuration across components
  */
-const ThemeContext = react.createContext(themes.defaultTheme);
+const ThemeContext = react.createContext({});
 /**
  * Hook to access chart theme
  * @return {object} A built theme configuration compatible with visx charts
@@ -17,25 +15,11 @@ const useChartTheme = () => {
     const theme = react.useContext(ThemeContext);
     return theme;
 };
-const useXYChartTheme = (data) => {
-    const providerTheme = useChartTheme();
-    return react.useMemo(() => {
-        const seriesColors = (data ?? [])
-            .map(series => series.options?.stroke)
-            .filter((color) => Boolean(color));
-        return xychart.buildChartTheme({
-            ...providerTheme,
-            colors: [...seriesColors, ...(providerTheme.colors ?? [])],
-        });
-    }, [providerTheme, data]);
-};
 // Provider component for chart theming
 // Allows theme customization through props while maintaining default values
 const ThemeProvider = ({ theme = {}, children }) => {
-    const mergedTheme = { ...themes.defaultTheme, ...theme };
-    return jsxRuntime.jsx(ThemeContext.Provider, { value: mergedTheme, children: children });
+    return jsxRuntime.jsx(ThemeContext.Provider, { value: theme, children: children });
 };
 
 exports.ThemeProvider = ThemeProvider;
 exports.useChartTheme = useChartTheme;
-exports.useXYChartTheme = useXYChartTheme;

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__Scfzo.legend-module_legend--alignment-start__Na2Qp{align-items:flex-start}.legend-module_legend--vertical__Scfzo.legend-module_legend--alignment-center__FVB2r{align-items:center}.legend-module_legend--vertical__Scfzo.legend-module_legend--alignment-end__6Vuay{align-items:flex-end}.legend-module_legend--position-top__uh7-2{position:relative}.legend-module_legend--position-top__uh7-2.legend-module_legend--alignment-start__Na2Qp{justify-content:flex-start}.legend-module_legend--position-top__uh7-2.legend-module_legend--alignment-center__FVB2r{justify-content:center}.legend-module_legend--position-top__uh7-2.legend-module_legend--alignment-end__6Vuay{justify-content:flex-end}.legend-module_legend--position-bottom__6Q3j-{position:relative}.legend-module_legend--position-bottom__6Q3j-.legend-module_legend--alignment-start__Na2Qp{justify-content:flex-start}.legend-module_legend--position-bottom__6Q3j-.legend-module_legend--alignment-center__FVB2r{justify-content:center}.legend-module_legend--position-bottom__6Q3j-.legend-module_legend--alignment-end__6Vuay{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}
+.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--alignment-start__Na2Qp{align-items:flex-start}.legend-module_legend--vertical__Scfzo.legend-module_legend--alignment-center__FVB2r{align-items:center}.legend-module_legend--vertical__Scfzo.legend-module_legend--alignment-end__6Vuay{align-items:flex-end}.legend-module_legend--position-top__uh7-2{position:relative}.legend-module_legend--position-top__uh7-2.legend-module_legend--alignment-start__Na2Qp{justify-content:flex-start}.legend-module_legend--position-top__uh7-2.legend-module_legend--alignment-center__FVB2r{justify-content:center}.legend-module_legend--position-top__uh7-2.legend-module_legend--alignment-end__6Vuay{justify-content:flex-end}.legend-module_legend--position-bottom__6Q3j-{position:relative}.legend-module_legend--position-bottom__6Q3j-.legend-module_legend--alignment-start__Na2Qp{justify-content:flex-start}.legend-module_legend--position-bottom__6Q3j-.legend-module_legend--alignment-center__FVB2r{justify-content:center}.legend-module_legend--position-bottom__6Q3j-.legend-module_legend--alignment-end__6Vuay{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_progressContainerWithOverlayLabel__YFPY0{align-items:center;display:grid;grid-template:"overlap" 1fr/1fr}.leaderboard-chart-module_progressContainerWithOverlayLabel__YFPY0>*{grid-area:overlap}.leaderboard-chart-module_progressContainerWithOverlayLabel__YFPY0 .leaderboard-chart-module_progressBar__LAQaj{background-color:var(--primary-color,#3858e9);border-radius:var(--bar-border,9999px);height:100%;transition:width .3s ease-in-out;z-index:-1}.leaderboard-chart-module_progressContainerWithOverlayLabel__YFPY0 .leaderboard-chart-module_progressBarLabel__24t-j{padding-left:8px}.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);border-radius:var(--bar-border,9999px)}.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_overlayLabel__pRqSh{align-items:center}.leaderboard-chart-module_emptyState__0dkfy{color:#666;font-size:14px;font-style:italic;padding:32px 16px;text-align:center}

package/dist/cjs/utils/merge-themes.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var deepmerge = require('deepmerge');
+
+/**
+ * Merges chart themes with proper precedence.
+ * The second theme (override) takes precedence over the first theme (base).
+ *
+ * @param baseTheme     - Base theme object
+ * @param overrideTheme - Theme to override base with (takes precedence)
+ * @return Merged theme with overrideTheme values taking precedence
+ */
+function mergeThemes(baseTheme, overrideTheme) {
+    // Use deepmerge to properly merge nested objects, with overrideTheme taking precedence
+    return deepmerge(baseTheme, overrideTheme, {
+        // Ensure arrays are replaced rather than concatenated
+        arrayMerge: (_destinationArray, sourceArray) => sourceArray,
+    });
+}
+
+exports.mergeThemes = mergeThemes;

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

@@ -4,9 +4,13 @@ import { XYChart, Grid, BarGroup, BarSeries, Axis } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useContext, useRef, useState, useCallback, useMemo } from 'react';
+import 'fast-deep-equal';
+import { useGlobalChartTheme } from '../../hooks/use-global-chart-theme.js';
+import '@visx/event';
+import '@visx/tooltip';
+import { useXYChartTheme } from '../../hooks/use-xychart-theme.js';
 import { GlobalChartsContext, GlobalChartsProvider } from '../../providers/chart-context/global-charts-provider.js';
 import { useChartId, useChartRegistration } from '../../providers/chart-context/utils.js';
-import { useChartTheme, useXYChartTheme } from '../../providers/theme/theme-provider.js';
 import { attachSubComponents } from '../../utils/create-composition.js';
 import { Legend } from '../legend/legend.js';
 import '../legend/base-legend.js';
@@ -38,7 +42,7 @@ const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
 const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400, className, margin, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'rect', gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = 'vertical', withPatterns = false, showZeroValues = false, children, }) => {
     const horizontal = orientation === 'horizontal';
     const chartId = useChartId(providedChartId);
-    const providerTheme = useChartTheme();
+    const providerTheme = useGlobalChartTheme();
     const theme = useXYChartTheme(data);
     const dataSorted = useChartDataTransform(data);
     // Transform data to add a small value for zero bars to make them visible
@@ -46,7 +50,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
         enabled: showZeroValues,
     });
     // Create legend items using the reusable hook
-    const legendItems = useChartLegendData(dataSorted, providerTheme);
+    const legendItems = useChartLegendData(dataSorted);
     const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options);
     const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
     const [legendRef, legendHeight] = useElementHeight();
@@ -63,7 +67,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
         chartRef,
         totalPoints,
     });
-    const getColor = useCallback((seriesData, index) => seriesData?.options?.stroke || theme.colors[index % theme.colors.length], [theme]);
+    const getColor = useCallback((seriesData, index) => seriesData?.options?.stroke || providerTheme.colors[index % providerTheme.colors.length], [providerTheme]);
     const getBarBackground = useCallback((index) => () => withPatterns
         ? `url(#${getPatternId(chartId, index)})`
         : getColor(dataSorted[index], index), [withPatterns, getColor, dataSorted, chartId]);
@@ -142,7 +146,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
         withPatterns,
     }), [orientation, withPatterns]);
     // Register chart with context only if data is valid
-    useChartRegistration(chartId, legendItems, providerTheme, 'bar', isDataValid, chartMetadata);
+    useChartRegistration({
+        chartId,
+        legendItems,
+        chartType: 'bar',
+        isDataValid,
+        metadata: chartMetadata,
+    });
     if (error) {
         return jsx("div", { className: clsx('bar-chart', styles['bar-chart']), children: error });
     }

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

@@ -1,9 +1,13 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { __experimentalGrid, __experimentalVStack, __experimentalText, ProgressBar } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import clsx from 'clsx';
 import 'react';
-import { useChartTheme } from '../../providers/theme/theme-provider.js';
+import 'fast-deep-equal';
+import { useGlobalChartTheme } from '../../hooks/use-global-chart-theme.js';
+import '@visx/event';
+import '@visx/tooltip';
+import '@visx/xychart';
 import { formatMetricValue } from '../shared/format-metric-value.js';
 import styles from './leaderboard-chart.module.scss.js';
 
@@ -42,24 +46,27 @@ const defaultDeltaFormatter = (value) => {
         signDisplay: 'exceptZero',
     });
 };
+const ProgressBarWithOverlayLabel = ({ entry }) => (jsxs("div", { className: styles.progressContainerWithOverlayLabel, children: [typeof entry.label === 'string' ? (jsx(__experimentalText, { className: styles.progressBarLabel, children: entry.label })) : (entry.label), jsx("div", { className: styles.progressBar, style: { width: entry.currentShare + '%' } })] }));
+const ProgressBarWithLabel = ({ entry, withComparison, }) => (jsxs(Fragment$1, { children: [typeof entry.label === 'string' ? jsx(__experimentalText, { children: entry.label }) : entry.label, jsxs("div", { className: styles.progressContainer, children: [jsx(ProgressBar, { value: entry.currentShare, className: clsx(styles.progressBar, styles.primaryBar) }), withComparison && (jsx(ProgressBar, { value: entry.previousShare, className: clsx(styles.progressBar, styles.secondaryBar) }))] })] }));
 /**
  * LeaderboardChart component displays a ranked list of data with progress bars
  * and optional comparison values.
  *
- * @param props                - Component props
- * @param props.data           - Array of leaderboard entries to display
- * @param props.withComparison - Whether to show comparison data
- * @param props.primaryColor   - Primary color for current period bars
- * @param props.secondaryColor - Secondary color for comparison period bars
- * @param props.valueFormatter - Custom formatter for values
- * @param props.deltaFormatter - Custom formatter for delta values
- * @param props.loading        - Whether the chart is in loading state
- * @param props.className      - Additional CSS class name
- * @param props.style          - Custom styling for the chart container
+ * @param props                  - Component props
+ * @param props.data             - Array of leaderboard entries to display
+ * @param props.withComparison   - Whether to show comparison data
+ * @param props.withOverlayLabel - Whether to overlay the label on top of the bar
+ * @param props.primaryColor     - Primary color for current period bars
+ * @param props.secondaryColor   - Secondary color for comparison period bars
+ * @param props.valueFormatter   - Custom formatter for values
+ * @param props.deltaFormatter   - Custom formatter for delta values
+ * @param props.loading          - Whether the chart is in loading state
+ * @param props.className        - Additional CSS class name
+ * @param props.style            - Custom styling for the chart container
  * @return JSX element representing the leaderboard chart
  */
-const LeaderboardChart = ({ data, withComparison = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, loading = false, className, style, }) => {
-    const theme = useChartTheme();
+const LeaderboardChart = ({ data, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, loading = false, className, style, }) => {
+    const theme = useGlobalChartTheme();
     // Get component settings from theme with fallbacks
     const leaderboardSettings = theme.leaderboardChart;
     const labelSpacing = leaderboardSettings?.labelSpacing ?? DEFAULT_LEADERBOARD_SETTINGS.labelSpacing;
@@ -84,7 +91,9 @@ const LeaderboardChart = ({ data, withComparison = false, primaryColor, secondar
     return (jsx(__experimentalGrid, { className: clsx(styles.leaderboardChart, loading && styles.loading, className), templateColumns: "minmax(0, 1fr) auto", rowGap: rowGap, columnGap: columnGap, style: chartStyle, children: data.map(entry => {
             const colorIndex = Math.sign(entry.delta) + 1;
             const deltaColor = signColors[colorIndex];
-            return (jsxs(Fragment, { children: [jsxs(__experimentalVStack, { spacing: labelSpacing, children: [jsx(__experimentalText, { children: entry.label }), jsxs("div", { className: styles.progressContainer, children: [jsx(ProgressBar, { value: entry.currentShare, className: clsx(styles.progressBar, styles.primaryBar) }), withComparison && (jsx(ProgressBar, { value: entry.previousShare, className: clsx(styles.progressBar, styles.secondaryBar) }))] })] }), jsxs("div", { className: styles.valueContainer, children: [jsx(__experimentalText, { children: valueFormatter(entry.currentValue) }), withComparison && (jsx(__experimentalText, { style: { color: deltaColor }, children: deltaFormatter(entry.delta) }))] })] }, entry.id));
+            return (jsxs(Fragment, { children: [jsx(__experimentalVStack, { spacing: labelSpacing, children: withOverlayLabel ? (jsx(ProgressBarWithOverlayLabel, { entry: entry })) : (jsx(ProgressBarWithLabel, { entry: entry, withComparison: withComparison })) }), jsxs("div", { className: clsx(styles.valueContainer, {
+                            [styles.overlayLabel]: withOverlayLabel,
+                        }), children: [jsx(__experimentalText, { children: valueFormatter(entry.currentValue) }), withComparison && (jsx(__experimentalText, { style: { color: deltaColor }, children: deltaFormatter(entry.delta) }))] })] }, entry.id));
         }) }));
 };
 

package/dist/mjs/components/leaderboard-chart/leaderboard-chart.module.scss.js

@@ -1,3 +1,3 @@
-var styles = {"leaderboardChart":"leaderboard-chart-module_leaderboardChart__zxakP","loading":"leaderboard-chart-module_loading__-AGv-","progressContainer":"leaderboard-chart-module_progressContainer__BZGbj","progressBar":"leaderboard-chart-module_progressBar__LAQaj","primaryBar":"leaderboard-chart-module_primaryBar__iybII","secondaryBar":"leaderboard-chart-module_secondaryBar__A7tLz","valueContainer":"leaderboard-chart-module_valueContainer__ZlLh4","emptyState":"leaderboard-chart-module_emptyState__0dkfy"};
+var styles = {"leaderboardChart":"leaderboard-chart-module_leaderboardChart__zxakP","loading":"leaderboard-chart-module_loading__-AGv-","progressContainerWithOverlayLabel":"leaderboard-chart-module_progressContainerWithOverlayLabel__YFPY0","progressBar":"leaderboard-chart-module_progressBar__LAQaj","progressBarLabel":"leaderboard-chart-module_progressBarLabel__24t-j","progressContainer":"leaderboard-chart-module_progressContainer__BZGbj","primaryBar":"leaderboard-chart-module_primaryBar__iybII","secondaryBar":"leaderboard-chart-module_secondaryBar__A7tLz","valueContainer":"leaderboard-chart-module_valueContainer__ZlLh4","overlayLabel":"leaderboard-chart-module_overlayLabel__pRqSh","emptyState":"leaderboard-chart-module_emptyState__0dkfy"};
 
 export { styles as default };

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

@@ -4,7 +4,11 @@ import { LegendOrdinal, LegendItem, LegendShape, LegendLabel } from '@visx/legen
 import { scaleOrdinal } from '@visx/scale';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
-import { useChartTheme } from '../../providers/theme/theme-provider.js';
+import 'fast-deep-equal';
+import { useGlobalChartTheme } from '../../hooks/use-global-chart-theme.js';
+import '@visx/event';
+import '@visx/tooltip';
+import '@visx/xychart';
 import styles from './legend.module.scss.js';
 import { valueOrIdentityString, valueOrIdentity, labelTransformFactory } from './utils.js';
 
@@ -18,7 +22,7 @@ const orientationToFlexDirection = {
  */
 const BaseLegend = forwardRef(({ items, className, orientation = 'horizontal', position = 'bottom', alignment = 'center', 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 theme = useGlobalChartTheme();
     const legendScale = scaleOrdinal({
         domain: items.map(item => item.label),
         range: items.map(item => item.color),