@opendata-ai/openchart-engine 7.10.0 → 8.0.0-rc.1

package/src/layout/dimensions.ts

@@ -20,6 +20,7 @@ import type {
   Rect,
   ResolvedChrome,
   ResolvedMetricBar,
+  ResolvedSeriesSearch,
   ResolvedTheme,
 } from '@opendata-ai/openchart-core';
 import {
@@ -27,9 +28,12 @@ import {
   axisTitleOffset,
   BREAKPOINT_COMPACT_MAX,
   computeChrome,
+  computeFieldFormatContext,
+  defaultNumberFormatter,
   estimateTextWidth,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
+  isAxislessMark,
   LABEL_GAP_COMPACT,
   LABEL_GAP_DEFAULT,
   MAX_LEFT_LABEL_FRACTION_COMPACT,
@@ -37,14 +41,16 @@ import {
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
+  resolveNumberFormatter,
   TOP_PAD_EXTRA_NARROW,
 } from '@opendata-ai/openchart-core';
-import { format as d3Format } from 'd3-format';
 
 import type { NormalizedChartSpec } from '../compiler/types';
 import { isEndsBoth, predictEndpointLabelsWidth } from '../endpoint-labels/predict';
+import { hasLegendContent } from '../legend/compute';
+import { SIZE_LEGEND_GAP } from '../legend/size';
 import { countColorSeries, resolveSuppression } from '../legend/suppression';
-import { legendGap } from '../legend/wrap';
+import { legendGap, TOP_LEGEND_GAP_ABOVE } from '../legend/wrap';
 import { yTickPositionIsInline } from './axes';
 import { computeMetricBar, type MetricFontSizes, metricBarHeight } from './metrics';
 import type { LayoutPlan } from './plan';
@@ -55,6 +61,12 @@ function metricFonts(theme: ResolvedTheme): MetricFontSizes {
   return { label: theme.fonts.sizes.metricLabel, value: theme.fonts.sizes.metricValue };
 }
 
+/** True when a placed legend layout has visible content (back-compat path). */
+function legendLayoutHasContent(legendLayout: LegendLayout): boolean {
+  if (legendLayout.type === 'continuous') return legendLayout.bounds.height > 0;
+  return 'entries' in legendLayout && legendLayout.entries.length > 0;
+}
+
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -76,18 +88,36 @@ export interface LayoutDimensions {
    * spec.metrics is supplied AND the bar fits the container.
    */
   metrics?: ResolvedMetricBar;
+  /**
+   * Reserved series-search band (below chrome and the metric bar, above the
+   * top legend). Present only when spec.seriesSearch is enabled.
+   */
+  seriesSearch?: ResolvedSeriesSearch;
   /**
    * Height reserved below the chart area for x-axis tick labels and the
    * (optional) axis title. Exposed so downstream layout code (e.g. the
    * second legend pass) can position elements below the axis row.
    */
   xAxisHeight: number;
+  /**
+   * The axis gap the margin stack placed between the top legend (or chrome,
+   * when there is no top legend) and the chart area. With a top legend this
+   * is the inline-tick overhang, and `placeLegend` must receive it as
+   * `axisGapBelowLegend` so the legend sits above the reserved tick zone
+   * instead of flush against `chartArea.y` (where inline y-tick labels draw).
+   */
+  effectiveAxisGap: number;
 }
 
 /** Minimum chart area dimensions before guardrails kick in. */
 const MIN_CHART_WIDTH = 60;
 const MIN_CHART_HEIGHT = 40;
 
+/** Input row height for the series-search band (matches the DOM input's CSS height). */
+const SERIES_SEARCH_INPUT_HEIGHT = 32;
+/** Gap between the series-search input row and whatever stacks below it. */
+const SERIES_SEARCH_GAP = 12;
+
 /**
  * Per-display minimum chart dimensions. Sparkline mode allows much smaller
  * containers (down to ~30x20px) since the entire chart is just the mark.
@@ -183,12 +213,10 @@ export function computeDimensions(
   // When a layout plan is present, derive legend info from plan.legendContent;
   // otherwise fall back to the legendLayout parameter (back-compat).
   const bottomLegendReservation = plan
-    ? plan.legendContent.entries.length > 0 && plan.legendContent.position === 'bottom'
+    ? hasLegendContent(plan.legendContent) && plan.legendContent.position === 'bottom'
       ? plan.legendContent.height + legendGap(width)
       : 0
-    : 'entries' in legendLayout &&
-        legendLayout.entries.length > 0 &&
-        legendLayout.position === 'bottom'
+    : legendLayoutHasContent(legendLayout) && legendLayout.position === 'bottom'
       ? legendLayout.bounds.height + legendGap(width)
       : 0;
 
@@ -236,7 +264,7 @@ export function computeDimensions(
     };
 
     // Reserve legend space only when user explicitly opted into a legend.
-    if (userExplicit.legend && 'entries' in legendLayout && legendLayout.entries.length > 0) {
+    if (userExplicit.legend && legendLayoutHasContent(legendLayout)) {
       const gap = legendGap(width);
       if (legendLayout.position === 'right' || legendLayout.position === 'bottom-right') {
         margins.right += legendLayout.bounds.width + 8;
@@ -254,14 +282,22 @@ export function computeDimensions(
       height: Math.max(0, height - margins.top - margins.bottom),
     };
 
-    return { total, chrome, chartArea, margins, theme, xAxisHeight: xAxisSpace };
+    return {
+      total,
+      chrome,
+      chartArea,
+      margins,
+      theme,
+      xAxisHeight: xAxisSpace,
+      effectiveAxisGap: 0,
+    };
   }
 
   // Start with the total rect
   const total: Rect = { x: 0, y: 0, width, height };
 
-  // Radial charts (arc) don't have axes, so skip axis space
-  const isRadial = spec.markType === 'arc';
+  // Axisless charts (arc, waffle, calendar) don't have axes, so skip axis space
+  const isRadial = isAxislessMark(spec.markType);
   const encoding = spec.encoding as Encoding;
 
   // Estimate x-axis height below chart area: tick labels sit 14px below,
@@ -328,13 +364,17 @@ export function computeDimensions(
   // is kept; the rollback path subtracts it back when stripped.
   const wantsMetrics = !!spec.metrics && spec.metrics.length > 0 && chromeMode !== 'hidden';
   const tentativeMetricsHeight = wantsMetrics ? metricBarHeight(metricFonts(theme)) : 0;
+  // Series-search band: reserved empty SVG space directly below chrome and
+  // the metric bar. The vanilla adapter overlays a DOM combobox on this rect.
+  const wantsSearch = !!spec.seriesSearch && chromeMode !== 'hidden';
+  const searchReservation = wantsSearch ? SERIES_SEARCH_INPUT_HEIGHT + SERIES_SEARCH_GAP : 0;
   // topAxisGap sits between the legend (or chrome, if no legend) and the
   // chart area. It accounts for the general axis margin plus any inline
   // tick-label overhang. Placing it after the legend (below) keeps the
   // subtitle-to-legend gap tight while reserving physical space for ticks
   // that protrude above the chart area.
   const margins: Margins = {
-    top: topPad + chrome.topHeight + tentativeMetricsHeight,
+    top: topPad + chrome.topHeight + tentativeMetricsHeight + searchReservation,
     right: hPad + (isRadial ? hPad : axisMargin),
     bottom: bottomMargin(chrome.bottomHeight, padding, xAxisHeight),
     left: hPad + (isRadial ? hPad : axisMargin),
@@ -362,8 +402,10 @@ export function computeDimensions(
   // (1) Endpoint-labels column reservation. predictEndpointLabelsWidth returns 0
   // when the column would be suppressed. `labels.density` is intentionally
   // not checked here — that switch controls only the legacy end-of-line labels.
+  // No extra strategy check either: `sup.showEndpointLabels` already accounts
+  // for the compact strip (and its explicit-opt-in override).
   let endpointWidth = 0;
-  if (sup.showEndpointLabels && !labelsHiddenByStrategy) {
+  if (sup.showEndpointLabels) {
     endpointWidth = predictEndpointLabelsWidth(spec, theme);
     if (endpointWidth > 0) {
       // 16px gap between chart area edge and the column.
@@ -405,17 +447,15 @@ export function computeDimensions(
     }
   }
 
-  // (3) Right-edge text annotations. Stacks ADDITIVELY on top of any
-  // endpoint-labels reservation so the annotation text lands between the
-  // chart area's right edge and the endpoint column. When no endpoint column
-  // is reserved, behaves as before (max-of with the existing margin).
+  // (3) Right-edge text annotations. The annotation text and the endpoint
+  // column occupy the same right-side space, so take the max rather than
+  // stacking additively.
   if (
     strategy?.annotationPosition !== 'tooltip-only' &&
     spec.annotations.length > 0 &&
     encoding.x
   ) {
     const xField = encoding.x.field;
-    // Find the maximum x value in the data
     let maxX: string | number | undefined;
     for (const row of spec.data) {
       const v = row[xField];
@@ -427,28 +467,12 @@ export function computeDimensions(
         if (ann.type === 'text' && String(ann.x) === maxXStr) {
           const textWidth = estimateTextWidth(ann.text, ann.fontSize ?? 11, ann.fontWeight ?? 600);
           const dx = ann.offset?.dx ?? 0;
-          // How much text extends right of the anchor point depends on alignment:
-          // - anchor "right" or "left": text is off to one side, full width extends
-          // - anchor "top"/"bottom"/"auto"/undefined: text is centered, half extends right
           const anchor = ann.anchor ?? 'auto';
           const baseRightExtent =
-            anchor === 'left'
-              ? textWidth
-              : // text is to the right of anchor
-                anchor === 'right'
-                ? 0
-                : // text is to the left of anchor
-                  textWidth / 2; // centered (top/bottom/auto)
+            anchor === 'right' ? textWidth : anchor === 'left' ? 0 : textWidth / 2;
           const rightOverflow = Math.max(0, baseRightExtent + dx);
           if (rightOverflow > 0) {
-            if (endpointWidth > 0) {
-              // Endpoint column already reserved space at the far right; the
-              // annotation lands BETWEEN the chart edge and the column, so
-              // stack additively rather than max-of.
-              margins.right += rightOverflow + 12;
-            } else {
-              margins.right = Math.max(margins.right, hPad + rightOverflow + 12);
-            }
+            margins.right = Math.max(margins.right, hPad + rightOverflow + 12);
           }
         }
       }
@@ -522,25 +546,16 @@ export function computeDimensions(
         if (Number.isFinite(v) && Math.abs(v) > maxAbsVal) maxAbsVal = Math.abs(v);
       }
 
+      const ctx = computeFieldFormatContext(spec.data.map((r) => r[yField]));
       let sampleLabel: string;
       if (yAxisFormat) {
-        // Use the actual d3-format to produce a realistic label estimate
-        try {
-          const fmt = d3Format(yAxisFormat);
-          sampleLabel = fmt(maxAbsVal);
-        } catch {
-          sampleLabel = String(maxAbsVal);
-        }
+        const fmt = resolveNumberFormatter(yAxisFormat, ctx);
+        sampleLabel = fmt ? fmt(maxAbsVal) : String(maxAbsVal);
       } else {
-        // Fallback: estimate from magnitude
-        if (maxAbsVal >= 1_000_000_000) sampleLabel = '1.5B';
-        else if (maxAbsVal >= 1_000_000) sampleLabel = '1.5M';
-        else if (maxAbsVal >= 1_000) sampleLabel = '1.5K';
-        else if (maxAbsVal >= 100) sampleLabel = '100';
-        else if (maxAbsVal >= 10) sampleLabel = '10';
-        else sampleLabel = '0.0';
+        sampleLabel = defaultNumberFormatter({ ...ctx, extent: ctx.extent ?? [0, maxAbsVal] })(
+          maxAbsVal,
+        );
       }
-      // Account for negative sign
       const negPrefix = spec.data.some((r) => Number(r[yField]) < 0) ? '-' : '';
       const labelEst = negPrefix + sampleLabel;
       const labelWidth = estimateTextWidth(
@@ -579,21 +594,16 @@ export function computeDimensions(
         const v = Number(row[yFieldForTitle]);
         if (Number.isFinite(v) && Math.abs(v) > maxAbsValForTitle) maxAbsValForTitle = Math.abs(v);
       }
+      const ctxForTitle = computeFieldFormatContext(spec.data.map((r) => r[yFieldForTitle!]));
       let sampleLabelForTitle: string;
       if (yAxisFormatForTitle) {
-        try {
-          const fmt = d3Format(yAxisFormatForTitle);
-          sampleLabelForTitle = fmt(maxAbsValForTitle);
-        } catch {
-          sampleLabelForTitle = String(maxAbsValForTitle);
-        }
+        const fmt = resolveNumberFormatter(yAxisFormatForTitle, ctxForTitle);
+        sampleLabelForTitle = fmt ? fmt(maxAbsValForTitle) : String(maxAbsValForTitle);
       } else {
-        if (maxAbsValForTitle >= 1_000_000_000) sampleLabelForTitle = '1.5B';
-        else if (maxAbsValForTitle >= 1_000_000) sampleLabelForTitle = '1.5M';
-        else if (maxAbsValForTitle >= 1_000) sampleLabelForTitle = '1.5K';
-        else if (maxAbsValForTitle >= 100) sampleLabelForTitle = '100';
-        else if (maxAbsValForTitle >= 10) sampleLabelForTitle = '10';
-        else sampleLabelForTitle = '0.0';
+        sampleLabelForTitle = defaultNumberFormatter({
+          ...ctxForTitle,
+          extent: ctxForTitle.extent ?? [0, maxAbsValForTitle],
+        })(maxAbsValForTitle);
       }
       const negPrefixForTitle = spec.data.some((r) => Number(r[yFieldForTitle]) < 0) ? '-' : '';
       estTickLabelWidth = estimateTextWidth(
@@ -630,6 +640,13 @@ export function computeDimensions(
     margins.right = Math.max(margins.right, hPad + options.rightAxisReserve);
   }
 
+  // Reserve space for the auto-thinning footnote list. Additive, not Math.max:
+  // the footnotes stack above the source/byline/footer row that bottomHeight
+  // already covers, rather than replacing it.
+  if (options.footnoteReserve && options.footnoteReserve > 0) {
+    margins.bottom += options.footnoteReserve;
+  }
+
   // Reserve legend space.
   //
   // Bottom legend: reservation is already baked into `chrome.bottomHeight`
@@ -640,42 +657,57 @@ export function computeDimensions(
   // When a plan is present, derive legend position/size from plan.legendContent;
   // otherwise use the legendLayout parameter (back-compat for non-plan callers).
   const legendHasEntries = plan
-    ? plan.legendContent.entries.length > 0
-    : 'entries' in legendLayout && legendLayout.entries.length > 0;
-  const legendPos = plan
-    ? plan.legendContent.position
-    : 'entries' in legendLayout
-      ? legendLayout.position
-      : 'top';
-  const legendHeight = plan
-    ? plan.legendContent.height
-    : 'entries' in legendLayout
-      ? legendLayout.bounds.height
-      : 0;
-  const legendBoundsWidth = plan
-    ? plan.legendContent.legendWidth
-    : 'entries' in legendLayout
-      ? legendLayout.bounds.width
-      : 0;
+    ? hasLegendContent(plan.legendContent)
+    : legendLayoutHasContent(legendLayout);
+  const legendPos = plan ? plan.legendContent.position : legendLayout.position;
+  const legendHeight = plan ? plan.legendContent.height : legendLayout.bounds.height;
+  const legendBoundsWidth = plan ? plan.legendContent.legendWidth : legendLayout.bounds.width;
+
+  const sizeLegend = plan?.sizeLegendContent;
+  const colorLegendInGutter =
+    legendHasEntries && (legendPos === 'right' || legendPos === 'bottom-right');
 
   const hasTopLegend = legendHasEntries && legendPos === 'top';
   if (legendHasEntries) {
     const gap = legendGap(width);
-    if (legendPos === 'right' || legendPos === 'bottom-right') {
-      margins.right += legendBoundsWidth + 8;
-    } else if (legendPos === 'top') {
-      margins.top += legendHeight + gap;
+    if (legendPos === 'top') {
+      // TOP_LEGEND_GAP_ABOVE keeps the legend from sitting flush against the
+      // subtitle/metric bar now that the axis gap sits BELOW the legend.
+      margins.top += TOP_LEGEND_GAP_ABOVE + legendHeight + gap;
     }
-    // 'bottom' is intentionally not handled here -- see bottomLegendReservation
-    // above.
+    // 'right'/'bottom-right' fall through to the shared right-column reservation
+    // below; 'bottom' is intentionally not handled here -- see
+    // bottomLegendReservation above.
   }
 
-  // topAxisGap sits between the legend (or chrome, if no legend) and the
-  // chart area. When a top legend is present, the legendGap already provides
-  // breathing room, so only the inlineTickOverhang is needed (the axisMargin
-  // component would double up with legendGap). Without a top legend, the
-  // full topAxisGap (axisMargin + inlineTickOverhang) applies.
-  margins.top += hasTopLegend ? inlineTickOverhang : topAxisGap;
+  // Right-hand legend column. The color legend and the size legend SHARE it,
+  // stacked vertically (see placeSizeLegend), so it is reserved at the width of
+  // the wider block -- not the sum.
+  //
+  // Reserving the sum is what the additive version did, and it charged the plot
+  // twice: a bubble chart keying continent (67px) and population (92px) gave up
+  // ~213px of a 934px canvas to render two blocks that are each ~70px tall. The
+  // column below them was dead space. Taking the max spends that empty vertical
+  // room instead and hands the difference back to the plot.
+  //
+  // Right column, not top: graduated circles are as tall as the largest bubble's
+  // diameter, and a ~60px band across the top of a 400px chart eats the plot.
+  //
+  // Each block keeps its own gap (the color legend's 8, the size legend's 12) so
+  // a chart with only one of them reserves exactly what it did before.
+  const colorReserve = colorLegendInGutter ? legendBoundsWidth + 8 : 0;
+  const sizeReserve = sizeLegend ? sizeLegend.width + SIZE_LEGEND_GAP : 0;
+  margins.right += Math.max(colorReserve, sizeReserve);
+
+  // effectiveAxisGap sits between the legend (or chrome, if no legend) and
+  // the chart area. When a top legend is present, the legendGap already
+  // provides breathing room, so only the inlineTickOverhang is needed (the
+  // axisMargin component would double up with legendGap). Without a top
+  // legend, the full topAxisGap (axisMargin + inlineTickOverhang) applies.
+  // The value is returned so placeLegend can position the top legend above
+  // this reserved zone (inline y-tick labels draw inside it).
+  const effectiveAxisGap = hasTopLegend ? inlineTickOverhang : topAxisGap;
+  margins.top += effectiveAxisGap;
 
   // Chart area is what's left after margins
   let chartArea: Rect = {
@@ -712,14 +744,17 @@ export function computeDimensions(
     const fallbackTopAxisGap =
       isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
     const fallbackEffectiveAxisGap = hasTopLegend ? inlineTickOverhang : fallbackTopAxisGap;
-    const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
+    const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight + searchReservation;
     const topDelta = margins.top - newTop;
     const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
     const bottomDelta = margins.bottom - newBottom;
 
     if (topDelta > 0 || bottomDelta > 0) {
       const gap = legendGap(width);
-      margins.top = newTop + (hasTopLegend ? legendHeight + gap : 0) + fallbackEffectiveAxisGap;
+      margins.top =
+        newTop +
+        (hasTopLegend ? TOP_LEGEND_GAP_ABOVE + legendHeight + gap : 0) +
+        fallbackEffectiveAxisGap;
       margins.bottom = newBottom;
 
       chartArea = {
@@ -764,7 +799,15 @@ export function computeDimensions(
         margins,
         theme,
         metrics: fallbackMetrics,
+        seriesSearch: wantsSearch
+          ? resolveSeriesSearch(
+              spec,
+              fallbackMetricsTopY + (fallbackMetrics?.height ?? 0),
+              fallbackMetricsArea,
+            )
+          : undefined,
         xAxisHeight,
+        effectiveAxisGap: fallbackEffectiveAxisGap,
       };
     }
   }
@@ -773,8 +816,9 @@ export function computeDimensions(
   //   topPad
   //   chrome.topHeight              (title / subtitle / eyebrow)
   //   tentativeMetricsHeight        (KPI bar — placed here)
-  //   [optional top legend band]
-  //   topAxisGap                    (axisMargin + inlineTickOverhang)
+  //   [optional top legend band     (TOP_LEGEND_GAP_ABOVE + legend + legendGap)]
+  //   effectiveAxisGap              (inlineTickOverhang with a top legend,
+  //                                  else axisMargin + inlineTickOverhang)
   //   chartArea
   // The metric bar belongs with chrome, above the legend, so its y is
   // computed off chrome.topHeight only — not the full legend-inclusive
@@ -800,7 +844,46 @@ export function computeDimensions(
     margins,
     theme,
     metrics: resolvedMetrics,
+    seriesSearch: wantsSearch
+      ? resolveSeriesSearch(spec, metricsTopY + (resolvedMetrics?.height ?? 0), metricsArea)
+      : undefined,
     xAxisHeight,
+    effectiveAxisGap,
+  };
+}
+
+/**
+ * Resolve the series-search band. Spans the full chrome content width
+ * (hPad to width - hPad, same as the metric bar) directly below chrome and
+ * the metric bar. The band itself is empty SVG space: the vanilla adapter
+ * absolutely positions a DOM combobox over it, so mounting the input never
+ * changes the observed container size.
+ */
+function resolveSeriesSearch(
+  spec: NormalizedChartSpec,
+  y: number,
+  area: { x: number; width: number },
+): ResolvedSeriesSearch | undefined {
+  const config = spec.seriesSearch;
+  if (!config) return undefined;
+  const colorEnc = spec.encoding.color;
+  // Normalization already guarantees a categorical color encoding when
+  // seriesSearch survives; these guards narrow the union for TypeScript.
+  if (!colorEnc || 'condition' in colorEnc || !('field' in colorEnc) || !colorEnc.field) {
+    return undefined;
+  }
+  const field = colorEnc.field;
+  // Same enumeration rule as legend entries: skip rows missing the color field.
+  const values = [
+    ...new Set(spec.data.filter((d) => d[field] != null).map((d) => String(d[field]))),
+  ];
+  return {
+    x: area.x,
+    y,
+    width: area.width,
+    height: SERIES_SEARCH_INPUT_HEIGHT,
+    placeholder: config.placeholder ?? 'Find a series',
+    values,
   };
 }
 

package/src/layout/facet.ts

@@ -1,8 +1,10 @@
 import type { Rect } from '@opendata-ai/openchart-core';
 
 const MIN_PANEL_WIDTH = 200;
+export const MIN_PANEL_HEIGHT = 100;
 const PANEL_GAP = 12;
 const HEADER_HEIGHT = 20;
+const X_AXIS_HEIGHT = 24;
 
 export interface FacetGridPanel {
   key: string;
@@ -24,6 +26,11 @@ export function autoColumns(panelCount: number, availableWidth: number): number
   return Math.min(sqrtCols, fitCols, panelCount);
 }
 
+export function facetMinHeight(panelCount: number, columns: number): number {
+  const rows = Math.ceil(panelCount / columns);
+  return rows * (MIN_PANEL_HEIGHT + HEADER_HEIGHT + X_AXIS_HEIGHT) + (rows - 1) * PANEL_GAP;
+}
+
 export function computeFacetGrid(
   facetValues: string[],
   requestedColumns: number | undefined,
@@ -45,19 +52,23 @@ export function computeFacetGrid(
 
   const rows = Math.ceil(n / columns);
   const panelWidth = Math.max(0, (usableWidth - (columns - 1) * PANEL_GAP) / columns);
-  const usableHeight = totalArea.height - outerAxisReservation.bottom;
+  // Every row includes its own x-axis labels, so the bottom reservation
+  // applies per-row (as overhead), not just at the grid bottom.
+  const xAxisPerRow = outerAxisReservation.bottom;
+  const usableHeight = totalArea.height;
   const panelHeight = Math.max(
     0,
-    (usableHeight - rows * HEADER_HEIGHT - (rows - 1) * PANEL_GAP) / rows,
+    (usableHeight - rows * (HEADER_HEIGHT + xAxisPerRow) - (rows - 1) * PANEL_GAP) / rows,
   );
 
+  const rowStride = HEADER_HEIGHT + panelHeight + xAxisPerRow + PANEL_GAP;
   const panels: FacetGridPanel[] = [];
 
   for (let i = 0; i < n; i++) {
     const col = i % columns;
     const row = Math.floor(i / columns);
     const x = totalArea.x + outerAxisReservation.left + col * (panelWidth + PANEL_GAP);
-    const y = totalArea.y + row * (HEADER_HEIGHT + panelHeight + PANEL_GAP);
+    const y = totalArea.y + row * rowStride;
 
     panels.push({
       key: facetValues[i],