Charts: Adding pie charts (#40581)

* Charts - Adding basic pie chart * Charts - Updating charts and adding a tooltip hook * Charts - Adding doughts to pies * Charts - Fixing dependency * changelog * Charts - Adding chart TS interface * Charts - Adding shared chart TS interface * Charts - Cleanup * Charts - Cleanup 2 * Charts - updating tooltip prop and simplifying event handlers
Automattic · Dec 16, 2024 · 5e270fb · 5e270fb
1 parent 09c215f
commit 5e270fb
Show file tree

Hide file tree

Showing 18 changed files with 880 additions and 118 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/charts/changelog/add-charts-pie-chart b/projects/js-packages/charts/changelog/add-charts-pie-chart
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Adding new chart type - pie chart.
diff --git a/projects/js-packages/charts/package.json b/projects/js-packages/charts/package.json
@@ -21,6 +21,7 @@
 	},
 	"dependencies": {
 		"@react-spring/web": "9.7.3",
+		"@visx/responsive": "3.12.0",
 		"@visx/axis": "^3.12.0",
 		"@visx/group": "^3.12.0",
 		"@visx/scale": "^3.12.0",

diff --git a/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx b/projects/js-packages/charts/src/components/bar-chart/bar-chart.tsx
@@ -5,46 +5,25 @@ import { scaleBand, scaleLinear } from '@visx/scale';
 import { Bar } from '@visx/shape';
 import { useTooltip } from '@visx/tooltip';
 import clsx from 'clsx';
-import { FC, useCallback } from 'react';
+import { FC, useCallback, type MouseEvent } from 'react';
 import { useChartTheme } from '../../providers/theme';
 import { BaseTooltip } from '../tooltip';
 import styles from './bar-chart.module.scss';
-import type { DataPoint } from '../shared/types';
+import type { BaseChartProps, DataPoint } from '../shared/types';
 
-type BarChartProps = {
+interface BarChartProps extends BaseChartProps {
 	/**
 	 * Array of data points to display in the chart
 	 */
 	data: DataPoint[];
-	/**
-	 * Width of the chart in pixels
-	 */
-	width: number;
-	/**
-	 * Height of the chart in pixels
-	 */
-	height: number;
-	/**
-	 * Chart margins
-	 */
-	margin?: {
-		top?: number;
-		right?: number;
-		bottom?: number;
-		left?: number;
-	};
-	/**
-	 * Whether to show tooltips on hover
-	 */
-	showTooltips?: boolean;
-};
+}
 
 const BarChart: FC< BarChartProps > = ( {
 	data,
 	width,
 	height,
 	margin = { top: 20, right: 20, bottom: 40, left: 40 },
-	showTooltips = false,
+	withTooltips = false,
 } ) => {
 	const theme = useChartTheme();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
@@ -66,7 +45,7 @@ const BarChart: FC< BarChartProps > = ( {
 	} );
 
 	const handleMouseMove = useCallback(
-		( event: React.MouseEvent, datum: DataPoint ) => {
+		( event: MouseEvent< SVGRectElement >, datum: DataPoint ) => {
 			const coords = localPoint( event );
 			if ( ! coords ) return;
 
@@ -83,35 +62,32 @@ const BarChart: FC< BarChartProps > = ( {
 		hideTooltip();
 	}, [ hideTooltip ] );
 
-	const handleBarMouseMove = useCallback(
-		( d: DataPoint ) => ( event: React.MouseEvent< SVGRectElement > ) => {
-			handleMouseMove( event, d );
-		},
-		[ handleMouseMove ]
-	);
-
 	return (
 		<div className={ clsx( 'bar-chart', styles[ 'bar-chart' ] ) }>
 			<svg width={ width } height={ height }>
 				<Group left={ margins.left } top={ margins.top }>
-					{ data.map( d => (
-						<Bar
-							key={ `bar-${ d.label }` }
-							x={ xScale( d.label ) }
-							y={ yScale( d.value ) }
-							width={ xScale.bandwidth() }
-							height={ yMax - ( yScale( d.value ) ?? 0 ) }
-							fill={ theme.colors[ 0 ] }
-							onMouseMove={ handleBarMouseMove( d ) }
-							onMouseLeave={ handleMouseLeave }
-						/>
-					) ) }
+					{ data.map( d => {
+						const handleBarMouseMove = event => handleMouseMove( event, d );
+
+						return (
+							<Bar
+								key={ `bar-${ d.label }` }
+								x={ xScale( d.label ) }
+								y={ yScale( d.value ) }
+								width={ xScale.bandwidth() }
+								height={ yMax - ( yScale( d.value ) ?? 0 ) }
+								fill={ theme.colors[ 0 ] }
+								onMouseMove={ withTooltips ? handleBarMouseMove : undefined }
+								onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
+							/>
+						);
+					} ) }
 					<AxisLeft scale={ yScale } />
 					<AxisBottom scale={ xScale } top={ yMax } />
 				</Group>
 			</svg>
 
-			{ showTooltips && tooltipOpen && tooltipData && (
+			{ withTooltips && tooltipOpen && tooltipData && (
 				<BaseTooltip
 					data={ {
 						label: tooltipData.label,

diff --git a/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx b/projects/js-packages/charts/src/components/bar-chart/stories/index.stories.tsx
@@ -1,15 +1,7 @@
 import BarChart from '../index';
+import data from './sample-data';
 import type { Meta } from '@storybook/react';
 
-const data = [
-	{ label: 'Jan', value: 12 },
-	{ label: 'Feb', value: 18 },
-	{ label: 'Mar', value: 29 },
-	{ label: 'Apr', value: 33 },
-	{ label: 'May', value: 45 },
-	{ label: 'Jun', value: 52 },
-];
-
 export default {
 	title: 'JS Packages/Charts/Types/Bar Chart',
 	component: BarChart,
@@ -32,14 +24,14 @@ Default.args = {
 	width: 500,
 	height: 300,
 	margin: { top: 20, right: 20, bottom: 40, left: 40 },
-	data,
-	showTooltips: false,
+	withTooltips: false,
+	data: data[ 0 ].data,
 };
 
 export const WithTooltips = Template.bind( {} );
 WithTooltips.args = {
 	...Default.args,
-	showTooltips: true,
+	withTooltips: true,
 };
 
 WithTooltips.parameters = {