@automattic/charts 1.12.0 → 2.0.0

package/src/charts/private/x-zoom/x-zoom.tsx

@@ -1,6 +1,6 @@
 import { DataContext } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/ui';
+import { IconButton } from '@wordpress/ui';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import styles from './x-zoom.module.scss';
 import type { SingleChartRef } from '../single-chart-context';
@@ -172,14 +172,8 @@ export function ZoomClip( {
 
 /**
  * Visible icon-only reset control rendered as an HTML overlay on top of the
- * chart container, using the WPDS `Button`. The host should wrap its SVG in a
- * `position: relative` container so the button anchors correctly.
- *
- * `IconButton` would be the natural fit, but it renders a Base UI tooltip whose
- * CommonJS `use-sync-external-store` dependency makes Rolldown emit a dynamic
- * `require()` into `dist`, which throws on evaluation in WordPress Script
- * Module consumers. `Button` gives the same treatment without that dependency;
- * the tooltip is replaced by `aria-label` + `title`.
+ * chart container, using the WPDS `IconButton`. The host should wrap its SVG in
+ * a `position: relative` container so the button anchors correctly.
  *
  * @param props         - Props.
  * @param props.onClick - Click handler. Typically the `reset` from `useXZoom`.
@@ -194,44 +188,39 @@ export function ZoomResetButton( { onClick }: { onClick: () => void } ) {
 			event.stopPropagation();
 		}
 	}, [] );
-	const label = __( 'Reset zoom', 'jetpack-charts' );
 	return (
-		<Button
+		<IconButton
 			className={ styles[ 'x-zoom__reset' ] }
 			onKeyDown={ stopActivationKeys }
-			aria-label={ label }
-			title={ label }
+			label={ __( 'Reset zoom', 'jetpack-charts' ) }
 			variant="outline"
 			tone="neutral"
 			size="small"
 			onClick={ onClick }
 			data-testid="chart-zoom-reset"
-		>
-			<Button.Icon
-				icon={
-					<svg
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						aria-hidden="true"
-						focusable="false"
-					>
-						{ /*
-							Icons render edge-to-edge at 24px, so inset the glyph the
-							way @wordpress/icons glyphs do (drawn within roughly 4-20
-							of the viewBox, ~1.5px effective stroke).
-						*/ }
-						<g transform="translate(2.4 2.4) scale(0.8)">
-							<circle cx="10" cy="10" r="6" />
-							<line x1="15" y1="15" x2="20" y2="20" />
-							<line x1="7" y1="10" x2="13" y2="10" />
-						</g>
-					</svg>
-				}
-			/>
-		</Button>
+			icon={
+				<svg
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					aria-hidden="true"
+					focusable="false"
+				>
+					{ /*
+						Icons render edge-to-edge at 24px, so inset the glyph the
+						way @wordpress/icons glyphs do (drawn within roughly 4-20
+						of the viewBox, ~1.5px effective stroke).
+					*/ }
+					<g transform="translate(2.4 2.4) scale(0.8)">
+						<circle cx="10" cy="10" r="6" />
+						<line x1="15" y1="15" x2="20" y2="20" />
+						<line x1="7" y1="10" x2="13" y2="10" />
+					</g>
+				</svg>
+			}
+		/>
 	);
 }

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

@@ -54,6 +54,6 @@
 }
 
 .legend-item-value {
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
 }

package/src/components/tooltip/base-tooltip.module.scss

@@ -8,7 +8,7 @@
 	color: #fff;
 	border-radius: var(--wpds-border-radius-md, 4px);
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	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);
+	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
 	position: absolute;
 	pointer-events: none;
 	transform: translate(-50%, -100%);

package/src/components/trend-indicator/trend-indicator.module.scss

@@ -3,7 +3,7 @@
 	align-items: center;
 	gap: 0.125em;
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	line-height: 1;
 
 	// Trend colours use the --a8c-charts-color-trend-* catalog roles, falling back

package/src/index.ts

@@ -51,6 +51,7 @@ export type {
 	ChartTheme,
 	CompleteChartTheme,
 	AxisOptions,
+	TickResolution,
 	ScaleOptions,
 	LegendItemStyles,
 	LegendLabelStyles,

package/src/types.ts

@@ -462,6 +462,12 @@ export type CompleteChartTheme = Required< ChartTheme > & {
 		Pick< NonNullable< ChartTheme[ 'heatmapChart' ] >, 'primaryColor' >;
 };
 
+/**
+ * Bucket resolution of time-series data, as known by the caller (e.g. a
+ * granularity selector), for consumers that don't need to infer it.
+ */
+export type TickResolution = 'hour' | 'day' | 'week' | 'month' | 'year';
+
 export type AxisOptions = {
 	orientation?: OrientationType;
 	numTicks?: number;
@@ -475,6 +481,15 @@ export type AxisOptions = {
 	labelClassName?: string;
 	tickClassName?: string;
 	tickFormat?: TickFormatter< ScaleInput< AxisScale > >;
+	/**
+	 * Bucket resolution of the data on a time x-axis. When set, the automatic
+	 * tick formatter derives tick formats from it directly instead of
+	 * inferring the resolution from point spacing. The overall time span still
+	 * constrains the choice — e.g. hourly buckets spanning more than a week
+	 * get date ticks, since hour ticks would be unreadable at that span.
+	 * Ignored when `tickFormat` is set.
+	 */
+	tickResolution?: TickResolution;
 	/**
 	 * Whether to display this axis. Defaults to true.
 	 */