@automattic/charts 1.10.3 → 1.11.0

package/dist/index.css

@@ -54,12 +54,12 @@
 }
 .a8ccharts--zY0xG-tooltip {
   padding: var(--wpds-dimension-padding-sm, 8px);
+  background-color: var(--a8c-charts-color-tooltip-surface, #000000d9);
   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);
   pointer-events: none;
-  background-color: #000000d9;
   position: absolute;
   transform: translate(-50%, -100%);
 }
@@ -79,7 +79,7 @@
 .a8ccharts-udGPVq-svg-empty-state {
   text-align: center;
   font-size: var(--wpds-typography-font-size-md, 13px);
-  color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+  color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 }
 .a8ccharts-sP1gHa-container {
   width: 100%;
@@ -100,8 +100,8 @@
   min-height: 0;
 }
 .a8ccharts-y6bXNq-x-zoom__selection {
-  fill: var(--charts-zoom-selection-fill, #3858e929);
-  stroke: var(--charts-zoom-selection-stroke, #3858e9a6);
+  fill: #3858e929;
+  stroke: #3858e9a6;
   stroke-width: var(--wpds-border-width-xs, 1px);
   pointer-events: none;
 }
@@ -110,14 +110,14 @@
   top: var(--wpds-dimension-gap-sm, 8px);
   right: var(--wpds-dimension-gap-sm, 8px);
   z-index: 2;
-  background: var(--charts-zoom-reset-bg, #ffffffeb);
   width: 28px;
   height: 28px;
-  color: var(--charts-zoom-reset-fg, var(--wpds-color-foreground-content-neutral, #1e1e1e));
-  border: var(--wpds-border-width-xs, 1px) solid var(--charts-zoom-reset-border, #00000029);
+  color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+  border: var(--wpds-border-width-xs, 1px) solid #00000029;
   border-radius: var(--wpds-border-radius-md, 4px);
   cursor: pointer;
   box-shadow: var(--wpds-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
+  background: #ffffffeb;
   justify-content: center;
   align-items: center;
   padding: 0;
@@ -126,11 +126,11 @@
 }
 
 .a8ccharts-y6bXNq-x-zoom__reset:hover {
-  background: var(--charts-zoom-reset-bg-hover, #fff);
+  background: #fff;
 }
 
 .a8ccharts-y6bXNq-x-zoom__reset:focus-visible {
-  outline: 2px solid var(--charts-zoom-reset-focus, var(--wpds-color-stroke-focus, #3858e9));
+  outline: 2px solid var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, #3858e9));
   outline-offset: 1px;
 }
 
@@ -154,8 +154,8 @@
 }
 
 .a8ccharts-inuQka-line-chart__tooltip, .a8ccharts-inuQka-line-chart__annotation-label-popover {
-  background: var(--wpds-color-background-surface-neutral-strong, #fff);
-  color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+  background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
+  color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   padding: var(--wpds-dimension-padding-sm, 8px);
 }
 
@@ -300,7 +300,7 @@
 }
 
 .a8ccharts-mGEVca-main-rate {
-  color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+  color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   text-overflow: ellipsis;
   font-size: var(--wpds-typography-font-size-xl, 18px);
   font-style: normal;
@@ -341,7 +341,7 @@
 }
 
 .a8ccharts-mGEVca-step-label {
-  color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+  color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-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);
@@ -351,7 +351,7 @@
 }
 
 .a8ccharts-mGEVca-step-rate {
-  color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+  color: var(--a8c-charts-color-label, var(--wpds-color-foreground-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);
@@ -384,14 +384,14 @@
 }
 
 .a8ccharts-mGEVca-tooltip-wrapper {
-  background: var(--wpds-color-background-surface-neutral-strong, #fff);
+  background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border-radius: var(--wpds-border-radius-md, 4px) !important;
   padding: var(--wpds-dimension-padding-md, 12px) !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;
 }
 
 .a8ccharts-mGEVca-tooltip-title {
-  color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+  color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-size: var(--wpds-typography-font-size-sm, 12px);
   font-style: normal;
   font-weight: var(--wpds-typography-font-weight-regular, 400);
@@ -399,7 +399,7 @@
 }
 
 .a8ccharts-mGEVca-tooltip-content {
-  color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+  color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-size: var(--wpds-typography-font-size-md, 13px);
   font-style: normal;
   font-weight: var(--wpds-typography-font-weight-medium, 499);
@@ -408,7 +408,7 @@
 
 .a8ccharts-mGEVca-empty-state {
   text-align: center;
-  color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+  color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
   font-size: var(--wpds-typography-font-size-lg, 16px);
 }
 .a8ccharts-8hS2IW-container {
@@ -427,11 +427,11 @@
 
 .a8ccharts-O3YMOW-heatmap-chart__empty {
   padding: var(--wpds-dimension-padding-lg, 16px);
-  color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+  color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__grid {
-  gap: var(--heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
+  gap: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
   flex: 1 1 0;
   width: 100%;
   min-height: 0;
@@ -439,7 +439,7 @@
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__grid:focus-visible {
-  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: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
   outline-offset: 2px;
   border-radius: var(--wpds-border-radius-sm, 2px);
 }
@@ -462,7 +462,7 @@
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__col-label, .a8ccharts-O3YMOW-heatmap-chart__row-label {
-  color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+  color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
   font-size: var(--wpds-typography-font-size-xs, 11px);
   white-space: nowrap;
   overflow: visible;
@@ -481,7 +481,7 @@
 
 .a8ccharts-O3YMOW-heatmap-chart__cell {
   border-radius: var(--wpds-border-radius-sm, 2px);
-  background: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
+  background: var(--a8c-charts-color-track, var(--wpds-color-background-track-neutral-weak, #f0f0f0));
   justify-content: center;
   align-items: center;
   min-width: 0;
@@ -495,28 +495,28 @@
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__cell--filled {
-  background: color-mix(in sRGB, var(--heatmap-primary) calc((.15 + .85 * var(--intensity)) * 100%), var(--heatmap-bg, #fff));
+  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__cell--selected {
-  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: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--a8c-charts-color-focus, 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-O3YMOW-heatmap-chart__cell-value {
-  color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+  color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-size: var(--wpds-typography-font-size-md, 13px);
 }
 
 .a8ccharts-O3YMOW-heatmap-chart__cell--strong .a8ccharts-O3YMOW-heatmap-chart__cell-value {
-  color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
+  color: var(--a8c-charts-color-label-inverse, var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0));
 }
 
 .a8ccharts-O3YMOW-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((.15 + .85 * var(--intensity)) * 100%), var(--heatmap-bg, #fff));
+  background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((.15 + .85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
 }
 .a8ccharts-GovfoW-leaderboardChart {
   transition: opacity var(--wpds-motion-duration-lg, .3s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
@@ -537,6 +537,11 @@
   overflow: auto;
 }
 
+.a8ccharts-GovfoW-leaderboardChart__content--fit {
+  position: relative;
+  overflow: hidden;
+}
+
 .a8ccharts-GovfoW-barWithLabelContainer {
   isolation: isolate;
   grid-template-columns: 1fr;
@@ -562,7 +567,7 @@
   height: 100%;
   min-height: 6px;
   min-width: var(--wpds-dimension-size-5xs, 4px);
-  border-radius: var(--a8c--charts--leaderboard--bar--border-radius, 9999px);
+  border-radius: var(--a8c-charts-border-radius-leaderboard-bar, var(--a8c--charts--leaderboard--bar--border-radius, 9999px));
   z-index: -1;
 }
 
@@ -602,16 +607,24 @@
 .a8ccharts-GovfoW-emptyState {
   padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
   text-align: center;
-  color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+  color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
   font-size: var(--wpds-typography-font-size-md, 13px);
   font-style: italic;
 }
 
+.a8ccharts-GovfoW-fitEmptyState {
+  justify-content: center;
+  align-items: center;
+  padding-block: 0;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
 .a8ccharts-GovfoW-row {
-  --focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
-  padding: var(--focus-ring-width);
+  padding: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
   align-items: center;
   display: grid;
 }
@@ -636,7 +649,7 @@
 }
 
 .a8ccharts-GovfoW-interactiveRow:hover, .a8ccharts-GovfoW-interactiveRow:focus-visible {
-  --a8c--charts--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl, 32px);
+  --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 {
@@ -644,7 +657,7 @@
 }
 
 .a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-valueContainer, .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-valueContainer {
-  transform: translateX(calc(var(--a8c--charts--leaderboard--bar--hover-inset) * -1));
+  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 {
@@ -652,19 +665,19 @@
 }
 
 [dir="rtl"] .a8ccharts-GovfoW-interactiveRow:hover .a8ccharts-GovfoW-valueContainer, [dir="rtl"] .a8ccharts-GovfoW-interactiveRow:focus-visible .a8ccharts-GovfoW-valueContainer {
-  transform: translateX(var(--a8c--charts--leaderboard--bar--hover-inset));
+  transform: translateX(var(--a8c-charts-dimension-leaderboard-bar-hover-inset));
 }
 
 .a8ccharts-GovfoW-interactiveRow:focus-visible {
   border-radius: var(--wpds-border-radius-sm, 2px);
-  outline: var(--focus-ring-width) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: calc(-1 * var(--focus-ring-width));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--a8c-charts-color-focus, 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;
-  color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+  color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
   transition: opacity var(--wpds-motion-duration-sm, .1s) var(--wpds-motion-easing-subtle, cubic-bezier(.15, 0, .15, 1));
   pointer-events: none;
   margin-block: auto;
@@ -731,15 +744,15 @@
 }
 
 .a8ccharts-zR7F7G-trend-indicator--up {
-  color: var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak, #008030));
+  color: var(--a8c-charts-color-trend-up, var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak, #008030)));
 }
 
 .a8ccharts-zR7F7G-trend-indicator--down {
-  color: var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak, #cc1818));
+  color: var(--a8c-charts-color-trend-down, var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak, #cc1818)));
 }
 
 .a8ccharts-zR7F7G-trend-indicator--neutral {
-  color: var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak, #707070));
+  color: var(--a8c-charts-color-trend-neutral, var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak, #707070)));
 }
 
 .a8ccharts-zR7F7G-trend-indicator__icon {

package/dist/index.d.cts

@@ -152,8 +152,8 @@ type LeaderboardEntry = {
    */
   previousShare?: number;
   /**
-   * Delta of the entry. Omit when this row has no matching comparison-period
-   * value.
+   * Delta of the entry. Omit when the percentage change is unavailable, such
+   * as when the row has no comparison value or its previous value is zero.
    */
   delta?: number;
   /**
@@ -946,7 +946,7 @@ declare const BarListChartResponsive: ({
   width,
   height,
   ...chartProps
-}: Omit<BarListChartProps, "width" | "height" | "size"> & {
+}: Omit<BarListChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1100,7 +1100,7 @@ declare const GeoChartResponsive: ({
   width,
   height,
   ...chartProps
-}: Omit<GeoChartProps, "width" | "height" | "size"> & {
+}: Omit<GeoChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1231,10 +1231,20 @@ interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, '
    * Whether the chart is in loading state
    */
   loading?: boolean;
+  /**
+   * Show only complete rows that fit the chart height instead of scrolling.
+   *
+   * Requires a container that constrains the chart's height; otherwise every
+   * row fits. Refits are debounced with the parent resize on the responsive
+   * export, so `LeaderboardChartUnresponsive` tracks a live drag more closely.
+   * @default false
+   */
+  fitRows?: boolean;
   /**
    * Custom styling for the chart container
    */
   style?: React.CSSProperties & {
+    '--a8c-charts-border-radius-leaderboard-bar'?: string; /** @deprecated Use `--a8c-charts-border-radius-leaderboard-bar`. */
     '--a8c--charts--leaderboard--bar--border-radius'?: string;
   };
   /**
@@ -1271,7 +1281,7 @@ declare const LeaderboardChartResponsive: (({
   width,
   height,
   ...chartProps
-}: Omit<LeaderboardChartProps, "width" | "height" | "size"> & {
+}: Omit<LeaderboardChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1804,7 +1814,7 @@ declare const Sparkline: ({
   width,
   height,
   ...chartProps
-}: Omit<SparklineProps, "width" | "height" | "size"> & {
+}: Omit<SparklineProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1852,7 +1862,7 @@ declare const BaseTooltip: ({
   className,
   style,
   renderContainer
-}: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
+}: BaseTooltipProps) => string | number | true | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode>;
 //#endregion
 //#region src/components/tooltip/accessible-tooltip.d.ts
 type FlattenedTooltipData = {

package/dist/index.d.ts

@@ -152,8 +152,8 @@ type LeaderboardEntry = {
    */
   previousShare?: number;
   /**
-   * Delta of the entry. Omit when this row has no matching comparison-period
-   * value.
+   * Delta of the entry. Omit when the percentage change is unavailable, such
+   * as when the row has no comparison value or its previous value is zero.
    */
   delta?: number;
   /**
@@ -946,7 +946,7 @@ declare const BarListChartResponsive: ({
   width,
   height,
   ...chartProps
-}: Omit<BarListChartProps, "width" | "height" | "size"> & {
+}: Omit<BarListChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1100,7 +1100,7 @@ declare const GeoChartResponsive: ({
   width,
   height,
   ...chartProps
-}: Omit<GeoChartProps, "width" | "height" | "size"> & {
+}: Omit<GeoChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1231,10 +1231,20 @@ interface LeaderboardChartProps extends Pick<BaseChartProps<LeaderboardEntry>, '
    * Whether the chart is in loading state
    */
   loading?: boolean;
+  /**
+   * Show only complete rows that fit the chart height instead of scrolling.
+   *
+   * Requires a container that constrains the chart's height; otherwise every
+   * row fits. Refits are debounced with the parent resize on the responsive
+   * export, so `LeaderboardChartUnresponsive` tracks a live drag more closely.
+   * @default false
+   */
+  fitRows?: boolean;
   /**
    * Custom styling for the chart container
    */
   style?: React.CSSProperties & {
+    '--a8c-charts-border-radius-leaderboard-bar'?: string; /** @deprecated Use `--a8c-charts-border-radius-leaderboard-bar`. */
     '--a8c--charts--leaderboard--bar--border-radius'?: string;
   };
   /**
@@ -1271,7 +1281,7 @@ declare const LeaderboardChartResponsive: (({
   width,
   height,
   ...chartProps
-}: Omit<LeaderboardChartProps, "width" | "height" | "size"> & {
+}: Omit<LeaderboardChartProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1804,7 +1814,7 @@ declare const Sparkline: ({
   width,
   height,
   ...chartProps
-}: Omit<SparklineProps, "width" | "height" | "size"> & {
+}: Omit<SparklineProps, "height" | "size" | "width"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1852,7 +1862,7 @@ declare const BaseTooltip: ({
   className,
   style,
   renderContainer
-}: BaseTooltipProps) => string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;
+}: BaseTooltipProps) => string | number | true | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode>;
 //#endregion
 //#region src/components/tooltip/accessible-tooltip.d.ts
 type FlattenedTooltipData = {