@opendata-ai/openchart-vanilla 7.2.1 → 7.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "7.2.1",
+  "version": "7.2.3",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "7.2.1",
-    "@opendata-ai/openchart-engine": "7.2.1",
+    "@opendata-ai/openchart-core": "7.2.3",
+    "@opendata-ai/openchart-engine": "7.2.3",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/__tests__/svg-renderer.test.ts

@@ -6,6 +6,7 @@
  * and that chart furniture (chrome, axes, legend, gridlines) renders properly.
  */
 
+import { AXIS_TITLE_GAP, estimateTextWidth, TICK_LABEL_OFFSET } from '@opendata-ai/openchart-core';
 import type { ChartSpec, CompileOptions } from '@opendata-ai/openchart-engine';
 import { compileChart } from '@opendata-ai/openchart-engine';
 import { afterEach, describe, expect, it } from 'vitest';
@@ -531,6 +532,22 @@ describe('axis rendering', () => {
     // The renderer draws an axis line for x-axis
     expect(line).not.toBeNull();
   });
+
+  it('x-tick labels hang below the axis line by the label padding (no hugging)', () => {
+    const { svg, layout } = renderSpec(lineSpec);
+    const xAxis = svg.querySelector('.oc-axis-x')!;
+    const axisLineY = Number(xAxis.querySelector('line')!.getAttribute('y2'));
+    const labels = Array.from(xAxis.querySelectorAll('text.oc-axis-tick'));
+    expect(labels.length).toBeGreaterThan(0);
+
+    const pad = layout.theme.spacing.xAxisLabelPadding;
+    for (const label of labels) {
+      // Anchored at the top edge so the gap holds regardless of font size.
+      expect(label.getAttribute('dominant-baseline')).toBe('hanging');
+      // The label top sits a full padding gap below the axis line.
+      expect(Number(label.getAttribute('y'))).toBeCloseTo(axisLineY + pad, 1);
+    }
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -782,3 +799,84 @@ describe('brand watermark', () => {
     expect(brandLink).toBeNull();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Y-axis title spacing (regression for the title overlapping the tick labels)
+// ---------------------------------------------------------------------------
+
+describe('left y-axis title spacing', () => {
+  // Builds a chart with a left y-axis title and reads back the real geometry to
+  // compute the horizontal clearance between the widest tick label's far (left)
+  // edge and the rotated title's near (right) edge. A non-negative clearance
+  // means they don't overlap; the bug was a negative one at large font sizes.
+  const yTitleSpec = (axisTitleSize: number, values: number[]): ChartSpec => ({
+    mark: { type: 'line' },
+    data: values.map((v, i) => ({ year: String(2018 + i), pct: v })),
+    encoding: {
+      x: { field: 'year', type: 'ordinal' },
+      y: {
+        field: 'pct',
+        type: 'quantitative',
+        axis: { title: 'Spring 2026 pass rate', format: '.0f%' },
+      },
+    },
+    chrome: { title: 'Pass rate' },
+    // The deck renders axis titles via theme.fonts.sizes.body; vary it to
+    // reproduce the large-font overlap.
+    theme: { fonts: { sizes: { body: axisTitleSize } } },
+  });
+
+  // Clearance = (widest tick label's left edge) - (title glyph's right edge).
+  // Tick labels: text-anchor=end at x = area.x - 6, so left edge = anchorX - width.
+  // Title: text-anchor=middle, rotated, center at the title's x attr; its glyph
+  // box extends fontSize/2 toward the labels (the +x direction).
+  const measureClearance = (axisTitleSize: number, values: number[]): number => {
+    const container = createContainer(700, 450);
+    const layout = compileChart(yTitleSpec(axisTitleSize, values), {
+      width: 700,
+      height: 450,
+    });
+    const svg = renderChartSVG(layout, container);
+
+    const title = svg.querySelector('.oc-axis-title') as SVGTextElement | null;
+    expect(title).not.toBeNull();
+    const titleCenterX = Number(title!.getAttribute('x'));
+    const titleNearEdge = titleCenterX + axisTitleSize / 2;
+
+    const tickStyle = layout.axes.y!.tickLabelStyle;
+    const tickAnchorX = layout.area.x - TICK_LABEL_OFFSET;
+    let widestLeftEdge = tickAnchorX;
+    for (const t of layout.axes.y!.ticks) {
+      const w = estimateTextWidth(t.label, tickStyle.fontSize, tickStyle.fontWeight ?? 400);
+      widestLeftEdge = Math.min(widestLeftEdge, tickAnchorX - w);
+    }
+
+    return widestLeftEdge - titleNearEdge;
+  };
+
+  const PASS_RATES = [38, 41, 46, 52, 49, 61]; // labels like "38%" ... "61%"
+  // Require real breathing room, not just non-overlap. At the deck font size the
+  // old code left only ~3.5px (glyphs visibly touching), which this floor rejects.
+  const MIN_CLEARANCE = AXIS_TITLE_GAP - 1;
+
+  it('keeps the title clear of the tick labels at the default font size', () => {
+    expect(measureClearance(13, PASS_RATES)).toBeGreaterThanOrEqual(MIN_CLEARANCE);
+  });
+
+  it('keeps the title clear of the tick labels at a large (deck) font size', () => {
+    // The slide deck uses body=21 for axis titles. Under the old fixed gap this
+    // left only ~3.5px and the title glyphs touched the labels (the reported bug).
+    expect(measureClearance(21, PASS_RATES)).toBeGreaterThanOrEqual(MIN_CLEARANCE);
+  });
+
+  it('does not lose clearance as the title font size grows', () => {
+    // The original bug: clearance shrank ~1px per font-size point as the title's
+    // half-glyph ate the fixed gap, so big titles overlapped (negative clearance
+    // at body=36). Now the half-glyph is folded into the offset, so clearance
+    // holds at ~AXIS_TITLE_GAP across the whole font range instead of collapsing.
+    const sizes = [13, 18, 21, 28, 36];
+    for (const s of sizes) {
+      expect(measureClearance(s, PASS_RATES)).toBeGreaterThanOrEqual(MIN_CLEARANCE);
+    }
+  });
+});

package/src/graph/__tests__/canvas-renderer.test.ts

@@ -86,7 +86,15 @@ function makeTheme(isDark = false): ResolvedTheme {
     fonts: {
       family: 'Inter, sans-serif',
       mono: 'monospace',
-      sizes: { title: 18, subtitle: 14, body: 12, small: 10, axisTick: 11 },
+      sizes: {
+        title: 18,
+        subtitle: 14,
+        body: 12,
+        small: 10,
+        axisTick: 11,
+        metricLabel: 10,
+        metricValue: 22,
+      },
       weights: { normal: 400, medium: 500, semibold: 600, bold: 700 },
     },
     spacing: {

package/src/renderers/axes.ts

@@ -4,7 +4,7 @@
 
 import type { AxisLayout, ChartLayout } from '@opendata-ai/openchart-core';
 import {
-  AXIS_TITLE_GAP,
+  axisTitleOffset,
   estimateTextWidth,
   getAxisTitleOffset,
   TICK_LABEL_OFFSET,
@@ -86,10 +86,16 @@ function renderAxis(
         });
       } else {
         const xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
+        // Anchor at the text's top edge (hanging baseline) so xLabelPad is the
+        // literal gap between the axis line and the top of the label, regardless
+        // of font size. With the default alphabetic baseline the offset lands at
+        // the text baseline instead, so large fonts let the label top creep up
+        // and hug (or overlap) the axis line.
         setAttrs(label, {
           x: tick.position,
           y: area.y + area.height + xLabelPad,
           'text-anchor': 'middle',
+          'dominant-baseline': 'hanging',
         });
       }
 
@@ -272,6 +278,9 @@ function renderAxis(
     } else {
       // Rotated left y-axis label.
       // Compute a dynamic offset so the title clears the widest tick label.
+      // The title is rotated and centered, so axisTitleOffset() adds its own
+      // half-glyph height on top of the gap (otherwise large title fonts overlap
+      // the tick labels — the gap is visible clearance, not center-to-edge).
       const maxTickLabelWidth = axis.ticks.reduce((max, t) => {
         const w = estimateTextWidth(
           t.label,
@@ -280,8 +289,11 @@ function renderAxis(
         );
         return Math.max(max, w);
       }, 0);
-      const dynamicOffset = TICK_LABEL_OFFSET + maxTickLabelWidth + AXIS_TITLE_GAP;
-      const titleOffset = Math.max(dynamicOffset, getAxisTitleOffset(layout.dimensions.width));
+      const titleOffset = axisTitleOffset(
+        maxTickLabelWidth,
+        axis.labelStyle.fontSize,
+        layout.dimensions.width,
+      );
       setAttrs(axisLabel, {
         x: area.x - titleOffset,
         y: area.y + area.height / 2,

package/src/renderers/metrics.ts

@@ -7,23 +7,34 @@
 import type { ChartLayout } from '@opendata-ai/openchart-core';
 import { createSVGElement, setAttrs } from './svg-dom';
 
+// Delta and secondary text run at a fraction of the primary value size. This
+// preserves the editorial mock's proportion (12px delta against a 22px value)
+// at any theme-driven value size, so scaling metricValue scales the whole cell.
+const DELTA_SIZE_RATIO = 12 / 22;
+
 export function renderMetrics(parent: SVGElement, layout: ChartLayout): void {
   const bar = layout.metrics;
   if (!bar || bar.cells.length === 0) return;
 
+  // Font sizes flow from the theme. Set them inline so they override the CSS
+  // defaults (.oc-metric-* in chrome.css) when a chart customizes the sizes.
+  const labelSize = layout.theme.fonts.sizes.metricLabel;
+  const valueSize = layout.theme.fonts.sizes.metricValue;
+  const deltaSize = Math.round(valueSize * DELTA_SIZE_RATIO);
+
   const g = createSVGElement('g');
   g.setAttribute('class', 'oc-metrics');
 
   for (const cell of bar.cells) {
     const label = createSVGElement('text');
     label.setAttribute('class', 'oc-metric-label');
-    setAttrs(label, { x: cell.x, y: cell.labelY });
+    setAttrs(label, { x: cell.x, y: cell.labelY, 'font-size': labelSize });
     label.textContent = cell.metric.label.toUpperCase();
     g.appendChild(label);
 
     const value = createSVGElement('text');
     value.setAttribute('class', 'oc-metric-value');
-    setAttrs(value, { x: cell.x, y: cell.valueY });
+    setAttrs(value, { x: cell.x, y: cell.valueY, 'font-size': valueSize });
     value.textContent = cell.metric.value;
 
     if (cell.metric.delta) {
@@ -31,6 +42,7 @@ export function renderMetrics(parent: SVGElement, layout: ChartLayout): void {
       const tone = cell.metric.deltaTone ?? 'up';
       delta.setAttribute('class', tone === 'down' ? 'oc-metric-delta-down' : 'oc-metric-delta-up');
       delta.setAttribute('dx', '8');
+      delta.setAttribute('font-size', String(deltaSize));
       delta.textContent = cell.metric.delta;
       value.appendChild(delta);
     }
@@ -39,6 +51,7 @@ export function renderMetrics(parent: SVGElement, layout: ChartLayout): void {
       const secondary = createSVGElement('tspan');
       secondary.setAttribute('class', 'oc-metric-secondary');
       secondary.setAttribute('dx', '6');
+      secondary.setAttribute('font-size', String(deltaSize));
       secondary.textContent = cell.metric.secondary;
       value.appendChild(secondary);
     }