@opendata-ai/openchart-vanilla 2.1.0 → 2.2.1

package/dist/index.d.ts

@@ -27,6 +27,22 @@ interface PNGExportOptions {
  * @returns A Promise resolving to the PNG Blob.
  */
 declare function exportPNG(svgElement: SVGElement, options?: PNGExportOptions): Promise<Blob>;
+interface JPGExportOptions extends PNGExportOptions {
+    /** JPEG quality from 0 to 1. Defaults to 0.92. */
+    quality?: number;
+}
+/**
+ * Render an SVG element to a JPEG Blob via a canvas.
+ *
+ * Same pipeline as exportPNG but outputs JPEG with configurable quality.
+ * The canvas is filled with white before drawing to avoid transparent
+ * backgrounds rendering as black in JPEG format.
+ *
+ * @param svgElement - The rendered SVG element.
+ * @param options - Optional DPI scaling and JPEG quality.
+ * @returns A Promise resolving to the JPEG Blob.
+ */
+declare function exportJPG(svgElement: SVGElement, options?: JPGExportOptions): Promise<Blob>;
 /**
  * Convert an array of data objects to a CSV string.
  *
@@ -72,12 +88,20 @@ interface GraphMountOptions {
     theme?: ThemeConfig;
     darkMode?: DarkMode;
     responsive?: boolean;
+    /** Show the built-in tooltip on node/edge hover. Defaults to true. */
+    tooltip?: boolean;
+    /** Show the built-in legend. Defaults to true. */
+    legend?: boolean;
     onNodeClick?: (node: Record<string, unknown>) => void;
     onNodeDoubleClick?: (node: Record<string, unknown>) => void;
+    onNodeHover?: (node: Record<string, unknown> | null) => void;
+    onEdgeHover?: (edge: Record<string, unknown> | null) => void;
     onSelectionChange?: (nodeIds: string[]) => void;
 }
 interface GraphInstance {
     update(spec: GraphSpec): void;
+    /** Re-compile encoding/legend/chrome without restarting the simulation. Preserves node positions. */
+    updateVisuals(spec: GraphSpec): void;
     search(query: string): void;
     clearSearch(): void;
     zoomToFit(): void;
@@ -116,7 +140,7 @@ interface MountOptions extends ChartEventHandlers {
     /** Enable responsive resizing. Defaults to true. */
     responsive?: boolean;
 }
-interface ExportOptions extends PNGExportOptions {
+interface ExportOptions extends JPGExportOptions {
 }
 interface ChartInstance {
     /** Re-compile and re-render with a new spec. */
@@ -126,8 +150,9 @@ interface ChartInstance {
     /** Export the chart. */
     export(format: 'svg'): string;
     export(format: 'png', options?: ExportOptions): Promise<Blob>;
+    export(format: 'jpg', options?: ExportOptions): Promise<Blob>;
     export(format: 'csv'): string;
-    export(format: 'svg' | 'png' | 'csv', options?: ExportOptions): string | Promise<Blob>;
+    export(format: 'svg' | 'png' | 'jpg' | 'csv', options?: ExportOptions): string | Promise<Blob>;
     /** Remove all DOM elements and disconnect observers. */
     destroy(): void;
     /** The current compiled layout (for hooks / debugging). */
@@ -324,4 +349,4 @@ interface TooltipManager {
  */
 declare function createTooltipManager(container: HTMLElement): TooltipManager;
 
-export { type ChartInstance, type ExportOptions, type GraphInstance, type GraphMountOptions, type KeyboardNavOptions, type MountOptions, type PNGExportOptions, type TableInstance, type TableMountOptions, type TableState, type TooltipManager, attachKeyboardNav, createChart, createGraph, createSimulationWorker, createTable, createTooltipManager, exportCSV, exportPNG, exportSVG, observeResize, registerMarkRenderer, renderBarCell, renderCategoryCell, renderCell, renderChartSVG, renderFlagCell, renderHeatmapCell, renderImageCell, renderSparklineCell, renderTable, renderTextCell };
+export { type ChartInstance, type ExportOptions, type GraphInstance, type GraphMountOptions, type JPGExportOptions, type KeyboardNavOptions, type MountOptions, type PNGExportOptions, type TableInstance, type TableMountOptions, type TableState, type TooltipManager, attachKeyboardNav, createChart, createGraph, createSimulationWorker, createTable, createTooltipManager, exportCSV, exportJPG, exportPNG, exportSVG, observeResize, registerMarkRenderer, renderBarCell, renderCategoryCell, renderCell, renderChartSVG, renderFlagCell, renderHeatmapCell, renderImageCell, renderSparklineCell, renderTable, renderTextCell };

package/dist/index.js

@@ -38,6 +38,48 @@ async function exportPNG(svgElement, options) {
     img.src = url;
   });
 }
+async function exportJPG(svgElement, options) {
+  const dpi = options?.dpi ?? 2;
+  const quality = options?.quality ?? 0.92;
+  const svgString = exportSVG(svgElement);
+  const width = parseFloat(svgElement.getAttribute("width") || "600");
+  const height = parseFloat(svgElement.getAttribute("height") || "400");
+  const canvas = document.createElement("canvas");
+  canvas.width = width * dpi;
+  canvas.height = height * dpi;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Canvas 2D context not available");
+  }
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.scale(dpi, dpi);
+  const img = new Image();
+  const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  return new Promise((resolve, reject) => {
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(url);
+      canvas.toBlob(
+        (result) => {
+          if (result) {
+            resolve(result);
+          } else {
+            reject(new Error("Canvas toBlob returned null"));
+          }
+        },
+        "image/jpeg",
+        quality
+      );
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to load SVG as image"));
+    };
+    img.src = url;
+  });
+}
 function exportCSV(data) {
   if (data.length === 0) return "";
   const headers = Object.keys(data[0]);
@@ -65,15 +107,15 @@ function createSimulationWorker() {
 import { compileGraph } from "@opendata-ai/openchart-engine";
 
 // src/graph/canvas-renderer.ts
-var LABEL_FONT_MIN = 10;
-var LABEL_FONT_MAX = 14;
+var LABEL_FONT_MIN = 8;
+var LABEL_FONT_MAX = 12;
 var EDGE_ALPHA_DEFAULT = 0.35;
 var EDGE_ALPHA_CONNECTED = 1;
 var EDGE_ALPHA_DIMMED = 0.05;
 var SEARCH_NON_MATCH_ALPHA = 0.15;
 var GLOW_NODE_THRESHOLD = 2e3;
-var GLOW_RADIUS_MULTIPLIER = 1.5;
-var GLOW_ALPHA = 0.2;
+var GLOW_RADIUS_MULTIPLIER = 1.3;
+var GLOW_ALPHA = 0.15;
 var CULL_MARGIN = 50;
 var TWO_PI = Math.PI * 2;
 var MIN_SCREEN_RADIUS = 2.5;
@@ -132,6 +174,7 @@ var GraphCanvasRenderer = class {
       edges,
       transform,
       hoveredNodeId,
+      hoveredEdgeId,
       selectedNodeIds,
       adjacencyMap,
       theme,
@@ -160,8 +203,10 @@ var GraphCanvasRenderer = class {
     ctx.save();
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, cssWidth, cssHeight);
-    ctx.fillStyle = theme.colors.background;
-    ctx.fillRect(0, 0, cssWidth, cssHeight);
+    if (theme.colors.background !== "transparent") {
+      ctx.fillStyle = theme.colors.background;
+      ctx.fillRect(0, 0, cssWidth, cssHeight);
+    }
     ctx.translate(transform.x, transform.y);
     ctx.scale(transform.k, transform.k);
     this.drawEdgesBatched(
@@ -169,7 +214,8 @@ var GraphCanvasRenderer = class {
       visibleEdges,
       hasActiveNode,
       connectedNodeIds,
-      isGesturing ? null : searchMatches
+      isGesturing ? null : searchMatches,
+      hoveredEdgeId
     );
     this.drawNodesBatched(
       ctx,
@@ -218,11 +264,17 @@ var GraphCanvasRenderer = class {
   // -------------------------------------------------------------------------
   // Batched edge drawing
   // -------------------------------------------------------------------------
-  drawEdgesBatched(ctx, edges, hasActiveNode, connectedNodeIds, searchMatches) {
+  drawEdgesBatched(ctx, edges, hasActiveNode, connectedNodeIds, searchMatches, hoveredEdgeId) {
     const dimmedEdges = [];
     const defaultEdges = [];
     const connectedEdges = [];
+    let hoveredEdge = null;
     for (const edge of edges) {
+      const edgeId = `${edge.source}->${edge.target}`;
+      if (edgeId === hoveredEdgeId) {
+        hoveredEdge = edge;
+        continue;
+      }
       const isConnected = hasActiveNode && connectedNodeIds.has(edge.source) && connectedNodeIds.has(edge.target);
       const isDimmed = hasActiveNode && !isConnected;
       if (isConnected) {
@@ -236,6 +288,19 @@ var GraphCanvasRenderer = class {
     this.drawEdgeGroupBatched(ctx, dimmedEdges, EDGE_ALPHA_DIMMED, searchMatches);
     this.drawEdgeGroupBatched(ctx, defaultEdges, EDGE_ALPHA_DEFAULT, searchMatches);
     this.drawEdgeGroupBatched(ctx, connectedEdges, EDGE_ALPHA_CONNECTED, searchMatches);
+    if (hoveredEdge) {
+      const dash = DASH_PATTERNS[hoveredEdge.style] ?? DASH_PATTERNS.solid;
+      ctx.setLineDash(dash);
+      ctx.strokeStyle = hoveredEdge.stroke;
+      ctx.lineWidth = hoveredEdge.strokeWidth * 2;
+      ctx.globalAlpha = EDGE_ALPHA_CONNECTED;
+      ctx.beginPath();
+      ctx.moveTo(hoveredEdge.sourceX, hoveredEdge.sourceY);
+      ctx.lineTo(hoveredEdge.targetX, hoveredEdge.targetY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.globalAlpha = 1;
+    }
   }
   /**
    * Draw a group of edges at a given alpha, batched by (stroke, strokeWidth, style).
@@ -479,7 +544,7 @@ var GraphCanvasRenderer = class {
   // Labels (drawn individually, skipped during gestures)
   // -------------------------------------------------------------------------
   drawLabels(ctx, nodes, threshold, hoveredNodeId, selectedNodeIds, searchMatches, zoom, theme) {
-    const rawSize = 12 / zoom;
+    const rawSize = 10 / zoom;
     const fontSize = Math.max(LABEL_FONT_MIN, Math.min(LABEL_FONT_MAX, rawSize));
     ctx.font = `${fontSize}px ${theme.fonts.family}`;
     ctx.textAlign = "center";
@@ -493,7 +558,7 @@ var GraphCanvasRenderer = class {
       if (!forced && node.labelPriority < threshold) continue;
       ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
       const labelY = node.y + node.radius + 3;
-      ctx.strokeStyle = theme.colors.background;
+      ctx.strokeStyle = theme.colors.background === "transparent" ? "rgba(0, 0, 0, 0.7)" : theme.colors.background;
       ctx.lineWidth = 3;
       ctx.lineJoin = "round";
       ctx.strokeText(node.label, node.x, labelY);
@@ -718,6 +783,10 @@ var GraphInteractionManager = class {
     }
     const hitId = this.hitTest(x, y);
     this.callbacks.onHoverChange(hitId);
+    if (!hitId) {
+      const graph = this.transform.screenToGraph(x, y);
+      this.callbacks.onBackgroundHover?.(graph.x, graph.y, x, y);
+    }
     this.canvas.style.cursor = hitId ? "pointer" : "default";
   }
   onMouseUp(e) {
@@ -1216,13 +1285,18 @@ var SimulationManager = class _SimulationManager {
       community: n.community
     }));
     this.syncNodeMap = new Map(this.syncNodes.map((n) => [n.id, n]));
-    this.syncSim = forceSimulation(this.syncNodes).force(
-      "link",
-      forceLink(edges.map((e) => ({ ...e }))).id((d) => d.id).distance(config.linkDistance)
-    ).force("charge", forceManyBody().strength(config.chargeStrength)).force("center", forceCenter(0, 0)).force(
+    const linkForce = forceLink(edges.map((e) => ({ ...e }))).id((d) => d.id).distance(config.linkDistance);
+    if (config.linkStrength != null) {
+      linkForce.strength(config.linkStrength);
+    }
+    const padding = config.collisionPadding ?? 2;
+    this.syncSim = forceSimulation(this.syncNodes).force("link", linkForce).force("charge", forceManyBody().strength(config.chargeStrength)).force(
       "collide",
-      forceCollide().radius((d) => d.radius + 1)
+      forceCollide().radius((d) => d.radius + padding)
     ).force("gravityX", forceX(0).strength(0.05)).force("gravityY", forceY(0).strength(0.05)).alphaDecay(config.alphaDecay).velocityDecay(config.velocityDecay).stop();
+    if (config.centerForce !== false) {
+      this.syncSim.force("center", forceCenter(0, 0));
+    }
     if (config.clustering) {
       const clusterFn = forceCluster(this.syncNodes, config.clustering.strength);
       this.syncSim.force("cluster", clusterFn);
@@ -1467,6 +1541,7 @@ function createGraph(container, spec, options) {
   let positionedEdges = [];
   let adjacencyMap = /* @__PURE__ */ new Map();
   let hoveredNodeId = null;
+  let hoveredEdgeId = null;
   let selectedNodeIds = /* @__PURE__ */ new Set();
   let animFrameId = null;
   let needsRender = false;
@@ -1527,6 +1602,38 @@ function createGraph(container, spec, options) {
     const node = compilation.nodes.find((n) => n.id === nodeId);
     return node?.data ?? {};
   }
+  function pointToSegmentDist(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const lenSq = dx * dx + dy * dy;
+    if (lenSq === 0) return Math.hypot(px - ax, py - ay);
+    const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / lenSq));
+    return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+  }
+  function hitTestEdge(graphX, graphY, threshold) {
+    let bestDist = threshold;
+    let bestEdgeId = null;
+    for (const edge of positionedEdges) {
+      const dist = pointToSegmentDist(
+        graphX,
+        graphY,
+        edge.sourceX,
+        edge.sourceY,
+        edge.targetX,
+        edge.targetY
+      );
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestEdgeId = `${edge.source}->${edge.target}`;
+      }
+    }
+    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;
+  }
   function createDOM() {
     const { width, height } = getContainerDimensions();
     const isDark = resolveDarkMode(options?.darkMode);
@@ -1548,10 +1655,12 @@ function createGraph(container, spec, options) {
       canvas.setAttribute("aria-label", compilation.a11y.altText);
     }
     wrapper.appendChild(canvas);
-    legendEl = document.createElement("div");
-    legendEl.className = "viz-graph-legend";
-    renderLegend2();
-    wrapper.appendChild(legendEl);
+    if (options?.legend !== false) {
+      legendEl = document.createElement("div");
+      legendEl.className = "viz-graph-legend";
+      renderLegend2();
+      wrapper.appendChild(legendEl);
+    }
     container.appendChild(wrapper);
     const chromeHeight = chromeEl.getBoundingClientRect().height || 0;
     const canvasHeight = Math.max(height - chromeHeight, 200);
@@ -1601,7 +1710,10 @@ function createGraph(container, spec, options) {
       clustering: config.clustering,
       alphaDecay: config.alphaDecay,
       velocityDecay: config.velocityDecay,
-      collisionRadius: config.collisionRadius
+      collisionRadius: config.collisionRadius,
+      collisionPadding: config.collisionPadding,
+      linkStrength: config.linkStrength,
+      centerForce: config.centerForce
     });
     simulation.onTick((positions, _alpha) => {
       if (destroyed) return;
@@ -1661,6 +1773,7 @@ function createGraph(container, spec, options) {
         edges: positionedEdges,
         transform: { x: transform.x, y: transform.y, k: transform.k },
         hoveredNodeId,
+        hoveredEdgeId,
         selectedNodeIds,
         adjacencyMap,
         theme: compilation.theme,
@@ -1672,7 +1785,9 @@ function createGraph(container, spec, options) {
   }
   function initInteraction() {
     if (!canvas) return;
-    tooltipManager = createTooltipManager(wrapper);
+    if (options?.tooltip !== false) {
+      tooltipManager = createTooltipManager(wrapper);
+    }
     interactionManager = new GraphInteractionManager(canvas, spatialIndex, {
       onTransformChange(_transform) {
         markGesture();
@@ -1683,7 +1798,16 @@ function createGraph(container, spec, options) {
         hoveredNodeId = nodeId;
         needsRender = true;
         scheduleRender();
+        if (nodeId) {
+          options?.onNodeHover?.(nodeDataById(nodeId));
+        } else {
+          options?.onNodeHover?.(null);
+        }
         if (nodeId && tooltipManager) {
+          if (hoveredEdgeId) {
+            hoveredEdgeId = null;
+            options?.onEdgeHover?.(null);
+          }
           const content = compilation.tooltipDescriptors.get(nodeId);
           if (content) {
             const node = positionedNodes.find((n) => n.id === nodeId);
@@ -1692,10 +1816,35 @@ function createGraph(container, spec, options) {
               tooltipManager.show(content, screen.x, screen.y);
             }
           }
-        } else {
+        } else if (!nodeId) {
           tooltipManager?.hide();
         }
       },
+      onBackgroundHover(graphX, graphY, screenX, screenY) {
+        const transform = interactionManager?.getTransform();
+        const threshold = 5 / (transform?.k ?? 1);
+        const edgeId = hitTestEdge(graphX, graphY, threshold);
+        if (edgeId !== hoveredEdgeId) {
+          hoveredEdgeId = edgeId;
+          needsRender = true;
+          scheduleRender();
+          if (edgeId) {
+            const data = edgeDataById(edgeId);
+            options?.onEdgeHover?.(data);
+            if (tooltipManager && data) {
+              const fields = Object.entries(data).filter(([key]) => key !== "source" && key !== "target").filter(([, value]) => value != null).map(([key, value]) => ({
+                label: key,
+                value: typeof value === "number" ? value.toLocaleString() : String(value)
+              }));
+              const [source, target] = edgeId.split("->");
+              tooltipManager.show({ title: `${source} \u2192 ${target}`, fields }, screenX, screenY);
+            }
+          } else {
+            options?.onEdgeHover?.(null);
+            tooltipManager?.hide();
+          }
+        }
+      },
       onSelectionChange(nodeIds) {
         selectedNodeIds = new Set(nodeIds);
         needsRender = true;
@@ -1821,9 +1970,40 @@ function createGraph(container, spec, options) {
     initSimulation();
     initInteraction();
     hoveredNodeId = null;
+    hoveredEdgeId = null;
     selectedNodeIds = /* @__PURE__ */ new Set();
     searchManager.clearSearch();
   }
+  function updateVisuals(newSpec) {
+    if (destroyed) return;
+    currentSpec = newSpec;
+    const posMap = /* @__PURE__ */ new Map();
+    for (const node of positionedNodes) {
+      posMap.set(node.id, { x: node.x, y: node.y });
+    }
+    compilation = compile();
+    adjacencyMap = buildAdjacencyMap(compilation.edges);
+    positionedNodes = compilation.nodes.map((node) => {
+      const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
+      return { ...node, x: pos.x, y: pos.y };
+    });
+    positionedEdges = compilation.edges.map((edge) => {
+      const src = posMap.get(edge.source) ?? { x: 0, y: 0 };
+      const tgt = posMap.get(edge.target) ?? { x: 0, y: 0 };
+      return {
+        ...edge,
+        sourceX: src.x,
+        sourceY: src.y,
+        targetX: tgt.x,
+        targetY: tgt.y
+      };
+    });
+    spatialIndex.rebuild(positionedNodes);
+    renderChrome2();
+    renderLegend2();
+    needsRender = true;
+    scheduleRender();
+  }
   function teardownSubsystems() {
     if (animFrameId !== null) {
       cancelAnimationFrame(animFrameId);
@@ -1873,6 +2053,8 @@ function createGraph(container, spec, options) {
     return {
       update() {
       },
+      updateVisuals() {
+      },
       search() {
       },
       clearSearch() {
@@ -1897,6 +2079,7 @@ function createGraph(container, spec, options) {
   }
   return {
     update,
+    updateVisuals,
     search,
     clearSearch,
     zoomToFit,
@@ -3343,7 +3526,7 @@ function wireSeriesLabelDrag(svg, spec, onEdit, setDragging) {
     }
   };
 }
-function wireLegendInteraction(svg, _layout, onLegendToggle) {
+function wireLegendInteraction(svg, _layout, onLegendToggle, onEdit) {
   const legendEntries = svg.querySelectorAll("[data-legend-index]");
   const cleanups = [];
   const hiddenSeries = /* @__PURE__ */ new Set();
@@ -3356,11 +3539,13 @@ function wireLegendInteraction(svg, _layout, onLegendToggle) {
         entry.setAttribute("opacity", "1");
         entry.setAttribute("aria-label", `${label}: visible`);
         onLegendToggle?.(label, true);
+        onEdit?.({ type: "legend-toggle", series: label, hidden: false });
       } else {
         hiddenSeries.add(label);
         entry.setAttribute("opacity", "0.3");
         entry.setAttribute("aria-label", `${label}: hidden`);
         onLegendToggle?.(label, false);
+        onEdit?.({ type: "legend-toggle", series: label, hidden: true });
       }
       const marks = svg.querySelectorAll(".viz-mark");
       for (const mark of marks) {
@@ -3593,7 +3778,12 @@ function createChart(container, spec, options) {
       tooltipManager,
       currentLayout
     );
-    cleanupLegend = wireLegendInteraction(svgElement, currentLayout, options?.onLegendToggle);
+    cleanupLegend = wireLegendInteraction(
+      svgElement,
+      currentLayout,
+      options?.onLegendToggle,
+      options?.onEdit
+    );
     if (options?.onMarkClick || options?.onMarkHover || options?.onMarkLeave || options?.onAnnotationClick) {
       const specAnnotations = "annotations" in currentSpec && Array.isArray(currentSpec.annotations) ? currentSpec.annotations : [];
       cleanupChartEvents = wireChartEvents(svgElement, currentLayout, specAnnotations, options);
@@ -3659,6 +3849,8 @@ function createChart(container, spec, options) {
         return exportSVG(svgElement);
       case "png":
         return exportPNG(svgElement, exportOptions);
+      case "jpg":
+        return exportJPG(svgElement, exportOptions);
       case "csv":
         return exportCSV(
           "data" in currentSpec && Array.isArray(currentSpec.data) ? currentSpec.data : []
@@ -4828,6 +5020,7 @@ export {
   createTable,
   createTooltipManager,
   exportCSV,
+  exportJPG,
   exportPNG,
   exportSVG,
   observeResize,