@opendata-ai/openchart-vanilla 6.10.0 → 6.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "6.10.0",
+  "version": "6.12.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.10.0",
-    "@opendata-ai/openchart-engine": "6.10.0",
+    "@opendata-ai/openchart-core": "6.12.0",
+    "@opendata-ai/openchart-engine": "6.12.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__tests__/gradient-utils.test.ts

@@ -0,0 +1,125 @@
+import type { GradientDef } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { buildGradientDefs, resolveMarkFill } from '../gradient-utils';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+function createDefs(): SVGElement {
+  return document.createElementNS(SVG_NS, 'defs') as SVGElement;
+}
+
+const linearGrad: GradientDef = {
+  gradient: 'linear',
+  stops: [
+    { offset: 0, color: '#f00' },
+    { offset: 1, color: '#00f' },
+  ],
+};
+
+const radialGrad: GradientDef = {
+  gradient: 'radial',
+  stops: [
+    { offset: 0, color: '#fff' },
+    { offset: 1, color: '#000' },
+  ],
+};
+
+describe('buildGradientDefs', () => {
+  it('creates a linearGradient element for a linear gradient fill', () => {
+    const defs = createDefs();
+    buildGradientDefs([{ fill: linearGrad }], defs);
+    const el = defs.querySelector('linearGradient');
+    expect(el).not.toBeNull();
+  });
+
+  it('creates a radialGradient element for a radial gradient fill', () => {
+    const defs = createDefs();
+    buildGradientDefs([{ fill: radialGrad }], defs);
+    const el = defs.querySelector('radialGradient');
+    expect(el).not.toBeNull();
+  });
+
+  it('deduplicates identical gradients', () => {
+    const defs = createDefs();
+    buildGradientDefs([{ fill: linearGrad }, { fill: linearGrad }], defs);
+    const els = defs.querySelectorAll('linearGradient');
+    expect(els.length).toBe(1);
+  });
+
+  it('creates separate gradient elements for different gradients', () => {
+    const defs = createDefs();
+    buildGradientDefs([{ fill: linearGrad }, { fill: radialGrad }], defs);
+    expect(defs.querySelector('linearGradient')).not.toBeNull();
+    expect(defs.querySelector('radialGradient')).not.toBeNull();
+    expect(defs.children.length).toBe(2);
+  });
+
+  it('skips marks with string fills', () => {
+    const defs = createDefs();
+    buildGradientDefs([{ fill: '#ff0000' }, { fill: 'steelblue' }], defs);
+    expect(defs.children.length).toBe(0);
+  });
+
+  it('handles empty marks array', () => {
+    const defs = createDefs();
+    const map = buildGradientDefs([], defs);
+    expect(map.size).toBe(0);
+    expect(defs.children.length).toBe(0);
+  });
+
+  it('sets correct default attributes on linearGradient', () => {
+    const defs = createDefs();
+    buildGradientDefs([{ fill: linearGrad }], defs);
+    const el = defs.querySelector('linearGradient')!;
+    expect(el.getAttribute('x1')).toBe('0');
+    expect(el.getAttribute('y1')).toBe('0');
+    expect(el.getAttribute('x2')).toBe('0');
+    expect(el.getAttribute('y2')).toBe('1');
+  });
+
+  it('sets correct stop attributes', () => {
+    const grad: GradientDef = {
+      gradient: 'linear',
+      stops: [
+        { offset: 0, color: '#f00', opacity: 0.5 },
+        { offset: 1, color: '#00f' },
+      ],
+    };
+    const defs = createDefs();
+    buildGradientDefs([{ fill: grad }], defs);
+    const stops = defs.querySelectorAll('stop');
+    expect(stops.length).toBe(2);
+    expect(stops[0].getAttribute('offset')).toBe('0');
+    expect(stops[0].getAttribute('stop-color')).toBe('#f00');
+    expect(stops[0].getAttribute('stop-opacity')).toBe('0.5');
+    expect(stops[1].getAttribute('offset')).toBe('1');
+    expect(stops[1].getAttribute('stop-color')).toBe('#00f');
+    expect(stops[1].hasAttribute('stop-opacity')).toBe(false);
+  });
+
+  it('sets gradientUnits="objectBoundingBox"', () => {
+    const defs = createDefs();
+    buildGradientDefs([{ fill: linearGrad }], defs);
+    const el = defs.querySelector('linearGradient')!;
+    expect(el.getAttribute('gradientUnits')).toBe('objectBoundingBox');
+  });
+});
+
+describe('resolveMarkFill', () => {
+  it('returns the string directly for string fills', () => {
+    const map = new Map<string, string>();
+    expect(resolveMarkFill('#ff0000', map)).toBe('#ff0000');
+  });
+
+  it('returns url(#id) for gradient fills that are in the map', () => {
+    const defs = createDefs();
+    const map = buildGradientDefs([{ fill: linearGrad }], defs);
+    const result = resolveMarkFill(linearGrad, map);
+    expect(result).toMatch(/^url\(#oc-grad-\d+\)$/);
+  });
+
+  it('returns #000000 for gradient fills not in the map', () => {
+    const map = new Map<string, string>();
+    expect(resolveMarkFill(linearGrad, map)).toBe('#000000');
+  });
+});

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

@@ -771,4 +771,11 @@ describe('brand watermark', () => {
     const brandLink = svg.querySelector('.oc-chrome-ref');
     expect(brandLink).toBeNull();
   });
+
+  it('does not render brand when layout.watermark is false', () => {
+    const spec: ChartSpec = { ...lineSpec, watermark: false };
+    const { svg } = renderSpec(spec);
+    const brandLink = svg.querySelector('.oc-chrome-ref');
+    expect(brandLink).toBeNull();
+  });
 });

package/src/gradient-utils.ts

@@ -0,0 +1,134 @@
+/**
+ * SVG gradient utilities: creates <linearGradient> and <radialGradient>
+ * elements from GradientDef specs and resolves mark fills to url(#id) refs.
+ */
+
+import type { GradientDef, LinearGradient, RadialGradient } from '@opendata-ai/openchart-core';
+import { isGradientDef } from '@opendata-ai/openchart-core';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Produce a stable, deterministic key for a GradientDef.
+ * Used for deduplication so identical gradients share one SVG element.
+ * Recursively sorts object keys for stability across property order variations.
+ */
+function gradientKey(def: GradientDef): string {
+  return sortedStringify(def);
+}
+
+function sortedStringify(value: unknown): string {
+  if (value === null || value === undefined) return String(value);
+  if (Array.isArray(value)) return `[${value.map(sortedStringify).join(',')}]`;
+  if (typeof value === 'object') {
+    const sorted = Object.keys(value)
+      .sort()
+      .map((k) => `${JSON.stringify(k)}:${sortedStringify((value as Record<string, unknown>)[k])}`);
+    return `{${sorted.join(',')}}`;
+  }
+  return JSON.stringify(value);
+}
+
+/**
+ * Create a single SVG gradient element (<linearGradient> or <radialGradient>).
+ * Uses gradientUnits="objectBoundingBox" so coordinates are in [0,1] space.
+ */
+function createGradientElement(def: GradientDef, id: string): SVGElement {
+  if (def.gradient === 'linear') {
+    return createLinearGradient(def, id);
+  }
+  return createRadialGradient(def, id);
+}
+
+function createLinearGradient(def: LinearGradient, id: string): SVGElement {
+  const el = document.createElementNS(SVG_NS, 'linearGradient');
+  el.setAttribute('id', id);
+  el.setAttribute('gradientUnits', 'objectBoundingBox');
+  el.setAttribute('x1', String(def.x1 ?? 0));
+  el.setAttribute('y1', String(def.y1 ?? 0));
+  el.setAttribute('x2', String(def.x2 ?? 0));
+  el.setAttribute('y2', String(def.y2 ?? 1));
+
+  for (const stop of def.stops) {
+    appendStop(el, stop);
+  }
+
+  return el;
+}
+
+function createRadialGradient(def: RadialGradient, id: string): SVGElement {
+  const el = document.createElementNS(SVG_NS, 'radialGradient');
+  el.setAttribute('id', id);
+  el.setAttribute('gradientUnits', 'objectBoundingBox');
+  // SVG radialGradient: cx/cy/r = outer circle, fx/fy/fr = focal (inner) circle
+  // Spec: x2/y2/r2 = outer, x1/y1/r1 = inner (focal)
+  el.setAttribute('cx', String(def.x2 ?? 0.5));
+  el.setAttribute('cy', String(def.y2 ?? 0.5));
+  el.setAttribute('r', String(def.r2 ?? 0.5));
+  el.setAttribute('fx', String(def.x1 ?? 0.5));
+  el.setAttribute('fy', String(def.y1 ?? 0.5));
+  el.setAttribute('fr', String(def.r1 ?? 0));
+
+  for (const stop of def.stops) {
+    appendStop(el, stop);
+  }
+
+  return el;
+}
+
+function appendStop(
+  parent: SVGElement,
+  stop: { offset: number; color: string; opacity?: number },
+): void {
+  const stopEl = document.createElementNS(SVG_NS, 'stop');
+  stopEl.setAttribute('offset', String(stop.offset));
+  stopEl.setAttribute('stop-color', stop.color);
+  if (stop.opacity !== undefined) {
+    stopEl.setAttribute('stop-opacity', String(stop.opacity));
+  }
+  parent.appendChild(stopEl);
+}
+
+/**
+ * Scan all marks for GradientDef fill values, create SVG gradient elements
+ * in the provided <defs> node, and return a map from gradient key to element ID.
+ *
+ * Identical gradients (by key) share a single SVG element.
+ */
+export function buildGradientDefs(
+  marks: Array<{ fill?: unknown }>,
+  defs: SVGElement,
+): Map<string, string> {
+  const map = new Map<string, string>();
+  let counter = 0;
+
+  for (const mark of marks) {
+    const fill = mark.fill;
+    if (fill && isGradientDef(fill)) {
+      const key = gradientKey(fill);
+      if (!map.has(key)) {
+        const id = `oc-grad-${counter++}`;
+        const el = createGradientElement(fill, id);
+        defs.appendChild(el);
+        map.set(key, id);
+      }
+    }
+  }
+
+  return map;
+}
+
+/**
+ * Resolve a mark's fill value to a CSS/SVG fill string.
+ * Returns the color string directly for plain fills,
+ * or "url(#gradientId)" for gradient fills.
+ */
+export function resolveMarkFill(
+  fill: string | GradientDef,
+  gradientMap: Map<string, string>,
+): string {
+  if (typeof fill === 'string') return fill;
+  const key = gradientKey(fill);
+  const id = gradientMap.get(key);
+  return id ? `url(#${id})` : '#000000';
+}

package/src/graph/canvas-renderer.ts

@@ -229,7 +229,9 @@ export class GraphCanvasRenderer {
     ctx.restore();
 
     // Brand watermark in screen coordinates (unaffected by pan/zoom)
-    this.drawBrand(ctx, cssWidth, cssHeight, theme);
+    if (state.watermark) {
+      this.drawBrand(ctx, cssWidth, cssHeight, theme);
+    }
   }
 
   // -------------------------------------------------------------------------

package/src/graph/types.ts

@@ -42,4 +42,6 @@ export interface GraphRenderState {
   searchMatches: Set<string> | null;
   /** True during active pan/zoom gestures. Renderer skips labels and glow. */
   isGesturing: boolean;
+  /** Whether the tryOpenData.ai watermark is enabled. */
+  watermark: boolean;
 }

package/src/graph-mount.ts

@@ -35,6 +35,8 @@ export interface GraphMountOptions {
   theme?: ThemeConfig;
   darkMode?: DarkMode;
   responsive?: boolean;
+  /** Show the tryOpenData.ai watermark. Defaults to true. */
+  watermark?: boolean;
   /** Show the built-in tooltip on node/edge hover. Defaults to true. */
   tooltip?: boolean;
   /** Show the built-in legend. Defaults to true. */
@@ -157,6 +159,7 @@ export function createGraph(
       height,
       theme: options?.theme,
       darkMode,
+      watermark: options?.watermark,
     };
 
     return compileGraph(currentSpec, compileOpts);
@@ -465,6 +468,7 @@ export function createGraph(
         theme: compilation.theme,
         searchMatches: searchManager.getMatches(),
         isGesturing,
+        watermark: compilation.watermark,
       };
 
       renderer.render(state);

package/src/mount.ts

@@ -27,7 +27,7 @@ import type {
   ThemeConfig,
   TooltipContent,
 } from '@opendata-ai/openchart-core';
-import { elementRef, isLayerSpec } from '@opendata-ai/openchart-core';
+import { elementRef, getRepresentativeColor, isLayerSpec } from '@opendata-ai/openchart-core';
 import { compileChart, compileLayer } from '@opendata-ai/openchart-engine';
 import { cancelAnimations, setupAnimationCleanup } from './animation';
 import {
@@ -57,6 +57,8 @@ export interface MountOptions extends ChartEventHandlers {
   onDataPointClick?: (data: Record<string, unknown>) => void;
   /** Enable responsive resizing. Defaults to true. */
   responsive?: boolean;
+  /** Show the tryOpenData.ai watermark. Defaults to true. */
+  watermark?: boolean;
   /** Initial selected element. */
   selectedElement?: ElementRef;
 }
@@ -243,7 +245,7 @@ function collectVoronoiPoints(layout: ChartLayout): VoronoiPoint[] {
   const points: VoronoiPoint[] = [];
   for (const mark of layout.marks) {
     if ((mark.type === 'line' || mark.type === 'area') && mark.dataPoints) {
-      const color = mark.type === 'line' ? mark.stroke : mark.fill;
+      const color = mark.type === 'line' ? mark.stroke : getRepresentativeColor(mark.fill);
       for (const dp of mark.dataPoints) {
         points.push({ ...dp, color });
       }
@@ -1820,6 +1822,7 @@ export function createChart(
       height,
       theme: options?.theme,
       darkMode,
+      watermark: options?.watermark,
       measureText,
     };
 

package/src/sankey-mount.ts

@@ -38,6 +38,8 @@ export interface SankeyMountOptions {
   darkMode?: DarkMode;
   /** Enable responsive resizing. Defaults to true. */
   responsive?: boolean;
+  /** Show the tryOpenData.ai watermark. Defaults to true. */
+  watermark?: boolean;
   /** Show tooltips on hover. Defaults to true. */
   tooltip?: boolean;
   /** Callback when a node is clicked. */
@@ -140,6 +142,7 @@ export function createSankey(
       height,
       theme: options?.theme,
       darkMode,
+      watermark: options?.watermark,
     };
 
     return compileSankey(currentSpec, compileOpts);

package/src/sankey-renderer.ts

@@ -608,7 +608,9 @@ export function renderSankeySVG(
   renderChrome(svg, layout);
 
   // Brand
-  renderBrand(svg, layout);
+  if (layout.watermark) {
+    renderBrand(svg, layout);
+  }
 
   return svg;
 }

package/src/svg-renderer.ts

@@ -30,6 +30,7 @@ import type {
 } from '@opendata-ai/openchart-core';
 import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH, estimateTextWidth } from '@opendata-ai/openchart-core';
 import { clampStaggerDelay } from '@opendata-ai/openchart-engine';
+import { buildGradientDefs, resolveMarkFill } from './gradient-utils';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
@@ -39,6 +40,12 @@ const SVG_NS = 'http://www.w3.org/2000/svg';
  */
 let currentAnimation: ResolvedAnimation | undefined;
 
+/**
+ * Module-level gradient map. Set by renderChartSVG after building gradient defs
+ * so mark renderers can resolve gradient fills without signature changes.
+ */
+let currentGradientMap: Map<string, string> = new Map();
+
 /**
  * Stamp animation index attributes on a mark element when animation is enabled.
  * Sets `data-animation-index` (for querySelector) and `--oc-mark-index`
@@ -508,7 +515,7 @@ function renderAreaMark(mark: AreaMark, index: number): SVGElement {
     const fill = createSVGElement('path');
     setAttrs(fill, {
       d: mark.path,
-      fill: mark.fill,
+      fill: resolveMarkFill(mark.fill, currentGradientMap),
       'fill-opacity': mark.fillOpacity,
       stroke: 'none',
     });
@@ -549,7 +556,7 @@ function renderRectMark(mark: RectMark, index: number): SVGElement {
     y: mark.y,
     width: mark.width,
     height: mark.height,
-    fill: mark.fill,
+    fill: resolveMarkFill(mark.fill, currentGradientMap),
   });
   if (mark.stroke) {
     rect.setAttribute('stroke', mark.stroke);
@@ -585,7 +592,7 @@ function renderArcMark(mark: ArcMark, index: number): SVGElement {
   const path = createSVGElement('path');
   setAttrs(path, {
     d: mark.path,
-    fill: mark.fill,
+    fill: resolveMarkFill(mark.fill, currentGradientMap),
     stroke: mark.stroke,
     'stroke-width': mark.strokeWidth,
   });
@@ -619,7 +626,7 @@ function renderPointMark(mark: PointMark, index: number): SVGElement {
     cx: mark.cx,
     cy: mark.cy,
     r: mark.r,
-    fill: mark.fill,
+    fill: resolveMarkFill(mark.fill, currentGradientMap),
     stroke: mark.stroke,
     'stroke-width': mark.strokeWidth,
   });
@@ -1279,6 +1286,10 @@ export function renderChartSVG(
   });
   clipPath.appendChild(clipRect);
   defs.appendChild(clipPath);
+
+  // Build gradient defs for marks with gradient fills
+  currentGradientMap = buildGradientDefs(layout.marks as Array<{ fill?: unknown }>, defs);
+
   svg.appendChild(defs);
 
   // Render layers in order (back to front)
@@ -1320,10 +1331,13 @@ export function renderChartSVG(
   renderChrome(svg, layout);
 
   // Brand renders as a footer item, right-aligned on the source/footer row
-  renderBrand(svg, layout);
+  if (layout.watermark) {
+    renderBrand(svg, layout);
+  }
 
-  // Reset module-level animation state after rendering
+  // Reset module-level state after rendering
   currentAnimation = undefined;
+  currentGradientMap = new Map();
 
   container.appendChild(svg);
   return svg;

package/src/table-mount.ts

@@ -39,6 +39,8 @@ export interface TableMountOptions {
   theme?: ThemeConfig;
   darkMode?: DarkMode;
   responsive?: boolean;
+  /** Show the tryOpenData.ai watermark. Defaults to true. */
+  watermark?: boolean;
   onRowClick?: (row: Record<string, unknown>) => void;
   onStateChange?: (state: TableState) => void;
   externalState?: { sort?: SortState | null; search?: string; page?: number };
@@ -175,6 +177,7 @@ export function createTable(
       height: 600,
       theme: options?.theme,
       darkMode,
+      watermark: options?.watermark,
       sort: state.sort ?? undefined,
       search: state.search || undefined,
       page: state.page,

package/src/table-renderer.ts

@@ -390,18 +390,20 @@ export function renderTable(
   wrapper.appendChild(liveRegion);
 
   // Brand watermark
-  const brandColor = theme ? theme.colors.axis : '#999999';
-  const brand = document.createElement('div');
-  brand.className = 'oc-table-ref';
-  brand.style.cssText = 'text-align: right; padding: 4px 8px;';
-  const brandLink = document.createElement('a');
-  brandLink.href = BRAND_URL;
-  brandLink.target = '_blank';
-  brandLink.rel = 'noopener';
-  brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE}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);
+  if (layout.watermark) {
+    const brandColor = theme ? theme.colors.axis : '#999999';
+    const brand = document.createElement('div');
+    brand.className = 'oc-table-ref';
+    brand.style.cssText = 'text-align: right; padding: 4px 8px;';
+    const brandLink = document.createElement('a');
+    brandLink.href = BRAND_URL;
+    brandLink.target = '_blank';
+    brandLink.rel = 'noopener';
+    brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE}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);
+  }
 
   // Animation: stamp CSS custom properties and add oc-animate class BEFORE
   // DOM insertion to avoid a flash of final state.