@automattic/charts 1.10.1 → 1.10.3

package/dist/index.css

@@ -82,6 +82,20 @@
   color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 }
 .a8ccharts-sP1gHa-container {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.a8ccharts-sP1gHa-isContained {
+  justify-content: center;
+  align-items: flex-start;
+  display: flex;
+}
+
+.a8ccharts-sP1gHa-content {
+  flex: none;
   min-width: 0;
   min-height: 0;
 }
@@ -407,6 +421,10 @@
   font-size: var(--wpds-typography-font-size-sm, 12px);
 }
 
+.a8ccharts-O3YMOW-heatmap-chart--height-capped {
+  height: max-content;
+}
+
 .a8ccharts-O3YMOW-heatmap-chart__empty {
   padding: var(--wpds-dimension-padding-lg, 16px);
   color: var(--wpds-color-foreground-content-neutral-weak, #707070);
@@ -433,6 +451,12 @@
   min-height: 0;
 }
 
+.a8ccharts-O3YMOW-heatmap-chart__grid--height-capped {
+  flex: none;
+  height: max-content;
+  min-height: 0;
+}
+
 .a8ccharts-O3YMOW-heatmap-chart__row {
   display: contents;
 }
@@ -465,6 +489,11 @@
   display: flex;
 }
 
+.a8ccharts-O3YMOW-heatmap-chart__cell--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .a8ccharts-O3YMOW-heatmap-chart__cell--filled {
   background: color-mix(in sRGB, var(--heatmap-primary) calc((.15 + .85 * var(--intensity)) * 100%), var(--heatmap-bg, #fff));
 }
@@ -578,23 +607,23 @@
   font-style: italic;
 }
 
-.a8ccharts-GovfoW-interactiveRow {
+.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;
-  box-sizing: border-box;
-  appearance: none;
-  width: 100%;
   padding: var(--focus-ring-width);
+  align-items: center;
+  display: grid;
+}
+
+.a8ccharts-GovfoW-interactiveRow {
+  appearance: none;
   color: inherit;
   font: inherit;
   text-align: inherit;
   cursor: pointer;
   background: none;
   border: 0;
-  align-items: center;
-  margin: 0;
-  display: grid;
   position: relative;
 }
 

package/dist/index.d.cts

@@ -833,7 +833,11 @@ type ResponsiveConfig = {
   maxWidth?: number;
   /**
    * The aspect ratio of the chart (height = width * aspectRatio).
-   * When provided, height is calculated from width.
+   * When provided, the chart keeps this ratio and is contained within the
+   * parent on both axes: it fills the available width and derives its height,
+   * but if the parent is shorter than that derived height it shrinks both axes
+   * to fit rather than overflowing. When it is narrower than the parent (the
+   * height-constrained case) it is centered horizontally.
    * When omitted, the chart fills the parent container's height.
    */
   aspectRatio?: number;
@@ -942,7 +946,7 @@ declare const BarListChartResponsive: ({
   width,
   height,
   ...chartProps
-}: Omit<BarListChartProps, "size" | "width" | "height"> & {
+}: Omit<BarListChartProps, "width" | "height" | "size"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1096,7 +1100,7 @@ declare const GeoChartResponsive: ({
   width,
   height,
   ...chartProps
-}: Omit<GeoChartProps, "size" | "width" | "height"> & {
+}: Omit<GeoChartProps, "width" | "height" | "size"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1107,6 +1111,13 @@ declare const GeoChartResponsive: ({
 type HeatmapCell = {
   /** Per-cell label used in the tooltip / accessible name. */label?: string;
   value: number | null;
+  /**
+   * Leave the cell's grid slot empty: nothing is painted and the cell is
+   * skipped by hover and keyboard navigation, while the slot keeps its
+   * place so the rest of the grid doesn't shift. For calendar edges, where
+   * days completing the first/last week fall outside the covered range.
+   */
+  hidden?: boolean;
 };
 /** A heatmap column (rendered left→right); its cells render top→bottom. */
 type HeatmapColumn = {
@@ -1128,6 +1139,27 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
   compact?: boolean;
   /** Render the numeric value inside each cell. Default `! compact`. */
   showValues?: boolean;
+  /**
+   * Cap a cell's width (px) in non-compact mode. Cells grow up to the cap
+   * and stop instead of splitting the whole container width, so sparse
+   * ranges don't produce oversized cells; narrow containers still shrink
+   * them. Ignored in compact mode, which uses a fixed cell size.
+   */
+  maxCellWidth?: number;
+  /**
+   * Cap a cell's height (px) in non-compact mode. Applying this cap
+   * content-sizes the chart vertically so rows do not absorb unused height.
+   * Ignored in compact mode, which uses a fixed cell size.
+   */
+  maxCellHeight?: number;
+  /**
+   * Floor a cell's width (px) in non-compact mode. Below it the grid stops
+   * shrinking and overflows its container instead, so a scrollable wrapper
+   * can take over for long ranges. Default 0 (cells shrink freely).
+   */
+  minCellWidth?: number;
+  /** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
+  minCellHeight?: number;
   /**
    * Color the cell scale interpolates toward at the highest value
    * (this prop > theme `heatmapChart.primaryColor` > palette `colors[0]`).
@@ -1144,6 +1176,13 @@ type CalendarHeatmapResult = {
 };
 declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: {
   weekStartsOn?: 0 | 1;
+  /**
+   * Mark the days completing the first/last week outside the series'
+   * date span as hidden cells (empty grid slots) instead of blank
+   * cells, giving the calendar ragged edges. Days inside the span stay
+   * blank cells even when the series has no entry for them.
+   */
+  hideOutOfRangeDays?: boolean;
 }) => CalendarHeatmapResult;
 //#endregion
 //#region src/charts/heatmap-chart/private/heatmap-legend.d.ts
@@ -1232,7 +1271,7 @@ declare const LeaderboardChartResponsive: (({
   width,
   height,
   ...chartProps
-}: Omit<LeaderboardChartProps, "size" | "width" | "height"> & {
+}: Omit<LeaderboardChartProps, "width" | "height" | "size"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1765,7 +1804,7 @@ declare const Sparkline: ({
   width,
   height,
   ...chartProps
-}: Omit<SparklineProps, "size" | "width" | "height"> & {
+}: Omit<SparklineProps, "width" | "height" | "size"> & {
   width?: number;
   height?: number;
   size?: number;

package/dist/index.d.ts

@@ -833,7 +833,11 @@ type ResponsiveConfig = {
   maxWidth?: number;
   /**
    * The aspect ratio of the chart (height = width * aspectRatio).
-   * When provided, height is calculated from width.
+   * When provided, the chart keeps this ratio and is contained within the
+   * parent on both axes: it fills the available width and derives its height,
+   * but if the parent is shorter than that derived height it shrinks both axes
+   * to fit rather than overflowing. When it is narrower than the parent (the
+   * height-constrained case) it is centered horizontally.
    * When omitted, the chart fills the parent container's height.
    */
   aspectRatio?: number;
@@ -942,7 +946,7 @@ declare const BarListChartResponsive: ({
   width,
   height,
   ...chartProps
-}: Omit<BarListChartProps, "size" | "width" | "height"> & {
+}: Omit<BarListChartProps, "width" | "height" | "size"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1096,7 +1100,7 @@ declare const GeoChartResponsive: ({
   width,
   height,
   ...chartProps
-}: Omit<GeoChartProps, "size" | "width" | "height"> & {
+}: Omit<GeoChartProps, "width" | "height" | "size"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1107,6 +1111,13 @@ declare const GeoChartResponsive: ({
 type HeatmapCell = {
   /** Per-cell label used in the tooltip / accessible name. */label?: string;
   value: number | null;
+  /**
+   * Leave the cell's grid slot empty: nothing is painted and the cell is
+   * skipped by hover and keyboard navigation, while the slot keeps its
+   * place so the rest of the grid doesn't shift. For calendar edges, where
+   * days completing the first/last week fall outside the covered range.
+   */
+  hidden?: boolean;
 };
 /** A heatmap column (rendered left→right); its cells render top→bottom. */
 type HeatmapColumn = {
@@ -1128,6 +1139,27 @@ interface HeatmapChartProps extends Omit<BaseChartProps<HeatmapColumn[]>, 'showL
   compact?: boolean;
   /** Render the numeric value inside each cell. Default `! compact`. */
   showValues?: boolean;
+  /**
+   * Cap a cell's width (px) in non-compact mode. Cells grow up to the cap
+   * and stop instead of splitting the whole container width, so sparse
+   * ranges don't produce oversized cells; narrow containers still shrink
+   * them. Ignored in compact mode, which uses a fixed cell size.
+   */
+  maxCellWidth?: number;
+  /**
+   * Cap a cell's height (px) in non-compact mode. Applying this cap
+   * content-sizes the chart vertically so rows do not absorb unused height.
+   * Ignored in compact mode, which uses a fixed cell size.
+   */
+  maxCellHeight?: number;
+  /**
+   * Floor a cell's width (px) in non-compact mode. Below it the grid stops
+   * shrinking and overflows its container instead, so a scrollable wrapper
+   * can take over for long ranges. Default 0 (cells shrink freely).
+   */
+  minCellWidth?: number;
+  /** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
+  minCellHeight?: number;
   /**
    * Color the cell scale interpolates toward at the highest value
    * (this prop > theme `heatmapChart.primaryColor` > palette `colors[0]`).
@@ -1144,6 +1176,13 @@ type CalendarHeatmapResult = {
 };
 declare const buildCalendarHeatmapData: (series: DataPointDate[], options?: {
   weekStartsOn?: 0 | 1;
+  /**
+   * Mark the days completing the first/last week outside the series'
+   * date span as hidden cells (empty grid slots) instead of blank
+   * cells, giving the calendar ragged edges. Days inside the span stay
+   * blank cells even when the series has no entry for them.
+   */
+  hideOutOfRangeDays?: boolean;
 }) => CalendarHeatmapResult;
 //#endregion
 //#region src/charts/heatmap-chart/private/heatmap-legend.d.ts
@@ -1232,7 +1271,7 @@ declare const LeaderboardChartResponsive: (({
   width,
   height,
   ...chartProps
-}: Omit<LeaderboardChartProps, "size" | "width" | "height"> & {
+}: Omit<LeaderboardChartProps, "width" | "height" | "size"> & {
   width?: number;
   height?: number;
   size?: number;
@@ -1765,7 +1804,7 @@ declare const Sparkline: ({
   width,
   height,
   ...chartProps
-}: Omit<SparklineProps, "size" | "width" | "height"> & {
+}: Omit<SparklineProps, "width" | "height" | "size"> & {
   width?: number;
   height?: number;
   size?: number;