@automattic/charts 0.50.2 → 0.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.50.2",
+	"version": "0.52.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -24,53 +24,58 @@
 			"require": "./dist/index.cjs"
 		},
 		"./bar-chart": {
-			"import": "./dist/components/bar-chart/index.js",
-			"require": "./dist/components/bar-chart/index.cjs"
+			"import": "./dist/charts/bar-chart/index.js",
+			"require": "./dist/charts/bar-chart/index.cjs"
 		},
-		"./bar-chart/style.css": "./dist/components/bar-chart/index.css",
+		"./bar-chart/style.css": "./dist/charts/bar-chart/index.css",
 		"./bar-list-chart": {
-			"import": "./dist/components/bar-list-chart/index.js",
-			"require": "./dist/components/bar-list-chart/index.cjs"
+			"import": "./dist/charts/bar-list-chart/index.js",
+			"require": "./dist/charts/bar-list-chart/index.cjs"
 		},
-		"./bar-list-chart/style.css": "./dist/components/bar-list-chart/index.css",
+		"./bar-list-chart/style.css": "./dist/charts/bar-list-chart/index.css",
 		"./conversion-funnel-chart": {
-			"import": "./dist/components/conversion-funnel-chart/index.js",
-			"require": "./dist/components/conversion-funnel-chart/index.cjs"
+			"import": "./dist/charts/conversion-funnel-chart/index.js",
+			"require": "./dist/charts/conversion-funnel-chart/index.cjs"
 		},
-		"./conversion-funnel-chart/style.css": "./dist/components/conversion-funnel-chart/index.css",
+		"./conversion-funnel-chart/style.css": "./dist/charts/conversion-funnel-chart/index.css",
 		"./hooks": {
 			"import": "./dist/hooks/index.js",
 			"require": "./dist/hooks/index.cjs"
 		},
 		"./leaderboard-chart": {
-			"import": "./dist/components/leaderboard-chart/index.js",
-			"require": "./dist/components/leaderboard-chart/index.cjs"
+			"import": "./dist/charts/leaderboard-chart/index.js",
+			"require": "./dist/charts/leaderboard-chart/index.cjs"
 		},
-		"./leaderboard-chart/style.css": "./dist/components/leaderboard-chart/index.css",
+		"./leaderboard-chart/style.css": "./dist/charts/leaderboard-chart/index.css",
 		"./legend": {
 			"import": "./dist/components/legend/index.js",
 			"require": "./dist/components/legend/index.cjs"
 		},
 		"./legend/style.css": "./dist/components/legend/index.css",
 		"./line-chart": {
-			"import": "./dist/components/line-chart/index.js",
-			"require": "./dist/components/line-chart/index.cjs"
+			"import": "./dist/charts/line-chart/index.js",
+			"require": "./dist/charts/line-chart/index.cjs"
 		},
-		"./line-chart/style.css": "./dist/components/line-chart/index.css",
+		"./line-chart/style.css": "./dist/charts/line-chart/index.css",
 		"./pie-chart": {
-			"import": "./dist/components/pie-chart/index.js",
-			"require": "./dist/components/pie-chart/index.cjs"
+			"import": "./dist/charts/pie-chart/index.js",
+			"require": "./dist/charts/pie-chart/index.cjs"
 		},
-		"./pie-chart/style.css": "./dist/components/pie-chart/index.css",
+		"./pie-chart/style.css": "./dist/charts/pie-chart/index.css",
 		"./pie-semi-circle-chart": {
-			"import": "./dist/components/pie-semi-circle-chart/index.js",
-			"require": "./dist/components/pie-semi-circle-chart/index.cjs"
+			"import": "./dist/charts/pie-semi-circle-chart/index.js",
+			"require": "./dist/charts/pie-semi-circle-chart/index.cjs"
 		},
-		"./pie-semi-circle-chart/style.css": "./dist/components/pie-semi-circle-chart/index.css",
+		"./pie-semi-circle-chart/style.css": "./dist/charts/pie-semi-circle-chart/index.css",
 		"./providers": {
 			"import": "./dist/providers/index.js",
 			"require": "./dist/providers/index.cjs"
 		},
+		"./sparkline": {
+			"import": "./dist/components/sparkline/index.js",
+			"require": "./dist/components/sparkline/index.cjs"
+		},
+		"./sparkline/style.css": "./dist/components/sparkline/index.css",
 		"./style.css": "./dist/index.css",
 		"./tooltip": {
 			"import": "./dist/components/tooltip/index.js",
@@ -102,25 +107,25 @@
 				"./dist/index.d.ts"
 			],
 			"line-chart": [
-				"./dist/components/line-chart/index.d.ts"
+				"./dist/charts/line-chart/index.d.ts"
 			],
 			"bar-chart": [
-				"./dist/components/bar-chart/index.d.ts"
+				"./dist/charts/bar-chart/index.d.ts"
 			],
 			"pie-chart": [
-				"./dist/components/pie-chart/index.d.ts"
+				"./dist/charts/pie-chart/index.d.ts"
 			],
 			"pie-semi-circle-chart": [
-				"./dist/components/pie-semi-circle-chart/index.d.ts"
+				"./dist/charts/pie-semi-circle-chart/index.d.ts"
 			],
 			"bar-list-chart": [
-				"./dist/components/bar-list-chart/index.d.ts"
+				"./dist/charts/bar-list-chart/index.d.ts"
 			],
 			"leaderboard-chart": [
-				"./dist/components/leaderboard-chart/index.d.ts"
+				"./dist/charts/leaderboard-chart/index.d.ts"
 			],
 			"conversion-funnel-chart": [
-				"./dist/components/conversion-funnel-chart/index.d.ts"
+				"./dist/charts/conversion-funnel-chart/index.d.ts"
 			],
 			"tooltip": [
 				"./dist/components/tooltip/index.d.ts"
@@ -128,6 +133,9 @@
 			"legend": [
 				"./dist/components/legend/index.d.ts"
 			],
+			"sparkline": [
+				"./dist/components/sparkline/index.d.ts"
+			],
 			"hooks": [
 				"./dist/hooks/index.d.ts"
 			],
@@ -203,7 +211,7 @@
 		"esbuild-sass-plugin": "^3.1.0",
 		"jest": "30.2.0",
 		"jest-environment-jsdom": "30.2.0",
-		"jest-extended": "5.0.3",
+		"jest-extended": "7.0.0",
 		"postcss": "8.5.6",
 		"postcss-modules": "6.0.1",
 		"react": "18.3.1",

package/src/{components → charts}/bar-chart/bar-chart.tsx

@@ -4,6 +4,8 @@ import { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useState, useRef, useMemo } from 'react';
+import { Legend, useChartLegendItems } from '../../components/legend';
+import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -21,10 +23,8 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
-import { Legend, useChartLegendItems } from '../legend';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
-import { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';
 import styles from './bar-chart.module.scss';
 import { useBarChartOptions } from './private';
 import type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';

package/src/{components → charts}/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -310,7 +310,6 @@ describe( 'ConversionFunnelChart', () => {
 			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } changeIndicator="+5.2%" /> );
 
 			const changeElement = screen.getByText( '+5.2%' );
-			// Note: The exact color value depends on the theme (Woo theme colors)
 			// Color is applied via CSS variable, so check that element exists
 			expect( changeElement ).toBeInTheDocument();
 		} );

package/src/charts/index.ts

@@ -0,0 +1,8 @@
+export * from './bar-chart';
+export * from './bar-list-chart';
+export * from './conversion-funnel-chart';
+export * from './leaderboard-chart';
+export * from './line-chart';
+export * from './pie-chart';
+export * from './pie-semi-circle-chart';
+export * from './sparkline';

package/src/{components → charts}/leaderboard-chart/hooks/use-leaderboard-legend-items.ts

@@ -1,8 +1,8 @@
 import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import { useGlobalChartsTheme, useGlobalChartsContext } from '../../../providers';
+import type { BaseLegendItem } from '../../../components/legend';
 import type { LeaderboardEntry } from '../../../types';
-import type { BaseLegendItem } from '../../legend';
 
 /**
  * Hook to create legend items from leaderboard data

package/src/{components → charts}/leaderboard-chart/leaderboard-chart.tsx

@@ -8,6 +8,7 @@ import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useContext, useMemo, type FC } from 'react';
+import { Legend } from '../../components/legend';
 import { usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsContext,
@@ -18,7 +19,6 @@ import {
 	useGlobalChartsTheme,
 } from '../../providers';
 import { formatMetricValue, attachSubComponents } from '../../utils';
-import { Legend } from '../legend';
 import { useChartChildren } from '../private/chart-composition';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';

package/src/{components → charts}/line-chart/line-chart.tsx

@@ -7,6 +7,8 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { differenceInHours, differenceInYears } from 'date-fns';
 import { useMemo, useContext, forwardRef, useImperativeHandle, useState, useRef } from 'react';
+import { Legend, useChartLegendItems } from '../../components/legend';
+import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -23,11 +25,9 @@ import {
 	useGlobalChartsTheme,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
-import { Legend, useChartLegendItems } from '../legend';
 import { DefaultGlyph } from '../private/default-glyph';
 import { SingleChartContext, type SingleChartRef } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
-import { AccessibleTooltip, useKeyboardNavigation } from '../tooltip';
 import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
 import type { CurveType, RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
@@ -278,6 +278,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			onPointerMove = undefined,
 			onPointerOut = undefined,
 			children,
+			gridVisibility,
 		},
 		ref
 	) => {
@@ -340,12 +341,14 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 						orientation: 'bottom' as const,
 						numTicks: guessOptimalNumTicks( dataSorted, width, formatter ),
 						tickFormat: formatter,
+						display: true,
 						...options?.axis?.x,
 					},
 					y: {
 						orientation: 'left' as const,
 						numTicks: 4,
 						tickFormat: formatNumberCompact as TickFormatter< number >,
+						display: true,
 						...options?.axis?.y,
 					},
 				},
@@ -488,9 +491,9 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 							onPointerOut={ onPointerOut }
 							pointerEventsDataKey="nearest"
 						>
-							<Grid columns={ false } numTicks={ 4 } />
-							<Axis { ...chartOptions.axis.x } />
-							<Axis { ...chartOptions.axis.y } />
+							{ gridVisibility !== 'none' && <Grid columns={ false } numTicks={ 4 } /> }
+							{ chartOptions.axis.x.display && <Axis { ...chartOptions.axis.x } /> }
+							{ chartOptions.axis.y.display && <Axis { ...chartOptions.axis.y } /> }
 
 							{ allSeriesHidden ? (
 								<text

package/src/{components → charts}/line-chart/test/line-chart.test.tsx

@@ -7,12 +7,12 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlyphDiamond } from '@visx/glyph';
 import { createElement, createRef } from 'react';
-import { GlobalChartsProvider, jetpackTheme, wooTheme } from '../../../providers';
+import { GlobalChartsProvider, defaultTheme } from '../../../providers';
 import LineChart, { LineChartUnresponsive } from '../line-chart';
 import type { SingleChartRef } from '../../private/single-chart-context';
 
 const customTheme = {
-	...jetpackTheme,
+	...defaultTheme,
 	glyphs: [
 		props =>
 			createElement(
@@ -31,8 +31,6 @@ const customTheme = {
 
 const THEME_MAP = {
 	default: undefined,
-	jetpack: jetpackTheme,
-	woo: wooTheme,
 	custom: customTheme,
 };
 
@@ -52,7 +50,7 @@ describe( 'LineChart', () => {
 		],
 	};
 
-	const renderWithTheme = ( props = {}, themeName = 'jetpack' ) => {
+	const renderWithTheme = ( props = {}, themeName = 'default' ) => {
 		const theme = THEME_MAP[ themeName ];
 
 		return render(
@@ -63,7 +61,7 @@ describe( 'LineChart', () => {
 		);
 	};
 
-	const renderUnwrappedWithTheme = ( props = {}, themeName = 'jetpack', ref = undefined ) => {
+	const renderUnwrappedWithTheme = ( props = {}, themeName = 'default', ref = undefined ) => {
 		const theme = THEME_MAP[ themeName ];
 
 		return render(
@@ -815,7 +813,7 @@ describe( 'LineChart', () => {
 	describe( 'Chart Ref Interface', () => {
 		test( 'exposes getScales method via ref', () => {
 			const ref = createRef< SingleChartRef >();
-			renderUnwrappedWithTheme( {}, 'jetpack', ref );
+			renderUnwrappedWithTheme( {}, 'default', ref );
 
 			expect( ref.current?.getScales() ).toBeDefined();
 			expect( ref.current?.getScales()?.xScale ).toBeDefined();
@@ -824,7 +822,7 @@ describe( 'LineChart', () => {
 
 		test( 'exposes getChartDimensions method via ref', () => {
 			const ref = createRef< SingleChartRef >();
-			renderUnwrappedWithTheme( { width: 800, height: 400 }, 'jetpack', ref );
+			renderUnwrappedWithTheme( { width: 800, height: 400 }, 'default', ref );
 
 			const dimensions = ref.current?.getChartDimensions();
 			expect( dimensions?.width ).toBe( 800 );
@@ -836,7 +834,7 @@ describe( 'LineChart', () => {
 		const renderWithAnnotations = (
 			children: React.ReactNode,
 			props = {},
-			themeName = 'jetpack'
+			themeName = 'default'
 		) => {
 			const theme = THEME_MAP[ themeName ];
 

package/src/{components → charts}/pie-chart/pie-chart.tsx

@@ -5,6 +5,8 @@ import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
+import { Legend, useChartLegendItems } from '../../components/legend';
+import { BaseTooltip } from '../../components/tooltip';
 import { useElementHeight, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsProvider,
@@ -16,15 +18,13 @@ import {
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
 import { getStringWidth } from '../../visx/text';
-import { Legend, useChartLegendItems } from '../legend';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive, ResponsiveConfig } from '../private/with-responsive';
-import { BaseTooltip } from '../tooltip';
 import styles from './pie-chart.module.scss';
+import type { LegendValueDisplay } from '../../components/legend';
 import type { BaseChartProps, DataPointPercentage, Optional } from '../../types';
-import type { LegendValueDisplay } from '../legend';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
 import type { SVGProps, MouseEvent, ReactNode, FC } from 'react';
 

package/src/{components → charts}/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -6,6 +6,8 @@ import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
+import { Legend, useChartLegendItems } from '../../components/legend';
+import { BaseTooltip } from '../../components/tooltip';
 import { useElementHeight, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsProvider,
@@ -15,15 +17,13 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
-import { Legend, useChartLegendItems } from '../legend';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
-import { BaseTooltip } from '../tooltip';
 import styles from './pie-semi-circle-chart.module.scss';
+import type { LegendValueDisplay } from '../../components/legend';
 import type { BaseChartProps, DataPointPercentage, Optional } from '../../types';
-import type { LegendValueDisplay } from '../legend';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';

package/src/{components → charts}/private/chart-composition/types.ts

@@ -1,4 +1,4 @@
-import { Legend } from '../../legend';
+import { Legend } from '../../../components/legend';
 import type { ComponentType, FC, PropsWithChildren } from 'react';
 
 /**

package/src/charts/sparkline/index.ts

@@ -0,0 +1,2 @@
+export { default as Sparkline, SparklineUnresponsive } from './sparkline';
+export type { SparklineProps, GradientConfig, SparklineDataPoint } from './types';

package/src/charts/sparkline/sparkline.module.scss

@@ -0,0 +1,18 @@
+.sparkline {
+	display: inline-block;
+	vertical-align: middle;
+	line-height: 1;
+
+	svg {
+		display: block;
+		overflow: visible;
+	}
+
+	path {
+		vector-effect: non-scaling-stroke;
+	}
+
+	&--empty {
+		display: inline-block;
+	}
+}

package/src/charts/sparkline/sparkline.tsx

@@ -0,0 +1,200 @@
+import clsx from 'clsx';
+import { useMemo, forwardRef } from 'react';
+import { useGlobalChartsTheme } from '../../providers';
+import { LineChartUnresponsive } from '../line-chart';
+import { withResponsive } from '../private/with-responsive';
+import styles from './sparkline.module.scss';
+import type { SparklineProps } from './types';
+import type { SeriesData } from '../../types';
+
+const DEFAULT_WIDTH = 100;
+const DEFAULT_HEIGHT = 40;
+
+/**
+ * Transforms a simple number array into SeriesData format for LineChart.
+ * Uses index-based dates to create a linear x-axis.
+ *
+ * @param data        - Array of numeric values to plot
+ * @param color       - Optional color for the line stroke
+ * @param strokeWidth - Optional stroke width for the line
+ * @return SeriesData array suitable for LineChart
+ */
+const transformToSeriesData = (
+	data: number[],
+	color?: string,
+	strokeWidth?: number
+): SeriesData[] => {
+	// Use a fixed base date and increment by index to create linear spacing
+	const baseDate = new Date( 2000, 0, 1 );
+
+	return [
+		{
+			label: 'sparkline',
+			data: data.map( ( value, index ) => ( {
+				date: new Date( baseDate.getTime() + index * 86400000 ), // Add days
+				value,
+			} ) ),
+			options: {
+				stroke: color,
+				seriesLineStyle: strokeWidth ? { strokeWidth } : undefined,
+			},
+		},
+	];
+};
+
+const SparklineComponent = forwardRef< HTMLDivElement, SparklineProps >(
+	(
+		{
+			data,
+			width = DEFAULT_WIDTH,
+			height = DEFAULT_HEIGHT,
+			color,
+			strokeWidth: strokeWidthProp,
+			withGradientFill = true,
+			gradient,
+			className,
+			chartId,
+			margin: marginProp,
+		},
+		ref
+	) => {
+		const theme = useGlobalChartsTheme();
+
+		// Get theme defaults for sparkline
+		const themeStrokeWidth = theme.sparkline?.strokeWidth ?? 1.5;
+
+		// Use prop values or fall back to theme defaults
+		const strokeWidth = strokeWidthProp ?? themeStrokeWidth;
+
+		// Transform number[] to SeriesData[] for LineChart
+		const seriesData = useMemo( () => {
+			if ( ! data || data.length === 0 ) {
+				return [];
+			}
+			return transformToSeriesData( data, color, strokeWidth );
+		}, [ data, color, strokeWidth ] );
+
+		// Merge margins with theme defaults
+		const finalMargin = useMemo( () => {
+			const themeMargin = theme.sparkline?.margin ?? { top: 2, right: 2, bottom: 2, left: 2 };
+			const margin = marginProp ?? themeMargin;
+			return {
+				...themeMargin,
+				...margin,
+			};
+		}, [ marginProp, theme.sparkline?.margin ] );
+
+		// Build gradient options for the series if custom gradient is provided
+		// Note: This must be called before any early returns to follow React hooks rules
+		const seriesWithGradient = useMemo( () => {
+			if ( ! gradient || seriesData.length === 0 ) {
+				return seriesData;
+			}
+
+			return seriesData.map( series => ( {
+				...series,
+				options: {
+					...series.options,
+					gradient: {
+						from: gradient.from || color || '#000000',
+						to: gradient.to || '#ffffff',
+						fromOpacity: gradient.fromOpacity ?? 0.5,
+						toOpacity: gradient.toOpacity ?? 0.0,
+					},
+				},
+			} ) );
+		}, [ seriesData, gradient, color ] );
+
+		// Handle empty data
+		if ( ! data || data.length === 0 ) {
+			return (
+				<div
+					ref={ ref }
+					className={ clsx(
+						'sparkline',
+						styles.sparkline,
+						styles[ 'sparkline--empty' ],
+						className
+					) }
+					style={ { width, height } }
+					data-testid="sparkline-empty"
+				/>
+			);
+		}
+
+		// Handle single data point - render a simple dot
+		if ( data.length === 1 ) {
+			const cx = width / 2;
+			const cy = height / 2;
+			const resolvedColor = color || '#000000';
+
+			return (
+				<div
+					ref={ ref }
+					className={ clsx(
+						'sparkline',
+						styles.sparkline,
+						styles[ 'sparkline--single-point' ],
+						className
+					) }
+					style={ { width, height } }
+					data-testid="sparkline-single-point"
+				>
+					<svg width={ width } height={ height } aria-hidden="true">
+						<circle cx={ cx } cy={ cy } r={ strokeWidth * 1.5 } fill={ resolvedColor } />
+					</svg>
+				</div>
+			);
+		}
+
+		return (
+			<div
+				ref={ ref }
+				className={ clsx( 'sparkline', styles.sparkline, className ) }
+				data-testid="sparkline"
+			>
+				<LineChartUnresponsive
+					data={ seriesWithGradient }
+					width={ width }
+					height={ height }
+					margin={ finalMargin }
+					chartId={ chartId }
+					withGradientFill={ withGradientFill }
+					withTooltips={ false }
+					showLegend={ false }
+					gridVisibility="none"
+					options={ {
+						axis: {
+							x: { display: false },
+							y: { display: false },
+						},
+					} }
+					curveType="monotone"
+				/>
+			</div>
+		);
+	}
+);
+
+SparklineComponent.displayName = 'SparklineComponent';
+
+/**
+ * Sparkline - A minimal line chart for inline data visualization.
+ *
+ * Sparklines are compact charts designed to be embedded inline with text or
+ * displayed in small spaces like table cells or dashboards. They show trends
+ * without axes, labels, or other chart chrome.
+ *
+ * This component is built on top of LineChart with preconfigured settings
+ * for minimal display (no axes, grid, tooltips, or legend).
+ */
+const SparklineUnresponsive = SparklineComponent;
+
+SparklineUnresponsive.displayName = 'SparklineUnresponsive';
+
+/**
+ * Responsive Sparkline chart component
+ */
+const Sparkline = withResponsive< SparklineProps >( SparklineUnresponsive );
+
+export { Sparkline as default, SparklineUnresponsive };