@opendata-ai/openchart-engine 6.19.2 → 6.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "6.19.2",
+  "version": "6.20.0",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -45,7 +45,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "6.19.2",
+    "@opendata-ai/openchart-core": "6.20.0",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/axes.test.ts

@@ -655,3 +655,71 @@ describe('axis config properties', () => {
     expect(axes.x!.labelFlush).toBeUndefined();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Y-axis produces ~5 ticks at standard sizes
+// ---------------------------------------------------------------------------
+
+describe('y-axis tick density', () => {
+  it('produces 5+ y-axis ticks at standard chart size with full density', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    // A 500x300 chart with domain [100, 500] should show ~5+ ticks, not just 2
+    expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it('y-axis thinning uses vertical overlap, not horizontal text width', () => {
+    // Even with a measureText that reports very wide labels, y-axis should
+    // not thin aggressively because overlap is checked vertically
+    const wideMeasure = () => ({ width: 500, height: 12 });
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, wideMeasure);
+
+    // Wide label text shouldn't cause y-axis thinning (only height matters)
+    expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(5);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Vertical orientation overlap detection
+// ---------------------------------------------------------------------------
+
+describe('ticksOverlap with vertical orientation', () => {
+  const fontSize = 12;
+  const fontWeight = 400;
+
+  it('returns false when vertical ticks have sufficient spacing', () => {
+    // Labels at 30px intervals with 12px font (14.4px with lineHeight)
+    const ticks: AxisTick[] = [
+      { value: 0, position: 0, label: '100' },
+      { value: 1, position: 30, label: '200' },
+      { value: 2, position: 60, label: '300' },
+      { value: 3, position: 90, label: '400' },
+      { value: 4, position: 120, label: '500' },
+    ];
+    expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'vertical')).toBe(false);
+  });
+
+  it('returns true when vertical ticks are too close', () => {
+    // Labels at 10px intervals with 12px font - should overlap vertically
+    const ticks: AxisTick[] = [
+      { value: 0, position: 0, label: '100' },
+      { value: 1, position: 10, label: '200' },
+      { value: 2, position: 20, label: '300' },
+    ];
+    expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'vertical')).toBe(true);
+  });
+
+  it('ignores label text width for vertical orientation', () => {
+    // Very wide labels but well-spaced vertically - should NOT overlap
+    const ticks: AxisTick[] = [
+      { value: 0, position: 0, label: 'Very Long Label Text Here' },
+      { value: 1, position: 40, label: 'Another Very Long Label' },
+      { value: 2, position: 80, label: 'Yet Another Long Label' },
+    ];
+    // Horizontal would detect overlap, vertical should not
+    expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'horizontal')).toBe(true);
+    expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'vertical')).toBe(false);
+  });
+});

package/src/__tests__/legend.test.ts

@@ -1,6 +1,7 @@
 import type { LayoutStrategy, Rect, ResolvedTheme } from '@opendata-ai/openchart-core';
 import { resolveTheme } from '@opendata-ai/openchart-core';
 import { describe, expect, it } from 'vitest';
+import { compileChart } from '../compile';
 import type { NormalizedChartSpec } from '../compiler/types';
 import { computeLegend } from '../legend/compute';
 
@@ -393,4 +394,42 @@ describe('computeLegend', () => {
       expect(legend.bounds.width).toBe(0);
     });
   });
+
+  // ---------------------------------------------------------------------------
+  // Characterization test (refactor/v7-cohesion step 1):
+  // Pins the 4px gap between a top-positioned legend and the chart area,
+  // as enforced at packages/engine/src/compile.ts:331. Refactor step 4 will
+  // consolidate legend row-wrapping geometry; this test guards the spacing
+  // invariant through that change.
+  // ---------------------------------------------------------------------------
+  describe('top legend spacing', () => {
+    it('places the legend exactly 4px above the chart area', () => {
+      const spec = {
+        mark: 'bar' as const,
+        data: [
+          { name: 'A', value: 10, group: 'X' },
+          { name: 'A', value: 20, group: 'Y' },
+          { name: 'B', value: 30, group: 'X' },
+          { name: 'B', value: 25, group: 'Y' },
+        ],
+        encoding: {
+          x: { field: 'name', type: 'nominal' as const },
+          y: { field: 'value', type: 'quantitative' as const },
+          color: { field: 'group', type: 'nominal' as const },
+        },
+        legend: { position: 'top' as const },
+      };
+
+      const layout = compileChart(spec, { width: 600, height: 400 });
+
+      expect(layout.legend.position).toBe('top');
+      expect(layout.legend.entries.length).toBeGreaterThan(0);
+      expect(layout.legend.bounds.height).toBeGreaterThan(0);
+
+      const legendBottom = layout.legend.bounds.y + layout.legend.bounds.height;
+      const gap = layout.area.y - legendBottom;
+      // Pin value matches the literal at compile.ts:331 (legendArea.y -= legendLayout.bounds.height + 4)
+      expect(gap).toBe(4);
+    });
+  });
 });

package/src/charts/_shared/format-label-value.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared numeric value formatter for data labels.
+ *
+ * Used by bar, column, and dot label computation to display a value:
+ * abbreviated (K/M/B/T) for magnitudes >= 1000, otherwise the default
+ * numeric format.
+ */
+
+import { abbreviateNumber, formatNumber } from '@opendata-ai/openchart-core';
+
+/** Format a label value for display (abbreviate large numbers). */
+export function formatLabelValue(value: number): string {
+  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
+  return formatNumber(value);
+}

package/src/charts/bar/__tests__/gradient-orient.test.ts

@@ -0,0 +1,127 @@
+/**
+ * Characterization tests for horizontal-bar gradient auto-orientation.
+ *
+ * Part of refactor/v7-cohesion step 1. Pins the behavior of
+ * `orientGradientForHorizontalBar` in `packages/engine/src/charts/bar/compute.ts`:
+ * when a user supplies the default vertical gradient (top-to-bottom) as a
+ * horizontal-bar fill, the engine rotates it to horizontal (left-to-right) so
+ * the gradient follows the bar's data direction. Vertical bars (columns) keep
+ * the gradient unchanged. Explicit non-default coordinates are never rewritten.
+ *
+ * These tests protect the behavior through upcoming refactors that may consolidate
+ * gradient logic across bar/column/stacked variants.
+ */
+
+import type { ChartSpec, LinearGradient, RectMark } from '@opendata-ai/openchart-core';
+import { isGradientDef } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../../../compile';
+
+// A default-vertical linear gradient (no explicit coords — defaults resolve to
+// x1:0, y1:0, x2:0, y2:1 which is the "top-to-bottom" default).
+const defaultVerticalGradient: LinearGradient = {
+  gradient: 'linear',
+  stops: [
+    { offset: 0, color: '#1b7fa3', opacity: 0.4 },
+    { offset: 1, color: '#1b7fa3' },
+  ],
+};
+
+function firstGradientRectFill(marks: RectMark[]): LinearGradient {
+  const mark = marks.find((m) => m.type === 'rect' && isGradientDef(m.fill));
+  if (!mark) throw new Error('expected at least one RectMark with a gradient fill');
+  const fill = mark.fill;
+  if (!isGradientDef(fill) || fill.gradient !== 'linear') {
+    throw new Error('expected a linear gradient fill');
+  }
+  return fill as LinearGradient;
+}
+
+describe('horizontal bar gradient auto-orientation', () => {
+  it('rotates the default vertical gradient to horizontal on horizontal bars', () => {
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: defaultVerticalGradient },
+      data: [
+        { category: 'A', value: 10 },
+        { category: 'B', value: 20 },
+        { category: 'C', value: 30 },
+      ],
+      // Horizontal bar: x is quantitative, y is nominal
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    // Horizontal gradient: x1 != x2, y1 == y2
+    expect(grad.x1).toBe(0);
+    expect(grad.y1).toBe(0);
+    expect(grad.x2).toBe(1);
+    expect(grad.y2).toBe(0);
+    expect(grad.x1).not.toBe(grad.x2);
+    expect(grad.y1).toBe(grad.y2);
+  });
+
+  it('leaves the default vertical gradient unchanged on vertical (column) bars', () => {
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: defaultVerticalGradient },
+      data: [
+        { category: 'A', value: 10 },
+        { category: 'B', value: 20 },
+        { category: 'C', value: 30 },
+      ],
+      // Vertical bar (column): x is nominal, y is quantitative
+      encoding: {
+        x: { field: 'category', type: 'nominal' },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    // Vertical gradient preserved: x1 == x2 (both 0), y1 != y2 (0 vs 1)
+    expect(grad.x1 ?? 0).toBe(0);
+    expect(grad.x2 ?? 0).toBe(0);
+    expect(grad.y1 ?? 0).toBe(0);
+    expect(grad.y2 ?? 1).toBe(1);
+    expect(grad.x1 ?? 0).toBe(grad.x2 ?? 0);
+    expect(grad.y1 ?? 0).not.toBe(grad.y2 ?? 1);
+  });
+
+  it('leaves an explicitly-oriented gradient unchanged on horizontal bars', () => {
+    // Explicit non-default direction — user knows what they want, the engine
+    // must not rewrite it. Here we pass a diagonal gradient.
+    const explicitDiagonal: LinearGradient = {
+      gradient: 'linear',
+      x1: 0,
+      y1: 0,
+      x2: 1,
+      y2: 1,
+      stops: [
+        { offset: 0, color: '#1b7fa3' },
+        { offset: 1, color: '#ff6600' },
+      ],
+    };
+
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: explicitDiagonal },
+      data: [{ category: 'A', value: 10 }],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    expect(grad.x1).toBe(0);
+    expect(grad.y1).toBe(0);
+    expect(grad.x2).toBe(1);
+    expect(grad.y2).toBe(1);
+  });
+});

package/src/charts/bar/compute.ts

@@ -17,11 +17,12 @@ import type {
   Rect,
   RectMark,
 } from '@opendata-ai/openchart-core';
-import { abbreviateNumber, formatNumber, isGradientDef } from '@opendata-ai/openchart-core';
+import { isGradientDef } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear } from 'd3-scale';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
 import { isConditionalValueDef, resolveConditionalValue } from '../../transforms/conditional';
+import { formatLabelValue } from '../_shared/format-label-value';
 import { getColor, getSequentialColor, groupByField } from '../utils';
 
 /**
@@ -53,12 +54,6 @@ function orientGradientForHorizontalBar(grad: GradientDef): GradientDef {
 
 const MIN_BAR_WIDTH = 1;
 
-/** Format a bar value for display (abbreviate large numbers). */
-function formatBarValue(value: number): string {
-  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
-  return formatNumber(value);
-}
-
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -221,7 +216,7 @@ function computeStackedBars(
       const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatBarValue(rawValue)}`,
+        label: `${category}, ${groupKey}: ${formatLabelValue(rawValue)}`,
       };
 
       marks.push({
@@ -291,7 +286,7 @@ function computeGroupedBars(
       const subY = bandY + groupIndex * (subBandHeight + gap);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatBarValue(value)}`,
+        label: `${category}, ${groupKey}: ${formatLabelValue(value)}`,
       };
 
       marks.push({
@@ -341,7 +336,7 @@ function computeColoredBars(
     const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
 
     const aria: MarkAria = {
-      label: `${category}, ${groupKey}: ${formatBarValue(value)}`,
+      label: `${category}, ${groupKey}: ${formatLabelValue(value)}`,
     };
 
     marks.push({
@@ -401,7 +396,7 @@ function computeSimpleBars(
     const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
 
     const aria: MarkAria = {
-      label: `${category}: ${formatBarValue(value)}`,
+      label: `${category}: ${formatLabelValue(value)}`,
     };
 
     marks.push({

package/src/charts/bar/labels.ts

@@ -18,24 +18,17 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import {
-  abbreviateNumber,
   buildD3Formatter,
   estimateTextWidth,
-  formatNumber,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
+import { formatLabelValue } from '../_shared/format-label-value';
 
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
 
-/** Format a bar value for display (abbreviate large numbers). */
-function formatBarValue(value: number): string {
-  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
-  return formatNumber(value);
-}
-
 /** Suffix multipliers mirroring core's abbreviateNumber output (K/M/B/T). */
 const SUFFIX_MULTIPLIERS: Record<string, number> = {
   K: 1_000,
@@ -124,7 +117,7 @@ export function computeBarLabels(
     if (formatter && Number.isFinite(rawNum)) {
       valuePart = formatter(rawNum);
     } else if (Number.isFinite(rawNum)) {
-      valuePart = formatBarValue(rawNum);
+      valuePart = formatLabelValue(rawNum);
     } else {
       // Fallback: extract from aria label
       const ariaLabel = mark.aria.label;

package/src/charts/column/compute.ts

@@ -20,11 +20,12 @@ import type {
   Rect,
   RectMark,
 } from '@opendata-ai/openchart-core';
-import { abbreviateNumber, formatNumber, isGradientDef } from '@opendata-ai/openchart-core';
+import { isGradientDef } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear } from 'd3-scale';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
 import { isConditionalValueDef, resolveConditionalValue } from '../../transforms/conditional';
+import { formatLabelValue } from '../_shared/format-label-value';
 import { getColor, getSequentialColor, groupByField } from '../utils';
 
 // ---------------------------------------------------------------------------
@@ -33,12 +34,6 @@ import { getColor, getSequentialColor, groupByField } from '../utils';
 
 const MIN_COLUMN_HEIGHT = 1;
 
-/** Format a column value for display (abbreviate large numbers). */
-function formatColumnValue(value: number): string {
-  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
-  return formatNumber(value);
-}
-
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -199,7 +194,7 @@ function computeSimpleColumns(
     const y = value >= 0 ? yPos : baseline;
 
     const aria: MarkAria = {
-      label: `${category}: ${formatColumnValue(value)}`,
+      label: `${category}: ${formatLabelValue(value)}`,
     };
 
     marks.push({
@@ -250,7 +245,7 @@ function computeColoredColumns(
     const y = value >= 0 ? yPos : baseline;
 
     const aria: MarkAria = {
-      label: `${category}, ${groupKey}: ${formatColumnValue(value)}`,
+      label: `${category}, ${groupKey}: ${formatLabelValue(value)}`,
     };
 
     marks.push({
@@ -320,7 +315,7 @@ function computeGroupedColumns(
       const subX = bandX + groupIndex * (subBandWidth + gap);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatColumnValue(value)}`,
+        label: `${category}, ${groupKey}: ${formatLabelValue(value)}`,
       };
 
       marks.push({
@@ -389,7 +384,7 @@ function computeStackedColumns(
       const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatColumnValue(rawValue)}`,
+        label: `${category}, ${groupKey}: ${formatLabelValue(rawValue)}`,
       };
 
       marks.push({

package/src/charts/column/labels.ts

@@ -18,23 +18,12 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import {
-  abbreviateNumber,
   buildD3Formatter,
   estimateTextWidth,
-  formatNumber,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/** Format a column value for display (abbreviate large numbers). */
-function formatColumnValue(value: number): string {
-  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
-  return formatNumber(value);
-}
+import { formatLabelValue } from '../_shared/format-label-value';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -82,7 +71,7 @@ export function computeColumnLabels(
     if (formatter && Number.isFinite(rawNum)) {
       valuePart = formatter(rawNum);
     } else if (Number.isFinite(rawNum)) {
-      valuePart = formatColumnValue(rawNum);
+      valuePart = formatLabelValue(rawNum);
     } else {
       // Fallback: extract from aria label
       const ariaLabel = mark.aria.label;

package/src/charts/dot/labels.ts

@@ -18,23 +18,12 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import {
-  abbreviateNumber,
   buildD3Formatter,
   estimateTextWidth,
-  formatNumber,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/** Format a dot value for display (abbreviate large numbers). */
-function formatDotValue(value: number): string {
-  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
-  return formatNumber(value);
-}
+import { formatLabelValue } from '../_shared/format-label-value';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -81,7 +70,7 @@ export function computeDotLabels(
     if (formatter && Number.isFinite(rawNum)) {
       valuePart = formatter(rawNum);
     } else if (Number.isFinite(rawNum)) {
-      valuePart = formatDotValue(rawNum);
+      valuePart = formatLabelValue(rawNum);
     } else {
       // Fallback: extract from aria label
       const ariaLabel = mark.aria.label;

package/src/layout/axes.ts

@@ -122,15 +122,31 @@ function measureLabel(
     : estimateTextWidth(text, fontSize, fontWeight);
 }
 
-/** Check whether any adjacent tick labels overlap horizontally. */
+/** Check whether any adjacent tick labels overlap along the axis direction. */
 export function ticksOverlap(
   ticks: AxisTick[],
   fontSize: number,
   fontWeight: number,
   measureText?: MeasureTextFn,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
 ): boolean {
   if (ticks.length < 2) return false;
   const minGap = fontSize * MIN_TICK_GAP_FACTOR;
+
+  if (orientation === 'vertical') {
+    // Y-axis: labels are stacked vertically. Check if vertical extent
+    // (based on font height) overlaps between adjacent ticks.
+    // Positions decrease going up in SVG coords, so sort ascending.
+    const sorted = [...ticks].sort((a, b) => a.position - b.position);
+    const labelHeight = fontSize * 1.2; // lineHeight
+    for (let i = 0; i < sorted.length - 1; i++) {
+      const aBottom = sorted[i].position + labelHeight / 2;
+      const bTop = sorted[i + 1].position - labelHeight / 2;
+      if (aBottom + minGap > bTop) return true;
+    }
+    return false;
+  }
+
   for (let i = 0; i < ticks.length - 1; i++) {
     const aWidth = measureLabel(ticks[i].label, fontSize, fontWeight, measureText);
     const bWidth = measureLabel(ticks[i + 1].label, fontSize, fontWeight, measureText);
@@ -151,8 +167,9 @@ export function thinTicksUntilFit(
   fontSize: number,
   fontWeight: number,
   measureText?: MeasureTextFn,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
 ): AxisTick[] {
-  if (!ticksOverlap(ticks, fontSize, fontWeight, measureText)) return ticks;
+  if (!ticksOverlap(ticks, fontSize, fontWeight, measureText, orientation)) return ticks;
 
   let current = ticks;
   while (current.length > MIN_TICK_COUNT) {
@@ -164,7 +181,7 @@ export function thinTicksUntilFit(
     if (current.length > 1) thinned.push(current[current.length - 1]);
     current = thinned;
 
-    if (!ticksOverlap(current, fontSize, fontWeight, measureText)) break;
+    if (!ticksOverlap(current, fontSize, fontWeight, measureText, orientation)) break;
   }
   return current;
 }
@@ -455,7 +472,7 @@ export function computeAxes(
     // Thin tick labels to prevent overlap (skip for band scales, explicit tickCount, and values).
     const shouldThin = scales.y.type !== 'band' && !axisConfig?.tickCount && !axisConfig?.values;
     const ticks = shouldThin
-      ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText)
+      ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText, 'vertical')
       : allTicks;
 
     // Gridlines match the tick set so every gridline has a label.

package/src/legend/compute.ts

@@ -23,14 +23,12 @@ import type {
 import { BRAND_RESERVE_WIDTH, estimateTextWidth } from '@opendata-ai/openchart-core';
 
 import type { NormalizedChartSpec } from '../compiler/types';
+import { ENTRY_GAP, measureLegendWrap, SWATCH_GAP, SWATCH_SIZE } from './wrap';
 
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
 
-const SWATCH_SIZE = 12;
-const SWATCH_GAP = 6;
-const ENTRY_GAP = 16;
 const LEGEND_PADDING = 8;
 const LEGEND_RIGHT_WIDTH = 120;
 
@@ -92,38 +90,6 @@ function extractColorEntries(spec: NormalizedChartSpec, theme: ResolvedTheme): L
   });
 }
 
-/**
- * Calculate how many entries fit within a given number of horizontal rows.
- */
-function entriesThatFit(
-  entries: LegendEntry[],
-  maxWidth: number,
-  maxRows: number,
-  labelStyle: TextStyle,
-): number {
-  let row = 1;
-  let rowWidth = 0;
-
-  for (let i = 0; i < entries.length; i++) {
-    const labelWidth = estimateTextWidth(
-      entries[i].label,
-      labelStyle.fontSize,
-      labelStyle.fontWeight,
-    );
-    const entryWidth = SWATCH_SIZE + SWATCH_GAP + labelWidth + ENTRY_GAP;
-
-    if (rowWidth + entryWidth > maxWidth && rowWidth > 0) {
-      row++;
-      rowWidth = entryWidth;
-      if (row > maxRows) return i;
-    } else {
-      rowWidth += entryWidth;
-    }
-  }
-
-  return entries.length;
-}
-
 /**
  * Truncate entries and add a "+N more" indicator if needed.
  */
@@ -310,10 +276,10 @@ export function computeLegend(
       : spec.legend?.columns != null
         ? Math.ceil(entries.length / spec.legend.columns)
         : TOP_LEGEND_MAX_ROWS;
-  const maxFit = entriesThatFit(entries, availableWidth, maxRows, labelStyle);
+  const { fittingCount } = measureLegendWrap(entries, availableWidth, labelStyle, maxRows);
 
-  if (maxFit < entries.length) {
-    entries = truncateEntries(entries, maxFit);
+  if (fittingCount < entries.length) {
+    entries = truncateEntries(entries, fittingCount);
   }
 
   const totalWidth = entries.reduce((sum, entry) => {
@@ -321,19 +287,8 @@ export function computeLegend(
     return sum + SWATCH_SIZE + SWATCH_GAP + labelWidth + ENTRY_GAP;
   }, 0);
 
-  // Calculate actual row count for height
-  let rowCount = 1;
-  let rowWidth = 0;
-  for (const entry of entries) {
-    const labelWidth = estimateTextWidth(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
-    const entryWidth = SWATCH_SIZE + SWATCH_GAP + labelWidth + ENTRY_GAP;
-    if (rowWidth + entryWidth > availableWidth && rowWidth > 0) {
-      rowCount++;
-      rowWidth = entryWidth;
-    } else {
-      rowWidth += entryWidth;
-    }
-  }
+  // Calculate actual row count for height (recompute after truncation).
+  const { rowCount } = measureLegendWrap(entries, availableWidth, labelStyle);
 
   const rowHeight = SWATCH_SIZE + 4;
   const legendHeight = rowCount * rowHeight + LEGEND_PADDING * 2;