@opendata-ai/openchart-engine 7.11.0 → 8.0.0-rc.10

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,12 +41,14 @@ 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, TOP_LEGEND_GAP_ABOVE } from '../legend/wrap';
 import { yTickPositionIsInline } from './axes';
@@ -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,6 +88,11 @@ 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
@@ -96,6 +113,11 @@ export interface LayoutDimensions {
 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.
@@ -191,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;
 
@@ -244,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;
@@ -276,8 +296,8 @@ export function computeDimensions(
   // 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,
@@ -344,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),
@@ -378,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.
@@ -421,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];
@@ -443,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);
           }
         }
       }
@@ -538,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(
@@ -595,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(
@@ -646,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`
@@ -656,38 +657,48 @@ 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') {
+    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.
   }
 
+  // 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
@@ -733,7 +744,7 @@ 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;
@@ -788,6 +799,13 @@ export function computeDimensions(
         margins,
         theme,
         metrics: fallbackMetrics,
+        seriesSearch: wantsSearch
+          ? resolveSeriesSearch(
+              spec,
+              fallbackMetricsTopY + (fallbackMetrics?.height ?? 0),
+              fallbackMetricsArea,
+            )
+          : undefined,
         xAxisHeight,
         effectiveAxisGap: fallbackEffectiveAxisGap,
       };
@@ -826,11 +844,49 @@ 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,
+  };
+}
+
 /**
  * Resolve the metric bar layout. The bar spans the full chrome content width
  * (from hPad to width - hPad), aligning with the title/eyebrow rather than

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],