@opendata-ai/openchart-vanilla 6.7.0 → 6.8.0

package/dist/index.js

@@ -12,6 +12,10 @@ function getSVGDimensions(svg) {
   }
   return { width: 600, height: 400 };
 }
+function ensureSVGDimensions(svgString, width, height) {
+  if (/^<svg[^>]*\swidth\s*=/.test(svgString)) return svgString;
+  return svgString.replace(/^(<svg)/, `$1 width="${width}" height="${height}"`);
+}
 function collectUsedFonts(svgElement) {
   const fonts = /* @__PURE__ */ new Map();
   const textElements = svgElement.querySelectorAll("text");
@@ -135,8 +139,8 @@ async function exportPNG(svgElement, options) {
   if (shouldEmbed) {
     await embedFonts(svgElement);
   }
-  const svgString = exportSVG(svgElement);
   const { width, height } = getSVGDimensions(svgElement);
+  const svgString = ensureSVGDimensions(exportSVG(svgElement), width, height);
   const canvas = document.createElement("canvas");
   canvas.width = width * dpi;
   canvas.height = height * dpi;
@@ -150,7 +154,7 @@ async function exportPNG(svgElement, options) {
   const url = URL.createObjectURL(blob);
   return new Promise((resolve, reject) => {
     img.onload = () => {
-      ctx.drawImage(img, 0, 0);
+      ctx.drawImage(img, 0, 0, width, height);
       URL.revokeObjectURL(url);
       canvas.toBlob((result) => {
         if (result) {
@@ -174,8 +178,8 @@ async function exportJPG(svgElement, options) {
   if (shouldEmbed) {
     await embedFonts(svgElement);
   }
-  const svgString = exportSVG(svgElement);
   const { width, height } = getSVGDimensions(svgElement);
+  const svgString = ensureSVGDimensions(exportSVG(svgElement), width, height);
   const canvas = document.createElement("canvas");
   canvas.width = width * dpi;
   canvas.height = height * dpi;
@@ -191,7 +195,7 @@ async function exportJPG(svgElement, options) {
   const url = URL.createObjectURL(blob);
   return new Promise((resolve, reject) => {
     img.onload = () => {
-      ctx.drawImage(img, 0, 0);
+      ctx.drawImage(img, 0, 0, width, height);
       URL.revokeObjectURL(url);
       canvas.toBlob(
         (result) => {
@@ -3356,6 +3360,12 @@ function applyTextStyle(el, style) {
 }
 function wrapText(text, fontSize, fontWeight, maxWidth) {
   if (maxWidth <= 0) return [text];
+  const segments = text.split("\n");
+  if (segments.length > 1) {
+    return segments.flatMap(
+      (segment) => segment.length === 0 ? [""] : wrapText(segment, fontSize, fontWeight, maxWidth)
+    );
+  }
   const AVG_CHAR_WIDTH = 0.55;
   const WEIGHT_FACTORS = {
     100: 0.9,
@@ -4139,11 +4149,12 @@ function renderBrand(parent, layout) {
   a2.setAttribute("target", "_blank");
   a2.setAttribute("rel", "noopener");
   a2.setAttribute("class", "oc-chrome-ref");
+  const BRAND_LARGE = 16;
   const text = createSVGElement("text");
   setAttrs(text, {
     x: rightEdge,
-    y: chromeY,
-    "dominant-baseline": "hanging",
+    y: chromeY + BRAND_LARGE,
+    "dominant-baseline": "alphabetic",
     "font-family": layout.theme.fonts.family,
     "font-size": BRAND_FONT_SIZE2,
     "text-anchor": "end",
@@ -4156,6 +4167,7 @@ function renderBrand(parent, layout) {
   text.appendChild(trySpan);
   const openDataSpan = createSVGElement("tspan");
   openDataSpan.setAttribute("font-weight", "600");
+  openDataSpan.setAttribute("font-size", String(BRAND_LARGE));
   openDataSpan.textContent = "OpenData";
   text.appendChild(openDataSpan);
   const aiSpan = createSVGElement("tspan");
@@ -6391,11 +6403,11 @@ function renderCell(cell) {
 import { compileSankey } from "@opendata-ai/openchart-engine";
 
 // src/sankey-renderer.ts
-import { BRAND_MIN_WIDTH as BRAND_MIN_WIDTH3, estimateTextWidth as estimateTextWidth2 } from "@opendata-ai/openchart-core";
+import { BRAND_FONT_SIZE as BRAND_FONT_SIZE3, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH3, estimateTextWidth as estimateTextWidth2 } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
 var SVG_NS2 = "http://www.w3.org/2000/svg";
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
-var BRAND_URL2 = "https://opendata.ai";
+var BRAND_URL2 = "https://tryopendata.ai";
 var EASE_VAR_MAP2 = {
   smooth: "var(--oc-ease-smooth)",
   snappy: "var(--oc-ease-snappy)"
@@ -6542,25 +6554,30 @@ function renderBrand2(parent, layout) {
   a2.setAttribute("target", "_blank");
   a2.setAttribute("rel", "noopener");
   a2.setAttribute("class", "oc-chrome-ref");
+  const BRAND_LARGE = 16;
   const text = createSVGElement2("text");
   setAttrs2(text, {
     x: rightEdge,
-    y: chromeY,
-    "dominant-baseline": "hanging",
+    y: chromeY + BRAND_LARGE,
+    "dominant-baseline": "alphabetic",
     "text-anchor": "end",
     "font-family": layout.theme.fonts.family,
-    "font-size": 20,
+    "font-size": BRAND_FONT_SIZE3,
     "fill-opacity": 0.55
   });
   text.style.setProperty("fill", fill);
-  const openSpan = createSVGElement2("tspan");
-  setAttrs2(openSpan, { "font-weight": 500 });
-  openSpan.textContent = "Open";
-  const dataSpan = createSVGElement2("tspan");
-  setAttrs2(dataSpan, { "font-weight": 600 });
-  dataSpan.textContent = "Data";
-  text.appendChild(openSpan);
-  text.appendChild(dataSpan);
+  const trySpan = createSVGElement2("tspan");
+  setAttrs2(trySpan, { "font-weight": 500 });
+  trySpan.textContent = "try";
+  const openDataSpan = createSVGElement2("tspan");
+  setAttrs2(openDataSpan, { "font-weight": 600, "font-size": BRAND_LARGE });
+  openDataSpan.textContent = "OpenData";
+  const aiSpan = createSVGElement2("tspan");
+  setAttrs2(aiSpan, { "font-weight": 500 });
+  aiSpan.textContent = ".ai";
+  text.appendChild(trySpan);
+  text.appendChild(openDataSpan);
+  text.appendChild(aiSpan);
   a2.appendChild(text);
   parent.appendChild(a2);
 }
@@ -6647,11 +6664,14 @@ function buildNodePositionMap(nodes) {
   }
   return map;
 }
+function sanitizeId(s) {
+  return s.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
 function renderGradientDefs(defs, links, nodePositions) {
   for (let i = 0; i < links.length; i++) {
     const link = links[i];
     if (link.sourceColor === link.targetColor) continue;
-    const gradId = `oc-sg-${link.sourceId}-${link.targetId}-${i}`;
+    const gradId = `oc-sg-${sanitizeId(link.sourceId)}-${sanitizeId(link.targetId)}-${i}`;
     const gradient = createSVGElement2("linearGradient");
     gradient.setAttribute("id", gradId);
     gradient.setAttribute("gradientUnits", "userSpaceOnUse");
@@ -6677,7 +6697,7 @@ function renderLinks(parent, links, _nodePositions, animation) {
     const link = links[i];
     const linkG = createSVGElement2("g");
     linkG.setAttribute("class", "oc-sankey-link");
-    linkG.setAttribute("data-mark-id", `link-${link.sourceId}-${link.targetId}`);
+    linkG.setAttribute("data-mark-id", `link-${link.sourceId}-${link.targetId}-${i}`);
     linkG.setAttribute("data-source", link.sourceId);
     linkG.setAttribute("data-target", link.targetId);
     if (link.aria?.label) {
@@ -6689,7 +6709,7 @@ function renderLinks(parent, links, _nodePositions, animation) {
     path.setAttribute("stroke", "none");
     path.setAttribute("fill-opacity", String(link.fillOpacity));
     if (link.sourceColor !== link.targetColor) {
-      const gradId = `oc-sg-${link.sourceId}-${link.targetId}-${i}`;
+      const gradId = `oc-sg-${sanitizeId(link.sourceId)}-${sanitizeId(link.targetId)}-${i}`;
       path.setAttribute("fill", `url(#${gradId})`);
     } else {
       path.setAttribute("fill", link.sourceColor);
@@ -6804,6 +6824,7 @@ function resolveDarkMode3(mode) {
 }
 var HIGHLIGHT_OPACITY = 0.7;
 var DIM_OPACITY = 0.15;
+var NODE_DIM_OPACITY = 0.2;
 function createSankey(container, spec, options) {
   let currentSpec = spec;
   let currentLayout;
@@ -6938,6 +6959,7 @@ function createSankey(container, spec, options) {
     return link?.data ?? {};
   }
   function highlightConnectedLinks(svg, nodeId, _layout) {
+    const connectedNodeIds = /* @__PURE__ */ new Set([nodeId]);
     const linkElements = svg.querySelectorAll(".oc-sankey-link");
     for (const el of linkElements) {
       const source = el.getAttribute("data-source");
@@ -6946,6 +6968,17 @@ function createSankey(container, spec, options) {
       if (!path) continue;
       const isConnected = source === nodeId || target === nodeId;
       path.setAttribute("fill-opacity", String(isConnected ? HIGHLIGHT_OPACITY : DIM_OPACITY));
+      if (isConnected) {
+        if (source) connectedNodeIds.add(source);
+        if (target) connectedNodeIds.add(target);
+      }
+    }
+    const nodeElements = svg.querySelectorAll(".oc-sankey-node");
+    for (const el of nodeElements) {
+      const nid = el.getAttribute("data-node-id");
+      if (!nid) continue;
+      const isConnected = connectedNodeIds.has(nid);
+      el.style.opacity = isConnected ? "1" : String(NODE_DIM_OPACITY);
     }
   }
   function resetLinkOpacity(svg, layout) {
@@ -6956,7 +6989,11 @@ function createSankey(container, spec, options) {
       const source = el.getAttribute("data-source");
       const target = el.getAttribute("data-target");
       const link = layout.links.find((l) => l.sourceId === source && l.targetId === target);
-      path.setAttribute("fill-opacity", String(link?.fillOpacity ?? 0.35));
+      path.setAttribute("fill-opacity", String(link?.fillOpacity ?? 0.5));
+    }
+    const nodeElements = svg.querySelectorAll(".oc-sankey-node");
+    for (const el of nodeElements) {
+      el.style.opacity = "1";
     }
   }
   function render() {
@@ -7301,7 +7338,7 @@ import { getBreakpoint } from "@opendata-ai/openchart-core";
 import { compileTable } from "@opendata-ai/openchart-engine";
 
 // src/table-renderer.ts
-import { BRAND_FONT_SIZE as BRAND_FONT_SIZE3 } from "@opendata-ai/openchart-core";
+import { BRAND_FONT_SIZE as BRAND_FONT_SIZE4 } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay as clampStaggerDelay3 } from "@opendata-ai/openchart-engine";
 var EASE_VAR_MAP3 = {
   smooth: "var(--oc-ease-smooth)",
@@ -7555,7 +7592,7 @@ function renderTable(layout, container, opts) {
   brandLink.href = BRAND_URL3;
   brandLink.target = "_blank";
   brandLink.rel = "noopener";
-  brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE3}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
+  brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE4}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
   brandLink.textContent = "tryOpenData.ai";
   brand.appendChild(brandLink);
   wrapper.appendChild(brand);