@opendata-ai/openchart-vanilla 7.7.0 → 7.8.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import {
   registerMarkRenderer,
   renderChartSVG,
-  renderLegend
-} from "./chunk-PSMDJEXK.js";
+  renderTileMapSVG
+} from "./chunk-KYRQV6KR.js";
 
 // src/barlist-mount.ts
 import { compileBarList } from "@opendata-ai/openchart-engine";
@@ -3370,7 +3370,7 @@ function createGraph(container, spec, options) {
     }
     chromeEl = document.createElement("div");
     chromeEl.className = "oc-graph-chrome";
-    renderChrome4();
+    renderChrome3();
     wrapper.appendChild(chromeEl);
     canvas = document.createElement("canvas");
     canvas.className = "oc-graph-canvas";
@@ -3382,7 +3382,7 @@ function createGraph(container, spec, options) {
     if (options?.legend !== false) {
       legendEl = document.createElement("div");
       legendEl.className = "oc-graph-legend";
-      renderLegend3();
+      renderLegend2();
       wrapper.appendChild(legendEl);
     }
     container.appendChild(wrapper);
@@ -3390,7 +3390,7 @@ function createGraph(container, spec, options) {
     renderer = new GraphCanvasRenderer(canvas);
     renderer.resize(width, canvasHeight);
   }
-  function renderChrome4() {
+  function renderChrome3() {
     if (!chromeEl) return;
     let html = "";
     if (compilation.chrome.title) {
@@ -3406,7 +3406,7 @@ function createGraph(container, spec, options) {
       chromeEl.style.display = "";
     }
   }
-  function renderLegend3() {
+  function renderLegend2() {
     if (!legendEl) return;
     const entries = "entries" in compilation.legend ? compilation.legend.entries : [];
     if (entries.length === 0) {
@@ -3704,8 +3704,8 @@ function createGraph(container, spec, options) {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
     buildDataMaps();
-    renderChrome4();
-    renderLegend3();
+    renderChrome3();
+    renderLegend2();
     initSimulation();
     initInteraction();
     hoveredNodeId = null;
@@ -3739,8 +3739,8 @@ function createGraph(container, spec, options) {
       };
     });
     spatialIndex.rebuild(positionedNodes);
-    renderChrome4();
-    renderLegend3();
+    renderChrome3();
+    renderLegend2();
     needsRender = true;
     scheduleRender();
   }
@@ -4335,7 +4335,7 @@ function wireAnnotationDrag(svg, specAnnotations, onAnnotationEdit, onEdit, setD
   };
 }
 function wireConnectorEndpointDrag(svg, specAnnotations, onEdit, setDragging) {
-  const SVG_NS4 = "http://www.w3.org/2000/svg";
+  const SVG_NS3 = "http://www.w3.org/2000/svg";
   const cleanups = [];
   const annotationGroups = svg.querySelectorAll(".oc-annotation-text");
   for (const el of annotationGroups) {
@@ -4374,7 +4374,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_NS4, "circle");
+      const handleEl = document.createElementNS(SVG_NS3, "circle");
       handleEl.setAttribute("class", "oc-connector-handle");
       handleEl.setAttribute("data-endpoint", ep.name);
       handleEl.setAttribute("cx", String(ep.cx));
@@ -6335,7 +6335,7 @@ function renderBrand(parent, layout) {
   a2.appendChild(text);
   parent.appendChild(a2);
 }
-function renderLegend2(parent, legendLayout) {
+function renderLegend(parent, legendLayout) {
   if (!("entries" in legendLayout) || legendLayout.entries.length === 0) return;
   const legend = legendLayout;
   const g = createSVGElement2("g");
@@ -6582,7 +6582,7 @@ function renderSankeySVG(layout, animation) {
   renderLinks(svg, layout.links, nodePositions, animation);
   renderNodes(svg, layout.nodes, animation);
   renderLabels(svg, layout.nodes, layout.measureText);
-  renderLegend2(svg, layout.legend);
+  renderLegend(svg, layout.legend);
   renderChrome2(svg, layout);
   if (layout.watermark) {
     renderBrand(svg, layout);
@@ -7792,349 +7792,6 @@ function createTable(container, spec, options) {
 
 // src/tilemap-mount.ts
 import { compileTileMap } from "@opendata-ai/openchart-engine";
-
-// src/tilemap-renderer.ts
-import { textAscent as textAscent3 } from "@opendata-ai/openchart-core";
-var SVG_NS3 = "http://www.w3.org/2000/svg";
-var XLINK_NS3 = "http://www.w3.org/1999/xlink";
-var BRAND_URL4 = "https://tryopendata.ai";
-var EASE_VAR_MAP3 = {
-  smooth: "var(--oc-ease-smooth)",
-  snappy: "var(--oc-ease-snappy)"
-};
-var gradientIdCounter = 0;
-function createSVGElement3(tag) {
-  return document.createElementNS(SVG_NS3, tag);
-}
-function setAttrs3(el, attrs) {
-  for (const [key, value] of Object.entries(attrs)) {
-    el.setAttribute(key, String(value));
-  }
-}
-function renderChrome3(parent, layout) {
-  const g = createSVGElement3("g");
-  g.setAttribute("class", "oc-chrome");
-  const { chrome } = layout;
-  const bottomOffset = layout.area.y + layout.area.height;
-  if (chrome.title) {
-    const text = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.title.x,
-      y: chrome.title.y + textAscent3(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 = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.subtitle.x,
-      y: chrome.subtitle.y + textAscent3(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 = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.source.x,
-      y: bottomOffset + chrome.source.y + textAscent3(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 = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.byline.x,
-      y: bottomOffset + chrome.byline.y + textAscent3(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 = createSVGElement3("text");
-    setAttrs3(text, {
-      x: chrome.footer.x,
-      y: bottomOffset + chrome.footer.y + textAscent3(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 renderWatermark2(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 a2 = createSVGElement3("a");
-  a2.setAttribute("href", BRAND_URL4);
-  a2.setAttributeNS(XLINK_NS3, "xlink:href", BRAND_URL4);
-  a2.setAttribute("target", "_blank");
-  a2.setAttribute("rel", "noopener");
-  a2.setAttribute("class", "oc-chrome-ref");
-  const text = createSVGElement3("text");
-  setAttrs3(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 = createSVGElement3("tspan");
-  setAttrs3(trySpan, { "font-weight": 500 });
-  trySpan.textContent = "try";
-  const openDataSpan = createSVGElement3("tspan");
-  setAttrs3(openDataSpan, { "font-weight": 600, "font-size": 16 });
-  openDataSpan.textContent = "OpenData";
-  const aiSpan = createSVGElement3("tspan");
-  setAttrs3(aiSpan, { "font-weight": 500 });
-  aiSpan.textContent = ".ai";
-  text.appendChild(trySpan);
-  text.appendChild(openDataSpan);
-  text.appendChild(aiSpan);
-  a2.appendChild(text);
-  parent.appendChild(a2);
-}
-function renderTiles(parent, tiles, animation) {
-  const g = createSVGElement3("g");
-  g.setAttribute("class", "oc-tilemap-tiles");
-  g.setAttribute("role", "list");
-  const tileDelays = [];
-  if (animation?.enabled) {
-    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 = createSVGElement3("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?.enabled) {
-      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 = createSVGElement3("rect");
-    setAttrs3(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 = createSVGElement3("text");
-    setAttrs3(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 = createSVGElement3("text");
-      setAttrs3(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 = createSVGElement3("g");
-  g.setAttribute("class", "oc-tilemap-legend");
-  const defs = parent.querySelector("defs") || createSVGElement3("defs");
-  const exists = parent.querySelector("defs");
-  if (!exists) {
-    parent.insertBefore(defs, parent.firstChild);
-  }
-  const gradientId = `oc-tilemap-legend-gradient-${gradientIdCounter++}`;
-  const grad = createSVGElement3("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 = createSVGElement3("stop");
-    const attrs = {
-      offset: `${stop.offset * 100}%`,
-      "stop-color": stop.color
-    };
-    if (stop.opacity !== void 0) {
-      attrs["stop-opacity"] = stop.opacity;
-    }
-    setAttrs3(s, attrs);
-    grad.appendChild(s);
-  }
-  defs.appendChild(grad);
-  const barHeight = gradientLegend.bounds.height;
-  const bar = createSVGElement3("rect");
-  setAttrs3(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 = createSVGElement3("text");
-  setAttrs3(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 = createSVGElement3("text");
-  setAttrs3(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?.enabled;
-  const svg = createSVGElement3("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) {
-    const stagger = Math.max(5, Math.round(800 / Math.max(tiles.length, 1)));
-    svg.style.setProperty("--oc-animation-duration", `${animation.duration}ms`);
-    svg.style.setProperty("--oc-animation-stagger", `${stagger}ms`);
-    svg.style.setProperty("--oc-annotation-delay", `${animation.annotationDelay}ms`);
-    const easeVar = EASE_VAR_MAP3[animation.ease] || EASE_VAR_MAP3.smooth;
-    svg.style.setProperty("--oc-animation-ease", easeVar);
-  }
-  const defs = createSVGElement3("defs");
-  svg.appendChild(defs);
-  renderChrome3(svg, layout);
-  renderTiles(svg, tiles, animate ? animation : void 0);
-  if (layout.categoricalLegend) {
-    renderLegend(svg, layout.categoricalLegend);
-  } else {
-    renderGradientLegend(svg, layout);
-  }
-  if (watermark) {
-    renderWatermark2(svg, layout);
-  }
-  return svg;
-}
-
-// src/tilemap-mount.ts
 function resolveDarkMode6(mode) {
   if (mode === "force") return true;
   if (mode === "off" || mode === void 0) return false;