graphein 0.7.2 → 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;
@@ -2482,8 +2489,9 @@ declare function fontString(size: number, family: string, weight?: number | stri
  *
  * A dashboard owns a shared dataset and a shared selection store, lays its views
  * out on a responsive grid, and *auto-wires* cross-interaction: slicers filter
- * the charts, and clicking a chart cross-highlights the other charts that share
- * the selected field. Everything is plain JSON — no callbacks — so a dashboard
+ * the charts, and clicking a chart cross-filters the other views while the
+ * source dims its own unpicked marks (Power BI–style).
+ * Everything is plain JSON — no callbacks — so a dashboard
  * round-trips through `JSON.stringify` just like a chart.
  */
 
@@ -2607,8 +2615,9 @@ interface DashboardSpec {
     views: DashboardView[];
     /**
      * Cross-interaction policy:
-     * - 'auto' (default): slicers filter charts; chart clicks cross-highlight
-     *   charts sharing the selected field.
+     * - 'auto' (default): every source cross-filters the page — slicers and chart
+     *   clicks both subset rows in the other views; the clicked chart dims its own
+     *   unpicked marks instead of hiding them.
      * - 'none': views are laid out but not linked.
      * - an array of {@link InteractionLink}: explicit wiring (replaces auto).
      */
@@ -2875,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;
@@ -2907,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. */
@@ -3682,12 +3699,12 @@ declare function render(target: HTMLElement | string, spec: ChartSpec, options?:
  * store) so it unit-tests in node and the runtime stays a thin shell.
  *
  * Rules (interactions: 'auto'):
- * - A **slicer** publishes a value on its field/param; every chart that *uses*
- *   that field gets a `filter` clause for it (cross-filter).
- * - A **chart** click publishes a point selection on its key field(s); every
- *   chart that uses *all* those fields (including itself) gets that param added
- *   to its `highlight` union (cross-highlight). Matching on shared fields means
- *   emphasis is always well-defined — a chart never dims itself to nothing.
+ * - A **slicer** publishes a value on its field/param; every other non-slicer
+ *   view gets a `filter` clause for it (page-level cross-filter).
+ * - A **chart** click publishes a point selection on its key field(s). The
+ *   source emphasizes itself (`highlight` on its own param, so it dims the
+ *   unpicked marks rather than hiding them), and **every other view** gets a
+ *   `filter` clause for that param (Power BI–style cross-filter of the page).
  */
 
 declare function isSlicerType(type: ChartSpec['type']): boolean;

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;
@@ -16401,11 +16440,6 @@ function addFilterParam(spec, paramName) {
   filter.push({ param: paramName });
   return { ...spec, filter };
 }
-function usesAll(spec, fields) {
-  if (fields.length === 0) return false;
-  const have = specFields(spec);
-  return fields.every((f) => have.has(f));
-}
 function autoParamName(view) {
   const existing = view.spec.params?.[0]?.name;
   return existing ?? `__sel__${view.id}`;
@@ -16441,16 +16475,12 @@ function wireViews(views, interactions) {
           name: src.param,
           select: { type: "point", on: "click", fields: src.fields }
         });
+        out[src.view].spec = addHighlight(out[src.view].spec, src.param);
       }
       out.forEach((v, j) => {
         if (isSlicerType(v.spec.type)) return;
-        if (src.as === "filter") {
-          if (j === src.view) return;
-          out[j].spec = addFilterParam(out[j].spec, src.param);
-        } else {
-          if (!usesAll(v.spec, src.fields)) return;
-          out[j].spec = addHighlight(out[j].spec, src.param);
-        }
+        if (j === src.view) return;
+        out[j].spec = addFilterParam(out[j].spec, src.param);
       });
     }
     return out;