@opendata-ai/openchart-vanilla 6.7.1 → 6.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "6.7.1",
+  "version": "6.8.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "6.7.1",
-    "@opendata-ai/openchart-engine": "6.7.1",
+    "@opendata-ai/openchart-core": "6.8.0",
+    "@opendata-ai/openchart-engine": "6.8.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__tests__/svg-renderer.test.ts

@@ -394,6 +394,86 @@ describe('chart chrome rendering', () => {
     expect(title!.textContent).toBe('GDP Growth');
   });
 
+  it('splits subtitle on newline into multiple tspan lines', () => {
+    const spec: ChartSpec = {
+      mark: 'bar',
+      data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+      ],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'name', type: 'nominal' },
+      },
+      chrome: {
+        title: 'Title',
+        subtitle: 'Line one\nLine two',
+      },
+    };
+    const { svg } = renderSpec(spec, { width: 600, height: 400 });
+    const subtitle = svg.querySelector('.oc-subtitle');
+    expect(subtitle).not.toBeNull();
+    const tspans = subtitle!.querySelectorAll('tspan');
+    // Should produce at least 2 tspans for the two lines
+    expect(tspans.length).toBeGreaterThanOrEqual(2);
+    const fullText = Array.from(tspans)
+      .map((t) => t.textContent)
+      .join('\n');
+    expect(fullText).toContain('Line one');
+    expect(fullText).toContain('Line two');
+  });
+
+  it('handles short text with newline that would fit on one line without it', () => {
+    const spec: ChartSpec = {
+      mark: 'bar',
+      data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+      ],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'name', type: 'nominal' },
+      },
+      chrome: {
+        title: 'Hi\nThere',
+      },
+    };
+    // Wide enough that "Hi There" would fit on one line, but \n forces two
+    const { svg } = renderSpec(spec, { width: 600, height: 400 });
+    const title = svg.querySelector('.oc-title');
+    expect(title).not.toBeNull();
+    const tspans = title!.querySelectorAll('tspan');
+    expect(tspans.length).toBe(2);
+    expect(tspans[0].textContent).toBe('Hi');
+    expect(tspans[1].textContent).toBe('There');
+  });
+
+  it('handles consecutive newlines producing empty line segments', () => {
+    const spec: ChartSpec = {
+      mark: 'bar',
+      data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+      ],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'name', type: 'nominal' },
+      },
+      chrome: {
+        title: 'Above\n\nBelow',
+      },
+    };
+    const { svg } = renderSpec(spec, { width: 600, height: 400 });
+    const title = svg.querySelector('.oc-title');
+    expect(title).not.toBeNull();
+    const tspans = title!.querySelectorAll('tspan');
+    // 3 segments: "Above", "", "Below"
+    expect(tspans.length).toBe(3);
+    expect(tspans[0].textContent).toBe('Above');
+    expect(tspans[1].textContent).toBe('');
+    expect(tspans[2].textContent).toBe('Below');
+  });
+
   it('chart with no chrome specified renders no chrome text elements', () => {
     const noChrome: ChartSpec = {
       mark: 'bar',

package/src/export.ts

@@ -59,6 +59,21 @@ function getSVGDimensions(svg: SVGElement): { width: number; height: number } {
   return { width: 600, height: 400 };
 }
 
+/**
+ * Ensure an SVG string has explicit width/height attributes.
+ *
+ * When an SVG only has a viewBox (no width/height), browsers loading it as
+ * an Image blob may use 300x150 as the intrinsic size instead of the viewBox
+ * dimensions. This causes clipping at non-1x DPI scaling. Injecting explicit
+ * width/height into the root <svg> tag fixes the intrinsic size.
+ */
+function ensureSVGDimensions(svgString: string, width: number, height: number): string {
+  // If the <svg> already has a width attribute, leave it alone
+  if (/^<svg[^>]*\swidth\s*=/.test(svgString)) return svgString;
+  // Inject width and height right after <svg
+  return svgString.replace(/^(<svg)/, `$1 width="${width}" height="${height}"`);
+}
+
 // ---------------------------------------------------------------------------
 // Font embedding
 // ---------------------------------------------------------------------------
@@ -300,9 +315,14 @@ export async function exportPNG(svgElement: SVGElement, options?: PNGExportOptio
     await embedFonts(svgElement);
   }
 
-  const svgString = exportSVG(svgElement);
   const { width, height } = getSVGDimensions(svgElement);
 
+  // Ensure the SVG has explicit width/height attributes so that when loaded
+  // as a standalone Image blob the browser knows the intrinsic size. Without
+  // these, browsers may default to 300x150 or use heuristics that break at
+  // non-1x DPI scaling.
+  const svgString = ensureSVGDimensions(exportSVG(svgElement), width, height);
+
   const canvas = document.createElement('canvas');
   canvas.width = width * dpi;
   canvas.height = height * dpi;
@@ -320,7 +340,7 @@ export async function exportPNG(svgElement: SVGElement, options?: PNGExportOptio
 
   return new Promise<Blob>((resolve, reject) => {
     img.onload = () => {
-      ctx.drawImage(img, 0, 0);
+      ctx.drawImage(img, 0, 0, width, height);
       URL.revokeObjectURL(url);
 
       canvas.toBlob((result) => {
@@ -361,8 +381,8 @@ export async function exportJPG(svgElement: SVGElement, options?: JPGExportOptio
     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;
@@ -385,7 +405,7 @@ export async function exportJPG(svgElement: SVGElement, options?: JPGExportOptio
 
   return new Promise<Blob>((resolve, reject) => {
     img.onload = () => {
-      ctx.drawImage(img, 0, 0);
+      ctx.drawImage(img, 0, 0, width, height);
       URL.revokeObjectURL(url);
 
       canvas.toBlob(

package/src/sankey-mount.ts

@@ -87,6 +87,8 @@ function resolveDarkMode(mode?: DarkMode): boolean {
 const HIGHLIGHT_OPACITY = 0.7;
 /** Opacity for links NOT connected to hovered node. */
 const DIM_OPACITY = 0.15;
+/** Opacity for nodes NOT connected to hovered node. */
+const NODE_DIM_OPACITY = 0.2;
 
 // ---------------------------------------------------------------------------
 // Main API
@@ -287,6 +289,8 @@ export function createSankey(
     nodeId: string,
     _layout: SankeyLayout,
   ): void {
+    // Collect connected node IDs (the hovered node + its direct neighbors)
+    const connectedNodeIds = new Set<string>([nodeId]);
     const linkElements = svg.querySelectorAll('.oc-sankey-link');
     for (const el of linkElements) {
       const source = el.getAttribute('data-source');
@@ -296,11 +300,24 @@ export function createSankey(
 
       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);
+      }
+    }
+
+    // Dim unconnected nodes (rect + label)
+    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 as SVGElement).style.opacity = isConnected ? '1' : String(NODE_DIM_OPACITY);
     }
   }
 
   /**
-   * Reset all link opacities to their original values.
+   * Reset all link opacities and node opacities to their original values.
    */
   function resetLinkOpacity(svg: SVGSVGElement, layout: SankeyLayout): void {
     const linkElements = svg.querySelectorAll('.oc-sankey-link');
@@ -311,7 +328,13 @@ export function createSankey(
       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));
+    }
+
+    // Restore all node opacities
+    const nodeElements = svg.querySelectorAll('.oc-sankey-node');
+    for (const el of nodeElements) {
+      (el as SVGElement).style.opacity = '1';
     }
   }
 

package/src/sankey-renderer.ts

@@ -369,6 +369,11 @@ function buildNodePositionMap(nodes: SankeyNodeMark[]): Map<string, { x: number;
   return map;
 }
 
+/** Sanitize a string for use as an SVG element ID (no spaces, $, or other invalid chars). */
+function sanitizeId(s: string): string {
+  return s.replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+
 function renderGradientDefs(
   defs: SVGElement,
   links: SankeyLinkMark[],
@@ -379,7 +384,8 @@ function renderGradientDefs(
     // Only create gradients when source and target colors differ
     if (link.sourceColor === link.targetColor) continue;
 
-    const gradId = `oc-sg-${link.sourceId}-${link.targetId}-${i}`;
+    // Use sanitized node names for debuggability, with index suffix for uniqueness
+    const gradId = `oc-sg-${sanitizeId(link.sourceId)}-${sanitizeId(link.targetId)}-${i}`;
     const gradient = createSVGElement('linearGradient');
     gradient.setAttribute('id', gradId);
     gradient.setAttribute('gradientUnits', 'userSpaceOnUse');
@@ -423,7 +429,7 @@ function renderLinks(
 
     const linkG = createSVGElement('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);
 
@@ -440,7 +446,7 @@ function renderLinks(
 
     // Use gradient fill when colors differ, otherwise solid fill
     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);

package/src/svg-renderer.ts

@@ -131,6 +131,14 @@ function applyTextStyle(el: SVGElement, style: TextStyle): void {
 function wrapText(text: string, fontSize: number, fontWeight: number, maxWidth: number): string[] {
   if (maxWidth <= 0) return [text];
 
+  // Split on explicit newlines first
+  const segments = text.split('\n');
+  if (segments.length > 1) {
+    return segments.flatMap((segment) =>
+      segment.length === 0 ? [''] : wrapText(segment, fontSize, fontWeight, maxWidth),
+    );
+  }
+
   // Heuristic character width matching text-measure.ts
   const AVG_CHAR_WIDTH = 0.55;
   const WEIGHT_FACTORS: Record<number, number> = {