@opendata-ai/openchart-engine 7.2.2 → 7.2.4

package/package.json

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

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -443,6 +443,8 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,
@@ -1419,6 +1421,8 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,
@@ -2010,6 +2014,8 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,

package/src/annotations/__tests__/compute.test.ts

@@ -624,6 +624,25 @@ describe('computeAnnotations', () => {
       expect(annotations[0].strokeDasharray).toBeDefined();
     });
 
+    it('refline label defaults to fontSize 11', () => {
+      const spec = makeSpec([{ type: 'refline', x: '2020-06-01', label: 'Event' }]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(11);
+    });
+
+    it('refline label honors fontSize and fontWeight overrides', () => {
+      const spec = makeSpec([
+        { type: 'refline', x: '2020-06-01', label: 'Event', fontSize: 24, fontWeight: 600 },
+      ]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(24);
+      expect(annotations[0].label!.style.fontWeight).toBe(600);
+    });
+
     it('solid refline has no dasharray', () => {
       const spec = makeSpec([{ type: 'refline', y: 20, style: 'solid' }]);
       const scales = computeScales(spec, chartArea, spec.data);

package/src/annotations/resolve-refline.ts

@@ -123,7 +123,12 @@ export function resolveRefLineAnnotation(
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
 
     const defaultStroke = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
-    const style = makeAnnotationLabelStyle(11, 400, annotation.stroke ?? defaultStroke, isDark);
+    const style = makeAnnotationLabelStyle(
+      annotation.fontSize ?? 11,
+      annotation.fontWeight ?? 400,
+      annotation.stroke ?? defaultStroke,
+      isDark,
+    );
     style.textAnchor = textAnchor;
 
     label = {

package/src/charts/bar/__tests__/compute.test.ts

@@ -490,6 +490,73 @@ describe('computeBarMarks', () => {
     });
   });
 
+  describe('x-domain excludes zero', () => {
+    it('simple bars anchor at the domain minimum, not xScale(0)', () => {
+      const spec = makeSimpleBarSpec();
+      (spec.encoding.x as { scale?: { domain: number[] } }).scale = { domain: [65, 95] };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const xScale = scales.x!.scale as (v: number) => number;
+      const left = xScale(65);
+
+      // Every bar starts at the plot-area left edge (xScale of the domain min),
+      // not at the far-left extrapolation of xScale(0).
+      for (const mark of marks) {
+        expect(mark.x).toBeCloseTo(left, 5);
+        // Bars never bleed left of the plot area into the y-axis label gutter.
+        expect(mark.x).toBeGreaterThanOrEqual(chartArea.x);
+      }
+      // Guard against the old behavior: xScale(0) lands well left of the plot area.
+      expect(xScale(0)).toBeLessThan(chartArea.x);
+    });
+
+    it('grouped bars anchor at the domain minimum, not xScale(0)', () => {
+      const spec = makeGroupedBarSpec();
+      (spec.encoding.x as { scale?: { domain: number[] } }).scale = { domain: [65, 95] };
+      // Lift values into the [65, 95] window so widths stay positive.
+      spec.data = spec.data.map((d) => ({ ...d, value: 70 + (d.value as number) / 10 }));
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const xScale = scales.x!.scale as (v: number) => number;
+      const left = xScale(65);
+
+      for (const mark of marks) {
+        expect(mark.x).toBeCloseTo(left, 5);
+        expect(mark.x).toBeGreaterThanOrEqual(chartArea.x);
+      }
+    });
+  });
+
+  describe('x-domain includes zero (no regression)', () => {
+    it('simple bars still anchor at xScale(0) for a default [0, max] domain', () => {
+      const spec = makeSimpleBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const xScale = scales.x!.scale as (v: number) => number;
+      for (const mark of marks) {
+        expect(mark.x).toBeCloseTo(xScale(0), 5);
+      }
+    });
+
+    it('diverging bars (domain crosses zero) still anchor at xScale(0)', () => {
+      const spec = makeNegativeBarSpec();
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      const xScale = scales.x!.scale as (v: number) => number;
+      const zero = xScale(0);
+
+      const growth = marks.find((m) => m.aria.label.includes('Growth'))!;
+      const decline = marks.find((m) => m.aria.label.includes('Decline'))!;
+      // Positive bar starts at zero; negative bar ends at zero.
+      expect(growth.x).toBeCloseTo(zero, 5);
+      expect(decline.x + decline.width).toBeCloseTo(zero, 5);
+    });
+  });
+
   describe('edge cases', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {

package/src/charts/bar/compute.ts

@@ -88,7 +88,14 @@ export function computeBarMarks(
   }
 
   const bandwidth = yScale.bandwidth();
-  const baseline = xScale(0);
+  // Baseline = pixel x where the bar's left edge anchors. When the x-domain
+  // includes zero (the common case), this is xScale(0). When the domain
+  // excludes zero (explicit non-zero domain or scale.zero: false), xScale(0)
+  // would extrapolate outside the plot area and overrun the y-axis labels, so
+  // anchor to the domain minimum (the plot-area left edge) instead.
+  const xDomain = xScale.domain() as [number, number];
+  const xIncludesZero = xDomain[0] <= 0 && xDomain[1] >= 0;
+  const baseline = xIncludesZero ? xScale(0) : xScale(xDomain[0]);
   const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
   const conditionalColor =
     encoding.color && isConditionalValueDef(encoding.color)

package/src/layout/__tests__/metrics.test.ts

@@ -0,0 +1,97 @@
+import type { Metric } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import {
+  computeMetricBar,
+  METRIC_BAR_INTERNALS,
+  type MetricFontSizes,
+  metricBarHeight,
+} from '../metrics';
+
+const { TOP_GAP, BOTTOM_GAP, INTER_ROW_GAP, LABEL_LINE_HEIGHT_RATIO, VALUE_LINE_HEIGHT_RATIO } =
+  METRIC_BAR_INTERNALS;
+
+const defaultFonts: MetricFontSizes = { label: 10, value: 22 };
+const largeFonts: MetricFontSizes = { label: 16, value: 32 };
+
+const metrics: Metric[] = [
+  { label: 'Revenue', value: '$1.2B', delta: '+12%', deltaTone: 'up' },
+  { label: 'Users', value: '4.5M' },
+];
+
+const area = { x: 20, width: 600 };
+
+describe('metricBarHeight', () => {
+  it('returns the expected height at default font sizes', () => {
+    const expected =
+      TOP_GAP +
+      defaultFonts.label * LABEL_LINE_HEIGHT_RATIO +
+      INTER_ROW_GAP +
+      defaultFonts.value * VALUE_LINE_HEIGHT_RATIO +
+      BOTTOM_GAP;
+    expect(metricBarHeight()).toBe(expected);
+    expect(metricBarHeight(defaultFonts)).toBe(expected);
+  });
+
+  it('grows when font sizes increase', () => {
+    const large = metricBarHeight(largeFonts);
+    expect(large).toBeGreaterThan(metricBarHeight(defaultFonts));
+  });
+
+  it('matches the formula for custom sizes', () => {
+    const expected =
+      TOP_GAP +
+      largeFonts.label * LABEL_LINE_HEIGHT_RATIO +
+      INTER_ROW_GAP +
+      largeFonts.value * VALUE_LINE_HEIGHT_RATIO +
+      BOTTOM_GAP;
+    expect(metricBarHeight(largeFonts)).toBe(expected);
+  });
+});
+
+describe('computeMetricBar', () => {
+  it('uses custom font sizes for layout positions', () => {
+    const topY = 50;
+    const defaultBar = computeMetricBar(metrics, topY, area, 400, undefined, defaultFonts)!;
+    const largeBar = computeMetricBar(metrics, topY, area, 400, undefined, largeFonts)!;
+
+    expect(defaultBar).toBeDefined();
+    expect(largeBar).toBeDefined();
+
+    expect(largeBar.height).toBeGreaterThan(defaultBar.height);
+    expect(largeBar.height).toBe(metricBarHeight(largeFonts));
+
+    expect(largeBar.cells[0].labelY).toBeGreaterThan(defaultBar.cells[0].labelY);
+    expect(largeBar.cells[0].valueY).toBeGreaterThan(defaultBar.cells[0].valueY);
+  });
+
+  it('computes labelY and valueY from font sizes', () => {
+    const topY = 50;
+    const bar = computeMetricBar(metrics, topY, area, 400, undefined, largeFonts)!;
+
+    expect(bar.cells[0].labelY).toBe(topY + TOP_GAP + largeFonts.label);
+    expect(bar.cells[0].valueY).toBe(
+      topY +
+        TOP_GAP +
+        largeFonts.label * LABEL_LINE_HEIGHT_RATIO +
+        INTER_ROW_GAP +
+        largeFonts.value,
+    );
+  });
+
+  it('uses custom font size for overflow detection', () => {
+    const tinyCell: Metric[] = [{ label: 'A', value: 'WWWWWWWWWWWWWWWWWWWWWWWWWW' }];
+    const narrowArea = { x: 0, width: 500 };
+
+    const withSmall = computeMetricBar(tinyCell, 0, narrowArea, 400, undefined, {
+      label: 10,
+      value: 12,
+    });
+    const withLarge = computeMetricBar(tinyCell, 0, narrowArea, 400, undefined, {
+      label: 10,
+      value: 40,
+    });
+
+    expect(withSmall).toBeDefined();
+    expect(withLarge).toBeUndefined();
+  });
+});

package/src/layout/dimensions.ts

@@ -45,7 +45,12 @@ import type { NormalizedChartSpec, NormalizedChrome } from '../compiler/types';
 import { predictEndpointLabelsWidth } from '../endpoint-labels/predict';
 import { countColorSeries, resolveSuppression } from '../legend/suppression';
 import { legendGap } from '../legend/wrap';
-import { computeMetricBar, metricBarHeight } from './metrics';
+import { computeMetricBar, type MetricFontSizes, metricBarHeight } from './metrics';
+
+/** Pull the metric-row font sizes from the resolved theme. */
+function metricFonts(theme: ResolvedTheme): MetricFontSizes {
+  return { label: theme.fonts.sizes.metricLabel, value: theme.fonts.sizes.metricValue };
+}
 
 // ---------------------------------------------------------------------------
 // Types
@@ -372,7 +377,7 @@ export function computeDimensions(
   // We reserve optimistically so the chart-area math is correct when the bar
   // is kept; the rollback path subtracts it back when stripped.
   const wantsMetrics = !!spec.metrics && spec.metrics.length > 0 && chromeMode !== 'hidden';
-  const tentativeMetricsHeight = wantsMetrics ? metricBarHeight() : 0;
+  const tentativeMetricsHeight = wantsMetrics ? metricBarHeight(metricFonts(theme)) : 0;
   // topAxisGap sits between the legend (or chrome, if no legend) and the
   // chart area. It accounts for the general axis margin plus any inline
   // tick-label overhang. Placing it after the legend (below) keeps the
@@ -749,6 +754,7 @@ export function computeDimensions(
             fallbackMetricsArea,
             chartArea.height,
             options.measureText,
+            theme,
           )
         : undefined;
       if (wantsMetrics && !fallbackMetrics) {
@@ -790,7 +796,7 @@ export function computeDimensions(
   const metricsTopY = topPad + chrome.topHeight;
   const metricsArea = { x: hPad, width: Math.max(0, width - hPad * 2) };
   const resolvedMetrics = wantsMetrics
-    ? resolveMetrics(spec, metricsTopY, metricsArea, chartArea.height, options.measureText)
+    ? resolveMetrics(spec, metricsTopY, metricsArea, chartArea.height, options.measureText, theme)
     : undefined;
   if (wantsMetrics && !resolvedMetrics) {
     // See fallback path above for the clamp rationale.
@@ -824,6 +830,7 @@ function resolveMetrics(
   metricsArea: { x: number; width: number },
   remainingChartHeight: number,
   measureText: import('@opendata-ai/openchart-core').MeasureTextFn | undefined,
+  theme: ResolvedTheme,
 ): ResolvedMetricBar | undefined {
   return computeMetricBar(
     spec.metrics,
@@ -831,5 +838,6 @@ function resolveMetrics(
     metricsArea,
     remainingChartHeight,
     measureText,
+    metricFonts(theme),
   );
 }

package/src/layout/metrics.ts

@@ -14,19 +14,32 @@ import type {
 } from '@opendata-ai/openchart-core';
 import { estimateTextWidth } from '@opendata-ai/openchart-core';
 
-// Visual constants. Sized to match the editorial KPI mock: a 10px uppercase
-// label sits above a 22px primary value, with breathing room below before the
-// chart area starts. Derived from the 4px grid.
-const LABEL_FONT_SIZE = 10;
-const VALUE_FONT_SIZE = 22;
-const LABEL_LINE_HEIGHT_RATIO = 1.4; // 14px
-const VALUE_LINE_HEIGHT_RATIO = 1.15; // ~25.3px
+// Font sizes default to the editorial KPI mock (10px uppercase label above a
+// 22px primary value) but are theme-driven so charts can scale the row. The
+// label/value sizes flow in from `theme.fonts.sizes.metricLabel/metricValue`.
+const DEFAULT_LABEL_FONT_SIZE = 10;
+const DEFAULT_VALUE_FONT_SIZE = 22;
+const LABEL_LINE_HEIGHT_RATIO = 1.4;
+const VALUE_LINE_HEIGHT_RATIO = 1.15;
 const INTER_ROW_GAP = 4;
 // Breathing room above labels (separates metric row from the subtitle).
 const TOP_GAP = 16;
 // Breathing room below values (separates metric row from legend / chart top).
 const BOTTOM_GAP = 20;
 
+/** Font sizes the metric layout reserves space for. */
+export interface MetricFontSizes {
+  /** Uppercase label size (px). */
+  label: number;
+  /** Primary value size (px). */
+  value: number;
+}
+
+const DEFAULT_METRIC_FONT_SIZES: MetricFontSizes = {
+  label: DEFAULT_LABEL_FONT_SIZE,
+  value: DEFAULT_VALUE_FONT_SIZE,
+};
+
 /** Minimum container width that can fit a metric bar. */
 const MIN_BAR_WIDTH = 480;
 /** Minimum chart-area height after metric reservation. */
@@ -35,12 +48,12 @@ const MIN_CHART_HEIGHT = 150;
 const CELL_INNER_PAD = 8;
 
 /**
- * Total height the metric bar reserves above the chart area.
- * Always derived from the constants above; never hardcoded at the call site.
+ * Total height the metric bar reserves above the chart area. Derived from the
+ * font sizes (theme-driven) plus the fixed gaps; never hardcoded at the call site.
  */
-export function metricBarHeight(): number {
-  const labelLine = LABEL_FONT_SIZE * LABEL_LINE_HEIGHT_RATIO;
-  const valueLine = VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO;
+export function metricBarHeight(fonts: MetricFontSizes = DEFAULT_METRIC_FONT_SIZES): number {
+  const labelLine = fonts.label * LABEL_LINE_HEIGHT_RATIO;
+  const valueLine = fonts.value * VALUE_LINE_HEIGHT_RATIO;
   return TOP_GAP + labelLine + INTER_ROW_GAP + valueLine + BOTTOM_GAP;
 }
 
@@ -66,6 +79,7 @@ export function computeMetricBar(
   metricsArea: { x: number; width: number },
   remainingChartHeight: number,
   measureText?: MeasureTextFn,
+  fonts: MetricFontSizes = DEFAULT_METRIC_FONT_SIZES,
 ): ResolvedMetricBar | undefined {
   if (!metrics || metrics.length === 0) return undefined;
   if (metricsArea.width < MIN_BAR_WIDTH) return undefined;
@@ -78,14 +92,14 @@ export function computeMetricBar(
   for (const metric of metrics) {
     const text = valueRunText(metric);
     const measured = measureText
-      ? measureText(text, VALUE_FONT_SIZE, 510).width
-      : estimateTextWidth(text, VALUE_FONT_SIZE, 510);
+      ? measureText(text, fonts.value, 510).width
+      : estimateTextWidth(text, fonts.value, 510);
     if (measured > cellWidth - CELL_INNER_PAD) return undefined;
   }
 
-  const labelLine = LABEL_FONT_SIZE * LABEL_LINE_HEIGHT_RATIO;
-  const labelY = metricsTopY + TOP_GAP + LABEL_FONT_SIZE; // baseline for uppercase label
-  const valueY = metricsTopY + TOP_GAP + labelLine + INTER_ROW_GAP + VALUE_FONT_SIZE;
+  const labelLine = fonts.label * LABEL_LINE_HEIGHT_RATIO;
+  const labelY = metricsTopY + TOP_GAP + fonts.label; // baseline for uppercase label
+  const valueY = metricsTopY + TOP_GAP + labelLine + INTER_ROW_GAP + fonts.value;
 
   const cells: ResolvedMetricCell[] = metrics.map((metric, i) => ({
     x: metricsArea.x + i * cellWidth,
@@ -98,15 +112,15 @@ export function computeMetricBar(
 
   return {
     y: metricsTopY,
-    height: metricBarHeight(),
+    height: metricBarHeight(fonts),
     cells,
   };
 }
 
 // Exposed for tests and consumers needing the same constants.
 export const METRIC_BAR_INTERNALS = {
-  LABEL_FONT_SIZE,
-  VALUE_FONT_SIZE,
+  DEFAULT_LABEL_FONT_SIZE,
+  DEFAULT_VALUE_FONT_SIZE,
   LABEL_LINE_HEIGHT_RATIO,
   VALUE_LINE_HEIGHT_RATIO,
   INTER_ROW_GAP,