@opendata-ai/openchart-vanilla 8.8.0 → 8.9.1

package/dist/{chunk-SXTHPXG6.js → chunk-APMUBW72.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-SDJHUELU.js";
 import {
   resolvedSurface
-} from "./chunk-NG7CVCI2.js";
+} from "./chunk-UC4IHEUO.js";
 
 // src/svg-ids.ts
 var counter = 0;
@@ -196,7 +196,7 @@ function registerMarkRenderer(type, renderer) {
 }
 function renderLineMark(mark, index) {
   const g = createSVGElement("g");
-  g.setAttribute("data-mark-id", `line-${mark.seriesKey ?? index}`);
+  g.setAttribute("data-mark-id", `line-${index}`);
   g.setAttribute("class", "oc-mark oc-mark-line");
   stampAnimationAttrs(g, mark, index);
   if (mark.points.length > 1) {
@@ -223,6 +223,7 @@ function renderLineMark(mark, index) {
   if (mark.label?.visible) {
     const label = createSVGElement("text");
     label.setAttribute("class", "oc-mark-label");
+    if (mark.key) label.setAttribute("data-label-key", mark.key);
     if (mark.seriesKey) {
       label.setAttribute("data-series", mark.seriesKey);
     }
@@ -250,7 +251,7 @@ function renderLineMark(mark, index) {
 }
 function renderAreaMark(mark, index) {
   const g = createSVGElement("g");
-  g.setAttribute("data-mark-id", `area-${mark.seriesKey ?? index}`);
+  g.setAttribute("data-mark-id", `area-${index}`);
   g.setAttribute("class", "oc-mark oc-mark-area");
   stampAnimationAttrs(g, mark, index);
   if (mark.path) {
@@ -355,6 +356,7 @@ function renderArcMark(mark, index) {
   if (mark.label?.visible) {
     const label = createSVGElement("text");
     label.setAttribute("class", "oc-mark-label");
+    if (mark.key) label.setAttribute("data-label-key", mark.key);
     setAttrs(label, {
       x: mark.label.x - mark.center.x,
       y: mark.label.y - mark.center.y
@@ -543,6 +545,7 @@ function renderMarks(parent, layout, opts) {
     }
     const label = createSVGElement("text");
     label.setAttribute("class", "oc-mark-label");
+    if (mark.key) label.setAttribute("data-label-key", mark.key);
     setAttrs(label, { x: rect.label.x, y: rect.label.y });
     applyTextStyle(label, rect.label.style);
     applyLabelHalo(label, rect.label);
@@ -564,6 +567,7 @@ function renderMarks(parent, layout, opts) {
 import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
 
 // src/animation-vars.ts
+import { motionCSS } from "@opendata-ai/openchart-core";
 var EASE_VAR_MAP = {
   smooth: "var(--oc-ease-smooth)",
   snappy: "var(--oc-ease-snappy)"
@@ -574,7 +578,12 @@ function stampAnimationVars(el, v) {
   if (v.annotationDelay !== void 0) {
     el.style.setProperty("--oc-annotation-delay", `${v.annotationDelay}ms`);
   }
-  if (v.ease !== void 0) {
+  if (v.spring) {
+    el.style.setProperty(
+      "--oc-animation-ease",
+      motionCSS({ duration: v.duration, spring: v.spring })
+    );
+  } else if (v.ease !== void 0) {
     el.style.setProperty("--oc-animation-ease", EASE_VAR_MAP[v.ease] || EASE_VAR_MAP.smooth);
   }
   if (v.stackSegmentDuration !== void 0) {
@@ -585,6 +594,7 @@ function stampAnimationVars(el, v) {
 // src/renderers/annotations.ts
 import {
   ARROWHEAD_LENGTH,
+  automaticControlPoint,
   BOLD_SPAN_FONT_WEIGHT,
   computeArrowheadPoints,
   DEFAULT_ANNOTATION_FONT_SIZE,
@@ -610,12 +620,8 @@ function renderArrowhead(parent, tipX, tipY, tangentX, tangentY, stroke) {
   });
   parent.appendChild(arrow);
 }
-function renderCurvedConnector(parent, from, to, stroke, showArrow, exit) {
-  const dx = to.x - from.x;
-  const dy = to.y - from.y;
-  const vertical = exit ? exit === "vertical" : Math.abs(dy) >= Math.abs(dx);
-  const cpx = from.x + dx * (vertical ? 0.2 : 0.6);
-  const cpy = from.y + dy * (vertical ? 0.6 : 0.2);
+function renderCurvedConnector(parent, from, to, stroke, showArrow, exit, control) {
+  const { x: cpx, y: cpy } = control ?? automaticControlPoint(from, to, exit);
   const tx = to.x - cpx;
   const ty = to.y - cpy;
   const tLen = Math.sqrt(tx * tx + ty * ty) || 1;
@@ -656,6 +662,8 @@ function renderAnnotation(parent, annotation, index, bgColor) {
   const g = createSVGElement("g");
   g.setAttribute("class", `oc-annotation oc-annotation-${annotation.type}`);
   g.setAttribute("data-annotation-index", String(annotation.specIndex ?? index));
+  const facet = parent.closest("[data-facet]")?.getAttribute("data-facet");
+  if (facet !== null && facet !== void 0) g.setAttribute("data-facet-instance", facet);
   if (annotation.id) {
     g.setAttribute("data-annotation-id", annotation.id);
   }
@@ -728,7 +736,7 @@ function renderAnnotation(parent, annotation, index, bgColor) {
     if (annotation.label.connector) {
       const c = annotation.label.connector;
       if (c.style === "curve") {
-        renderCurvedConnector(g, c.from, c.to, c.stroke, c.arrow, c.exit);
+        renderCurvedConnector(g, c.from, c.to, c.stroke, c.arrow, c.exit, c.control);
       } else if (c.style === "drop-line") {
         const connector = createSVGElement("line");
         connector.setAttribute("class", "oc-annotation-connector oc-annotation-drop-line");
@@ -798,7 +806,12 @@ function renderAnnotation(parent, annotation, index, bgColor) {
     applyTextStyle(text, annotation.label.style);
     const fontSize = annotation.label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
     const lineHeight = fontSize * (annotation.label.style.lineHeight ?? DEFAULT_LINE_HEIGHT);
-    fillRichText(text, annotation.label.text, annotation.label.x, lineHeight);
+    fillRichText(
+      text,
+      annotation.label.lines?.join("\n") ?? annotation.label.text,
+      annotation.label.x,
+      lineHeight
+    );
     if (annotation.label.background && annotation.label.bounds) {
       const pad = 3;
       const b = annotation.label.bounds;
@@ -828,7 +841,12 @@ function renderAnnotation(parent, annotation, index, bgColor) {
       applyTextStyle(sub, annotation.subtitle.style);
       const subFontSize = annotation.subtitle.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
       const subLineHeight = subFontSize * (annotation.subtitle.style.lineHeight ?? DEFAULT_LINE_HEIGHT);
-      fillRichText(sub, annotation.subtitle.text, annotation.subtitle.x, subLineHeight);
+      fillRichText(
+        sub,
+        annotation.subtitle.lines?.join("\n") ?? annotation.subtitle.text,
+        annotation.subtitle.x,
+        subLineHeight
+      );
       g.appendChild(sub);
     }
   }
@@ -838,11 +856,36 @@ function renderAnnotations(parent, layout) {
   if (layout.annotations.length === 0) return;
   const g = createSVGElement("g");
   g.setAttribute("class", "oc-annotations");
+  parent.appendChild(g);
   const bgColor = resolvedSurface(layout.theme);
   for (let i = 0; i < layout.annotations.length; i++) {
     renderAnnotation(g, layout.annotations[i], i, bgColor);
   }
-  parent.appendChild(g);
+}
+function updateAnnotationGeometry(group, annotation, bgColor) {
+  const scratch = createSVGElement("g");
+  renderAnnotation(scratch, annotation, annotation.specIndex ?? 0, bgColor);
+  const fresh = scratch.firstElementChild;
+  const previous = [...group.children].filter(
+    (child) => [...child.classList].some((name) => name.startsWith("oc-annotation-"))
+  );
+  const used = /* @__PURE__ */ new Set();
+  for (const child of [...fresh.children]) {
+    const target = previous.find(
+      (old) => !used.has(old) && old.tagName === child.tagName && old.getAttribute("class") === child.getAttribute("class")
+    );
+    if (target) {
+      used.add(target);
+      for (const attr of [...target.attributes])
+        if (!child.hasAttribute(attr.name)) target.removeAttribute(attr.name);
+      for (const attr of [...child.attributes]) target.setAttribute(attr.name, attr.value);
+      target.replaceChildren(...child.childNodes);
+      group.appendChild(target);
+    } else group.appendChild(child);
+  }
+  for (const old of previous) if (!used.has(old)) old.remove();
+  for (const handle of [...group.querySelectorAll(".oc-connector-handle, .oc-anchor-handle")])
+    group.appendChild(handle);
 }
 
 // src/renderers/axes.ts
@@ -1141,22 +1184,55 @@ function renderAxes(parent, layout, opts) {
 }
 
 // src/renderers/brand.ts
-import { BRAND_MIN_WIDTH, textAscent as textAscent3 } from "@opendata-ai/openchart-core";
+import { BRAND_MIN_WIDTH, computeNoteBandHeight, textAscent as textAscent2 } from "@opendata-ai/openchart-core";
+var BRAND_URL = "https://tryopendata.ai";
+function renderBrand(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
+  const { width } = layout.dimensions;
+  const padding = layout.theme.spacing.padding;
+  const rightEdge = width - padding;
+  const fill = layout.theme.colors.axis;
+  const { chrome } = layout;
+  const bottomOffset = chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
+  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
+  const { legend } = layout;
+  const bottomLegendOffset = legend.position === "bottom" && legend.bounds.height > 0 ? legend.bounds.height + 8 : 0;
+  const bandHeight = layout.chrome.noteBandHeight ?? computeNoteBandHeight(layout.chrome, layout.theme);
+  const chromeY = firstBottom ? bottomOffset + firstBottom.y + bandHeight : bottomOffset + layout.theme.spacing.chartToFooter + bottomLegendOffset + bandHeight;
+  const a = createSVGElement("a");
+  a.setAttribute("href", BRAND_URL);
+  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
+  a.setAttribute("target", "_blank");
+  a.setAttribute("rel", "noopener");
+  a.setAttribute("class", "oc-chrome-ref");
+  const BRAND_LARGE = 16;
+  const text = createSVGElement("text");
+  setAttrs(text, {
+    x: rightEdge,
+    y: chromeY + textAscent2(BRAND_LARGE),
+    "font-family": layout.theme.fonts.family,
+    "font-size": BRAND_LARGE,
+    "font-weight": "600",
+    "text-anchor": "end",
+    "fill-opacity": 0.55
+  });
+  text.style.setProperty("fill", fill);
+  text.textContent = "OpenData";
+  a.appendChild(text);
+  parent.appendChild(a);
+}
 
 // src/renderers/chrome.ts
 import {
+  computeNoteBandHeight as computeNoteBandHeight2,
   FOOTNOTE_LINE_HEIGHT,
-  footnoteBandHeight as footnoteBandHeightFor,
-  textAscent as textAscent2,
+  textAscent as textAscent3,
   truncateToWidth,
   wrapText
 } from "@opendata-ai/openchart-core";
-function footnoteBandHeight(layout) {
-  return footnoteBandHeightFor(layout.chrome.footnotes?.length ?? 0, layout.theme);
-}
 function renderChromeElement(parent, element, className, chromeKey, measureText, uppercase = false) {
   const text = createSVGElement("text");
-  setAttrs(text, { x: element.x, y: element.y + textAscent2(element.style.fontSize) });
+  setAttrs(text, { x: element.x, y: element.y + textAscent3(element.style.fontSize) });
   applyTextStyle(text, element.style);
   text.setAttribute("class", className);
   text.setAttribute("data-chrome-key", chromeKey);
@@ -1241,7 +1317,8 @@ function renderChrome(parent, layout) {
     renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
   }
   const bottomOffset = layout.chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
-  const bandHeight = footnoteBandHeight(layout);
+  const bandHeight = layout.chrome.noteBandHeight ?? computeNoteBandHeight2(layout.chrome, layout.theme);
+  let noteLine = 0;
   if (chrome.footnotes && chrome.footnotes.length > 0) {
     const fontSize = layout.theme.fonts.sizes.small;
     const pad = layout.theme.spacing.padding;
@@ -1256,15 +1333,54 @@ function renderChrome(parent, layout) {
     };
     for (let i = 0; i < chrome.footnotes.length; i++) {
       const f = chrome.footnotes[i];
-      const y = bottomOffset + layout.theme.spacing.chartToFooter + textAscent2(fontSize) + i * lineHeight;
+      const y = bottomOffset + layout.theme.spacing.chartToFooter + textAscent3(fontSize) + noteLine * lineHeight;
       const el = createSVGElement("text");
       el.setAttribute("class", "oc-footnotes");
+      if (f.specIndex !== void 0) el.setAttribute("data-note-spec-index", String(f.specIndex));
+      if (f.id !== void 0) el.setAttribute("data-note-id", f.id);
       setAttrs(el, { x: pad, y });
       applyTextStyle(el, style);
-      el.textContent = `${f.index}. ${f.text}`;
+      if (f.lines) {
+        f.lines.forEach((line, index) => {
+          const span = createSVGElement("tspan");
+          setAttrs(span, { x: pad, dy: index === 0 ? 0 : lineHeight });
+          span.textContent = line;
+          el.appendChild(span);
+        });
+      } else el.textContent = `${f.index}. ${f.text}`;
+      noteLine += f.lines?.length ?? 1;
       g.appendChild(el);
     }
   }
+  let summaryLine = noteLine;
+  for (const entry of chrome.seriesSummary ?? []) {
+    const size = layout.theme.fonts.sizes.small;
+    const el = createSVGElement("text");
+    el.setAttribute("class", "oc-series-summary");
+    el.setAttribute("data-series", entry.key);
+    setAttrs(el, {
+      x: layout.theme.spacing.padding,
+      y: bottomOffset + layout.theme.spacing.chartToFooter + textAscent3(size) + summaryLine * size * FOOTNOTE_LINE_HEIGHT
+    });
+    applyTextStyle(el, {
+      fontFamily: layout.theme.fonts.family,
+      fontSize: size,
+      fontWeight: 500,
+      lineHeight: FOOTNOTE_LINE_HEIGHT,
+      fill: entry.color
+    });
+    entry.lines.forEach((line, index) => {
+      const span = createSVGElement("tspan");
+      setAttrs(span, {
+        x: layout.theme.spacing.padding,
+        dy: index === 0 ? 0 : size * FOOTNOTE_LINE_HEIGHT
+      });
+      span.textContent = line;
+      el.appendChild(span);
+    });
+    summaryLine += entry.lines.length;
+    g.appendChild(el);
+  }
   if (chrome.source) {
     renderChromeElement(
       g,
@@ -1299,44 +1415,6 @@ function renderChrome(parent, layout) {
   parent.appendChild(g);
 }
 
-// src/renderers/brand.ts
-var BRAND_URL = "https://tryopendata.ai";
-function renderBrand(parent, layout) {
-  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
-  const { width } = layout.dimensions;
-  const padding = layout.theme.spacing.padding;
-  const rightEdge = width - padding;
-  const fill = layout.theme.colors.axis;
-  const { chrome } = layout;
-  const bottomOffset = chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
-  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
-  const { legend } = layout;
-  const bottomLegendOffset = legend.position === "bottom" && legend.bounds.height > 0 ? legend.bounds.height + 8 : 0;
-  const bandHeight = footnoteBandHeight(layout);
-  const chromeY = firstBottom ? bottomOffset + firstBottom.y + bandHeight : bottomOffset + layout.theme.spacing.chartToFooter + bottomLegendOffset + bandHeight;
-  const a = createSVGElement("a");
-  a.setAttribute("href", BRAND_URL);
-  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
-  a.setAttribute("target", "_blank");
-  a.setAttribute("rel", "noopener");
-  a.setAttribute("class", "oc-chrome-ref");
-  const BRAND_LARGE = 16;
-  const text = createSVGElement("text");
-  setAttrs(text, {
-    x: rightEdge,
-    y: chromeY + textAscent3(BRAND_LARGE),
-    "font-family": layout.theme.fonts.family,
-    "font-size": BRAND_LARGE,
-    "font-weight": "600",
-    "text-anchor": "end",
-    "fill-opacity": 0.55
-  });
-  text.style.setProperty("fill", fill);
-  text.textContent = "OpenData";
-  a.appendChild(text);
-  parent.appendChild(a);
-}
-
 // src/renderers/endpoint-labels.ts
 var LEADER_STROKE_WIDTH = 1;
 var LEADER_OPACITY = 0.45;
@@ -1542,7 +1620,11 @@ function renderContinuousLegend(parent, legend) {
   }
   for (const tick of legend.ticks) {
     const label = createSVGElement("text");
-    setAttrs(label, { x: tick.x, y: legend.labelY, "text-anchor": tick.anchor });
+    setAttrs(label, {
+      x: tick.x,
+      y: legend.labelY + (tick.offsetY ?? 0),
+      "text-anchor": tick.anchor
+    });
     applyTextStyle(label, legend.labelStyle);
     label.textContent = tick.label;
     g.appendChild(label);
@@ -1833,6 +1915,7 @@ function renderChartSVG(layout, container, opts) {
     const stackSegmentDuration = maxSegments > 0 ? Math.round(enterPhase.duration / maxSegments) : void 0;
     stampAnimationVars(svg, {
       duration: enterPhase.duration,
+      spring: enterPhase.spring,
       stagger,
       annotationDelay: animation.annotationDelay,
       ease: enterPhase.ease,
@@ -1892,6 +1975,31 @@ function renderChartSVG(layout, container, opts) {
       clippedGroup.setAttribute("data-oc-marks-group", "true");
       clipGroup.appendChild(clippedGroup);
       const markLabelsOverlay = renderMarks(clippedGroup, layout, { skipPoints: canvasMarks });
+      if (enterPhase?.spring && layout.marks.some((mark) => mark.type === "rect" && mark.stackPos !== void 0)) {
+        const stacks = /* @__PURE__ */ new Map();
+        for (const mark of layout.marks) {
+          if (mark.type !== "rect" || mark.stackPos === void 0 || !mark.key) continue;
+          const element = Array.from(clippedGroup.children).find(
+            (child) => child.getAttribute("data-key") === mark.key
+          );
+          if (!element) continue;
+          const horizontal = element.getAttribute("data-orient") === "horizontal";
+          const key = `${horizontal ? "h" : "v"}:${horizontal ? mark.y : mark.x}`;
+          let stack = stacks.get(key);
+          if (!stack) {
+            stack = createSVGElement("g");
+            setAttrs(stack, {
+              class: "oc-stack-reveal",
+              "data-key": `stack:${key}`,
+              "data-orient": horizontal ? "horizontal" : "vertical",
+              "data-animation-index": 0
+            });
+            clippedGroup.insertBefore(stack, element);
+            stacks.set(key, stack);
+          }
+          stack.appendChild(element);
+        }
+      }
       let pointCircles = null;
       let pointCircleCoords = null;
       const getPointCircles = () => {
@@ -2058,17 +2166,18 @@ function renderFacetedPanels(svg, layout, panels, defs) {
 
 export {
   stampAnimationVars,
+  renderChromeElement,
   nextSvgId,
   resetSvgIdCounter,
   buildGradientDefs,
   resolveMarkFill,
   buildPatternDefs,
   resolvePatternFill,
-  renderChromeElement,
+  updateAnnotationGeometry,
   renderLegend,
   registerMarkRenderer,
   rectPathWithCorners,
   renderSingleMark,
   renderChartSVG
 };
-//# sourceMappingURL=chunk-SXTHPXG6.js.map
+//# sourceMappingURL=chunk-APMUBW72.js.map