PieChart: iterate over component. Introduce size, thickness and `…

…padding` property (#40993) * replace width and height with size This is a Pie chart. Size is more accurate * introduce padding prop * changelog * tweak legendOrientation story control * change thickness arg story order * update thickness value in storieps * computer outer, inner, and thickness props
Automattic · Jan 13, 2025 · d34f9d4 · d34f9d4
1 parent 2b7feac
commit d34f9d4
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 12 deletions.
diff --git a/projects/js-packages/charts/changelog/update-iterate-over-pie-chart-component b/projects/js-packages/charts/changelog/update-iterate-over-pie-chart-component
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+PieChart: iterate a bit over component API
diff --git a/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx b/projects/js-packages/charts/src/components/pie-chart/pie-chart.tsx
@@ -12,11 +12,28 @@ import type { BaseChartProps, DataPointPercentage } from '../../types';
 
 // TODO: add animation
 
-interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
+type OmitBaseChartProps = Omit< BaseChartProps< DataPointPercentage[] >, 'width' | 'height' >;
+
+interface PieChartProps extends OmitBaseChartProps {
 	/**
 	 * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.
 	 */
 	innerRadius?: number;
+
+	/**
+	 * Size of the chart in pixels
+	 */
+	size?: number;
+
+	/**
+	 * Add padding to the chart
+	 */
+	padding?: number;
+
+	/**
+	 * Thickness of the pie chart. A value between 0 and 1
+	 */
+	thickness?: number;
 }
 
 /**
@@ -27,20 +44,23 @@ interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
  */
 const PieChart = ( {
 	data,
-	width = 500, //TODO: replace when making the components responsive
-	height = 500, //TODO: replace when making the components responsive
+	size = 500, //TODO: replace when making the components responsive
+	thickness = 1,
 	withTooltips = false,
-	innerRadius = 0,
 	className,
 	showLegend,
 	legendOrientation,
+	padding = 20,
 }: PieChartProps ) => {
 	const providerTheme = useChartTheme();
 	const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } =
 		useChartMouseHandler( {
 			withTooltips,
 		} );
 
+	const width = size;
+	const height = size;
+
 	// Calculate radius based on width/height
 	const radius = Math.min( width, height ) / 2;
 	const centerX = width / 2;
@@ -52,6 +72,9 @@ const PieChart = ( {
 		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.
@@ -73,7 +96,7 @@ const PieChart = ( {
 					<Pie< DataPointPercentage & { index: number } >
 						data={ dataWithIndex }
 						pieValue={ accessors.value }
-						outerRadius={ radius - 20 } // Leave space for labels/tooltips
+						outerRadius={ outerRadius }
 						innerRadius={ innerRadius }
 					>
 						{ pie => {

diff --git a/projects/js-packages/charts/src/components/pie-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/pie-chart/stories/index.stories.tsx
@@ -27,6 +27,34 @@ export default {
 			},
 			defaultValue: undefined,
 		},
+		size: {
+			control: {
+				type: 'range',
+				min: 100,
+				max: 800,
+				step: 1,
+			},
+		},
+		thickness: {
+			control: {
+				type: 'range',
+				min: 0,
+				max: 1,
+				step: 0.01,
+			},
+		},
+		padding: {
+			control: {
+				type: 'range',
+				min: 0,
+				max: 100,
+				step: 1,
+			},
+		},
+		legendOrientation: {
+			control: 'radio',
+			options: [ 'horizontal', 'vertical' ],
+		},
 	},
 	decorators: [
 		( Story, { args } ) => (
@@ -41,12 +69,12 @@ export default {
 
 export const Default: StoryType = {
 	args: {
-		width: 400,
-		height: 400,
+		size: 400,
+		thickness: 1,
+		padding: 20,
 		withTooltips: false,
 		data,
 		theme: 'default',
-		innerRadius: 0,
 		showLegend: false,
 		legendOrientation: 'horizontal',
 	},
@@ -71,12 +99,12 @@ export const WithVerticalLegend: StoryType = {
 export const Doughnut: StoryType = {
 	args: {
 		...Default.args,
-		innerRadius: 80,
+		thickness: 0.5,
 	},
 	parameters: {
 		docs: {
 			description: {
-				story: 'Doughnut chart variant with inner radius of 80px.',
+				story: 'Doughnut chart variant with the thickness set to 0.5 (50%).',
 			},
 		},
 	},
@@ -100,7 +128,6 @@ export const WithTooltipsDoughnut: StoryType = {
 	args: {
 		...Default.args,
 		withTooltips: true,
-		innerRadius: 100,
 	},
 	parameters: {
 		docs: {

diff --git a/projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx
@@ -60,10 +60,10 @@ const Template = args => <PieSemiCircleChart { ...args } />;
 export const Default = Template.bind( {} );
 Default.args = {
 	width: 500,
+	thickness: 0.4,
 	data,
 	label: 'OS',
 	note: 'Windows +10%',
-	thickness: 0.4,
 	clockwise: true,
 	showLegend: false,
 	legendOrientation: 'horizontal',