@automattic/charts 4.14.0 → 4.15.1

package/dist/index.css

@@ -349,6 +349,37 @@
     transform: scaleX(1);
   }
 }
+
+.a8ccharts-97yN9W-bar-chart--stacked .visx-bar-group rect {
+  rx: 0;
+  animation: none;
+}
+
+.a8ccharts-97yN9W-bar-chart--stacked .visx-bar-group rect[data-stack-end="top"] {
+  clip-path: inset(0 round var(--a8c-charts-border-radius-bar-chart) var(--a8c-charts-border-radius-bar-chart) 0 0);
+}
+
+.a8ccharts-97yN9W-bar-chart--stacked .visx-bar-group rect[data-stack-end="right"] {
+  clip-path: inset(0 round 0 var(--a8c-charts-border-radius-bar-chart) var(--a8c-charts-border-radius-bar-chart) 0);
+}
+
+.a8ccharts-97yN9W-bar-chart--stacked .visx-bar-group rect[data-stack-end="bottom"] {
+  clip-path: inset(0 round 0 0 var(--a8c-charts-border-radius-bar-chart) var(--a8c-charts-border-radius-bar-chart));
+}
+
+.a8ccharts-97yN9W-bar-chart--stacked .visx-bar-group rect[data-stack-end="left"] {
+  clip-path: inset(0 round var(--a8c-charts-border-radius-bar-chart) 0 0 var(--a8c-charts-border-radius-bar-chart));
+}
+
+.a8ccharts-97yN9W-bar-chart--stacked.a8ccharts-97yN9W-bar-chart--animated .visx-bar-group {
+  transform-box: view-box;
+  animation: a8ccharts-97yN9W-rise var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
+}
+
+.a8ccharts-97yN9W-bar-chart--stacked.a8ccharts-97yN9W-bar-chart--animated-horizontal .visx-bar-group {
+  transform-box: view-box;
+  animation: a8ccharts-97yN9W-stretch var(--a8c-charts-motion-duration-entrance) var(--a8c-charts-motion-easing-entrance) both;
+}
 .a8ccharts-gx1_AW-selected-ring__far, .a8ccharts-gx1_AW-selected-ring__edge {
   fill: none;
 }
@@ -745,6 +776,17 @@
   overflow: hidden;
 }
 
+.a8ccharts-GovfoW-grid {
+  row-gap: var(--a8c-charts-dimension-leaderboard-row-gap);
+  column-gap: var(--a8c-charts-dimension-leaderboard-column-gap);
+  grid-template-columns: minmax(0, 1fr) auto;
+  display: grid;
+}
+
+.a8ccharts-GovfoW-grid--comparison {
+  grid-template-columns: minmax(0, 1fr) auto auto;
+}
+
 .a8ccharts-GovfoW-barWithLabelContainer {
   isolation: isolate;
   grid-template-columns: 1fr;
@@ -896,6 +938,21 @@
   transition: opacity var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1)), width var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
 }
 
+.a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-barWithLabelContainer > :not(.a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-barTrack) {
+  max-inline-size: 100%;
+  transition: max-inline-size var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
+}
+
+.a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-barWithLabelContainer > :not(.a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-barTrack), .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-barWithLabelContainer > :not(.a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-barTrack), .a8ccharts-GovfoW-interactiveRow:has(:focus-visible) .a8ccharts-GovfoW-barWithLabelContainer > :not(.a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-barTrack) {
+  max-inline-size: calc(100% - var(--wpds-dimension-gap-2xl, 32px));
+}
+
 .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-valueContainer {
   transition: transform var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
 }
@@ -976,7 +1033,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-valueContainer, .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-chevron {
+  .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-barWithLabelContainer > :not(.a8ccharts-GovfoW-bar, .a8ccharts-GovfoW-barTrack), .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-valueContainer, .a8ccharts-GovfoW-interactiveRow .a8ccharts-GovfoW-chevron {
     transition: none;
   }
 }

package/dist/index.d.cts

@@ -253,9 +253,9 @@ type BarStyles = {
   opacity?: number;
 };
 /**
- * How a bar chart places its series in a category. `grouped` puts each primary series in a slot of its own; `overlap` puts every primary in one slot and every comparison in a second, and overlaps the `group`s within each slot.
+ * How a bar chart places its series in a category. `grouped` puts each primary series in a slot of its own; `overlap` puts every primary in one slot and every comparison in a second, and overlaps the `group`s within each slot; `stacked` stacks every primary in one bar, the first series at the bottom.
  */
-type BarChartLayout = 'grouped' | 'overlap';
+type BarChartLayout = 'grouped' | 'overlap' | 'stacked';
 type MultipleDataPointsDate = {
   label: string;
   data: DataPointDate[];
@@ -367,6 +367,18 @@ type ChartTheme = {
     /** Stroke width for the sparkline line */
     strokeWidth?: number;
   };
+  /** Compact mode for `compactWhenShort` line, area and bar charts */
+  compactWhenShort?: {
+    /** Height (px) below which the chart turns compact */
+    below?: number;
+    /** Margin the chart defaults to while compact */
+    margin?: {
+      top?: number;
+      right?: number;
+      bottom?: number;
+      left?: number;
+    };
+  };
   /**
    * HeatmapChart settings. Cell gap, radius, value size and the selection ring come from
    * WPDS tokens in CSS, so only the compact sizing lives here.
@@ -396,6 +408,9 @@ type CompleteChartTheme = Required<ChartTheme> & {
   sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
     margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
   };
+  compactWhenShort: Required<NonNullable<ChartTheme['compactWhenShort']>> & {
+    margin: Required<NonNullable<ChartTheme['compactWhenShort']>['margin']>;
+  };
   heatmapChart: Required<NonNullable<ChartTheme['heatmapChart']>>;
 };
 /**
@@ -445,6 +460,12 @@ type AxisOptions = {
    * so callers can force a specific axis (e.g. integer-only steps on a sparse chart).
    */
   tickValues?: ScaleInput<AxisScale>[];
+  /**
+   * Most decimal places a value-axis tick may carry, so labels rounded to that precision never repeat;
+   * an axis holding fewer than two steps widens to the nearest ones. Whole-number data always uses 0.
+   * Ignored on a log scale, or when `tickValues` or the value scale's `domain` is set. Line and bar charts only.
+   */
+  tickDecimals?: number;
   axisClassName?: string;
   axisLineClassName?: string;
   labelClassName?: string;
@@ -624,6 +645,17 @@ interface SeriesVisibilityProps {
    */
   defaultHiddenSeries?: readonly string[];
 }
+/**
+ * Compact mode for cartesian charts placed in short containers.
+ */
+interface CompactWhenShortProps {
+  /**
+   * Drop the axes, grid and legend, and default to `theme.compactWhenShort.margin`, while the
+   * chart is shorter than `theme.compactWhenShort.below`. Series hidden through the legend stay
+   * hidden until the chart is tall again. Horizontal bar charts ignore it.
+   */
+  compactWhenShort?: boolean;
+}
 /**
  * Base properties shared across all chart components
  */
@@ -931,7 +963,7 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
   glyphStyle?: SVGProps<SVGCircleElement>;
   position?: 'start' | 'end';
 };
-interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps, CompactWhenShortProps {
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -984,7 +1016,7 @@ type TooltipDatum = {
   /** The series' reading, or null when the bucket has none. */
   value: number | null;
 };
-interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps, CompactWhenShortProps {
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1087,7 +1119,7 @@ type BandHighlightSelection = {
   width: number;
   height: number;
 };
-interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps, CompactWhenShortProps {
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1136,13 +1168,15 @@ type BarLegendOptions = Omit<ChartLegendOptions, 'seriesColors'> & {
 /**
  * Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
  *
- * @param data        - The series the chart draws.
+ * @param allData     - The chart's series; those the layout does not draw get no item.
  * @param options     - The legend options, and the layout the bars are drawn in.
  * @param legendShape - The shape of the legend swatches.
  * @return The legend items.
  */
-export declare function useBarLegendItems(data: SeriesData[], options?: BarLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
+export declare function useBarLegendItems(allData: SeriesData[], options?: BarLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
 interface BarListChartProps extends Exclude<BarChartProps, 'orientation' | 'size' | 'gridVisibility'> {
+  /** Bar lists are always horizontal, and horizontal bars ignore `compactWhenShort`. */
+  compactWhenShort?: never;
   options?: {
     /**
      * Scale for the y axis. Exclude the type property.

package/dist/index.d.ts

@@ -253,9 +253,9 @@ type BarStyles = {
   opacity?: number;
 };
 /**
- * How a bar chart places its series in a category. `grouped` puts each primary series in a slot of its own; `overlap` puts every primary in one slot and every comparison in a second, and overlaps the `group`s within each slot.
+ * How a bar chart places its series in a category. `grouped` puts each primary series in a slot of its own; `overlap` puts every primary in one slot and every comparison in a second, and overlaps the `group`s within each slot; `stacked` stacks every primary in one bar, the first series at the bottom.
  */
-type BarChartLayout = 'grouped' | 'overlap';
+type BarChartLayout = 'grouped' | 'overlap' | 'stacked';
 type MultipleDataPointsDate = {
   label: string;
   data: DataPointDate[];
@@ -367,6 +367,18 @@ type ChartTheme = {
     /** Stroke width for the sparkline line */
     strokeWidth?: number;
   };
+  /** Compact mode for `compactWhenShort` line, area and bar charts */
+  compactWhenShort?: {
+    /** Height (px) below which the chart turns compact */
+    below?: number;
+    /** Margin the chart defaults to while compact */
+    margin?: {
+      top?: number;
+      right?: number;
+      bottom?: number;
+      left?: number;
+    };
+  };
   /**
    * HeatmapChart settings. Cell gap, radius, value size and the selection ring come from
    * WPDS tokens in CSS, so only the compact sizing lives here.
@@ -396,6 +408,9 @@ type CompleteChartTheme = Required<ChartTheme> & {
   sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
     margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
   };
+  compactWhenShort: Required<NonNullable<ChartTheme['compactWhenShort']>> & {
+    margin: Required<NonNullable<ChartTheme['compactWhenShort']>['margin']>;
+  };
   heatmapChart: Required<NonNullable<ChartTheme['heatmapChart']>>;
 };
 /**
@@ -445,6 +460,12 @@ type AxisOptions = {
    * so callers can force a specific axis (e.g. integer-only steps on a sparse chart).
    */
   tickValues?: ScaleInput<AxisScale>[];
+  /**
+   * Most decimal places a value-axis tick may carry, so labels rounded to that precision never repeat;
+   * an axis holding fewer than two steps widens to the nearest ones. Whole-number data always uses 0.
+   * Ignored on a log scale, or when `tickValues` or the value scale's `domain` is set. Line and bar charts only.
+   */
+  tickDecimals?: number;
   axisClassName?: string;
   axisLineClassName?: string;
   labelClassName?: string;
@@ -624,6 +645,17 @@ interface SeriesVisibilityProps {
    */
   defaultHiddenSeries?: readonly string[];
 }
+/**
+ * Compact mode for cartesian charts placed in short containers.
+ */
+interface CompactWhenShortProps {
+  /**
+   * Drop the axes, grid and legend, and default to `theme.compactWhenShort.margin`, while the
+   * chart is shorter than `theme.compactWhenShort.below`. Series hidden through the legend stay
+   * hidden until the chart is tall again. Horizontal bar charts ignore it.
+   */
+  compactWhenShort?: boolean;
+}
 /**
  * Base properties shared across all chart components
  */
@@ -931,7 +963,7 @@ type RenderLineGlyphProps<Datum extends object> = GlyphProps<Datum> & {
   glyphStyle?: SVGProps<SVGCircleElement>;
   position?: 'start' | 'end';
 };
-interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+interface LineChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps, CompactWhenShortProps {
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -984,7 +1016,7 @@ type TooltipDatum = {
   /** The series' reading, or null when the bucket has none. */
   value: number | null;
 };
-interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+interface AreaChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps, CompactWhenShortProps {
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1087,7 +1119,7 @@ type BandHighlightSelection = {
   width: number;
   height: number;
 };
-interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps {
+interface BarChartProps extends BaseChartProps<SeriesData[]>, SeriesVisibilityProps, CompactWhenShortProps {
   /**
    * Legend configuration. Supports `collapseGroups` on top of the shared options.
    */
@@ -1136,13 +1168,15 @@ type BarLegendOptions = Omit<ChartLegendOptions, 'seriesColors'> & {
 /**
  * Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
  *
- * @param data        - The series the chart draws.
+ * @param allData     - The chart's series; those the layout does not draw get no item.
  * @param options     - The legend options, and the layout the bars are drawn in.
  * @param legendShape - The shape of the legend swatches.
  * @return The legend items.
  */
-export declare function useBarLegendItems(data: SeriesData[], options?: BarLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
+export declare function useBarLegendItems(allData: SeriesData[], options?: BarLegendOptions, legendShape?: LegendShape<SeriesData[], number>): BaseLegendItem[];
 interface BarListChartProps extends Exclude<BarChartProps, 'orientation' | 'size' | 'gridVisibility'> {
+  /** Bar lists are always horizontal, and horizontal bars ignore `compactWhenShort`. */
+  compactWhenShort?: never;
   options?: {
     /**
      * Scale for the y axis. Exclude the type property.