@opendata-ai/openchart-engine 7.2.3 → 7.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.2.3",
+  "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.3",
+    "@opendata-ai/openchart-core": "7.2.4",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

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();
+  });
+});