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

package/dist/index.d.ts

@@ -376,6 +376,13 @@ interface NormalizedChartSpec {
     data: DataRow[];
     encoding: Encoding;
     chrome: NormalizedChrome;
+    /**
+     * How chrome height interacts with the height budget. `'grow'` treats the
+     * container height as the plot budget and grows the SVG by the chrome height;
+     * `'subtract'` (default) shrinks the plot to fit chrome. Carried through from
+     * the spec so the layout pipeline can honor it.
+     */
+    chromeLayout?: 'subtract' | 'grow';
     /** Optional KPI metric cells, passed through unchanged. */
     metrics?: _opendata_ai_openchart_core.Metric[];
     /**

package/dist/index.js

@@ -10482,6 +10482,7 @@ function normalizeChartSpec(spec, warnings) {
     data: spec.data,
     encoding,
     chrome: normalizeChrome(spec.chrome),
+    chromeLayout: spec.chromeLayout,
     metrics: spec.metrics,
     seriesSearch: normalizeSeriesSearch(spec, encoding, warnings),
     youDrawIt: normalizeYouDrawIt(spec),
@@ -12348,6 +12349,36 @@ ${errorMessages}`);
   return { spec: normalized, warnings };
 }
 
+// src/layout/shared.ts
+function chromeToInput(chrome) {
+  return {
+    eyebrow: chrome.eyebrow,
+    title: chrome.title,
+    subtitle: chrome.subtitle,
+    source: chrome.source,
+    byline: chrome.byline,
+    footer: chrome.footer,
+    brand: chrome.brand
+  };
+}
+function scalePadding(basePadding, width, height) {
+  const minDim = Math.min(width, height);
+  if (minDim >= 500) return basePadding;
+  if (minDim <= 200) return Math.max(Math.round(basePadding * 0.5), 4);
+  const t = (minDim - 200) / 300;
+  return Math.max(Math.round(basePadding * (0.5 + t * 0.5)), 4);
+}
+function bottomMargin(bottomHeight, padding, xAxisHeight) {
+  return padding + bottomHeight + xAxisHeight;
+}
+var INLINE_TICK_OVERHANG_PAD = 6;
+function resolveChromeLayout(spec, options) {
+  const encoding = spec?.encoding;
+  const isFaceted = !!(encoding?.facet || encoding?.row || encoding?.column);
+  if (isFaceted) return "subtract";
+  return spec?.chromeLayout ?? options?.chromeLayout ?? "subtract";
+}
+
 // src/barlist/compile-barlist.ts
 var DEFAULT_ROW_GAP = 8;
 var LABEL_BAR_GAP = 12;
@@ -12395,14 +12426,19 @@ function compileBarList(spec, options) {
     watermark
   );
   const padding = theme.spacing.padding;
+  const chromeLayout = resolveChromeLayout(
+    spec,
+    options
+  );
+  const grownHeight = chromeLayout === "grow" ? options.height + chrome.topHeight + chrome.bottomHeight : options.height;
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
     width: options.width - padding * 2,
-    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+    height: chromeLayout === "grow" ? options.height - padding * 2 : options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
-    return emptyLayout2(chrome, theme, options, watermark);
+    return emptyLayout2(chrome, theme, { ...options, height: grownHeight }, watermark);
   }
   const labelField = barlistSpec.encoding.label.field;
   const valueField = barlistSpec.encoding.value.field;
@@ -12587,7 +12623,7 @@ function compileBarList(spec, options) {
     a11y,
     theme,
     width: options.width,
-    height: options.height,
+    height: grownHeight,
     animation: resolvedAnimation,
     watermark,
     measureText
@@ -14881,30 +14917,6 @@ function computeAxes(scales, chartArea, strategy, theme, measureText, dataContex
   return result;
 }
 
-// src/layout/shared.ts
-function chromeToInput(chrome) {
-  return {
-    eyebrow: chrome.eyebrow,
-    title: chrome.title,
-    subtitle: chrome.subtitle,
-    source: chrome.source,
-    byline: chrome.byline,
-    footer: chrome.footer,
-    brand: chrome.brand
-  };
-}
-function scalePadding(basePadding, width, height) {
-  const minDim = Math.min(width, height);
-  if (minDim >= 500) return basePadding;
-  if (minDim <= 200) return Math.max(Math.round(basePadding * 0.5), 4);
-  const t = (minDim - 200) / 300;
-  return Math.max(Math.round(basePadding * (0.5 + t * 0.5)), 4);
-}
-function bottomMargin(bottomHeight, padding, xAxisHeight) {
-  return padding + bottomHeight + xAxisHeight;
-}
-var INLINE_TICK_OVERHANG_PAD = 6;
-
 // src/layout/plan.ts
 function createMeasureFn(measureText) {
   if (measureText) {
@@ -15126,7 +15138,9 @@ function resolveLayoutPlan(chartSpec, renderSpec, options, theme, strategy, wate
     if (hasTopLegend) topMargin += TOP_LEGEND_GAP_ABOVE + legendContent.height + gap;
     topMargin += effectiveTopAxisGap;
     const bMargin = bottomMargin(chrome.bottomHeight, padding, xAxisExtent);
-    const chartHeight = Math.max(0, height - topMargin - bMargin);
+    const chromeLayout = resolveChromeLayout(renderSpec, options);
+    const effectiveHeight = chromeLayout === "grow" ? height + chrome.topHeight + chrome.bottomHeight : height;
+    const chartHeight = Math.max(0, effectiveHeight - topMargin - bMargin);
     const rightMargin = hPad + (isRadial ? hPad : axisMargin);
     const rightAxisReserve = options.rightAxisReserve ?? 0;
     const provisionalArea = {
@@ -18006,11 +18020,15 @@ function compileMap(spec, options) {
     watermark
   );
   const padding = getBreakpoint(options.width) === "compact" ? Math.max(HPAD_COMPACT_MIN2, Math.round(theme.spacing.padding * HPAD_COMPACT_FRACTION2)) : theme.spacing.padding;
+  const chromeLayout = resolveChromeLayout(
+    spec,
+    options
+  );
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
     width: options.width - padding * 2,
-    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+    height: chromeLayout === "grow" ? options.height - padding * 2 : options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
     return emptyLayout3(chrome, theme, options, watermark);
@@ -18112,7 +18130,7 @@ function compileMap(spec, options) {
     compileWarnings.push(...filteredJoinWarnings);
   }
   const droppedFeatures = [];
-  const formatter = buildD3Formatter2(mapSpec.valueFormat) ?? formatNumber3;
+  const formatter = buildD3Formatter2(mapSpec.encoding?.color?.format ?? mapSpec.valueFormat) ?? formatNumber3;
   const neutralFill = isDarkMode ? "#2a2a2a" : "#e8e8e8";
   const neutralStroke = isDarkMode ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)";
   let featureMarks;
@@ -19387,6 +19405,7 @@ function legendLayoutHasContent(legendLayout) {
 }
 var MIN_CHART_WIDTH = 60;
 var MIN_CHART_HEIGHT2 = 40;
+var PLOT_SHARE_MAX = 0.4;
 var SERIES_SEARCH_INPUT_HEIGHT = 32;
 var SERIES_SEARCH_GAP = 12;
 function getMinChartDims(display) {
@@ -19429,8 +19448,10 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     watermark,
     bottomLegendReservation
   );
+  const chromeLayout = resolveChromeLayout(spec, options);
+  const effectiveHeight = chromeLayout === "grow" ? height + chrome.topHeight + chrome.bottomHeight : height;
   if (isSparkline) {
-    const total2 = { x: 0, y: 0, width, height };
+    const total2 = { x: 0, y: 0, width, height: effectiveHeight };
     const sparkPad = getSparklinePad(spec);
     const xAxisSpace = userExplicit.xAxis ? 26 : 0;
     const yAxisSpace = userExplicit.yAxis ? 30 : 0;
@@ -19454,7 +19475,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       x: margins2.left,
       y: margins2.top,
       width: Math.max(0, width - margins2.left - margins2.right),
-      height: Math.max(0, height - margins2.top - margins2.bottom)
+      height: Math.max(0, effectiveHeight - margins2.top - margins2.bottom)
     };
     return {
       total: total2,
@@ -19466,7 +19487,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
       effectiveAxisGap: 0
     };
   }
-  const total = { x: 0, y: 0, width, height };
+  const total = { x: 0, y: 0, width, height: effectiveHeight };
   const isRadial = isAxislessMark2(spec.markType);
   const encoding = spec.encoding;
   const xAxisSuppressed = encoding.x?.axis === false;
@@ -19696,10 +19717,11 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     x: margins.left,
     y: margins.top,
     width: Math.max(0, width - margins.left - margins.right),
-    height: Math.max(0, height - margins.top - margins.bottom)
+    height: Math.max(0, effectiveHeight - margins.top - margins.bottom)
   };
   const minDims = getMinChartDims(spec.display);
-  if ((chartArea.width < minDims.width || chartArea.height < minDims.height) && chromeMode !== "hidden") {
+  const chromeEatsPlot = chromeLayout !== "grow" && chrome.topHeight > height * PLOT_SHARE_MAX;
+  if ((chartArea.width < minDims.width || chartArea.height < minDims.height || chromeEatsPlot) && chromeMode !== "hidden") {
     const fallbackMode = chromeMode === "full" ? "compact" : "hidden";
     const fallbackChrome = computeChrome5(
       chromeToInput(spec.chrome),
@@ -19725,7 +19747,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         x: margins.left,
         y: margins.top,
         width: Math.max(0, width - margins.left - margins.right),
-        height: Math.max(0, height - margins.top - margins.bottom)
+        height: Math.max(0, effectiveHeight - margins.top - margins.bottom)
       };
       const fallbackMetricsTopY = topPad + fallbackChrome.topHeight;
       const fallbackMetricsArea = { x: hPad, width: Math.max(0, width - hPad * 2) };
@@ -19742,7 +19764,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
         chartArea = {
           ...chartArea,
           y: margins.top,
-          height: Math.max(0, height - margins.top - margins.bottom)
+          height: Math.max(0, effectiveHeight - margins.top - margins.bottom)
         };
       }
       return {
@@ -19758,7 +19780,8 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
           fallbackMetricsArea
         ) : void 0,
         xAxisHeight,
-        effectiveAxisGap: fallbackEffectiveAxisGap
+        effectiveAxisGap: fallbackEffectiveAxisGap,
+        chromeStripped: true
       };
     }
   }
@@ -19770,7 +19793,7 @@ function computeDimensions(spec, options, legendLayout, theme, strategy, waterma
     chartArea = {
       ...chartArea,
       y: margins.top,
-      height: Math.max(0, height - margins.top - margins.bottom)
+      height: Math.max(0, effectiveHeight - margins.top - margins.bottom)
     };
   }
   return {
@@ -20522,14 +20545,19 @@ function compileSankey(spec, options) {
     watermark
   );
   const padding = theme.spacing.padding;
+  const chromeLayout = resolveChromeLayout(
+    spec,
+    options
+  );
+  const grownHeight = chromeLayout === "grow" ? options.height + chrome.topHeight + chrome.bottomHeight : options.height;
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
     width: options.width - padding * 2,
-    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+    height: chromeLayout === "grow" ? options.height - padding * 2 : options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
-    return emptyLayout4(fullArea, chrome, theme, options, watermark);
+    return emptyLayout4(fullArea, chrome, theme, { ...options, height: grownHeight }, watermark);
   }
   const sourceField = sankeySpec.encoding.source.field;
   const targetField = sankeySpec.encoding.target.field;
@@ -20569,7 +20597,7 @@ function compileSankey(spec, options) {
     height: fullArea.height - legend.bounds.height - legendGap2
   };
   if (area.height <= 0) {
-    return emptyLayout4(area, chrome, theme, options, watermark);
+    return emptyLayout4(area, chrome, theme, { ...options, height: grownHeight }, watermark);
   }
   const labelFontSize = theme.fonts.sizes.small;
   const labelFontWeight = theme.fonts.weights.normal;
@@ -20721,7 +20749,7 @@ function compileSankey(spec, options) {
     theme,
     dimensions: {
       width: options.width,
-      height: options.height
+      height: grownHeight
     },
     animation: resolvedAnimation,
     watermark,
@@ -21540,6 +21568,10 @@ var LEGEND_ENTRY_GAP = 16;
 function clamp(value2, min4, max4) {
   return Math.min(max4, Math.max(min4, value2));
 }
+function growContentHeight(contentHeight, chromeLayout, budgetHeight, chrome) {
+  if (chromeLayout !== "grow") return contentHeight;
+  return Math.max(contentHeight, budgetHeight + chrome.topHeight + chrome.bottomHeight);
+}
 function compileTileMap(spec, options) {
   const sugarWarnings = [];
   const expandedSpec = spec && typeof spec === "object" && !Array.isArray(spec) ? expandSpecSugar(spec, sugarWarnings) : spec;
@@ -21576,22 +21608,44 @@ function compileTileMap(spec, options) {
     watermark
   );
   const padding = getBreakpoint2(options.width) === "compact" ? Math.max(HPAD_COMPACT_MIN4, Math.round(theme.spacing.padding * HPAD_COMPACT_FRACTION4)) : theme.spacing.padding;
+  const chromeLayout = resolveChromeLayout(
+    spec,
+    options
+  );
   const fullArea = {
     x: padding,
     y: padding + chrome.topHeight,
     width: options.width - padding * 2,
-    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
+    height: chromeLayout === "grow" ? options.height - padding * 2 : options.height - chrome.topHeight - chrome.bottomHeight - padding * 2
   };
   if (fullArea.width <= 0 || fullArea.height <= 0) {
     return emptyLayout5(chrome, theme, options, watermark);
   }
   const isCategorical = tilemapSpec.encoding.color !== void 0 || tilemapSpec.colors !== void 0;
   if (isCategorical) {
-    return compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark);
+    return compileCategorical(
+      tilemapSpec,
+      options,
+      theme,
+      chrome,
+      fullArea,
+      isDarkMode,
+      watermark,
+      chromeLayout
+    );
   }
-  return compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark);
+  return compileQuantitative(
+    tilemapSpec,
+    options,
+    theme,
+    chrome,
+    fullArea,
+    isDarkMode,
+    watermark,
+    chromeLayout
+  );
 }
-function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark) {
+function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark, chromeLayout) {
   const stateField = tilemapSpec.encoding.state.field;
   const valueField = tilemapSpec.encoding.value.field;
   const stateValueMap = /* @__PURE__ */ new Map();
@@ -21692,7 +21746,12 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
   };
   const resolvedAnimation = resolveAnimation(tilemapSpec.animation);
   const padding = fullArea.x;
-  const contentHeight = tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding;
+  const contentHeight = growContentHeight(
+    tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding,
+    chromeLayout,
+    options.height,
+    chrome
+  );
   return {
     area: fullArea,
     chrome,
@@ -21709,7 +21768,7 @@ function compileQuantitative(tilemapSpec, options, theme, chrome, fullArea, isDa
     measureText: options.measureText ?? ((text, fontSize) => ({ width: estimateTextWidth23(text, fontSize), height: fontSize }))
   };
 }
-function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark) {
+function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDarkMode, watermark, chromeLayout) {
   const stateField = tilemapSpec.encoding.state.field;
   const colorField = tilemapSpec.encoding.color?.field ?? tilemapSpec.encoding.value.field;
   const stateCategoryMap = /* @__PURE__ */ new Map();
@@ -21828,7 +21887,12 @@ function compileCategorical(tilemapSpec, options, theme, chrome, fullArea, isDar
   };
   const resolvedAnimation = resolveAnimation(tilemapSpec.animation);
   const padding = fullArea.x;
-  const contentHeight = tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding;
+  const contentHeight = growContentHeight(
+    tileGridOffsetY + tilePositions.gridHeight + legendGap2 + legendTotalHeight + chrome.bottomHeight + padding,
+    chromeLayout,
+    options.height,
+    chrome
+  );
   return {
     area: fullArea,
     chrome,
@@ -23213,7 +23277,10 @@ function compileChart(spec, optionsInput) {
     skipY,
     markType: chartSpec.markType,
     totalWidth: options.width,
-    precomputedYTicks: plan.yTickValues.length > 0 ? plan.yTickValues : void 0
+    // If the guardrail stripped chrome, the plan's y-ticks were sized
+    // against the pre-strip (shorter) plot. Drop them so computeAxes
+    // regenerates against the final (taller) chartArea.
+    precomputedYTicks: !dims.chromeStripped && plan.yTickValues.length > 0 ? plan.yTickValues : void 0
   });
   const xAxisExtent = axes.x?.extent ?? 0;
   dims.chrome.bottomAnchorY = chartArea.y + chartArea.height + xAxisExtent;
@@ -23336,7 +23403,10 @@ function compileChart(spec, optionsInput) {
     theme,
     dimensions: {
       width: options.width,
-      height: options.height
+      // In chromeLayout 'grow' mode, computeDimensions grows total.height by the
+      // chrome height so the plot keeps its full budget. In the default
+      // 'subtract' mode total.height === options.height, so this is a no-op.
+      height: dims.total.height
     },
     animation: resolvedAnimation,
     watermark,
@@ -23393,11 +23463,10 @@ function compileFaceted(chartSpec, renderSpec, facetChannel, facetDirection, opt
     plan.xAxisExtent,
     dims.effectiveAxisGap
   );
-  const leftReservation = plan.leftGutter;
   const bottomReservation = plan.xAxisExtent;
   const effectiveColumns = facetDirection === "column" ? facetValues.length : facetChannel.columns;
   const grid = computeFacetGrid(facetValues, effectiveColumns, chartArea, {
-    left: leftReservation,
+    left: 0,
     bottom: bottomReservation
   });
   if (!optionsInput.facetHeightGrown && grid.panels.length > 0 && grid.panels[0].area.height < MIN_PANEL_HEIGHT) {