@automattic/charts 4.8.0 → 4.9.0

package/dist/index.css

@@ -547,9 +547,9 @@
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__group-label {
-  color: var(--a8c-charts-color-label-secondary);
-  font-size: var(--wpds-typography-font-size-xs, 11px);
-  line-height: var(--wpds-typography-line-height-xs, 16px);
+  color: var(--a8c-charts-color-label);
+  font-size: var(--wpds-typography-font-size-md, 13px);
+  line-height: var(--wpds-typography-line-height-sm, 20px);
   white-space: nowrap;
   text-align: center;
   padding-block-start: var(--wpds-dimension-padding-xs, 4px);
@@ -639,6 +639,10 @@
   background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c-charts-color-heatmap-primary)) calc(var(--a8c-charts-heatmap-cell-intensity) * 100%), var(--a8c-charts-color-heatmap-low, color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) 15%, var(--a8c-charts-color-background, #fff))));
 }
 
+.a8ccharts-O3YMOW-heatmap-chart__legend-swatch--empty {
+  background: var(--a8c-charts-color-track);
+}
+
 .a8ccharts-O3YMOW-heatmap-chart__legend-scale--bar {
   border-radius: var(--a8c-charts-border-radius-cell);
   overflow: hidden;
@@ -793,23 +797,23 @@
   transition: transform var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
 }
 
-.a8ccharts-GovfoW-interactiveRow:hover, .a8ccharts-GovfoW-interactiveRow:focus-visible {
+.a8ccharts-GovfoW-interactiveRow:hover:not(:has(:is(a, button):not(.a8ccharts-GovfoW-rowButton):hover)), .a8ccharts-GovfoW-interactiveRow:focus-visible, .a8ccharts-GovfoW-interactiveRow:has( > .a8ccharts-GovfoW-rowButton:focus-visible) {
   --a8c-charts-dimension-leaderboard-bar-hover-inset: var(--wpds-dimension-gap-2xl, 32px);
 }
 
-.a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-bar {
+.a8ccharts-GovfoW-interactiveRow:hover:not(:has(:is(a, button):not(.a8ccharts-GovfoW-rowButton):hover)) .a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-interactiveRow:has( > .a8ccharts-GovfoW-rowButton:focus-visible) .a8ccharts-GovfoW-bar {
   opacity: .5;
 }
 
-.a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-valueContainer, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-valueContainer {
+.a8ccharts-GovfoW-interactiveRow:hover:not(:has(:is(a, button):not(.a8ccharts-GovfoW-rowButton):hover)) .a8ccharts-GovfoW-valueContainer, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-valueContainer, .a8ccharts-GovfoW-interactiveRow:has( > .a8ccharts-GovfoW-rowButton:focus-visible) .a8ccharts-GovfoW-valueContainer {
   transform: translateX(calc(var(--a8c-charts-dimension-leaderboard-bar-hover-inset) * -1));
 }
 
-.a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-chevron, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-chevron {
+.a8ccharts-GovfoW-interactiveRow:hover:not(:has(:is(a, button):not(.a8ccharts-GovfoW-rowButton):hover)) .a8ccharts-GovfoW-chevron, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-chevron, .a8ccharts-GovfoW-interactiveRow:has( > .a8ccharts-GovfoW-rowButton:focus-visible) .a8ccharts-GovfoW-chevron {
   opacity: 1;
 }
 
-[dir="rtl"] .a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-valueContainer, [dir="rtl"] .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-valueContainer {
+[dir="rtl"] .a8ccharts-GovfoW-interactiveRow:hover:not(:has(:is(a, button):not(.a8ccharts-GovfoW-rowButton):hover)) .a8ccharts-GovfoW-valueContainer, [dir="rtl"] .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-valueContainer, [dir="rtl"] .a8ccharts-GovfoW-interactiveRow:has( > .a8ccharts-GovfoW-rowButton:focus-visible) .a8ccharts-GovfoW-valueContainer {
   transform: translateX(var(--a8c-charts-dimension-leaderboard-bar-hover-inset));
 }
 
@@ -819,6 +823,39 @@
   outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
 }
 
+.a8ccharts-GovfoW-layeredRow {
+  isolation: isolate;
+}
+
+.a8ccharts-GovfoW-layeredRow > :not(.a8ccharts-GovfoW-rowButton, .a8ccharts-GovfoW-chevron) {
+  z-index: 1;
+  pointer-events: none;
+  position: relative;
+}
+
+.a8ccharts-GovfoW-layeredRow :is(a, button):not(.a8ccharts-GovfoW-rowButton) {
+  z-index: 1;
+  pointer-events: auto;
+  position: relative;
+}
+
+.a8ccharts-GovfoW-rowButton {
+  appearance: none;
+  cursor: pointer;
+  z-index: 0;
+  background: none;
+  border: 0;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+}
+
+.a8ccharts-GovfoW-rowButton:focus-visible {
+  border-radius: var(--wpds-border-radius-sm, 2px);
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+}
+
 .a8ccharts-GovfoW-chevron {
   inset-inline-end: var(--wpds-dimension-padding-xs, 4px);
   opacity: 0;
@@ -840,6 +877,19 @@
     transition: none;
   }
 }
+.a8ccharts-V2HDKq-selected-ring__contrast, .a8ccharts-V2HDKq-selected-ring__focus {
+  fill: none;
+}
+
+.a8ccharts-V2HDKq-selected-ring__contrast {
+  stroke: var(--a8c-charts-color-background, #fff);
+  stroke-width: calc(4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+}
+
+.a8ccharts-V2HDKq-selected-ring__focus {
+  stroke: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  stroke-width: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+}
 .a8ccharts-gnszbG-pie-chart__plot {
   position: relative;
 }

package/dist/index.d.cts

@@ -145,7 +145,7 @@ type DataPointDate = {
   /** Per-point fill override for BarChart; other built-in charts ignore it. */
   color?: string;
 };
-type LeaderboardEntry = {
+type LeaderboardEntryFields = {
   /**
    * Unique internal key (e.g., 'key-direct')
    */
@@ -191,7 +191,8 @@ type LeaderboardEntry = {
    * For links or other interactive affordances (external-link icons, info
    * tooltips), put them in the `label` render prop instead of using onClick —
    * a row is either a button (onClick) or carries interactive label content,
-   * never both, since interactive elements cannot be nested in HTML.
+   * never both, since interactive elements cannot be nested in HTML. The
+   * exception is a row that sets `hasInteractiveLabel`.
    */
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   /**
@@ -205,6 +206,18 @@ type LeaderboardEntry = {
    */
   ariaLabel?: string;
 };
+type LeaderboardEntry = LeaderboardEntryFields & ({
+  hasInteractiveLabel?: false;
+} | {
+  /**
+   * Set when the `label` holds its own link or button. The row's button
+   * then sits behind the row instead of around it, so both stay operable.
+   * Requires `onClick`, and `ariaLabel` since the button wraps no text.
+   */
+  hasInteractiveLabel: true;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+  ariaLabel: string;
+});
 type GradientStop = {
   offset: string;
   color?: string;
@@ -880,14 +893,14 @@ type LineChartAnnotationProps = {
   subjectType?: 'circle' | 'line-vertical' | 'line-horizontal';
   styles?: AnnotationStyles;
   testId?: string;
-  renderLabel?: FC<{
+  renderLabel?: (props: {
     title: string;
     subtitle?: string;
-  }>;
-  renderLabelPopover?: FC<{
+  }) => ReactNode;
+  renderLabelPopover?: (props: {
     title: string;
     subtitle?: string;
-  }>;
+  }) => ReactNode;
 };
 type CurveType = 'smooth' | 'linear' | 'monotone';
 type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
@@ -895,6 +908,8 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
   position?: 'start' | 'end';
 };
 interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+  /** Accessible name of the chart. Defaults to a localized "Line chart". */
+  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -950,6 +965,8 @@ type TooltipDatum = {
 //#endregion
 //#region src/charts/area-chart/types.d.ts
 interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+  /** Accessible name of the chart. Defaults to a localized "Area chart". */
+  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1059,6 +1076,8 @@ type BandHighlightSelection = {
   height: number;
 };
 interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+  /** Accessible name of the chart. Defaults to a localized "Bar chart". */
+  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1398,6 +1417,8 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
   ariaLabel?: string;
   /** Compact mode: hide in-cell values, tighten gap, thin axis labels. Default false. */
   compact?: boolean;
+  /** Compact mode only: grow the cells to fill the chart's box, wrapping the column groups onto more rows when that makes them larger. Default false. */
+  fitCells?: boolean;
   /** Render the numeric value inside each cell. Default `! compact`. */
   showValues?: boolean;
   /**
@@ -1485,7 +1506,7 @@ type MonthCalendarHeatmapResult = {
 //#endregion
 //#region src/charts/heatmap-chart/private/heatmap-legend.d.ts
 interface HeatmapLegendProps {
-  /** Number of swatches in the scale. Default 5. */
+  /** Number of color swatches in the scale, not counting the empty-cell swatch. Default 5. */
   steps?: number;
   /**
    * `swatches` spaces the steps out as cell-sized squares; `bar` joins them
@@ -1550,7 +1571,12 @@ declare const useCalendarHeatmapData: (series: DataPointDate[], options?: Calend
 declare const useMonthCalendarHeatmapData: (valueByDay: Record<string, number | null>, range: MonthCalendarHeatmapRange, options?: MonthCalendarHeatmapOptions) => MonthCalendarHeatmapResult;
 //#endregion
 //#region src/charts/leaderboard-chart/types.d.ts
-interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation'> {
+interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation'> {
+  /**
+   * Entries to display. Declared here rather than picked, since the base type
+   * would split the entry union into one array type per member.
+   */
+  data: LeaderboardEntry[];
   /**
    * Whether to show comparison data
    */
@@ -1936,6 +1962,10 @@ interface PieChartProps extends BaseChartProps<DataPointPercentage[]> {
    * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieChartRenderTooltipParams) => ReactNode;
+  /**
+   * Accessible name of the chart. Defaults to a localized "Pie chart".
+   */
+  ariaLabel?: string;
 }
 type PieChartBaseProps = Optional<PieChartProps, 'size'>;
 type PieChartComponent = ChartComponentWithComposition<PieChartBaseProps>;
@@ -2002,6 +2032,10 @@ interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]>
    * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieSemiCircleChartRenderTooltipParams) => ReactNode;
+  /**
+   * Accessible name of the chart. Defaults to a localized "Semi-circle chart".
+   */
+  ariaLabel?: string;
 }
 type PieSemiCircleChartBaseProps = Optional<PieSemiCircleChartProps, 'width'>;
 type PieSemiCircleChartComponent = ChartComponentWithComposition<PieSemiCircleChartBaseProps>;

package/dist/index.d.ts

@@ -145,7 +145,7 @@ type DataPointDate = {
   /** Per-point fill override for BarChart; other built-in charts ignore it. */
   color?: string;
 };
-type LeaderboardEntry = {
+type LeaderboardEntryFields = {
   /**
    * Unique internal key (e.g., 'key-direct')
    */
@@ -191,7 +191,8 @@ type LeaderboardEntry = {
    * For links or other interactive affordances (external-link icons, info
    * tooltips), put them in the `label` render prop instead of using onClick —
    * a row is either a button (onClick) or carries interactive label content,
-   * never both, since interactive elements cannot be nested in HTML.
+   * never both, since interactive elements cannot be nested in HTML. The
+   * exception is a row that sets `hasInteractiveLabel`.
    */
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   /**
@@ -205,6 +206,18 @@ type LeaderboardEntry = {
    */
   ariaLabel?: string;
 };
+type LeaderboardEntry = LeaderboardEntryFields & ({
+  hasInteractiveLabel?: false;
+} | {
+  /**
+   * Set when the `label` holds its own link or button. The row's button
+   * then sits behind the row instead of around it, so both stay operable.
+   * Requires `onClick`, and `ariaLabel` since the button wraps no text.
+   */
+  hasInteractiveLabel: true;
+  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+  ariaLabel: string;
+});
 type GradientStop = {
   offset: string;
   color?: string;
@@ -880,14 +893,14 @@ type LineChartAnnotationProps = {
   subjectType?: 'circle' | 'line-vertical' | 'line-horizontal';
   styles?: AnnotationStyles;
   testId?: string;
-  renderLabel?: FC<{
+  renderLabel?: (props: {
     title: string;
     subtitle?: string;
-  }>;
-  renderLabelPopover?: FC<{
+  }) => ReactNode;
+  renderLabelPopover?: (props: {
     title: string;
     subtitle?: string;
-  }>;
+  }) => ReactNode;
 };
 type CurveType = 'smooth' | 'linear' | 'monotone';
 type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
@@ -895,6 +908,8 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
   position?: 'start' | 'end';
 };
 interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+  /** Accessible name of the chart. Defaults to a localized "Line chart". */
+  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -950,6 +965,8 @@ type TooltipDatum = {
 //#endregion
 //#region src/charts/area-chart/types.d.ts
 interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+  /** Accessible name of the chart. Defaults to a localized "Area chart". */
+  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1059,6 +1076,8 @@ type BandHighlightSelection = {
   height: number;
 };
 interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+  /** Accessible name of the chart. Defaults to a localized "Bar chart". */
+  ariaLabel?: string;
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1398,6 +1417,8 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
   ariaLabel?: string;
   /** Compact mode: hide in-cell values, tighten gap, thin axis labels. Default false. */
   compact?: boolean;
+  /** Compact mode only: grow the cells to fill the chart's box, wrapping the column groups onto more rows when that makes them larger. Default false. */
+  fitCells?: boolean;
   /** Render the numeric value inside each cell. Default `! compact`. */
   showValues?: boolean;
   /**
@@ -1485,7 +1506,7 @@ type MonthCalendarHeatmapResult = {
 //#endregion
 //#region src/charts/heatmap-chart/private/heatmap-legend.d.ts
 interface HeatmapLegendProps {
-  /** Number of swatches in the scale. Default 5. */
+  /** Number of color swatches in the scale, not counting the empty-cell swatch. Default 5. */
   steps?: number;
   /**
    * `swatches` spaces the steps out as cell-sized squares; `bar` joins them
@@ -1550,7 +1571,12 @@ declare const useCalendarHeatmapData: (series: DataPointDate[], options?: Calend
 declare const useMonthCalendarHeatmapData: (valueByDay: Record<string, number | null>, range: MonthCalendarHeatmapRange, options?: MonthCalendarHeatmapOptions) => MonthCalendarHeatmapResult;
 //#endregion
 //#region src/charts/leaderboard-chart/types.d.ts
-interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'data' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation'> {
+interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, 'className' | 'showLegend' | 'legend' | 'chartId' | 'width' | 'height' | 'size' | 'gap' | 'animation'> {
+  /**
+   * Entries to display. Declared here rather than picked, since the base type
+   * would split the entry union into one array type per member.
+   */
+  data: LeaderboardEntry[];
   /**
    * Whether to show comparison data
    */
@@ -1936,6 +1962,10 @@ interface PieChartProps extends BaseChartProps<DataPointPercentage[]> {
    * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieChartRenderTooltipParams) => ReactNode;
+  /**
+   * Accessible name of the chart. Defaults to a localized "Pie chart".
+   */
+  ariaLabel?: string;
 }
 type PieChartBaseProps = Optional<PieChartProps, 'size'>;
 type PieChartComponent = ChartComponentWithComposition<PieChartBaseProps>;
@@ -2002,6 +2032,10 @@ interface PieSemiCircleChartProps extends BaseChartProps<DataPointPercentage[]>
    * When provided, replaces the default `label: value` tooltip with custom content.
    */
   renderTooltip?: (params: PieSemiCircleChartRenderTooltipParams) => ReactNode;
+  /**
+   * Accessible name of the chart. Defaults to a localized "Semi-circle chart".
+   */
+  ariaLabel?: string;
 }
 type PieSemiCircleChartBaseProps = Optional<PieSemiCircleChartProps, 'width'>;
 type PieSemiCircleChartComponent = ChartComponentWithComposition<PieSemiCircleChartBaseProps>;