@opendata-ai/openchart-vanilla 6.10.0 → 6.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "6.10.0",
+  "version": "6.11.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.11.0",
+    "@opendata-ai/openchart-engine": "6.11.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/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/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 {
@@ -243,7 +243,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 });
       }

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)
@@ -1322,8 +1333,9 @@ export function renderChartSVG(
   // Brand renders as a footer item, right-aligned on the source/footer row
   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;