@opendata-ai/openchart-engine 6.27.0 → 6.28.2

package/package.json

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

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

@@ -413,6 +413,15 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
           "#756bb1",
           "#54278f",
         ],
+        "teal": [
+          "#06b6d4",
+          "#05a3be",
+          "#0490a8",
+          "#037d92",
+          "#026a7c",
+          "#015766",
+          "#004450",
+        ],
       },
       "text": "#1d1d1d",
     },
@@ -890,7 +899,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "seriesKey": "US",
       "stroke": "#1b7fa3",
       "strokeDasharray": undefined,
-      "strokeWidth": 2.5,
+      "strokeWidth": 1.5,
       "type": "line",
     },
     {
@@ -998,7 +1007,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "seriesKey": "UK",
       "stroke": "#c44e52",
       "strokeDasharray": undefined,
-      "strokeWidth": 2.5,
+      "strokeWidth": 1.5,
       "type": "line",
     },
     {
@@ -1106,7 +1115,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "seriesKey": "FR",
       "stroke": "#6a9f58",
       "strokeDasharray": undefined,
-      "strokeWidth": 2.5,
+      "strokeWidth": 1.5,
       "type": "line",
     },
     {
@@ -1214,7 +1223,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "seriesKey": "DE",
       "stroke": "#d47215",
       "strokeDasharray": undefined,
-      "strokeWidth": 2.5,
+      "strokeWidth": 1.5,
       "type": "line",
     },
   ],
@@ -1323,6 +1332,15 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "#756bb1",
           "#54278f",
         ],
+        "teal": [
+          "#06b6d4",
+          "#05a3be",
+          "#0490a8",
+          "#037d92",
+          "#026a7c",
+          "#015766",
+          "#004450",
+        ],
       },
       "text": "#1d1d1d",
     },
@@ -1891,6 +1909,15 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
           "#756bb1",
           "#54278f",
         ],
+        "teal": [
+          "#06b6d4",
+          "#05a3be",
+          "#0490a8",
+          "#037d92",
+          "#026a7c",
+          "#015766",
+          "#004450",
+        ],
       },
       "text": "#1d1d1d",
     },

package/src/__tests__/axes.test.ts

@@ -1,8 +1,11 @@
 import type { AxisTick, LayoutStrategy } from '@opendata-ai/openchart-core';
 import { resolveTheme } from '@opendata-ai/openchart-core';
+import { scaleLinear, scaleLog } from 'd3-scale';
 import { describe, expect, it } from 'vitest';
 import type { NormalizedChartSpec } from '../compiler/types';
 import { computeAxes, effectiveDensity, thinTicksUntilFit, ticksOverlap } from '../layout/axes';
+import { buildContinuousTicks } from '../layout/axes/ticks';
+import type { ResolvedScale } from '../layout/scales';
 import { computeScales } from '../layout/scales';
 
 const lineSpec: NormalizedChartSpec = {
@@ -121,16 +124,16 @@ describe('computeAxes', () => {
   // Height-aware y-axis tick reduction
   // -------------------------------------------------------------------------
 
-  it('reduces y-axis ticks for very short chart areas (< 120px)', () => {
+  it('reduces y-axis ticks for very short chart areas (< 80px)', () => {
     const shortArea = { x: 50, y: 50, width: 500, height: 80 };
     const scales = computeScales(lineSpec, shortArea, lineSpec.data);
     const axesShort = computeAxes(scales, shortArea, fullStrategy, theme);
 
-    // Even though the strategy says 'full', height < 120 forces minimal (3 ticks)
+    // Very short chart area -- tick count clamped to at most 4
     expect(axesShort.y!.ticks.length).toBeLessThanOrEqual(4);
   });
 
-  it('reduces y-axis ticks for medium-short chart areas (120-200px)', () => {
+  it('reduces y-axis ticks for medium-short chart areas (80-100px)', () => {
     const mediumArea = { x: 50, y: 50, width: 500, height: 160 };
     const tallArea = { x: 50, y: 50, width: 500, height: 400 };
 
@@ -884,3 +887,98 @@ describe('horizontal bar y-axis label thinning regression', () => {
     expect(axes.x!.ticks.length).toBeLessThan(countries.length);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Log scale tick filtering — buildContinuousTicks
+// D3 log scales ignore the count hint and return ticks at every sub-power
+// position. The engine must filter these down to powers of the base only.
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a ResolvedScale backed by a D3 log scale, matching what buildLogScale produces.
+ * Using a single `base` parameter keeps the D3 scale and channel config in sync,
+ * mirroring how they're always derived from the same spec field.
+ */
+function makeLogScale(domain: [number, number], base = 10): ResolvedScale {
+  const scale = scaleLog().domain(domain).range([400, 0]);
+  scale.base(base);
+  return {
+    scale,
+    type: 'log',
+    channel: {
+      field: 'value',
+      type: 'quantitative',
+      scale: base !== 10 ? { base } : undefined,
+    },
+  } as ResolvedScale;
+}
+
+describe('buildContinuousTicks — log scale power filtering', () => {
+  it('returns only power-of-10 ticks for [5, 25000] at tickCount 5', () => {
+    const resolved = makeLogScale([5, 25000]);
+    const ticks = buildContinuousTicks(resolved, 5);
+    const values = ticks.map((t) => t.value as number);
+    // Should be exactly the powers of 10 in domain: 10, 100, 1000, 10000
+    expect(values).toEqual([10, 100, 1000, 10000]);
+  });
+
+  it('returns only power-of-10 ticks for [1, 1000000] at tickCount 5', () => {
+    const resolved = makeLogScale([1, 1_000_000]);
+    const ticks = buildContinuousTicks(resolved, 5);
+    const values = ticks.map((t) => t.value as number);
+    // Assert invariants rather than exact output: every tick is a power of 10,
+    // and we get at least 5 (the domain spans 6 decades).
+    for (const v of values) {
+      const exp = Math.log10(v);
+      expect(Math.abs(exp - Math.round(exp))).toBeLessThan(1e-9);
+    }
+    expect(values.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it('returns only powers-of-2 for [1, 64] base-2 at tickCount 5', () => {
+    const resolved = makeLogScale([1, 64], 2);
+    const ticks = buildContinuousTicks(resolved, 5);
+    const values = ticks.map((t) => t.value as number);
+    expect(values).toEqual([1, 2, 4, 8, 16, 32, 64]);
+  });
+
+  it('handles fractional powers for [0.001, 100] at tickCount 5', () => {
+    const resolved = makeLogScale([0.001, 100]);
+    const ticks = buildContinuousTicks(resolved, 5);
+    const values = ticks.map((t) => t.value as number);
+    // Tolerance check prevents floating-point false negatives on 0.001, 0.01, 0.1
+    expect(values).toEqual([0.001, 0.01, 0.1, 1, 10, 100]);
+  });
+
+  it('still produces ticks at tickCount 3 (regression guard)', () => {
+    const resolved = makeLogScale([1, 1000]);
+    const ticks = buildContinuousTicks(resolved, 3);
+    expect(ticks.length).toBeGreaterThanOrEqual(2);
+    const values = ticks.map((t) => t.value as number);
+    // Every value must be a power of 10
+    for (const v of values) {
+      const exp = Math.log10(v);
+      expect(Math.abs(exp - Math.round(exp))).toBeLessThan(1e-6);
+    }
+  });
+
+  it('does not over-filter linear scales with the same domain', () => {
+    const scale = scaleLinear().domain([5, 25000]).range([400, 0]);
+    const resolved: ResolvedScale = {
+      scale,
+      type: 'linear',
+      channel: { field: 'value', type: 'quantitative' },
+    } as ResolvedScale;
+    const ticks = buildContinuousTicks(resolved, 5);
+    // Linear scale should return normal D3 ticks — not just power-of-10 values
+    expect(ticks.length).toBeGreaterThanOrEqual(4);
+    // At least one tick should NOT be a power of 10 (e.g. 5000, 10000, 15000, 20000, 25000)
+    const values = ticks.map((t) => t.value as number);
+    const nonPowerOf10 = values.filter((v) => {
+      if (v <= 0) return true;
+      const exp = Math.log10(v);
+      return Math.abs(exp - Math.round(exp)) >= 0.01;
+    });
+    expect(nonPowerOf10.length).toBeGreaterThan(0);
+  });
+});

package/src/__tests__/legend.test.ts

@@ -447,7 +447,7 @@ describe('computeLegend', () => {
       legend: { position: 'top' as const },
     };
 
-    it('places the legend exactly 4px above the chart area at standard width', () => {
+    it('places the legend exactly 8px above the chart area at standard width', () => {
       const layout = compileChart(topLegendSpec, { width: 600, height: 400 });
 
       expect(layout.legend.position).toBe('top');
@@ -456,7 +456,7 @@ describe('computeLegend', () => {
 
       const legendBottom = layout.legend.bounds.y + layout.legend.bounds.height;
       const gap = layout.area.y - legendBottom;
-      expect(gap).toBe(4);
+      expect(gap).toBe(8);
     });
 
     it('eliminates legend gap on narrow viewports (< 420px)', () => {

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

@@ -1,8 +1,10 @@
 import type { Annotation, LayoutStrategy, Rect } from '@opendata-ai/openchart-core';
+import type { ScaleBand, ScalePoint } from 'd3-scale';
 import { describe, expect, it } from 'vitest';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import { computeScales } from '../../layout/scales';
 import { computeAnnotations } from '../compute';
+import { resolvePosition } from '../position';
 
 // ---------------------------------------------------------------------------
 // Fixtures
@@ -236,6 +238,179 @@ describe('computeAnnotations', () => {
       // Non-numeric domain can't interpolate, annotation is dropped
       expect(annotations).toHaveLength(0);
     });
+
+    it('two adjacent point-scale ranges have a non-zero pixel gap between them', () => {
+      // Regression: ranges ending/starting at point-scale centers would share the same
+      // pixel boundary, visually merging. resolvePositionEdge now extends each range
+      // by half a step so adjacent ranges are truly separated.
+      const ordinalSpec: NormalizedChartSpec = {
+        markType: 'line',
+        markDef: { type: 'line' },
+        data: [
+          { year: '2006', value: 10 },
+          { year: '2008', value: 20 },
+          { year: '2010', value: 30 },
+          { year: '2012', value: 40 },
+          { year: '2020', value: 50 },
+          { year: '2022', value: 60 },
+        ],
+        encoding: {
+          x: { field: 'year', type: 'ordinal' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+        chrome: {},
+        annotations: [
+          { type: 'range', x1: '2008', x2: '2010', label: 'First range' },
+          { type: 'range', x1: '2020', x2: '2022', label: 'Second range' },
+        ],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(ordinalSpec, chartArea, ordinalSpec.data);
+      const annotations = computeAnnotations(ordinalSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(2);
+      const rect1 = annotations[0].rect!;
+      const rect2 = annotations[1].rect!;
+
+      // First range must end before second range starts (non-zero gap)
+      expect(rect1.x + rect1.width).toBeLessThan(rect2.x);
+    });
+
+    it('single range on point-scale ordinal x covers at least a full step', () => {
+      // A range spanning a single domain value should be at least step-wide,
+      // since resolvePositionEdge extends by half a step on each side.
+      const domainValues = ['2006', '2008', '2010', '2012'];
+      const ordinalSpec: NormalizedChartSpec = {
+        markType: 'line',
+        markDef: { type: 'line' },
+        data: domainValues.map((year, i) => ({ year, value: i * 10 })),
+        encoding: {
+          x: { field: 'year', type: 'ordinal' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+        chrome: {},
+        annotations: [{ type: 'range', x1: '2008', x2: '2010', label: 'Single step' }],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(ordinalSpec, chartArea, ordinalSpec.data);
+      const annotations = computeAnnotations(ordinalSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(1);
+      const rect = annotations[0].rect!;
+
+      // step = chartArea.width / (numPoints - 1) roughly. With 4 points and default 0.5 padding,
+      // the step on a point scale = width / (n - 1 + 2*padding) -- but the key property is that
+      // the range width should be at least as wide as the distance between two domain centers.
+      const xScale = scales.x!.scale as ScalePoint<string>;
+      const step = xScale.step();
+      expect(rect.width).toBeGreaterThanOrEqual(step);
+    });
+
+    it('band-scale (bar chart) range covers full bands, not band centers', () => {
+      // On a bar chart the x scale is a band scale. resolvePositionEdge extends from the
+      // center (what resolvePosition returns) to the band edge.
+      const barSpec: NormalizedChartSpec = {
+        markType: 'bar',
+        markDef: { type: 'bar', orient: 'vertical' },
+        data: [
+          { year: '2008', value: 10 },
+          { year: '2010', value: 20 },
+          { year: '2012', value: 30 },
+          { year: '2014', value: 40 },
+        ],
+        encoding: {
+          x: { field: 'year', type: 'ordinal' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+        chrome: {},
+        annotations: [{ type: 'range', x1: '2010', x2: '2012', label: 'Band range' }],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(barSpec, chartArea, barSpec.data);
+      const annotations = computeAnnotations(barSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(1);
+      const rect = annotations[0].rect!;
+
+      const bandScale = scales.x!.scale as ScaleBand<string>;
+      const bandwidth = bandScale.bandwidth();
+      const x1BandStart = bandScale('2010')!;
+      const x2BandStart = bandScale('2012')!;
+
+      // Left edge should be at the start of the 2010 band (not the center)
+      expect(rect.x).toBeCloseTo(x1BandStart, 1);
+      // Right edge should be at the end of the 2012 band
+      expect(rect.x + rect.width).toBeCloseTo(x2BandStart + bandwidth, 1);
+    });
+
+    it('linear-scale range is unaffected by edge extension', () => {
+      // For linear scales, resolvePositionEdge is identical to resolvePosition.
+      // This ensures the fix doesn't introduce any drift on continuous axes.
+      const linearSpec = makeSpec([{ type: 'range', x1: '2020-01-01', x2: '2021-01-01' }]);
+      const scales = computeScales(linearSpec, chartArea, linearSpec.data);
+      const annotations = computeAnnotations(linearSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(1);
+      const rect = annotations[0].rect!;
+
+      // The x positions should exactly match what resolvePosition would return
+      const x1Expected = resolvePosition('2020-01-01', scales.x)!;
+      const x2Expected = resolvePosition('2021-01-01', scales.x)!;
+
+      expect(rect.x).toBeCloseTo(Math.min(x1Expected, x2Expected), 1);
+      expect(rect.x + rect.width).toBeCloseTo(Math.max(x1Expected, x2Expected), 1);
+    });
+
+    it('y1/y2 range on ordinal point-scale y-axis has a non-zero pixel gap between two annotations', () => {
+      // Horizontal band: y-axis is ordinal (point scale), x-axis is quantitative.
+      // Two y-range annotations with a gap should produce two distinct rects.
+      const ordinalYSpec: NormalizedChartSpec = {
+        markType: 'line',
+        markDef: { type: 'line' },
+        data: [
+          { year: '2006', value: 10 },
+          { year: '2008', value: 20 },
+          { year: '2010', value: 30 },
+          { year: '2015', value: 40 },
+          { year: '2020', value: 50 },
+          { year: '2022', value: 60 },
+        ],
+        encoding: {
+          x: { field: 'value', type: 'quantitative' },
+          y: { field: 'year', type: 'ordinal' },
+        },
+        chrome: {},
+        annotations: [
+          { type: 'range', y1: '2006', y2: '2008' },
+          { type: 'range', y1: '2020', y2: '2022' },
+        ],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(ordinalYSpec, chartArea, ordinalYSpec.data);
+      const annotations = computeAnnotations(ordinalYSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(2);
+      const rects = annotations.map((a) => a.rect!);
+
+      // In SVG, y increases downward. Sort by y so rect[0] is the top one.
+      rects.sort((a, b) => a.y - b.y);
+
+      // There must be a non-zero pixel gap between the bottom of rect[0] and top of rect[1]
+      const bottomOfFirst = rects[0].y + rects[0].height;
+      expect(bottomOfFirst).toBeLessThan(rects[1].y);
+    });
   });
 
   describe('reference line annotations', () => {

package/src/annotations/position.ts

@@ -2,7 +2,7 @@
  * Data-coordinate to pixel-coordinate resolution for annotations.
  */
 
-import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';
 import type { ResolvedScales } from '../layout/scales';
 
 /**
@@ -93,3 +93,39 @@ export function resolvePosition(
 
   return null;
 }
+
+/**
+ * Like resolvePosition, but extends the result to the visual edge of the column
+ * for band and point scales. Used by range annotations to span complete columns.
+ *
+ * For point scales: shifts by ±step/2 using scalePoint.step()
+ * For band scales: shifts from center (what resolvePosition returns) to the band edge
+ * For all other scales: identical to resolvePosition
+ */
+export function resolvePositionEdge(
+  value: string | number,
+  scale: ResolvedScales['x'] | ResolvedScales['y'],
+  edge: 'start' | 'end',
+): number | null {
+  const center = resolvePosition(value, scale);
+  if (center === null || !scale) return null;
+
+  const type = scale.type;
+
+  if (type === 'point') {
+    const s = scale.scale as ScalePoint<string>;
+    const halfStep = (s.step?.() ?? 0) / 2;
+    return edge === 'start' ? center - halfStep : center + halfStep;
+  }
+
+  if (type === 'band') {
+    // center = bandStart + bandwidth/2
+    // edge 'start' => bandStart   = center - bandwidth/2
+    // edge 'end'   => bandEnd     = center + bandwidth/2
+    const s = scale.scale as ScaleBand<string>;
+    const halfBw = (s.bandwidth?.() ?? 0) / 2;
+    return edge === 'start' ? center - halfBw : center + halfBw;
+  }
+
+  return center;
+}

package/src/annotations/resolve-range.ts

@@ -12,7 +12,7 @@ import type {
 import type { ResolvedScales } from '../layout/scales';
 import { DEFAULT_RANGE_FILL, DEFAULT_RANGE_OPACITY } from './constants';
 import { applyOffset } from './geometry';
-import { resolvePosition } from './position';
+import { resolvePositionEdge } from './position';
 import { makeAnnotationLabelStyle } from './resolve-text';
 
 export function resolveRangeAnnotation(
@@ -28,8 +28,8 @@ export function resolveRangeAnnotation(
 
   // X-range (vertical band)
   if (annotation.x1 !== undefined && annotation.x2 !== undefined) {
-    const x1px = resolvePosition(annotation.x1, scales.x);
-    const x2px = resolvePosition(annotation.x2, scales.x);
+    const x1px = resolvePositionEdge(annotation.x1, scales.x, 'start');
+    const x2px = resolvePositionEdge(annotation.x2, scales.x, 'end');
     if (x1px === null || x2px === null) return null;
 
     x = Math.min(x1px, x2px);
@@ -38,8 +38,8 @@ export function resolveRangeAnnotation(
 
   // Y-range (horizontal band)
   if (annotation.y1 !== undefined && annotation.y2 !== undefined) {
-    const y1px = resolvePosition(annotation.y1, scales.y);
-    const y2px = resolvePosition(annotation.y2, scales.y);
+    const y1px = resolvePositionEdge(annotation.y1, scales.y, 'end');
+    const y2px = resolvePositionEdge(annotation.y2, scales.y, 'start');
     if (y1px === null || y2px === null) return null;
 
     y = Math.min(y1px, y2px);