@automattic/charts 0.50.2 → 0.52.0

package/src/charts/sparkline/test/sparkline.test.tsx

@@ -0,0 +1,196 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/* eslint-disable testing-library/no-container, testing-library/no-node-access */
+
+import { render, screen } from '@testing-library/react';
+import { Sparkline, SparklineUnresponsive } from '../';
+import { GlobalChartsProvider, defaultTheme } from '../../../providers';
+import { customTheme } from '../../../stories/theme-config';
+
+const THEME_MAP = {
+	default: defaultTheme,
+	custom: customTheme,
+};
+
+describe( 'Sparkline', () => {
+	const defaultData = [ 10, 25, 15, 30, 22, 35 ];
+
+	const renderWithTheme = ( props = {}, themeName = 'default' ) => {
+		const theme = THEME_MAP[ themeName ];
+
+		return render(
+			<GlobalChartsProvider theme={ theme }>
+				<Sparkline data={ defaultData } { ...props } />
+			</GlobalChartsProvider>
+		);
+	};
+
+	const renderUnwrappedWithTheme = ( props = {}, themeName = 'default' ) => {
+		const theme = THEME_MAP[ themeName ];
+
+		return render(
+			<GlobalChartsProvider theme={ theme }>
+				<SparklineUnresponsive data={ defaultData } { ...props } />
+			</GlobalChartsProvider>
+		);
+	};
+
+	describe( 'Basic Rendering', () => {
+		test( 'renders sparkline with valid data', () => {
+			renderUnwrappedWithTheme();
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+
+		test( 'applies custom className', () => {
+			renderUnwrappedWithTheme( { className: 'custom-class' } );
+			const sparkline = screen.getByTestId( 'sparkline' );
+			expect( sparkline ).toHaveClass( 'custom-class' );
+		} );
+
+		test( 'renders responsive variant', () => {
+			renderWithTheme();
+			// Responsive variant wraps in a div, so sparkline should exist
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Edge Cases', () => {
+		test( 'handles empty data array', () => {
+			renderUnwrappedWithTheme( { data: [] } );
+			expect( screen.getByTestId( 'sparkline-empty' ) ).toBeInTheDocument();
+		} );
+
+		test( 'handles single data point', () => {
+			renderUnwrappedWithTheme( { data: [ 42 ] } );
+			const singlePoint = screen.getByTestId( 'sparkline-single-point' );
+			expect( singlePoint ).toBeInTheDocument();
+			// Should render a circle
+			const circle = singlePoint.querySelector( 'circle' );
+			expect( circle ).toBeInTheDocument();
+		} );
+
+		test( 'handles two data points', () => {
+			renderUnwrappedWithTheme( { data: [ 10, 20 ] } );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+
+		test( 'handles negative values', () => {
+			renderUnwrappedWithTheme( { data: [ -10, -5, 0, 5, 10 ] } );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+
+		test( 'handles flat line (all same values)', () => {
+			renderUnwrappedWithTheme( { data: [ 50, 50, 50, 50 ] } );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Styling Props', () => {
+		test( 'applies custom color', () => {
+			const { container } = renderUnwrappedWithTheme( { color: '#ff0000' } );
+			// Check that SVG contains a path with the custom color
+			const path = container.querySelector( 'path[stroke="#ff0000"]' );
+			expect( path ).toBeInTheDocument();
+		} );
+
+		test( 'applies custom stroke width', () => {
+			const { container } = renderUnwrappedWithTheme( { strokeWidth: 4 } );
+			const path = container.querySelector( 'path[stroke-width="4"]' );
+			expect( path ).toBeInTheDocument();
+		} );
+
+		test( 'renders with gradient fill by default', () => {
+			const { container } = renderUnwrappedWithTheme();
+			// Check for LinearGradient in SVG
+			const gradient = container.querySelector( 'linearGradient' );
+			expect( gradient ).toBeInTheDocument();
+		} );
+
+		test( 'disables gradient fill when withGradientFill is false', () => {
+			const { container } = renderUnwrappedWithTheme( { withGradientFill: false } );
+			// Should not have gradient
+			const gradient = container.querySelector( 'linearGradient' );
+			expect( gradient ).not.toBeInTheDocument();
+		} );
+
+		test( 'applies custom gradient config', () => {
+			const { container } = renderUnwrappedWithTheme( {
+				gradient: {
+					from: '#00ff00',
+					to: '#0000ff',
+					fromOpacity: 0.8,
+					toOpacity: 0.1,
+				},
+			} );
+			const gradient = container.querySelector( 'linearGradient' );
+			expect( gradient ).toBeInTheDocument();
+			// Check for color stops
+			const stops = gradient?.querySelectorAll( 'stop' );
+			expect( stops?.length ).toBeGreaterThan( 0 );
+		} );
+	} );
+
+	describe( 'Dimensions', () => {
+		test( 'applies default dimensions', () => {
+			const { container } = renderUnwrappedWithTheme();
+			const svg = container.querySelector( 'svg' );
+			expect( svg ).toHaveAttribute( 'width', '100' );
+			expect( svg ).toHaveAttribute( 'height', '40' );
+		} );
+
+		test( 'applies custom dimensions', () => {
+			const { container } = renderUnwrappedWithTheme( { width: 200, height: 80 } );
+			const svg = container.querySelector( 'svg' );
+			expect( svg ).toHaveAttribute( 'width', '200' );
+			expect( svg ).toHaveAttribute( 'height', '80' );
+		} );
+
+		test( 'applies custom margin', () => {
+			renderUnwrappedWithTheme( { margin: { top: 10, right: 10, bottom: 10, left: 10 } } );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Theme Integration', () => {
+		test( 'uses default theme colors', () => {
+			const { container } = renderUnwrappedWithTheme( {}, 'default' );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+			// Should render with theme color if no color prop provided
+			const path = container.querySelector( 'path[stroke]' );
+			expect( path ).toBeInTheDocument();
+		} );
+
+		test( 'uses custom theme colors', () => {
+			const { container } = renderUnwrappedWithTheme( {}, 'custom' );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+			const path = container.querySelector( 'path[stroke]' );
+			expect( path ).toBeInTheDocument();
+		} );
+
+		test( 'color prop overrides theme color', () => {
+			const { container } = renderUnwrappedWithTheme( { color: '#custom' }, 'default' );
+			const path = container.querySelector( 'path[stroke="#custom"]' );
+			expect( path ).toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'Data Transformation', () => {
+		test( 'handles large datasets', () => {
+			const largeData = Array.from( { length: 100 }, ( _, i ) => i * 2 );
+			renderUnwrappedWithTheme( { data: largeData } );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+
+		test( 'handles small datasets', () => {
+			renderUnwrappedWithTheme( { data: [ 1, 2 ] } );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+
+		test( 'handles data with large range', () => {
+			renderUnwrappedWithTheme( { data: [ 1, 1000, 50, 500 ] } );
+			expect( screen.getByTestId( 'sparkline' ) ).toBeInTheDocument();
+		} );
+	} );
+} );

package/src/charts/sparkline/types.ts

@@ -0,0 +1,92 @@
+export type SparklineDataPoint = number;
+
+export type GradientConfig = {
+	/**
+	 * Start color for gradient (defaults to color prop)
+	 */
+	from?: string;
+	/**
+	 * End color for gradient (defaults to theme backgroundColor)
+	 */
+	to?: string;
+	/**
+	 * Start opacity (0-1)
+	 * @default 0.5
+	 */
+	fromOpacity?: number;
+	/**
+	 * End opacity (0-1)
+	 * @default 0.0
+	 */
+	toOpacity?: number;
+};
+
+export interface SparklineProps {
+	/**
+	 * Array of numeric values to plot
+	 * @example [10, 25, 15, 30, 22, 35]
+	 */
+	data: SparklineDataPoint[];
+
+	/**
+	 * Width of the sparkline in pixels
+	 * @default 100
+	 */
+	width?: number;
+
+	/**
+	 * Height of the sparkline in pixels
+	 * @default 40
+	 */
+	height?: number;
+
+	/**
+	 * Size (used by responsive variant, equivalent to width for square charts)
+	 */
+	size?: number;
+
+	/**
+	 * Color for the line stroke (hex or CSS color)
+	 * @default Theme color (first color in theme.colors array)
+	 */
+	color?: string;
+
+	/**
+	 * Line stroke width in pixels
+	 * @default 1
+	 */
+	strokeWidth?: number;
+
+	/**
+	 * Whether to render the gradient fill beneath the line
+	 * @default true
+	 */
+	withGradientFill?: boolean;
+
+	/**
+	 * Gradient configuration for area fill
+	 * If not provided, uses color prop with default opacity values
+	 */
+	gradient?: GradientConfig;
+
+	/**
+	 * Additional CSS class name
+	 */
+	className?: string;
+
+	/**
+	 * Chart ID for unique gradient/element identification
+	 */
+	chartId?: string;
+
+	/**
+	 * Margin around the chart
+	 * @default { top: 2, right: 2, bottom: 2, left: 2 }
+	 */
+	margin?: {
+		top?: number;
+		right?: number;
+		bottom?: number;
+		left?: number;
+	};
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './legend';
+export * from './tooltip';

package/src/components/legend/legend.tsx

@@ -1,6 +1,6 @@
 import { useContext, useMemo, forwardRef } from 'react';
+import { SingleChartContext } from '../../charts/private/single-chart-context';
 import { GlobalChartsContext } from '../../providers';
-import { SingleChartContext } from '../private/single-chart-context';
 import { BaseLegend } from './private';
 import type { LegendProps } from './types';
 

package/src/compositions/index.ts

@@ -0,0 +1,2 @@
+// Compositions directory - prepared for future use
+export {};

package/src/index.ts

@@ -1,20 +1,20 @@
 // Charts
-export { BarChart, BarChartUnresponsive } from './components/bar-chart';
-export { LineChart, LineChartUnresponsive } from './components/line-chart';
-export { PieChart, PieChartUnresponsive } from './components/pie-chart';
-export {
-	PieSemiCircleChart,
-	PieSemiCircleChartUnresponsive,
-} from './components/pie-semi-circle-chart';
-export { BarListChart, BarListChartUnresponsive } from './components/bar-list-chart';
-export { LeaderboardChart, LeaderboardChartUnresponsive } from './components/leaderboard-chart';
-export { ConversionFunnelChart } from './components/conversion-funnel-chart';
+export { BarChart, BarChartUnresponsive } from './charts/bar-chart';
+export { LineChart, LineChartUnresponsive } from './charts/line-chart';
+export { PieChart, PieChartUnresponsive } from './charts/pie-chart';
+export { PieSemiCircleChart, PieSemiCircleChartUnresponsive } from './charts/pie-semi-circle-chart';
+export { BarListChart, BarListChartUnresponsive } from './charts/bar-list-chart';
+export { LeaderboardChart, LeaderboardChartUnresponsive } from './charts/leaderboard-chart';
+export { ConversionFunnelChart } from './charts/conversion-funnel-chart';
+export { Sparkline, SparklineUnresponsive } from './charts/sparkline';
 
-// Chart components
+// Components
 export { BaseTooltip } from './components/tooltip';
 export { Legend, useChartLegendItems } from './components/legend';
 export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
 
+// Compositions
+
 // Themes
 export { GlobalChartsProvider as ThemeProvider } from './providers';
 
@@ -25,13 +25,11 @@ export {
 	useGlobalChartsTheme,
 	GlobalChartsContext,
 	defaultTheme,
-	jetpackTheme,
-	wooTheme,
 } from './providers';
 
 // Types
 export type * from './types';
 export type * from './visx/types';
-export type { PieChartProps } from './components/pie-chart';
+export type { PieChartProps } from './charts/pie-chart';
 
 export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';

package/src/providers/chart-context/test/chart-context.test.tsx

@@ -4,7 +4,6 @@ import { GlobalChartsProvider } from '../global-charts-provider';
 import { useChartId } from '../hooks/use-chart-id';
 import { useChartRegistration } from '../hooks/use-chart-registration';
 import { useGlobalChartsContext } from '../hooks/use-global-charts-context';
-import { wooTheme } from '../themes';
 import type { BaseLegendItem } from '../../../components/legend';
 import type { ChartTheme, SeriesData } from '../../../types';
 import type { GlobalChartsContextValue } from '../types';
@@ -768,40 +767,6 @@ describe( 'ChartContext', () => {
 
 			expect( afterThemeChangeColor ).not.toBe( initialColor );
 		} );
-
-		it( 'generates colors with Woo theme characteristics', () => {
-			let contextValue: GlobalChartsContextValue;
-
-			const TestComponent = () => {
-				contextValue = useGlobalChartsContext();
-				return <div>Test</div>;
-			};
-
-			render(
-				<GlobalChartsProvider theme={ wooTheme }>
-					<TestComponent />
-				</GlobalChartsProvider>
-			);
-
-			// Generate colors beyond the palette
-			const generatedColors = [];
-			for ( let i = 5; i < 8; i++ ) {
-				const color = contextValue.getElementStyles( {
-					data: createMockDataWithGroup( undefined ),
-					index: i,
-				} ).color;
-				generatedColors.push( color );
-			}
-
-			// All generated colors should be in HSL format
-			generatedColors.forEach( color => {
-				expect( color ).toMatch( /^hsl\(\d+,\s*\d+%,\s*\d+%\)$/ );
-			} );
-
-			// All generated colors should be different
-			const uniqueColors = new Set( generatedColors );
-			expect( uniqueColors.size ).toBe( generatedColors.length );
-		} );
 	} );
 
 	describe( 'Context stability', () => {

package/src/providers/chart-context/test/use-global-charts-theme.test.tsx

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { GlobalChartsProvider } from '../global-charts-provider';
 import { useGlobalChartsTheme } from '../hooks/use-global-charts-theme';
-import { defaultTheme, jetpackTheme, wooTheme } from '../themes';
+import { defaultTheme } from '../themes';
 import type { ChartTheme } from '../../../types';
 import type { ReactNode } from 'react';
 
@@ -33,28 +33,6 @@ describe( 'useGlobalChartsTheme', () => {
 			expect( result.current.gridStyles ).toEqual( defaultTheme.gridStyles );
 		} );
 
-		it( 'should work with predefined jetpackTheme', () => {
-			const wrapper = createWrapper( jetpackTheme );
-
-			const { result } = renderHook( () => useGlobalChartsTheme(), { wrapper } );
-
-			expect( result.current.colors ).toEqual( jetpackTheme.colors );
-			expect( result.current.leaderboardChart?.primaryColor ).toBe(
-				jetpackTheme.leaderboardChart?.primaryColor
-			);
-		} );
-
-		it( 'should work with predefined wooTheme', () => {
-			const wrapper = createWrapper( wooTheme );
-
-			const { result } = renderHook( () => useGlobalChartsTheme(), { wrapper } );
-
-			expect( result.current.colors ).toEqual( wooTheme.colors );
-			expect( result.current.leaderboardChart?.primaryColor ).toBe(
-				wooTheme.leaderboardChart?.primaryColor
-			);
-		} );
-
 		it( 'should handle empty theme object', () => {
 			const wrapper = createWrapper( {} );
 

package/src/providers/chart-context/themes.ts

@@ -1,4 +1,4 @@
-import type { ChartTheme, CompleteChartTheme } from '../../types';
+import type { CompleteChartTheme } from '../../types';
 
 /**
  * Default theme configuration
@@ -58,132 +58,10 @@ const defaultTheme: CompleteChartTheme = {
 			},
 		},
 	},
-};
-
-/**
- * Jetpack theme configuration
- */
-const jetpackTheme: ChartTheme = {
-	backgroundColor: '#FFFFFF', // chart background color
-	labelBackgroundColor: 'transparent', // label background color (transparent by default)
-	labelTextColor: '#FFFFFF', // label text color (white to match original behavior)
-	colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],
-	gridStyles: {
-		stroke: '#DCDCDE',
-		strokeWidth: 1,
-	},
-	tickLength: 4,
-	gridColor: '',
-	gridColorDark: '',
-	xTickLineStyles: { stroke: 'black' },
-	xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 },
-	legendLabelStyles: {
-		color: 'var(--jp-gray-80, #2c3338)',
-	},
-	svgLabelSmall: { fill: 'var(--jp-gray-80, #2c3338)' },
-	annotationStyles: {
-		label: {
-			anchorLineStroke: 'var(--jp-gray-80, #2c3338)',
-			backgroundFill: '#fff',
-		},
-		connector: {
-			stroke: 'var(--jp-gray-80, #2c3338)',
-		},
-		circleSubject: {
-			stroke: 'transparent',
-			fill: 'var(--jp-gray-80, #2c3338)',
-			radius: 5,
-		},
-	},
-	leaderboardChart: {
-		rowGap: 12,
-		columnGap: 4,
-		labelSpacing: 1.5,
-		primaryColor: '#006DAB',
-		secondaryColor: '#98C8DF',
-		deltaColors: [ '#FF8C8F', '#757575', '#1F9828' ], // [negative, neutral, positive]
-	},
-	conversionFunnelChart: {
-		backgroundColor: '#F3F4F6',
-		positiveChangeColor: '#1F9828',
-		negativeChangeColor: '#FF8C8F',
-	},
-	lineChart: {
-		lineStyles: {
-			comparison: {
-				strokeDasharray: '4 4',
-				strokeLinecap: 'square',
-			},
-		},
-	},
-};
-
-/**
- * Woo theme configuration
- */
-const wooTheme: ChartTheme = {
-	backgroundColor: '#FFFFFF', // chart background color
-	labelBackgroundColor: 'transparent', // label background color (transparent by default)
-	labelTextColor: '#FFFFFF', // label text color (white to match original behavior)
-	colors: [
-		'#3858E9', // WooCommerce brand blue
-		'#66BDFF', // Light blue
-		'#873EFF', // Purple
-		'#7B90FF', // Periwinkle blue
-		'#EB6594', // Pink/rose
-	],
-	gridStyles: {
-		stroke: '#787C82',
-		strokeWidth: 1,
-	},
-	tickLength: 4,
-	gridColor: '',
-	gridColorDark: '',
-	svgLabelSmall: { fill: '#757575' },
-	xTickLineStyles: { stroke: 'black' },
-	xAxisLineStyles: { stroke: '#DCDCDE', strokeWidth: 1 },
-	legendLabelStyles: {
-		fontSize: '12px',
-		fontWeight: 400,
-		color: '#757575',
-	},
-	legendContainerStyles: {
-		gap: '8px',
-	},
-	annotationStyles: {
-		label: {
-			anchorLineStroke: 'black',
-			backgroundFill: '#fff',
-		},
-		connector: {
-			stroke: 'black',
-		},
-		circleSubject: {
-			stroke: 'transparent',
-			fill: 'black',
-			radius: 5,
-		},
-	},
-	leaderboardChart: {
-		rowGap: 12,
-		columnGap: 4,
-		labelSpacing: 1.5,
-		deltaColors: [ '#D63638', '#757575', '#008A20' ], // [negative, neutral, positive]
-	},
-	conversionFunnelChart: {
-		backgroundColor: '#F3F4F6',
-		positiveChangeColor: '#008A20',
-		negativeChangeColor: '#D63638',
-	},
-	lineChart: {
-		lineStyles: {
-			comparison: {
-				strokeDasharray: '4 4',
-				strokeWidth: 1.5,
-				strokeLinecap: 'square',
-			},
-		},
+	sparkline: {
+		margin: { top: 2, right: 2, bottom: 2, left: 2 },
+		strokeWidth: 1.5,
 	},
 };
 
-export { defaultTheme, jetpackTheme, wooTheme };
+export { defaultTheme };

package/src/types.ts

@@ -215,6 +215,18 @@ export type ChartTheme = {
 	lineChart?: {
 		lineStyles?: Partial< Record< NonNullable< SeriesDataOptions[ 'type' ] >, LineStyles > >;
 	};
+	/** Sparkline specific settings */
+	sparkline?: {
+		/** Margin around the sparkline chart */
+		margin?: {
+			top?: number;
+			right?: number;
+			bottom?: number;
+			left?: number;
+		};
+		/** Stroke width for the sparkline line */
+		strokeWidth?: number;
+	};
 };
 
 /**
@@ -235,6 +247,9 @@ export type CompleteChartTheme = Required< ChartTheme > & {
 	lineChart: {
 		lineStyles: Record< NonNullable< SeriesDataOptions[ 'type' ] >, LineStyles >;
 	};
+	sparkline: Required< NonNullable< ChartTheme[ 'sparkline' ] > > & {
+		margin: Required< NonNullable< ChartTheme[ 'sparkline' ] >[ 'margin' ] >;
+	};
 };
 
 declare type AxisOptions = {
@@ -245,6 +260,10 @@ declare type AxisOptions = {
 	labelClassName?: string;
 	tickClassName?: string;
 	tickFormat?: TickFormatter< ScaleInput< AxisScale > >;
+	/**
+	 * Whether to display this axis. Defaults to true.
+	 */
+	display?: boolean;
 	/**
 	 * For more control over rendering or to add event handlers to datum, pass a function as children.
 	 */

package/dist/chunk-3OVXJFQY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/private/radial-wipe-animation/radial-wipe-animation.tsx"],"sourcesContent":["/**\n * This animation uses the SVG self-drawing technique (source: https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/),\n * leveraging stroke-dasharray and stroke-dashoffset properties to create the effect.\n *\n * Here, we reverse the animation to \"un-draw\" the circle for the revealing / radial wipe effect:\n * - Initially, the entire circle is drawn with a white mask.\n * - The circle's border (stroke) is drawn with a black stroke, wide enough to cover the circle.\n * - The stroke is then \"un-drawn,\" creating the wipe animation.\n * - A white mask makes the area visible, while a black mask makes the area invisible.\n */\n\ntype Angle = `${ number }deg` | `${ number }rad` | `${ number }grad` | `${ number }turn` | 0 | '0';\n\n/**\n * RadialWipeAnimationProps - SVG mask props that requires a radial wipe animation effect.\n *\n * @param {object}                            props                         - The properties object.\n * @param {string}                            props.id                      - The unique ID for the mask.\n * @param {number}                            props.radius                  - The outer radius of the radial wipe.\n * @param {number}                            [props.innerRadius=0]         - The inner radius of the radial wipe.\n * @param {number}                            [props.durationMs=1000]       - The duration of the animation in milliseconds.\n * @param {number}                            [props.wipePercentage=100]    - The percentage of the wipe animation to complete.\n * @param {'clockwise' | 'counter-clockwise'} [props.direction='clockwise'] - The direction of the wipe animation.\n * @param {Angle}                             [props.startAngle='-90deg']   - The starting angle of the wipe animation.\n *\n * @return {JSX.Element} The radial wipe mask element.\n */\nexport type RadialWipeAnimationProps = {\n\tid: string;\n\tradius: number;\n\tinnerRadius?: number;\n\tdurationMs?: number;\n\tstartAngle?: Angle;\n\tdirection?: 'clockwise' | 'counter-clockwise';\n\twipePercentage?: number;\n};\n\n/**\n * Renders a SVG mask that creates a radial wipe animation effect.\n *\n * @param {RadialWipeAnimationProps} props - Component props\n * @return {JSX.Element} The rendered mask component\n */\nfunction RadialWipeAnimation( {\n\tid,\n\tradius,\n\tinnerRadius = 0,\n\tdurationMs = 1000,\n\twipePercentage = 100,\n\tdirection = 'clockwise',\n\tstartAngle = '-90deg',\n}: RadialWipeAnimationProps ) {\n\tconst strokeWidth =\n\t\t( radius - innerRadius ) * 2 + // The stroke is centered on the circumference, so we need to double the width.\n\t\t1; // Added 1 to prevent sub-pixel rendering issues.\n\n\tconst scaleY = direction === 'clockwise' ? -1 : 1;\n\n\tconst isValidWipePercentage = 0 < wipePercentage && wipePercentage <= 100;\n\tconst animationDuration = `${\n\t\t// If wipePercentage is invalid, set animation duration to 0 to disable animation.\n\t\tisValidWipePercentage ? durationMs * ( 100 / wipePercentage ) : 0\n\t}ms`;\n\n\treturn (\n\t\t<mask id={ id }>\n\t\t\t<circle\n\t\t\t\tcx={ 0 }\n\t\t\t\tcy={ 0 }\n\t\t\t\tr={ radius }\n\t\t\t\tpathLength=\"100\"\n\t\t\t\tfill=\"white\"\n\t\t\t\tstroke=\"black\" // The stroke will be un-drawn, hence 'black' mask.\n\t\t\t\tstrokeWidth={ strokeWidth }\n\t\t\t\tstrokeDasharray=\"100, 1000\"\n\t\t\t\tstrokeDashoffset=\"0\"\n\t\t\t\tstyle={ { transform: `rotate(${ startAngle }) scaleY(${ scaleY })` } }\n\t\t\t>\n\t\t\t\t<animate\n\t\t\t\t\tattributeName=\"stroke-dashoffset\"\n\t\t\t\t\tfrom=\"0\"\n\t\t\t\t\tto=\"100.1\"\n\t\t\t\t\tdur={ animationDuration }\n\t\t\t\t\tfill=\"freeze\" // Same as CSS 'forwards' to retain the final state after animation.\n\t\t\t\t\tcalcMode=\"spline\" // custom easing\n\t\t\t\t\tkeySplines=\"0.42 0 0.58 1;0 0 1 1\" // ease-in-out ; linear (unimportant)\n\t\t\t\t\tkeyTimes={ `0;${ wipePercentage / 100 };1` }\n\t\t\t\t/>\n\t\t\t</circle>\n\t\t</mask>\n\t);\n}\n\nexport default RadialWipeAnimation;\n"],"mappings":";AA8EI;AAnCJ,SAAS,oBAAqB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,aAAa;AACd,GAA8B;AAC7B,QAAM,eACH,SAAS,eAAgB;AAAA,EAC3B;AAED,QAAM,SAAS,cAAc,cAAc,KAAK;AAEhD,QAAM,wBAAwB,IAAI,kBAAkB,kBAAkB;AACtE,QAAM,oBAAoB;AAAA,EAEzB,wBAAwB,cAAe,MAAM,kBAAmB,CACjE;AAEA,SACC,oBAAC,UAAK,IACL;AAAA,IAAC;AAAA;AAAA,MACA,IAAK;AAAA,MACL,IAAK;AAAA,MACL,GAAI;AAAA,MACJ,YAAW;AAAA,MACX,MAAK;AAAA,MACL,QAAO;AAAA,MACP;AAAA,MACA,iBAAgB;AAAA,MAChB,kBAAiB;AAAA,MACjB,OAAQ,EAAE,WAAW,UAAW,UAAW,YAAa,MAAO,IAAI;AAAA,MAEnE;AAAA,QAAC;AAAA;AAAA,UACA,eAAc;AAAA,UACd,MAAK;AAAA,UACL,IAAG;AAAA,UACH,KAAM;AAAA,UACN,MAAK;AAAA,UACL,UAAS;AAAA,UACT,YAAW;AAAA,UACX,UAAW,KAAM,iBAAiB,GAAI;AAAA;AAAA,MACvC;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,gCAAQ;","names":[]}