@opendata-ai/openchart-engine 7.0.3 → 7.1.0

package/src/layout/dimensions.ts

@@ -37,6 +37,7 @@ import {
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
+  TICK_LABEL_OFFSET,
   TOP_PAD_EXTRA_NARROW,
 } from '@opendata-ai/openchart-core';
 import { format as d3Format } from 'd3-format';
@@ -93,6 +94,16 @@ function chromeToInput(chrome: NormalizedChrome): import('@opendata-ai/openchart
   };
 }
 
+/**
+ * Compute the bottom margin contribution from chrome.
+ * chrome.bottomHeight already includes its own padding when it has content
+ * (watermark, source, byline, or footer). When zero, fall back to the base
+ * padding so the chart area doesn't butt against the container edge.
+ */
+function bottomMargin(bottomHeight: number, padding: number, xAxisHeight: number): number {
+  return (bottomHeight > 0 ? bottomHeight : padding) + xAxisHeight;
+}
+
 /**
  * Scale padding based on the smaller container dimension.
  * At >= 500px, padding is unchanged. At <= 200px, padding is halved (min 4px).
@@ -370,7 +381,7 @@ export function computeDimensions(
   const margins: Margins = {
     top: topPad + chrome.topHeight + tentativeMetricsHeight,
     right: hPad + (isRadial ? hPad : axisMargin),
-    bottom: padding + chrome.bottomHeight + xAxisHeight,
+    bottom: bottomMargin(chrome.bottomHeight, padding, xAxisHeight),
     left: hPad + (isRadial ? hPad : axisMargin),
   };
 
@@ -580,10 +591,53 @@ export function computeDimensions(
   }
 
   // Rotated y-axis label needs extra left margin (rendered at area.x - offset in SVG).
-  // Tighter on compact viewports where horizontal space is scarce.
+  // The renderer computes a dynamic offset that accounts for wide tick labels (e.g.
+  // "$100,000" is ~62px wide and would overlap a fixed 45px offset). We replicate
+  // the same formula here so the reserved space matches what the renderer places.
   const yAxis = encoding.y?.axis as Record<string, unknown> | undefined;
   if (yAxis && (yAxis.title || yAxis.label) && !isRadial) {
-    const axisTitleOffset = getAxisTitleOffset(width);
+    // Estimate the widest y-axis tick label width to mirror the renderer's dynamic offset.
+    const yFieldForTitle = encoding.y?.field;
+    const yAxisFormatForTitle = yAxis?.format as string | undefined;
+    let estTickLabelWidth = 0;
+    if (
+      yFieldForTitle &&
+      (encoding.y?.type === 'quantitative' || encoding.y?.type === 'temporal')
+    ) {
+      let maxAbsValForTitle = 0;
+      for (const row of spec.data) {
+        const v = Number(row[yFieldForTitle]);
+        if (Number.isFinite(v) && Math.abs(v) > maxAbsValForTitle) maxAbsValForTitle = Math.abs(v);
+      }
+      let sampleLabelForTitle: string;
+      if (yAxisFormatForTitle) {
+        try {
+          const fmt = d3Format(yAxisFormatForTitle);
+          sampleLabelForTitle = fmt(maxAbsValForTitle);
+        } catch {
+          sampleLabelForTitle = 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';
+      }
+      const negPrefixForTitle = spec.data.some((r) => Number(r[yFieldForTitle]) < 0) ? '-' : '';
+      estTickLabelWidth = estimateTextWidth(
+        negPrefixForTitle + sampleLabelForTitle,
+        theme.fonts.sizes.axisTick,
+        theme.fonts.weights.normal,
+      );
+    }
+    // Mirror the renderer's dynamic offset formula:
+    //   dynamicOffset = TICK_LABEL_OFFSET(6) + maxTickLabelWidth + 8px gap
+    //   titleOffset = max(dynamicOffset, AXIS_TITLE_OFFSET_COMPACT)
+    const AXIS_TITLE_GAP = 8;
+    const dynamicTitleOffset = TICK_LABEL_OFFSET + estTickLabelWidth + AXIS_TITLE_GAP;
+    const axisTitleOffset = Math.max(dynamicTitleOffset, getAxisTitleOffset(width));
     const halfGlyph = Math.ceil(theme.fonts.sizes.body / 2);
     const rotatedLabelMargin =
       axisTitleOffset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
@@ -655,7 +709,7 @@ export function computeDimensions(
       isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
     const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
-    const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
+    const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
     const bottomDelta = margins.bottom - newBottom;
 
     if (topDelta > 0 || bottomDelta > 0) {

package/src/layout/scales.ts

@@ -667,12 +667,16 @@ export function computeScales(
     // Without this, stacked bars would clip past the chart area.
     let xData = data;
     let xChannel = encoding.x;
-    const xStackDisabled = encoding.x.stack === null || encoding.x.stack === false;
+    const xStackEnabled =
+      encoding.x.stack === true ||
+      encoding.x.stack === 'zero' ||
+      encoding.x.stack === 'normalize' ||
+      encoding.x.stack === 'center';
     if (
       spec.markType === 'bar' &&
       encoding.color &&
       encoding.x.type === 'quantitative' &&
-      !xStackDisabled
+      xStackEnabled
     ) {
       if (encoding.x.stack === 'normalize') {
         // Normalize: domain is [0, 1]
@@ -738,9 +742,7 @@ export function computeScales(
       spec.markType === 'bar' &&
       (encoding.x?.type === 'nominal' || encoding.x?.type === 'ordinal') &&
       encoding.y.type === 'quantitative';
-    // Bar default is stacked, so undefined counts as stacked. Area default is
-    // overlap (v6), so the stacked-domain expansion only applies when the user
-    // explicitly opts into stacking.
+    // Both bar and area require explicit opt-in for stacked domain expansion.
     const stackProp = encoding.y.stack;
     const isExplicitlyStacked =
       stackProp === true ||
@@ -748,7 +750,7 @@ export function computeScales(
       stackProp === 'normalize' ||
       stackProp === 'center';
     const isAreaStacked = spec.markType === 'area' && isExplicitlyStacked;
-    const isBarStacked = isVerticalBar && stackProp !== null && stackProp !== false;
+    const isBarStacked = isVerticalBar && isExplicitlyStacked;
 
     // Sparkline tightening: drop the default `zero: true` baseline so the
     // y-domain hugs the actual data range. Without this, a series with