@opendata-ai/openchart-vanilla 7.9.3 → 7.11.0

package/dist/index.js

@@ -3841,7 +3841,7 @@ function escapeHtml(str) {
 
 // src/mount.ts
 import { isGraphSpec, isLayerSpec } from "@opendata-ai/openchart-core";
-import { compileChart, compileLayer } from "@opendata-ai/openchart-engine";
+import { compileChart, compileLayer, legendGap } from "@opendata-ai/openchart-engine";
 
 // src/interactions/chart-events.ts
 function buildMarkDataMap(layout) {
@@ -6856,6 +6856,7 @@ function buildSingleAxisTweens(svg, prevAxis, nextAxis, orientation, layout, twe
 }
 
 // src/mount.ts
+var FALLBACK_HEIGHT = 400;
 function resolveDarkMode3(mode) {
   if (mode === "force") return true;
   if (mode === "off" || mode === void 0) return false;
@@ -6903,6 +6904,9 @@ function createChart(container, spec, options) {
   let isFirstRender = true;
   let cleanupAnimations = null;
   let pendingResize = false;
+  let isAutoHeight = null;
+  let lastRenderedWidth = null;
+  let lastRenderedSvgHeight = null;
   let transitionHandle = null;
   let transitionSnapshot = null;
   let fontsReloadPending = false;
@@ -6919,8 +6923,7 @@ function createChart(container, spec, options) {
   let fontFamily = resolveEffectiveFont();
   let measureText = createMeasureText(fontFamily);
   let renderGen = 0;
-  function compile() {
-    const { width, height } = getContainerDimensions();
+  function compileAt(width, height) {
     const darkMode = resolveDarkMode3(options?.darkMode);
     const compileOpts = {
       width,
@@ -6935,6 +6938,27 @@ function createChart(container, spec, options) {
     }
     return compileChart(withRuntimeHidden(currentSpec), compileOpts);
   }
+  function verticalOverheads(layout, width) {
+    const topLegendBlock = layout.legend.position === "top" && "entries" in layout.legend && layout.legend.entries.length > 0 ? layout.legend.bounds.height + legendGap(width) : 0;
+    return layout.chrome.topHeight + layout.chrome.bottomHeight + topLegendBlock + (layout.metrics?.height ?? 0);
+  }
+  function compile() {
+    const { width, height } = getContainerDimensions();
+    const growsWithChrome = isAutoHeight === true && !isLayerSpec(currentSpec) && !isGraphSpec(currentSpec) && currentSpec.display !== "sparkline";
+    if (!growsWithChrome) {
+      return compileAt(width, height);
+    }
+    let layout = compileAt(width, height);
+    const overheads = verticalOverheads(layout, width);
+    if (overheads > 0) {
+      layout = compileAt(width, height + overheads);
+      const overheads2 = verticalOverheads(layout, width);
+      if (overheads2 !== overheads) {
+        layout = compileAt(width, height + overheads2);
+      }
+    }
+    return layout;
+  }
   function withRuntimeHidden(spec2) {
     if (runtimeHiddenSeries.size === 0 && runtimeShownSeries.size === 0) return spec2;
     const userHidden = spec2.hiddenSeries ?? [];
@@ -7027,9 +7051,15 @@ function createChart(container, spec, options) {
         height: Math.max(height || 40, 20)
       };
     }
+    if (isAutoHeight === null && (rect.width > 0 || rect.height > 0)) {
+      isAutoHeight = rect.height === 0 && rect.width > 0;
+    }
     return {
       width: Math.max(rect.width || 600, 100),
-      height: Math.max(rect.height || 400, 100)
+      // Latched-auto mounts always compile against the fixed budget: after
+      // the first render the container's measured height is just our own
+      // SVG, so reading it back would re-pin whatever we rendered last.
+      height: isAutoHeight === true ? FALLBACK_HEIGHT : Math.max(rect.height || FALLBACK_HEIGHT, 100)
     };
   }
   function getSpecAnnotations() {
@@ -7273,6 +7303,8 @@ function createChart(container, spec, options) {
       srTable = null;
     }
     currentLayout = compile();
+    lastRenderedWidth = currentLayout.dimensions.width;
+    lastRenderedSvgHeight = currentLayout.dimensions.height;
     const shouldAnimate = isFirstRender && !!currentLayout.animation?.enter;
     const crosshair = !!currentLayout.crosshair;
     svgElement = renderChartSVG(currentLayout, container, {
@@ -7544,7 +7576,17 @@ function createChart(container, spec, options) {
   );
   container.dataset.ocFontsState = pending ? "pending" : "ready";
   if (options?.responsive !== false) {
-    disconnectResize = observeResize(container, () => {
+    disconnectResize = observeResize(container, (width, height) => {
+      if (isAutoHeight === true) {
+        const widthChanged = width !== lastRenderedWidth;
+        const selfInducedHeight = height === lastRenderedSvgHeight;
+        if (!widthChanged && selfInducedHeight) return;
+        if (!selfInducedHeight) {
+          isAutoHeight = null;
+        }
+        resize();
+        return;
+      }
       resize();
     });
   }