@automattic/charts 0.46.3 → 0.48.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ 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.48.0] - 2025-11-18
+### Changed
+- Remove inline styles from containers to allow consumer overrides [#45953]
+
+## [0.47.0] - 2025-11-17
+### Added
+- Chart: Add animation support. [#45837]
+
+### Changed
+- Update package dependencies. [#45915] [#45958]
+
 ## [0.46.3] - 2025-11-12
 ### Changed
 - Internal updates.
@@ -547,6 +558,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.48.0]: https://github.com/Automattic/charts/compare/v0.47.0...v0.48.0
+[0.47.0]: https://github.com/Automattic/charts/compare/v0.46.3...v0.47.0
 [0.46.3]: https://github.com/Automattic/charts/compare/v0.46.2...v0.46.3
 [0.46.2]: https://github.com/Automattic/charts/compare/v0.46.1...v0.46.2
 [0.46.1]: https://github.com/Automattic/charts/compare/v0.46.0...v0.46.1

package/dist/{chunk-HVWETEEV.js → chunk-2UKC2E5X.js}

@@ -35,7 +35,12 @@ import { useCallback, useContext, useState, useRef, useMemo as useMemo2 } from "
 // src/components/bar-chart/bar-chart.module.scss
 var bar_chart_module_default = {
   "bar-chart": "a8ccharts-lmYNi-",
-  "bar-chart-legend": "a8ccharts-vgKKqG"
+  "bar-chart--legend-top": "a8ccharts-SQjaa0",
+  "bar-chart-legend": "a8ccharts-vgKKqG",
+  "bar-chart__animated": "a8ccharts-vHWVsO",
+  "rise": "a8ccharts-wCPctT",
+  "bar-chart__animated-horizontal": "a8ccharts-3kCz4q",
+  "stretch": "a8ccharts-MtfGVm"
 };
 
 // src/components/bar-chart/private/use-bar-chart-options.ts
@@ -176,6 +181,7 @@ var BarChartInternal = ({
   withPatterns = false,
   showZeroValues = false,
   legendInteractive = false,
+  animation,
   children
 }) => {
   const horizontal = orientation === "horizontal";
@@ -343,15 +349,21 @@ var BarChartInternal = ({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: clsx("bar-chart", bar_chart_module_default["bar-chart"], className),
+          className: clsx(
+            "bar-chart",
+            bar_chart_module_default["bar-chart"],
+            {
+              [bar_chart_module_default[`bar-chart__animated${horizontal ? "-horizontal" : ""}`]]: animation,
+              [bar_chart_module_default["bar-chart--legend-top"]]: showLegend && legendPosition === "top"
+            },
+            className
+          ),
           "data-testid": "bar-chart",
           role: "grid",
           "aria-label": __("Bar chart", "jetpack-charts"),
           style: {
             width,
-            height,
-            display: "flex",
-            flexDirection: showLegend && legendPosition === "top" ? "column-reverse" : "column"
+            height
           },
           tabIndex: 0,
           onKeyDown: onChartKeyDown,
@@ -488,4 +500,4 @@ export {
   BarChart,
   BarChartResponsive
 };
-//# sourceMappingURL=chunk-HVWETEEV.js.map
+//# sourceMappingURL=chunk-2UKC2E5X.js.map

package/dist/chunk-2UKC2E5X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/bar-chart/bar-chart.tsx","../src/components/bar-chart/bar-chart.module.scss","../src/components/bar-chart/private/use-bar-chart-options.ts"],"sourcesContent":["import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';\nimport { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useState, useRef, useMemo } from 'react';\nimport {\n\tuseXYChartTheme,\n\tuseChartDataTransform,\n\tuseZeroValueDisplay,\n\tuseChartMargin,\n\tuseElementHeight,\n} from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n\tGlobalChartsContext,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';\nimport styles from './bar-chart.module.scss';\nimport { useBarChartOptions } from './private';\nimport type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';\nimport type { FC, ReactNode, ComponentType } from 'react';\n\nexport interface BarChartProps extends BaseChartProps< SeriesData[] > {\n\trenderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;\n\torientation?: 'horizontal' | 'vertical';\n\twithPatterns?: boolean;\n\tshowZeroValues?: boolean;\n\tlegendInteractive?: boolean;\n\tchildren?: ReactNode;\n}\n\n// Base props type with optional responsive properties\ntype BarChartBaseProps = Optional< BarChartProps, 'width' | 'height' | 'size' >;\n\n// Composition API types\ninterface BarChartSubComponents {\n\tLegend: ComponentType< React.ComponentProps< typeof Legend > >;\n}\n\ntype BarChartComponent = FC< BarChartBaseProps > & BarChartSubComponents;\ntype BarChartResponsiveComponent = FC< BarChartBaseProps & ResponsiveConfig > &\n\tBarChartSubComponents;\n\n// Validation function similar to LineChart\nconst validateData = ( data: SeriesData[] ) => {\n\tif ( ! data?.length ) return 'No data available';\n\n\tconst hasInvalidData = data.some( series =>\n\t\tseries.data.some(\n\t\t\tpoint =>\n\t\t\t\tisNaN( point.value as number ) ||\n\t\t\t\tpoint.value === null ||\n\t\t\t\tpoint.value === undefined ||\n\t\t\t\t( ! point.label &&\n\t\t\t\t\t( ! ( 'date' in point && point.date ) || isNaN( point.date.getTime() ) ) )\n\t\t)\n\t);\n\n\tif ( hasInvalidData ) return 'Invalid data';\n\treturn null;\n};\n\nconst getPatternId = ( chartId: string, index: number ) => `bar-pattern-${ chartId }-${ index }`;\n\nconst BarChartInternal: FC< BarChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth,\n\theight = 400,\n\tclassName,\n\tmargin,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendMaxWidth,\n\tlegendTextOverflow = 'wrap',\n\tlegendItemClassName,\n\tlegendShape = 'rect',\n\tgridVisibility: gridVisibilityProp,\n\trenderTooltip,\n\toptions = {},\n\torientation = 'vertical',\n\twithPatterns = false,\n\tshowZeroValues = false,\n\tlegendInteractive = false,\n\tanimation,\n\tchildren,\n} ) => {\n\tconst horizontal = orientation === 'horizontal';\n\tconst chartId = useChartId( providedChartId );\n\tconst theme = useXYChartTheme( data );\n\n\tconst dataSorted = useChartDataTransform( data );\n\n\t// Transform data to add a small value for zero bars to make them visible\n\tconst dataWithVisibleZeros = useZeroValueDisplay( dataSorted, {\n\t\tenabled: showZeroValues,\n\t} );\n\n\t// Create legend items using the reusable hook\n\tconst legendItems = useChartLegendItems( dataSorted );\n\tconst chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );\n\tconst defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst chartRef = useRef< HTMLDivElement >( null );\n\tconst [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );\n\tconst [ isNavigating, setIsNavigating ] = useState( false );\n\n\tconst totalPoints =\n\t\tMath.max( 0, ...data.map( series => series.data?.length || 0 ) ) * data.length;\n\n\t// Use the keyboard navigation hook\n\tconst { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {\n\t\tselectedIndex,\n\t\tsetSelectedIndex,\n\t\tisNavigating,\n\t\tsetIsNavigating,\n\t\tchartRef,\n\t\ttotalPoints,\n\t} );\n\n\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\tconst providerTheme = useGlobalChartsTheme();\n\n\t// Add visibility information to series when using interactive legends\n\tconst seriesWithVisibility = useMemo( () => {\n\t\tif ( ! chartId || ! legendInteractive ) {\n\t\t\treturn dataWithVisibleZeros.map( ( series, index ) => ( {\n\t\t\t\tseries,\n\t\t\t\tindex,\n\t\t\t\tisVisible: true,\n\t\t\t} ) );\n\t\t}\n\t\treturn dataWithVisibleZeros.map( ( series, index ) => ( {\n\t\t\tseries,\n\t\t\tindex,\n\t\t\tisVisible: isSeriesVisible( chartId, series.label ),\n\t\t} ) );\n\t}, [ dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive ] );\n\n\t// Check if all series are hidden\n\tconst allSeriesHidden = useMemo( () => {\n\t\treturn seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );\n\t}, [ seriesWithVisibility ] );\n\n\tconst getBarBackground = useCallback(\n\t\t( index: number ) => () =>\n\t\t\twithPatterns\n\t\t\t\t? `url(#${ getPatternId( chartId, index ) })`\n\t\t\t\t: getElementStyles( { data: dataSorted[ index ], index } ).color,\n\t\t[ withPatterns, getElementStyles, dataSorted, chartId ]\n\t);\n\n\tconst renderDefaultTooltip = useCallback(\n\t\t( { tooltipData }: RenderTooltipParams< DataPointDate > ) => {\n\t\t\tconst nearestDatum = tooltipData?.nearestDatum?.datum;\n\t\t\tif ( ! nearestDatum ) return null;\n\n\t\t\treturn (\n\t\t\t\t<div className={ styles[ 'bar-chart__tooltip' ] }>\n\t\t\t\t\t<div className={ styles[ 'bar-chart__tooltip-header' ] }>\n\t\t\t\t\t\t{ tooltipData?.nearestDatum?.key }\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={ styles[ 'bar-chart__tooltip-row' ] }>\n\t\t\t\t\t\t<span className={ styles[ 'bar-chart__tooltip-label' ] }>\n\t\t\t\t\t\t\t{ chartOptions.tooltip.labelFormatter(\n\t\t\t\t\t\t\t\tnearestDatum.label || ( nearestDatum.date ? nearestDatum.date.getTime() : 0 ),\n\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t[]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className={ styles[ 'bar-chart__tooltip-value' ] }>{ nearestDatum.value }</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[ chartOptions.tooltip ]\n\t);\n\n\tconst renderPattern = useCallback(\n\t\t( index: number, color: string ) => {\n\t\t\tconst patternType = index % 4;\n\t\t\tconst id = getPatternId( chartId, index );\n\t\t\tconst commonProps = {\n\t\t\t\tid,\n\t\t\t\tstroke: 'white',\n\t\t\t\tstrokeWidth: 1,\n\t\t\t\tbackground: color,\n\t\t\t};\n\n\t\t\tswitch ( patternType ) {\n\t\t\t\tcase 0:\n\t\t\t\tdefault:\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PatternLines\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t{ ...commonProps }\n\t\t\t\t\t\t\twidth={ 5 }\n\t\t\t\t\t\t\theight={ 5 }\n\t\t\t\t\t\t\torientation={ [ 'diagonal' ] }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\tcase 1:\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<PatternCircles key={ id } { ...commonProps } width={ 6 } height={ 6 } fill=\"white\" />\n\t\t\t\t\t);\n\t\t\t\tcase 2:\n\t\t\t\t\treturn <PatternWaves key={ id } { ...commonProps } width={ 4 } height={ 4 } />;\n\t\t\t\tcase 3:\n\t\t\t\t\treturn <PatternHexagons key={ id } { ...commonProps } size={ 8 } height={ 3 } />;\n\t\t\t}\n\t\t},\n\t\t[ chartId ]\n\t);\n\n\tconst createPatternBorderStyle = useCallback(\n\t\t( index: number, color: string ) => {\n\t\t\tconst patternId = getPatternId( chartId, index );\n\t\t\treturn `\n\t\t\t.visx-bar[fill=\"url(#${ patternId })\"] {\n\t\t\t\tstroke: ${ color };\n\t\t\t\tstroke-width: 1;\n\t\t\t\t}\n\t\t\t`;\n\t\t},\n\t\t[ chartId ]\n\t);\n\n\tconst createKeyboardHighlightStyle = useCallback( () => {\n\t\tif ( selectedIndex === undefined ) return '';\n\n\t\t// Calculate which bar should be highlighted based on selectedIndex\n\t\t// Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]\n\t\tconst maxDataPoints = Math.max( ...data.map( s => s.data.length ) );\n\t\tconst dataPointIndex = Math.floor( selectedIndex / data.length );\n\t\tconst seriesIndex = selectedIndex % data.length;\n\n\t\t// Only highlight if we're within valid bounds\n\t\tif ( dataPointIndex >= maxDataPoints || seriesIndex >= data.length ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst seriesData = data[ seriesIndex ];\n\t\tif ( dataPointIndex >= seriesData.data.length ) {\n\t\t\treturn '';\n\t\t}\n\n\t\t// Based on the DOM structure analysis:\n\t\t// - All bars are in a single .visx-bar-group\n\t\t// - Bars are ordered as: [series1[0], series1[1], series2[0], series2[1], ...]\n\t\t// - So we need to calculate the actual bar index in the DOM\n\t\tconst actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;\n\n\t\t// Use a CSS class selector instead of ID since useId() generates invalid CSS ID characters\n\t\tconst generatedStyles = `\n\t\t\t.bar-chart[data-chart-id=\"bar-chart-${ chartId }\"] .visx-bar-group .visx-bar:nth-child(${\n\t\t\t\tactualBarIndex + 1\n\t\t\t}) {\n\t\t\t\tstroke: #005fcc;\n\t\t\t\tstroke-width: 2px;\n\t\t\t}\n\t\t`;\n\n\t\treturn generatedStyles;\n\t}, [ selectedIndex, data, chartId ] );\n\n\t// Validate data first\n\tconst error = validateData( dataSorted );\n\tconst isDataValid = ! error;\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\torientation,\n\t\t\twithPatterns,\n\t\t} ),\n\t\t[ orientation, withPatterns ]\n\t);\n\n\t// Register chart with context only if data is valid\n\tuseChartRegistration( {\n\t\tchartId,\n\t\tlegendItems,\n\t\tchartType: 'bar',\n\t\tisDataValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tif ( error ) {\n\t\treturn <div className={ clsx( 'bar-chart', styles[ 'bar-chart' ] ) }>{ error }</div>;\n\t}\n\n\tconst gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;\n\tconst highlightedBarStyle = createKeyboardHighlightStyle();\n\n\treturn (\n\t\t<SingleChartContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tchartId,\n\t\t\t\tchartWidth: width,\n\t\t\t\tchartHeight: height - ( showLegend ? legendHeight : 0 ),\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'bar-chart',\n\t\t\t\t\tstyles[ 'bar-chart' ],\n\t\t\t\t\t{\n\t\t\t\t\t\t[ styles[ `bar-chart__animated${ horizontal ? '-horizontal' : '' }` ] ]: animation,\n\t\t\t\t\t\t[ styles[ 'bar-chart--legend-top' ] ]: showLegend && legendPosition === 'top',\n\t\t\t\t\t},\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tdata-testid=\"bar-chart\"\n\t\t\t\trole=\"grid\"\n\t\t\t\taria-label={ __( 'Bar chart', 'jetpack-charts' ) }\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth,\n\t\t\t\t\theight,\n\t\t\t\t} }\n\t\t\t\ttabIndex={ 0 }\n\t\t\t\tonKeyDown={ onChartKeyDown }\n\t\t\t\tonFocus={ onChartFocus }\n\t\t\t\tonBlur={ onChartBlur }\n\t\t\t\tref={ chartRef }\n\t\t\t\tdata-chart-id={ `bar-chart-${ chartId }` } // Unique ID for the chart\n\t\t\t>\n\t\t\t\t<XYChart\n\t\t\t\t\ttheme={ theme }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ height - ( showLegend ? legendHeight : 0 ) }\n\t\t\t\t\tmargin={ {\n\t\t\t\t\t\t...defaultMargin,\n\t\t\t\t\t\t...margin,\n\t\t\t\t\t\t...( showLegend && legendPosition === 'top'\n\t\t\t\t\t\t\t? { top: ( defaultMargin.top || 0 ) + legendHeight }\n\t\t\t\t\t\t\t: {} ),\n\t\t\t\t\t} }\n\t\t\t\t\txScale={ chartOptions.xScale }\n\t\t\t\t\tyScale={ chartOptions.yScale }\n\t\t\t\t\thorizontal={ horizontal }\n\t\t\t\t\tpointerEventsDataKey=\"nearest\"\n\t\t\t\t>\n\t\t\t\t\t<Grid\n\t\t\t\t\t\tcolumns={ gridVisibility.includes( 'y' ) }\n\t\t\t\t\t\trows={ gridVisibility.includes( 'x' ) }\n\t\t\t\t\t\tnumTicks={ 4 }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ withPatterns && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<defs data-testid=\"bar-chart-patterns\">\n\t\t\t\t\t\t\t\t{ dataSorted.map( ( seriesData, index ) =>\n\t\t\t\t\t\t\t\t\trenderPattern( index, getElementStyles( { data: seriesData, index } ).color )\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t\t<style>\n\t\t\t\t\t\t\t\t{ dataSorted.map( ( seriesData, index ) =>\n\t\t\t\t\t\t\t\t\tcreatePatternBorderStyle(\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tgetElementStyles( { data: seriesData, index } ).color\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</style>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }\n\n\t\t\t\t\t{ allSeriesHidden ? (\n\t\t\t\t\t\t<text\n\t\t\t\t\t\t\tx={ width / 2 }\n\t\t\t\t\t\t\ty={ ( height - ( showLegend ? legendHeight : 0 ) ) / 2 }\n\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\tfill={ providerTheme.gridStyles?.stroke || '#ccc' }\n\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }\n\t\t\t\t\t\t</text>\n\t\t\t\t\t) : null }\n\n\t\t\t\t\t<BarGroup padding={ chartOptions.barGroup.padding }>\n\t\t\t\t\t\t{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {\n\t\t\t\t\t\t\t// Skip rendering invisible series\n\t\t\t\t\t\t\tif ( ! isVisible ) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<BarSeries\n\t\t\t\t\t\t\t\t\tkey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\tdataKey={ seriesData?.label }\n\t\t\t\t\t\t\t\t\tdata={ seriesData.data as DataPointDate[] }\n\t\t\t\t\t\t\t\t\tyAccessor={ chartOptions.accessors.yAccessor }\n\t\t\t\t\t\t\t\t\txAccessor={ chartOptions.accessors.xAccessor }\n\t\t\t\t\t\t\t\t\tcolorAccessor={ getBarBackground( index ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</BarGroup>\n\n\t\t\t\t\t<Axis { ...chartOptions.axis.x } />\n\t\t\t\t\t<Axis { ...chartOptions.axis.y } />\n\n\t\t\t\t\t{ withTooltips && (\n\t\t\t\t\t\t<AccessibleTooltip\n\t\t\t\t\t\t\tdetectBounds\n\t\t\t\t\t\t\tsnapTooltipToDatumX\n\t\t\t\t\t\t\tsnapTooltipToDatumY\n\t\t\t\t\t\t\trenderTooltip={ renderTooltip || renderDefaultTooltip }\n\t\t\t\t\t\t\tselectedIndex={ selectedIndex }\n\t\t\t\t\t\t\ttooltipRef={ tooltipRef }\n\t\t\t\t\t\t\tkeyboardFocusedClassName={ styles[ 'bar-chart__tooltip--keyboard-focused' ] }\n\t\t\t\t\t\t\tseries={ data }\n\t\t\t\t\t\t\tmode=\"individual\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</XYChart>\n\n\t\t\t\t{ showLegend && (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\n\t\t\t\t\t\tclassName={ styles[ 'bar-chart__legend' ] }\n\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t\tinteractive={ legendInteractive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst BarChartWithProvider: FC< BarChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <BarChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<BarChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nBarChartWithProvider.displayName = 'BarChart';\n\n// Create BarChart with composition API\nconst BarChart = attachSubComponents( BarChartWithProvider, {\n\tLegend: Legend,\n} ) as BarChartComponent;\n\n// Create responsive BarChart with composition API\nconst BarChartResponsive = attachSubComponents(\n\twithResponsive< BarChartProps >( BarChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t}\n) as BarChartResponsiveComponent;\n\nexport { BarChartResponsive as default, BarChart as BarChartUnresponsive };\n","import 'css-chunk:src/components/bar-chart/bar-chart.module.scss';export default {\n  \"bar-chart\": \"a8ccharts-lmYNi-\",\n  \"bar-chart--legend-top\": \"a8ccharts-SQjaa0\",\n  \"bar-chart-legend\": \"a8ccharts-vgKKqG\",\n  \"bar-chart__animated\": \"a8ccharts-vHWVsO\",\n  \"rise\": \"a8ccharts-wCPctT\",\n  \"bar-chart__animated-horizontal\": \"a8ccharts-3kCz4q\",\n  \"stretch\": \"a8ccharts-MtfGVm\"\n};","import { formatNumberCompact } from '@automattic/number-formatters';\nimport { useMemo } from 'react';\nimport type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';\nimport type { DataPointDate, BaseChartProps, SeriesData } from '../../../types';\nimport type { TickFormatter } from '@visx/axis';\n\nconst formatDateTick = ( timestamp: number ) => {\n\tconst date = new Date( timestamp );\n\treturn date.toLocaleDateString( undefined, {\n\t\tmonth: 'short',\n\t\tday: 'numeric',\n\t} );\n};\n\n/**\n * Get the group padding of a scale.\n *\n * @param scale - The scale to get the group padding of.\n * @return The group padding of the scale.\n */\nconst getGroupPadding = ( scale: Record< string, unknown > ): number => {\n\treturn typeof scale.paddingInner === 'number' ? ( scale.paddingInner as number ) : 0;\n};\n\n/**\n * Returns the merged options for the bar chart, including axis and scale configuration based on the orientation.\n *\n * @param data       - The data to be displayed in the chart.\n * @param horizontal - Whether the chart is horizontal or vertical.\n * @param options    - The options for the chart.\n * @return The merged options for the chart.\n */\nexport function useBarChartOptions(\n\tdata: SeriesData[],\n\thorizontal: boolean,\n\toptions: BaseChartProps[ 'options' ] = {}\n) {\n\tconst defaultOptions = useMemo( () => {\n\t\tconst bandScale = {\n\t\t\ttype: 'band' as const,\n\t\t\tpadding: 0.2,\n\t\t\tpaddingInner: 0.1,\n\t\t};\n\t\tconst linearScale = {\n\t\t\ttype: 'linear' as const,\n\t\t\tnice: true,\n\t\t\tzero: false,\n\t\t};\n\n\t\tconst labelFormatter = data?.[ 0 ]?.data?.[ 0 ]?.label\n\t\t\t? ( label: string ) => label\n\t\t\t: formatDateTick;\n\t\tconst valueFormatter = formatNumberCompact as TickFormatter< unknown >;\n\n\t\tconst labelAccessor = ( d: DataPointDate ) => d?.label || d?.date;\n\t\tconst valueAccessor = ( d: DataPointDate | EnhancedDataPoint ) => {\n\t\t\t// Use visualValue for bar rendering if available (for zero values), otherwise use value\n\t\t\tconst enhancedPoint = d as EnhancedDataPoint;\n\t\t\treturn enhancedPoint?.visualValue !== undefined ? enhancedPoint.visualValue : d?.value;\n\t\t};\n\n\t\treturn {\n\t\t\tvertical: {\n\t\t\t\txTickFormat: labelFormatter,\n\t\t\t\tyTickFormat: valueFormatter,\n\t\t\t\ttooltipLabelFormatter: labelFormatter,\n\t\t\t\txAccessor: labelAccessor,\n\t\t\t\tyAccessor: valueAccessor,\n\t\t\t\tgridVisibility: 'x',\n\t\t\t\txScale: bandScale,\n\t\t\t\tyScale: linearScale,\n\t\t\t},\n\t\t\thorizontal: {\n\t\t\t\txTickFormat: valueFormatter,\n\t\t\t\tyTickFormat: labelFormatter,\n\t\t\t\ttooltipLabelFormatter: labelFormatter,\n\t\t\t\txAccessor: valueAccessor,\n\t\t\t\tyAccessor: labelAccessor,\n\t\t\t\tgridVisibility: 'y',\n\t\t\t\txScale: linearScale,\n\t\t\t\tyScale: bandScale,\n\t\t\t},\n\t\t};\n\t}, [ data ] );\n\n\treturn useMemo( () => {\n\t\tconst orientationKey = horizontal ? 'horizontal' : 'vertical';\n\t\tconst {\n\t\t\txTickFormat,\n\t\t\tyTickFormat,\n\t\t\ttooltipLabelFormatter: defaultTooltipLabelFormatter,\n\t\t\txAccessor,\n\t\t\tyAccessor,\n\t\t\tgridVisibility,\n\t\t\txScale: baseXScale,\n\t\t\tyScale: baseYScale,\n\t\t} = defaultOptions[ orientationKey ];\n\n\t\tconst xScale = { ...baseXScale, ...( options.xScale || {} ) };\n\t\tconst yScale = { ...baseYScale, ...( options.yScale || {} ) };\n\t\tconst providedToolTipLabelFormatter = horizontal\n\t\t\t? options.axis?.y?.tickFormat\n\t\t\t: options.axis?.x?.tickFormat;\n\n\t\treturn {\n\t\t\tgridVisibility,\n\t\t\txScale,\n\t\t\tyScale,\n\t\t\taccessors: {\n\t\t\t\txAccessor,\n\t\t\t\tyAccessor,\n\t\t\t},\n\t\t\taxis: {\n\t\t\t\tx: {\n\t\t\t\t\torientation: 'bottom' as const,\n\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\ttickFormat: xTickFormat,\n\t\t\t\t\t...( options.axis?.x || {} ),\n\t\t\t\t},\n\t\t\t\ty: {\n\t\t\t\t\torientation: 'left' as const,\n\t\t\t\t\tnumTicks: 4,\n\t\t\t\t\ttickFormat: yTickFormat,\n\t\t\t\t\t...( options.axis?.y || {} ),\n\t\t\t\t},\n\t\t\t},\n\t\t\tbarGroup: {\n\t\t\t\tpadding: getGroupPadding( horizontal ? yScale : xScale ),\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tlabelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,\n\t\t\t},\n\t\t};\n\t}, [ defaultOptions, options, horizontal ] );\n}\n"],"mappings":"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","names":["useMemo","useMemo"]}

package/dist/{chunk-YKVKFUV7.cjs → chunk-2WY63MK3.cjs}

@@ -40,7 +40,8 @@ var _react = require('react');
 
 // src/components/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
-  "pie-chart": "a8ccharts-R12VhH"
+  "pie-chart": "a8ccharts-R12VhH",
+  "pie-chart--legend-top": "a8ccharts-eG7-zj"
 };
 
 // src/components/pie-chart/pie-chart.tsx
@@ -167,11 +168,12 @@ var PieChartInternal = ({
         "div",
         {
           ref: containerRef,
-          className: _clsx2.default.call(void 0, "pie-chart", pie_chart_module_default["pie-chart"], className),
-          style: {
-            display: "flex",
-            flexDirection: showLegend && legendPosition === "top" ? "column-reverse" : "column"
-          },
+          className: _clsx2.default.call(void 0, 
+            "pie-chart",
+            pie_chart_module_default["pie-chart"],
+            { [pie_chart_module_default["pie-chart--legend-top"]]: showLegend && legendPosition === "top" },
+            className
+          ),
           children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "svg",
@@ -326,4 +328,4 @@ var PieChartResponsive = _chunkLSGYIUQXcjs.attachSubComponents.call(void 0,
 
 
 exports.PieChart = PieChart; exports.PieChartResponsive = PieChartResponsive;
-//# sourceMappingURL=chunk-YKVKFUV7.cjs.map
+//# sourceMappingURL=chunk-2WY63MK3.cjs.map

package/dist/chunk-2WY63MK3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-2WY63MK3.cjs","../src/components/pie-chart/pie-chart.tsx","../src/components/pie-chart/pie-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-2WY63MK3.cjs","sourcesContent":[null,"import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { useTooltip, useTooltipInPortal } from '@visx/tooltip';\nimport { __ } from '@wordpress/i18n';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight, useInteractiveLegendData } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tuseGlobalChartsTheme,\n\tGlobalChartsContext,\n} from '../../providers';\nimport { attachSubComponents } from '../../utils';\nimport { getStringWidth } from '../../visx/text';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive, ResponsiveConfig } from '../private/with-responsive';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage, Optional } from '../../types';\nimport type { LegendValueDisplay } from '../legend';\nimport type { ChartComponentWithComposition } from '../private/chart-composition';\nimport type { SVGProps, MouseEvent, ReactNode, FC } from 'react';\n\nexport interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.\n\t */\n\tinnerRadius?: number;\n\n\t/**\n\t * Add padding to the chart\n\t */\n\tpadding?: number;\n\n\t/**\n\t * Thickness of the pie chart.\n\t * A value between 0 and 1, where 0 means no thickness\n\t * and 1 means the maximum thickness.\n\t */\n\tthickness?: number;\n\n\t/**\n\t * Scale of the gap between groups in the pie chart\n\t * A value between 0 and 1, where 0 means no gap.\n\t */\n\tgapScale?: number;\n\n\t/**\n\t * Scale of the corner radius for the pie chart segments.\n\t * A value between 0 and 1, where 0 means no corner radius.\n\t */\n\tcornerScale?: number;\n\n\t/**\n\t * Whether to show labels on pie segments. Defaults to true.\n\t */\n\tshowLabels?: boolean;\n\n\t/**\n\t * What type of value to display in the legend when showValues is true.\n\t * - 'percentage': Shows percentage values (e.g., \"23%\") [default]\n\t * - 'value': Shows raw numeric values (e.g., \"30000\")\n\t * - 'valueDisplay': Shows formatted values (e.g., \"30K\")\n\t * - 'none': Shows no values, only labels\n\t */\n\tlegendValueDisplay?: LegendValueDisplay;\n\n\t/**\n\t * Enable interactive legend items that can toggle segment visibility.\n\t * Requires chartId and GlobalChartsProvider.\n\t * When segments are hidden, percentages are recalculated so visible segments total 100%.\n\t */\n\tlegendInteractive?: boolean;\n\n\t/**\n\t * Use the children prop to render additional elements on the chart.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * Horizontal offset for tooltip positioning in pixels (default: 0)\n\t */\n\ttooltipOffsetX?: number;\n\n\t/**\n\t * Vertical offset for tooltip positioning in pixels (default: -15)\n\t */\n\ttooltipOffsetY?: number;\n}\n\n// Base props type with optional responsive properties\ntype PieChartBaseProps = Optional< PieChartProps, 'size' >;\n\n// Composition API types\ntype PieChartComponent = ChartComponentWithComposition< PieChartBaseProps >;\ntype PieChartResponsiveComponent = ChartComponentWithComposition<\n\tPieChartBaseProps & ResponsiveConfig\n>;\n\n/**\n * Validates the pie chart data\n * @param data - The data to validate\n * @return Object containing validation result and error message\n */\nconst validateData = ( data: DataPointPercentage[] ) => {\n\tif ( ! data.length ) {\n\t\treturn { isValid: false, message: 'No data available' };\n\t}\n\n\t// Check for negative values\n\tconst hasNegativeValues = data.some( item => item.percentage < 0 || item.value < 0 );\n\tif ( hasNegativeValues ) {\n\t\treturn { isValid: false, message: 'Invalid data: Negative values are not allowed' };\n\t}\n\n\t// Validate total percentage\n\tconst totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );\n\tif ( Math.abs( totalPercentage - 100 ) > 0.01 ) {\n\t\t// Using small epsilon for floating point comparison\n\t\treturn { isValid: false, message: 'Invalid percentage total: Must equal 100' };\n\t}\n\n\treturn { isValid: true, message: '' };\n};\n\n/**\n * Renders a pie or donut chart using the provided data.\n *\n * @param {PieChartProps} props - Component props\n * @return {JSX.Element} The rendered chart component\n */\nconst PieChartInternal = ( {\n\tdata,\n\tchartId: providedChartId,\n\twithTooltips = false,\n\tclassName,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendMaxWidth,\n\tlegendTextOverflow = 'wrap',\n\tlegendItemClassName,\n\tlegendShape = 'circle',\n\tsize,\n\tthickness = 1,\n\tpadding = 0,\n\tgapScale = 0,\n\tcornerScale = 0,\n\tshowLabels = true,\n\tlegendValueDisplay = 'percentage',\n\tlegendInteractive = false,\n\tchildren = null,\n\ttooltipOffsetX = 0,\n\ttooltipOffsetY = -15,\n}: PieChartProps ) => {\n\tconst providerTheme = useGlobalChartsTheme();\n\tconst chartId = useChartId( providedChartId );\n\tconst [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();\n\tconst { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =\n\t\tuseTooltip< DataPointPercentage >();\n\n\t// Set up portal tooltip for better z-index handling\n\tconst { containerRef, TooltipInPortal } = useTooltipInPortal( {\n\t\tdetectBounds: true,\n\t\tscroll: true,\n\t\tdebounce: 0,\n\t} );\n\n\tconst onMouseLeave = useCallback( () => {\n\t\tif ( ! withTooltips ) {\n\t\t\treturn;\n\t\t}\n\t\thideTooltip();\n\t}, [ withTooltips, hideTooltip ] );\n\n\tconst { getElementStyles, isSeriesVisible } = useGlobalChartsContext();\n\n\t// Filter and recalculate data for interactive legends\n\tconst { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {\n\t\tdata,\n\t\tchartId,\n\t\tlegendInteractive,\n\t\tisSeriesVisible,\n\t} );\n\n\t// Memoize legend options to prevent unnecessary re-calculations\n\tconst legendOptions = useMemo(\n\t\t() => ( { showValues: true, legendValueDisplay } ),\n\t\t[ legendValueDisplay ]\n\t);\n\n\t// Create legend items using legendData (has recalculated percentages for visible items)\n\tconst legendItems = useChartLegendItems( legendData, legendOptions );\n\n\tconst { isValid, message } = validateData( data );\n\n\t// Process children to extract compound components\n\tconst { svgChildren, htmlChildren, otherChildren } = useChartChildren( children, 'PieChart' );\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tthickness,\n\t\t\tgapScale,\n\t\t\tcornerScale,\n\t\t} ),\n\t\t[ thickness, gapScale, cornerScale ]\n\t);\n\n\t// Register chart with context only if data is valid\n\tuseChartRegistration( {\n\t\tchartId,\n\t\tlegendItems,\n\t\tchartType: 'pie',\n\t\tisDataValid: isValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tif ( ! isValid ) {\n\t\treturn (\n\t\t\t<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>\n\t\t\t\t<div className={ styles[ 'error-message' ] }>{ message }</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst width = size;\n\tconst height = size;\n\tconst adjustedHeight = showLegend && legendPosition === 'top' ? height - legendHeight : height;\n\n\t// Calculate radius based on width/height\n\tconst radius = Math.min( width, adjustedHeight ) / 2;\n\n\t// Center the chart in the available space\n\tconst centerX = width / 2;\n\tconst centerY = adjustedHeight / 2;\n\n\t// Calculate the angle between each (use original data length for consistent spacing)\n\tconst padAngle = gapScale * ( ( 2 * Math.PI ) / data.length );\n\n\tconst outerRadius = radius - padding;\n\tconst innerRadius = thickness === 0 ? 0 : outerRadius * ( 1 - thickness );\n\n\tconst maxCornerRadius = ( outerRadius - innerRadius ) / 2;\n\tconst cornerRadius = cornerScale ? Math.min( cornerScale * outerRadius, maxCornerRadius ) : 0;\n\n\t// Map the data to include index for color assignment\n\t// When interactive, we need to find the original index to maintain consistent colors\n\tconst dataWithIndex = visibleData.map( d => {\n\t\tconst originalIndex = data.findIndex( item => item.label === d.label );\n\t\treturn {\n\t\t\t...d,\n\t\t\tindex: originalIndex >= 0 ? originalIndex : 0,\n\t\t};\n\t} );\n\n\tconst accessors = {\n\t\tvalue: ( d: DataPointPercentage ) => d.value,\n\t\tfill: ( d: DataPointPercentage & { index: number } ) => {\n\t\t\treturn getElementStyles( { data: d, index: d.index } ).color;\n\t\t},\n\t};\n\n\treturn (\n\t\t<SingleChartContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tchartId,\n\t\t\t\tchartWidth: width,\n\t\t\t\tchartHeight: adjustedHeight,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ containerRef }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'pie-chart',\n\t\t\t\t\tstyles[ 'pie-chart' ],\n\t\t\t\t\t{ [ styles[ 'pie-chart--legend-top' ] ]: showLegend && legendPosition === 'top' },\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tviewBox={ `0 0 ${ width } ${ adjustedHeight }` }\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ adjustedHeight }\n\t\t\t\t>\n\t\t\t\t\t<Group top={ centerY } left={ centerX }>\n\t\t\t\t\t\t{ allSegmentsHidden ? (\n\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\tdy=\".33em\"\n\t\t\t\t\t\t\t\tfill={ providerTheme.gridColor || '#ccc' }\n\t\t\t\t\t\t\t\tfontSize=\"14\"\n\t\t\t\t\t\t\t\tfontFamily=\"-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'All segments are hidden. Click legend items to show data.',\n\t\t\t\t\t\t\t\t\t'jetpack-charts'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\t\touterRadius={ outerRadius }\n\t\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\t\tpadAngle={ padAngle }\n\t\t\t\t\t\t\t\tcornerRadius={ cornerRadius }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\t\treturn pie.arcs.map( ( arc, index ) => {\n\t\t\t\t\t\t\t\t\t\tconst [ centroidX, centroidY ] = pie.path.centroid( arc );\n\t\t\t\t\t\t\t\t\t\tconst hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;\n\t\t\t\t\t\t\t\t\t\tconst handleMouseMove = ( event: MouseEvent< SVGElement > ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( ! withTooltips ) {\n\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t// Get coordinates relative to the current target element\n\t\t\t\t\t\t\t\t\t\t\tconst coords = localPoint( event );\n\t\t\t\t\t\t\t\t\t\t\tif ( coords ) {\n\t\t\t\t\t\t\t\t\t\t\t\t// Account for legend offset when legend is on top\n\t\t\t\t\t\t\t\t\t\t\t\tconst legendOffset =\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowLegend && legendPosition === 'top' ? legendHeight : 0;\n\t\t\t\t\t\t\t\t\t\t\t\tshowTooltip( {\n\t\t\t\t\t\t\t\t\t\t\t\t\ttooltipData: arc.data,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttooltipLeft: coords.x + tooltipOffsetX,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttooltipTop: coords.y + legendOffset + tooltipOffsetY,\n\t\t\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\tconst pathProps: SVGProps< SVGPathElement > & { 'data-testid'?: string } = {\n\t\t\t\t\t\t\t\t\t\t\td: pie.path( arc ) || '',\n\t\t\t\t\t\t\t\t\t\t\tfill: accessors.fill( arc.data ),\n\t\t\t\t\t\t\t\t\t\t\t'data-testid': 'pie-segment',\n\t\t\t\t\t\t\t\t\t\t};\n\n\t\t\t\t\t\t\t\t\t\tconst groupProps: SVGProps< SVGGElement > = {};\n\t\t\t\t\t\t\t\t\t\tif ( withTooltips ) {\n\t\t\t\t\t\t\t\t\t\t\tgroupProps.onMouseMove = handleMouseMove;\n\t\t\t\t\t\t\t\t\t\t\tgroupProps.onMouseLeave = onMouseLeave;\n\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t// Estimate text width more accurately for background sizing\n\t\t\t\t\t\t\t\t\t\tconst fontSize = 12;\n\t\t\t\t\t\t\t\t\t\tconst estimatedTextWidth = getStringWidth( arc.data.label, { fontSize } );\n\t\t\t\t\t\t\t\t\t\tconst labelPadding = 6;\n\t\t\t\t\t\t\t\t\t\tconst backgroundWidth = estimatedTextWidth + labelPadding * 2;\n\t\t\t\t\t\t\t\t\t\tconst backgroundHeight = fontSize + labelPadding * 2;\n\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<g key={ `arc-${ index }` } { ...groupProps }>\n\t\t\t\t\t\t\t\t\t\t\t\t<path { ...pathProps } />\n\t\t\t\t\t\t\t\t\t\t\t\t{ showLabels && hasSpaceForLabel && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ providerTheme.labelBackgroundColor && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx={ centroidX - backgroundWidth / 2 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ty={ centroidY - backgroundHeight / 2 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={ backgroundWidth }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={ backgroundHeight }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill={ providerTheme.labelBackgroundColor }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trx={ 4 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\try={ 4 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<text\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx={ centroidX }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ty={ centroidY }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdy=\".33em\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill={ providerTheme.labelTextColor || '#333' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfontSize={ fontSize }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ arc.data.label }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</text>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t</Pie>\n\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t{ /* Render SVG children (like Group, Text) inside the SVG */ }\n\t\t\t\t\t\t{ ! allSegmentsHidden && svgChildren }\n\t\t\t\t\t</Group>\n\t\t\t\t</svg>\n\n\t\t\t\t{ showLegend && (\n\t\t\t\t\t<Legend\n\t\t\t\t\t\torientation={ legendOrientation }\n\t\t\t\t\t\tposition={ legendPosition }\n\t\t\t\t\t\talignment={ legendAlignment }\n\t\t\t\t\t\tmaxWidth={ legendMaxWidth }\n\t\t\t\t\t\ttextOverflow={ legendTextOverflow }\n\t\t\t\t\t\tlegendItemClassName={ legendItemClassName }\n\t\t\t\t\t\tclassName={ styles[ 'pie-chart-legend' ] }\n\t\t\t\t\t\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t\tinteractive={ legendInteractive }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t\t<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>\n\t\t\t\t\t\t<div role=\"tooltip\">\n\t\t\t\t\t\t\t<BaseTooltip data={ tooltipData } top={ 0 } left={ 0 } renderContainer={ false } />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</TooltipInPortal>\n\t\t\t\t) }\n\n\t\t\t\t{ /* Render HTML component children from PieChart.HTML */ }\n\t\t\t\t{ htmlChildren }\n\n\t\t\t\t{ /* Render other React children for backward compatibility */ }\n\t\t\t\t{ otherChildren }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst PieChartWithProvider: FC< PieChartProps > = props => {\n\tconst existingContext = useContext( GlobalChartsContext );\n\n\t// If we're already in a GlobalChartsProvider context, don't create a new one\n\tif ( existingContext ) {\n\t\treturn <PieChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<PieChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nPieChartWithProvider.displayName = 'PieChart';\n\n// Create PieChart with composition API\nconst PieChart = attachSubComponents( PieChartWithProvider, {\n\tLegend: Legend,\n\tSVG: ChartSVG,\n\tHTML: ChartHTML,\n} ) as PieChartComponent;\n\n// Create responsive PieChart with composition API\nconst PieChartResponsive = attachSubComponents(\n\twithResponsive< PieChartProps >( PieChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tSVG: ChartSVG,\n\t\tHTML: ChartHTML,\n\t}\n) as PieChartResponsiveComponent;\n\nexport { PieChartResponsive as default, PieChart as PieChartUnresponsive };\n","import 'css-chunk:src/components/pie-chart/pie-chart.module.scss';export default {\n  \"pie-chart\": \"a8ccharts-R12VhH\",\n  \"pie-chart--legend-top\": \"a8ccharts-eG7-zj\"\n};"]}