@automattic/charts 0.27.0 → 0.29.0

package/CHANGELOG.md

@@ -5,6 +5,15 @@ 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.29.0] - 2025-08-25
+### Changed
+- Charts: consolidate and clean up pie chart composition api. [#44856]
+
+## [0.28.0] - 2025-08-21
+### Added
+- Charts: adds composition legend to pie family charts [#44796]
+- Charts: Add theme to global context and use instead of that from theme provider [#44809]
+
 ## [0.27.0] - 2025-08-18
 ### Added
 - Add support for custom labels in the leaderboard chart for greater flexibility. [#44751]
@@ -375,6 +384,8 @@ 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.29.0]: https://github.com/Automattic/charts/compare/v0.28.0...v0.29.0
+[0.28.0]: https://github.com/Automattic/charts/compare/v0.27.0...v0.28.0
 [0.27.0]: https://github.com/Automattic/charts/compare/v0.26.0...v0.27.0
 [0.26.0]: https://github.com/Automattic/charts/compare/v0.25.0...v0.26.0
 [0.25.0]: https://github.com/Automattic/charts/compare/v0.24.0...v0.25.0

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

@@ -8,9 +8,13 @@ var xychart = require('@visx/xychart');
 var i18n = require('@wordpress/i18n');
 var clsx = require('clsx');
 var react = require('react');
+require('fast-deep-equal');
+var useGlobalChartTheme = require('../../hooks/use-global-chart-theme.js');
+require('@visx/event');
+require('@visx/tooltip');
+var useXychartTheme = require('../../hooks/use-xychart-theme.js');
 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');
@@ -42,15 +46,15 @@ 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 = utils.useChartId(providedChartId);
-    const providerTheme = themeProvider.useChartTheme();
-    const theme = themeProvider.useXYChartTheme(data);
+    const providerTheme = useGlobalChartTheme.useGlobalChartTheme();
+    const theme = useXychartTheme.useXYChartTheme(data);
     const dataSorted = useChartDataTransform.useChartDataTransform(data);
     // Transform data to add a small value for zero bars to make them visible
     const dataWithVisibleZeros = useZeroValueDisplay.useZeroValueDisplay(dataSorted, {
         enabled: showZeroValues,
     });
     // Create legend items using the reusable hook
-    const legendItems = useChartLegendData.useChartLegendData(dataSorted, providerTheme);
+    const legendItems = useChartLegendData.useChartLegendData(dataSorted);
     const chartOptions = useBarChartOptions.useBarChartOptions(dataWithVisibleZeros, horizontal, options);
     const defaultMargin = useChartMargin.useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
@@ -67,7 +71,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
         chartRef,
         totalPoints,
     });
-    const getColor = react.useCallback((seriesData, index) => seriesData?.options?.stroke || theme.colors[index % theme.colors.length], [theme]);
+    const getColor = react.useCallback((seriesData, index) => seriesData?.options?.stroke || providerTheme.colors[index % providerTheme.colors.length], [providerTheme]);
     const getBarBackground = react.useCallback((index) => () => withPatterns
         ? `url(#${getPatternId(chartId, index)})`
         : getColor(dataSorted[index], index), [withPatterns, getColor, dataSorted, chartId]);
@@ -146,7 +150,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
         withPatterns,
     }), [orientation, withPatterns]);
     // Register chart with context only if data is valid
-    utils.useChartRegistration(chartId, legendItems, providerTheme, 'bar', isDataValid, chartMetadata);
+    utils.useChartRegistration({
+        chartId,
+        legendItems,
+        chartType: 'bar',
+        isDataValid,
+        metadata: chartMetadata,
+    });
     if (error) {
         return jsxRuntime.jsx("div", { className: clsx('bar-chart', barChart_module.default['bar-chart']), children: error });
     }

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

@@ -7,7 +7,11 @@ var components = require('@wordpress/components');
 var element = require('@wordpress/element');
 var clsx = require('clsx');
 require('react');
-var themeProvider = require('../../providers/theme/theme-provider.js');
+require('fast-deep-equal');
+var useGlobalChartTheme = require('../../hooks/use-global-chart-theme.js');
+require('@visx/event');
+require('@visx/tooltip');
+require('@visx/xychart');
 var formatMetricValue = require('../shared/format-metric-value.js');
 var leaderboardChart_module = require('./leaderboard-chart.module.scss.js');
 
@@ -66,7 +70,7 @@ const ProgressBarWithLabel = ({ entry, withComparison, }) => (jsxRuntime.jsxs(js
  * @return JSX element representing the leaderboard chart
  */
 const LeaderboardChart = ({ data, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, loading = false, className, style, }) => {
-    const theme = themeProvider.useChartTheme();
+    const theme = useGlobalChartTheme.useGlobalChartTheme();
     // Get component settings from theme with fallbacks
     const leaderboardSettings = theme.leaderboardChart;
     const labelSpacing = leaderboardSettings?.labelSpacing ?? DEFAULT_LEADERBOARD_SETTINGS.labelSpacing;

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

@@ -6,7 +6,11 @@ var legend = require('@visx/legend');
 var scale = require('@visx/scale');
 var clsx = require('clsx');
 var react = require('react');
-var themeProvider = require('../../providers/theme/theme-provider.js');
+require('fast-deep-equal');
+var useGlobalChartTheme = require('../../hooks/use-global-chart-theme.js');
+require('@visx/event');
+require('@visx/tooltip');
+require('@visx/xychart');
 var legend_module = require('./legend.module.scss.js');
 var utils = require('./utils.js');
 
@@ -20,7 +24,7 @@ const orientationToFlexDirection = {
  */
 const BaseLegend = react.forwardRef(({ items, className, orientation = 'horizontal', position = 'bottom', alignment = 'center', 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 theme = useGlobalChartTheme.useGlobalChartTheme();
     const legendScale = scale.scaleOrdinal({
         domain: items.map(item => item.label),
         range: items.map(item => item.color),

package/dist/cjs/components/legend/use-chart-legend-data.js

@@ -2,6 +2,10 @@
 
 require('@visx/xychart');
 var react = require('react');
+require('fast-deep-equal');
+var useGlobalChartTheme = require('../../hooks/use-global-chart-theme.js');
+require('@visx/event');
+require('@visx/tooltip');
 var getStyles = require('../../utils/get-styles.js');
 
 /**
@@ -92,13 +96,13 @@ function processPointData(pointData, theme, showValues, withGlyph, glyphSize, re
 /**
  * Hook to transform chart data into legend items
  * @param data        - The chart data to transform
- * @param theme       - The chart theme for colors
  * @param options     - Configuration options for legend generation
  * @param legendShape - The shape type for legend items (string literal or React component)
  * @return Array of legend items ready for display
  */
-function useChartLegendData(data, theme, options = {}, legendShape) {
+function useChartLegendData(data, options = {}, legendShape) {
     const { showValues = false, withGlyph = false, glyphSize = 8, renderGlyph } = options;
+    const theme = useGlobalChartTheme.useGlobalChartTheme();
     return react.useMemo(() => {
         if (!data || !Array.isArray(data) || data.length === 0) {
             return [];

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

@@ -5,9 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var annotation = require('@visx/annotation');
 var xychart = require('@visx/xychart');
-var merge = require('deepmerge');
+var deepmerge = require('deepmerge');
 var react = require('react');
-var themeProvider = require('../../providers/theme/theme-provider.js');
+require('fast-deep-equal');
+var useGlobalChartTheme = require('../../hooks/use-global-chart-theme.js');
+require('@visx/event');
+require('@visx/tooltip');
 var utils = require('../shared/utils.js');
 var lineChartAnnotationLabelPopover = require('./line-chart-annotation-label-popover.js');
 
@@ -91,12 +94,12 @@ const getVerticalAnchor = (subjectType, isFlippedVertically, y, yMax, height) =>
     return undefined;
 };
 const LineChartAnnotation = ({ datum, title, subtitle, subjectType = 'circle', styles: datumStyles, testId, renderLabel, renderLabelPopover, }) => {
-    const providerTheme = themeProvider.useChartTheme();
+    const providerTheme = useGlobalChartTheme.useGlobalChartTheme();
     const { xScale, yScale } = react.useContext(xychart.DataContext) || {};
     const labelRef = react.useRef(null);
     const [height, setHeight] = react.useState(null);
     // Deep merge styles to preserve nested object properties
-    const styles = merge(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
+    const styles = deepmerge(providerTheme.annotationStyles ?? {}, datumStyles ?? {});
     // Measure the label height once after initial render
     react.useEffect(() => {
         if (labelRef.current?.getBBox) {

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

@@ -10,9 +10,13 @@ var gradient = require('@visx/gradient');
 var xychart = require('@visx/xychart');
 var i18n = require('@wordpress/i18n');
 var clsx = require('clsx');
+require('fast-deep-equal');
+var useGlobalChartTheme = require('../../hooks/use-global-chart-theme.js');
+require('@visx/event');
+require('@visx/tooltip');
+var useXychartTheme = require('../../hooks/use-xychart-theme.js');
 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 getStyles = require('../../utils/get-styles.js');
 var legend = require('../legend/legend.js');
@@ -137,8 +141,8 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
     return null; // This component only provides the ref interface
 };
 const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legendOrientation = 'horizontal', legendAlignment = 'center', legendPosition = '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 providerTheme = useGlobalChartTheme.useGlobalChartTheme();
+    const theme = useXychartTheme.useXYChartTheme(data);
     const chartId = utils.useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
     const chartRef = react.useRef(null);
@@ -206,7 +210,7 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
         renderGlyph,
     }), [withLegendGlyph, glyphStyle?.radius, renderGlyph]);
     // Create legend items using the reusable hook
-    const legendItems = useChartLegendData.useChartLegendData(dataSorted, providerTheme, legendOptions, legendShape);
+    const legendItems = useChartLegendData.useChartLegendData(dataSorted, legendOptions, legendShape);
     // Memoize metadata to prevent unnecessary re-registration
     const chartMetadata = react.useMemo(() => ({
         withGradientFill,
@@ -216,7 +220,13 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
         withLegendGlyph,
     }), [withGradientFill, smoothing, curveType, withStartGlyphs, withLegendGlyph]);
     // Register chart with context only if data is valid
-    utils.useChartRegistration(chartId, legendItems, providerTheme, 'line', isDataValid, chartMetadata);
+    utils.useChartRegistration({
+        chartId,
+        legendItems,
+        chartType: 'line',
+        isDataValid,
+        metadata: chartMetadata,
+    });
     const accessors = {
         xAccessor: (d) => d?.date,
         yAccessor: (d) => d?.value,
@@ -250,7 +260,7 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
                                     stroke,
                                     ...lineStyles,
                                 };
-                                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
+                                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: providerTheme.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, alignment: legendAlignment, position: legendPosition, className: lineChart_module.default['line-chart-legend'], shape: legendShape, chartId: chartId, ref: legendRef })), children] }) }));

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

@@ -5,3 +5,4 @@ var pieChart = require('./pie-chart.js');
 
 
 exports.PieChart = pieChart.default;
+exports.PieChartUnresponsive = pieChart.PieChartUnresponsive;

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

@@ -7,14 +7,20 @@ var group = require('@visx/group');
 var shape = require('@visx/shape');
 var clsx = require('clsx');
 var react = require('react');
+require('fast-deep-equal');
+var useGlobalChartTheme = require('../../hooks/use-global-chart-theme.js');
 var useChartMouseHandler = require('../../hooks/use-chart-mouse-handler.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 themes = require('../../providers/theme/themes.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 chartSvg = require('../shared/chart-composition/chart-svg.js');
+var chartHtml = require('../shared/chart-composition/chart-html.js');
+var useChartChildren = require('../shared/chart-composition/use-chart-children.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');
@@ -49,17 +55,19 @@ const validateData = (data) => {
  * @return {JSX.Element} The rendered chart component
  */
 const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false, className, showLegend = false, legendOrientation = 'horizontal', legendPosition = 'bottom', legendAlignment = 'center', legendShape = 'circle', size, thickness = 1, padding = 20, gapScale = 0, cornerScale = 0, children = null, }) => {
-    const providerTheme = themeProvider.useChartTheme();
+    const providerTheme = useGlobalChartTheme.useGlobalChartTheme();
     const chartId = utils.useChartId(providedChartId);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
-    const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } = useChartMouseHandler.default({
+    const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } = useChartMouseHandler.useChartMouseHandler({
         withTooltips,
     });
     // 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);
     const { isValid, message } = validateData(data);
+    // Process children to extract compound components
+    const { svgChildren, htmlChildren, otherChildren } = useChartChildren.useChartChildren(children, 'PieChart');
     // Memoize metadata to prevent unnecessary re-registration
     const chartMetadata = react.useMemo(() => ({
         thickness,
@@ -67,7 +75,13 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
         cornerScale,
     }), [thickness, gapScale, cornerScale]);
     // Register chart with context only if data is valid
-    utils.useChartRegistration(chartId, legendItems, providerTheme, 'pie', isValid, chartMetadata);
+    utils.useChartRegistration({
+        chartId,
+        legendItems,
+        chartType: 'pie',
+        isDataValid: isValid,
+        metadata: chartMetadata,
+    });
     if (!isValid) {
         return (jsxRuntime.jsx("div", { className: clsx('pie-chart', pieChart_module.default['pie-chart'], className), children: jsxRuntime.jsx("div", { className: pieChart_module.default['error-message'], children: message }) }));
     }
@@ -95,29 +109,33 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
         // 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],
     };
-    return (jsxRuntime.jsxs("div", { className: clsx('pie-chart', pieChart_module.default['pie-chart'], className), style: {
-            display: 'flex',
-            flexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',
-        }, children: [jsxRuntime.jsx("svg", { viewBox: `0 0 ${size} ${adjustedHeight}`, preserveAspectRatio: "xMidYMid meet", width: size, height: adjustedHeight, children: jsxRuntime.jsxs(group.Group, { top: centerY, left: centerX, children: [jsxRuntime.jsx(shape.Pie, { data: dataWithIndex, pieValue: accessors.value, outerRadius: outerRadius, innerRadius: innerRadius, padAngle: padAngle, cornerRadius: cornerRadius, children: pie => {
-                                return pie.arcs.map((arc, index) => {
-                                    const [centroidX, centroidY] = pie.path.centroid(arc);
-                                    const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
-                                    const handleMouseMove = (event) => onMouseMove(event, arc.data);
-                                    const pathProps = {
-                                        d: pie.path(arc) || '',
-                                        fill: accessors.fill(arc.data),
-                                    };
-                                    if (withTooltips) {
-                                        pathProps.onMouseMove = handleMouseMove;
-                                        pathProps.onMouseLeave = onMouseLeave;
-                                    }
-                                    return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { ...pathProps }), hasSpaceForLabel && (jsxRuntime.jsx("text", { x: centroidX, y: centroidY, dy: ".33em", fill: providerTheme.labelBackgroundColor || themes.defaultTheme.labelBackgroundColor, fontSize: 12, textAnchor: "middle", pointerEvents: "none", children: arc.data.label }))] }, `arc-${index}`));
-                                });
-                            } }), children] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, className: pieChart_module.default['pie-chart-legend'], shape: legendShape, ref: legendRef, chartId: chartId })), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: tooltipData, top: tooltipTop || 0, left: tooltipLeft || 0, style: {
-                    transform: 'translate(-50%, -100%)',
-                } }))] }));
+    return (jsxRuntime.jsx(singleChartContext.SingleChartContext.Provider, { value: {
+            chartId,
+            chartWidth: size,
+            chartHeight: adjustedHeight,
+        }, children: jsxRuntime.jsxs("div", { className: clsx('pie-chart', pieChart_module.default['pie-chart'], className), style: {
+                display: 'flex',
+                flexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',
+            }, children: [jsxRuntime.jsx("svg", { viewBox: `0 0 ${size} ${adjustedHeight}`, preserveAspectRatio: "xMidYMid meet", width: size, height: adjustedHeight, children: jsxRuntime.jsxs(group.Group, { top: centerY, left: centerX, children: [jsxRuntime.jsx(shape.Pie, { data: dataWithIndex, pieValue: accessors.value, outerRadius: outerRadius, innerRadius: innerRadius, padAngle: padAngle, cornerRadius: cornerRadius, children: pie => {
+                                    return pie.arcs.map((arc, index) => {
+                                        const [centroidX, centroidY] = pie.path.centroid(arc);
+                                        const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
+                                        const handleMouseMove = (event) => onMouseMove(event, arc.data);
+                                        const pathProps = {
+                                            d: pie.path(arc) || '',
+                                            fill: accessors.fill(arc.data),
+                                        };
+                                        if (withTooltips) {
+                                            pathProps.onMouseMove = handleMouseMove;
+                                            pathProps.onMouseLeave = onMouseLeave;
+                                        }
+                                        return (jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { ...pathProps }), hasSpaceForLabel && (jsxRuntime.jsx("text", { x: centroidX, y: centroidY, dy: ".33em", fill: providerTheme.labelBackgroundColor || '#333', fontSize: 12, textAnchor: "middle", pointerEvents: "none", children: arc.data.label }))] }, `arc-${index}`));
+                                    });
+                                } }), svgChildren] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, position: legendPosition, alignment: legendAlignment, className: pieChart_module.default['pie-chart-legend'], shape: legendShape, ref: legendRef, chartId: chartId })), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: tooltipData, top: tooltipTop || 0, left: tooltipLeft || 0, style: {
+                        transform: 'translate(-50%, -100%)',
+                    } })), htmlChildren, otherChildren] }) }));
 };
-const PieChart = (props) => {
+const PieChartWithProvider = props => {
     const existingContext = react.useContext(globalChartsProvider.GlobalChartsContext);
     // If we're already in a GlobalChartsProvider context, don't create a new one
     if (existingContext) {
@@ -126,7 +144,19 @@ const PieChart = (props) => {
     // Otherwise, create our own GlobalChartsProvider
     return (jsxRuntime.jsx(globalChartsProvider.GlobalChartsProvider, { children: jsxRuntime.jsx(PieChartInternal, { ...props }) }));
 };
-PieChart.displayName = 'PieChart';
-var pieChart = withResponsive.withResponsive(PieChart);
+PieChartWithProvider.displayName = 'PieChart';
+// Create PieChart with composition API
+const PieChart = createComposition.attachSubComponents(PieChartWithProvider, {
+    Legend: legend.Legend,
+    SVG: chartSvg.ChartSVG,
+    HTML: chartHtml.ChartHTML,
+});
+// Create responsive PieChart with composition API
+const PieChartResponsive = createComposition.attachSubComponents(withResponsive.withResponsive(PieChartWithProvider), {
+    Legend: legend.Legend,
+    SVG: chartSvg.ChartSVG,
+    HTML: chartHtml.ChartHTML,
+});
 
-exports.default = pieChart;
+exports.PieChartUnresponsive = PieChart;
+exports.default = PieChartResponsive;

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

@@ -10,12 +10,19 @@ 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 chartSvg = require('../shared/chart-composition/chart-svg.js');
+var chartHtml = require('../shared/chart-composition/chart-html.js');
+var useChartChildren = require('../shared/chart-composition/use-chart-children.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 +50,8 @@ 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();
+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 +83,22 @@ 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 } = useChartChildren.useChartChildren(children, 'PieSemiCircleChart');
     // 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 +117,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 PieSemiCircleChart = props => (jsxRuntime.jsx(globalChartsProvider.GlobalChartsProvider, { children: jsxRuntime.jsx(PieSemiCircleChartInternal, { ...props }) }));
-PieSemiCircleChart.displayName = 'PieSemiCircleChart';
-var pieSemiCircleChart = withResponsive.withResponsive(PieSemiCircleChart);
+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 }) }));
+};
+PieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';
+// Create PieSemiCircleChart with composition API
+createComposition.attachSubComponents(PieSemiCircleChartWithProvider, {
+    Legend: legend.Legend,
+    SVG: chartSvg.ChartSVG,
+    HTML: chartHtml.ChartHTML,
+});
+// Create responsive PieSemiCircleChart with composition API
+const PieSemiCircleChartResponsive = createComposition.attachSubComponents(withResponsive.withResponsive(PieSemiCircleChartWithProvider), {
+    Legend: legend.Legend,
+    SVG: chartSvg.ChartSVG,
+    HTML: chartHtml.ChartHTML,
+});
 
-exports.default = pieSemiCircleChart;
+exports.default = PieSemiCircleChartResponsive;

package/dist/cjs/components/shared/chart-composition/chart-html.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Compound component for HTML children in charts.
+ * This component serves as a marker for HTML content that should be rendered
+ * outside the chart's SVG element. The actual rendering is handled by the parent chart.
+ *
+ * @param {PropsWithChildren} props          - Component props
+ * @param {ReactNode}         props.children - Child elements to render outside the SVG
+ * @return {JSX.Element} The children wrapped in a fragment
+ */
+const ChartHTML = ({ children }) => {
+    // This component doesn't render directly - its children are extracted by the parent chart
+    // We just return the children as-is
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+// Set displayName for better debugging and type checking
+ChartHTML.displayName = 'Chart.HTML';
+
+exports.ChartHTML = ChartHTML;

package/dist/cjs/components/shared/chart-composition/chart-svg.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Compound component for SVG children in charts.
+ * This component serves as a marker for SVG content that should be rendered
+ * inside the chart's SVG element. The actual rendering is handled by the parent chart.
+ *
+ * @param {PropsWithChildren} props          - Component props
+ * @param {ReactNode}         props.children - Child elements to render inside the SVG
+ * @return {JSX.Element} The children wrapped in a fragment
+ */
+const ChartSVG = ({ children }) => {
+    // This component doesn't render directly - its children are extracted by the parent chart
+    // We just return the children as-is
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+// Set displayName for better debugging and type checking
+ChartSVG.displayName = 'Chart.SVG';
+
+exports.ChartSVG = ChartSVG;

package/dist/cjs/components/shared/chart-composition/use-chart-children.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var group = require('@visx/group');
+var react = require('react');
+
+/**
+ * Custom hook to process and categorize chart children for composition API.
+ * Extracts children from compound components (Chart.SVG, Chart.HTML) and
+ * maintains backward compatibility with legacy Group components.
+ *
+ * @param {ReactNode} children  - The children prop from the chart component
+ * @param {string}    chartType - The type of chart (e.g., 'PieChart', 'BarChart')
+ * @return {ChartChildren} Categorized children for rendering
+ */
+function useChartChildren(children, chartType) {
+    return 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;
+                // Handle chart-specific compound components (e.g., PieChart.SVG)
+                if (displayName === `${chartType}.SVG` || displayName === 'Chart.SVG') {
+                    // Extract children from Chart.SVG with safety checks
+                    if (child.props?.children) {
+                        react.Children.forEach(child.props.children, svgChild => {
+                            svg.push(svgChild);
+                        });
+                    }
+                }
+                else if (displayName === `${chartType}.HTML` || displayName === 'Chart.HTML') {
+                    // Extract children from Chart.HTML with safety checks
+                    if (child.props?.children) {
+                        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, chartType]);
+}
+
+exports.useChartChildren = useChartChildren;