@opendata-ai/openchart-vanilla 6.7.1 → 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,
@@ -6654,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");
@@ -6684,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) {
@@ -6696,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);
@@ -6811,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;
@@ -6945,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");
@@ -6953,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) {
@@ -6963,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() {