@automattic/charts 0.34.0 → 0.34.1

package/CHANGELOG.md

@@ -5,6 +5,10 @@ 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.34.1] - 2025-09-08
+### Fixed
+- Charts: fix Type error with legendValueDisplay [#45099]
+
 ## [0.34.0] - 2025-09-08
 ### Changed
 - Leaderboard Chart: Extend BaseChartProps [#45100]
@@ -437,6 +441,7 @@ 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.34.1]: https://github.com/Automattic/charts/compare/v0.34.0...v0.34.1
 [0.34.0]: https://github.com/Automattic/charts/compare/v0.33.0...v0.34.0
 [0.33.0]: https://github.com/Automattic/charts/compare/v0.32.0...v0.33.0
 [0.32.0]: https://github.com/Automattic/charts/compare/v0.31.0...v0.32.0

package/dist/{chunk-4J6P3XTQ.cjs → chunk-JRDN5LQ7.cjs}

@@ -69,6 +69,7 @@ var PieSemiCircleChartInternal = ({
   legendPosition = "bottom",
   legendAlignment = "center",
   legendShape = "circle",
+  legendValueDisplay = "percentage",
   label,
   note,
   className,
@@ -108,7 +109,10 @@ var PieSemiCircleChartInternal = ({
     }),
     [resolveGroupColor]
   );
-  const legendOptions = _react.useMemo.call(void 0, () => ({ showValues: true }), []);
+  const legendOptions = _react.useMemo.call(void 0, 
+    () => ({ showValues: true, legendValueDisplay }),
+    [legendValueDisplay]
+  );
   const legendItems = _chunkMFROL3SYcjs.useChartLegendItems.call(void 0, data, legendOptions);
   const { svgChildren, htmlChildren, otherChildren } = _chunk3Z526IL2cjs.useChartChildren.call(void 0, 
     children,
@@ -281,4 +285,4 @@ var PieSemiCircleChartResponsive = _chunkBS3VZTWUcjs.attachSubComponents.call(vo
 
 
 exports.PieSemiCircleChartResponsive = PieSemiCircleChartResponsive;
-//# sourceMappingURL=chunk-4J6P3XTQ.cjs.map
+//# sourceMappingURL=chunk-JRDN5LQ7.cjs.map

package/dist/chunk-JRDN5LQ7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-JRDN5LQ7.cjs","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-JRDN5LQ7.cjs","sourcesContent":[null,"import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Text } from '@visx/text';\nimport { useTooltip } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tGlobalChartsContext,\n} from '../../providers/chart-context';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-semi-circle-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage, Optional } from '../../types';\nimport type { LegendValueDisplay } from '../legend';\nimport type { ChartComponentWithComposition } from '../private/chart-composition';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport type { FC, MouseEvent, ReactNode } from 'react';\n\nconst PAD_ANGLE = 0.03; // Padding between segments\n\nexport interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Width of the chart in pixels; height would be half of this value calculated automatically.\n\t */\n\twidth?: number;\n\n\t/**\n\t * Thickness of the pie chart. A value between 0 and 1\n\t */\n\tthickness?: number;\n\n\t/**\n\t * Direction of chart rendering\n\t * true for clockwise, false for counter-clockwise\n\t */\n\tclockwise?: boolean;\n\n\t/**\n\t * Label text to display above the chart\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Note text to display below the label\n\t */\n\tnote?: string;\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 * 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\n// Base props type with optional responsive properties\ntype PieSemiCircleChartBaseProps = Optional< PieSemiCircleChartProps, 'width' >;\n\n// Composition API types\ntype PieSemiCircleChartComponent = ChartComponentWithComposition< PieSemiCircleChartBaseProps >;\ntype PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<\n\tPieSemiCircleChartBaseProps & ResponsiveConfig\n>;\n\nexport type ArcData = PieArcDatum< DataPointPercentage >;\n\n/**\n * Validates the semi-circle 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 is greater than 0\n\tconst totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );\n\tif ( totalPercentage <= 0 ) {\n\t\treturn { isValid: false, message: 'Invalid percentage total: Must be greater than 0' };\n\t}\n\n\treturn { isValid: true, message: '' };\n};\n\nconst PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth = 400,\n\tthickness = 0.4,\n\tclockwise = true,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendShape = 'circle',\n\tlegendValueDisplay = 'percentage',\n\tlabel,\n\tnote,\n\tclassName,\n\tchildren,\n} ) => {\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\tconst handleMouseMove = useCallback(\n\t\t( event: MouseEvent, arc: ArcData ) => {\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) return;\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: arc.data,\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tconst handleArcMouseMove = useCallback(\n\t\t( arc: ArcData ) => ( event: MouseEvent ) => {\n\t\t\thandleMouseMove( event, arc );\n\t\t},\n\t\t[ handleMouseMove ]\n\t);\n\n\t// Validate data first to get validation result\n\tconst { isValid, message } = validateData( data );\n\n\tconst { resolveGroupColor } = useGlobalChartsContext();\n\n\t// Define accessors with useMemo to avoid changing dependencies\n\tconst accessors = useMemo(\n\t\t() => ( {\n\t\t\tvalue: ( d: DataPointPercentage ) => d.value,\n\t\t\tsort: (\n\t\t\t\ta: DataPointPercentage & { index: number },\n\t\t\t\tb: DataPointPercentage & { index: number }\n\t\t\t) => b.value - a.value,\n\t\t\tfill: ( { group, index, color: overrideColor }: DataPointPercentage & { index: number } ) =>\n\t\t\t\tresolveGroupColor( { group, index, overrideColor } ),\n\t\t} ),\n\t\t[ resolveGroupColor ]\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 the reusable hook\n\tconst legendItems = useChartLegendItems( data, legendOptions );\n\n\t// Process children to extract compound components\n\tconst { svgChildren, htmlChildren, otherChildren } = useChartChildren(\n\t\tchildren,\n\t\t'PieSemiCircleChart'\n\t);\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tthickness,\n\t\t\tclockwise,\n\t\t} ),\n\t\t[ thickness, clockwise ]\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-semi-circle',\n\t\tisDataValid: isValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tif ( ! isValid ) {\n\t\treturn (\n\t\t\t<div className={ styles[ 'pie-semi-circle-chart' ] }>\n\t\t\t\t<svg width={ width } height={ width / 2 } data-testid=\"pie-chart-svg\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" textAnchor=\"middle\" className={ styles.error }>\n\t\t\t\t\t\t{ message }\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Calculate chart dimensions\n\t// TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.\n\tconst height = width / 2;\n\t// The chart only takes the height minus the legend height.\n\tconst chartHeight = height - ( showLegend && legendPosition === 'top' ? legendHeight : 0 );\n\tconst radius = Math.min( width / 2, chartHeight );\n\tconst innerRadius = radius * ( 1 - thickness );\n\n\t// Map data with index for color assignment\n\tconst dataWithIndex = data.map( ( d, index ) => ( {\n\t\t...d,\n\t\tindex,\n\t} ) );\n\n\t// Configure pie angles based on clockwise direction\n\tconst startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n\tconst endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\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: radius,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }\n\t\t\t\tdata-testid=\"pie-chart-container\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ radius }\n\t\t\t\t\tviewBox={ `0 0 ${ width } ${ chartHeight }` }\n\t\t\t\t\tdata-testid=\"pie-chart-svg\"\n\t\t\t\t>\n\t\t\t\t\t{ /* Main chart group centered horizontally and positioned at bottom */ }\n\t\t\t\t\t<Group top={ chartHeight } left={ width / 2 }>\n\t\t\t\t\t\t{ /* Pie chart */ }\n\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\touterRadius={ radius }\n\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\t\tpadAngle={ PAD_ANGLE }\n\t\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\t\tpieSort={ accessors.sort }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\treturn pie.arcs.map( arc => (\n\t\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\t\tonMouseMove={ handleArcMouseMove( arc ) }\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<path\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\tdata-testid=\"pie-segment\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t) );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t</Pie>\n\n\t\t\t\t\t\t{ /* Label and note text */ }\n\t\t\t\t\t\t<Group>\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\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -40 } // Position above the chart with space for note\n\t\t\t\t\t\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</Text>\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\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -20 } // Position between label and chart\n\t\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Group>\n\n\t\t\t\t\t\t{ /* Render SVG children from composition API */ }\n\t\t\t\t\t\t{ svgChildren }\n\t\t\t\t\t</Group>\n\t\t\t\t</svg>\n\n\t\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t\t<BaseTooltip\n\t\t\t\t\t\tdata={ {\n\t\t\t\t\t\t\tlabel: tooltipData.label,\n\t\t\t\t\t\t\tvalue: tooltipData.value,\n\t\t\t\t\t\t\tvalueDisplay: tooltipData.valueDisplay,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ttop={ tooltipTop || 0 }\n\t\t\t\t\t\tleft={ tooltipLeft || 0 }\n\t\t\t\t\t/>\n\t\t\t\t) }\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\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ /* Render HTML children from composition API */ }\n\t\t\t\t{ htmlChildren }\n\n\t\t\t\t{ /* Render any other children that aren't compound components */ }\n\t\t\t\t{ otherChildren }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst PieSemiCircleChartWithProvider: FC< PieSemiCircleChartProps > = 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 <PieSemiCircleChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<PieSemiCircleChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nPieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';\n\n// Create PieSemiCircleChart with composition API\nconst PieSemiCircleChart = attachSubComponents( PieSemiCircleChartWithProvider, {\n\tLegend: Legend,\n\tSVG: ChartSVG,\n\tHTML: ChartHTML,\n} ) as PieSemiCircleChartComponent;\n\n// Create responsive PieSemiCircleChart with composition API\nconst PieSemiCircleChartResponsive = attachSubComponents(\n\twithResponsive< PieSemiCircleChartProps >( PieSemiCircleChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tSVG: ChartSVG,\n\t\tHTML: ChartHTML,\n\t}\n) as PieSemiCircleChartResponsiveComponent;\n\nexport {\n\tPieSemiCircleChartResponsive as default,\n\tPieSemiCircleChart as PieSemiCircleChartUnresponsive,\n};\n","import 'css-chunk:src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n  \"pie-semi-circle-chart\": \"a8ccharts-r5jk9c\",\n  \"label\": \"a8ccharts-nPqOgD\",\n  \"note\": \"a8ccharts-LpBZQh\"\n};"]}

package/dist/{chunk-YPW7GVEY.js → chunk-LGCQRR2I.js}

@@ -69,6 +69,7 @@ var PieSemiCircleChartInternal = ({
   legendPosition = "bottom",
   legendAlignment = "center",
   legendShape = "circle",
+  legendValueDisplay = "percentage",
   label,
   note,
   className,
@@ -108,7 +109,10 @@ var PieSemiCircleChartInternal = ({
     }),
     [resolveGroupColor]
   );
-  const legendOptions = useMemo(() => ({ showValues: true }), []);
+  const legendOptions = useMemo(
+    () => ({ showValues: true, legendValueDisplay }),
+    [legendValueDisplay]
+  );
   const legendItems = useChartLegendItems(data, legendOptions);
   const { svgChildren, htmlChildren, otherChildren } = useChartChildren(
     children,
@@ -281,4 +285,4 @@ var PieSemiCircleChartResponsive = attachSubComponents(
 export {
   PieSemiCircleChartResponsive
 };
-//# sourceMappingURL=chunk-YPW7GVEY.js.map
+//# sourceMappingURL=chunk-LGCQRR2I.js.map

package/dist/chunk-LGCQRR2I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"sourcesContent":["import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Text } from '@visx/text';\nimport { useTooltip } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tGlobalChartsContext,\n} from '../../providers/chart-context';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-semi-circle-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage, Optional } from '../../types';\nimport type { LegendValueDisplay } from '../legend';\nimport type { ChartComponentWithComposition } from '../private/chart-composition';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport type { FC, MouseEvent, ReactNode } from 'react';\n\nconst PAD_ANGLE = 0.03; // Padding between segments\n\nexport interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Width of the chart in pixels; height would be half of this value calculated automatically.\n\t */\n\twidth?: number;\n\n\t/**\n\t * Thickness of the pie chart. A value between 0 and 1\n\t */\n\tthickness?: number;\n\n\t/**\n\t * Direction of chart rendering\n\t * true for clockwise, false for counter-clockwise\n\t */\n\tclockwise?: boolean;\n\n\t/**\n\t * Label text to display above the chart\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Note text to display below the label\n\t */\n\tnote?: string;\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 * 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\n// Base props type with optional responsive properties\ntype PieSemiCircleChartBaseProps = Optional< PieSemiCircleChartProps, 'width' >;\n\n// Composition API types\ntype PieSemiCircleChartComponent = ChartComponentWithComposition< PieSemiCircleChartBaseProps >;\ntype PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<\n\tPieSemiCircleChartBaseProps & ResponsiveConfig\n>;\n\nexport type ArcData = PieArcDatum< DataPointPercentage >;\n\n/**\n * Validates the semi-circle 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 is greater than 0\n\tconst totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );\n\tif ( totalPercentage <= 0 ) {\n\t\treturn { isValid: false, message: 'Invalid percentage total: Must be greater than 0' };\n\t}\n\n\treturn { isValid: true, message: '' };\n};\n\nconst PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth = 400,\n\tthickness = 0.4,\n\tclockwise = true,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendShape = 'circle',\n\tlegendValueDisplay = 'percentage',\n\tlabel,\n\tnote,\n\tclassName,\n\tchildren,\n} ) => {\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\tconst handleMouseMove = useCallback(\n\t\t( event: MouseEvent, arc: ArcData ) => {\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) return;\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: arc.data,\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tconst handleArcMouseMove = useCallback(\n\t\t( arc: ArcData ) => ( event: MouseEvent ) => {\n\t\t\thandleMouseMove( event, arc );\n\t\t},\n\t\t[ handleMouseMove ]\n\t);\n\n\t// Validate data first to get validation result\n\tconst { isValid, message } = validateData( data );\n\n\tconst { resolveGroupColor } = useGlobalChartsContext();\n\n\t// Define accessors with useMemo to avoid changing dependencies\n\tconst accessors = useMemo(\n\t\t() => ( {\n\t\t\tvalue: ( d: DataPointPercentage ) => d.value,\n\t\t\tsort: (\n\t\t\t\ta: DataPointPercentage & { index: number },\n\t\t\t\tb: DataPointPercentage & { index: number }\n\t\t\t) => b.value - a.value,\n\t\t\tfill: ( { group, index, color: overrideColor }: DataPointPercentage & { index: number } ) =>\n\t\t\t\tresolveGroupColor( { group, index, overrideColor } ),\n\t\t} ),\n\t\t[ resolveGroupColor ]\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 the reusable hook\n\tconst legendItems = useChartLegendItems( data, legendOptions );\n\n\t// Process children to extract compound components\n\tconst { svgChildren, htmlChildren, otherChildren } = useChartChildren(\n\t\tchildren,\n\t\t'PieSemiCircleChart'\n\t);\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tthickness,\n\t\t\tclockwise,\n\t\t} ),\n\t\t[ thickness, clockwise ]\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-semi-circle',\n\t\tisDataValid: isValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tif ( ! isValid ) {\n\t\treturn (\n\t\t\t<div className={ styles[ 'pie-semi-circle-chart' ] }>\n\t\t\t\t<svg width={ width } height={ width / 2 } data-testid=\"pie-chart-svg\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" textAnchor=\"middle\" className={ styles.error }>\n\t\t\t\t\t\t{ message }\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Calculate chart dimensions\n\t// TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.\n\tconst height = width / 2;\n\t// The chart only takes the height minus the legend height.\n\tconst chartHeight = height - ( showLegend && legendPosition === 'top' ? legendHeight : 0 );\n\tconst radius = Math.min( width / 2, chartHeight );\n\tconst innerRadius = radius * ( 1 - thickness );\n\n\t// Map data with index for color assignment\n\tconst dataWithIndex = data.map( ( d, index ) => ( {\n\t\t...d,\n\t\tindex,\n\t} ) );\n\n\t// Configure pie angles based on clockwise direction\n\tconst startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n\tconst endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\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: radius,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }\n\t\t\t\tdata-testid=\"pie-chart-container\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ radius }\n\t\t\t\t\tviewBox={ `0 0 ${ width } ${ chartHeight }` }\n\t\t\t\t\tdata-testid=\"pie-chart-svg\"\n\t\t\t\t>\n\t\t\t\t\t{ /* Main chart group centered horizontally and positioned at bottom */ }\n\t\t\t\t\t<Group top={ chartHeight } left={ width / 2 }>\n\t\t\t\t\t\t{ /* Pie chart */ }\n\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\touterRadius={ radius }\n\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\t\tpadAngle={ PAD_ANGLE }\n\t\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\t\tpieSort={ accessors.sort }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\treturn pie.arcs.map( arc => (\n\t\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\t\tonMouseMove={ handleArcMouseMove( arc ) }\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<path\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\tdata-testid=\"pie-segment\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t) );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t</Pie>\n\n\t\t\t\t\t\t{ /* Label and note text */ }\n\t\t\t\t\t\t<Group>\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\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -40 } // Position above the chart with space for note\n\t\t\t\t\t\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</Text>\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\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -20 } // Position between label and chart\n\t\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Group>\n\n\t\t\t\t\t\t{ /* Render SVG children from composition API */ }\n\t\t\t\t\t\t{ svgChildren }\n\t\t\t\t\t</Group>\n\t\t\t\t</svg>\n\n\t\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t\t<BaseTooltip\n\t\t\t\t\t\tdata={ {\n\t\t\t\t\t\t\tlabel: tooltipData.label,\n\t\t\t\t\t\t\tvalue: tooltipData.value,\n\t\t\t\t\t\t\tvalueDisplay: tooltipData.valueDisplay,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ttop={ tooltipTop || 0 }\n\t\t\t\t\t\tleft={ tooltipLeft || 0 }\n\t\t\t\t\t/>\n\t\t\t\t) }\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\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ /* Render HTML children from composition API */ }\n\t\t\t\t{ htmlChildren }\n\n\t\t\t\t{ /* Render any other children that aren't compound components */ }\n\t\t\t\t{ otherChildren }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst PieSemiCircleChartWithProvider: FC< PieSemiCircleChartProps > = 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 <PieSemiCircleChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<PieSemiCircleChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nPieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';\n\n// Create PieSemiCircleChart with composition API\nconst PieSemiCircleChart = attachSubComponents( PieSemiCircleChartWithProvider, {\n\tLegend: Legend,\n\tSVG: ChartSVG,\n\tHTML: ChartHTML,\n} ) as PieSemiCircleChartComponent;\n\n// Create responsive PieSemiCircleChart with composition API\nconst PieSemiCircleChartResponsive = attachSubComponents(\n\twithResponsive< PieSemiCircleChartProps >( PieSemiCircleChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tSVG: ChartSVG,\n\t\tHTML: ChartHTML,\n\t}\n) as PieSemiCircleChartResponsiveComponent;\n\nexport {\n\tPieSemiCircleChartResponsive as default,\n\tPieSemiCircleChart as PieSemiCircleChartUnresponsive,\n};\n","import 'css-chunk:src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n  \"pie-semi-circle-chart\": \"a8ccharts-r5jk9c\",\n  \"label\": \"a8ccharts-nPqOgD\",\n  \"note\": \"a8ccharts-LpBZQh\"\n};"],"mappings":"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","names":[]}

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

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk4J6P3XTQcjs = require('../../chunk-4J6P3XTQ.cjs');
+var _chunkJRDN5LQ7cjs = require('../../chunk-JRDN5LQ7.cjs');
 require('../../chunk-3Z526IL2.cjs');
 require('../../chunk-FX2PTUFC.cjs');
 require('../../chunk-H43FBWWZ.cjs');
@@ -9,5 +9,5 @@ require('../../chunk-BS3VZTWU.cjs');
 require('../../chunk-EMMSS5I5.cjs');
 
 
-exports.PieSemiCircleChart = _chunk4J6P3XTQcjs.PieSemiCircleChartResponsive;
+exports.PieSemiCircleChart = _chunkJRDN5LQ7cjs.PieSemiCircleChartResponsive;
 //# sourceMappingURL=index.cjs.map

package/dist/components/pie-semi-circle-chart/index.d.cts

@@ -1,5 +1,6 @@
 import { O as Optional, B as BaseChartProps, d as DataPointPercentage } from '../../types-pVkkGIaQ.cjs';
 import { ReactNode } from 'react';
+import { LegendValueDisplay } from '../legend/index.cjs';
 import { C as ChartComponentWithComposition } from '../../types-CqnQHiIy.cjs';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.cjs';
 import { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
@@ -41,6 +42,14 @@ interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]>
      * Use the children prop to render additional elements on the chart.
      */
     children?: ReactNode;
+    /**
+     * What type of value to display in the legend when showValues is true.
+     * - 'percentage': Shows percentage values (e.g., "23%") [default]
+     * - 'value': Shows raw numeric values (e.g., "30000")
+     * - 'valueDisplay': Shows formatted values (e.g., "30K")
+     * - 'none': Shows no values, only labels
+     */
+    legendValueDisplay?: LegendValueDisplay;
 }
 type PieSemiCircleChartBaseProps = Optional<PieSemiCircleChartProps, 'width'>;
 type PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<PieSemiCircleChartBaseProps & ResponsiveConfig>;

package/dist/components/pie-semi-circle-chart/index.d.ts

@@ -1,5 +1,6 @@
 import { O as Optional, B as BaseChartProps, d as DataPointPercentage } from '../../types-pVkkGIaQ.js';
 import { ReactNode } from 'react';
+import { LegendValueDisplay } from '../legend/index.js';
 import { C as ChartComponentWithComposition } from '../../types-UkvpmJXU.js';
 import { R as ResponsiveConfig } from '../../with-responsive-Cp2qnQPo.js';
 import { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
@@ -41,6 +42,14 @@ interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]>
      * Use the children prop to render additional elements on the chart.
      */
     children?: ReactNode;
+    /**
+     * What type of value to display in the legend when showValues is true.
+     * - 'percentage': Shows percentage values (e.g., "23%") [default]
+     * - 'value': Shows raw numeric values (e.g., "30000")
+     * - 'valueDisplay': Shows formatted values (e.g., "30K")
+     * - 'none': Shows no values, only labels
+     */
+    legendValueDisplay?: LegendValueDisplay;
 }
 type PieSemiCircleChartBaseProps = Optional<PieSemiCircleChartProps, 'width'>;
 type PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<PieSemiCircleChartBaseProps & ResponsiveConfig>;

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

@@ -1,6 +1,6 @@
 import {
   PieSemiCircleChartResponsive
-} from "../../chunk-YPW7GVEY.js";
+} from "../../chunk-LGCQRR2I.js";
 import "../../chunk-D3DZT2EK.js";
 import "../../chunk-TYYW4BG3.js";
 import "../../chunk-6KOC7ZWU.js";

package/dist/index.cjs

@@ -6,7 +6,7 @@ var _chunkRXE5VSSCcjs = require('./chunk-RXE5VSSC.cjs');
 var _chunkW33ZCFIVcjs = require('./chunk-W33ZCFIV.cjs');
 
 
-var _chunk4J6P3XTQcjs = require('./chunk-4J6P3XTQ.cjs');
+var _chunkJRDN5LQ7cjs = require('./chunk-JRDN5LQ7.cjs');
 require('./chunk-3Z526IL2.cjs');
 require('./chunk-7OZEQ5HE.cjs');
 
@@ -59,5 +59,5 @@ require('./chunk-EMMSS5I5.cjs');
 
 
 
-exports.BarChart = _chunkCEOMF3BNcjs.BarChartResponsive; exports.BarListChart = _chunkV3VAJ7ZPcjs.BarListChartResponsive; exports.BaseTooltip = _chunkH43FBWWZcjs.BaseTooltip; exports.ConversionFunnelChart = _chunkKNTSYQPXcjs.conversion_funnel_chart_default; exports.GlobalChartsContext = _chunkBS3VZTWUcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkBS3VZTWUcjs.GlobalChartsProvider; exports.LeaderboardChart = _chunkKXOPD63Rcjs.leaderboard_chart_default; exports.Legend = _chunkMFROL3SYcjs.Legend; exports.LineChart = _chunkRXE5VSSCcjs.LineChartResponsive; exports.PieChart = _chunkW33ZCFIVcjs.PieChartResponsive; exports.PieSemiCircleChart = _chunk4J6P3XTQcjs.PieSemiCircleChartResponsive; exports.ThemeProvider = _chunkBS3VZTWUcjs.ThemeProvider; exports.defaultTheme = _chunkBS3VZTWUcjs.defaultTheme; exports.jetpackTheme = _chunkBS3VZTWUcjs.jetpackTheme; exports.useChartLegendItems = _chunkMFROL3SYcjs.useChartLegendItems; exports.useGlobalChartsContext = _chunkBS3VZTWUcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkBS3VZTWUcjs.useGlobalChartsTheme; exports.wooTheme = _chunkBS3VZTWUcjs.wooTheme;
+exports.BarChart = _chunkCEOMF3BNcjs.BarChartResponsive; exports.BarListChart = _chunkV3VAJ7ZPcjs.BarListChartResponsive; exports.BaseTooltip = _chunkH43FBWWZcjs.BaseTooltip; exports.ConversionFunnelChart = _chunkKNTSYQPXcjs.conversion_funnel_chart_default; exports.GlobalChartsContext = _chunkBS3VZTWUcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkBS3VZTWUcjs.GlobalChartsProvider; exports.LeaderboardChart = _chunkKXOPD63Rcjs.leaderboard_chart_default; exports.Legend = _chunkMFROL3SYcjs.Legend; exports.LineChart = _chunkRXE5VSSCcjs.LineChartResponsive; exports.PieChart = _chunkW33ZCFIVcjs.PieChartResponsive; exports.PieSemiCircleChart = _chunkJRDN5LQ7cjs.PieSemiCircleChartResponsive; exports.ThemeProvider = _chunkBS3VZTWUcjs.ThemeProvider; exports.defaultTheme = _chunkBS3VZTWUcjs.defaultTheme; exports.jetpackTheme = _chunkBS3VZTWUcjs.jetpackTheme; exports.useChartLegendItems = _chunkMFROL3SYcjs.useChartLegendItems; exports.useGlobalChartsContext = _chunkBS3VZTWUcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkBS3VZTWUcjs.useGlobalChartsTheme; exports.wooTheme = _chunkBS3VZTWUcjs.wooTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -6,7 +6,7 @@ import {
 } from "./chunk-CZDSDFHD.js";
 import {
   PieSemiCircleChartResponsive
-} from "./chunk-YPW7GVEY.js";
+} from "./chunk-LGCQRR2I.js";
 import "./chunk-D3DZT2EK.js";
 import "./chunk-NFRB2POF.js";
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.34.0",
+	"version": "0.34.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

package/src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -21,6 +21,7 @@ import { withResponsive } from '../private/with-responsive';
 import { BaseTooltip } from '../tooltip';
 import styles from './pie-semi-circle-chart.module.scss';
 import type { BaseChartProps, DataPointPercentage, Optional } from '../../types';
+import type { LegendValueDisplay } from '../legend';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
@@ -59,6 +60,15 @@ export interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercen
 	 * Use the children prop to render additional elements on the chart.
 	 */
 	children?: ReactNode;
+
+	/**
+	 * What type of value to display in the legend when showValues is true.
+	 * - 'percentage': Shows percentage values (e.g., "23%") [default]
+	 * - 'value': Shows raw numeric values (e.g., "30000")
+	 * - 'valueDisplay': Shows formatted values (e.g., "30K")
+	 * - 'none': Shows no values, only labels
+	 */
+	legendValueDisplay?: LegendValueDisplay;
 }
 
 // Base props type with optional responsive properties
@@ -109,6 +119,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	legendPosition = 'bottom',
 	legendAlignment = 'center',
 	legendShape = 'circle',
+	legendValueDisplay = 'percentage',
 	label,
 	note,
 	className,
@@ -164,7 +175,10 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	);
 
 	// Memoize legend options to prevent unnecessary re-calculations
-	const legendOptions = useMemo( () => ( { showValues: true } ), [] );
+	const legendOptions = useMemo(
+		() => ( { showValues: true, legendValueDisplay } ),
+		[ legendValueDisplay ]
+	);
 
 	// Create legend items using the reusable hook
 	const legendItems = useChartLegendItems( data, legendOptions );

package/dist/chunk-4J6P3XTQ.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-4J6P3XTQ.cjs","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"names":[],"mappings":"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","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-4J6P3XTQ.cjs","sourcesContent":[null,"import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Text } from '@visx/text';\nimport { useTooltip } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tGlobalChartsContext,\n} from '../../providers/chart-context';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-semi-circle-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage, Optional } from '../../types';\nimport type { ChartComponentWithComposition } from '../private/chart-composition';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport type { FC, MouseEvent, ReactNode } from 'react';\n\nconst PAD_ANGLE = 0.03; // Padding between segments\n\nexport interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Width of the chart in pixels; height would be half of this value calculated automatically.\n\t */\n\twidth?: number;\n\n\t/**\n\t * Thickness of the pie chart. A value between 0 and 1\n\t */\n\tthickness?: number;\n\n\t/**\n\t * Direction of chart rendering\n\t * true for clockwise, false for counter-clockwise\n\t */\n\tclockwise?: boolean;\n\n\t/**\n\t * Label text to display above the chart\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Note text to display below the label\n\t */\n\tnote?: string;\n\n\t/**\n\t * Use the children prop to render additional elements on the chart.\n\t */\n\tchildren?: ReactNode;\n}\n\n// Base props type with optional responsive properties\ntype PieSemiCircleChartBaseProps = Optional< PieSemiCircleChartProps, 'width' >;\n\n// Composition API types\ntype PieSemiCircleChartComponent = ChartComponentWithComposition< PieSemiCircleChartBaseProps >;\ntype PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<\n\tPieSemiCircleChartBaseProps & ResponsiveConfig\n>;\n\nexport type ArcData = PieArcDatum< DataPointPercentage >;\n\n/**\n * Validates the semi-circle 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 is greater than 0\n\tconst totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );\n\tif ( totalPercentage <= 0 ) {\n\t\treturn { isValid: false, message: 'Invalid percentage total: Must be greater than 0' };\n\t}\n\n\treturn { isValid: true, message: '' };\n};\n\nconst PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth = 400,\n\tthickness = 0.4,\n\tclockwise = true,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendShape = 'circle',\n\tlabel,\n\tnote,\n\tclassName,\n\tchildren,\n} ) => {\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\tconst handleMouseMove = useCallback(\n\t\t( event: MouseEvent, arc: ArcData ) => {\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) return;\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: arc.data,\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tconst handleArcMouseMove = useCallback(\n\t\t( arc: ArcData ) => ( event: MouseEvent ) => {\n\t\t\thandleMouseMove( event, arc );\n\t\t},\n\t\t[ handleMouseMove ]\n\t);\n\n\t// Validate data first to get validation result\n\tconst { isValid, message } = validateData( data );\n\n\tconst { resolveGroupColor } = useGlobalChartsContext();\n\n\t// Define accessors with useMemo to avoid changing dependencies\n\tconst accessors = useMemo(\n\t\t() => ( {\n\t\t\tvalue: ( d: DataPointPercentage ) => d.value,\n\t\t\tsort: (\n\t\t\t\ta: DataPointPercentage & { index: number },\n\t\t\t\tb: DataPointPercentage & { index: number }\n\t\t\t) => b.value - a.value,\n\t\t\tfill: ( { group, index, color: overrideColor }: DataPointPercentage & { index: number } ) =>\n\t\t\t\tresolveGroupColor( { group, index, overrideColor } ),\n\t\t} ),\n\t\t[ resolveGroupColor ]\n\t);\n\n\t// Memoize legend options to prevent unnecessary re-calculations\n\tconst legendOptions = useMemo( () => ( { showValues: true } ), [] );\n\n\t// Create legend items using the reusable hook\n\tconst legendItems = useChartLegendItems( data, legendOptions );\n\n\t// Process children to extract compound components\n\tconst { svgChildren, htmlChildren, otherChildren } = useChartChildren(\n\t\tchildren,\n\t\t'PieSemiCircleChart'\n\t);\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tthickness,\n\t\t\tclockwise,\n\t\t} ),\n\t\t[ thickness, clockwise ]\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-semi-circle',\n\t\tisDataValid: isValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tif ( ! isValid ) {\n\t\treturn (\n\t\t\t<div className={ styles[ 'pie-semi-circle-chart' ] }>\n\t\t\t\t<svg width={ width } height={ width / 2 } data-testid=\"pie-chart-svg\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" textAnchor=\"middle\" className={ styles.error }>\n\t\t\t\t\t\t{ message }\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Calculate chart dimensions\n\t// TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.\n\tconst height = width / 2;\n\t// The chart only takes the height minus the legend height.\n\tconst chartHeight = height - ( showLegend && legendPosition === 'top' ? legendHeight : 0 );\n\tconst radius = Math.min( width / 2, chartHeight );\n\tconst innerRadius = radius * ( 1 - thickness );\n\n\t// Map data with index for color assignment\n\tconst dataWithIndex = data.map( ( d, index ) => ( {\n\t\t...d,\n\t\tindex,\n\t} ) );\n\n\t// Configure pie angles based on clockwise direction\n\tconst startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n\tconst endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\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: radius,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }\n\t\t\t\tdata-testid=\"pie-chart-container\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ radius }\n\t\t\t\t\tviewBox={ `0 0 ${ width } ${ chartHeight }` }\n\t\t\t\t\tdata-testid=\"pie-chart-svg\"\n\t\t\t\t>\n\t\t\t\t\t{ /* Main chart group centered horizontally and positioned at bottom */ }\n\t\t\t\t\t<Group top={ chartHeight } left={ width / 2 }>\n\t\t\t\t\t\t{ /* Pie chart */ }\n\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\touterRadius={ radius }\n\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\t\tpadAngle={ PAD_ANGLE }\n\t\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\t\tpieSort={ accessors.sort }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\treturn pie.arcs.map( arc => (\n\t\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\t\tonMouseMove={ handleArcMouseMove( arc ) }\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<path\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\tdata-testid=\"pie-segment\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t) );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t</Pie>\n\n\t\t\t\t\t\t{ /* Label and note text */ }\n\t\t\t\t\t\t<Group>\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\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -40 } // Position above the chart with space for note\n\t\t\t\t\t\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</Text>\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\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -20 } // Position between label and chart\n\t\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Group>\n\n\t\t\t\t\t\t{ /* Render SVG children from composition API */ }\n\t\t\t\t\t\t{ svgChildren }\n\t\t\t\t\t</Group>\n\t\t\t\t</svg>\n\n\t\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t\t<BaseTooltip\n\t\t\t\t\t\tdata={ {\n\t\t\t\t\t\t\tlabel: tooltipData.label,\n\t\t\t\t\t\t\tvalue: tooltipData.value,\n\t\t\t\t\t\t\tvalueDisplay: tooltipData.valueDisplay,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ttop={ tooltipTop || 0 }\n\t\t\t\t\t\tleft={ tooltipLeft || 0 }\n\t\t\t\t\t/>\n\t\t\t\t) }\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\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ /* Render HTML children from composition API */ }\n\t\t\t\t{ htmlChildren }\n\n\t\t\t\t{ /* Render any other children that aren't compound components */ }\n\t\t\t\t{ otherChildren }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst PieSemiCircleChartWithProvider: FC< PieSemiCircleChartProps > = 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 <PieSemiCircleChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<PieSemiCircleChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nPieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';\n\n// Create PieSemiCircleChart with composition API\nconst PieSemiCircleChart = attachSubComponents( PieSemiCircleChartWithProvider, {\n\tLegend: Legend,\n\tSVG: ChartSVG,\n\tHTML: ChartHTML,\n} ) as PieSemiCircleChartComponent;\n\n// Create responsive PieSemiCircleChart with composition API\nconst PieSemiCircleChartResponsive = attachSubComponents(\n\twithResponsive< PieSemiCircleChartProps >( PieSemiCircleChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tSVG: ChartSVG,\n\t\tHTML: ChartHTML,\n\t}\n) as PieSemiCircleChartResponsiveComponent;\n\nexport {\n\tPieSemiCircleChartResponsive as default,\n\tPieSemiCircleChart as PieSemiCircleChartUnresponsive,\n};\n","import 'css-chunk:src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n  \"pie-semi-circle-chart\": \"a8ccharts-r5jk9c\",\n  \"label\": \"a8ccharts-nPqOgD\",\n  \"note\": \"a8ccharts-LpBZQh\"\n};"]}

package/dist/chunk-YPW7GVEY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/pie-semi-circle-chart/pie-semi-circle-chart.tsx","../src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss"],"sourcesContent":["import { localPoint } from '@visx/event';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Text } from '@visx/text';\nimport { useTooltip } from '@visx/tooltip';\nimport clsx from 'clsx';\nimport { useCallback, useContext, useMemo } from 'react';\nimport { useElementHeight } from '../../hooks';\nimport {\n\tGlobalChartsProvider,\n\tuseChartId,\n\tuseChartRegistration,\n\tuseGlobalChartsContext,\n\tGlobalChartsContext,\n} from '../../providers/chart-context';\nimport { attachSubComponents } from '../../utils';\nimport { Legend, useChartLegendItems } from '../legend';\nimport { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';\nimport { SingleChartContext } from '../private/single-chart-context';\nimport { withResponsive } from '../private/with-responsive';\nimport { BaseTooltip } from '../tooltip';\nimport styles from './pie-semi-circle-chart.module.scss';\nimport type { BaseChartProps, DataPointPercentage, Optional } from '../../types';\nimport type { ChartComponentWithComposition } from '../private/chart-composition';\nimport type { ResponsiveConfig } from '../private/with-responsive';\nimport type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport type { FC, MouseEvent, ReactNode } from 'react';\n\nconst PAD_ANGLE = 0.03; // Padding between segments\n\nexport interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {\n\t/**\n\t * Width of the chart in pixels; height would be half of this value calculated automatically.\n\t */\n\twidth?: number;\n\n\t/**\n\t * Thickness of the pie chart. A value between 0 and 1\n\t */\n\tthickness?: number;\n\n\t/**\n\t * Direction of chart rendering\n\t * true for clockwise, false for counter-clockwise\n\t */\n\tclockwise?: boolean;\n\n\t/**\n\t * Label text to display above the chart\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Note text to display below the label\n\t */\n\tnote?: string;\n\n\t/**\n\t * Use the children prop to render additional elements on the chart.\n\t */\n\tchildren?: ReactNode;\n}\n\n// Base props type with optional responsive properties\ntype PieSemiCircleChartBaseProps = Optional< PieSemiCircleChartProps, 'width' >;\n\n// Composition API types\ntype PieSemiCircleChartComponent = ChartComponentWithComposition< PieSemiCircleChartBaseProps >;\ntype PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<\n\tPieSemiCircleChartBaseProps & ResponsiveConfig\n>;\n\nexport type ArcData = PieArcDatum< DataPointPercentage >;\n\n/**\n * Validates the semi-circle 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 is greater than 0\n\tconst totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );\n\tif ( totalPercentage <= 0 ) {\n\t\treturn { isValid: false, message: 'Invalid percentage total: Must be greater than 0' };\n\t}\n\n\treturn { isValid: true, message: '' };\n};\n\nconst PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {\n\tdata,\n\tchartId: providedChartId,\n\twidth = 400,\n\tthickness = 0.4,\n\tclockwise = true,\n\twithTooltips = false,\n\tshowLegend = false,\n\tlegendOrientation = 'horizontal',\n\tlegendPosition = 'bottom',\n\tlegendAlignment = 'center',\n\tlegendShape = 'circle',\n\tlabel,\n\tnote,\n\tclassName,\n\tchildren,\n} ) => {\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\tconst handleMouseMove = useCallback(\n\t\t( event: MouseEvent, arc: ArcData ) => {\n\t\t\tconst coords = localPoint( event );\n\t\t\tif ( ! coords ) return;\n\n\t\t\tshowTooltip( {\n\t\t\t\ttooltipData: arc.data,\n\t\t\t\ttooltipLeft: coords.x,\n\t\t\t\ttooltipTop: coords.y - 10,\n\t\t\t} );\n\t\t},\n\t\t[ showTooltip ]\n\t);\n\n\tconst handleMouseLeave = useCallback( () => {\n\t\thideTooltip();\n\t}, [ hideTooltip ] );\n\n\tconst handleArcMouseMove = useCallback(\n\t\t( arc: ArcData ) => ( event: MouseEvent ) => {\n\t\t\thandleMouseMove( event, arc );\n\t\t},\n\t\t[ handleMouseMove ]\n\t);\n\n\t// Validate data first to get validation result\n\tconst { isValid, message } = validateData( data );\n\n\tconst { resolveGroupColor } = useGlobalChartsContext();\n\n\t// Define accessors with useMemo to avoid changing dependencies\n\tconst accessors = useMemo(\n\t\t() => ( {\n\t\t\tvalue: ( d: DataPointPercentage ) => d.value,\n\t\t\tsort: (\n\t\t\t\ta: DataPointPercentage & { index: number },\n\t\t\t\tb: DataPointPercentage & { index: number }\n\t\t\t) => b.value - a.value,\n\t\t\tfill: ( { group, index, color: overrideColor }: DataPointPercentage & { index: number } ) =>\n\t\t\t\tresolveGroupColor( { group, index, overrideColor } ),\n\t\t} ),\n\t\t[ resolveGroupColor ]\n\t);\n\n\t// Memoize legend options to prevent unnecessary re-calculations\n\tconst legendOptions = useMemo( () => ( { showValues: true } ), [] );\n\n\t// Create legend items using the reusable hook\n\tconst legendItems = useChartLegendItems( data, legendOptions );\n\n\t// Process children to extract compound components\n\tconst { svgChildren, htmlChildren, otherChildren } = useChartChildren(\n\t\tchildren,\n\t\t'PieSemiCircleChart'\n\t);\n\n\t// Memoize metadata to prevent unnecessary re-registration\n\tconst chartMetadata = useMemo(\n\t\t() => ( {\n\t\t\tthickness,\n\t\t\tclockwise,\n\t\t} ),\n\t\t[ thickness, clockwise ]\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-semi-circle',\n\t\tisDataValid: isValid,\n\t\tmetadata: chartMetadata,\n\t} );\n\n\tif ( ! isValid ) {\n\t\treturn (\n\t\t\t<div className={ styles[ 'pie-semi-circle-chart' ] }>\n\t\t\t\t<svg width={ width } height={ width / 2 } data-testid=\"pie-chart-svg\">\n\t\t\t\t\t<text x=\"50%\" y=\"50%\" textAnchor=\"middle\" className={ styles.error }>\n\t\t\t\t\t\t{ message }\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Calculate chart dimensions\n\t// TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.\n\tconst height = width / 2;\n\t// The chart only takes the height minus the legend height.\n\tconst chartHeight = height - ( showLegend && legendPosition === 'top' ? legendHeight : 0 );\n\tconst radius = Math.min( width / 2, chartHeight );\n\tconst innerRadius = radius * ( 1 - thickness );\n\n\t// Map data with index for color assignment\n\tconst dataWithIndex = data.map( ( d, index ) => ( {\n\t\t...d,\n\t\tindex,\n\t} ) );\n\n\t// Configure pie angles based on clockwise direction\n\tconst startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;\n\tconst endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;\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: radius,\n\t\t\t} }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ], className ) }\n\t\t\t\tdata-testid=\"pie-chart-container\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: showLegend && legendPosition === 'top' ? 'column-reverse' : 'column',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ radius }\n\t\t\t\t\tviewBox={ `0 0 ${ width } ${ chartHeight }` }\n\t\t\t\t\tdata-testid=\"pie-chart-svg\"\n\t\t\t\t>\n\t\t\t\t\t{ /* Main chart group centered horizontally and positioned at bottom */ }\n\t\t\t\t\t<Group top={ chartHeight } left={ width / 2 }>\n\t\t\t\t\t\t{ /* Pie chart */ }\n\t\t\t\t\t\t<Pie< DataPointPercentage & { index: number } >\n\t\t\t\t\t\t\tdata={ dataWithIndex }\n\t\t\t\t\t\t\tpieValue={ accessors.value }\n\t\t\t\t\t\t\touterRadius={ radius }\n\t\t\t\t\t\t\tinnerRadius={ innerRadius }\n\t\t\t\t\t\t\tcornerRadius={ 3 }\n\t\t\t\t\t\t\tpadAngle={ PAD_ANGLE }\n\t\t\t\t\t\t\tstartAngle={ startAngle }\n\t\t\t\t\t\t\tendAngle={ endAngle }\n\t\t\t\t\t\t\tpieSort={ accessors.sort }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ pie => {\n\t\t\t\t\t\t\t\treturn pie.arcs.map( arc => (\n\t\t\t\t\t\t\t\t\t<g\n\t\t\t\t\t\t\t\t\t\tkey={ arc.data.label }\n\t\t\t\t\t\t\t\t\t\tonMouseMove={ handleArcMouseMove( arc ) }\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={ handleMouseLeave }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<path\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\tdata-testid=\"pie-segment\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</g>\n\t\t\t\t\t\t\t\t) );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t</Pie>\n\n\t\t\t\t\t\t{ /* Label and note text */ }\n\t\t\t\t\t\t<Group>\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\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -40 } // Position above the chart with space for note\n\t\t\t\t\t\t\t\tclassName={ styles.label }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</Text>\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\tverticalAnchor=\"start\"\n\t\t\t\t\t\t\t\ty={ -20 } // Position between label and chart\n\t\t\t\t\t\t\t\tclassName={ styles.note }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ note }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Group>\n\n\t\t\t\t\t\t{ /* Render SVG children from composition API */ }\n\t\t\t\t\t\t{ svgChildren }\n\t\t\t\t\t</Group>\n\t\t\t\t</svg>\n\n\t\t\t\t{ withTooltips && tooltipOpen && tooltipData && (\n\t\t\t\t\t<BaseTooltip\n\t\t\t\t\t\tdata={ {\n\t\t\t\t\t\t\tlabel: tooltipData.label,\n\t\t\t\t\t\t\tvalue: tooltipData.value,\n\t\t\t\t\t\t\tvalueDisplay: tooltipData.valueDisplay,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ttop={ tooltipTop || 0 }\n\t\t\t\t\t\tleft={ tooltipLeft || 0 }\n\t\t\t\t\t/>\n\t\t\t\t) }\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\tshape={ legendShape }\n\t\t\t\t\t\tref={ legendRef }\n\t\t\t\t\t\tchartId={ chartId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ /* Render HTML children from composition API */ }\n\t\t\t\t{ htmlChildren }\n\n\t\t\t\t{ /* Render any other children that aren't compound components */ }\n\t\t\t\t{ otherChildren }\n\t\t\t</div>\n\t\t</SingleChartContext.Provider>\n\t);\n};\n\nconst PieSemiCircleChartWithProvider: FC< PieSemiCircleChartProps > = 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 <PieSemiCircleChartInternal { ...props } />;\n\t}\n\n\t// Otherwise, create our own GlobalChartsProvider\n\treturn (\n\t\t<GlobalChartsProvider>\n\t\t\t<PieSemiCircleChartInternal { ...props } />\n\t\t</GlobalChartsProvider>\n\t);\n};\n\nPieSemiCircleChartWithProvider.displayName = 'PieSemiCircleChart';\n\n// Create PieSemiCircleChart with composition API\nconst PieSemiCircleChart = attachSubComponents( PieSemiCircleChartWithProvider, {\n\tLegend: Legend,\n\tSVG: ChartSVG,\n\tHTML: ChartHTML,\n} ) as PieSemiCircleChartComponent;\n\n// Create responsive PieSemiCircleChart with composition API\nconst PieSemiCircleChartResponsive = attachSubComponents(\n\twithResponsive< PieSemiCircleChartProps >( PieSemiCircleChartWithProvider ),\n\t{\n\t\tLegend: Legend,\n\t\tSVG: ChartSVG,\n\t\tHTML: ChartHTML,\n\t}\n) as PieSemiCircleChartResponsiveComponent;\n\nexport {\n\tPieSemiCircleChartResponsive as default,\n\tPieSemiCircleChart as PieSemiCircleChartUnresponsive,\n};\n","import 'css-chunk:src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss';export default {\n  \"pie-semi-circle-chart\": \"a8ccharts-r5jk9c\",\n  \"label\": \"a8ccharts-nPqOgD\",\n  \"note\": \"a8ccharts-LpBZQh\"\n};"],"mappings":"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","names":[]}