add grid control to bar chart

Automattic · Dec 19, 2024 · 0414723 · 0414723
1 parent 2d89f1a
commit 0414723
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
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
@@ -7,12 +7,16 @@ import { useTooltip } from '@visx/tooltip';
 import clsx from 'clsx';
 import { FC, useCallback, type MouseEvent } from 'react';
 import { useChartTheme } from '../../providers/theme';
+import { GridControl } from '../grid-control';
 import { Legend } from '../legend';
 import { BaseTooltip } from '../tooltip';
 import styles from './bar-chart.module.scss';
 import type { BaseChartProps, SeriesData } from '../shared/types';
 
-interface BarChartProps extends BaseChartProps< SeriesData[] > {}
+interface BarChartProps extends BaseChartProps< SeriesData[] > {
+	showGridX?: boolean;
+	showGridY?: boolean;
+}
 
 type BarChartTooltipData = { value: number; xLabel: string; yLabel: string; seriesIndex: number };
 
@@ -25,6 +29,8 @@ const BarChart: FC< BarChartProps > = ( {
 	showLegend = false,
 	legendOrientation = 'horizontal',
 	className,
+	showGridX = true,
+	showGridY = true,
 } ) => {
 	const theme = useChartTheme();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
@@ -97,6 +103,14 @@ const BarChart: FC< BarChartProps > = ( {
 		<div className={ clsx( 'bar-chart', className, styles[ 'bar-chart' ] ) }>
 			<svg width={ width } height={ height }>
 				<Group left={ margins.left } top={ margins.top }>
+					<GridControl
+						width={ xMax }
+						height={ yMax }
+						xScale={ xScale }
+						yScale={ yScale }
+						showGridX={ showGridX }
+						showGridY={ showGridY }
+					/>
 					{ data.map( ( series, seriesIndex ) => (
 						<Group key={ seriesIndex }>
 							{ series.data.map( d => {

diff --git a/projects/js-packages/charts/src/components/grid-control/grid-control.tsx b/projects/js-packages/charts/src/components/grid-control/grid-control.tsx
@@ -1,5 +1,5 @@
 import { GridRows, GridColumns } from '@visx/grid';
-import { scaleLinear } from '@visx/scale'; // Use visx/scale exclusively
+import { scaleBand, scaleLinear } from '@visx/scale'; // Import scaleBand and scaleLinear
 import clsx from 'clsx';
 import { FC } from 'react';
 import styles from './grid-control.module.scss';
@@ -8,8 +8,8 @@ import type { GridVisibility } from '../shared/types';
 interface GridControlProps extends GridVisibility {
 	width: number;
 	height: number;
-	xScale: ReturnType< typeof scaleLinear< number > >; // Explicitly type scale output
-	yScale: ReturnType< typeof scaleLinear< number > >;
+	xScale: ReturnType< typeof scaleBand >; // Use ReturnType for xScale
+	yScale: ReturnType< typeof scaleLinear< number > >; // Specify number as the output type
 }
 
 /**