@opendata-ai/openchart-vanilla 2.9.1 → 2.11.0

package/dist/index.d.ts

@@ -326,7 +326,8 @@ declare function renderTable(layout: TableLayout, container: HTMLElement): HTMLE
  * Tooltip manager: creates and positions a floating tooltip element.
  *
  * Shows tooltip content near the mouse/touch position with viewport
- * edge avoidance. Touch support via tap-to-show, tap-outside-to-hide.
+ * edge avoidance via @floating-ui/dom. Touch support via tap-to-show,
+ * tap-outside-to-hide.
  */
 
 interface TooltipManager {

package/dist/index.js

@@ -640,10 +640,13 @@ var ZoomTransform = 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, canvasW, canvasH, padding = 40) {
     if (nodes.length === 0) {
-      return _ZoomTransform.identity();
+      return { transform: _ZoomTransform.identity(), contentHeight: canvasH };
     }
     let minX = Infinity;
     let minY = Infinity;
@@ -659,7 +662,10 @@ var ZoomTransform = class _ZoomTransform {
     const graphW = maxX - minX;
     const graphH = maxY - minY;
     if (graphW === 0 && graphH === 0) {
-      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;
     const availH = canvasH - padding * 2;
@@ -667,7 +673,11 @@ var ZoomTransform = class _ZoomTransform {
     const cx = (minX + maxX) / 2;
     const tx = canvasW / 2 - cx * k;
     const ty = padding - minY * k;
-    return new _ZoomTransform(tx, ty, k);
+    const contentHeight = graphH * k + padding * 2;
+    return {
+      transform: new _ZoomTransform(tx, ty, k),
+      contentHeight
+    };
   }
   /** Identity transform (no pan, no zoom). */
   static identity() {
@@ -2373,6 +2383,7 @@ function observeResize(container, callback) {
 }
 
 // src/tooltip.ts
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
 var TOOLTIP_OFFSET = 12;
 function createTooltipManager(container) {
   const tooltip = document.createElement("div");
@@ -2380,6 +2391,8 @@ function createTooltipManager(container) {
   tooltip.setAttribute("role", "tooltip");
   container.style.position = container.style.position || "relative";
   container.appendChild(tooltip);
+  let lastContentKey = "";
+  let currentPositionId = 0;
   const handleDocumentTouch = (e) => {
     if (!container.contains(e.target)) {
       hide();
@@ -2387,45 +2400,60 @@ function createTooltipManager(container) {
   };
   document.addEventListener("touchstart", handleDocumentTouch);
   function show(content, x3, y3) {
-    let html = "";
-    if (content.title) {
-      const titleColor = content.fields.find((f) => f.color)?.color;
-      html += '<div class="viz-tooltip-header">';
-      if (titleColor) {
-        html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+    const contentKey = `${content.title}|${content.fields.length}|${content.fields[0]?.value}|${content.fields[content.fields.length - 1]?.value}`;
+    if (contentKey !== lastContentKey) {
+      lastContentKey = contentKey;
+      let html = "";
+      if (content.title) {
+        const titleColor = content.fields.find((f) => f.color)?.color;
+        html += '<div class="viz-tooltip-header">';
+        if (titleColor) {
+          html += `<span class="viz-tooltip-dot" style="background:${esc(titleColor)}"></span>`;
+        }
+        html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
+        html += "</div>";
       }
-      html += `<span class="viz-tooltip-title">${esc(content.title)}</span>`;
-      html += "</div>";
-    }
-    if (content.fields.length > 0) {
-      html += '<div class="viz-tooltip-body">';
-      for (const field of content.fields) {
-        html += '<div class="viz-tooltip-row">';
-        html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
-        html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+      if (content.fields.length > 0) {
+        html += '<div class="viz-tooltip-body">';
+        for (const field of content.fields) {
+          html += '<div class="viz-tooltip-row">';
+          html += `<span class="viz-tooltip-label">${esc(field.label)}</span>`;
+          html += `<span class="viz-tooltip-value">${esc(field.value)}</span>`;
+          html += "</div>";
+        }
         html += "</div>";
       }
-      html += "</div>";
+      tooltip.innerHTML = html;
     }
-    tooltip.innerHTML = html;
     tooltip.style.display = "block";
-    const containerRect = container.getBoundingClientRect();
-    const tooltipRect = tooltip.getBoundingClientRect();
-    let left = x3 + TOOLTIP_OFFSET;
-    let top = y3 + TOOLTIP_OFFSET;
-    if (left + tooltipRect.width > containerRect.width) {
-      left = x3 - tooltipRect.width - TOOLTIP_OFFSET;
-    }
-    if (top + tooltipRect.height > containerRect.height) {
-      top = y3 - tooltipRect.height - TOOLTIP_OFFSET;
-    }
-    left = Math.max(0, Math.min(left, containerRect.width - tooltipRect.width));
-    top = Math.max(0, Math.min(top, containerRect.height - tooltipRect.height));
-    tooltip.style.left = `${left}px`;
-    tooltip.style.top = `${top}px`;
+    const positionId = ++currentPositionId;
+    const virtualRef = {
+      getBoundingClientRect() {
+        const rect = container.getBoundingClientRect();
+        return {
+          x: rect.left + x3,
+          y: rect.top + y3,
+          width: 0,
+          height: 0,
+          top: rect.top + y3,
+          left: rect.left + x3,
+          right: rect.left + x3,
+          bottom: rect.top + y3
+        };
+      }
+    };
+    computePosition(virtualRef, tooltip, {
+      placement: "bottom-start",
+      middleware: [offset(TOOLTIP_OFFSET), flip(), shift({ padding: 5 })]
+    }).then(({ x: fx, y: fy }) => {
+      if (positionId !== currentPositionId) return;
+      tooltip.style.left = `${fx}px`;
+      tooltip.style.top = `${fy}px`;
+    });
   }
   function hide() {
     tooltip.style.display = "none";
+    lastContentKey = "";
   }
   function destroy() {
     document.removeEventListener("touchstart", handleDocumentTouch);
@@ -2436,7 +2464,7 @@ function createTooltipManager(container) {
   return { show, hide, destroy };
 }
 function esc(str) {
-  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
 }
 
 // src/graph-mount.ts
@@ -2467,6 +2495,8 @@ function createGraph(container, spec, options) {
   let positionedNodes = [];
   let positionedEdges = [];
   let adjacencyMap = /* @__PURE__ */ new Map();
+  let nodeDataMap = /* @__PURE__ */ new Map();
+  let edgeDataMap = /* @__PURE__ */ new Map();
   let hoveredNodeId = null;
   let hoveredEdgeId = null;
   let selectedNodeIds = /* @__PURE__ */ new Set();
@@ -2474,6 +2504,7 @@ function createGraph(container, spec, options) {
   let needsRender = false;
   let isGesturing = false;
   let gestureTimeout = null;
+  let lastEdgeHitTime = 0;
   function markGesture() {
     isGesturing = true;
     if (gestureTimeout !== null) clearTimeout(gestureTimeout);
@@ -2502,6 +2533,10 @@ function createGraph(container, spec, options) {
     };
     return compileGraph(currentSpec, compileOpts);
   }
+  function buildDataMaps() {
+    nodeDataMap = new Map(compilation.nodes.map((n) => [n.id, n.data ?? {}]));
+    edgeDataMap = new Map(compilation.edges.map((e) => [`${e.source}->${e.target}`, e.data ?? {}]));
+  }
   function buildAdjacencyMap(edges) {
     const map = /* @__PURE__ */ new Map();
     for (const edge of edges) {
@@ -2526,8 +2561,7 @@ function createGraph(container, spec, options) {
     }));
   }
   function nodeDataById(nodeId) {
-    const node = compilation.nodes.find((n) => n.id === nodeId);
-    return node?.data ?? {};
+    return nodeDataMap.get(nodeId) ?? {};
   }
   function pointToSegmentDist(px, py, ax, ay, bx, by) {
     const dx = bx - ax;
@@ -2557,9 +2591,7 @@ function createGraph(container, spec, options) {
     return bestEdgeId;
   }
   function edgeDataById(edgeId) {
-    const [source, target] = edgeId.split("->");
-    const edge = compilation.edges.find((e) => e.source === source && e.target === target);
-    return edge?.data ?? null;
+    return edgeDataMap.get(edgeId) ?? null;
   }
   function createDOM() {
     const { width, height } = getContainerDimensions();
@@ -2677,9 +2709,9 @@ function createGraph(container, spec, options) {
       scheduleRender();
     });
     simulation.onSettled(() => {
-      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 } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
         interactionManager.setTransform(fitTransform);
         needsRender = true;
         scheduleRender();
@@ -2757,6 +2789,18 @@ function createGraph(container, spec, options) {
         }
       },
       onBackgroundHover(graphX, graphY, screenX, screenY) {
+        const now2 = performance.now();
+        if (now2 - lastEdgeHitTime < 32) {
+          if (hoveredEdgeId) {
+            hoveredEdgeId = null;
+            needsRender = true;
+            scheduleRender();
+            options?.onEdgeHover?.(null);
+            tooltipManager?.hide();
+          }
+          return;
+        }
+        lastEdgeHitTime = now2;
         const transform = interactionManager?.getTransform();
         const threshold = 5 / (transform?.k ?? 1);
         const edgeId = hitTestEdge(graphX, graphY, threshold);
@@ -2858,7 +2902,7 @@ function createGraph(container, spec, options) {
   function zoomToFit() {
     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();
@@ -2901,6 +2945,7 @@ function createGraph(container, spec, options) {
     teardownSubsystems();
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
     renderChrome2();
     renderLegend2();
     initSimulation();
@@ -2919,6 +2964,7 @@ function createGraph(container, spec, options) {
     }
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
     positionedNodes = compilation.nodes.map((node) => {
       const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
       return { ...node, x: pos.x, y: pos.y };
@@ -2981,6 +3027,7 @@ function createGraph(container, spec, options) {
   try {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
     createDOM();
     initSimulation();
     initInteraction();
@@ -3675,18 +3722,36 @@ function renderLegend(parent, legend) {
   let offsetY = legend.bounds.y;
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
+    if (isHorizontal && i > 0) {
+      const labelWidth = estimateTextWidth(
+        entry.label,
+        legend.labelStyle.fontSize,
+        legend.labelStyle.fontWeight
+      );
+      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+      if (offsetX + entryWidth > legend.bounds.x + legend.bounds.width) {
+        offsetX = legend.bounds.x;
+        offsetY += legend.swatchSize + 6;
+      }
+    }
     const entryG = createSVGElement("g");
     entryG.setAttribute("class", "viz-legend-entry");
     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.active === false) {
-      entryG.setAttribute("opacity", "0.3");
+    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");
+      if (entry.active === false) {
+        entryG.setAttribute("opacity", "0.3");
+      }
     }
     if (entry.shape === "circle") {
       const circle = createSVGElement("circle");
@@ -3746,10 +3811,6 @@ function renderLegend(parent, legend) {
       );
       const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
       offsetX += entryWidth;
-      if (offsetX > legend.bounds.x + legend.bounds.width && i < legend.entries.length - 1) {
-        offsetX = legend.bounds.x;
-        offsetY += legend.swatchSize + 6;
-      }
     } else {
       offsetY += legend.swatchSize + legend.entryGap;
     }
@@ -4538,6 +4599,7 @@ function wireLegendInteraction(svg, _layout, onLegendToggle, onEdit) {
   const cleanups = [];
   const hiddenSeries = /* @__PURE__ */ new Set();
   for (const entry of legendEntries) {
+    if (entry.getAttribute("data-legend-overflow") === "true") continue;
     const handleClick = () => {
       const label = entry.getAttribute("data-legend-label");
       if (!label) return;
@@ -4711,6 +4773,7 @@ function createChart(container, spec, options) {
   let destroyed = false;
   let isDragging = false;
   let pendingRender = false;
+  let resizeTimer = null;
   const measureText = createMeasureText();
   function compile() {
     const { width, height } = getContainerDimensions();
@@ -4869,6 +4932,10 @@ function createChart(container, spec, options) {
   function destroy() {
     if (destroyed) return;
     destroyed = true;
+    if (resizeTimer !== null) {
+      clearTimeout(resizeTimer);
+      resizeTimer = null;
+    }
     if (cleanupTooltipEvents) {
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
@@ -4915,7 +4982,11 @@ function createChart(container, spec, options) {
   render();
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
-      resize();
+      if (resizeTimer !== null) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        resizeTimer = null;
+        resize();
+      }, 100);
     });
   }
   return {