@automattic/charts 1.0.2 → 1.1.1

package/dist/visx/group/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-EMMSS5I5.cjs');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-DZUJEN5N.cjs');
 
 // src/visx/group/index.ts
 var _group = require('@visx/group');

package/dist/visx/group/index.js

@@ -1,4 +1,4 @@
-import "../../chunk-G3PMV62Z.js";
+import "../../chunk-5WRI5ZAA.js";
 
 // src/visx/group/index.ts
 import { Group } from "@visx/group";

package/dist/visx/legend/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-EMMSS5I5.cjs');
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../../chunk-DZUJEN5N.cjs');
 
 // src/visx/legend/index.ts
 var _legend = require('@visx/legend');

package/dist/visx/legend/index.js

@@ -1,4 +1,4 @@
-import "../../chunk-G3PMV62Z.js";
+import "../../chunk-5WRI5ZAA.js";
 
 // src/visx/legend/index.ts
 import { LineShape, CircleShape, RectShape } from "@visx/legend";

package/dist/visx/text/index.cjs

@@ -3,7 +3,7 @@
 
 
 var _chunk7OZEQ5HEcjs = require('../../chunk-7OZEQ5HE.cjs');
-require('../../chunk-EMMSS5I5.cjs');
+require('../../chunk-DZUJEN5N.cjs');
 
 
 

package/dist/visx/text/index.js

@@ -3,7 +3,7 @@ import {
   getStringWidth,
   useText
 } from "../../chunk-NFRB2POF.js";
-import "../../chunk-G3PMV62Z.js";
+import "../../chunk-5WRI5ZAA.js";
 export {
   Text,
   getStringWidth,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.0.2",
+	"version": "1.1.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,8 +63,8 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.1.4",
-		"@babel/runtime": "7.28.6",
+		"@automattic/number-formatters": "^1.1.6",
+		"@babel/runtime": "7.29.2",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
 		"@visx/axis": "^3.12.0",
@@ -83,14 +83,14 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/theme": "0.9.0",
-		"@wordpress/ui": "0.9.0",
+		"@wordpress/icons": "^12.0.0",
+		"@wordpress/theme": "0.10.0",
+		"@wordpress/ui": "0.10.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
 		"dompurify": "^3.3.3",
 		"fast-deep-equal": "3.1.3",
-		"gridicons": "3.4.2",
 		"react-google-charts": "^5.2.1",
 		"tslib": "2.8.1"
 	},
@@ -110,8 +110,9 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "32.4.0",
-		"@wordpress/element": "6.42.0",
+		"@wordpress/components": "32.5.0",
+		"@wordpress/element": "6.43.0",
+		"@wordpress/private-apis": "1.43.0",
 		"babel-jest": "30.3.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
 		"esbuild": "0.27.4",

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -1,5 +1,4 @@
 .conversion-funnel-chart {
-	font-family: var(--funnel-font-family, "SF Pro Text");
 
 	&--loading {
 		opacity: 0.6;
@@ -8,10 +7,6 @@
 }
 
 .main-metric {
-	display: flex;
-	align-items: baseline;
-	gap: 8px;
-	margin-bottom: 24px;
 	height: 20px;
 }
 
@@ -19,29 +14,24 @@
 	overflow: hidden;
 	color: #1e1e1e;
 	text-overflow: ellipsis;
-	font-family: var(--funnel-font-family, "SF Pro Text");
-	font-size: 18px;
+	font-size: var(--wpds-font-size-xl, 18px);
 	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
+	font-weight: var(--wpds-font-weight-medium, 499);
+	line-height: var(--wpds-font-line-height-sm, 20px);
 	margin: 0;
 }
 
 .change-indicator {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	font-family: var(--funnel-font-family, "SF Pro Text");
-	font-size: 13px;
+	font-size: var(--wpds-font-size-md, 13px);
 	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
+	font-weight: var(--wpds-font-weight-medium, 499);
+	line-height: var(--wpds-font-line-height-sm, 20px);
 	margin: 0;
 }
 
 .funnel-container {
-	display: flex;
-	gap: 16px;
-	align-items: flex-end;
 	flex: 1;
 	min-height: 200px;
 	width: 100%;
@@ -50,8 +40,6 @@
 .funnel-step {
 	flex: 1 1 0;
 	min-width: 0;
-	display: flex;
-	flex-direction: column;
 	height: 100%;
 
 	&--animated {
@@ -63,17 +51,12 @@
 	}
 }
 
-.step-header {
-	margin-bottom: 24px;
-}
-
 .step-label {
 	color: #757575;
-	font-family: var(--step-font-family, "SF Pro");
-	font-size: 12px;
+	font-size: var(--wpds-font-size-sm, 12px);
 	font-style: normal;
-	font-weight: 400;
-	line-height: 16px;
+	font-weight: var(--wpds-font-weight-regular, 400);
+	line-height: var(--wpds-font-line-height-xs, 16px);
 	margin: 0 0 2px 0;
 	display: block;
 	overflow: hidden;
@@ -82,19 +65,16 @@
 
 .step-rate {
 	color: #1e1e1e;
-	font-family: var(--step-font-family, "SF Pro");
-	font-size: 13px;
+	font-size: var(--wpds-font-size-md, 13px);
 	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
+	font-weight: var(--wpds-font-weight-medium, 499);
+	line-height: var(--wpds-font-line-height-sm, 20px);
 	margin: 0;
 	display: block;
 }
 
 .bar-container {
 	flex: 1;
-	display: flex;
-	align-items: flex-end;
 	border-radius: 4px;
 	position: relative;
 	cursor: pointer;
@@ -121,12 +101,6 @@
 }
 
 .tooltip-wrapper {
-	display: inline-flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: flex-start;
-	gap: 4px;
-
 	border-bottom: 1px solid var(--Gray-Gray-5, #dcdcde);
 	background: var(--black-white-white, #fff);
 
@@ -139,25 +113,23 @@
 
 .tooltip-title {
 	color: #1e1e1e;
-	font-family: "SF Pro", sans-serif;
-	font-size: 12px;
+	font-size: var(--wpds-font-size-sm, 12px);
 	font-style: normal;
-	font-weight: 400;
-	line-height: 16px;
+	font-weight: var(--wpds-font-weight-regular, 400);
+	line-height: var(--wpds-font-line-height-xs, 16px);
 }
 
 .tooltip-content {
 	color: #1e1e1e;
-	font-family: "SF Pro", sans-serif;
-	font-size: 13px;
+	font-size: var(--wpds-font-size-md, 13px);
 	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
+	font-weight: var(--wpds-font-weight-medium, 499);
+	line-height: var(--wpds-font-line-height-sm, 20px);
 }
 
 .empty-state {
 	text-align: center;
 	padding: 48px 24px;
 	color: #6b7280;
-	font-size: 16px;
+	font-size: var(--wpds-font-size-lg, 16px);
 }

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx

@@ -263,13 +263,13 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 
 	// Default tooltip rendering function
 	const renderDefaultTooltip = ( step: FunnelStep ) => (
-		<>
+		<Stack direction="column" align="flex-start" gap="xs">
 			<div className={ styles[ 'tooltip-title' ] }>{ step.label }</div>
 			<div className={ styles[ 'tooltip-content' ] }>
 				{ formatPercentage( step.rate ) }
 				{ ` • ${ step.count ?? 'no' } items` }
 			</div>
-		</>
+		</Stack>
 	);
 
 	// Validate data
@@ -322,6 +322,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 		<>
 			<Stack
 				direction="column"
+				gap="xl"
 				data-testid="conversion-funnel-chart"
 				ref={ node => {
 					// Set containerRef for @visx coordinate system
@@ -344,27 +345,31 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 						changeColor,
 					} )
 				) : (
-					<div className={ styles[ 'main-metric' ] }>{ renderDefaultMainMetric() }</div>
+					<Stack direction="row" align="baseline" gap="sm" className={ styles[ 'main-metric' ] }>
+						{ renderDefaultMainMetric() }
+					</Stack>
 				) }
 
 				{ /* Funnel Steps */ }
-				<div className={ styles[ 'funnel-container' ] }>
+				<Stack direction="row" align="flex-end" gap="lg" className={ styles[ 'funnel-container' ] }>
 					{ steps.map( ( step, index ) => {
 						const barHeight = ( step.rate / maxRate ) * 100;
 						const { isBlurred } = getStepState( step.id );
 
 						return (
-							<div
+							<Stack
 								key={ step.id }
+								direction="column"
 								data-testid="funnel-step"
 								className={ clsx(
 									styles[ 'funnel-step' ],
 									isColorPaletteResolved && styles[ 'funnel-step--animated' ],
 									isBlurred && styles[ 'funnel-step--blurred' ]
 								) }
+								gap="xl"
 							>
 								{ /* Step Label and Rate */ }
-								<div className={ styles[ 'step-header' ] }>
+								<div>
 									{ renderStepLabel ? (
 										renderStepLabel( {
 											step,
@@ -388,7 +393,9 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 								</div>
 
 								{ /* Funnel Bar */ }
-								<div
+								<Stack
+									direction="column"
+									justify="flex-end"
 									className={ styles[ 'bar-container' ] }
 									onClick={ stepHandlers.get( step.id )?.onClick }
 									onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
@@ -407,11 +414,11 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 											backgroundColor: barColor,
 										} }
 									/>
-								</div>
-							</div>
+								</Stack>
+							</Stack>
 						);
 					} ) }
-				</div>
+				</Stack>
 			</Stack>
 
 			{ /* Tooltip Portal */ }

package/src/charts/geo-chart/geo-chart.module.scss

@@ -1,6 +1,3 @@
 .container {
 	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
 }

package/src/charts/geo-chart/geo-chart.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { FC, useContext, useMemo } from 'react';
 import { Chart, type GoogleChartOptions } from 'react-google-charts';
@@ -57,13 +58,15 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 
 	// Render loading placeholder
 	const loadingPlaceholder = (
-		<div
+		<Stack
+			align="center"
+			justify="center"
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart-loading"
 			style={ { width, height } }
 		>
 			{ renderPlaceholder ? renderPlaceholder() : __( 'Loading map', 'jetpack-charts' ) }
-		</div>
+		</Stack>
 	);
 
 	// Google charts doesn't accept CSS variables, so we need to convert them to hex colors
@@ -144,7 +147,9 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	);
 
 	return (
-		<div
+		<Stack
+			align="center"
+			justify="center"
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
 			style={ { width, height, backgroundColor } }
@@ -157,7 +162,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 				options={ options }
 				loader={ loadingPlaceholder }
 			/>
-		</div>
+		</Stack>
 	);
 };
 

package/src/charts/leaderboard-chart/leaderboard-chart.module.scss

@@ -73,6 +73,6 @@
 	padding: 32px 16px;
 	text-align: center;
 	color: #666;
-	font-size: 14px;
+	font-size: var(--wpds-font-size-md, 13px);
 	font-style: italic;
 }

package/src/charts/leaderboard-chart/leaderboard-chart.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
-import { __experimentalGrid as Grid, __experimentalText as Text } from '@wordpress/components';
+import { __experimentalGrid as Grid } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
+import { Stack, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useContext, useMemo, type FC } from 'react';
 import { Legend } from '../../components/legend';

package/src/charts/line-chart/line-chart.module.scss

@@ -21,19 +21,16 @@
 	}
 
 	&__tooltip-date {
-		font-weight: 700;
+		font-weight: var(--wpds-font-weight-medium, 499);
 		padding-bottom: 10px;
 	}
 
 	&__tooltip-row {
-		display: flex;
-		align-items: center;
 		padding: 4px 0;
-		justify-content: space-between;
 	}
 
 	&__tooltip-label {
-		font-weight: 500;
+		font-weight: var(--wpds-font-weight-medium, 499);
 		padding-right: 1rem;
 	}
 
@@ -65,7 +62,7 @@
 		background: #fff;
 		border: none;
 		border-radius: 4px;
-		font-size: 14px;
+		font-size: var(--wpds-font-size-md, 13px);
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 		position: fixed;
 		margin: 0.5rem;
@@ -81,13 +78,6 @@
 		}
 	}
 
-	&__annotation-label-popover-header {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: start;
-	}
-
 	&__annotation-label-popover-content {
 		padding: 0.5rem;
 	}

package/src/charts/line-chart/line-chart.tsx

@@ -4,6 +4,7 @@ import { LinearGradient } from '@visx/gradient';
 import { scaleTime } from '@visx/scale';
 import { XYChart, AreaSeries, Grid, Axis, DataContext } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { differenceInHours, differenceInYears } from 'date-fns';
 import {
@@ -103,12 +104,18 @@ const renderDefaultTooltip = ( params: RenderTooltipParams< DataPointDate > ) =>
 				{ nearestDatum.date?.toLocaleDateString() }
 			</div>
 			{ tooltipPoints.map( point => (
-				<div key={ point.key } className={ styles[ 'line-chart__tooltip-row' ] }>
+				<Stack
+					key={ point.key }
+					direction="row"
+					align="center"
+					justify="space-between"
+					className={ styles[ 'line-chart__tooltip-row' ] }
+				>
 					<span className={ styles[ 'line-chart__tooltip-label' ] }>{ point.key }:</span>
 					<span className={ styles[ 'line-chart__tooltip-value' ] }>
 						{ formatNumber( point.value ) }
 					</span>
-				</div>
+				</Stack>
 			) ) }
 		</div>
 	);

package/src/charts/line-chart/private/line-chart-annotation-label-popover.tsx

@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
+import { Icon, close } from '@wordpress/icons';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
-import Gridicon from 'gridicons';
 import { useEffect, useId, useRef, useState } from 'react';
 import { isSafari } from '../../../utils';
 import styles from '../line-chart.module.scss';
@@ -88,7 +89,7 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 				) }
 				data-testid="line-chart-annotation-label-popover"
 			>
-				<div className={ styles[ 'line-chart__annotation-label-popover-header' ] }>
+				<Stack direction="row" align="flex-start" justify="space-between">
 					<div className={ styles[ 'line-chart__annotation-label-popover-content' ] }>
 						{ renderLabelPopover( { title, subtitle } ) }
 					</div>
@@ -100,9 +101,9 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 						className={ styles[ 'line-chart__annotation-label-popover-close-button' ] }
 						aria-label={ __( 'Close', 'jetpack-charts' ) }
 					>
-						<Gridicon icon="cross" size={ 16 } />
+						<Icon icon={ close } size={ 16 } />
 					</button>
-				</div>
+				</Stack>
 			</div>
 		</div>
 	);

package/src/charts/pie-chart/pie-chart.tsx

@@ -20,7 +20,7 @@ import {
 	useGlobalChartsTheme,
 	GlobalChartsContext,
 } from '../../providers';
-import { attachSubComponents } from '../../utils';
+import { attachSubComponents, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
@@ -441,10 +441,12 @@ const PieChartInternal = ( {
 														groupProps.onMouseLeave = onMouseLeave;
 													}
 
-													// Estimate text width more accurately for background sizing
-													const fontSize = 12;
+													const svgLabelSmall = providerTheme.svgLabelSmall;
+													const fontSize = resolveFontSize( svgLabelSmall?.fontSize ) ?? 12;
 													const estimatedTextWidth = getStringWidth( arc.data.label, {
 														fontSize,
+														fontFamily: svgLabelSmall?.fontFamily,
+														fontWeight: svgLabelSmall?.fontWeight,
 													} );
 													const labelPadding = 6;
 													const backgroundWidth = estimatedTextWidth + labelPadding * 2;

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -11,11 +11,11 @@
 	}
 
 	.label {
-		font-weight: 600;
-		font-size: 16px;
+		font-weight: var(--wpds-font-weight-medium, 499);
+		font-size: var(--wpds-font-size-lg, 16px);
 	}
 
 	.note {
-		font-size: 14px;
+		font-size: var(--wpds-font-size-md, 13px);
 	}
 }

package/src/components/legend/private/base-legend.module.scss

@@ -1,50 +1,9 @@
 .legend {
 	align-self: stretch;
-
-	&--horizontal {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		gap: 16px;
-	}
-
-	&--vertical {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-	}
-
-	&--alignment-start {
-		justify-content: flex-start;
-	}
-
-	&--alignment-center {
-		justify-content: center;
-	}
-
-	&--alignment-end {
-		justify-content: flex-end;
-	}
-
-	// Vertical legends align on the cross-axis instead
-	&--vertical.legend--alignment-start {
-		align-items: flex-start;
-	}
-
-	&--vertical.legend--alignment-center {
-		align-items: center;
-	}
-
-	&--vertical.legend--alignment-end {
-		align-items: flex-end;
-	}
-
 }
 
 .legend-item {
-	display: flex;
-	align-items: center;
-	font-size: 0.875rem;
+	font-size: var(--wpds-font-size-md, 13px);
 
 	&--interactive {
 		cursor: pointer;
@@ -75,14 +34,6 @@
 	}
 }
 
-.legend-item-label {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-
-	/* Text wrapping is handled at the text level, not the label container */
-}
-
 .legend-item-text {
 
 	&--wrap {
@@ -101,6 +52,6 @@
 }
 
 .legend-item-value {
-	font-weight: 500;
+	font-weight: var(--wpds-font-weight-medium, 499);
 	flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
 }