@automattic/charts 0.26.0 → 0.28.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.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]
+
 ## [0.26.0] - 2025-08-14
 ### Added
 - Bar Chart: Add composition API. [#44771]
@@ -371,6 +380,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.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
 [0.24.0]: https://github.com/Automattic/charts/compare/v0.23.1...v0.24.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');
 
@@ -46,24 +50,27 @@ const defaultDeltaFormatter = (value) => {
         signDisplay: 'exceptZero',
     });
 };
+const ProgressBarWithOverlayLabel = ({ entry }) => (jsxRuntime.jsxs("div", { className: leaderboardChart_module.default.progressContainerWithOverlayLabel, children: [typeof entry.label === 'string' ? (jsxRuntime.jsx(components.__experimentalText, { className: leaderboardChart_module.default.progressBarLabel, children: entry.label })) : (entry.label), jsxRuntime.jsx("div", { className: leaderboardChart_module.default.progressBar, style: { width: entry.currentShare + '%' } })] }));
+const ProgressBarWithLabel = ({ entry, withComparison, }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [typeof entry.label === 'string' ? jsxRuntime.jsx(components.__experimentalText, { children: entry.label }) : entry.label, jsxRuntime.jsxs("div", { className: leaderboardChart_module.default.progressContainer, children: [jsxRuntime.jsx(components.ProgressBar, { value: entry.currentShare, className: clsx(leaderboardChart_module.default.progressBar, leaderboardChart_module.default.primaryBar) }), withComparison && (jsxRuntime.jsx(components.ProgressBar, { value: entry.previousShare, className: clsx(leaderboardChart_module.default.progressBar, leaderboardChart_module.default.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 = themeProvider.useChartTheme();
+const LeaderboardChart = ({ data, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, loading = false, className, style, }) => {
+    const theme = useGlobalChartTheme.useGlobalChartTheme();
     // Get component settings from theme with fallbacks
     const leaderboardSettings = theme.leaderboardChart;
     const labelSpacing = leaderboardSettings?.labelSpacing ?? DEFAULT_LEADERBOARD_SETTINGS.labelSpacing;
@@ -88,7 +95,9 @@ const LeaderboardChart = ({ data, withComparison = false, primaryColor, secondar
     return (jsxRuntime.jsx(components.__experimentalGrid, { className: clsx(leaderboardChart_module.default.leaderboardChart, loading && leaderboardChart_module.default.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 (jsxRuntime.jsxs(element.Fragment, { children: [jsxRuntime.jsxs(components.__experimentalVStack, { spacing: labelSpacing, children: [jsxRuntime.jsx(components.__experimentalText, { children: entry.label }), jsxRuntime.jsxs("div", { className: leaderboardChart_module.default.progressContainer, children: [jsxRuntime.jsx(components.ProgressBar, { value: entry.currentShare, className: clsx(leaderboardChart_module.default.progressBar, leaderboardChart_module.default.primaryBar) }), withComparison && (jsxRuntime.jsx(components.ProgressBar, { value: entry.previousShare, className: clsx(leaderboardChart_module.default.progressBar, leaderboardChart_module.default.secondaryBar) }))] })] }), jsxRuntime.jsxs("div", { className: leaderboardChart_module.default.valueContainer, children: [jsxRuntime.jsx(components.__experimentalText, { children: valueFormatter(entry.currentValue) }), withComparison && (jsxRuntime.jsx(components.__experimentalText, { style: { color: deltaColor }, children: deltaFormatter(entry.delta) }))] })] }, entry.id));
+            return (jsxRuntime.jsxs(element.Fragment, { children: [jsxRuntime.jsx(components.__experimentalVStack, { spacing: labelSpacing, children: withOverlayLabel ? (jsxRuntime.jsx(ProgressBarWithOverlayLabel, { entry: entry })) : (jsxRuntime.jsx(ProgressBarWithLabel, { entry: entry, withComparison: withComparison })) }), jsxRuntime.jsxs("div", { className: clsx(leaderboardChart_module.default.valueContainer, {
+                            [leaderboardChart_module.default.overlayLabel]: withOverlayLabel,
+                        }), children: [jsxRuntime.jsx(components.__experimentalText, { children: valueFormatter(entry.currentValue) }), withComparison && (jsxRuntime.jsx(components.__experimentalText, { style: { color: deltaColor }, children: deltaFormatter(entry.delta) }))] })] }, entry.id));
         }) }));
 };
 

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

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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"};
 
 exports.default = styles;

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,17 @@ 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 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');
@@ -42,6 +45,32 @@ const validateData = (data) => {
     }
     return { isValid: true, message: '' };
 };
+/**
+ * Compound component for SVG children in the PieChart
+ * @param {PropsWithChildren} props          - Component props
+ * @param {ReactNode}         props.children - Child elements to render
+ * @return {JSX.Element} The children wrapped in a fragment
+ */
+const PieChartSVG = ({ children }) => {
+    // This component doesn't render directly - its children are extracted by PieChart
+    // We just return the children as-is
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+// Set displayName for better debugging and type checking
+PieChartSVG.displayName = 'PieChart.SVG';
+/**
+ * Compound component for HTML children in the PieChart
+ * @param {PropsWithChildren} props          - Component props
+ * @param {ReactNode}         props.children - Child elements to render
+ * @return {JSX.Element} The children wrapped in a fragment
+ */
+const PieChartHTML = ({ children }) => {
+    // This component doesn't render directly - its children are extracted by PieChart
+    // We just return the children as-is
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+// Set displayName for better debugging and type checking
+PieChartHTML.displayName = 'PieChart.HTML';
 /**
  * Renders a pie or donut chart using the provided data.
  *
@@ -49,17 +78,50 @@ 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 } = 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 === 'PieChart.SVG') {
+                    // Extract children from PieChart.SVG
+                    react.Children.forEach(child.props.children, svgChild => {
+                        svg.push(svgChild);
+                    });
+                }
+                else if (displayName === 'PieChart.HTML') {
+                    // Extract children from PieChart.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,
@@ -67,7 +129,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 +163,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 +198,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: PieChartSVG,
+    HTML: PieChartHTML,
+});
+// Create responsive PieChart with composition API
+const PieChartResponsive = createComposition.attachSubComponents(withResponsive.withResponsive(PieChartWithProvider), {
+    Legend: legend.Legend,
+    SVG: PieChartSVG,
+    HTML: PieChartHTML,
+});
 
-exports.default = pieChart;
+exports.PieChartUnresponsive = PieChart;
+exports.default = PieChartResponsive;