@opendata-ai/openchart-vanilla 7.2.3 → 7.3.0

package/dist/index.js

@@ -467,6 +467,7 @@ function csvEscape(value) {
 }
 
 // src/measure-text.ts
+import { estimateTextWidth } from "@opendata-ai/openchart-core";
 function createMeasureText() {
   let canvas = null;
   let ctx = null;
@@ -476,7 +477,10 @@ function createMeasureText() {
       ctx = canvas.getContext("2d");
     }
     if (!ctx) {
-      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
+      return {
+        width: estimateTextWidth(text, fontSize, fontWeight ?? 400),
+        height: fontSize * 1.2
+      };
     }
     const weight = fontWeight ?? 400;
     ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
@@ -4993,7 +4997,6 @@ function resolveMarkFill(fill, gradientMap) {
 }
 
 // src/renderers/svg-dom.ts
-import { estimateTextWidth } from "@opendata-ai/openchart-core";
 var SVG_NS3 = "http://www.w3.org/2000/svg";
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
 function createSVGElement2(tag) {
@@ -5020,23 +5023,6 @@ function applyTextStyle(el, style) {
     el.setAttribute("font-variant", style.fontVariant);
   }
 }
-function computeXAxisExtent(layout) {
-  const xAxis = layout.axes.x;
-  if (!xAxis) return 0;
-  if (xAxis.tickAngle && Math.abs(xAxis.tickAngle) > 10) {
-    const fontSize = xAxis.tickLabelStyle.fontSize;
-    const fontWeight = xAxis.tickLabelStyle.fontWeight;
-    const angleRad = Math.abs(xAxis.tickAngle) * (Math.PI / 180);
-    let maxLabelWidth = 40;
-    for (const tick of xAxis.ticks) {
-      const w = estimateTextWidth(tick.label, fontSize, fontWeight);
-      if (w > maxLabelWidth) maxLabelWidth = w;
-    }
-    const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
-    return xAxis.label ? rotatedHeight + 20 : rotatedHeight;
-  }
-  return xAxis.label ? 48 : 26;
-}
 
 // src/renderers/annotations.ts
 function renderCurvedArrow(parent, from, to, stroke) {
@@ -5198,10 +5184,6 @@ function renderAnnotation(parent, annotation, index2, bgColor) {
     const lineHeight = fontSize * (annotation.label.style.lineHeight ?? 1.3);
     const isMultiLine = lines.length > 1;
     if (isMultiLine) {
-      const isDropLine = annotation.label.connector?.style === "drop-line";
-      if (!isDropLine) {
-        text.setAttribute("text-anchor", "middle");
-      }
       for (let i = 0; i < lines.length; i++) {
         const tspan = createSVGElement2("tspan");
         setAttrs2(tspan, { x: annotation.label.x, dy: i === 0 ? 0 : lineHeight });
@@ -5212,18 +5194,33 @@ function renderAnnotation(parent, annotation, index2, bgColor) {
       text.textContent = annotation.label.text;
     }
     if (annotation.label.background) {
-      const charWidth = fontSize * 0.55;
-      const maxLineWidth = Math.max(...lines.map((l) => l.length)) * charWidth;
-      const totalHeight = lines.length * lineHeight;
       const pad = 3;
-      const bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
+      let bgX;
+      let bgY;
+      let bgW;
+      let bgH;
+      if (annotation.label.bounds) {
+        const b = annotation.label.bounds;
+        bgX = b.x - pad;
+        bgY = b.y - pad;
+        bgW = b.width + pad * 2;
+        bgH = b.height + pad * 2;
+      } else {
+        const charWidth = fontSize * 0.55;
+        const maxLineWidth = Math.max(...lines.map((l) => l.length)) * charWidth;
+        const totalHeight = lines.length * lineHeight;
+        bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
+        bgY = annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad;
+        bgW = maxLineWidth + pad * 2;
+        bgH = totalHeight + pad * 2;
+      }
       const bgRect = createSVGElement2("rect");
       bgRect.setAttribute("class", "oc-annotation-bg");
       setAttrs2(bgRect, {
         x: bgX,
-        y: annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad,
-        width: maxLineWidth + pad * 2,
-        height: totalHeight + pad * 2,
+        y: bgY,
+        width: bgW,
+        height: bgH,
         fill: annotation.label.background,
         rx: 2
       });
@@ -5446,7 +5443,18 @@ function renderAxis(parent, axis, orientation, layout) {
     axisLabel.setAttribute("class", "oc-axis-title");
     applyTextStyle(axisLabel, axis.labelStyle);
     axisLabel.textContent = axis.label;
-    if (orientation === "x") {
+    const tp = axis.titlePosition;
+    if (tp) {
+      const attrs = {
+        x: tp.x,
+        y: tp.y,
+        "text-anchor": "middle"
+      };
+      if (tp.angle) {
+        attrs.transform = `rotate(${tp.angle}, ${tp.x}, ${tp.y})`;
+      }
+      setAttrs2(axisLabel, attrs);
+    } else if (orientation === "x") {
       let titleY = area.y + area.height + 35;
       if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
         const angleRad = Math.abs(axis.tickAngle) * (Math.PI / 180);
@@ -5523,8 +5531,7 @@ function renderBrand(parent, layout) {
   const rightEdge = width - padding;
   const fill = layout.theme.colors.axis;
   const { chrome } = layout;
-  const xAxisExtent = computeXAxisExtent(layout);
-  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  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;
@@ -5620,8 +5627,7 @@ function renderChrome2(parent, layout) {
   if (chrome.subtitle) {
     renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
   }
-  const xAxisExtent = computeXAxisExtent(layout);
-  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  const bottomOffset = layout.chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
   if (chrome.source) {
     renderChromeElement(
       g,
@@ -5774,11 +5780,16 @@ function renderLegend(parent, legend) {
   g.setAttribute("role", "list");
   g.setAttribute("aria-label", "Chart legend");
   const isHorizontal = legend.position === "top" || legend.position === "bottom";
+  const positions = "entryPositions" in legend ? legend.entryPositions : void 0;
   let offsetX = legend.bounds.x;
   let offsetY = legend.bounds.y;
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
-    if (isHorizontal && i > 0) {
+    const pos = positions?.[i];
+    if (pos) {
+      offsetX = pos.x;
+      offsetY = pos.y;
+    } else if (isHorizontal && i > 0) {
       const labelWidth = estimateTextWidth4(
         entry.label,
         legend.labelStyle.fontSize,
@@ -5859,16 +5870,18 @@ function renderLegend(parent, legend) {
     label.textContent = entry.label;
     entryG.appendChild(label);
     g.appendChild(entryG);
-    if (isHorizontal) {
-      const labelWidth = estimateTextWidth4(
-        entry.label,
-        legend.labelStyle.fontSize,
-        legend.labelStyle.fontWeight
-      );
-      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
-      offsetX += entryWidth;
-    } else {
-      offsetY += legend.swatchSize + legend.entryGap;
+    if (!pos) {
+      if (isHorizontal) {
+        const labelWidth = estimateTextWidth4(
+          entry.label,
+          legend.labelStyle.fontSize,
+          legend.labelStyle.fontWeight
+        );
+        const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+        offsetX += entryWidth;
+      } else {
+        offsetY += "rowHeight" in legend && legend.rowHeight ? legend.rowHeight : legend.swatchSize + legend.entryGap;
+      }
     }
   }
   parent.appendChild(g);