@opendata-ai/openchart-vanilla 7.0.3 → 7.1.0

package/dist/index.js

@@ -5259,6 +5259,7 @@ function renderAnnotations(parent, layout) {
 
 // src/renderers/axes.ts
 import {
+  AXIS_TITLE_OFFSET_COMPACT,
   estimateTextWidth as estimateTextWidth2,
   getAxisTitleOffset,
   TICK_LABEL_OFFSET
@@ -5473,7 +5474,17 @@ function renderAxis(parent, axis, orientation, layout) {
         transform: `rotate(90, ${titleX}, ${area.y + area.height / 2})`
       });
     } else {
-      const titleOffset = getAxisTitleOffset(layout.dimensions.width);
+      const AXIS_TITLE_GAP = 8;
+      const maxTickLabelWidth = axis.ticks.reduce((max, t) => {
+        const w = estimateTextWidth2(
+          t.label,
+          axis.tickLabelStyle.fontSize,
+          axis.tickLabelStyle.fontWeight ?? 400
+        );
+        return Math.max(max, w);
+      }, 0);
+      const dynamicOffset = TICK_LABEL_OFFSET + maxTickLabelWidth + AXIS_TITLE_GAP;
+      const titleOffset = Math.max(dynamicOffset, AXIS_TITLE_OFFSET_COMPACT);
       setAttrs2(axisLabel, {
         x: area.x - titleOffset,
         y: area.y + area.height / 2,
@@ -6027,14 +6038,6 @@ function renderRectMark(mark, index2) {
     shapeEl.setAttribute("stroke-width", String(mark.strokeWidth));
   }
   g.appendChild(shapeEl);
-  if (mark.label?.visible) {
-    const label = createSVGElement2("text");
-    label.setAttribute("class", "oc-mark-label");
-    setAttrs2(label, { x: mark.label.x, y: mark.label.y });
-    applyTextStyle(label, mark.label.style);
-    label.textContent = mark.label.text;
-    g.appendChild(label);
-  }
   return g;
 }
 function renderArcMark(mark, index2) {
@@ -6208,6 +6211,32 @@ function renderMarks(parent, layout) {
     g.appendChild(el);
   }
   parent.appendChild(g);
+  let labelsGroup;
+  for (let i = 0; i < layout.marks.length; i++) {
+    const mark = layout.marks[i];
+    if (mark.type !== "rect") continue;
+    const rect = mark;
+    if (!rect.label?.visible) continue;
+    if (!labelsGroup) {
+      labelsGroup = createSVGElement2("g");
+      labelsGroup.setAttribute("class", "oc-mark-labels");
+    }
+    const label = createSVGElement2("text");
+    label.setAttribute("class", "oc-mark-label");
+    setAttrs2(label, { x: rect.label.x, y: rect.label.y });
+    applyTextStyle(label, rect.label.style);
+    label.textContent = rect.label.text;
+    if (currentAnimation?.enabled) {
+      const idx = rect.animationIndex ?? i;
+      label.setAttribute("data-animation-index", String(idx));
+      label.style.setProperty(
+        "--oc-mark-index",
+        String(idx)
+      );
+    }
+    labelsGroup.appendChild(label);
+  }
+  return labelsGroup;
 }
 
 // src/renderers/metrics.ts
@@ -6263,7 +6292,9 @@ function renderChartSVG(layout, container, opts) {
     // overflow is "hidden", which clips this phantom extent. Setting
     // overflow:visible prevents the clipping. Chart marks are already
     // constrained by a clipPath, so nothing bleeds out.
-    overflow: "visible"
+    overflow: "visible",
+    // Hint browsers to enable sub-pixel font hinting and kerning for chart text.
+    "text-rendering": "optimizeLegibility"
   });
   svg.style.height = `${height}px`;
   svg.setAttribute("role", layout.a11y.role);
@@ -6331,7 +6362,7 @@ function renderChartSVG(layout, container, opts) {
     renderAxes(svg, layout);
     const clippedGroup = createSVGElement2("g");
     clippedGroup.setAttribute("clip-path", `url(#${clipId})`);
-    renderMarks(clippedGroup, layout);
+    const markLabelsOverlay = renderMarks(clippedGroup, layout);
     const hasLineOrAreaWithDataPoints = layout.marks.some(
       (m2) => (m2.type === "line" || m2.type === "area") && m2.dataPoints && m2.dataPoints.length > 0
     );
@@ -6376,6 +6407,9 @@ function renderChartSVG(layout, container, opts) {
       clippedGroup.appendChild(dotsGroup);
     }
     svg.appendChild(clippedGroup);
+    if (markLabelsOverlay) {
+      svg.appendChild(markLabelsOverlay);
+    }
     renderAnnotations(svg, layout);
     renderEndpointLabels(svg, layout);
     const epEntries = layout.endpointLabels?.entries ?? [];
@@ -6383,7 +6417,7 @@ function renderChartSVG(layout, container, opts) {
       const pointEls = clippedGroup.querySelectorAll("circle.oc-mark-point");
       for (const entry of epEntries) {
         if (!entry.marker) continue;
-        const mx = entry.marker.x;
+        const mx = entry.marker.dataX;
         const my = entry.marker.y;
         for (const el of pointEls) {
           const cx = Number(el.getAttribute("cx"));