@opendata-ai/openchart-vanilla 8.9.0 → 8.9.1

package/dist/{chunk-TP3GCWCO.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;
@@ -594,6 +594,7 @@ function stampAnimationVars(el, v) {
 // src/renderers/annotations.ts
 import {
   ARROWHEAD_LENGTH,
+  automaticControlPoint,
   BOLD_SPAN_FONT_WEIGHT,
   computeArrowheadPoints,
   DEFAULT_ANNOTATION_FONT_SIZE,
@@ -619,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;
@@ -665,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);
   }
@@ -737,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");
@@ -807,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;
@@ -837,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);
     }
   }
@@ -847,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
@@ -1150,25 +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.chrome.seriesSummary?.reduce((count, entry) => count + entry.lines.length, 0) ?? 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);
@@ -1253,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;
@@ -1268,16 +1333,26 @@ 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 = chrome.footnotes?.length ?? 0;
+  let summaryLine = noteLine;
   for (const entry of chrome.seriesSummary ?? []) {
     const size = layout.theme.fonts.sizes.small;
     const el = createSVGElement("text");
@@ -1285,7 +1360,7 @@ function renderChrome(parent, layout) {
     el.setAttribute("data-series", entry.key);
     setAttrs(el, {
       x: layout.theme.spacing.padding,
-      y: bottomOffset + layout.theme.spacing.chartToFooter + textAscent2(size) + summaryLine * size * FOOTNOTE_LINE_HEIGHT
+      y: bottomOffset + layout.theme.spacing.chartToFooter + textAscent3(size) + summaryLine * size * FOOTNOTE_LINE_HEIGHT
     });
     applyTextStyle(el, {
       fontFamily: layout.theme.fonts.family,
@@ -1340,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;
@@ -2136,10 +2173,11 @@ export {
   resolveMarkFill,
   buildPatternDefs,
   resolvePatternFill,
+  updateAnnotationGeometry,
   renderLegend,
   registerMarkRenderer,
   rectPathWithCorners,
   renderSingleMark,
   renderChartSVG
 };
-//# sourceMappingURL=chunk-TP3GCWCO.js.map
+//# sourceMappingURL=chunk-APMUBW72.js.map