add back in dimensions provided by withResponsive HOC

projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx

@@ -16,14 +16,14 @@ type OmitBaseChartProps = Omit< BaseChartProps< DataPointPercentage[] >, 'width'
 
 interface PieChartProps extends OmitBaseChartProps {
 	/**
-	 * Size of the chart in pixels
+	 * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.
 	 */
-	size?: number;
+	innerRadius?: number;
 
 	/**
-	 * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.
+	 * Size of the chart in pixels
 	 */
-	innerRadius?: number;
+	size?: number;
 
 	/**
 	 * Add padding to the chart
@@ -34,6 +34,16 @@ interface PieChartProps extends OmitBaseChartProps {
 	 * Thickness of the pie chart. A value between 0 and 1
 	 */
 	thickness?: number;
+
+	/**
+	 * Width provided by withResponsive HOC
+	 */
+	width?: number;
+
+	/**
+	 * Height provided by withResponsive HOC
+	 */
+	height?: number;
 }
 
 /**
@@ -44,7 +54,8 @@ interface PieChartProps extends OmitBaseChartProps {
  */
 const PieChart = ( {
 	data,
-	size,
+	width = 500,
+	height = 500,
 	thickness = 1,
 	withTooltips = false,
 	className,
@@ -58,29 +69,28 @@ const PieChart = ( {
 			withTooltips,
 		} );
 
-	// Unified dimensions using the `size` property
-	const width = size;
-	const height = size;
-
+	// Calculate radius based on width/height
 	const radius = Math.min( width, height ) / 2;
 	const centerX = width / 2;
 	const centerY = height / 2;
 
-	// Calculate radii based on thickness and padding
-	const outerRadius = radius - padding;
-	const innerRadius = outerRadius * ( 1 - thickness );
-
+	// Map the data to include index for color assignment
 	const dataWithIndex = data.map( ( d, index ) => ( {
 		...d,
 		index,
 	} ) );
 
+	const outerRadius = radius - padding;
+	const innerRadius = outerRadius * ( 1 - thickness );
+
 	const accessors = {
 		value: ( d: DataPointPercentage ) => d.value,
+		// Use the color property from the data object as a last resort. The theme provides colours by default.
 		fill: ( d: DataPointPercentage & { index: number } ) =>
-			d?.color || providerTheme.colors[ d.index % providerTheme.colors.length ],
+			d?.color || providerTheme.colors[ d.index ],
 	};
 
+	// Create legend items from data
 	const legendItems = data.map( ( item, index ) => ( {
 		label: item.label,
 		value: item.value.toString(),
@@ -89,34 +99,28 @@ const PieChart = ( {
 
 	return (
 		<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>
-			<svg
-				width="100%"
-				height="100%"
-				viewBox={ `0 0 ${ size } ${ size }` }
-				preserveAspectRatio="xMidYMid meet"
-			>
+			<svg width={ width } height={ height }>
 				<Group top={ centerY } left={ centerX }>
 					<Pie< DataPointPercentage & { index: number } >
 						data={ dataWithIndex }
 						pieValue={ accessors.value }
 						outerRadius={ outerRadius }
 						innerRadius={ innerRadius }
-						padAngle={ 0.02 }
-						cornerRadius={ 0 }
 					>
-						{ pie =>
-							pie.arcs.map( ( arc, index ) => {
+						{ pie => {
+							return pie.arcs.map( ( arc, index ) => {
 								const [ centroidX, centroidY ] = pie.path.centroid( arc );
 								const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
+								const handleMouseMove = ( event: MouseEvent< SVGElement > ) =>
+									onMouseMove( event, arc.data );
 
 								const pathProps: SVGProps< SVGPathElement > = {
 									d: pie.path( arc ) || '',
 									fill: accessors.fill( arc.data ),
 								};
 
 								if ( withTooltips ) {
-									pathProps.onMouseMove = ( event: MouseEvent< SVGElement > ) =>
-										onMouseMove( event, arc.data );
+									pathProps.onMouseMove = handleMouseMove;
 									pathProps.onMouseLeave = onMouseLeave;
 								}
 
@@ -140,8 +144,8 @@ const PieChart = ( {
 										) }
 									</g>
 								);
-							} )
-						}
+							} );
+						} }
 					</Pie>
 				</Group>
 			</svg>
@@ -159,7 +163,9 @@ const PieChart = ( {
 					data={ tooltipData }
 					top={ tooltipTop || 0 }
 					left={ tooltipLeft || 0 }
-					style={ { transform: 'translate(-50%, -100%)' } }
+					style={ {
+						transform: 'translate(-50%, -100%)',
+					} }
 				/>
 			) }
 		</div>