Charts: Add legend component

projects/js-packages/charts/changelog/add-chart-library-legend-component

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Chart library: add legend component

projects/js-packages/charts/package.json

@@ -23,6 +23,7 @@
 		"@react-spring/web": "9.7.3",
 		"@visx/axis": "^3.12.0",
 		"@visx/group": "^3.12.0",
+		"@visx/legend": "^3.12.0",
 		"@visx/scale": "^3.12.0",
 		"@visx/shape": "^3.12.0",
 		"@visx/text": "3.12.0",

projects/js-packages/charts/src/components/legend/base-legend.tsx

@@ -0,0 +1,68 @@
+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, 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>
+	);
+};

projects/js-packages/charts/src/components/legend/index.ts

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

projects/js-packages/charts/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);
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.legend-item-value {
+	font-weight: 500;
+}

projects/js-packages/charts/src/components/legend/stories/index.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { BaseLegend } from '../base-legend';
+
+const meta: Meta< typeof BaseLegend > = {
+	title: 'JS Packages/Charts/Legend',
+	component: BaseLegend,
+	parameters: {
+		layout: 'centered',
+		docs: {
+			description: {
+				component:
+					'A flexible legend component that can be customized with different styles and orientations.',
+			},
+		},
+	},
+};
+
+export default meta;
+type Story = StoryObj< typeof BaseLegend >;
+
+const mockData = [
+	{ label: 'Desktop', value: '86%', color: '#3858E9' },
+	{ label: 'Mobile', value: '52%', color: '#80C8FF' },
+];
+
+export const Horizontal: Story = {
+	args: {
+		items: mockData,
+		orientation: 'horizontal',
+	},
+};
+
+export const Vertical: Story = {
+	args: {
+		items: mockData,
+		orientation: 'vertical',
+	},
+};
+
+export const WithLongLabels: Story = {
+	args: {
+		items: [
+			{ label: 'Very Long Desktop Usage', value: '86%', color: '#3858E9' },
+			{ label: 'Extended Mobile Sessions', value: '52%', color: '#80C8FF' },
+			{ label: 'Tablet Device Access', value: '35%', color: '#44B556' },
+		],
+		orientation: 'horizontal',
+	},
+};

projects/js-packages/charts/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 >;
+};