@opendata-ai/openchart-vanilla 6.9.0 → 6.11.0

package/dist/index.js

@@ -3259,7 +3259,7 @@ function escapeHtml(str) {
 }
 
 // src/mount.ts
-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";
 
 // src/animation.ts
@@ -3304,8 +3304,93 @@ function setupTableAnimationCleanup(wrapper) {
 // src/svg-renderer.ts
 import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2, estimateTextWidth } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
+
+// src/gradient-utils.ts
+import { isGradientDef } from "@opendata-ai/openchart-core";
 var SVG_NS = "http://www.w3.org/2000/svg";
+function gradientKey(def) {
+  return sortedStringify(def);
+}
+function sortedStringify(value) {
+  if (value === null || value === void 0) 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[k])}`);
+    return `{${sorted.join(",")}}`;
+  }
+  return JSON.stringify(value);
+}
+function createGradientElement(def, id) {
+  if (def.gradient === "linear") {
+    return createLinearGradient(def, id);
+  }
+  return createRadialGradient(def, id);
+}
+function createLinearGradient(def, id) {
+  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, id) {
+  const el = document.createElementNS(SVG_NS, "radialGradient");
+  el.setAttribute("id", id);
+  el.setAttribute("gradientUnits", "objectBoundingBox");
+  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, stop) {
+  const stopEl = document.createElementNS(SVG_NS, "stop");
+  stopEl.setAttribute("offset", String(stop.offset));
+  stopEl.setAttribute("stop-color", stop.color);
+  if (stop.opacity !== void 0) {
+    stopEl.setAttribute("stop-opacity", String(stop.opacity));
+  }
+  parent.appendChild(stopEl);
+}
+function buildGradientDefs(marks, defs) {
+  const map = /* @__PURE__ */ new Map();
+  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;
+}
+function resolveMarkFill(fill, gradientMap) {
+  if (typeof fill === "string") return fill;
+  const key = gradientKey(fill);
+  const id = gradientMap.get(key);
+  return id ? `url(#${id})` : "#000000";
+}
+
+// src/svg-renderer.ts
+var SVG_NS2 = "http://www.w3.org/2000/svg";
 var currentAnimation;
+var currentGradientMap = /* @__PURE__ */ new Map();
 function stampAnimationAttrs(el, mark, fallbackIndex) {
   if (!currentAnimation?.enabled) return;
   const idx = mark.animationIndex ?? fallbackIndex;
@@ -3334,7 +3419,7 @@ function computeXAxisExtent(layout) {
   return xAxis.label ? 48 : 26;
 }
 function createSVGElement(tag) {
-  return document.createElementNS(SVG_NS, tag);
+  return document.createElementNS(SVG_NS2, tag);
 }
 function setAttrs(el, attrs) {
   for (const [key, value] of Object.entries(attrs)) {
@@ -3649,7 +3734,7 @@ function renderAreaMark(mark, index2) {
     const fill = createSVGElement("path");
     setAttrs(fill, {
       d: mark.path,
-      fill: mark.fill,
+      fill: resolveMarkFill(mark.fill, currentGradientMap),
       "fill-opacity": mark.fillOpacity,
       stroke: "none"
     });
@@ -3682,7 +3767,7 @@ function renderRectMark(mark, index2) {
     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);
@@ -3713,7 +3798,7 @@ function renderArcMark(mark, index2) {
   const path = createSVGElement("path");
   setAttrs(path, {
     d: mark.path,
-    fill: mark.fill,
+    fill: resolveMarkFill(mark.fill, currentGradientMap),
     stroke: mark.stroke,
     "stroke-width": mark.strokeWidth
   });
@@ -3740,7 +3825,7 @@ function renderPointMark(mark, index2) {
     cx: mark.cx,
     cy: mark.cy,
     r: mark.r,
-    fill: mark.fill,
+    fill: resolveMarkFill(mark.fill, currentGradientMap),
     stroke: mark.stroke,
     "stroke-width": mark.strokeWidth
   });
@@ -4184,7 +4269,7 @@ function renderChartSVG(layout, container, opts) {
   const svg = createSVGElement("svg");
   setAttrs(svg, {
     viewBox: `0 0 ${width} ${height}`,
-    xmlns: SVG_NS,
+    xmlns: SVG_NS2,
     // WebKit/iOS Safari getBBox() bug: text with dominant-baseline:hanging
     // reports bounding boxes extending above y=0. The SVG spec default
     // overflow is "hidden", which clips this phantom extent. Setting
@@ -4241,6 +4326,7 @@ function renderChartSVG(layout, container, opts) {
   });
   clipPath.appendChild(clipRect);
   defs.appendChild(clipPath);
+  currentGradientMap = buildGradientDefs(layout.marks, defs);
   svg.appendChild(defs);
   renderAxes(svg, layout);
   const clippedGroup = createSVGElement("g");
@@ -4269,6 +4355,7 @@ function renderChartSVG(layout, container, opts) {
   renderChrome(svg, layout);
   renderBrand(svg, layout);
   currentAnimation = void 0;
+  currentGradientMap = /* @__PURE__ */ new Map();
   container.appendChild(svg);
   return svg;
 }
@@ -4511,7 +4598,7 @@ function collectVoronoiPoints(layout) {
   const points = [];
   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 });
       }
@@ -4902,7 +4989,7 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
   };
 }
 function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
-  const SVG_NS3 = "http://www.w3.org/2000/svg";
+  const SVG_NS4 = "http://www.w3.org/2000/svg";
   const cleanups = [];
   const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
@@ -4941,7 +5028,7 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
     const createdHandles = [];
     for (const ep of endpoints) {
       if (!Number.isFinite(ep.cx) || !Number.isFinite(ep.cy)) continue;
-      const handleEl = document.createElementNS(SVG_NS3, "circle");
+      const handleEl = document.createElementNS(SVG_NS4, "circle");
       handleEl.setAttribute("class", "oc-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
       handleEl.setAttribute("cx", String(ep.cx));
@@ -6405,7 +6492,7 @@ import { compileSankey } from "@opendata-ai/openchart-engine";
 // src/sankey-renderer.ts
 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 SVG_NS3 = "http://www.w3.org/2000/svg";
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
 var BRAND_URL2 = "https://tryopendata.ai";
 var EASE_VAR_MAP2 = {
@@ -6413,7 +6500,7 @@ var EASE_VAR_MAP2 = {
   snappy: "var(--oc-ease-snappy)"
 };
 function createSVGElement2(tag) {
-  return document.createElementNS(SVG_NS2, tag);
+  return document.createElementNS(SVG_NS3, tag);
 }
 function setAttrs2(el, attrs) {
   for (const [key, value] of Object.entries(attrs)) {
@@ -6772,7 +6859,7 @@ function renderSankeySVG(layout, animation) {
   const svg = createSVGElement2("svg");
   setAttrs2(svg, {
     viewBox: `0 0 ${width} ${height}`,
-    xmlns: SVG_NS2,
+    xmlns: SVG_NS3,
     overflow: "visible"
   });
   svg.style.height = `${height}px`;