@opendata-ai/openchart-vanilla 6.10.0 → 6.12.0

package/dist/index.d.ts

@@ -100,6 +100,8 @@ 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. */
@@ -151,6 +153,8 @@ 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;
 }
@@ -250,6 +254,8 @@ 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. */
@@ -351,6 +357,8 @@ 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?: {

package/dist/index.js

@@ -376,7 +376,9 @@ var GraphCanvasRenderer = class {
       );
     }
     ctx.restore();
-    this.drawBrand(ctx, cssWidth, cssHeight, theme);
+    if (state.watermark) {
+      this.drawBrand(ctx, cssWidth, cssHeight, theme);
+    }
   }
   // -------------------------------------------------------------------------
   // Brand rendering
@@ -2707,7 +2709,8 @@ function createGraph(container, spec, options) {
       width,
       height,
       theme: options?.theme,
-      darkMode
+      darkMode,
+      watermark: options?.watermark
     };
     return compileGraph(currentSpec, compileOpts);
   }
@@ -2927,7 +2930,8 @@ function createGraph(container, spec, options) {
         adjacencyMap,
         theme: compilation.theme,
         searchMatches: searchManager.getMatches(),
-        isGesturing
+        isGesturing,
+        watermark: compilation.watermark
       };
       renderer.render(state);
     }
@@ -3259,7 +3263,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 +3308,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 +3423,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 +3738,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 +3771,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 +3802,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 +3829,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 +4273,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 +4330,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");
@@ -4267,8 +4357,11 @@ function renderChartSVG(layout, container, opts) {
   renderAnnotations(svg, layout);
   renderLegend(svg, layout.legend);
   renderChrome(svg, layout);
-  renderBrand(svg, layout);
+  if (layout.watermark) {
+    renderBrand(svg, layout);
+  }
   currentAnimation = void 0;
+  currentGradientMap = /* @__PURE__ */ new Map();
   container.appendChild(svg);
   return svg;
 }
@@ -4511,7 +4604,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 +4995,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 +5034,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));
@@ -5567,6 +5660,7 @@ function createChart(container, spec, options) {
       height,
       theme: options?.theme,
       darkMode,
+      watermark: options?.watermark,
       measureText
     };
     if (isLayerSpec(currentSpec)) {
@@ -6405,7 +6499,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 +6507,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 +6866,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`;
@@ -6809,7 +6903,9 @@ function renderSankeySVG(layout, animation) {
   renderLabels(svg, layout.nodes);
   renderLegend2(svg, layout.legend);
   renderChrome2(svg, layout);
-  renderBrand2(svg, layout);
+  if (layout.watermark) {
+    renderBrand2(svg, layout);
+  }
   return svg;
 }
 
@@ -6850,7 +6946,8 @@ function createSankey(container, spec, options) {
       width,
       height,
       theme: options?.theme,
-      darkMode
+      darkMode,
+      watermark: options?.watermark
     };
     return compileSankey(currentSpec, compileOpts);
   }
@@ -7584,18 +7681,20 @@ function renderTable(layout, container, opts) {
   liveRegion.setAttribute("aria-atomic", "true");
   liveRegion.setAttribute("role", "status");
   wrapper.appendChild(liveRegion);
-  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_URL3;
-  brandLink.target = "_blank";
-  brandLink.rel = "noopener";
-  brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE4}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_URL3;
+    brandLink.target = "_blank";
+    brandLink.rel = "noopener";
+    brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE4}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 (opts?.animate && layout.animation?.enabled) {
     const anim = layout.animation;
     const rowCount = layout.rows.length;
@@ -7686,6 +7785,7 @@ function createTable(container, spec, options) {
       height: 600,
       theme: options?.theme,
       darkMode,
+      watermark: options?.watermark,
       sort: state.sort ?? void 0,
       search: state.search || void 0,
       page: state.page