@opendata-ai/openchart-vanilla 2.3.5 → 2.4.0

package/dist/index.js

@@ -2116,6 +2116,23 @@ import { compileChart } from "@opendata-ai/openchart-engine";
 // src/svg-renderer.ts
 import { estimateTextWidth } from "@opendata-ai/openchart-core";
 var SVG_NS = "http://www.w3.org/2000/svg";
+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;
+}
 function createSVGElement(tag) {
   return document.createElementNS(SVG_NS, tag);
 }
@@ -2160,7 +2177,7 @@ function renderChrome(parent, layout) {
   if (chrome.subtitle) {
     renderChromeElement(g, chrome.subtitle, "viz-subtitle", "subtitle");
   }
-  const xAxisExtent = layout.axes.x ? layout.axes.x.label ? 48 : 26 : 0;
+  const xAxisExtent = computeXAxisExtent(layout);
   const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
   if (chrome.source) {
     renderChromeElement(
@@ -2209,11 +2226,23 @@ function renderAxis(parent, axis, orientation, layout) {
     if (orientation === "x") {
       const label = createSVGElement("text");
       label.setAttribute("class", "viz-axis-tick");
-      setAttrs(label, {
-        x: tick.position,
-        y: area.y + area.height + 14,
-        "text-anchor": "middle"
-      });
+      if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
+        const labelX = tick.position;
+        const labelY = area.y + area.height + 6;
+        setAttrs(label, {
+          x: labelX,
+          y: labelY,
+          "text-anchor": axis.tickAngle < 0 ? "end" : "start",
+          "dominant-baseline": "central",
+          transform: `rotate(${axis.tickAngle}, ${labelX}, ${labelY})`
+        });
+      } else {
+        setAttrs(label, {
+          x: tick.position,
+          y: area.y + area.height + 14,
+          "text-anchor": "middle"
+        });
+      }
       applyTextStyle(label, axis.tickLabelStyle);
       label.textContent = tick.label;
       g.appendChild(label);
@@ -2263,9 +2292,24 @@ function renderAxis(parent, axis, orientation, layout) {
     applyTextStyle(axisLabel, axis.labelStyle);
     axisLabel.textContent = axis.label;
     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);
+        let maxLabelWidth = 40;
+        for (const tick of axis.ticks) {
+          const w = estimateTextWidth(
+            tick.label,
+            axis.tickLabelStyle.fontSize,
+            axis.tickLabelStyle.fontWeight
+          );
+          if (w > maxLabelWidth) maxLabelWidth = w;
+        }
+        const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
+        titleY = area.y + area.height + rotatedHeight + 14;
+      }
       setAttrs(axisLabel, {
         x: area.x + area.width / 2,
-        y: area.y + area.height + 35,
+        y: titleY,
         "text-anchor": "middle"
       });
     } else {
@@ -2749,7 +2793,7 @@ function brandPosition(layout) {
   const padding = layout.theme.spacing.padding;
   const rightEdge = width - padding;
   const { chrome } = layout;
-  const xAxisExtent = layout.axes.x ? layout.axes.x.label ? 48 : 26 : 0;
+  const xAxisExtent = computeXAxisExtent(layout);
   const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
   const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
   const chromeY = firstBottom ? bottomOffset + firstBottom.y : bottomOffset + layout.theme.spacing.chartToFooter;