@automattic/charts 0.21.0 → 0.23.0

package/CHANGELOG.md

@@ -5,25 +5,45 @@ 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.23.0] - 2025-07-30
+### Added
+- Add component ConversionFunnelChart. [#44433]
+- Add showZeroValues option to BarChart to render zero-value with a small visible value. [#44443]
+
+### Fixed
+- Charts: Fix TS errors related to missing React import in stories. [#44190]
+- Fix top margin for semi cicle chart. [#44539]
+
+## [0.22.0] - 2025-07-28
+### Added
+- Add a standalone chart legend component. [#44245]
+- Add docs for various charts. [#44441] [#44465] [#44466] [#44467]
+
+### Changed
+- Apply theme to the LeaderboardChart component. [#44419]
+
+### Fixed
+- Fix issue where pie chart can be cut off. [#44490]
+
 ## [0.21.0] - 2025-07-25
 ### Added
-- Add Storybook docs introduction [#44427]
+- Add Storybook docs introduction. [#44427]
 
 ### Changed
-- Fix export structure for charts [#44440]
-- Removed src and tests to optimize lib size [#44438]
+- Fix export structure for charts. [#44440]
+- Remove non-production files from built package. [#44438]
 
 ## [0.20.0] - 2025-07-23
 ### Added
-- Line Chart: Add documentation [#44410]
+- Line Chart: Add documentation. [#44410]
 
 ## [0.19.1] - 2025-07-22
 ### Changed
-- Removed dependency on jetpack-components [#44411]
+- Remove dependency on jetpack-components. [#44411]
 
 ## [0.19.0] - 2025-07-21
 ### Added
-- Added more exports for Woo Analytics to get rid of visx dependencies [#44390]
+- Added more exports for Woo Analytics to get rid of visx dependencies. [#44390]
 
 ## [0.18.0] - 2025-07-21
 ### Added
@@ -316,6 +336,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.23.0]: https://github.com/Automattic/charts/compare/v0.22.0...v0.23.0
+[0.22.0]: https://github.com/Automattic/charts/compare/v0.21.0...v0.22.0
 [0.21.0]: https://github.com/Automattic/charts/compare/v0.20.0...v0.21.0
 [0.20.0]: https://github.com/Automattic/charts/compare/v0.19.1...v0.20.0
 [0.19.1]: https://github.com/Automattic/charts/compare/v0.19.0...v0.19.1

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

@@ -10,10 +10,13 @@ var react = require('react');
 var chartContext = require('../../providers/chart-context/chart-context.js');
 var utils = require('../../providers/chart-context/utils.js');
 var themeProvider = require('../../providers/theme/theme-provider.js');
-var baseLegend = require('../legend/base-legend.js');
+var legend = require('../legend/legend.js');
+require('../legend/base-legend.js');
+var useChartLegendData = require('../legend/use-chart-legend-data.js');
 var useChartDataTransform = require('../shared/use-chart-data-transform.js');
 var useChartMargin = require('../shared/use-chart-margin.js');
 var useElementHeight = require('../shared/use-element-height.js');
+var useZeroValueDisplay = require('../shared/use-zero-value-display.js');
 var withResponsive = require('../shared/with-responsive.js');
 var accessibleTooltip = require('../tooltip/accessible-tooltip.js');
 var barChart_module = require('./bar-chart.module.scss.js');
@@ -33,14 +36,21 @@ const validateData = (data) => {
     return null;
 };
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
-const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400, className, margin, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'rect', gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = 'vertical', withPatterns = false, }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400, className, margin, withTooltips = false, showLegend = false, legendOrientation = 'horizontal', legendAlignmentHorizontal = 'center', legendAlignmentVertical = 'bottom', legendShape = 'rect', gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = 'vertical', withPatterns = false, showZeroValues = false, }) => {
     const horizontal = orientation === 'horizontal';
     // Generate a unique chart ID to avoid pattern conflicts with multiple charts
     const internalChartId = react.useId();
     const chartId = utils.useChartId(providedChartId);
+    const providerTheme = themeProvider.useChartTheme();
     const theme = themeProvider.useXYChartTheme(data);
     const dataSorted = useChartDataTransform.useChartDataTransform(data);
-    const chartOptions = useBarChartOptions.useBarChartOptions(dataSorted, horizontal, options);
+    // 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 chartOptions = useBarChartOptions.useBarChartOptions(dataWithVisibleZeros, horizontal, options);
     const defaultMargin = useChartMargin.useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
     const [legendRef, legendHeight] = useElementHeight.useElementHeight();
     const chartRef = react.useRef(null);
@@ -129,19 +139,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
     // Validate data first
     const error = validateData(dataSorted);
     const isDataValid = !error;
-    // Create legend items (hooks must be called in same order every render)
-    const legendItems = react.useMemo(() => dataSorted.map((group, index) => ({
-        label: group.label, // Label for each unique group
-        value: '', // Empty string since we don't want to show a specific value
-        color: getColor(group, index),
-        shapeStyle: group?.options?.legendShapeStyle,
-    })), [dataSorted, getColor]);
-    // Register chart with context only if data is valid
-    const providerTheme = themeProvider.useChartTheme();
-    utils.useChartRegistration(chartId, legendItems, providerTheme, 'bar', isDataValid, {
+    // Memoize metadata to prevent unnecessary re-registration
+    const chartMetadata = react.useMemo(() => ({
         orientation,
         withPatterns,
-    });
+    }), [orientation, withPatterns]);
+    // Register chart with context only if data is valid
+    utils.useChartRegistration(chartId, legendItems, providerTheme, 'bar', isDataValid, chartMetadata);
     if (error) {
         return jsxRuntime.jsx("div", { className: clsx('bar-chart', barChart_module.default['bar-chart']), children: error });
     }
@@ -158,9 +162,17 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height = 400,
                     ...(showLegend && legendAlignmentVertical === 'top'
                         ? { top: (defaultMargin.top || 0) + legendHeight }
                         : {}),
-                }, xScale: chartOptions.xScale, yScale: chartOptions.yScale, horizontal: horizontal, pointerEventsDataKey: "nearest", children: [jsxRuntime.jsx(xychart.Grid, { columns: gridVisibility.includes('y'), rows: gridVisibility.includes('x'), numTicks: 4 }), withPatterns && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("defs", { "data-testid": "bar-chart-patterns", children: dataSorted.map((seriesData, index) => renderPattern(index, getColor(seriesData, index))) }), jsxRuntime.jsx("style", { children: dataSorted.map((seriesData, index) => createPatternBorderStyle(index, getColor(seriesData, index))) })] })), highlightedBarStyle && jsxRuntime.jsx("style", { children: highlightedBarStyle }), jsxRuntime.jsx(xychart.BarGroup, { padding: chartOptions.barGroup.padding, children: dataSorted.map((seriesData, index) => (jsxRuntime.jsx(xychart.BarSeries, { dataKey: seriesData?.label, data: seriesData.data, yAccessor: chartOptions.accessors.yAccessor, xAccessor: chartOptions.accessors.xAccessor, colorAccessor: getBarBackground(index) }, seriesData?.label))) }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.x }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.y }), withTooltips && (jsxRuntime.jsx(accessibleTooltip.AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, renderTooltip: renderTooltip || renderDefaultTooltip, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: barChart_module.default['bar-chart__tooltip--keyboard-focused'], series: data, mode: "individual" }))] }), showLegend && (jsxRuntime.jsx(baseLegend.BaseLegend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: barChart_module.default['bar-chart__legend'], shape: legendShape, ref: legendRef }))] }));
+                }, xScale: chartOptions.xScale, yScale: chartOptions.yScale, horizontal: horizontal, pointerEventsDataKey: "nearest", children: [jsxRuntime.jsx(xychart.Grid, { columns: gridVisibility.includes('y'), rows: gridVisibility.includes('x'), numTicks: 4 }), withPatterns && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("defs", { "data-testid": "bar-chart-patterns", children: dataSorted.map((seriesData, index) => renderPattern(index, getColor(seriesData, index))) }), jsxRuntime.jsx("style", { children: dataSorted.map((seriesData, index) => createPatternBorderStyle(index, getColor(seriesData, index))) })] })), highlightedBarStyle && jsxRuntime.jsx("style", { children: highlightedBarStyle }), jsxRuntime.jsx(xychart.BarGroup, { padding: chartOptions.barGroup.padding, children: dataWithVisibleZeros.map((seriesData, index) => (jsxRuntime.jsx(xychart.BarSeries, { dataKey: seriesData?.label, data: seriesData.data, yAccessor: chartOptions.accessors.yAccessor, xAccessor: chartOptions.accessors.xAccessor, colorAccessor: getBarBackground(index) }, seriesData?.label))) }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.x }), jsxRuntime.jsx(xychart.Axis, { ...chartOptions.axis.y }), withTooltips && (jsxRuntime.jsx(accessibleTooltip.AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, renderTooltip: renderTooltip || renderDefaultTooltip, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: barChart_module.default['bar-chart__tooltip--keyboard-focused'], series: data, mode: "individual" }))] }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: barChart_module.default['bar-chart__legend'], shape: legendShape, ref: legendRef, chartId: chartId }))] }));
+};
+const BarChart = props => {
+    const existingContext = react.useContext(chartContext.ChartContext);
+    // If we're already in a ChartProvider context, don't create a new one
+    if (existingContext) {
+        return jsxRuntime.jsx(BarChartInternal, { ...props });
+    }
+    // Otherwise, create our own ChartProvider
+    return (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(BarChartInternal, { ...props }) }));
 };
-const BarChart = props => (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(BarChartInternal, { ...props }) }));
 BarChart.displayName = 'BarChart';
 var BarChart$1 = withResponsive.withResponsive(BarChart);
 

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

@@ -44,7 +44,11 @@ function useBarChartOptions(data, horizontal, options = {}) {
             : formatDateTick;
         const valueFormatter = numberFormatters.formatNumberCompact;
         const labelAccessor = (d) => d?.label || d?.date;
-        const valueAccessor = (d) => d?.value;
+        const valueAccessor = (d) => {
+            // Use visualValue for bar rendering if available (for zero values), otherwise use value
+            const enhancedPoint = d;
+            return enhancedPoint?.visualValue !== undefined ? enhancedPoint.visualValue : d?.value;
+        };
         return {
             vertical: {
                 xTickFormat: labelFormatter,

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

@@ -4,11 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var components = require('@wordpress/components');
+var element = require('@wordpress/element');
 var clsx = require('clsx');
 require('react');
+var themeProvider = require('../../providers/theme/theme-provider.js');
 var formatMetricValue = require('../shared/format-metric-value.js');
 var leaderboardChart_module = require('./leaderboard-chart.module.scss.js');
 
+/**
+ * Default settings for LeaderboardChart component
+ */
+const DEFAULT_LEADERBOARD_SETTINGS = {
+    labelSpacing: 1.5,
+    rowGap: 12,
+    columnGap: 4,
+    primaryColor: '#3858E9',
+    secondaryColor: '#66BDFF',
+    deltaColors: ['#D63638', '#757575', '#008A20'],
+};
 /**
  * Default value formatter using formatMetricValue
  *
@@ -49,25 +62,33 @@ const defaultDeltaFormatter = (value) => {
  * @param props.style          - Custom styling for the chart container
  * @return JSX element representing the leaderboard chart
  */
-const LeaderboardChart = ({ data, withComparison = false, primaryColor = '#3858E9', secondaryColor = '#66BDFF', valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, loading = false, className, style, }) => {
-    // TODO: Integrate with ThemeProvider:
-    // 1. Use theme.colors for primaryColor/secondaryColor defaults
-    // 2. Get delta sign colors from theme instead of hardcoding
-    // 3. Add useChartTheme() hook like other chart components
-    const signColors = ['#D63638', '#757575', '#008A20'];
+const LeaderboardChart = ({ data, withComparison = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, loading = false, className, style, }) => {
+    const theme = themeProvider.useChartTheme();
+    // Get component settings from theme with fallbacks
+    const leaderboardSettings = theme.leaderboardChart;
+    const labelSpacing = leaderboardSettings?.labelSpacing ?? DEFAULT_LEADERBOARD_SETTINGS.labelSpacing;
+    const rowGap = leaderboardSettings?.rowGap ?? DEFAULT_LEADERBOARD_SETTINGS.rowGap;
+    const columnGap = leaderboardSettings?.columnGap ?? DEFAULT_LEADERBOARD_SETTINGS.columnGap;
+    // Use theme colors with prop overrides, fallback to defaults
+    const finalPrimaryColor = primaryColor || leaderboardSettings?.primaryColor || DEFAULT_LEADERBOARD_SETTINGS.primaryColor;
+    const finalSecondaryColor = secondaryColor ||
+        leaderboardSettings?.secondaryColor ||
+        DEFAULT_LEADERBOARD_SETTINGS.secondaryColor;
+    // Delta sign colors: negative, neutral, positive
+    const signColors = leaderboardSettings?.deltaColors ?? DEFAULT_LEADERBOARD_SETTINGS.deltaColors;
     const chartStyle = {
-        '--primary-color': primaryColor,
-        '--secondary-color': secondaryColor,
+        '--primary-color': finalPrimaryColor,
+        '--secondary-color': finalSecondaryColor,
         ...style,
     };
     // Handle empty or undefined data
     if (!data || data.length === 0) {
         return (jsxRuntime.jsx("div", { className: clsx(leaderboardChart_module.default.leaderboardChart, loading && leaderboardChart_module.default.loading, className), style: chartStyle, children: jsxRuntime.jsx("div", { className: leaderboardChart_module.default.emptyState, children: loading ? 'Loading...' : 'No data available' }) }));
     }
-    return (jsxRuntime.jsx("div", { className: clsx(leaderboardChart_module.default.leaderboardChart, loading && leaderboardChart_module.default.loading, className), style: chartStyle, children: data.map(entry => {
+    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("div", { className: leaderboardChart_module.default.entryContainer, children: [jsxRuntime.jsxs("div", { className: leaderboardChart_module.default.labelContainer, children: [jsxRuntime.jsx("span", { className: leaderboardChart_module.default.entryLabel, 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("span", { className: leaderboardChart_module.default.currentValue, children: valueFormatter(entry.currentValue) }), withComparison && (jsxRuntime.jsx("span", { className: leaderboardChart_module.default.deltaValue, style: { color: deltaColor }, children: deltaFormatter(entry.delta) }))] })] }, entry.id));
+            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));
         }) }));
 };
 

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-","entryContainer":"leaderboard-chart-module_entryContainer__Os9tq","labelContainer":"leaderboard-chart-module_labelContainer__lt8CW","entryLabel":"leaderboard-chart-module_entryLabel__NPMEo","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","currentValue":"leaderboard-chart-module_currentValue__I0aZw","deltaValue":"leaderboard-chart-module_deltaValue__zJpIW","emptyState":"leaderboard-chart-module_emptyState__0dkfy"};
+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"};
 
 exports.default = styles;

package/dist/cjs/components/legend/index.js

@@ -1,7 +1,11 @@
 'use strict';
 
+var legend = require('./legend.js');
 var baseLegend = require('./base-legend.js');
+var useChartLegendData = require('./use-chart-legend-data.js');
 
 
 
-exports.Legend = baseLegend.BaseLegend;
+exports.Legend = legend.Legend;
+exports.BaseLegend = baseLegend.BaseLegend;
+exports.useChartLegendData = useChartLegendData.useChartLegendData;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var chartContext = require('../../providers/chart-context/chart-context.js');
+var baseLegend = require('./base-legend.js');
+
+const Legend = react.forwardRef(({ chartId, items, ...props }, ref) => {
+    // Get context but don't throw if it doesn't exist
+    const context = react.useContext(chartContext.ChartContext);
+    // Use useMemo to ensure re-rendering when context changes
+    const contextItems = react.useMemo(() => {
+        return chartId && context ? context.getChartData(chartId)?.legendItems : undefined;
+    }, [chartId, context]);
+    // Use context items if available, otherwise fall back to provided items
+    const legendItems = (contextItems || items);
+    if (!legendItems) {
+        return null;
+    }
+    return jsxRuntime.jsx(baseLegend.BaseLegend, { ref: ref, items: legendItems, ...props });
+});
+
+exports.Legend = Legend;

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

@@ -0,0 +1,107 @@
+'use strict';
+
+var react = require('react');
+
+/**
+ * Formats the value for a data point based on its type
+ * @param point      - The data point to format
+ * @param showValues - Whether to show values or return empty string
+ * @return Formatted value string
+ */
+function formatPointValue(point, showValues) {
+    if (!showValues) {
+        return '';
+    }
+    if ('percentage' in point) {
+        return `${point.percentage}%`;
+    }
+    else if ('value' in point) {
+        return point.value.toString();
+    }
+    return '';
+}
+/**
+ * Creates a base legend item with common properties
+ * @param label - The label for the legend item
+ * @param value - The value for the legend item
+ * @param color - The color for the legend item
+ * @return Base legend item object
+ */
+function createBaseLegendItem(label, value, color) {
+    return {
+        label,
+        value,
+        color,
+    };
+}
+/**
+ * Processes SeriesData into legend items
+ * @param seriesData  - The series data to process
+ * @param theme       - The chart theme for colors
+ * @param showValues  - Whether to show values in legend
+ * @param withGlyph   - Whether to include glyph rendering
+ * @param glyphSize   - Size of the glyph
+ * @param renderGlyph - Component to render the glyph
+ * @return Array of processed legend items
+ */
+function processSeriesData(seriesData, theme, showValues, withGlyph, glyphSize, renderGlyph) {
+    const mapper = (series, index) => {
+        const baseItem = createBaseLegendItem(series.label, showValues ? series.data?.length?.toString() || '0' : '', theme.colors[index % theme.colors.length]);
+        if (withGlyph && renderGlyph) {
+            return {
+                ...baseItem,
+                glyphSize,
+                renderGlyph,
+            };
+        }
+        return baseItem;
+    };
+    return seriesData.map(mapper);
+}
+/**
+ * Processes point data into legend items
+ * @param pointData   - The point data to process
+ * @param theme       - The chart theme for colors
+ * @param showValues  - Whether to show values in legend
+ * @param withGlyph   - Whether to include glyph rendering
+ * @param glyphSize   - Size of the glyph
+ * @param renderGlyph - Component to render the glyph
+ * @return Array of processed legend items
+ */
+function processPointData(pointData, theme, showValues, withGlyph, glyphSize, renderGlyph) {
+    const mapper = (point, index) => {
+        const baseItem = createBaseLegendItem(point.label, formatPointValue(point, showValues), theme.colors[index % theme.colors.length]);
+        if (withGlyph && renderGlyph) {
+            return {
+                ...baseItem,
+                glyphSize,
+                renderGlyph,
+            };
+        }
+        return baseItem;
+    };
+    return pointData.map(mapper);
+}
+/**
+ * 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
+ * @return Array of legend items ready for display
+ */
+function useChartLegendData(data, theme, options = {}) {
+    const { showValues = false, withGlyph = false, glyphSize = 8, renderGlyph } = options;
+    return react.useMemo(() => {
+        if (!data || !Array.isArray(data) || data.length === 0) {
+            return [];
+        }
+        // Handle SeriesData (multiple series with data points)
+        if ('data' in data[0]) {
+            return processSeriesData(data, theme, showValues, withGlyph, glyphSize, renderGlyph);
+        }
+        // Handle DataPointDate or DataPointPercentage (single data points)
+        return processPointData(data, theme, showValues, withGlyph, glyphSize, renderGlyph);
+    }, [data, theme, showValues, withGlyph, glyphSize, renderGlyph]);
+}
+
+exports.useChartLegendData = useChartLegendData;

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

@@ -12,7 +12,9 @@ var clsx = require('clsx');
 var chartContext = require('../../providers/chart-context/chart-context.js');
 var utils = require('../../providers/chart-context/utils.js');
 var themeProvider = require('../../providers/theme/theme-provider.js');
-var baseLegend = require('../legend/base-legend.js');
+var legend = require('../legend/legend.js');
+require('../legend/base-legend.js');
+var useChartLegendData = require('../legend/use-chart-legend-data.js');
 var defaultGlyph = require('../shared/default-glyph.js');
 var useChartDataTransform = require('../shared/use-chart-data-transform.js');
 var useChartMargin = require('../shared/use-chart-margin.js');
@@ -195,30 +197,24 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
     const defaultMargin = useChartMargin.useChartMargin(height, chartOptions, dataSorted, theme);
     const error = validateData(dataSorted);
     const isDataValid = !error;
-    // Create legend items (hooks must be called in same order every render)
-    const legendItems = react.useMemo(() => dataSorted.map((group, index) => ({
-        label: group.label, // Label for each unique group
-        value: '', // Empty string since we don't want to show a specific value
-        color: group?.options?.stroke ?? providerTheme.colors[index % providerTheme.colors.length],
-        shapeStyle: group?.options?.legendShapeStyle,
-        renderGlyph: withLegendGlyph ? providerTheme.glyphs?.[index] ?? renderGlyph : undefined,
+    // Memoize legend options to prevent unnecessary re-calculations
+    const legendOptions = react.useMemo(() => ({
+        withGlyph: withLegendGlyph,
         glyphSize: Math.max(0, toNumber(glyphStyle?.radius) ?? 4),
-    })), [
-        dataSorted,
-        providerTheme.colors,
-        providerTheme.glyphs,
-        withLegendGlyph,
         renderGlyph,
-        glyphStyle?.radius,
-    ]);
-    // Register chart with context only if data is valid
-    utils.useChartRegistration(chartId, legendItems, providerTheme, 'line', isDataValid, {
+    }), [withLegendGlyph, glyphStyle?.radius, renderGlyph]);
+    // Create legend items using the reusable hook
+    const legendItems = useChartLegendData.useChartLegendData(dataSorted, providerTheme, legendOptions);
+    // Memoize metadata to prevent unnecessary re-registration
+    const chartMetadata = react.useMemo(() => ({
         withGradientFill,
         smoothing,
         curveType,
         withStartGlyphs,
         withLegendGlyph,
-    });
+    }), [withGradientFill, smoothing, curveType, withStartGlyphs, withLegendGlyph]);
+    // Register chart with context only if data is valid
+    utils.useChartRegistration(chartId, legendItems, providerTheme, 'line', isDataValid, chartMetadata);
     const accessors = {
         xAccessor: (d) => d?.date,
         yAccessor: (d) => d?.value,
@@ -254,9 +250,17 @@ const LineChartInternal = react.forwardRef(({ data, chartId: providedChartId, wi
                                 return (jsxRuntime.jsxs("g", { children: [withStartGlyphs && (jsxRuntime.jsx(StartGlyph, { index: index, data: seriesData, color: stroke, renderGlyph: providerTheme.glyphs?.[index] ?? renderGlyph, accessors: accessors, glyphStyle: glyphStyle })), withGradientFill && (jsxRuntime.jsx(gradient.LinearGradient, { id: `area-gradient-${internalChartId}-${index + 1}`, from: stroke, fromOpacity: 0.4, toOpacity: 0.1, to: theme.backgroundColor, ...seriesData.options?.gradient, "data-testid": "line-gradient" })), jsxRuntime.jsx(xychart.AreaSeries, { dataKey: seriesData?.label, data: seriesData.data, ...accessors, fill: withGradientFill
                                                 ? `url(#area-gradient-${internalChartId}-${index + 1})`
                                                 : '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(baseLegend.BaseLegend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: lineChart_module.default['line-chart-legend'], shape: legendShape, ref: legendRef })), children] }) }));
+                            }), withTooltips && (jsxRuntime.jsx(accessibleTooltip.AccessibleTooltip, { detectBounds: true, snapTooltipToDatumX: true, snapTooltipToDatumY: true, showSeriesGlyphs: true, renderTooltip: renderTooltip, renderGlyph: tooltipRenderGlyph, glyphStyle: glyphStyle, showVerticalCrosshair: withTooltipCrosshairs?.showVertical, showHorizontalCrosshair: withTooltipCrosshairs?.showHorizontal, selectedIndex: selectedIndex, tooltipRef: tooltipRef, keyboardFocusedClassName: lineChart_module.default['line-chart__tooltip--keyboard-focused'], series: dataSorted })), jsxRuntime.jsx(LineChartScalesRef, { chartRef: internalChartRef, width: width, height: height, margin: margin })] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: lineChart_module.default['line-chart-legend'], shape: legendShape, chartId: chartId, ref: legendRef })), children] }) }));
+});
+const LineChart = react.forwardRef((props, ref) => {
+    const existingContext = react.useContext(chartContext.ChartContext);
+    // If we're already in a ChartProvider context, don't create a new one
+    if (existingContext) {
+        return jsxRuntime.jsx(LineChartInternal, { ...props, ref: ref });
+    }
+    // Otherwise, create our own ChartProvider
+    return (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(LineChartInternal, { ...props, ref: ref }) }));
 });
-const LineChart = react.forwardRef((props, ref) => (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(LineChartInternal, { ...props, ref: ref }) })));
 LineChart.displayName = 'LineChart';
 LineChart.AnnotationsOverlay = lineChartAnnotationsOverlay.default;
 LineChart.Annotation = lineChartAnnotation.default;

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

@@ -12,7 +12,9 @@ var chartContext = require('../../providers/chart-context/chart-context.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 baseLegend = require('../legend/base-legend.js');
+var legend = require('../legend/legend.js');
+require('../legend/base-legend.js');
+var useChartLegendData = require('../legend/use-chart-legend-data.js');
 var useElementHeight = require('../shared/use-element-height.js');
 var withResponsive = require('../shared/with-responsive.js');
 var baseTooltip = require('../tooltip/base-tooltip.js');
@@ -53,30 +55,30 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
     const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } = useChartMouseHandler.default({
         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 { isValid, message } = validateData(data);
-    // Create legend items (hooks must be called in same order every render)
-    const legendItems = react.useMemo(() => data.map((item, index) => ({
-        label: item.label,
-        value: item.value.toString(),
-        color: providerTheme.colors[index % providerTheme.colors.length],
-    })), [data, providerTheme.colors]);
-    // Register chart with context only if data is valid
-    utils.useChartRegistration(chartId, legendItems, providerTheme, 'pie', isValid, {
+    // Memoize metadata to prevent unnecessary re-registration
+    const chartMetadata = react.useMemo(() => ({
         thickness,
         gapScale,
         cornerScale,
-    });
+    }), [thickness, gapScale, cornerScale]);
+    // Register chart with context only if data is valid
+    utils.useChartRegistration(chartId, legendItems, providerTheme, 'pie', isValid, 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 }) }));
     }
     const width = size;
     const height = size;
+    const adjustedHeight = showLegend && legendAlignmentVertical === 'top' ? height - legendHeight : height;
     // Calculate radius based on width/height
-    const radius = Math.min(width, height) / 2;
-    // Center the chart in the available space, adjusting for legend position
+    const radius = Math.min(width, adjustedHeight) / 2;
+    // Center the chart in the available space
     const centerX = width / 2;
-    const legendOffset = showLegend && legendAlignmentVertical === 'top' ? legendHeight / 2 : 0;
-    const centerY = height / 2 + legendOffset;
+    const centerY = adjustedHeight / 2;
     // Calculate the angle between each
     const padAngle = gapScale * ((2 * Math.PI) / data.length);
     const outerRadius = radius - padding;
@@ -96,7 +98,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
     return (jsxRuntime.jsxs("div", { className: clsx('pie-chart', pieChart_module.default['pie-chart'], className), style: {
             display: 'flex',
             flexDirection: showLegend && legendAlignmentVertical === 'top' ? 'column-reverse' : 'column',
-        }, children: [jsxRuntime.jsx("svg", { viewBox: `0 0 ${size} ${size}`, preserveAspectRatio: "xMidYMid meet", width: size, height: size, 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 => {
+        }, 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;
@@ -111,11 +113,19 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
                                     }
                                     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(baseLegend.BaseLegend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, className: pieChart_module.default['pie-chart-legend'], shape: legendShape, ref: legendRef })), withTooltips && tooltipOpen && tooltipData && (jsxRuntime.jsx(baseTooltip.BaseTooltip, { data: tooltipData, top: tooltipTop || 0, left: tooltipLeft || 0, style: {
+                            } }), children] }) }), showLegend && (jsxRuntime.jsx(legend.Legend, { items: legendItems, orientation: legendOrientation, alignmentHorizontal: legendAlignmentHorizontal, alignmentVertical: legendAlignmentVertical, 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%)',
                 } }))] }));
 };
-const PieChart = (props) => (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(PieChartInternal, { ...props }) }));
+const PieChart = (props) => {
+    const existingContext = react.useContext(chartContext.ChartContext);
+    // If we're already in a ChartProvider context, don't create a new one
+    if (existingContext) {
+        return jsxRuntime.jsx(PieChartInternal, { ...props });
+    }
+    // Otherwise, create our own ChartProvider
+    return (jsxRuntime.jsx(chartContext.ChartProvider, { children: jsxRuntime.jsx(PieChartInternal, { ...props }) }));
+};
 PieChart.displayName = 'PieChart';
 var pieChart = withResponsive.withResponsive(PieChart);