@opendata-ai/openchart-vanilla 2.9.1 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -49,8 +49,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "2.9.1",
-    "@opendata-ai/openchart-engine": "2.9.1",
+    "@opendata-ai/openchart-core": "2.10.0",
+    "@opendata-ai/openchart-engine": "2.10.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/graph/__tests__/zoom.test.ts

@@ -141,7 +141,7 @@ describe('ZoomTransform', () => {
 
   describe('fitBounds', () => {
     it('returns identity for empty node array', () => {
-      const t = ZoomTransform.fitBounds([], 800, 600);
+      const { transform: t } = ZoomTransform.fitBounds([], 800, 600);
       expect(t.x).toBe(0);
       expect(t.y).toBe(0);
       expect(t.k).toBe(1);
@@ -149,7 +149,7 @@ describe('ZoomTransform', () => {
 
     it('centers a single node', () => {
       const nodes = [makeNode('a', 0, 0)];
-      const t = ZoomTransform.fitBounds(nodes, 800, 600, 40);
+      const { transform: t } = ZoomTransform.fitBounds(nodes, 800, 600, 40);
       // Single node at origin should be centered
       // Transform should put graph origin at screen center
       const screen = t.graphToScreen(0, 0);
@@ -159,7 +159,7 @@ describe('ZoomTransform', () => {
 
     it('fits a spread of nodes within the canvas', () => {
       const nodes = [makeNode('a', -200, -100), makeNode('b', 200, 100)];
-      const t = ZoomTransform.fitBounds(nodes, 800, 600, 40);
+      const { transform: t } = ZoomTransform.fitBounds(nodes, 800, 600, 40);
 
       // Both nodes should map to within the canvas bounds (with padding)
       const sa = t.graphToScreen(-200, -100);
@@ -174,10 +174,18 @@ describe('ZoomTransform', () => {
     it('produces correct scale for known graph bounds', () => {
       // Graph spans 400x200, canvas 800x600, padding 0
       const nodes = [makeNode('a', 0, 0, 0), makeNode('b', 400, 200, 0)];
-      const t = ZoomTransform.fitBounds(nodes, 800, 600, 0);
+      const { transform: t } = ZoomTransform.fitBounds(nodes, 800, 600, 0);
       // Scale should be min(800/400, 600/200) = min(2, 3) = 2
       expect(t.k).toBeCloseTo(2);
     });
+
+    it('returns contentHeight matching scaled graph bounds plus padding', () => {
+      const nodes = [makeNode('a', 0, 0, 0), makeNode('b', 400, 200, 0)];
+      const { contentHeight } = ZoomTransform.fitBounds(nodes, 800, 600, 40);
+      // k = min(720/400, 520/200) = min(1.8, 2.6) = 1.8
+      // contentHeight = 200 * 1.8 + 80 = 440
+      expect(contentHeight).toBeCloseTo(440);
+    });
   });
 
   // -------------------------------------------------------------------------

package/src/graph/zoom.ts

@@ -52,15 +52,18 @@ export class ZoomTransform {
   /**
    * Compute a transform that fits all nodes within the given canvas
    * dimensions with the specified padding.
+   *
+   * Returns the transform and the ideal content height (in screen pixels)
+   * so callers can shrink the canvas to eliminate dead space.
    */
   static fitBounds(
     nodes: PositionedNode[],
     canvasW: number,
     canvasH: number,
     padding: number = 40,
-  ): ZoomTransform {
+  ): { transform: ZoomTransform; contentHeight: number } {
     if (nodes.length === 0) {
-      return ZoomTransform.identity();
+      return { transform: ZoomTransform.identity(), contentHeight: canvasH };
     }
 
     let minX = Infinity;
@@ -81,7 +84,10 @@ export class ZoomTransform {
 
     if (graphW === 0 && graphH === 0) {
       // All nodes at the same point; just center
-      return new ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1);
+      return {
+        transform: new ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1),
+        contentHeight: padding * 2,
+      };
     }
 
     const availW = canvasW - padding * 2;
@@ -95,7 +101,13 @@ export class ZoomTransform {
     const tx = canvasW / 2 - cx * k;
     const ty = padding - minY * k;
 
-    return new ZoomTransform(tx, ty, k);
+    // Content height = scaled graph extent + top and bottom padding
+    const contentHeight = graphH * k + padding * 2;
+
+    return {
+      transform: new ZoomTransform(tx, ty, k),
+      contentHeight,
+    };
   }
 
   /** Identity transform (no pan, no zoom). */

package/src/graph-mount.ts

@@ -121,6 +121,7 @@ export function createGraph(
   let needsRender = false;
   let isGesturing = false;
   let gestureTimeout: ReturnType<typeof setTimeout> | null = null;
+  let selfResizing = false;
 
   // ---------------------------------------------------------------------------
   // Helpers
@@ -410,10 +411,38 @@ export function createGraph(
 
     simulation.onSettled(() => {
       // One final fit after simulation settles
-      if (canvas && positionedNodes.length > 0 && interactionManager) {
+      if (canvas && positionedNodes.length > 0 && interactionManager && renderer) {
         const { width: cw, height: ch } = getCanvasDimensions();
-        const fitTransform = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+        const { transform: fitTransform, contentHeight } = ZoomTransform.fitBounds(
+          positionedNodes,
+          cw,
+          ch,
+        );
         interactionManager.setTransform(fitTransform);
+
+        // Shrink canvas + container to actual content height to eliminate dead space.
+        // The chrome (title/subtitle) sits above the canvas, so total height includes both.
+        const chromeH = chromeEl?.getBoundingClientRect().height || 0;
+        const totalContentHeight = Math.ceil(contentHeight) + chromeH;
+        const containerH = container.getBoundingClientRect().height;
+
+        if (totalContentHeight < containerH) {
+          selfResizing = true;
+          const targetCanvasH = Math.ceil(contentHeight);
+          renderer.resize(cw, targetCanvasH);
+          // Re-fit with the new canvas height
+          const refit = ZoomTransform.fitBounds(positionedNodes, cw, targetCanvasH);
+          interactionManager.setTransform(refit.transform);
+          // Collapse the container to content height instead of filling the parent.
+          // This eliminates dead space below compact graphs in tall containers.
+          container.style.height = 'fit-content';
+          // Hold selfResizing long enough for the ResizeObserver (debounced ~16ms)
+          // to see it and skip the doResize that would clear our height override.
+          setTimeout(() => {
+            selfResizing = false;
+          }, 100);
+        }
+
         needsRender = true;
         scheduleRender();
       }
@@ -635,7 +664,7 @@ export function createGraph(
   function zoomToFit(): void {
     if (destroyed || !interactionManager || positionedNodes.length === 0) return;
     const { width: cw, height: ch } = getCanvasDimensions();
-    const fitTransform = ZoomTransform.fitBounds(positionedNodes, cw, ch);
+    const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
     interactionManager.setTransform(fitTransform);
     needsRender = true;
     scheduleRender();
@@ -670,7 +699,9 @@ export function createGraph(
   }
 
   function doResize(): void {
-    if (destroyed || !canvas || !renderer || !wrapper) return;
+    if (destroyed || !canvas || !renderer || !wrapper || selfResizing) return;
+    // Clear any content-fit height override so we read the parent's actual size
+    container.style.height = '';
     const { width, height } = getContainerDimensions();
     const chromeHeight = chromeEl?.getBoundingClientRect().height || 0;
     const canvasHeight = Math.max(height - chromeHeight, 200);

package/src/mount.ts

@@ -1115,6 +1115,9 @@ function wireLegendInteraction(
   const hiddenSeries = new Set<string>();
 
   for (const entry of legendEntries) {
+    // Skip overflow indicator entries ("+N more")
+    if (entry.getAttribute('data-legend-overflow') === 'true') continue;
+
     const handleClick = () => {
       const label = entry.getAttribute('data-legend-label');
       if (!label) return;

package/src/svg-renderer.ts

@@ -873,15 +873,21 @@ function renderLegend(parent: SVGElement, legend: LegendLayout): void {
     entryG.setAttribute('role', 'listitem');
     entryG.setAttribute('data-legend-index', String(i));
     entryG.setAttribute('data-legend-label', entry.label);
-    entryG.setAttribute(
-      'aria-label',
-      `${entry.label}: ${entry.active !== false ? 'visible' : 'hidden'}`,
-    );
-    entryG.setAttribute('style', 'cursor: pointer');
+    if (entry.overflow) {
+      entryG.setAttribute('data-legend-overflow', 'true');
+      entryG.setAttribute('aria-label', entry.label);
+      entryG.setAttribute('opacity', '0.5');
+    } else {
+      entryG.setAttribute(
+        'aria-label',
+        `${entry.label}: ${entry.active !== false ? 'visible' : 'hidden'}`,
+      );
+      entryG.setAttribute('style', 'cursor: pointer');
 
-    // Apply dimming for inactive entries
-    if (entry.active === false) {
-      entryG.setAttribute('opacity', '0.3');
+      // Apply dimming for inactive entries
+      if (entry.active === false) {
+        entryG.setAttribute('opacity', '0.3');
+      }
     }
 
     // Swatch