@opendata-ai/openchart-engine 6.20.0 → 6.22.0

package/src/__tests__/axes.test.ts

@@ -679,6 +679,71 @@ describe('y-axis tick density', () => {
     // Wide label text shouldn't cause y-axis thinning (only height matters)
     expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(5);
   });
+
+  it('does not collapse to min/max when nice() domain creates a close last tick', () => {
+    // Regression: domain [0, 340] nice()'s to [0, 350]. The old thinning path
+    // kept both 340 and the endpoint 350, causing cascaded thinning down to
+    // [0, 340] (2 ticks). Fix re-requests at lower counts from D3 instead.
+    const barSpec: NormalizedChartSpec = {
+      markType: 'bar',
+      markDef: { type: 'bar' },
+      data: [
+        { year: '2019', v: 110 },
+        { year: '2023', v: 340 },
+      ],
+      encoding: {
+        x: { field: 'year', type: 'nominal' },
+        y: { field: 'v', type: 'quantitative' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+    const scales = computeScales(barSpec, chartArea, barSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    // The specific bug produced exactly [0, 340] — only the min and max with
+    // no interior gridlines. Any output with interior values is a pass, even
+    // if the count varies with D3's step choice across platforms.
+    const values = axes.y!.ticks.map((t) => t.value);
+    expect(values).not.toEqual([0, 340]);
+    expect(values).not.toEqual([0, 350]);
+    expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it('adapts y-axis tick count down for short charts', () => {
+    const shortArea = { x: 50, y: 50, width: 500, height: 140 };
+    const scales = computeScales(lineSpec, shortArea, lineSpec.data);
+    const axes = computeAxes(scales, shortArea, fullStrategy, theme);
+
+    // Short charts should still show multiple ticks but fewer than tall ones
+    expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(2);
+    expect(axes.y!.ticks.length).toBeLessThan(10);
+  });
+
+  it('steps continuous x-axis down when D3 overshoots on narrow temporal scales', () => {
+    // D3 time scales jump between calendar units — a request for 6 ticks on
+    // a 3-year range can return 4 (yearly) or 14 (quarterly). On a narrow
+    // chart we want the sparser choice, not the dense one.
+    const narrowTimeSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      data: [
+        { date: '2022-01-01', value: 10 },
+        { date: '2022-12-01', value: 40 },
+      ],
+    };
+    const narrowArea = { x: 50, y: 50, width: 300, height: 300 };
+    const scales = computeScales(narrowTimeSpec, narrowArea, narrowTimeSpec.data);
+    const axes = computeAxes(scales, narrowArea, fullStrategy, theme);
+
+    // A 300px-wide time axis should show at most ~6 labels, not the 10-14
+    // that D3 produces when its nice() step hops into monthly territory.
+    expect(axes.x!.ticks.length).toBeLessThanOrEqual(6);
+    expect(axes.x!.ticks.length).toBeGreaterThanOrEqual(2);
+  });
 });
 
 // ---------------------------------------------------------------------------

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

@@ -0,0 +1,156 @@
+/**
+ * Integration snapshot test: the backstop for Step 7 refactor.
+ *
+ * Compiles three representative ChartSpecs that exercise the extracted paths
+ * (legend-heavy, clipped-domain, watermark + gradient) and snapshots the full
+ * ChartLayout. Pre-refactor snapshots are captured before helper extraction;
+ * post-refactor snapshots must match exactly without --update-snapshots.
+ *
+ * Non-serializable fields (Map, Function) are normalized into plain structures
+ * so the snapshot can round-trip through the default serializer.
+ */
+
+import type { ChartLayout } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../compile';
+
+type AxisTick = { label?: string; value?: unknown; position?: unknown };
+type AxisShape = Record<string, unknown> & { ticks?: AxisTick[] };
+
+/**
+ * Whether an axis carries temporal (Date) ticks. D3 time scales produce
+ * midnight-local Date objects, so tick positions and values shift by hours
+ * between macOS (CDT/PDT) and Linux CI (UTC). We strip temporal axes from
+ * the main snapshot and assert their labels separately.
+ */
+function isTemporalAxis(axis: AxisShape | undefined): boolean {
+  return Array.isArray(axis?.ticks) && axis.ticks.some((t) => t.value instanceof Date);
+}
+
+/** Convert ChartLayout into a fully serializable shape for snapshot comparison. */
+function serializeLayout(
+  layout: ChartLayout,
+  { stripTemporalAxes = false } = {},
+): Record<string, unknown> {
+  const { tooltipDescriptors, measureText: _measure, ...rest } = layout;
+  const axes = rest.axes as { x?: AxisShape; y?: AxisShape } | undefined;
+
+  let serializedAxes = axes;
+  if (axes && stripTemporalAxes) {
+    serializedAxes = {
+      ...axes,
+      x: isTemporalAxis(axes.x) ? undefined : axes.x,
+      y: isTemporalAxis(axes.y) ? undefined : axes.y,
+    };
+  }
+
+  return {
+    ...rest,
+    axes: serializedAxes,
+    tooltipDescriptors: Array.from(tooltipDescriptors.entries()),
+  };
+}
+
+describe('compileChart snapshot (Step 7 oracle)', () => {
+  it('legend-heavy multi-series line chart', () => {
+    const spec = {
+      mark: 'line' as const,
+      data: [
+        { date: '2020-01-01', value: 10, country: 'US' },
+        { date: '2021-01-01', value: 40, country: 'US' },
+        { date: '2020-01-01', value: 15, country: 'UK' },
+        { date: '2021-01-01', value: 35, country: 'UK' },
+        { date: '2020-01-01', value: 8, country: 'FR' },
+        { date: '2021-01-01', value: 22, country: 'FR' },
+        { date: '2020-01-01', value: 12, country: 'DE' },
+        { date: '2021-01-01', value: 28, country: 'DE' },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' as const },
+        y: { field: 'value', type: 'quantitative' as const },
+        color: { field: 'country', type: 'nominal' as const },
+      },
+      chrome: {
+        title: 'GDP Growth',
+        subtitle: 'Four-country comparison',
+        source: 'World Bank',
+      },
+      legend: { show: true },
+      watermark: false,
+    };
+
+    const layout = compileChart(spec, { width: 800, height: 500 });
+
+    // Temporal x-axis positions shift with timezone (macOS CDT vs Linux UTC),
+    // so we strip it from the structural snapshot and assert just the labels.
+    expect(serializeLayout(layout, { stripTemporalAxes: true })).toMatchSnapshot();
+
+    const xAxes = (layout.axes as { x?: AxisShape } | undefined)?.x;
+    const tickLabels = (xAxes?.ticks ?? []).map((t: AxisTick) => t.label);
+    expect(tickLabels.length).toBeGreaterThanOrEqual(3);
+    expect(tickLabels.length).toBeLessThanOrEqual(6);
+    expect(tickLabels.every((l) => typeof l === 'string' && l.length > 0)).toBe(true);
+  });
+
+  it('clipped-domain bar chart (data outside scale.domain filtered)', () => {
+    const spec = {
+      mark: 'bar' as const,
+      data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 25 },
+        { name: 'C', value: 40 },
+        { name: 'D', value: 75 },
+        { name: 'E', value: 90 },
+      ],
+      encoding: {
+        x: {
+          field: 'value',
+          type: 'quantitative' as const,
+          scale: { domain: [0, 50], clip: true },
+        },
+        y: { field: 'name', type: 'nominal' as const },
+      },
+      chrome: {
+        title: 'Clipped Values',
+      },
+      watermark: false,
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(serializeLayout(layout)).toMatchSnapshot();
+  });
+
+  it('watermarked column chart with gradient fill', () => {
+    const spec = {
+      mark: {
+        type: 'bar' as const,
+        fill: {
+          type: 'linear' as const,
+          stops: [
+            { offset: 0, color: '#ff0000' },
+            { offset: 1, color: '#0000ff' },
+          ],
+        },
+      },
+      data: [
+        { category: 'A', score: 30 },
+        { category: 'B', score: 55 },
+        { category: 'C', score: 70 },
+        { category: 'D', score: 45 },
+      ],
+      encoding: {
+        x: { field: 'category', type: 'nominal' as const },
+        y: { field: 'score', type: 'quantitative' as const },
+      },
+      chrome: {
+        title: 'Gradient Columns',
+        source: 'Test data',
+        byline: 'By the engine',
+      },
+      watermark: true,
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(serializeLayout(layout)).toMatchSnapshot();
+  });
+});

package/src/charts/__tests__/registry.test.ts

@@ -2,6 +2,7 @@ import type { LayoutStrategy, Mark, Rect } from '@opendata-ai/openchart-core';
 import { afterEach, describe, expect, it } from 'vitest';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
+import { registerBuiltinRenderers } from '../builtin';
 import { clearRenderers, getChartRenderer, registerChartRenderer } from '../registry';
 
 // ---------------------------------------------------------------------------
@@ -38,7 +39,12 @@ function stubRenderer(
 
 describe('chart renderer registry', () => {
   afterEach(() => {
+    // Clear test-registered renderers AND restore the built-in set. The
+    // built-ins register as a module side-effect of importing `compile.ts`,
+    // so once cleared they don't come back on their own — leaving later
+    // tests in this suite with an empty registry.
     clearRenderers();
+    registerBuiltinRenderers();
   });
 
   it('returns undefined for an unregistered chart type', () => {

package/src/charts/_shared/__tests__/density-filter.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { filterByDensity } from '../density-filter';
+
+describe('filterByDensity', () => {
+  const marks = ['a', 'b', 'c', 'd'];
+
+  it("returns [] for 'none'", () => {
+    expect(filterByDensity(marks, 'none')).toEqual([]);
+  });
+
+  it("returns first + last for 'endpoints'", () => {
+    expect(filterByDensity(marks, 'endpoints')).toEqual(['a', 'd']);
+  });
+
+  it("returns marks unchanged for 'all'", () => {
+    expect(filterByDensity(marks, 'all')).toBe(marks);
+  });
+
+  it("returns marks unchanged for 'auto'", () => {
+    expect(filterByDensity(marks, 'auto')).toBe(marks);
+  });
+
+  it("returns single-element array unchanged for 'endpoints'", () => {
+    const single = ['only'];
+    expect(filterByDensity(single, 'endpoints')).toBe(single);
+  });
+
+  it("returns empty array unchanged for 'endpoints'", () => {
+    const empty: string[] = [];
+    expect(filterByDensity(empty, 'endpoints')).toBe(empty);
+  });
+});

package/src/charts/_shared/density-filter.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared density filter for data labels.
+ *
+ * Maps a `LabelDensity` setting to the subset of marks eligible for
+ * labeling. The `'auto'` branch is a pass-through — auto resolution
+ * happens upstream in the per-chart label modules (typically via
+ * collision detection on the full candidate set).
+ */
+
+import type { LabelDensity } from '@opendata-ai/openchart-core';
+
+/**
+ * Filter a mark array by label density.
+ *
+ * - `'none'` returns `[]` (no labels)
+ * - `'endpoints'` returns first + last marks when `marks.length > 1`,
+ *   otherwise the input unchanged (preserves single-element arrays as-is)
+ * - `'all'` and `'auto'` return the input unchanged
+ */
+export function filterByDensity<T>(marks: T[], density: LabelDensity): T[] {
+  if (density === 'none') return [];
+  if (density === 'endpoints' && marks.length > 1) {
+    return [marks[0], marks[marks.length - 1]];
+  }
+  return marks;
+}

package/src/charts/bar/labels.ts

@@ -23,6 +23,7 @@ import {
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
+import { filterByDensity } from '../_shared/density-filter';
 import { formatLabelValue } from '../_shared/format-label-value';
 
 // ---------------------------------------------------------------------------
@@ -93,12 +94,7 @@ export function computeBarLabels(
   labelPrefix?: string,
   valueField?: string,
 ): ResolvedLabel[] {
-  // 'none': no labels at all
-  if (density === 'none') return [];
-
-  // Filter marks for 'endpoints' density
-  const targetMarks =
-    density === 'endpoints' && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const targetMarks = filterByDensity(marks, density);
 
   const candidates: LabelCandidate[] = [];
   // Track whether each candidate fits within its stacked segment.

package/src/charts/builtin.ts

@@ -0,0 +1,64 @@
+/**
+ * Built-in chart renderer registration.
+ *
+ * Each chart type (line, bar, column, scatter, pie, etc.) has a renderer that
+ * produces marks from a normalized spec. This module wires them into the
+ * registry. Importing it is a side effect: the built-ins register as soon as
+ * it's loaded.
+ *
+ * Tests that call `clearRenderers()` can call `registerBuiltinRenderers()` to
+ * restore the default set rather than leaving the registry empty for later
+ * tests in the same process.
+ */
+
+import { barRenderer } from './bar';
+import { columnRenderer } from './column';
+import { dotRenderer } from './dot';
+import { areaRenderer, lineRenderer } from './line';
+import { donutRenderer, pieRenderer } from './pie';
+import { type ChartRenderer, registerChartRenderer } from './registry';
+import { ruleRenderer } from './rule';
+import { scatterRenderer } from './scatter';
+import { textRenderer } from './text';
+import { tickRenderer } from './tick';
+
+// Mark type mapping from old chart types:
+// - 'bar' -> barRenderer (horizontal bars, old 'bar')
+// - 'bar:vertical' is handled by columnRenderer (old 'column')
+// - 'arc' -> pieRenderer (old 'pie'); donutRenderer is also registered
+// - 'point' -> scatterRenderer (old 'scatter')
+// - 'circle' -> dotRenderer (old 'dot')
+// - 'line' and 'area' unchanged
+// - 'text', 'rule', 'tick' are new Vega-Lite mark types
+//
+// For 'bar', orientation is resolved at compile time to dispatch to the right
+// renderer. We register both barRenderer and columnRenderer; the compile
+// function picks based on orientation.
+const builtinRenderers: Record<string, ChartRenderer> = {
+  line: lineRenderer,
+  area: areaRenderer,
+  bar: barRenderer, // horizontal bars
+  'bar:vertical': columnRenderer, // vertical bars (old 'column')
+  point: scatterRenderer, // old 'scatter'
+  arc: pieRenderer, // old 'pie' (donut handled via innerRadius)
+  'arc:donut': donutRenderer, // old 'donut'
+  circle: dotRenderer, // old 'dot'
+  lollipop: dotRenderer, // semantic alias for dot/circle
+  text: textRenderer,
+  rule: ruleRenderer,
+  tick: tickRenderer,
+  rect: columnRenderer, // rect uses column renderer (RectMark output) as baseline for heatmaps
+};
+
+/**
+ * Register all built-in chart renderers. Called once on module load; also
+ * exported so tests that clear the registry can restore the defaults.
+ */
+export function registerBuiltinRenderers(): void {
+  for (const [type, renderer] of Object.entries(builtinRenderers)) {
+    registerChartRenderer(type, renderer);
+  }
+}
+
+// Side effect: register on first import.
+registerBuiltinRenderers();

package/src/charts/column/labels.ts

@@ -23,6 +23,7 @@ import {
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
+import { filterByDensity } from '../_shared/density-filter';
 import { formatLabelValue } from '../_shared/format-label-value';
 
 // ---------------------------------------------------------------------------
@@ -50,12 +51,7 @@ export function computeColumnLabels(
   labelPrefix?: string,
   valueField?: string,
 ): ResolvedLabel[] {
-  // 'none': no labels at all
-  if (density === 'none') return [];
-
-  // Filter marks for 'endpoints' density
-  const targetMarks =
-    density === 'endpoints' && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const targetMarks = filterByDensity(marks, density);
 
   const formatter = buildD3Formatter(labelFormat);
 

package/src/charts/dot/labels.ts

@@ -23,6 +23,7 @@ import {
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
+import { filterByDensity } from '../_shared/density-filter';
 import { formatLabelValue } from '../_shared/format-label-value';
 
 // ---------------------------------------------------------------------------
@@ -50,12 +51,7 @@ export function computeDotLabels(
   labelFormat?: string,
   valueField?: string,
 ): ResolvedLabel[] {
-  // 'none': no labels at all
-  if (density === 'none') return [];
-
-  // Filter marks for 'endpoints' density
-  const targetMarks =
-    density === 'endpoints' && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const targetMarks = filterByDensity(marks, density);
 
   const formatter = buildD3Formatter(labelFormat);
   const candidates: LabelCandidate[] = [];

package/src/charts/pie/labels.ts

@@ -20,6 +20,7 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import { estimateTextWidth, resolveCollisions } from '@opendata-ai/openchart-core';
+import { filterByDensity } from '../_shared/density-filter';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -48,16 +49,13 @@ export function computePieLabels(
 ): ResolvedLabel[] {
   if (marks.length === 0) return [];
 
-  // 'none': no labels at all
-  if (density === 'none') return [];
-
   // Get the pie center from the first mark's center property
+  // (read before filtering — 'endpoints' still needs the original center)
   const centerX = marks[0].center.x;
   const centerY = marks[0].center.y;
 
-  // Filter marks for 'endpoints' density
-  const targetMarks =
-    density === 'endpoints' && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const targetMarks = filterByDensity(marks, density);
+  if (targetMarks.length === 0) return [];
 
   const candidates: LabelCandidate[] = [];
   const targetMarkIndices: number[] = [];

package/src/charts/registry.ts

@@ -58,6 +58,12 @@ export function getChartRenderer(type: string): ChartRenderer | undefined {
 
 /**
  * Clear all registered renderers. Useful for testing.
+ *
+ * Note: the built-in renderers (line, bar, column, ...) register as a
+ * side-effect of importing `./builtin`. Once cleared, they do not come
+ * back on their own — subsequent `compileChart(...)` calls will return
+ * empty marks. Tests that call `clearRenderers()` should follow up with
+ * `registerBuiltinRenderers()` from `./builtin` to restore the defaults.
  */
 export function clearRenderers(): void {
   renderers.clear();

package/src/compile/__tests__/color-scale-range.test.ts

@@ -0,0 +1,79 @@
+import type { Encoding, ResolvedTheme } from '@opendata-ai/openchart-core';
+import { resolveTheme } from '@opendata-ai/openchart-core';
+import { scaleLinear, scaleOrdinal } from 'd3-scale';
+import { describe, expect, it } from 'vitest';
+import type { ResolvedScales } from '../../layout/scales';
+import { applyColorScaleRange } from '../color-scale-range';
+
+const theme: ResolvedTheme = resolveTheme();
+
+describe('applyColorScaleRange', () => {
+  it('is a no-op when no color scale is present', () => {
+    const scales: ResolvedScales = {};
+    const encoding: Encoding = {
+      x: { field: 'x', type: 'quantitative' },
+      y: { field: 'y', type: 'quantitative' },
+    };
+    expect(() => applyColorScaleRange(scales, encoding, theme)).not.toThrow();
+    expect(scales.color).toBeUndefined();
+  });
+
+  it('does not overwrite the range when the encoding declares an explicit palette', () => {
+    // computeScales has already applied the explicit palette to the scale.
+    // The helper must leave it untouched (not replace it with the theme palette).
+    const explicit = ['#111111', '#222222', '#333333'];
+    const ordinal = scaleOrdinal<string, string>().domain(['a', 'b', 'c']).range(explicit);
+    const scales: ResolvedScales = {
+      color: { scale: ordinal, type: 'ordinal', channel: 'color' },
+    };
+    const encoding: Encoding = {
+      x: { field: 'x', type: 'nominal' },
+      y: { field: 'y', type: 'quantitative' },
+      color: {
+        field: 'c',
+        type: 'nominal',
+        scale: { range: explicit },
+      },
+    };
+    applyColorScaleRange(scales, encoding, theme);
+    expect(ordinal.range()).toEqual(explicit);
+    expect(ordinal.range()).not.toEqual(theme.colors.categorical);
+  });
+
+  it('assigns the theme categorical palette when no range is set', () => {
+    const ordinal = scaleOrdinal<string, string>().domain(['a', 'b', 'c']);
+    const scales: ResolvedScales = {
+      color: { scale: ordinal, type: 'ordinal', channel: 'color' },
+    };
+    const encoding: Encoding = {
+      x: { field: 'x', type: 'nominal' },
+      y: { field: 'y', type: 'quantitative' },
+      color: { field: 'c', type: 'nominal' },
+    };
+    applyColorScaleRange(scales, encoding, theme);
+    expect(ordinal.range()).toEqual(theme.colors.categorical);
+  });
+
+  it('uses the first sequential palette endpoints for sequential color scales', () => {
+    const linear = scaleLinear<string, string>().domain([0, 100]);
+    const scales: ResolvedScales = {
+      color: {
+        scale: linear as unknown as ResolvedScales['color'] extends infer T
+          ? T extends { scale: infer S }
+            ? S
+            : never
+          : never,
+        type: 'sequential',
+        channel: 'color',
+      } as NonNullable<ResolvedScales['color']>,
+    };
+    const encoding: Encoding = {
+      x: { field: 'x', type: 'quantitative' },
+      y: { field: 'y', type: 'quantitative' },
+      color: { field: 'v', type: 'quantitative' },
+    };
+    applyColorScaleRange(scales, encoding, theme);
+    const firstSeq = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
+    expect(linear.range()).toEqual([firstSeq[0], firstSeq[firstSeq.length - 1]]);
+  });
+});

package/src/compile/__tests__/data-clip.test.ts

@@ -0,0 +1,59 @@
+import type { Encoding } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { filterClippedDomains } from '../data-clip';
+
+describe('filterClippedDomains', () => {
+  const data = [
+    { x: -5, y: 10 },
+    { x: 10, y: 20 },
+    { x: 25, y: 80 },
+    { x: 50, y: 110 },
+    { x: 80, y: 200 },
+  ];
+
+  it('returns data unchanged when no channel declares scale.clip', () => {
+    const encoding: Encoding = {
+      x: { field: 'x', type: 'quantitative' },
+      y: { field: 'y', type: 'quantitative' },
+    };
+    const result = filterClippedDomains(data, encoding);
+    expect(result).toBe(data);
+    expect(result).toHaveLength(5);
+  });
+
+  it('filters rows outside the x-axis clipped domain', () => {
+    const encoding: Encoding = {
+      x: {
+        field: 'x',
+        type: 'quantitative',
+        scale: { domain: [0, 30], clip: true },
+      },
+      y: { field: 'y', type: 'quantitative' },
+    };
+    const result = filterClippedDomains(data, encoding);
+    expect(result).toEqual([
+      { x: 10, y: 20 },
+      { x: 25, y: 80 },
+    ]);
+  });
+
+  it('filters rows outside both x- and y-axis clipped domains', () => {
+    const encoding: Encoding = {
+      x: {
+        field: 'x',
+        type: 'quantitative',
+        scale: { domain: [0, 60], clip: true },
+      },
+      y: {
+        field: 'y',
+        type: 'quantitative',
+        scale: { domain: [0, 100], clip: true },
+      },
+    };
+    const result = filterClippedDomains(data, encoding);
+    expect(result).toEqual([
+      { x: 10, y: 20 },
+      { x: 25, y: 80 },
+    ]);
+  });
+});