@automattic/charts 4.1.0 → 4.2.0

package/src/types.ts

@@ -53,12 +53,7 @@ export type LegendShape< Data, Output > =
 	| ComponentClass< LegendShapeRenderProps< Data, Output > >;
 
 export type GoogleDataTableColumnType =
-	| 'string'
-	| 'number'
-	| 'boolean'
-	| 'date'
-	| 'datetime'
-	| 'timeofday';
+	'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'timeofday';
 
 export enum GoogleDataTableColumnRoleType {
 	annotation = 'annotation',
@@ -98,13 +93,7 @@ export type GoogleDataTableCell =
 export type GoogleDataTableRow = GoogleDataTableCell[];
 
 export type ChartType =
-	| 'area'
-	| 'bar'
-	| 'conversion-funnel'
-	| 'leaderboard'
-	| 'line'
-	| 'pie'
-	| 'pie-semi-circle';
+	'area' | 'bar' | 'conversion-funnel' | 'leaderboard' | 'line' | 'pie' | 'pie-semi-circle';
 
 export type OrientationType = ValueOf< typeof Orientation >;
 
@@ -145,6 +134,7 @@ export type ThemeAnnotationStyles = {
 export type DataPoint = {
 	label: string;
 	value: number;
+	color?: string;
 };
 
 /**
@@ -196,6 +186,7 @@ export type DataPointDate = {
 	dateString?: string;
 	value: number | null;
 	label?: string;
+	color?: string;
 };
 
 export type LeaderboardEntry = {
@@ -424,6 +415,8 @@ export type ChartTheme = {
 		compactCellGap?: number;
 		/** Fixed square cell size in px for compact mode */
 		compactCellSize?: number;
+		/** Gap in px between adjacent column groups; in compact mode the minimum, as the gaps share leftover width */
+		groupGap?: number;
 	};
 };
 

package/src/utils/format-metric-value.ts

@@ -47,13 +47,13 @@ export const formatMetricValue = (
 							maximumFractionDigits: decimals ?? 2,
 							signDisplay,
 						},
-				  } )
+					} )
 				: formatNumber( numericValue, {
 						decimals: decimals ?? 2,
 						numberFormatOptions: {
 							signDisplay,
 						},
-				  } );
+					} );
 			return `$${ formatted }`;
 		}
 
@@ -80,13 +80,13 @@ export const formatMetricValue = (
 							maximumFractionDigits: decimals ?? 0,
 							signDisplay,
 						},
-				  } )
+					} )
 				: formatNumber( numericValue, {
 						decimals: decimals ?? 0,
 						numberFormatOptions: {
 							signDisplay,
 						},
-				  } );
+					} );
 		}
 	}
 };

package/src/utils/get-edge-tick-widths.ts

@@ -24,7 +24,7 @@ export const getEdgeTickWidths = < T extends AnyD3Scale >(
 
 	const lastIndex = ticks.length - 1;
 	const label = ( tick: ScaleInput< T >, index: number ) =>
-		String( formatTick ? formatTick( tick, index, [] ) ?? '' : tick );
+		String( formatTick ? ( formatTick( tick, index, [] ) ?? '' ) : tick );
 
 	return {
 		first: getStringWidth( label( ticks[ 0 ], 0 ), labelStyle ) ?? 0,

package/src/utils/get-styles.ts

@@ -103,7 +103,7 @@ export function getItemShapeStyles(
 	const hasExplicitStyles = Object.values( explicitStyles ).some(
 		value => value !== undefined && value !== null && value !== ''
 	);
-	const baseShapeStyles = hasExplicitStyles ? explicitStyles : themeShapeStyles ?? {};
+	const baseShapeStyles = hasExplicitStyles ? explicitStyles : ( themeShapeStyles ?? {} );
 
 	// Layer the comparison bar opacity on top so the swatch matches the translucent bar
 	// without discarding the base (custom or theme) shape styles.

package/src/visx/types.ts

@@ -12,15 +12,10 @@ export interface RenderTooltipGlyphProps< Datum extends object > extends GlyphPr
 	isNearestDatum: boolean;
 }
 
-export type TooltipPlacement = 'auto' | 'below-axis';
+export type TooltipPlacement = 'auto' | 'below-axis' | 'beside';
 
 type CrosshairPaintProperty =
-	| 'stroke'
-	| 'strokeWidth'
-	| 'strokeOpacity'
-	| 'strokeDasharray'
-	| 'strokeLinecap'
-	| 'opacity';
+	'stroke' | 'strokeWidth' | 'strokeOpacity' | 'strokeDasharray' | 'strokeLinecap' | 'opacity';
 
 export type CrosshairStyle = Pick< SVGProps< SVGLineElement >, CrosshairPaintProperty > & {
 	className?: string;
@@ -31,11 +26,13 @@ export type XyChartTooltipProps< Datum extends object > = {
 	renderTooltip: ( params: RenderTooltipParams< Datum > ) => ReactNode;
 	renderGlyph?: ( params: RenderTooltipGlyphProps< Datum > ) => ReactNode;
 	/**
-	 * Keep the panel below the x-axis label band, centered at the datum x and horizontally clamped.
-	 * Vertical bounds do not move this placement; clipping ancestors can still cut it off.
+	 * Use below-axis placement for centered axis anchoring, or beside placement to avoid vertical flipping.
+	 * Below-axis ignores vertical bounds; beside placement clamps to them.
 	 * @default 'auto'
 	 */
 	tooltipPlacement?: TooltipPlacement;
+	/** Override the tooltip top anchor in SVG coordinates, including negative offsets. */
+	tooltipAnchorTop?: number;
 	/** Merge overrides with the default box styles; use `unstyled` to strip the box styling. */
 	style?: VisxTooltipProps[ 'style' ];
 	snapTooltipToDatumX?: boolean;
@@ -52,7 +49,7 @@ export type XyChartTooltipProps< Datum extends object > = {
 	 * that clips its overflow, or the viewport when there is none. The box may
 	 * leave the chart wrapper. (It used to keep a body-level portal inside the
 	 * viewport.)
-	 * Ignored by `below-axis`.
+	 * Non-auto placements always apply their own bounds handling.
 	 * @default true
 	 */
 	detectBounds?: boolean;