Charts: update PieSemiCircleChart component (#40625)

* remove height property from pie semi circle chart

* improve width story control

* introduce clockwise property

* introduce thickness property

* add pad to thickness equation

* changelog

---------

Co-authored-by: Grzegorz Chudzinski-Pawlowski <[email protected]>

projects/js-packages/charts/changelog/update-charts-pie-iteration

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update PieSemiCircleChart component

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

@@ -19,31 +19,48 @@ interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[]
 	 * Note text to display below the label
 	 */
 	note: string;
+	/**
+	 * Direction of chart rendering
+	 * true for clockwise, false for counter-clockwise
+	 */
+	clockwise?: boolean;
+	/**
+	 * Thickness of the pie chart. A value between 0 and 1
+	 */
+	thickness?: number;
 }
 
 type ArcData = PieArcDatum< DataPointPercentage >;
 
 const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( {
 	data,
 	width,
-	height,
 	label,
 	note,
 	withTooltips = false,
+	clockwise = true,
+	thickness = 0.4,
 } ) => {
 	const providerTheme = useChartTheme();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
 		useTooltip< DataPointPercentage >();
 
 	const centerX = width / 2;
-	const centerY = height;
+	const height = width / 2;
+	const radius = width / 2;
+	const pad = 0.03;
+	const innerRadius = radius * ( 1 - thickness + pad );
 
 	// Map the data to include index for color assignment
 	const dataWithIndex = data.map( ( d, index ) => ( {
 		...d,
 		index,
 	} ) );
 
+	// Set the clockwise direction based on the prop
+	const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
+	const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
+
 	const accessors = {
 		value: ( d: DataPointPercentage & { index: number } ) => d.value,
 		sort: (
@@ -84,17 +101,17 @@ const PieSemiCircleChart: FC< PieSemiCircleChartProps > = ( {
 		<div className={ clsx( 'pie-semi-circle-chart', styles[ 'pie-semi-circle-chart' ] ) }>
 			<svg width={ width } height={ height }>
 				{ /* Main chart group that contains both the pie and text elements */ }
-				<Group top={ centerY } left={ centerX }>
+				<Group top={ centerX } left={ centerX }>
 					{ /* Pie chart */ }
 					<Pie< DataPointPercentage & { index: number } >
 						data={ dataWithIndex }
 						pieValue={ accessors.value }
-						outerRadius={ width / 2 } // half of the diameter (width)
-						innerRadius={ ( width / 2 ) * 0.6 } // 60% of the radius
+						outerRadius={ radius }
+						innerRadius={ innerRadius }
 						cornerRadius={ 3 }
-						padAngle={ 0.03 }
-						startAngle={ -Math.PI / 2 }
-						endAngle={ Math.PI / 2 }
+						padAngle={ pad }
+						startAngle={ startAngle }
+						endAngle={ endAngle }
 						pieSort={ accessors.sort }
 					>
 						{ pie => {

projects/js-packages/charts/src/components/pie-semi-circle-chart/stories/index.stories.tsx

@@ -2,12 +2,6 @@ import { PieSemiCircleChart } from '../index';
 import type { Meta } from '@storybook/react';
 
 const data = [
-	{
-		label: 'Windows',
-		value: 80000,
-		valueDisplay: '80K',
-		percentage: 2,
-	},
 	{
 		label: 'MacOS',
 		value: 30000,
@@ -20,6 +14,12 @@ const data = [
 		valueDisplay: '22K',
 		percentage: 1,
 	},
+	{
+		label: 'Windows',
+		value: 80000,
+		valueDisplay: '80K',
+		percentage: 2,
+	},
 ];
 
 export default {
@@ -35,23 +35,41 @@ export default {
 			</div>
 		),
 	],
+	argTypes: {
+		width: {
+			control: {
+				type: 'range',
+				min: 0,
+				max: 1000,
+				step: 10,
+			},
+		},
+		thickness: {
+			control: {
+				type: 'range',
+				min: 0,
+				max: 1,
+				step: 0.01,
+			},
+		},
+	},
 } satisfies Meta< typeof PieSemiCircleChart >;
 
 const Template = args => <PieSemiCircleChart { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
 	width: 500,
-	height: 300,
 	data,
 	label: 'OS',
 	note: 'Windows +10%',
+	thickness: 0.4,
+	clockwise: true,
 };
 
 export const WithTooltips = Template.bind( {} );
 WithTooltips.args = {
 	width: 500,
-	height: 300,
 	data,
 	label: 'OS',
 	note: 'Windows +10%',

projects/js-packages/charts/src/components/shared/types.d.ts

@@ -68,7 +68,7 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = {
 	/**
 	 * Height of the chart in pixels
 	 */
-	height: number;
+	height?: number;
 	/**
 	 * Chart margins
 	 */