@opendata-ai/openchart-vanilla 6.23.1 → 6.24.0

package/dist/index.js

@@ -3313,6 +3313,28 @@ function setupTableAnimationCleanup(wrapper) {
   };
 }
 
+// src/measure-text.ts
+function createMeasureText() {
+  let canvas = null;
+  let ctx = null;
+  return (text, fontSize, fontWeight) => {
+    if (!canvas) {
+      canvas = document.createElement("canvas");
+      ctx = canvas.getContext("2d");
+    }
+    if (!ctx) {
+      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
+    }
+    const weight = fontWeight ?? 400;
+    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
+    const metrics = ctx.measureText(text);
+    return {
+      width: metrics.width,
+      height: fontSize * 1.2
+    };
+  };
+}
+
 // src/svg-renderer.ts
 import { clampStaggerDelay } from "@opendata-ai/openchart-engine";
 
@@ -3418,12 +3440,11 @@ function setAttrs(el, attrs) {
   }
 }
 function applyTextStyle(el, style) {
-  setAttrs(el, {
-    "font-family": style.fontFamily,
-    "font-size": style.fontSize,
-    "font-weight": style.fontWeight
-  });
-  el.style.setProperty("fill", style.fill);
+  const inline = el.style;
+  inline.setProperty("fill", style.fill);
+  inline.setProperty("font-size", `${style.fontSize}px`);
+  inline.setProperty("font-weight", String(style.fontWeight));
+  inline.setProperty("font-family", style.fontFamily);
   if (style.textAnchor) {
     el.setAttribute("text-anchor", style.textAnchor);
   }
@@ -3663,7 +3684,31 @@ function renderAxis(parent, axis, orientation, layout) {
         "dominant-baseline": "central"
       });
       applyTextStyle(label, axis.tickLabelStyle);
-      label.textContent = tick.label;
+      const availableWidth = area.x - 6;
+      const fontSize = axis.tickLabelStyle.fontSize;
+      const fontWeight = axis.tickLabelStyle.fontWeight;
+      const fullWidth = estimateTextWidth2(tick.label, fontSize, fontWeight);
+      if (fullWidth > availableWidth && availableWidth > 20) {
+        const ellipsis = "\u2026";
+        const ellipsisWidth = estimateTextWidth2(ellipsis, fontSize, fontWeight);
+        let lo = 0;
+        let hi = tick.label.length;
+        while (lo < hi) {
+          const mid = lo + hi + 1 >>> 1;
+          const candidate = tick.label.slice(0, mid);
+          if (estimateTextWidth2(candidate, fontSize, fontWeight) + ellipsisWidth <= availableWidth) {
+            lo = mid;
+          } else {
+            hi = mid - 1;
+          }
+        }
+        label.textContent = lo > 0 ? tick.label.slice(0, lo).trimEnd() + ellipsis : ellipsis;
+        const titleEl = createSVGElement("title");
+        titleEl.textContent = tick.label;
+        label.appendChild(titleEl);
+      } else {
+        label.textContent = tick.label;
+      }
       g.appendChild(label);
     }
   }
@@ -4542,26 +4587,6 @@ function resolveDarkMode2(mode) {
   }
   return false;
 }
-function createMeasureText() {
-  let canvas = null;
-  let ctx = null;
-  return (text, fontSize, fontWeight) => {
-    if (!canvas) {
-      canvas = document.createElement("canvas");
-      ctx = canvas.getContext("2d");
-    }
-    if (!ctx) {
-      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
-    }
-    const weight = fontWeight ?? 400;
-    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
-    const metrics = ctx.measureText(text);
-    return {
-      width: metrics.width,
-      height: fontSize * 1.2
-    };
-  };
-}
 function wireTooltipEvents(svg, tooltipDescriptors, tooltipManager) {
   const markElements = svg.querySelectorAll("[data-mark-id]");
   const cleanups = [];
@@ -6547,7 +6572,7 @@ function stampAnimationAttrs2(el, mark, fallbackIndex, animation) {
   el.setAttribute("data-animation-index", String(idx));
   el.style.setProperty("--oc-mark-index", String(idx));
 }
-function renderChromeElement2(parent, element, className, chromeKey) {
+function renderChromeElement2(parent, element, className, chromeKey, measureText) {
   const text = createSVGElement2("text");
   setAttrs2(text, { x: element.x, y: element.y });
   applyTextStyle2(text, element.style);
@@ -6557,7 +6582,8 @@ function renderChromeElement2(parent, element, className, chromeKey) {
     element.text,
     element.style.fontSize,
     element.style.fontWeight,
-    element.maxWidth
+    element.maxWidth,
+    measureText
   );
   if (lines.length === 1) {
     text.textContent = element.text;
@@ -6575,12 +6601,12 @@ function renderChromeElement2(parent, element, className, chromeKey) {
 function renderChrome2(parent, layout) {
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-chrome");
-  const { chrome } = layout;
+  const { chrome, measureText } = layout;
   if (chrome.title) {
-    renderChromeElement2(g, chrome.title, "oc-title", "title");
+    renderChromeElement2(g, chrome.title, "oc-title", "title", measureText);
   }
   if (chrome.subtitle) {
-    renderChromeElement2(g, chrome.subtitle, "oc-subtitle", "subtitle");
+    renderChromeElement2(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
   }
   const bottomOffset = layout.area.y + layout.area.height;
   if (chrome.source) {
@@ -6588,7 +6614,8 @@ function renderChrome2(parent, layout) {
       g,
       { ...chrome.source, y: bottomOffset + chrome.source.y },
       "oc-source",
-      "source"
+      "source",
+      measureText
     );
   }
   if (chrome.byline) {
@@ -6596,7 +6623,8 @@ function renderChrome2(parent, layout) {
       g,
       { ...chrome.byline, y: bottomOffset + chrome.byline.y },
       "oc-byline",
-      "byline"
+      "byline",
+      measureText
     );
   }
   if (chrome.footer) {
@@ -6604,7 +6632,8 @@ function renderChrome2(parent, layout) {
       g,
       { ...chrome.footer, y: bottomOffset + chrome.footer.y },
       "oc-footer",
-      "footer"
+      "footer",
+      measureText
     );
   }
   parent.appendChild(g);
@@ -6824,7 +6853,7 @@ function renderNodes(parent, nodes, animation) {
   }
   parent.appendChild(g);
 }
-function renderLabels(parent, nodes) {
+function renderLabels(parent, nodes, measureText) {
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-sankey-labels");
   for (const node of nodes) {
@@ -6836,7 +6865,7 @@ function renderLabels(parent, nodes) {
     if (label.maxWidth !== void 0 && label.maxWidth > 0) {
       const fontSize = label.style.fontSize ?? 12;
       const fontWeight = label.style.fontWeight ?? 400;
-      const lines = wrapText2(label.text, fontSize, fontWeight, label.maxWidth);
+      const lines = wrapText2(label.text, fontSize, fontWeight, label.maxWidth, measureText);
       if (lines.length > 1) {
         const lineHeight = fontSize * (label.style.lineHeight ?? 1.3);
         const totalHeight = (lines.length - 1) * lineHeight;
@@ -6897,7 +6926,7 @@ function renderSankeySVG(layout, animation) {
   svg.appendChild(defs);
   renderLinks(svg, layout.links, nodePositions, animation);
   renderNodes(svg, layout.nodes, animation);
-  renderLabels(svg, layout.nodes);
+  renderLabels(svg, layout.nodes, layout.measureText);
   renderLegend2(svg, layout.legend);
   renderChrome2(svg, layout);
   if (layout.watermark) {
@@ -6929,6 +6958,7 @@ function createSankey(container, spec, options) {
   let isFirstRender = true;
   let animationCleanup = null;
   let pendingResize = false;
+  const measureText = createMeasureText();
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     return {
@@ -6944,7 +6974,8 @@ function createSankey(container, spec, options) {
       height,
       theme: options?.theme,
       darkMode,
-      watermark: options?.watermark
+      watermark: options?.watermark,
+      measureText
     };
     return compileSankey(currentSpec, compileOpts);
   }