@automattic/charts 0.56.5 → 0.56.7

package/dist/{themes-mcS8QNkQ.d.ts → themes-DQzmaSze.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, FC } from 'react';
-import { b as CompleteChartTheme, j as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-BCFQlzTM.js';
+import { b as CompleteChartTheme, j as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-CzdN7rUe.js';
 import { B as BaseLegendItem } from './types-C05PdDJa.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';

package/dist/{types-BCFQlzTM.d.ts → types-CzdN7rUe.d.cts}

@@ -7,6 +7,7 @@ import { LegendShape } from '@visx/legend/lib/types';
 import { ScaleType, ScaleInput } from '@visx/scale';
 import { TextProps } from '@visx/text/lib/Text';
 import { EventHandlerParams, LineStyles, GridStyles, GlyphProps } from '@visx/xychart';
+import { GapSize } from '@wordpress/theme';
 import { PointerEvent, ReactNode, CSSProperties } from 'react';
 import { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
 
@@ -334,15 +335,17 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      */
     className?: string;
     /**
-     * Width of the chart in pixels
+     * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
      */
     width?: number;
     /**
-     * Height of the chart in pixels
+     * Height of the chart container in pixels. When omitted, the chart fills its parent's height.
      */
     height?: number;
     /**
-     * Size of the chart in pixels for pie and donut charts
+     * Maximum diameter of the pie in pixels (pie and donut charts only).
+     * The pie will shrink if the container is smaller than this value.
+     * When omitted, the pie fills the available space.
      */
     size?: number;
     /**
@@ -426,6 +429,12 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      * Whether to show chart animation on initial render or not
      */
     animation?: boolean;
+    /**
+     * Gap between chart elements (SVG, legend, children).
+     * Uses WordPress design system tokens.
+     * @default 'md'
+     */
+    gap?: GapSize;
     /**
      * More options for the chart.
      */

package/dist/{types-BCFQlzTM.d.cts → types-CzdN7rUe.d.ts}

@@ -7,6 +7,7 @@ import { LegendShape } from '@visx/legend/lib/types';
 import { ScaleType, ScaleInput } from '@visx/scale';
 import { TextProps } from '@visx/text/lib/Text';
 import { EventHandlerParams, LineStyles, GridStyles, GlyphProps } from '@visx/xychart';
+import { GapSize } from '@wordpress/theme';
 import { PointerEvent, ReactNode, CSSProperties } from 'react';
 import { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
 
@@ -334,15 +335,17 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      */
     className?: string;
     /**
-     * Width of the chart in pixels
+     * Width of the chart container in pixels. When omitted, the chart fills its parent's width.
      */
     width?: number;
     /**
-     * Height of the chart in pixels
+     * Height of the chart container in pixels. When omitted, the chart fills its parent's height.
      */
     height?: number;
     /**
-     * Size of the chart in pixels for pie and donut charts
+     * Maximum diameter of the pie in pixels (pie and donut charts only).
+     * The pie will shrink if the container is smaller than this value.
+     * When omitted, the pie fills the available space.
      */
     size?: number;
     /**
@@ -426,6 +429,12 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      * Whether to show chart animation on initial render or not
      */
     animation?: boolean;
+    /**
+     * Gap between chart elements (SVG, legend, children).
+     * Uses WordPress design system tokens.
+     * @default 'md'
+     */
+    gap?: GapSize;
     /**
      * More options for the chart.
      */

package/dist/utils/index.d.cts

@@ -1,7 +1,7 @@
 export { M as MetricValueType, f as formatMetricValue } from '../format-metric-value-MXm5DtQ_.cjs';
 import { TickFormatter } from '@visx/axis';
 import { AnyD3Scale, ScaleInput } from '@visx/scale';
-import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-BCFQlzTM.cjs';
+import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-CzdN7rUe.cjs';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';
@@ -9,6 +9,7 @@ import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';
 import '@visx/annotation/lib/components/LineSubject';
 import '@visx/text/lib/Text';
+import '@wordpress/theme';
 import 'react';
 import 'react-google-charts';
 

package/dist/utils/index.d.ts

@@ -1,7 +1,7 @@
 export { M as MetricValueType, f as formatMetricValue } from '../format-metric-value-MXm5DtQ_.js';
 import { TickFormatter } from '@visx/axis';
 import { AnyD3Scale, ScaleInput } from '@visx/scale';
-import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-BCFQlzTM.js';
+import { j as SeriesData, C as ChartTheme, b as CompleteChartTheme } from '../types-CzdN7rUe.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles } from '@visx/xychart';
 import '@visx/annotation/lib/components/CircleSubject';
@@ -9,6 +9,7 @@ import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';
 import '@visx/annotation/lib/components/LineSubject';
 import '@visx/text/lib/Text';
+import '@wordpress/theme';
 import 'react';
 import 'react-google-charts';
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.56.5",
+	"version": "0.56.7",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -200,8 +200,8 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/theme": "0.6.0",
-		"@wordpress/ui": "0.6.0",
+		"@wordpress/theme": "0.7.0",
+		"@wordpress/ui": "0.7.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -215,18 +215,18 @@
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@babel/preset-typescript": "7.28.5",
-		"@storybook/addon-docs": "10.2.3",
-		"@storybook/react": "10.2.3",
+		"@storybook/addon-docs": "10.2.11",
+		"@storybook/react": "10.2.11",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/jest": "^30.0.0",
-		"@types/react": "18.3.26",
+		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "32.1.0",
-		"@wordpress/element": "6.39.0",
+		"@wordpress/components": "32.2.0",
+		"@wordpress/element": "6.40.0",
 		"babel-jest": "30.2.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
 		"esbuild": "0.25.9",
@@ -239,7 +239,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.2",
-		"storybook": "10.2.3",
+		"storybook": "10.2.11",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"
 	},

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

@@ -12,7 +12,7 @@ import {
 	useChartDataTransform,
 	useZeroValueDisplay,
 	useChartMargin,
-	useElementHeight,
+	useElementSize,
 	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
@@ -32,7 +32,6 @@ import { useBarChartOptions } from './private';
 import type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-import type { GapSize } from '@wordpress/theme';
 import type { FC, ReactNode, ComponentType } from 'react';
 
 export interface BarChartProps extends BaseChartProps< SeriesData[] > {
@@ -42,12 +41,6 @@ export interface BarChartProps extends BaseChartProps< SeriesData[] > {
 	showZeroValues?: boolean;
 	legendInteractive?: boolean;
 	children?: ReactNode;
-	/**
-	 * Gap between chart elements (SVG, legend, children).
-	 * Uses WordPress design system tokens.
-	 * @default 'md'
-	 */
-	gap?: GapSize;
 }
 
 // Base props type with optional responsive properties
@@ -125,7 +118,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const legendItems = useChartLegendItems( dataSorted );
 	const chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );
 	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
-	const [ svgWrapperRef, svgWrapperHeight ] = useElementHeight< HTMLDivElement >();
+	const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const chartRef = useRef< HTMLDivElement >( null );
 
 	// Check if children contain a Legend component (composition pattern)

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

@@ -3,10 +3,10 @@ import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import BarChart from '../bar-chart';
 
-// Mock useElementHeight to return a non-zero height in jsdom so charts render
+// Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
-jest.mock( '../../../hooks/use-element-height', () => ( {
-	useElementHeight: () => [ mockRefCallback, 300 ], // Return test height to allow chart rendering
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
 } ) );
 
 describe( 'BarChart', () => {

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

@@ -14,7 +14,7 @@ import {
 	useXYChartTheme,
 	useChartDataTransform,
 	useChartMargin,
-	useElementHeight,
+	useElementSize,
 	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
@@ -288,7 +288,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		const providerTheme = useGlobalChartsTheme();
 		const theme = useXYChartTheme( data );
 		const chartId = useChartId( providedChartId );
-		const [ svgWrapperRef, svgWrapperHeight ] = useElementHeight< HTMLDivElement >();
+		const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 		const chartRef = useRef< HTMLDivElement >( null );
 		const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
 		const [ isNavigating, setIsNavigating ] = useState( false );

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

@@ -8,10 +8,10 @@ import { GlobalChartsProvider, defaultTheme } from '../../../providers';
 import LineChart, { LineChartUnresponsive } from '../line-chart';
 import type { SingleChartRef } from '../../private/single-chart-context';
 
-// Mock useElementHeight to return a non-zero height in jsdom so charts render
+// Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
-jest.mock( '../../../hooks/use-element-height', () => ( {
-	useElementHeight: () => [ mockRefCallback, 300 ], // Return test height to allow chart rendering
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
 } ) );
 
 const customTheme = {

package/src/charts/line-chart/types.ts

@@ -7,7 +7,6 @@ import type {
 } from '../../types';
 import type { GlyphProps } from '@visx/xychart';
 import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-import type { GapSize } from '@wordpress/theme';
 import type { ReactNode, SVGProps, FC } from 'react';
 
 export type LineChartAnnotationProps = {
@@ -44,12 +43,6 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] > {
 	};
 	legendInteractive?: boolean;
 	children?: ReactNode;
-	/**
-	 * Gap between chart elements (SVG, legend, children).
-	 * Uses WordPress design system tokens.
-	 * @default 'md'
-	 */
-	gap?: GapSize;
 }
 
 export type TooltipDatum = {

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

@@ -3,9 +3,20 @@
 	flex-direction: column;
 	overflow: hidden;
 	align-items: center;
-	gap: 20px;
 
-	&--legend-top {
-		flex-direction: column-reverse;
+	// Fill parent when no explicit width/height provided
+	&--responsive {
+		height: 100%;
+		width: 100%;
+	}
+
+	&__svg-wrapper {
+		flex: 1;
+		min-height: 0; // Required for flex shrinking
+		min-width: 0; // Required for flex shrinking
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 }