@opendata-ai/openchart-vanilla 2.3.5 → 2.5.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 {
@@ -2308,6 +2352,9 @@ function renderLineMark(mark, index) {
     if (mark.strokeDasharray) {
       path.setAttribute("stroke-dasharray", mark.strokeDasharray);
     }
+    if (mark.opacity != null) {
+      path.setAttribute("opacity", String(mark.opacity));
+    }
     g.appendChild(path);
   }
   if (mark.label?.visible) {
@@ -2740,52 +2787,21 @@ function renderLegend(parent, legend) {
   }
   parent.appendChild(g);
 }
-var BRAND_FONT_SIZE = 20;
+var BRAND_FONT_SIZE = 11;
 var BRAND_MIN_WIDTH2 = 120;
 var BRAND_URL = "https://tryopendata.ai";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
-function brandPosition(layout) {
+function renderBrand(parent, layout) {
+  if (layout.dimensions.width < BRAND_MIN_WIDTH2) return;
   const { width } = layout.dimensions;
   const padding = layout.theme.spacing.padding;
   const rightEdge = width - padding;
+  const fill = layout.theme.colors.axis;
   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;
-  const y = chromeY + BRAND_FONT_SIZE;
-  const dataWidth = estimateTextWidth("Data", BRAND_FONT_SIZE, 600);
-  const dataX = rightEdge - dataWidth;
-  const openX = dataX;
-  return { openX, dataX, y, fill: layout.theme.colors.axis };
-}
-function renderBrandOpen(parent, layout) {
-  if (layout.dimensions.width < BRAND_MIN_WIDTH2) return;
-  const { openX, y, fill } = brandPosition(layout);
-  const a = createSVGElement("a");
-  a.setAttribute("href", BRAND_URL);
-  a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
-  a.setAttribute("target", "_blank");
-  a.setAttribute("rel", "noopener");
-  a.setAttribute("class", "viz-axis-ref");
-  const text = createSVGElement("text");
-  setAttrs(text, {
-    x: openX,
-    y,
-    "font-family": layout.theme.fonts.family,
-    "font-size": BRAND_FONT_SIZE,
-    "font-weight": 500,
-    "text-anchor": "end",
-    "fill-opacity": 0.55
-  });
-  text.style.setProperty("fill", fill);
-  text.textContent = "Open";
-  a.appendChild(text);
-  parent.appendChild(a);
-}
-function renderBrandData(parent, layout) {
-  if (layout.dimensions.width < BRAND_MIN_WIDTH2) return;
-  const { dataX, y, fill } = brandPosition(layout);
   const a = createSVGElement("a");
   a.setAttribute("href", BRAND_URL);
   a.setAttributeNS(XLINK_NS, "xlink:href", BRAND_URL);
@@ -2794,16 +2810,23 @@ function renderBrandData(parent, layout) {
   a.setAttribute("class", "viz-chrome-ref");
   const text = createSVGElement("text");
   setAttrs(text, {
-    x: dataX,
-    y,
+    x: rightEdge,
+    y: chromeY,
     "font-family": layout.theme.fonts.family,
     "font-size": BRAND_FONT_SIZE,
-    "font-weight": 600,
-    "text-anchor": "start",
+    "text-anchor": "end",
+    "dominant-baseline": "hanging",
     "fill-opacity": 0.55
   });
   text.style.setProperty("fill", fill);
-  text.textContent = "Data";
+  const openSpan = createSVGElement("tspan");
+  openSpan.setAttribute("font-weight", "500");
+  openSpan.textContent = "Open";
+  text.appendChild(openSpan);
+  const dataSpan = createSVGElement("tspan");
+  dataSpan.setAttribute("font-weight", "600");
+  dataSpan.textContent = "Data";
+  text.appendChild(dataSpan);
   a.appendChild(text);
   parent.appendChild(a);
 }
@@ -2847,9 +2870,8 @@ function renderChartSVG(layout, container) {
   svg.appendChild(clippedGroup);
   renderAnnotations(svg, layout);
   renderLegend(svg, layout.legend);
-  renderBrandOpen(svg, layout);
   renderChrome(svg, layout);
-  renderBrandData(svg, layout);
+  renderBrand(svg, layout);
   container.appendChild(svg);
   return svg;
 }