@opendata-ai/openchart-vanilla 2.0.0 → 2.2.0

package/README.md

@@ -0,0 +1,102 @@
+# @opendata-ai/openchart-vanilla
+
+DOM rendering adapter for OpenChart. Creates SVG charts, HTML tables, and canvas-based network graphs from compiled specs. Framework-agnostic.
+
+## Install
+
+```bash
+npm install @opendata-ai/openchart-vanilla
+```
+
+You typically don't install this directly unless you're working without a framework. The framework packages (`openchart-react`, `openchart-vue`, `openchart-svelte`) include it as a dependency and wrap it with lifecycle management.
+
+## Charts
+
+```typescript
+import { createChart } from '@opendata-ai/openchart-vanilla';
+
+const chart = createChart(container, spec, {
+  darkMode: 'auto',
+  responsive: true,
+  onMarkClick: (event) => console.log(event.datum),
+  onMarkHover: (event) => showTooltip(event),
+  onMarkLeave: () => hideTooltip(),
+  onLegendToggle: (series, visible) => console.log(series, visible),
+  onAnnotationClick: (annotation, event) => console.log(annotation),
+});
+
+chart.update(newSpec);          // Re-render with new spec
+chart.resize();                 // Manual resize trigger
+chart.export('svg');            // Export as SVG string
+await chart.export('png');      // Export as PNG Blob
+chart.export('csv');            // Export data as CSV
+chart.destroy();                // Clean up DOM and observers
+```
+
+Responsive mode (default) uses a `ResizeObserver` on the container. Charts recompile at new dimensions automatically.
+
+## Tables
+
+```typescript
+import { createTable } from '@opendata-ai/openchart-vanilla';
+
+const table = createTable(container, tableSpec, {
+  responsive: true,
+  onRowClick: (row) => console.log(row),
+  onStateChange: (state) => console.log(state.sort, state.search, state.page),
+});
+
+table.update(newSpec);
+table.getState();               // { sort, search, page }
+table.setState({ page: 2 });    // Programmatic state control
+table.export('csv');             // CSV export (respects sort/search, ignores pagination)
+table.destroy();
+```
+
+## Graphs
+
+```typescript
+import { createGraph } from '@opendata-ai/openchart-vanilla';
+
+const graph = createGraph(container, graphSpec, {
+  darkMode: 'auto',
+  responsive: true,
+  onNodeClick: (node) => console.log(node),
+  onNodeDoubleClick: (node) => console.log(node),
+  onSelectionChange: (nodeIds) => console.log(nodeIds),
+});
+
+graph.search('query');           // Highlight matching nodes
+graph.clearSearch();
+graph.zoomToFit();              // Fit all nodes in viewport
+graph.zoomToNode('node-id');    // Center on a specific node
+graph.selectNode('node-id');    // Programmatic selection
+graph.getSelectedNodes();       // Get selected node IDs
+graph.update(newSpec);
+graph.destroy();
+```
+
+Graphs render on canvas with a force simulation running in a web worker. Nodes support click, drag, and double-click. The simulation auto-fits nodes once it settles.
+
+## Export utilities
+
+Standalone export functions if you need them outside of an instance:
+
+```typescript
+import { exportSVG, exportPNG, exportCSV } from '@opendata-ai/openchart-vanilla';
+```
+
+## Other exports
+
+- `observeResize()` - ResizeObserver wrapper for container tracking
+- `attachKeyboardNav()` - Keyboard navigation for chart marks
+- `createTooltipManager()` - Tooltip lifecycle management
+- `renderChartSVG()` - Low-level SVG rendering from a ChartLayout
+- `renderTable()` - Low-level table DOM rendering from a TableLayout
+- `renderCell()` and cell-type renderers (`renderBarCell`, `renderSparklineCell`, `renderHeatmapCell`, etc.) - Individual table cell renderers
+
+## Related docs
+
+- [Getting started](../../docs/getting-started.md) for a hands-on tutorial
+- [Integration guide](../../docs/integration-guide.md) for lifecycle management and events
+- [Spec reference](../../docs/spec-reference.md) for field-by-field type details

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.
  *
@@ -74,10 +90,14 @@ interface GraphMountOptions {
     responsive?: 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 +136,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 +146,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 +345,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]);
@@ -132,6 +174,7 @@ var GraphCanvasRenderer = class {
       edges,
       transform,
       hoveredNodeId,
+      hoveredEdgeId,
       selectedNodeIds,
       adjacencyMap,
       theme,
@@ -169,7 +212,8 @@ var GraphCanvasRenderer = class {
       visibleEdges,
       hasActiveNode,
       connectedNodeIds,
-      isGesturing ? null : searchMatches
+      isGesturing ? null : searchMatches,
+      hoveredEdgeId
     );
     this.drawNodesBatched(
       ctx,
@@ -194,15 +238,41 @@ var GraphCanvasRenderer = class {
       );
     }
     ctx.restore();
+    this.drawBrand(ctx, cssWidth, cssHeight, theme);
+  }
+  // -------------------------------------------------------------------------
+  // Brand rendering
+  // -------------------------------------------------------------------------
+  drawBrand(ctx, w, h, theme) {
+    if (w < 120) return;
+    const { dpr } = this;
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const padding = theme.spacing.padding;
+    const x = w - padding;
+    const y = h - 4;
+    ctx.font = `600 20px ${theme.fonts.family}`;
+    ctx.fillStyle = theme.colors.axis;
+    ctx.globalAlpha = 0.5;
+    ctx.textAlign = "right";
+    ctx.textBaseline = "alphabetic";
+    ctx.fillText("OpenData", x, y);
+    ctx.restore();
   }
   // -------------------------------------------------------------------------
   // 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) {
@@ -216,6 +286,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).
@@ -698,6 +781,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) {
@@ -1196,13 +1283,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);
@@ -1447,6 +1539,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;
@@ -1507,6 +1600,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);
@@ -1581,7 +1706,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;
@@ -1641,6 +1769,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,
@@ -1663,7 +1792,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);
@@ -1672,10 +1810,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;
@@ -1801,9 +1964,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);
@@ -1853,6 +2047,8 @@ function createGraph(container, spec, options) {
     return {
       update() {
       },
+      updateVisuals() {
+      },
       search() {
       },
       clearSearch() {
@@ -1877,6 +2073,7 @@ function createGraph(container, spec, options) {
   }
   return {
     update,
+    updateVisuals,
     search,
     clearSearch,
     zoomToFit,
@@ -2521,6 +2718,73 @@ function renderLegend(parent, legend) {
   }
   parent.appendChild(g);
 }
+var BRAND_FONT_SIZE = 20;
+var BRAND_MIN_WIDTH = 120;
+var BRAND_URL = "https://tryopendata.ai";
+var XLINK_NS = "http://www.w3.org/1999/xlink";
+function brandPosition(layout) {
+  const { width } = layout.dimensions;
+  const padding = layout.theme.spacing.padding;
+  const rightEdge = width - padding;
+  const { chrome } = layout;
+  const xAxisExtent = layout.axes.x ? layout.axes.x.label ? 48 : 26 : 0;
+  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
+  const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter;
+  const y = chromeY + BRAND_FONT_SIZE;
+  const dataWidth = estimateTextWidth("Data", BRAND_FONT_SIZE, 600);
+  const dataX = rightEdge - dataWidth;
+  const openX = dataX;
+  return { openX, dataX, y, fill: layout.theme.colors.axis };
+}
+function renderBrandOpen(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
+  const { openX, y, fill } = brandPosition(layout);
+  const a = createSVGElement("a");
+  a.setAttribute("href", BRAND_URL);
+  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
+  a.setAttribute("target", "_blank");
+  a.setAttribute("rel", "noopener");
+  a.setAttribute("class", "viz-axis-ref");
+  const text = createSVGElement("text");
+  setAttrs(text, {
+    x: openX,
+    y,
+    "font-family": layout.theme.fonts.family,
+    "font-size": BRAND_FONT_SIZE,
+    "font-weight": 500,
+    "text-anchor": "end",
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  text.textContent = "Open";
+  a.appendChild(text);
+  parent.appendChild(a);
+}
+function renderBrandData(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
+  const { dataX, y, fill } = brandPosition(layout);
+  const a = createSVGElement("a");
+  a.setAttribute("href", BRAND_URL);
+  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
+  a.setAttribute("target", "_blank");
+  a.setAttribute("rel", "noopener");
+  a.setAttribute("class", "viz-chrome-ref");
+  const text = createSVGElement("text");
+  setAttrs(text, {
+    x: dataX,
+    y,
+    "font-family": layout.theme.fonts.family,
+    "font-size": BRAND_FONT_SIZE,
+    "font-weight": 600,
+    "text-anchor": "start",
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  text.textContent = "Data";
+  a.appendChild(text);
+  parent.appendChild(a);
+}
 function renderChartSVG(layout, container) {
   const { width, height } = layout.dimensions;
   const svg = createSVGElement("svg");
@@ -2561,7 +2825,9 @@ function renderChartSVG(layout, container) {
   svg.appendChild(clippedGroup);
   renderAnnotations(svg, layout);
   renderLegend(svg, layout.legend);
+  renderBrandOpen(svg, layout);
   renderChrome(svg, layout);
+  renderBrandData(svg, layout);
   container.appendChild(svg);
   return svg;
 }
@@ -3254,7 +3520,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();
@@ -3267,11 +3533,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) {
@@ -3504,7 +3772,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);
@@ -3570,6 +3843,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 : []
@@ -4371,6 +4646,18 @@ function renderTable(layout, container) {
   liveRegion.setAttribute("aria-atomic", "true");
   liveRegion.setAttribute("role", "status");
   wrapper.appendChild(liveRegion);
+  const brandColor = theme ? theme.colors.axis : "#999999";
+  const brand = document.createElement("div");
+  brand.className = "viz-table-ref";
+  brand.style.cssText = "text-align: right; padding: 4px 8px;";
+  const brandLink = document.createElement("a");
+  brandLink.href = "https://tryopendata.ai";
+  brandLink.target = "_blank";
+  brandLink.rel = "noopener";
+  brandLink.style.cssText = `font-size: 20px; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
+  brandLink.textContent = "OpenData";
+  brand.appendChild(brandLink);
+  wrapper.appendChild(brand);
   container.appendChild(wrapper);
   return wrapper;
 }
@@ -4727,6 +5014,7 @@ export {
   createTable,
   createTooltipManager,
   exportCSV,
+  exportJPG,
   exportPNG,
   exportSVG,
   observeResize,