@automattic/charts 1.8.1 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.8.1",
+	"version": "1.9.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -97,8 +97,8 @@
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
 		"@babel/core": "^7.29.7",
-		"@storybook/addon-docs": "10.3.6",
-		"@storybook/react": "10.3.6",
+		"@storybook/addon-docs": "10.4.6",
+		"@storybook/react": "10.4.6",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -109,9 +109,9 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "35.0.1",
-		"@wordpress/element": "8.0.1",
-		"@wordpress/private-apis": "1.48.1",
+		"@wordpress/components": "36.1.0",
+		"@wordpress/element": "8.2.0",
+		"@wordpress/private-apis": "1.50.0",
 		"babel-jest": "30.4.1",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.4.2",
@@ -120,7 +120,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.3.6",
+		"storybook": "10.4.6",
 		"tsdown": "0.22.2",
 		"typescript": "5.9.3"
 	},

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

@@ -6,7 +6,9 @@
 		path {
 			transform-origin: 0 95%;
 			transform: scaleY(0);
-			animation: rise 1s ease-out forwards;
+			animation:
+				rise var(--wpds-motion-duration-xl, 400ms)
+				var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 		}
 	}
 

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

@@ -27,7 +27,7 @@ import {
 	useGlobalChartsContext,
 	useGlobalChartsTheme,
 } from '../../providers';
-import { attachSubComponents } from '../../utils';
+import { attachSubComponents, resolveCssVariable } from '../../utils';
 import { renderDefaultTooltip } from '../line-chart';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
@@ -461,7 +461,10 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 														stacked={ stacked }
 														stackOffset={ stackOffset }
 														getElementStyles={ getElementStyles }
-														strokeColor={ providerTheme.backgroundColor }
+														strokeColor={
+															resolveCssVariable( providerTheme.backgroundColor ) ??
+															providerTheme.backgroundColor
+														}
 													/>
 												</>
 											) }

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

@@ -8,7 +8,9 @@
 		transform-origin: bottom;
 		transform-box: fill-box;
 		transform: scaleY(0);
-		animation: rise 1s ease-out forwards;
+		animation:
+			rise var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes rise {
@@ -22,7 +24,9 @@
 		transform-origin: left;
 		transform-box: fill-box;
 		transform: scaleX(0);
-		animation: stretch 1s ease-out forwards;
+		animation:
+			stretch var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes stretch {

package/src/charts/bar-chart/private/comparison-bars.tsx

@@ -10,6 +10,12 @@ import type { ElementStyles, GetElementStylesParams } from '../../../providers';
 import type { DataPointDate, SeriesData } from '../../../types';
 import type { FC, ReactNode } from 'react';
 
+/*
+ * `process.env.NODE_ENV` is replaced by the bundler at build time. Declare a
+ * minimal `process` locally so this file type-checks as source under `jetpack:src`.
+ */
+declare const process: { env: Record< string, string | undefined > };
+
 export type ComparisonSeriesEntry = {
 	series: SeriesData;
 	index: number;

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

@@ -12,7 +12,7 @@
 
 .main-rate {
 	overflow: hidden;
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	text-overflow: ellipsis;
 	font-size: var(--wpds-typography-font-size-xl, 18px);
 	font-style: normal;
@@ -33,7 +33,7 @@
 
 .funnel-container {
 	flex: 1;
-	min-height: 200px;
+	min-height: 0;
 	width: 100%;
 }
 
@@ -43,7 +43,9 @@
 	height: 100%;
 
 	&--animated {
-		transition: opacity 0.3s ease;
+		transition:
+			opacity var(--wpds-motion-duration-lg, 300ms)
+			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
 	}
 
 	&--blurred {
@@ -52,7 +54,7 @@
 }
 
 .step-label {
-	color: #757575;
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-weight: var(--wpds-typography-font-weight-regular, 400);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -62,7 +64,7 @@
 }
 
 .step-rate {
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -84,7 +86,9 @@
 		transform-origin: bottom;
 		transform-box: fill-box;
 		transform: scaleY(0);
-		animation: stretch 1s ease-out forwards;
+		animation:
+			stretch var(--wpds-motion-duration-xl, 400ms)
+			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
 	}
 
 	@keyframes stretch {
@@ -96,18 +100,17 @@
 }
 
 .tooltip-wrapper {
-	border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
-	background: var(--black-white-white, #fff);
+	background: var(--wpds-color-bg-surface-neutral-strong, #fff);
 
 	// Override .visx-tooltip inline styles.
 	border-radius: var(--wpds-border-radius-md, 4px) !important;
 	padding: var(--wpds-dimension-padding-md, 12px) !important;
-	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.12) !important;
+	box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
 
 }
 
 .tooltip-title {
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-regular, 400);
@@ -115,7 +118,7 @@
 }
 
 .tooltip-content {
-	color: #1e1e1e;
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
@@ -124,6 +127,6 @@
 
 .empty-state {
 	text-align: center;
-	color: #6b7280;
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
 	font-size: var(--wpds-typography-font-size-lg, 16px);
 }

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

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { FC, useContext, useMemo } from 'react';
-import { Chart } from 'react-google-charts';
+import { Chart, type GoogleChartPackages } from 'react-google-charts';
 /**
  * Internal dependencies
  */
@@ -19,6 +19,10 @@ import { GeoChartProps } from './types';
 
 const DEFAULT_FEATURE_FILL_COLOR = '#ffffff';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
+// `chartPackages` replaces (not extends) react-google-charts' default `[ 'corechart', 'controls' ]`,
+// so we restate the defaults and add `geochart`. Without it the loader backfills the geochart package
+// late, which can clash with another Google Charts version already loaded on the page.
+const GEO_CHART_PACKAGES: GoogleChartPackages[] = [ 'corechart', 'controls', 'geochart' ];
 
 type GoogleChartOptions = Record< string, unknown >;
 
@@ -154,6 +158,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 		>
 			<Chart
 				chartType="GeoChart"
+				chartPackages={ GEO_CHART_PACKAGES }
 				width={ width }
 				height={ height }
 				data={ sanitizedData.data }

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

@@ -4,9 +4,10 @@ import GeoChart, { GeoChartUnresponsive } from '../geo-chart';
 
 // Mock react-google-charts
 jest.mock( 'react-google-charts', () => ( {
-	Chart: jest.fn( ( { data, options, width, height } ) => {
+	Chart: jest.fn( ( { chartPackages, data, options, width, height } ) => {
 		return (
 			<div data-testid="google-chart-mock" data-width={ width } data-height={ height }>
+				<div data-testid="chart-packages">{ JSON.stringify( chartPackages ) }</div>
 				<div data-testid="chart-data">{ JSON.stringify( data ) }</div>
 				<div data-testid="chart-options">{ JSON.stringify( options ) }</div>
 			</div>
@@ -64,6 +65,15 @@ describe( 'GeoChart', () => {
 			expect( chart ).toHaveAttribute( 'data-width', '1200' );
 			expect( chart ).toHaveAttribute( 'data-height', '600' );
 		} );
+
+		test( 'loads the GeoChart package explicitly', () => {
+			renderWithTheme();
+
+			const chartPackages = screen.getByTestId( 'chart-packages' );
+			const packages = JSON.parse( chartPackages.textContent || '[]' );
+
+			expect( packages ).toEqual( [ 'corechart', 'controls', 'geochart' ] );
+		} );
 	} );
 
 	describe( 'Data Handling', () => {

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

@@ -0,0 +1,103 @@
+.heatmap-chart {
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+	font-size: var(--wpds-typography-font-size-sm, 12px);
+}
+
+.heatmap-chart__empty {
+	padding: var(--wpds-dimension-padding-lg, 16px);
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
+}
+
+// Track template is set inline because CSS `repeat()` won't take a `var()`
+// count. ARIA rows are `display: contents` so their cells join this grid.
+.heatmap-chart__grid {
+	display: grid;
+	gap: var(--heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
+	flex: 1 1 0;
+	width: 100%;
+	// Floor so the grid stays usable when the parent has no explicit height.
+	min-height: 200px;
+
+	&:focus-visible {
+		outline:
+			var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid
+			var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		outline-offset: 2px;
+		border-radius: var(--wpds-border-radius-sm, 2px);
+	}
+}
+
+.heatmap-chart__grid--compact {
+	flex: 0 0 auto;
+	width: max-content;
+	height: max-content;
+	min-height: 0;
+}
+
+.heatmap-chart__row {
+	display: contents;
+}
+
+.heatmap-chart__col-label,
+.heatmap-chart__row-label {
+	color: var(--wpds-color-fg-content-neutral-weak, #707070);
+	font-size: var(--wpds-typography-font-size-xs, 11px);
+	white-space: nowrap;
+	overflow: visible;
+}
+
+.heatmap-chart__col-label {
+	align-self: end;
+	text-align: left;
+}
+
+.heatmap-chart__row-label {
+	align-self: center;
+	justify-self: end;
+	text-align: right;
+	padding-inline-end: var(--wpds-dimension-padding-xs, 4px);
+}
+
+.heatmap-chart__cell {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 0;
+	min-height: 0;
+	border-radius: var(--wpds-border-radius-sm, 2px);
+	// Empty (no-data) default; cells with a value override it below.
+	background: var(--wpds-color-bg-track-neutral-weak, #f0f0f0);
+}
+
+// Floor the mix at 15% so the lowest value stays visibly tinted, distinct from
+// an empty cell.
+.heatmap-chart__cell--filled {
+	background: color-mix(in sRGB, var(--heatmap-primary) calc((0.15 + 0.85 * var(--intensity)) * 100%), transparent);
+}
+
+.heatmap-chart__cell--selected {
+	outline:
+		var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid
+		var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+	outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+}
+
+.heatmap-chart__cell-value {
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
+	font-size: var(--wpds-typography-font-size-md, 13px);
+}
+
+// Light text on fills dark enough to out-contrast dark text (decided in JS from
+// the blended fill luminance).
+.heatmap-chart__cell--strong .heatmap-chart__cell-value {
+	color: var(--wpds-color-fg-interactive-neutral-strong, #f0f0f0);
+}
+
+.heatmap-chart__legend-swatch {
+	width: var(--wpds-dimension-size-3xs, 12px);
+	height: var(--wpds-dimension-size-3xs, 12px);
+	border-radius: var(--wpds-border-radius-sm, 2px);
+	background: color-mix(in sRGB, var(--heatmap-primary) calc((0.15 + 0.85 * var(--intensity)) * 100%), transparent);
+}