graphein 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -1114,6 +1114,13 @@ interface AxisConfig {
     format?: string;
     /** Show tick labels. */
     labels?: boolean;
+    /**
+     * Rotation of x-axis tick labels in degrees: `0` horizontal, `45` diagonal,
+     * `90` vertical. Omit for **auto** — categorical (bar/column) labels rotate to
+     * 45° when there isn't room to show them all horizontally, so every category
+     * stays visible instead of being thinned out. (X axis only.)
+     */
+    labelAngle?: number;
 }
 interface AxesConfig {
     x?: AxisConfig;
@@ -2877,6 +2884,12 @@ interface AxisInput {
      * false/omitted for them.
      */
     edgeAnchored?: boolean;
+    /**
+     * Explicit tick-label rotation in degrees (0/45/90). When omitted, categorical
+     * (non-edge-anchored) labels auto-rotate to 45° if they wouldn't fit; the
+     * resolved angle is returned on {@link Frame.xLabelAngle}.
+     */
+    labelAngle?: number;
 }
 interface FrameInput {
     width: number;
@@ -2909,6 +2922,8 @@ interface Frame {
     legendRect?: Rect;
     legendItems?: PositionedLegendItem[];
     legendPosition?: LegendPosition;
+    /** Resolved x tick-label rotation in degrees (0 = horizontal). */
+    xLabelAngle: number;
 }
 declare const TICK_SIZE = 6;
 /** Reserve space for every region and return the plot rect + positioned chrome. */

package/dist/index.js

@@ -3268,7 +3268,10 @@ function paintCanvasText(ctx, c) {
 }
 function overlayTextToCanvasCmd(o, font) {
   const t = o.transform ?? "";
-  const rotate = t.includes("rotate(-90deg)") ? -Math.PI / 2 : t.includes("rotate(90deg)") ? Math.PI / 2 : void 0;
+  const rotate = t.includes("rotate(-90deg)") ? -Math.PI / 2 : t.includes("rotate(90deg)") ? Math.PI / 2 : (() => {
+    const m = t.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
+    return m ? parseFloat(m[1]) * Math.PI / 180 : void 0;
+  })();
   let align = "left";
   let x = o.left;
   const y = o.top;
@@ -5797,6 +5800,15 @@ var LEGEND_ITEM_GAP = 16;
 var LEGEND_ROW_GAP = 6;
 var LEGEND_PAD = 4;
 var lineHeight = (size) => Math.round(size * 1.35);
+function resolveXLabelAngle(axis, available, font) {
+  if (axis.labelAngle != null) return Math.max(0, Math.min(90, axis.labelAngle));
+  const labels = axis.labels;
+  if (axis.edgeAnchored || labels.length < 2 || available <= 0) return 0;
+  const wfont = fontString(font.size.small, font.family, font.weight.normal);
+  const widest = Math.max(...labels.map((l) => measureText(l, wfont).width));
+  const needed = widest + 10;
+  return available / labels.length >= needed ? 0 : 45;
+}
 function legendItemWidth(label, font) {
   const w = measureText(label, fontString(font.size.small, font.family, font.weight.normal)).width;
   return LEGEND_SWATCH + LEGEND_SWATCH_GAP + Math.ceil(w);
@@ -5857,7 +5869,8 @@ function computeFrame(input) {
     height,
     originX: ox,
     originY: oy,
-    plot: { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) }
+    plot: { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) },
+    xLabelAngle: 0
   };
   if (input.title?.text) {
     const titleH = lineHeight(font.size.title);
@@ -5922,10 +5935,21 @@ function computeFrame(input) {
     }
   }
   if (input.xAxis?.show) {
-    let gutter = lineHeight(font.size.small) + TICK_SIZE + AXIS_LABEL_GAP;
+    const angle = resolveXLabelAngle(input.xAxis, right - left, font);
+    frame.xLabelAngle = angle;
+    const labelH = lineHeight(font.size.small);
+    let labelBand = labelH;
+    if (angle > 0 && input.xAxis.labels.length) {
+      const wfont = fontString(font.size.small, font.family, font.weight.normal);
+      const widest = Math.max(...input.xAxis.labels.map((l) => measureText(l, wfont).width));
+      const cappedW = Math.min(widest, (bottom - top) * 0.4);
+      const rad = angle * Math.PI / 180;
+      labelBand = Math.ceil(cappedW * Math.sin(rad) + labelH * Math.cos(rad));
+    }
+    let gutter = labelBand + TICK_SIZE + AXIS_LABEL_GAP;
     if (input.xAxis.title) gutter += lineHeight(font.size.base) + AXIS_TITLE_GAP;
     bottom -= gutter;
-    if (input.xAxis.edgeAnchored && input.xAxis.labels.length) {
+    if (input.xAxis.edgeAnchored && angle === 0 && input.xAxis.labels.length) {
       const wfont = fontString(font.size.small, font.family, font.weight.normal);
       const labels = input.xAxis.labels;
       const firstHalf = Math.ceil(measureText(labels[0], wfont).width / 2);
@@ -5980,6 +6004,7 @@ function addText(surface, font, o) {
     el.style.textAlign = o.align ?? "left";
   }
   if (o.transform) el.style.transform = o.transform;
+  if (o.transformOrigin) el.style.transformOrigin = o.transformOrigin;
   el.style.pointerEvents = "none";
   overlay.appendChild(el);
 }
@@ -6115,8 +6140,18 @@ function placeXLabels(ticks2, originX, frameWidth, font) {
   }
   return boxes.filter((_, i) => keep[i]);
 }
+function placeRotatedXLabels(ticks2, angle) {
+  return ticks2.map((t) => ({
+    text: t.label,
+    pos: t.pos,
+    left: t.pos,
+    transform: `translateX(-100%) rotate(-${angle}deg)`
+  }));
+}
 function resolveXLabels(model) {
   const f = model.tokens.font;
+  const angle = model.frame.xLabelAngle;
+  if (angle > 0) return placeRotatedXLabels(model.xTicks, angle);
   const smallFont = fontString(f.size.small, f.family, f.weight.normal);
   const thinned = thinXTicks(model, f.size.small * 0.58);
   return placeXLabels(thinned, model.frame.originX, model.frame.width, smallFont);
@@ -6142,6 +6177,7 @@ function drawOverlay(surface, model) {
   }
   if (model.spec.axes?.x?.labels !== false) {
     const top = plot.y + plot.height + TICK_SIZE + 3;
+    const rotated = frame.xLabelAngle > 0;
     for (const p of resolveXLabels(model)) {
       addText(surface, smallFont, {
         left: p.left,
@@ -6149,7 +6185,9 @@ function drawOverlay(surface, model) {
         text: p.text,
         color: tokens.color.textMuted,
         size: f.size.small,
-        transform: p.transform
+        align: rotated ? "right" : void 0,
+        transform: p.transform,
+        transformOrigin: rotated ? "100% 0%" : void 0
       });
     }
   }
@@ -6536,7 +6574,7 @@ function buildCartesianModel(spec, tokens, opts) {
     font: tokens.font,
     title: titleInput4,
     legend: legend.show && legendItems.length > 1 ? { items: legendItems, position: legend.position } : void 0,
-    xAxis: { show: xShow, labels: xLabels, title: resolveAxisTitle(enc.x, xAxisCfg), edgeAnchored: !categories },
+    xAxis: { show: xShow, labels: xLabels, title: resolveAxisTitle(enc.x, xAxisCfg), edgeAnchored: !categories, labelAngle: xAxisCfg.labelAngle },
     yAxis: { show: yShow, labels: yLabels, title: resolveAxisTitle(enc.y, yAxisCfg) }
   });
   const plot = frame.plot;
@@ -15702,6 +15740,7 @@ function checkClippedMarks(model, add) {
 function checkAxisLabelOverlap(model, tokens, add) {
   const ticks2 = model.xTicks;
   if (ticks2.length < 2) return;
+  if (model.frame.xLabelAngle > 0) return;
   const font = fontString(tokens.font.size.small, tokens.font.family, tokens.font.weight.normal);
   const GAP3 = 4;
   let collisions = 0;