@opendata-ai/openchart-vanilla 3.0.0 → 6.1.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { ChartLayout, ChartSpec, CompileOptions, TableLayout, TableSpec, VizSpec } from '@opendata-ai/openchart-engine';
-import { GraphSpec, ThemeConfig, DarkMode, ChartSpec, ChartLayout, ChartEventHandlers, BarTableCell, CategoryTableCell, TableCell, FlagTableCell, HeatmapTableCell, ImageTableCell, SparklineTableCell, TextTableCell, Mark, TableSpec, SortState, TableLayout, TooltipContent } from '@opendata-ai/openchart-core';
+import { GraphSpec, ThemeConfig, DarkMode, ChartSpec, LayerSpec, ChartLayout, ChartEventHandlers, BarTableCell, CategoryTableCell, TableCell, FlagTableCell, HeatmapTableCell, ImageTableCell, SparklineTableCell, TextTableCell, Mark, TableSpec, SortState, TableLayout, TooltipContent } from '@opendata-ai/openchart-core';
 
 /**
  * Export utilities: serialize charts to SVG, PNG, JPG, or CSV.
@@ -166,7 +166,7 @@ interface ExportOptions extends JPGExportOptions {
 }
 interface ChartInstance {
     /** Re-compile and re-render with a new spec. */
-    update(spec: ChartSpec | GraphSpec): void;
+    update(spec: ChartSpec | LayerSpec | GraphSpec): void;
     /** Re-compile at current container dimensions. */
     resize(): void;
     /** Export the chart. */
@@ -189,7 +189,7 @@ interface ChartInstance {
  * @param options - Mount options (theme, darkMode, responsive, etc.).
  * @returns A ChartInstance with update/resize/export/destroy methods.
  */
-declare function createChart(container: HTMLElement, spec: ChartSpec | GraphSpec, options?: MountOptions): ChartInstance;
+declare function createChart(container: HTMLElement, spec: ChartSpec | LayerSpec | GraphSpec, options?: MountOptions): ChartInstance;
 
 /**
  * Table cell renderers: produce DOM elements for each cell type.

package/dist/index.js

@@ -3210,7 +3210,8 @@ function escapeHtml(str) {
 }
 
 // src/mount.ts
-import { compileChart } from "@opendata-ai/openchart-engine";
+import { isLayerSpec } from "@opendata-ai/openchart-core";
+import { compileChart, compileLayer } from "@opendata-ai/openchart-engine";
 
 // src/svg-renderer.ts
 import { estimateTextWidth } from "@opendata-ai/openchart-core";
@@ -3419,7 +3420,7 @@ function renderAxis(parent, axis, orientation, layout) {
         y2: gridline.position,
         stroke: layout.theme.colors.gridline,
         "stroke-width": 1,
-        "stroke-opacity": 0.35
+        "stroke-opacity": 0.6
       });
     } else {
       setAttrs(gl, {
@@ -3429,7 +3430,7 @@ function renderAxis(parent, axis, orientation, layout) {
         y2: area.y + area.height,
         stroke: layout.theme.colors.gridline,
         "stroke-width": 1,
-        "stroke-opacity": 0.35
+        "stroke-opacity": 0.6
       });
     }
     g.appendChild(gl);
@@ -3633,11 +3634,86 @@ function renderPointMark(mark, index2) {
   }
   return circle;
 }
+function renderTextMark(mark, index2) {
+  const text = createSVGElement("text");
+  text.setAttribute("data-mark-id", `textMark-${index2}`);
+  text.setAttribute("class", "viz-mark viz-mark-text");
+  setAttrs(text, {
+    x: mark.x,
+    y: mark.y,
+    "font-size": mark.fontSize,
+    "text-anchor": mark.textAnchor
+  });
+  text.style.setProperty("fill", mark.fill);
+  if (mark.fontWeight) {
+    text.setAttribute("font-weight", String(mark.fontWeight));
+  }
+  if (mark.fontFamily) {
+    text.setAttribute("font-family", mark.fontFamily);
+  }
+  if (mark.angle) {
+    text.setAttribute("transform", `rotate(${mark.angle}, ${mark.x}, ${mark.y})`);
+  }
+  text.textContent = mark.text;
+  return text;
+}
+function renderRuleMark(mark, index2) {
+  const line = createSVGElement("line");
+  line.setAttribute("data-mark-id", `rule-${index2}`);
+  line.setAttribute("class", "viz-mark viz-mark-rule");
+  setAttrs(line, {
+    x1: mark.x1,
+    y1: mark.y1,
+    x2: mark.x2,
+    y2: mark.y2,
+    stroke: mark.stroke,
+    "stroke-width": mark.strokeWidth
+  });
+  if (mark.strokeDasharray) {
+    line.setAttribute("stroke-dasharray", mark.strokeDasharray);
+  }
+  if (mark.opacity != null) {
+    line.setAttribute("opacity", String(mark.opacity));
+  }
+  return line;
+}
+function renderTickMark(mark, index2) {
+  const line = createSVGElement("line");
+  line.setAttribute("data-mark-id", `tick-${index2}`);
+  line.setAttribute("class", "viz-mark viz-mark-tick");
+  const half = mark.length / 2;
+  if (mark.orient === "vertical") {
+    setAttrs(line, {
+      x1: mark.x,
+      y1: mark.y - half,
+      x2: mark.x,
+      y2: mark.y + half,
+      stroke: mark.stroke,
+      "stroke-width": mark.strokeWidth
+    });
+  } else {
+    setAttrs(line, {
+      x1: mark.x - half,
+      y1: mark.y,
+      x2: mark.x + half,
+      y2: mark.y,
+      stroke: mark.stroke,
+      "stroke-width": mark.strokeWidth
+    });
+  }
+  if (mark.opacity != null) {
+    line.setAttribute("opacity", String(mark.opacity));
+  }
+  return line;
+}
 registerMarkRenderer("line", renderLineMark);
 registerMarkRenderer("area", renderAreaMark);
 registerMarkRenderer("rect", renderRectMark);
 registerMarkRenderer("arc", renderArcMark);
 registerMarkRenderer("point", renderPointMark);
+registerMarkRenderer("textMark", renderTextMark);
+registerMarkRenderer("rule", renderRuleMark);
+registerMarkRenderer("tick", renderTickMark);
 function getMarkSeries(mark) {
   if (mark.type === "line" || mark.type === "area") {
     return mark.seriesKey;
@@ -3974,10 +4050,10 @@ function renderBrand(parent, layout) {
   setAttrs(text, {
     x: rightEdge,
     y: chromeY,
+    "dominant-baseline": "hanging",
     "font-family": layout.theme.fonts.family,
     "font-size": BRAND_FONT_SIZE,
     "text-anchor": "end",
-    "dominant-baseline": "hanging",
     "fill-opacity": 0.55
   });
   text.style.setProperty("fill", fill);
@@ -3997,7 +4073,13 @@ function renderChartSVG(layout, container) {
   const svg = createSVGElement("svg");
   setAttrs(svg, {
     viewBox: `0 0 ${width} ${height}`,
-    xmlns: SVG_NS
+    xmlns: SVG_NS,
+    // 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
+    // overflow:visible prevents the clipping. Chart marks are already
+    // constrained by a clipPath, so nothing bleeds out.
+    overflow: "visible"
   });
   svg.style.height = `${height}px`;
   svg.setAttribute("role", layout.a11y.role);
@@ -4030,6 +4112,23 @@ function renderChartSVG(layout, container) {
   const clippedGroup = createSVGElement("g");
   clippedGroup.setAttribute("clip-path", `url(#${clipId})`);
   renderMarks(clippedGroup, layout);
+  const hasLineOrAreaWithDataPoints = layout.marks.some(
+    (m2) => (m2.type === "line" || m2.type === "area") && m2.dataPoints && m2.dataPoints.length > 0
+  );
+  const hasPointMarks = layout.marks.some((m2) => m2.type === "point");
+  if (hasLineOrAreaWithDataPoints && !hasPointMarks) {
+    const overlay = createSVGElement("rect");
+    setAttrs(overlay, {
+      x: layout.area.x,
+      y: layout.area.y,
+      width: layout.area.width,
+      height: layout.area.height,
+      fill: "transparent"
+    });
+    overlay.setAttribute("class", "viz-voronoi-overlay");
+    overlay.setAttribute("data-voronoi-overlay", "true");
+    clippedGroup.appendChild(overlay);
+  }
   svg.appendChild(clippedGroup);
   renderAnnotations(svg, layout);
   renderLegend(svg, layout.legend);
@@ -4120,6 +4219,89 @@ function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
     }
   };
 }
+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;
+      for (const dp of mark.dataPoints) {
+        points.push({ ...dp, color });
+      }
+    }
+  }
+  return points;
+}
+function findNearestPoint(points, x3, y3) {
+  if (points.length === 0) return null;
+  let nearest = points[0];
+  let minDist = (points[0].x - x3) ** 2 + (points[0].y - y3) ** 2;
+  for (let i = 1; i < points.length; i++) {
+    const dist = (points[i].x - x3) ** 2 + (points[i].y - y3) ** 2;
+    if (dist < minDist) {
+      minDist = dist;
+      nearest = points[i];
+    }
+  }
+  return nearest;
+}
+function wireVoronoiTooltipEvents(svg, layout, tooltipManager) {
+  const overlay = svg.querySelector("[data-voronoi-overlay]");
+  if (!overlay) return () => {
+  };
+  const voronoiPoints = collectVoronoiPoints(layout);
+  if (voronoiPoints.length === 0) return () => {
+  };
+  const cleanups = [];
+  const handleMouseMove = (e) => {
+    const mouseEvent = e;
+    const svgEl = svg;
+    const svgRect = svgEl.getBoundingClientRect();
+    const viewBox = svgEl.viewBox?.baseVal;
+    const scaleX = viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1;
+    const scaleY = viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1;
+    const svgX = (mouseEvent.clientX - svgRect.left) * scaleX;
+    const svgY = (mouseEvent.clientY - svgRect.top) * scaleY;
+    const nearest = findNearestPoint(voronoiPoints, svgX, svgY);
+    if (!nearest?.tooltip) return;
+    const containerX = mouseEvent.clientX - svgRect.left;
+    const containerY = mouseEvent.clientY - svgRect.top;
+    tooltipManager.show(nearest.tooltip, containerX, containerY);
+  };
+  const handleMouseLeave = () => {
+    tooltipManager.hide();
+  };
+  const handleTouchStart = (e) => {
+    const touchEvent = e;
+    if (touchEvent.touches.length > 0) {
+      const touch = touchEvent.touches[0];
+      const svgEl = svg;
+      const svgRect = svgEl.getBoundingClientRect();
+      const viewBox = svgEl.viewBox?.baseVal;
+      const scaleX = viewBox?.width && svgRect.width ? viewBox.width / svgRect.width : 1;
+      const scaleY = viewBox?.height && svgRect.height ? viewBox.height / svgRect.height : 1;
+      const svgX = (touch.clientX - svgRect.left) * scaleX;
+      const svgY = (touch.clientY - svgRect.top) * scaleY;
+      const nearest = findNearestPoint(voronoiPoints, svgX, svgY);
+      if (!nearest?.tooltip) return;
+      const containerX = touch.clientX - svgRect.left;
+      const containerY = touch.clientY - svgRect.top;
+      tooltipManager.show(nearest.tooltip, containerX, containerY);
+    }
+  };
+  overlay.addEventListener("mousemove", handleMouseMove);
+  overlay.addEventListener("mouseleave", handleMouseLeave);
+  overlay.addEventListener("touchstart", handleTouchStart);
+  cleanups.push(() => {
+    overlay.removeEventListener("mousemove", handleMouseMove);
+    overlay.removeEventListener("mouseleave", handleMouseLeave);
+    overlay.removeEventListener("touchstart", handleTouchStart);
+  });
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
 function buildMarkDataMap(layout) {
   const map = /* @__PURE__ */ new Map();
   for (let i = 0; i < layout.marks.length; i++) {
@@ -4448,10 +4630,10 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
     if (!connectorLine && !curvedPath) continue;
     let fromX, fromY, toX, toY;
     if (connectorLine) {
-      fromX = Number(connectorLine.getAttribute("x1"));
-      fromY = Number(connectorLine.getAttribute("y1"));
-      toX = Number(connectorLine.getAttribute("x2"));
-      toY = Number(connectorLine.getAttribute("y2"));
+      fromX = Number(connectorLine.getAttribute("x1")) || 0;
+      fromY = Number(connectorLine.getAttribute("y1")) || 0;
+      toX = Number(connectorLine.getAttribute("x2")) || 0;
+      toY = Number(connectorLine.getAttribute("y2")) || 0;
     } else {
       const pathD = curvedPath.getAttribute("d") ?? "";
       const mMatch = pathD.match(/M\s*([\d.e+-]+)\s+([\d.e+-]+)/);
@@ -4461,8 +4643,8 @@ function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
       const points = arrowhead?.getAttribute("points") ?? "";
       const firstPoint = points.split(" ")[0] ?? "0,0";
       const [px, py] = firstPoint.split(",");
-      toX = Number(px);
-      toY = Number(py);
+      toX = Number(px) || 0;
+      toY = Number(py) || 0;
     }
     const endpoints = [
       { name: "from", cx: fromX, cy: fromY },
@@ -4470,6 +4652,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_NS2, "circle");
       handleEl.setAttribute("class", "viz-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
@@ -4906,6 +5089,7 @@ function createChart(container, spec, options) {
   let tooltipManager = null;
   let disconnectResize = null;
   let cleanupTooltipEvents = null;
+  let cleanupVoronoiEvents = null;
   let cleanupKeyboardNav = null;
   let cleanupLegend = null;
   let cleanupChartEvents = null;
@@ -4927,6 +5111,9 @@ function createChart(container, spec, options) {
       darkMode,
       measureText
     };
+    if (isLayerSpec(currentSpec)) {
+      return compileLayer(currentSpec, compileOpts);
+    }
     return compileChart(currentSpec, compileOpts);
   }
   function getContainerDimensions() {
@@ -4945,6 +5132,10 @@ function createChart(container, spec, options) {
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
     }
+    if (cleanupVoronoiEvents) {
+      cleanupVoronoiEvents();
+      cleanupVoronoiEvents = null;
+    }
     if (cleanupKeyboardNav) {
       cleanupKeyboardNav();
       cleanupKeyboardNav = null;
@@ -4983,6 +5174,7 @@ function createChart(container, spec, options) {
       currentLayout.tooltipDescriptors,
       tooltipManager
     );
+    cleanupVoronoiEvents = wireVoronoiTooltipEvents(svgElement, currentLayout, tooltipManager);
     cleanupKeyboardNav = wireKeyboardNav(
       svgElement,
       container,
@@ -5025,9 +5217,10 @@ function createChart(container, spec, options) {
       editCleanups.push(
         wireAnnotationLabelDrag(svgElement, dragAnnotations, options.onEdit, setDragging)
       );
-      editCleanups.push(wireChromeDrag(svgElement, currentSpec, options.onEdit, setDragging));
-      editCleanups.push(wireLegendDrag(svgElement, currentSpec, options.onEdit, setDragging));
-      editCleanups.push(wireSeriesLabelDrag(svgElement, currentSpec, options.onEdit, setDragging));
+      const editSpec = currentSpec;
+      editCleanups.push(wireChromeDrag(svgElement, editSpec, options.onEdit, setDragging));
+      editCleanups.push(wireLegendDrag(svgElement, editSpec, options.onEdit, setDragging));
+      editCleanups.push(wireSeriesLabelDrag(svgElement, editSpec, options.onEdit, setDragging));
       cleanupEditDrags = () => {
         for (const cleanup of editCleanups) {
           cleanup();
@@ -5084,6 +5277,10 @@ function createChart(container, spec, options) {
       cleanupTooltipEvents();
       cleanupTooltipEvents = null;
     }
+    if (cleanupVoronoiEvents) {
+      cleanupVoronoiEvents();
+      cleanupVoronoiEvents = null;
+    }
     if (cleanupKeyboardNav) {
       cleanupKeyboardNav();
       cleanupKeyboardNav = null;