@opendata-ai/openchart-vanilla 7.7.0 → 7.9.0

package/dist/{chunk-PSMDJEXK.js → chunk-QRE4FQQM.js}

@@ -128,7 +128,10 @@ function resetMarkRenderState() {
   currentGradientMap = /* @__PURE__ */ new Map();
 }
 function stampAnimationAttrs(el, mark, fallbackIndex) {
-  if (!currentAnimation?.enabled) return;
+  if (mark.key) {
+    el.setAttribute("data-key", mark.key);
+  }
+  if (!currentAnimation?.enter) return;
   const idx = mark.animationIndex ?? fallbackIndex;
   el.setAttribute("data-animation-index", String(idx));
   el.style.setProperty("--oc-mark-index", String(idx));
@@ -214,7 +217,7 @@ function renderAreaMark(mark, index) {
   }
   return g;
 }
-function _rectPathWithCorners(mark, sides) {
+function rectPathWithCorners(mark, sides) {
   const { x, y, width: w, height: h } = mark;
   const r = Math.max(0, Math.min(mark.cornerRadius ?? 0, w / 2, h / 2));
   const tl = sides.tl ? r : 0;
@@ -239,14 +242,14 @@ function renderRectMark(mark, index) {
   g.setAttribute("data-mark-id", `rect-${index}`);
   g.setAttribute("class", "oc-mark oc-mark-rect");
   stampAnimationAttrs(g, mark, index);
-  if (currentAnimation?.enabled && mark.orient === "horizontal") {
+  if (currentAnimation?.enter && mark.orient === "horizontal") {
     g.setAttribute("data-orient", "horizontal");
   }
   const sides = mark.cornerRadiusSides;
   const partialCorners = !!sides && (!sides.tl || !sides.tr || !sides.br || !sides.bl) && !!mark.cornerRadius;
   const shapeEl = partialCorners ? createSVGElement("path") : createSVGElement("rect");
   if (partialCorners) {
-    shapeEl.setAttribute("d", _rectPathWithCorners(mark, sides));
+    shapeEl.setAttribute("d", rectPathWithCorners(mark, sides));
   } else {
     setAttrs(shapeEl, {
       x: mark.x,
@@ -396,6 +399,11 @@ registerMarkRenderer("point", renderPointMark);
 registerMarkRenderer("textMark", renderTextMark);
 registerMarkRenderer("rule", renderRuleMark);
 registerMarkRenderer("tick", renderTickMark);
+function renderSingleMark(mark, index) {
+  const renderer = markRenderers[mark.type];
+  if (!renderer) return void 0;
+  return renderer(mark, index);
+}
 function getMarkSeries(mark) {
   if (mark.type === "line" || mark.type === "area") {
     return mark.seriesKey;
@@ -426,7 +434,7 @@ function renderMarks(parent, layout) {
     if (series) {
       el.setAttribute("data-series", series);
     }
-    if (currentAnimation?.enabled && mark.type === "rect") {
+    if (currentAnimation?.enter && mark.type === "rect") {
       const rect = mark;
       if (rect.stackGroup && rect.stackPos !== void 0) {
         el.setAttribute("data-stack-pos", String(rect.stackPos));
@@ -454,7 +462,7 @@ function renderMarks(parent, layout) {
     setAttrs(label, { x: rect.label.x, y: rect.label.y });
     applyTextStyle(label, rect.label.style);
     label.textContent = rect.label.text;
-    if (currentAnimation?.enabled) {
+    if (currentAnimation?.enter) {
       const idx = rect.animationIndex ?? i;
       label.setAttribute("data-animation-index", String(idx));
       label.style.setProperty(
@@ -741,6 +749,7 @@ import {
   TICK_LABEL_OFFSET,
   textAscent
 } from "@opendata-ai/openchart-core";
+import { serializeKeyValue } from "@opendata-ai/openchart-engine";
 function appendCompoundLabel(parent, primaryText, subtitle, fontWeight) {
   const primarySpan = createSVGElement("tspan");
   primarySpan.setAttribute("font-weight", String(fontWeight));
@@ -776,9 +785,11 @@ function renderAxis(parent, axis, orientation, layout) {
     g.appendChild(line);
   }
   for (const tick of axis.ticks) {
+    const tickKey = serializeKeyValue(tick.value);
     if (orientation === "x") {
       const label = createSVGElement("text");
       label.setAttribute("class", "oc-axis-tick");
+      label.setAttribute("data-tick-key", tickKey);
       if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
         const labelX = tick.position;
         const xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
@@ -804,6 +815,7 @@ function renderAxis(parent, axis, orientation, layout) {
     } else if (isInlineY) {
       const label = createSVGElement("text");
       label.setAttribute("class", "oc-axis-tick oc-axis-tick-inline");
+      label.setAttribute("data-tick-key", tickKey);
       setAttrs(label, {
         x: area.x,
         y: tick.position - 6,
@@ -815,6 +827,7 @@ function renderAxis(parent, axis, orientation, layout) {
     } else {
       const label = createSVGElement("text");
       label.setAttribute("class", "oc-axis-tick");
+      label.setAttribute("data-tick-key", tickKey);
       setAttrs(label, {
         x: isRight ? area.x + area.width + TICK_LABEL_OFFSET : area.x - TICK_LABEL_OFFSET,
         y: tick.position,
@@ -890,9 +903,17 @@ function renderAxis(parent, axis, orientation, layout) {
     }
   }
   if (!isRight) {
+    const posToTickKey = /* @__PURE__ */ new Map();
+    for (const tick of axis.ticks) {
+      posToTickKey.set(tick.position, serializeKeyValue(tick.value));
+    }
     for (const gridline of axis.gridlines) {
       const gl = createSVGElement("line");
       gl.setAttribute("class", "oc-gridline");
+      const glKey = posToTickKey.get(gridline.position);
+      if (glKey) {
+        gl.setAttribute("data-tick-key", glKey);
+      }
       if (orientation === "y") {
         setAttrs(gl, {
           x1: area.x,
@@ -1471,13 +1492,14 @@ function renderChartSVG(layout, container, opts) {
   }
   const classes = opts?.animate ? "oc-chart oc-animate" : "oc-chart";
   svg.setAttribute("class", classes);
-  if (animation?.enabled) {
+  const enterPhase = animation?.enter;
+  if (enterPhase) {
     const markCount = layout.marks.length;
-    const stagger = clampStaggerDelay(animation.staggerDelay, markCount);
-    svg.style.setProperty("--oc-animation-duration", `${animation.duration}ms`);
+    const stagger = clampStaggerDelay(enterPhase.staggerDelay, markCount);
+    svg.style.setProperty("--oc-animation-duration", `${enterPhase.duration}ms`);
     svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
     svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
-    const easeVar = EASE_VAR_MAP[animation.ease] || EASE_VAR_MAP.smooth;
+    const easeVar = EASE_VAR_MAP[enterPhase.ease] || EASE_VAR_MAP.smooth;
     svg.style.setProperty("--oc-animation-ease", easeVar);
     let maxSegments = 0;
     for (const m of layout.marks) {
@@ -1489,7 +1511,7 @@ function renderChartSVG(layout, container, opts) {
       }
     }
     if (maxSegments > 0) {
-      const segDuration = Math.round(animation.duration / maxSegments);
+      const segDuration = Math.round(enterPhase.duration / maxSegments);
       svg.style.setProperty("--oc-stack-segment-duration", `${segDuration}ms`);
     }
   }
@@ -1670,11 +1692,355 @@ function renderFacetedPanels(svg, layout, panels, defs) {
   }
 }
 
+// src/tilemap-renderer.ts
+import { textAscent as textAscent4 } from "@opendata-ai/openchart-core";
+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 = {
+  smooth: "var(--oc-ease-smooth)",
+  snappy: "var(--oc-ease-snappy)"
+};
+function createSVGElement2(tag) {
+  return document.createElementNS(SVG_NS3, tag);
+}
+function setAttrs2(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, String(value));
+  }
+}
+function renderChrome2(parent, layout) {
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-chrome");
+  const { chrome } = layout;
+  const bottomOffset = layout.area.y + layout.area.height;
+  if (chrome.title) {
+    const text = createSVGElement2("text");
+    setAttrs2(text, {
+      x: chrome.title.x,
+      y: chrome.title.y + textAscent4(chrome.title.style.fontSize)
+    });
+    text.setAttribute("class", "oc-title");
+    text.setAttribute("font-family", chrome.title.style.fontFamily);
+    text.setAttribute("font-size", String(chrome.title.style.fontSize));
+    text.setAttribute("font-weight", String(chrome.title.style.fontWeight));
+    text.style.setProperty("fill", chrome.title.style.fill);
+    text.textContent = chrome.title.text;
+    g.appendChild(text);
+  }
+  if (chrome.subtitle) {
+    const text = createSVGElement2("text");
+    setAttrs2(text, {
+      x: chrome.subtitle.x,
+      y: chrome.subtitle.y + textAscent4(chrome.subtitle.style.fontSize)
+    });
+    text.setAttribute("class", "oc-subtitle");
+    text.setAttribute("font-family", chrome.subtitle.style.fontFamily);
+    text.setAttribute("font-size", String(chrome.subtitle.style.fontSize));
+    text.setAttribute("font-weight", String(chrome.subtitle.style.fontWeight));
+    text.style.setProperty(
+      "fill",
+      chrome.subtitle.style.fill
+    );
+    text.textContent = chrome.subtitle.text;
+    g.appendChild(text);
+  }
+  if (chrome.source) {
+    const text = createSVGElement2("text");
+    setAttrs2(text, {
+      x: chrome.source.x,
+      y: bottomOffset + chrome.source.y + textAscent4(chrome.source.style.fontSize)
+    });
+    text.setAttribute("class", "oc-source");
+    text.setAttribute("font-family", chrome.source.style.fontFamily);
+    text.setAttribute("font-size", String(chrome.source.style.fontSize));
+    text.setAttribute("font-weight", String(chrome.source.style.fontWeight));
+    text.style.setProperty(
+      "fill",
+      chrome.source.style.fill
+    );
+    text.textContent = chrome.source.text;
+    g.appendChild(text);
+  }
+  if (chrome.byline) {
+    const text = createSVGElement2("text");
+    setAttrs2(text, {
+      x: chrome.byline.x,
+      y: bottomOffset + chrome.byline.y + textAscent4(chrome.byline.style.fontSize)
+    });
+    text.setAttribute("class", "oc-byline");
+    text.setAttribute("font-family", chrome.byline.style.fontFamily);
+    text.setAttribute("font-size", String(chrome.byline.style.fontSize));
+    text.setAttribute("font-weight", String(chrome.byline.style.fontWeight));
+    text.style.setProperty(
+      "fill",
+      chrome.byline.style.fill
+    );
+    text.textContent = chrome.byline.text;
+    g.appendChild(text);
+  }
+  if (chrome.footer) {
+    const text = createSVGElement2("text");
+    setAttrs2(text, {
+      x: chrome.footer.x,
+      y: bottomOffset + chrome.footer.y + textAscent4(chrome.footer.style.fontSize)
+    });
+    text.setAttribute("class", "oc-footer");
+    text.setAttribute("font-family", chrome.footer.style.fontFamily);
+    text.setAttribute("font-size", String(chrome.footer.style.fontSize));
+    text.setAttribute("font-weight", String(chrome.footer.style.fontWeight));
+    text.style.setProperty(
+      "fill",
+      chrome.footer.style.fill
+    );
+    text.textContent = chrome.footer.text;
+    g.appendChild(text);
+  }
+  parent.appendChild(g);
+}
+function renderWatermark(parent, layout) {
+  if (layout.width < 480) return;
+  const { width, height } = layout;
+  const { theme } = layout;
+  const padding = theme.spacing.padding;
+  const rightEdge = width - padding;
+  const bottomEdge = height - padding;
+  const fill = theme.colors.axis;
+  const a = createSVGElement2("a");
+  a.setAttribute("href", BRAND_URL2);
+  a.setAttributeNS(XLINK_NS2, "xlink:href", BRAND_URL2);
+  a.setAttribute("target", "_blank");
+  a.setAttribute("rel", "noopener");
+  a.setAttribute("class", "oc-chrome-ref");
+  const text = createSVGElement2("text");
+  setAttrs2(text, {
+    x: rightEdge,
+    y: bottomEdge,
+    "dominant-baseline": "alphabetic",
+    "text-anchor": "end",
+    "font-family": theme.fonts.family,
+    "font-size": 12,
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  const trySpan = createSVGElement2("tspan");
+  setAttrs2(trySpan, { "font-weight": 500 });
+  trySpan.textContent = "try";
+  const openDataSpan = createSVGElement2("tspan");
+  setAttrs2(openDataSpan, { "font-weight": 600, "font-size": 16 });
+  openDataSpan.textContent = "OpenData";
+  const aiSpan = createSVGElement2("tspan");
+  setAttrs2(aiSpan, { "font-weight": 500 });
+  aiSpan.textContent = ".ai";
+  text.appendChild(trySpan);
+  text.appendChild(openDataSpan);
+  text.appendChild(aiSpan);
+  a.appendChild(text);
+  parent.appendChild(a);
+}
+function renderTiles(parent, tiles, animation) {
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-tilemap-tiles");
+  g.setAttribute("role", "list");
+  const tileDelays = [];
+  if (animation?.enter) {
+    const baseStagger = 800 / Math.max(tiles.length, 1);
+    let seed = 17;
+    for (let i = 0; i < tiles.length; i++) {
+      const idx = tiles[i].animationIndex ?? i;
+      seed = seed * 1103515245 + 12345 & 2147483647;
+      const jitter = (seed % 1e3 / 1e3 - 0.5) * 0.8;
+      tileDelays.push(Math.max(0, Math.round(idx * baseStagger * (1 + jitter))));
+    }
+  }
+  for (let i = 0; i < tiles.length; i++) {
+    const tile = tiles[i];
+    const tileGroup = createSVGElement2("g");
+    tileGroup.setAttribute("class", "oc-tilemap-tile");
+    tileGroup.setAttribute("data-state", tile.stateCode);
+    tileGroup.setAttribute("role", "listitem");
+    if (tile.aria?.label) {
+      tileGroup.setAttribute("aria-label", tile.aria.label);
+    }
+    if (animation?.enter) {
+      const idx = tile.animationIndex ?? i;
+      tileGroup.setAttribute("data-animation-index", String(idx));
+      tileGroup.style.setProperty(
+        "--oc-mark-index",
+        String(idx)
+      );
+      tileGroup.style.setProperty(
+        "--oc-tile-delay",
+        `${tileDelays[i]}ms`
+      );
+    }
+    const rect = createSVGElement2("rect");
+    setAttrs2(rect, {
+      x: tile.x,
+      y: tile.y,
+      width: tile.size,
+      height: tile.size,
+      rx: tile.cornerRadius,
+      fill: tile.fill,
+      "fill-opacity": tile.fillOpacity ?? 1,
+      stroke: tile.stroke,
+      "stroke-width": tile.strokeWidth
+    });
+    tileGroup.appendChild(rect);
+    const codeLabel = createSVGElement2("text");
+    setAttrs2(codeLabel, {
+      x: tile.label.x,
+      y: tile.label.y,
+      "text-anchor": "middle",
+      "dominant-baseline": "central",
+      "font-family": tile.label.style.fontFamily,
+      "font-size": tile.label.style.fontSize,
+      "font-weight": tile.label.style.fontWeight
+    });
+    codeLabel.style.setProperty(
+      "fill",
+      tile.label.style.fill
+    );
+    codeLabel.textContent = tile.label.text;
+    tileGroup.appendChild(codeLabel);
+    if (tile.valueLabel.visible && tile.valueLabel.text) {
+      const valueLabel = createSVGElement2("text");
+      setAttrs2(valueLabel, {
+        x: tile.valueLabel.x,
+        y: tile.valueLabel.y,
+        "text-anchor": "middle",
+        "dominant-baseline": "central",
+        "font-family": tile.valueLabel.style.fontFamily,
+        "font-size": tile.valueLabel.style.fontSize,
+        "font-weight": tile.valueLabel.style.fontWeight
+      });
+      valueLabel.style.setProperty(
+        "fill",
+        tile.valueLabel.style.fill
+      );
+      valueLabel.textContent = tile.valueLabel.text;
+      tileGroup.appendChild(valueLabel);
+    }
+    g.appendChild(tileGroup);
+  }
+  parent.appendChild(g);
+}
+function renderGradientLegend(parent, layout) {
+  if (!layout.gradientLegend) return;
+  const { gradientLegend } = layout;
+  const g = createSVGElement2("g");
+  g.setAttribute("class", "oc-tilemap-legend");
+  const defs = parent.querySelector("defs") || createSVGElement2("defs");
+  const exists = parent.querySelector("defs");
+  if (!exists) {
+    parent.insertBefore(defs, parent.firstChild);
+  }
+  const gradientId = nextSvgId("oc-tilemap-legend-gradient");
+  const grad = createSVGElement2("linearGradient");
+  grad.id = gradientId;
+  grad.setAttribute("x1", "0%");
+  grad.setAttribute("y1", "0%");
+  grad.setAttribute("x2", "100%");
+  grad.setAttribute("y2", "0%");
+  for (const stop of gradientLegend.colorStops) {
+    const s = createSVGElement2("stop");
+    const attrs = {
+      offset: `${stop.offset * 100}%`,
+      "stop-color": stop.color
+    };
+    if (stop.opacity !== void 0) {
+      attrs["stop-opacity"] = stop.opacity;
+    }
+    setAttrs2(s, attrs);
+    grad.appendChild(s);
+  }
+  defs.appendChild(grad);
+  const barHeight = gradientLegend.bounds.height;
+  const bar = createSVGElement2("rect");
+  setAttrs2(bar, {
+    x: gradientLegend.bounds.x,
+    y: gradientLegend.bounds.y,
+    width: gradientLegend.bounds.width,
+    height: barHeight,
+    rx: barHeight / 2,
+    fill: `url(#${gradientId})`
+  });
+  g.appendChild(bar);
+  const minText = createSVGElement2("text");
+  setAttrs2(minText, {
+    x: gradientLegend.bounds.x,
+    y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,
+    "text-anchor": "start",
+    "font-family": gradientLegend.labelStyle.fontFamily,
+    "font-size": gradientLegend.labelStyle.fontSize,
+    "font-weight": gradientLegend.labelStyle.fontWeight
+  });
+  minText.style.setProperty(
+    "fill",
+    gradientLegend.labelStyle.fill
+  );
+  minText.textContent = gradientLegend.minLabel;
+  g.appendChild(minText);
+  const maxText = createSVGElement2("text");
+  setAttrs2(maxText, {
+    x: gradientLegend.bounds.x + gradientLegend.bounds.width,
+    y: gradientLegend.bounds.y + gradientLegend.bounds.height + 14,
+    "text-anchor": "end",
+    "font-family": gradientLegend.labelStyle.fontFamily,
+    "font-size": gradientLegend.labelStyle.fontSize,
+    "font-weight": gradientLegend.labelStyle.fontWeight
+  });
+  maxText.style.setProperty(
+    "fill",
+    gradientLegend.labelStyle.fill
+  );
+  maxText.textContent = gradientLegend.maxLabel;
+  g.appendChild(maxText);
+  parent.appendChild(g);
+}
+function renderTileMapSVG(layout, opts) {
+  const { width, height, tiles, a11y, watermark, animation } = layout;
+  const animate = opts?.animate && !!animation?.enter;
+  const svg = createSVGElement2("svg");
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.setAttribute("role", "img");
+  if (a11y.altText) {
+    svg.setAttribute("aria-label", a11y.altText);
+  }
+  const classes = animate ? "oc-tilemap oc-animate" : "oc-tilemap";
+  svg.setAttribute("class", classes);
+  if (animate && animation?.enter) {
+    const stagger = Math.max(5, Math.round(800 / Math.max(tiles.length, 1)));
+    svg.style.setProperty("--oc-animation-duration", `${animation.enter.duration}ms`);
+    svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
+    svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
+    const easeVar = EASE_VAR_MAP2[animation.enter.ease] || EASE_VAR_MAP2.smooth;
+    svg.style.setProperty("--oc-animation-ease", easeVar);
+  }
+  const defs = createSVGElement2("defs");
+  svg.appendChild(defs);
+  renderChrome2(svg, layout);
+  renderTiles(svg, tiles, animate ? animation : void 0);
+  if (layout.categoricalLegend) {
+    renderLegend(svg, layout.categoricalLegend);
+  } else {
+    renderGradientLegend(svg, layout);
+  }
+  if (watermark) {
+    renderWatermark(svg, layout);
+  }
+  return svg;
+}
+
 export {
   resetSvgIdCounter,
+  buildGradientDefs,
+  resolveMarkFill,
   SVG_NS,
-  renderLegend,
   registerMarkRenderer,
-  renderChartSVG
+  rectPathWithCorners,
+  renderSingleMark,
+  renderChartSVG,
+  renderTileMapSVG
 };
-//# sourceMappingURL=chunk-PSMDJEXK.js.map
+//# sourceMappingURL=chunk-QRE4FQQM.js.map