@opendata-ai/openchart-vanilla 6.24.2 → 6.25.0

package/dist/index.js

@@ -3635,7 +3635,8 @@ function renderAnnotations(parent, layout) {
 import { estimateTextWidth as estimateTextWidth2 } from "@opendata-ai/openchart-core";
 function renderAxis(parent, axis, orientation, layout) {
   const g = createSVGElement("g");
-  g.setAttribute("class", `oc-axis oc-axis-${orientation}`);
+  const isRight = orientation === "y" && axis.orient === "right";
+  g.setAttribute("class", `oc-axis oc-axis-${isRight ? "y2" : orientation}`);
   const { area } = layout;
   if (orientation === "x") {
     const line = createSVGElement("line");
@@ -3678,65 +3679,71 @@ function renderAxis(parent, axis, orientation, layout) {
       const label = createSVGElement("text");
       label.setAttribute("class", "oc-axis-tick");
       setAttrs(label, {
-        x: area.x - 6,
+        x: isRight ? area.x + area.width + 6 : area.x - 6,
         y: tick.position,
-        "text-anchor": "end",
+        "text-anchor": isRight ? "start" : "end",
         "dominant-baseline": "central"
       });
       applyTextStyle(label, axis.tickLabelStyle);
-      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;
+      if (!isRight) {
+        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;
         }
-        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);
     }
   }
-  for (const gridline of axis.gridlines) {
-    const gl = createSVGElement("line");
-    gl.setAttribute("class", "oc-gridline");
-    if (orientation === "y") {
-      setAttrs(gl, {
-        x1: area.x,
-        y1: gridline.position,
-        x2: area.x + area.width,
-        y2: gridline.position,
-        stroke: layout.theme.colors.gridline,
-        "stroke-width": 1,
-        "stroke-opacity": 0.6
-      });
-    } else {
-      setAttrs(gl, {
-        x1: gridline.position,
-        y1: area.y,
-        x2: gridline.position,
-        y2: area.y + area.height,
-        stroke: layout.theme.colors.gridline,
-        "stroke-width": 1,
-        "stroke-opacity": 0.6
-      });
+  if (!isRight) {
+    for (const gridline of axis.gridlines) {
+      const gl = createSVGElement("line");
+      gl.setAttribute("class", "oc-gridline");
+      if (orientation === "y") {
+        setAttrs(gl, {
+          x1: area.x,
+          y1: gridline.position,
+          x2: area.x + area.width,
+          y2: gridline.position,
+          stroke: layout.theme.colors.gridline,
+          "stroke-width": 1,
+          "stroke-opacity": 0.6
+        });
+      } else {
+        setAttrs(gl, {
+          x1: gridline.position,
+          y1: area.y,
+          x2: gridline.position,
+          y2: area.y + area.height,
+          stroke: layout.theme.colors.gridline,
+          "stroke-width": 1,
+          "stroke-opacity": 0.6
+        });
+      }
+      g.appendChild(gl);
     }
-    g.appendChild(gl);
   }
   if (axis.label && axis.labelStyle) {
     const axisLabel = createSVGElement("text");
@@ -3764,6 +3771,14 @@ function renderAxis(parent, axis, orientation, layout) {
         y: titleY,
         "text-anchor": "middle"
       });
+    } else if (isRight) {
+      const titleX = area.x + area.width + 45;
+      setAttrs(axisLabel, {
+        x: titleX,
+        y: area.y + area.height / 2,
+        "text-anchor": "middle",
+        transform: `rotate(90, ${titleX}, ${area.y + area.height / 2})`
+      });
     } else {
       setAttrs(axisLabel, {
         x: area.x - 45,
@@ -3783,6 +3798,9 @@ function renderAxes(parent, layout) {
   if (layout.axes.y) {
     renderAxis(parent, layout.axes.y, "y", layout);
   }
+  if (layout.axes.y2) {
+    renderAxis(parent, layout.axes.y2, "y", layout);
+  }
 }
 
 // src/renderers/brand.ts