@opendata-ai/openchart-vanilla 7.7.0 → 7.8.0

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

@@ -1670,11 +1670,351 @@ 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?.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 = 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?.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 = 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?.enabled;
+  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) {
+    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_MAP2[animation.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,
   SVG_NS,
-  renderLegend,
   registerMarkRenderer,
-  renderChartSVG
+  renderChartSVG,
+  renderTileMapSVG
 };
-//# sourceMappingURL=chunk-PSMDJEXK.js.map
+//# sourceMappingURL=chunk-KYRQV6KR.js.map