@automattic/charts 0.58.0 → 1.0.0

package/src/components/legend/legend.tsx

@@ -3,9 +3,21 @@ import { SingleChartContext } from '../../charts/private/single-chart-context';
 import { GlobalChartsContext } from '../../providers';
 import { BaseLegend } from './private';
 import type { LegendProps } from './types';
+import type { ChartType } from '../../types';
+import type { LegendShape } from '@visx/legend/lib/types';
+
+const defaultShapeByChartType: Partial<
+	Record< ChartType, Extract< LegendShape< unknown, unknown >, string > >
+> = {
+	line: 'line',
+	bar: 'rect',
+	pie: 'circle',
+	'pie-semi-circle': 'circle',
+	leaderboard: 'circle',
+};
 
 export const Legend = forwardRef< HTMLDivElement, LegendProps >(
-	( { chartId, items, ...props }, ref ) => {
+	( { chartId, items, shape, ...props }, ref ) => {
 		// Get context but don't throw if it doesn't exist
 		const context = useContext( GlobalChartsContext );
 		const singleChartContext = useContext( SingleChartContext );
@@ -14,12 +26,17 @@ export const Legend = forwardRef< HTMLDivElement, LegendProps >(
 		// When chartId is not provided, we use the context's chartId, meaning it is in a single chart context
 		const contextChartId = chartId ?? singleChartContext?.chartId;
 
-		// Use useMemo to ensure re-rendering when context changes
-		const contextItems = useMemo( () => {
-			return contextChartId && context
-				? context.getChartData( contextChartId )?.legendItems
-				: undefined;
-		}, [ contextChartId, context ] );
+		const chartData = useMemo(
+			() => ( contextChartId && context ? context.getChartData( contextChartId ) : undefined ),
+			[ contextChartId, context ]
+		);
+
+		const contextItems = chartData?.legendItems;
+
+		// Derive the default legend shape from the chart type when no explicit shape is provided
+		const resolvedShape =
+			shape ??
+			( chartData?.chartType ? defaultShapeByChartType[ chartData.chartType ] : undefined );
 
 		// Provided items take precedence over context items
 		const legendItems = ( items || contextItems ) as typeof items;
@@ -28,6 +45,14 @@ export const Legend = forwardRef< HTMLDivElement, LegendProps >(
 			return null;
 		}
 
-		return <BaseLegend ref={ ref } items={ legendItems } { ...props } chartId={ contextChartId } />;
+		return (
+			<BaseLegend
+				ref={ ref }
+				items={ legendItems }
+				shape={ resolvedShape }
+				{ ...props }
+				chartId={ contextChartId }
+			/>
+		);
 	}
 );

package/src/components/legend/test/legend.test.tsx

@@ -1,8 +1,12 @@
 /* eslint-disable react/jsx-no-bind */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { GlobalChartsProvider } from '../../../providers';
+import { useMemo } from 'react';
+import { SingleChartContext } from '../../../charts/private/single-chart-context';
+import { GlobalChartsProvider, useChartId, useChartRegistration } from '../../../providers';
+import { Legend } from '../legend';
 import { BaseLegend } from '../private/base-legend';
+import type { ChartType } from '../../../types';
 import type { LegendProps } from '../types';
 
 const TestShape: LegendProps[ 'shape' ] = props => {
@@ -425,6 +429,94 @@ describe( 'BaseLegend', () => {
 		} );
 	} );
 
+	describe( 'Legend shape defaults from chart type', () => {
+		const legendItems = [
+			{ label: 'Series 1', color: '#ff0000' },
+			{ label: 'Series 2', color: '#00ff00' },
+		];
+
+		const CustomShape: LegendProps[ 'shape' ] = props => (
+			<span data-testid="custom-shape" style={ { color: props.fill as string } } />
+		);
+
+		const ChartRegistrar = ( {
+			chartType,
+			chartId,
+		}: {
+			chartType: ChartType;
+			chartId: string;
+		} ) => {
+			const resolvedId = useChartId( chartId );
+			const metadata = useMemo( () => ( {} ), [] );
+			useChartRegistration( {
+				chartId: resolvedId,
+				legendItems,
+				chartType,
+				isDataValid: true,
+				metadata,
+			} );
+			return null;
+		};
+
+		const renderLegendWithChartType = (
+			chartType: ChartType,
+			explicitShape?: LegendProps[ 'shape' ]
+		) => {
+			const chartId = `test-${ chartType }`;
+
+			return render(
+				<GlobalChartsProvider>
+					<ChartRegistrar chartType={ chartType } chartId={ chartId } />
+					<SingleChartContext.Provider value={ { chartId } }>
+						<Legend shape={ explicitShape } />
+					</SingleChartContext.Provider>
+				</GlobalChartsProvider>
+			);
+		};
+
+		it( 'uses line shape for line chart type', () => {
+			renderLegendWithChartType( 'line' );
+			expect( screen.getByRole( 'list' ) ).toBeInTheDocument();
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+
+			const html = document.body.innerHTML;
+			expect( html ).toContain( '<line' );
+		} );
+
+		it( 'uses rect shape for bar chart type', () => {
+			renderLegendWithChartType( 'bar' );
+			expect( screen.getByRole( 'list' ) ).toBeInTheDocument();
+
+			// visx ShapeRect renders a <div> with inline background style inside
+			// .visx-legend-shape. No testids or roles on these elements, so direct
+			// node access is necessary.
+			// eslint-disable-next-line testing-library/no-node-access
+			const shapes = document.querySelectorAll( '.visx-legend-shape > div' );
+			expect( shapes ).toHaveLength( 2 );
+			shapes.forEach( shape => {
+				expect( ( shape as HTMLElement ).style.background ).toBeTruthy();
+			} );
+		} );
+
+		it( 'uses circle shape for pie chart type', () => {
+			renderLegendWithChartType( 'pie' );
+			expect( screen.getByRole( 'list' ) ).toBeInTheDocument();
+
+			const html = document.body.innerHTML;
+			expect( html ).toContain( '<circle' );
+			expect( html ).not.toContain( '<line' );
+		} );
+
+		it( 'allows explicit shape to override chart type default', () => {
+			renderLegendWithChartType( 'line', CustomShape );
+			expect( screen.getByRole( 'list' ) ).toBeInTheDocument();
+			expect( screen.getAllByTestId( 'custom-shape' ) ).toHaveLength( 2 );
+
+			const html = document.body.innerHTML;
+			expect( html ).not.toContain( '<line' );
+		} );
+	} );
+
 	describe( 'Interactive legend', () => {
 		it( 'renders interactive legend items with proper attributes', () => {
 			render(

package/src/hooks/index.ts

@@ -6,6 +6,7 @@ export { useChartMargin } from './use-chart-margin';
 export { useElementSize } from './use-element-size';
 export { useTextTruncation } from './use-text-truncation';
 export { useZeroValueDisplay } from './use-zero-value-display';
+export { useDataWithPercentages } from './use-data-with-percentages';
 export { useInteractiveLegendData } from './use-interactive-legend-data';
 export { usePrefersReducedMotion } from './use-prefers-reduced-motion';
 export { useTooltipPortalRelocator } from './use-tooltip-portal-relocator';

package/src/hooks/use-data-with-percentages.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+
+interface DataPointWithValue {
+	value: number;
+}
+
+/**
+ * Hook to calculate percentages from values for chart data.
+ * Ensures percentages are always derived from values (single source of truth).
+ *
+ * @param data - Array of data points with values
+ * @return Data with calculated percentages
+ */
+export const useDataWithPercentages = < T extends DataPointWithValue >(
+	data: T[]
+): ( T & { percentage: number } )[] => {
+	return useMemo( () => {
+		const totalValue = data.reduce( ( sum, segment ) => sum + segment.value, 0 );
+		return data.map( segment => ( {
+			...segment,
+			percentage: totalValue > 0 ? ( segment.value / totalValue ) * 100 : 0,
+		} ) );
+	}, [ data ] );
+};

package/src/hooks/use-interactive-legend-data.ts

@@ -2,7 +2,8 @@ import { useMemo } from 'react';
 
 /**
  * Data point interface for charts with interactive legends.
- * Requires label for series identification, value for calculations, and percentage for display.
+ * Requires label for series identification, value for calculations,
+ * and percentage (should be pre-calculated by the chart component).
  */
 interface DataPointWithPercentage {
 	label: string;
@@ -14,7 +15,7 @@ interface DataPointWithPercentage {
  * Parameters for the useInteractiveLegendData hook.
  */
 interface UseInteractiveLegendDataParams< T extends DataPointWithPercentage > {
-	/** The chart data to filter based on legend visibility */
+	/** The chart data with pre-calculated percentages */
 	data: T[];
 	/** Unique chart identifier, required for interactive legends */
 	chartId: string | undefined;
@@ -33,9 +34,9 @@ interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
 	/** Boolean indicating if all segments are hidden */
 	allSegmentsHidden: boolean;
 	/**
-	 * Legend data with recalculated percentages for visible items.
-	 * Uses original data for hidden items, but shows recalculated percentages for visible ones.
-	 * This ensures the legend displays accurate percentages while maintaining all entries.
+	 * Legend data with stable percentage formatting.
+	 * Hidden items keep their original percentage.
+	 * Visible items show recalculated percentages that total 100%.
 	 */
 	legendData: T[];
 }
@@ -85,8 +86,9 @@ export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
 	isSeriesVisible,
 }: UseInteractiveLegendDataParams< T > ): UseInteractiveLegendDataResult< T > => {
 	// Filter and recalculate data for interactive legends
+	// Note: data should already have percentages calculated by the chart component
 	const visibleData = useMemo( () => {
-		// If interactive mode is disabled or no chartId, return all data unchanged
+		// If interactive mode is disabled or no chartId, return data as-is
 		if ( ! chartId || ! legendInteractive ) {
 			return data;
 		}
@@ -99,9 +101,8 @@ export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
 			return [];
 		}
 
-		// Recalculate percentages so visible segments total 100%
+		// Recalculate percentages from values so visible segments total 100%
 		const totalValue = filtered.reduce( ( sum, segment ) => sum + segment.value, 0 );
-
 		return filtered.map( segment => ( {
 			...segment,
 			percentage: totalValue > 0 ? ( segment.value / totalValue ) * 100 : 0,
@@ -113,24 +114,26 @@ export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
 		return legendInteractive && visibleData.length === 0;
 	}, [ legendInteractive, visibleData ] );
 
-	// Prepare legend data with recalculated percentages for visible items
-	// This maintains all legend entries but shows updated percentages for visible segments
+	// Prepare legend data with percentages
+	// Hidden items keep their original percentage (calculated from all values)
+	// Visible items show recalculated percentages (totaling 100%)
 	const legendData = useMemo( () => {
 		if ( ! legendInteractive || ! chartId ) {
 			return data;
 		}
 
-		// Map original data to show recalculated percentages for visible items
+		// Build a Map for O(1) lookups instead of O(n) find() calls
+		const visibleDataMap = new Map( visibleData.map( d => [ d.label, d ] ) );
+
 		return data.map( segment => {
 			const isVisible = isSeriesVisible( chartId, segment.label );
 			if ( ! isVisible ) {
-				// Return original data for hidden items
+				// Hidden items keep original percentage
 				return segment;
 			}
 
-			// For visible items, find the recalculated percentage from visibleData
-			const recalculated = visibleData.find( d => d.label === segment.label );
-			return recalculated || segment;
+			// For visible items, get the recalculated percentage from visibleData
+			return visibleDataMap.get( segment.label ) || segment;
 		} );
 	}, [ data, visibleData, legendInteractive, chartId, isSeriesVisible ] );
 

package/src/index.ts

@@ -28,8 +28,32 @@ export {
 	defaultTheme,
 } from './providers';
 
-// Types
-export type * from './types';
+// Types - explicit exports (excludes internal types like DataPointPercentageCalculated)
+export type {
+	Optional,
+	OrientationType,
+	AnnotationStyles,
+	DataPoint,
+	GeoData,
+	DataPointDate,
+	LeaderboardEntry,
+	GradientStop,
+	SeriesDataOptions,
+	SeriesData,
+	MultipleDataPointsDate,
+	DataPointPercentage,
+	ChartTheme,
+	CompleteChartTheme,
+	AxisOptions,
+	ScaleOptions,
+	LegendItemStyles,
+	LegendLabelStyles,
+	LegendShapeStyles,
+	LegendPosition,
+	ChartLegendConfig,
+	BaseChartProps,
+	GridProps,
+} from './types';
 export type * from './visx/types';
 export type { PieChartProps, PieChartRenderTooltipParams } from './charts/pie-chart';
 export type {
@@ -45,3 +69,42 @@ export type {
 	GoogleDataTableRow,
 	GoogleDataTableColumnRoleType,
 } from 'react-google-charts';
+
+// Re-exports from removed individual entry points
+export { useLeaderboardLegendItems } from './charts/leaderboard-chart/hooks';
+
+// Previously available via '@automattic/charts/tooltip', '@automattic/charts/legend'
+export { AccessibleTooltip } from './components/tooltip';
+export type { BaseTooltipProps, TooltipData, TooltipProps } from './components/tooltip';
+export type { LegendProps, BaseLegendProps, ChartLegendOptions } from './components/legend';
+
+// Previously available via '@automattic/charts/bar-chart', '@automattic/charts/line-chart', etc.
+export type { BarChartProps } from './charts/bar-chart';
+export type {
+	BarListChartProps,
+	RenderLabelProps,
+	RenderValueProps,
+} from './charts/bar-list-chart';
+export type {
+	ConversionFunnelChartProps,
+	FunnelStep,
+	StepLabelRenderProps,
+	StepRateRenderProps,
+	MainMetricRenderProps,
+	TooltipRenderProps,
+} from './charts/conversion-funnel-chart';
+export type { LeaderboardChartProps } from './charts/leaderboard-chart';
+export type {
+	LineChartProps,
+	LineChartAnnotationProps,
+	RenderLineGlyphProps,
+	TooltipDatum,
+	CurveType,
+} from './charts/line-chart';
+export type { ArcData } from './charts/pie-semi-circle-chart';
+export type { SparklineProps, GradientConfig, SparklineDataPoint } from './charts/sparkline';
+
+// Utilities
+export { parseAsLocalDate, formatMetricValue, formatPercentage, mergeThemes } from './utils';
+export * from './utils/color-utils';
+export type { MetricValueType } from './utils';

package/src/providers/chart-context/global-charts-provider.tsx

@@ -200,7 +200,13 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 	const getElementStyles = useCallback< GlobalChartsContextValue[ 'getElementStyles' ] >(
 		( { data, index, overrideColor, legendShape } ) => {
 			const isSeriesData = data && typeof data === 'object' && 'data' in data && 'options' in data;
-			const isPointPercentageData = data && typeof data === 'object' && 'percentage' in data;
+			// DataPointPercentage has a numeric 'value' directly, unlike SeriesData which has 'data' array
+			const isPointPercentageData =
+				data &&
+				typeof data === 'object' &&
+				'value' in data &&
+				typeof data.value === 'number' &&
+				! ( 'data' in data );
 
 			return {
 				color: resolveColor( {

package/src/providers/chart-context/hooks/use-chart-registration.ts

@@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { useDeepMemo } from '../../../hooks';
 import { useGlobalChartsContext } from './use-global-charts-context';
 import type { BaseLegendItem } from '../../../components/legend';
+import type { ChartType } from '../../../types';
 
 export const useChartRegistration = ( {
 	chartId,
@@ -12,7 +13,7 @@ export const useChartRegistration = ( {
 }: {
 	chartId: string;
 	legendItems: BaseLegendItem[];
-	chartType: string;
+	chartType: ChartType;
 	isDataValid: boolean;
 	metadata?: Record< string, unknown >;
 } ): void => {

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

@@ -1,12 +1,12 @@
 import { CSSProperties, ReactNode } from 'react';
 import type { BaseLegendItem } from '../../components/legend';
-import type { CompleteChartTheme, DataPointPercentage, SeriesData } from '../../types';
+import type { ChartType, CompleteChartTheme, DataPointPercentage, SeriesData } from '../../types';
 import type { LegendShape } from '@visx/legend/lib/types';
 import type { GlyphProps, LineStyles } from '@visx/xychart';
 
 export interface ChartRegistration {
 	legendItems: BaseLegendItem[];
-	chartType: string;
+	chartType: ChartType;
 	metadata?: Record< string, unknown >;
 }
 

package/src/types.ts

@@ -15,6 +15,14 @@ type ValueOf< T > = T[ keyof T ];
 
 export type Optional< T, K extends keyof T > = Pick< Partial< T >, K > & Omit< T, K >;
 
+export type ChartType =
+	| 'bar'
+	| 'conversion-funnel'
+	| 'leaderboard'
+	| 'line'
+	| 'pie'
+	| 'pie-semi-circle';
+
 export type OrientationType = ValueOf< typeof Orientation >;
 
 export type AnnotationStyles = {
@@ -157,23 +165,24 @@ export type MultipleDataPointsDate = {
 	data: DataPointDate[];
 };
 
+/**
+ * Input data point for percentage-based charts (pie, donut, semi-circle).
+ * Provide values; percentages will be calculated automatically.
+ */
 export type DataPointPercentage = {
 	/**
 	 * Label for the data point
 	 */
 	label: string;
 	/**
-	 * Numerical value
+	 * Numerical value used for slice sizing.
+	 * Percentages are calculated automatically from values.
 	 */
 	value: number;
 	/**
-	 * Formatted value for display
+	 * Formatted value for display (e.g., "30K" instead of 30000)
 	 */
 	valueDisplay?: string;
-	/**
-	 * Percentage value
-	 */
-	percentage: number;
 	/**
 	 * Color code for the segment, by default colours are taken from the theme but this property can overrides it
 	 */
@@ -184,6 +193,17 @@ export type DataPointPercentage = {
 	group?: string;
 };
 
+/**
+ * Internal type with calculated percentage.
+ * Used internally after percentage calculation from values.
+ */
+export type DataPointPercentageCalculated = DataPointPercentage & {
+	/**
+	 * Calculated percentage (0-100) based on value relative to total
+	 */
+	percentage: number;
+};
+
 /**
  * Base theme configuration for chart components with optional properties
  */
@@ -296,7 +316,7 @@ export type CompleteChartTheme = Required< ChartTheme > & {
 	};
 };
 
-declare type AxisOptions = {
+export type AxisOptions = {
 	orientation?: OrientationType;
 	numTicks?: number;
 	axisClassName?: string;

package/src/utils/test/resolve-css-var.test.ts

@@ -414,6 +414,7 @@ describe( 'resolveCssVariable', () => {
 				if ( element === themedElement ) {
 					return {
 						getPropertyValue: ( prop: string ) => {
+							// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- Thinks this is a use rather than a test.
 							if ( prop === '--wpds-color-bg-interactive-brand-weak' ) {
 								return '#c029dc'; // User's custom accent color
 							}
@@ -427,6 +428,7 @@ describe( 'resolveCssVariable', () => {
 			} );
 			window.getComputedStyle = mockGetComputedStyle as unknown as typeof window.getComputedStyle;
 
+			// eslint-disable-next-line @wordpress/no-unknown-ds-tokens -- Thinks this is a use rather than a test.
 			const result = resolveCssVariable( '--wpds-color-bg-interactive-brand-weak', themedElement );
 			expect( result ).toBe( '#c029dc' );
 		} );

package/dist/base-tooltip-DOq93wjU.d.cts

@@ -1,38 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, ComponentType, ReactNode } from 'react';
-
-type TooltipData = {
-    label: string;
-    value: number;
-    valueDisplay?: string;
-};
-type TooltipComponentProps = {
-    data: TooltipData;
-    className?: string;
-};
-type TooltipCommonProps = {
-    top: number;
-    left: number;
-    style?: CSSProperties;
-    className?: string;
-    /**
-     * Whether to render the tooltip container div. When false, only renders the content.
-     * Useful when the tooltip is rendered inside a portal or custom container.
-     * @default true
-     */
-    renderContainer?: boolean;
-};
-type DefaultDataTooltip = {
-    data: TooltipData;
-    component?: ComponentType<TooltipComponentProps>;
-    children?: never;
-};
-type CustomTooltip = {
-    children: ReactNode;
-    data?: never;
-    component?: never;
-};
-type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
-declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer, }: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
-
-export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/base-tooltip-DOq93wjU.d.ts

@@ -1,38 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, ComponentType, ReactNode } from 'react';
-
-type TooltipData = {
-    label: string;
-    value: number;
-    valueDisplay?: string;
-};
-type TooltipComponentProps = {
-    data: TooltipData;
-    className?: string;
-};
-type TooltipCommonProps = {
-    top: number;
-    left: number;
-    style?: CSSProperties;
-    className?: string;
-    /**
-     * Whether to render the tooltip container div. When false, only renders the content.
-     * Useful when the tooltip is rendered inside a portal or custom container.
-     * @default true
-     */
-    renderContainer?: boolean;
-};
-type DefaultDataTooltip = {
-    data: TooltipData;
-    component?: ComponentType<TooltipComponentProps>;
-    children?: never;
-};
-type CustomTooltip = {
-    children: ReactNode;
-    data?: never;
-    component?: never;
-};
-type BaseTooltipProps = TooltipCommonProps & (DefaultDataTooltip | CustomTooltip);
-declare const BaseTooltip: ({ data, top, left, component: Component, children, className, style, renderContainer, }: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
-
-export { BaseTooltip as B, type TooltipData as T, type BaseTooltipProps as a };

package/dist/charts/bar-chart/index.cjs

@@ -1,17 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-var _chunkXC4KHJYXcjs = require('../../chunk-XC4KHJYX.cjs');
-require('../../chunk-TZRUHQOH.cjs');
-require('../../chunk-XVBH5XHE.cjs');
-require('../../chunk-Y3NNQMAX.cjs');
-require('../../chunk-REZTQ4PH.cjs');
-require('../../chunk-ASLARV7L.cjs');
-require('../../chunk-WYK7EL5R.cjs');
-require('../../chunk-MXGLYWVP.cjs');
-require('../../chunk-EMMSS5I5.cjs');
-
-
-
-exports.BarChart = _chunkXC4KHJYXcjs.BarChartResponsive; exports.BarChartUnresponsive = _chunkXC4KHJYXcjs.BarChart;
-//# sourceMappingURL=index.cjs.map

package/dist/charts/bar-chart/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/charts/bar-chart/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,4DAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC,oCAAiC;AACjC;AACE;AACA;AACF,mHAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/charts/bar-chart/index.cjs"}