@automattic/charts 0.1.0

package/src/components/bar-chart/bar-chart.tsx

@@ -0,0 +1,155 @@
+import { AxisLeft, AxisBottom } from '@visx/axis';
+import { localPoint } from '@visx/event';
+import { Group } from '@visx/group';
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { Bar } from '@visx/shape';
+import { useTooltip } from '@visx/tooltip';
+import clsx from 'clsx';
+import { FC, useCallback, type MouseEvent } from 'react';
+import { useChartTheme } from '../../providers/theme';
+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[] > {}
+
+type BarChartTooltipData = { value: number; xLabel: string; yLabel: string; seriesIndex: number };
+
+const BarChart: FC< BarChartProps > = ( {
+	data,
+	width,
+	height,
+	margin = { top: 20, right: 20, bottom: 40, left: 40 },
+	withTooltips = false,
+	showLegend = false,
+	legendOrientation = 'horizontal',
+	className,
+} ) => {
+	const theme = useChartTheme();
+	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
+		useTooltip< BarChartTooltipData >();
+
+	const handleMouseMove = useCallback(
+		(
+			event: MouseEvent< SVGRectElement >,
+			value: number,
+			xLabel: string,
+			yLabel: string,
+			seriesIndex: number
+		) => {
+			const coords = localPoint( event );
+			if ( ! coords ) return;
+
+			showTooltip( {
+				tooltipData: { value, xLabel, yLabel, seriesIndex },
+				tooltipLeft: coords.x,
+				tooltipTop: coords.y - 10,
+			} );
+		},
+		[ showTooltip ]
+	);
+
+	const handleMouseLeave = useCallback( () => {
+		hideTooltip();
+	}, [ hideTooltip ] );
+
+	if ( ! data?.length ) {
+		return <div className={ clsx( 'bar-chart-empty', styles[ 'bat-chart-empty' ] ) }>Empty...</div>;
+	}
+
+	const margins = margin;
+	const xMax = width - margins.left - margins.right;
+	const yMax = height - margins.top - margins.bottom;
+
+	// Get labels for x-axis from the first series (assuming all series have same labels)
+	const labels = data[ 0 ].data?.map( d => d?.label );
+
+	// Create scales
+	const xScale = scaleBand< string >( {
+		range: [ 0, xMax ],
+		domain: labels,
+		padding: 0.2,
+	} );
+
+	const innerScale = scaleBand( {
+		range: [ 0, xScale.bandwidth() ],
+		domain: data.map( ( _, i ) => i.toString() ),
+		padding: 0.1,
+	} );
+
+	const yScale = scaleLinear< number >( {
+		range: [ yMax, 0 ],
+		domain: [
+			0,
+			Math.max( ...data.map( series => Math.max( ...series.data.map( d => d?.value || 0 ) ) ) ),
+		],
+	} );
+
+	// Create legend items from group labels, this iterates over groups rather than data points
+	const legendItems = data.map( ( group, index ) => ( {
+		label: group.label, // Label for each unique group
+		value: '', // Empty string since we don't want to show a specific value
+		color: theme.colors[ index % theme.colors.length ],
+	} ) );
+
+	return (
+		<div className={ clsx( 'bar-chart', className, styles[ 'bar-chart' ] ) }>
+			<svg width={ width } height={ height }>
+				<Group left={ margins.left } top={ margins.top }>
+					{ data.map( ( series, seriesIndex ) => (
+						<Group key={ seriesIndex }>
+							{ series.data.map( d => {
+								const xPos = xScale( d.label );
+								if ( xPos === undefined ) return null;
+
+								const barWidth = innerScale.bandwidth();
+								const barX = xPos + ( innerScale( seriesIndex.toString() ) ?? 0 );
+
+								const handleBarMouseMove = event =>
+									handleMouseMove( event, d.value, d.label, series.label, seriesIndex );
+
+								return (
+									<Bar
+										key={ `bar-${ seriesIndex }-${ d.label }` }
+										x={ barX }
+										y={ yScale( d.value ) }
+										width={ barWidth }
+										height={ yMax - ( yScale( d.value ) ?? 0 ) }
+										fill={ theme.colors[ seriesIndex % theme.colors.length ] }
+										onMouseMove={ withTooltips ? handleBarMouseMove : undefined }
+										onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
+									/>
+								);
+							} ) }
+						</Group>
+					) ) }
+					<AxisLeft scale={ yScale } />
+					<AxisBottom scale={ xScale } top={ yMax } />
+				</Group>
+			</svg>
+
+			{ withTooltips && tooltipOpen && tooltipData && (
+				<BaseTooltip top={ tooltipTop } left={ tooltipLeft }>
+					<div>
+						<div>{ tooltipData.yLabel }</div>
+						<div>
+							{ tooltipData.xLabel }: { tooltipData.value }
+						</div>
+					</div>
+				</BaseTooltip>
+			) }
+
+			{ showLegend && (
+				<Legend
+					items={ legendItems }
+					orientation={ legendOrientation }
+					className={ styles[ 'bar-chart-legend' ] }
+				/>
+			) }
+		</div>
+	);
+};
+
+BarChart.displayName = 'BarChart';
+export default BarChart;

package/src/components/bar-chart/index.tsx

@@ -0,0 +1 @@
+export { default as BarChart } from './bar-chart';

package/src/components/legend/base-legend.tsx

@@ -0,0 +1,71 @@
+import { LegendOrdinal } from '@visx/legend';
+import { scaleOrdinal } from '@visx/scale';
+import clsx from 'clsx';
+import { FC } from 'react';
+import styles from './legend.module.scss';
+import type { LegendProps } from './types';
+
+/**
+ * Base legend component that displays color-coded items with labels using visx
+ * @param {object} props             - Component properties
+ * @param {Array}  props.items       - Array of legend items to display
+ * @param {string} props.className   - Additional CSS class names
+ * @param {string} props.orientation - Layout orientation (horizontal/vertical)
+ * @return {JSX.Element}               Rendered legend component
+ */
+const orientationToFlexDirection = {
+	horizontal: 'row' as const,
+	vertical: 'column' as const,
+};
+
+export const BaseLegend: FC< LegendProps > = ( {
+	items,
+	className,
+	orientation = 'horizontal',
+} ) => {
+	const legendScale = scaleOrdinal( {
+		domain: items.map( item => item.label ),
+		range: items.map( item => item.color ),
+	} );
+
+	return (
+		<div
+			className={ clsx( styles.legend, styles[ `legend--${ orientation }` ], className ) }
+			role="list"
+		>
+			<LegendOrdinal
+				scale={ legendScale }
+				direction={ orientationToFlexDirection[ orientation ] }
+				shape="rect"
+				shapeWidth={ 16 }
+				shapeHeight={ 16 }
+				className={ styles[ 'legend-items' ] }
+			>
+				{ labels => (
+					<div className={ styles[ `legend--${ orientation }` ] }>
+						{ labels.map( label => (
+							<div key={ label.text } className={ styles[ 'legend-item' ] }>
+								<svg width={ 16 } height={ 16 }>
+									<rect
+										width={ 16 }
+										height={ 16 }
+										fill={ label.value }
+										className={ styles[ 'legend-item-swatch' ] }
+									/>
+								</svg>
+								<span className={ styles[ 'legend-item-label' ] }>
+									{ label.text }
+									{ items.find( item => item.label === label.text )?.value && (
+										<span className={ styles[ 'legend-item-value' ] }>
+											{ items.find( item => item.label === label.text )?.value }
+										</span>
+									) }
+								</span>
+							</div>
+						) ) }
+					</div>
+				) }
+			</LegendOrdinal>
+		</div>
+	);
+};

package/src/components/legend/index.ts

@@ -0,0 +1,2 @@
+export { BaseLegend as Legend } from './base-legend';
+export type { LegendProps } from './types';

package/src/components/legend/legend.module.scss

@@ -0,0 +1,36 @@
+.legend {
+	&--horizontal {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 16px;
+	}
+
+	&--vertical {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 0.875rem;
+}
+
+.legend-item-swatch {
+	border-radius: 2px;
+}
+
+.legend-item-label {
+	color: var(--jp-gray-80, #2c3338);
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.legend-item-value {
+	font-weight: 500;
+}

package/src/components/legend/types.ts

@@ -0,0 +1,14 @@
+import { scaleOrdinal } from '@visx/scale';
+
+export type LegendItem = {
+	label: string;
+	value: number | string;
+	color: string;
+};
+
+export type LegendProps = {
+	items: LegendItem[];
+	className?: string;
+	orientation?: 'horizontal' | 'vertical';
+	scale?: ReturnType< typeof scaleOrdinal >;
+};

package/src/components/line-chart/index.tsx

@@ -0,0 +1 @@
+export { default as LineChart } from './line-chart';

package/src/components/line-chart/line-chart.module.scss

@@ -0,0 +1,25 @@
+.line-chart {
+	position: relative;
+
+	&__tooltip {
+		background: #fff;
+		padding: 0.5rem;
+	}
+
+	&__tooltip-date {
+		font-weight: bold;
+		padding-bottom: 10px;
+	}
+
+	&__tooltip-row {
+		display: flex;
+		align-items: center;
+		padding: 4px 0;
+		justify-content: space-between;
+	}
+
+	&__tooltip-label {
+		font-weight: 500;
+		padding-right: 1rem;
+	}
+}

package/src/components/line-chart/line-chart.tsx

@@ -0,0 +1,159 @@
+import {
+	XYChart,
+	AnimatedLineSeries,
+	AnimatedAxis,
+	AnimatedGrid,
+	Tooltip,
+	buildChartTheme,
+} from '@visx/xychart';
+import clsx from 'clsx';
+import { FC } from 'react';
+import { useChartTheme } from '../../providers/theme/theme-provider';
+import { Legend } from '../legend';
+import styles from './line-chart.module.scss';
+import type { BaseChartProps, DataPointDate, SeriesData } from '../shared/types';
+
+// TODO: revisit grid and axis options - accept as props for frid lines, axis, values: x, y, all, none
+
+interface LineChartProps extends BaseChartProps< SeriesData[] > {}
+
+type TooltipData = {
+	date: Date;
+	[ key: string ]: number | Date;
+};
+
+type TooltipDatum = {
+	key: string;
+	value: number;
+};
+
+const renderTooltip = ( {
+	tooltipData,
+}: {
+	tooltipData?: {
+		nearestDatum?: {
+			datum: TooltipData;
+			key: string;
+		};
+		datumByKey?: { [ key: string ]: { datum: TooltipData } };
+	};
+} ) => {
+	const nearestDatum = tooltipData?.nearestDatum?.datum;
+	if ( ! nearestDatum ) return null;
+
+	const tooltipPoints: TooltipDatum[] = Object.entries( tooltipData?.datumByKey || {} )
+		.map( ( [ key, { datum } ] ) => ( {
+			key,
+			value: datum.value as number,
+		} ) )
+		.sort( ( a, b ) => b.value - a.value );
+
+	return (
+		<div className={ styles[ 'line-chart__tooltip' ] }>
+			<div className={ styles[ 'line-chart__tooltip-date' ] }>
+				{ nearestDatum.date.toLocaleDateString() }
+			</div>
+			{ tooltipPoints.map( point => (
+				<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>
+					<span className={ styles[ 'line-chart__tooltip-label' ] }>{ point.key }:</span>
+					<span className={ styles[ 'line-chart__tooltip-value' ] }>{ point.value }</span>
+				</div>
+			) ) }
+		</div>
+	);
+};
+
+const formatDateTick = ( value: number ) => {
+	const date = new Date( value );
+	return date.toLocaleDateString( undefined, {
+		month: 'short',
+		day: 'numeric',
+	} );
+};
+
+const LineChart: FC< LineChartProps > = ( {
+	data,
+	width,
+	height,
+	margin = { top: 20, right: 20, bottom: 40, left: 40 },
+	className,
+	withTooltips = true,
+	showLegend = false,
+	legendOrientation = 'horizontal',
+} ) => {
+	const providerTheme = useChartTheme();
+
+	if ( ! data?.length ) {
+		return (
+			<div className={ clsx( 'line-chart-empty', styles[ 'line-chart-empty' ] ) }>Empty...</div>
+		);
+	}
+
+	// Create legend items from group labels, this iterates over groups rather than data points
+	const legendItems = data.map( ( group, index ) => ( {
+		label: group.label, // Label for each unique group
+		value: '', // Empty string since we don't want to show a specific value
+		color: providerTheme.colors[ index % providerTheme.colors.length ],
+	} ) );
+
+	const accessors = {
+		xAccessor: ( d: DataPointDate ) => d.date,
+		yAccessor: ( d: DataPointDate ) => d.value,
+	};
+
+	const theme = buildChartTheme( {
+		backgroundColor: providerTheme.backgroundColor,
+		colors: providerTheme.colors,
+		gridStyles: providerTheme.gridStyles,
+		tickLength: providerTheme?.tickLength || 0,
+		gridColor: providerTheme?.gridColor || '',
+		gridColorDark: providerTheme?.gridColorDark || '',
+	} );
+
+	return (
+		<div className={ clsx( 'line-chart', styles[ 'line-chart' ], className ) }>
+			<XYChart
+				theme={ theme }
+				width={ width }
+				height={ height }
+				margin={ margin }
+				xScale={ { type: 'time' } }
+				yScale={ { type: 'linear', nice: true } }
+			>
+				<AnimatedGrid columns={ false } numTicks={ 4 } />
+				<AnimatedAxis orientation="bottom" numTicks={ 5 } tickFormat={ formatDateTick } />
+				<AnimatedAxis orientation="left" numTicks={ 4 } />
+
+				{ data.map( ( seriesData, index ) => (
+					<AnimatedLineSeries
+						key={ seriesData?.label }
+						dataKey={ seriesData?.label }
+						data={ seriesData.data as DataPointDate[] } // TODO: this needs fixing or a more specific type for each chart
+						{ ...accessors }
+						stroke={ theme.colors[ index % theme.colors.length ] }
+						strokeWidth={ 2 }
+					/>
+				) ) }
+
+				{ withTooltips && (
+					<Tooltip
+						snapTooltipToDatumX
+						snapTooltipToDatumY
+						showSeriesGlyphs
+						renderTooltip={ renderTooltip }
+					/>
+				) }
+			</XYChart>
+
+			{ showLegend && (
+				<Legend
+					items={ legendItems }
+					orientation={ legendOrientation }
+					className={ styles[ 'line-chart-legend' ] }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default LineChart;

package/src/components/pie-chart/index.tsx

@@ -0,0 +1 @@
+export { default as PieChart } from './pie-chart';

package/src/components/pie-chart/pie-chart.module.scss

@@ -0,0 +1,3 @@
+.pie-chart {
+	position: relative;
+}

package/src/components/pie-chart/pie-chart.tsx

@@ -0,0 +1,135 @@
+import { Group } from '@visx/group';
+import { Pie } from '@visx/shape';
+import clsx from 'clsx';
+import { SVGProps } from 'react';
+import useChartMouseHandler from '../../hooks/use-chart-mouse-handler';
+import { useChartTheme, defaultTheme } from '../../providers/theme';
+import { Legend } from '../legend';
+import { BaseTooltip } from '../tooltip';
+import styles from './pie-chart.module.scss';
+import type { BaseChartProps, DataPoint } from '../shared/types';
+
+// TODO: add animation
+
+interface PieChartProps extends BaseChartProps< DataPoint[] > {
+	/**
+	 * Inner radius in pixels. If > 0, creates a donut chart. Defaults to 0.
+	 */
+	innerRadius?: number;
+}
+
+/**
+ * Renders a pie or donut chart using the provided data.
+ *
+ * @param {PieChartProps} props - Component props
+ * @return {JSX.Element} The rendered chart component
+ */
+const PieChart = ( {
+	data,
+	width,
+	height,
+	withTooltips = false,
+	innerRadius = 0,
+	className,
+	showLegend,
+	legendOrientation,
+}: PieChartProps ) => {
+	const providerTheme = useChartTheme();
+	const { onMouseMove, onMouseLeave, tooltipOpen, tooltipData, tooltipLeft, tooltipTop } =
+		useChartMouseHandler( {
+			withTooltips,
+		} );
+
+	// Calculate radius based on width/height
+	const radius = Math.min( width, height ) / 2;
+	const centerX = width / 2;
+	const centerY = height / 2;
+
+	const accessors = {
+		value: d => d.value,
+		// Use the color property from the data object as a last resort. The theme provides colours by default.
+		fill: d => d.color || providerTheme.colors[ d.index ],
+	};
+
+	// Create legend items from data
+	const legendItems = data.map( ( item, index ) => ( {
+		label: item.label,
+		value: item.value.toString(),
+		color: providerTheme.colors[ index % providerTheme.colors.length ],
+	} ) );
+
+	return (
+		<div className={ clsx( 'pie-chart', styles[ 'pie-chart' ], className ) }>
+			<svg width={ width } height={ height }>
+				<Group top={ centerY } left={ centerX }>
+					<Pie
+						data={ data }
+						pieValue={ accessors.value }
+						outerRadius={ radius - 20 } // Leave space for labels/tooltips
+						innerRadius={ innerRadius }
+					>
+						{ 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 => onMouseMove( event, arc.data );
+
+								const pathProps: SVGProps< SVGPathElement > = {
+									d: pie.path( arc ) || '',
+									fill: accessors.fill( arc ),
+								};
+
+								if ( withTooltips ) {
+									pathProps.onMouseMove = handleMouseMove;
+									pathProps.onMouseLeave = onMouseLeave;
+								}
+
+								return (
+									<g key={ `arc-${ index }` }>
+										<path { ...pathProps } />
+										{ hasSpaceForLabel && (
+											<text
+												x={ centroidX }
+												y={ centroidY }
+												dy=".33em"
+												fill={
+													providerTheme.labelBackgroundColor || defaultTheme.labelBackgroundColor
+												}
+												fontSize={ 12 }
+												textAnchor="middle"
+												pointerEvents="none"
+											>
+												{ arc.data.label }
+											</text>
+										) }
+									</g>
+								);
+							} );
+						} }
+					</Pie>
+				</Group>
+			</svg>
+
+			{ showLegend && (
+				<Legend
+					items={ legendItems }
+					orientation={ legendOrientation }
+					className={ styles[ 'pie-chart-legend' ] }
+				/>
+			) }
+
+			{ withTooltips && tooltipOpen && tooltipData && (
+				<BaseTooltip
+					data={ tooltipData }
+					top={ tooltipTop }
+					left={ tooltipLeft }
+					style={ {
+						transform: 'translate(-50%, -100%)',
+					} }
+				/>
+			) }
+		</div>
+	);
+};
+
+export default PieChart;

package/src/components/pie-semi-circle-chart/index.tsx

@@ -0,0 +1 @@
+export { default as PieSemiCircleChart } from './pie-semi-circle-chart';

package/src/components/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -0,0 +1,19 @@
+.pie-semi-circle-chart {
+	position: relative;
+	text-align: center;
+
+	&-legend {
+		margin-top: 1rem;
+	}
+
+	.label {
+		margin-bottom: 0px;  // Add space between label and pie chart
+		font-weight: 600;    // Make label more prominent than note
+		font-size: 16px;     // Set explicit font size
+	}
+
+	.note {
+		margin-top: 0px;     // Add space between pie chart and note
+		font-size: 14px;     // Slightly smaller text for hierarchy
+	}
+}