@opendata-ai/openchart-engine 7.11.0 → 8.0.0-rc.10

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

@@ -56,4 +56,72 @@ describe('filterClippedDomains', () => {
       { x: 25, y: 80 },
     ]);
   });
+
+  describe('categorical domains', () => {
+    const years = [
+      { year: '2019', pct: 32.4 },
+      { year: '2020', pct: 31.9 },
+      { year: '2021', pct: 33.9 },
+      { year: '2022', pct: 33.6 },
+    ];
+
+    it('keeps only rows whose value is in the domain set', () => {
+      const encoding: Encoding = {
+        x: {
+          field: 'year',
+          type: 'ordinal',
+          scale: { domain: ['2021', '2022'], clip: true },
+        },
+        y: { field: 'pct', type: 'quantitative' },
+      };
+      expect(filterClippedDomains(years, encoding)).toEqual([
+        { year: '2021', pct: 33.9 },
+        { year: '2022', pct: 33.6 },
+      ]);
+    });
+
+    it('matches numeric row values against a string domain', () => {
+      const numericYears = [
+        { year: 2020, pct: 31.9 },
+        { year: 2021, pct: 33.9 },
+      ];
+      const encoding: Encoding = {
+        x: {
+          field: 'year',
+          type: 'ordinal',
+          scale: { domain: ['2021'], clip: true },
+        },
+        y: { field: 'pct', type: 'quantitative' },
+      };
+      expect(filterClippedDomains(numericYears, encoding)).toEqual([{ year: 2021, pct: 33.9 }]);
+    });
+
+    it('does not treat a two-category domain as a numeric range', () => {
+      const encoding: Encoding = {
+        x: {
+          field: 'year',
+          type: 'ordinal',
+          // A range reading would keep 2020 and 2021 too; membership must not.
+          scale: { domain: ['2019', '2022'], clip: true },
+        },
+        y: { field: 'pct', type: 'quantitative' },
+      };
+      expect(filterClippedDomains(years, encoding)).toEqual([
+        { year: '2019', pct: 32.4 },
+        { year: '2022', pct: 33.6 },
+      ]);
+    });
+
+    it('passes data through when the channel has no clip', () => {
+      const encoding: Encoding = {
+        x: {
+          field: 'year',
+          type: 'ordinal',
+          scale: { domain: ['2021', '2022'] },
+        },
+        y: { field: 'pct', type: 'quantitative' },
+      };
+      expect(filterClippedDomains(years, encoding)).toBe(years);
+    });
+  });
 });

package/src/compile/__tests__/fill-patterns.test.ts

@@ -0,0 +1,154 @@
+/**
+ * Fill pattern assignment (mark.fillPattern: 'auto').
+ *
+ * Locks the deterministic pattern-to-series assignment, the opt-in gate,
+ * and the minimum-area rule for thin marks.
+ */
+
+import type { ChartSpec, RectMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../../compile';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const FOUR_SERIES_DATA = [
+  { quarter: 'Q1', source: 'Solar', twh: 30 },
+  { quarter: 'Q1', source: 'Wind', twh: 45 },
+  { quarter: 'Q1', source: 'Hydro', twh: 25 },
+  { quarter: 'Q1', source: 'Gas', twh: 60 },
+  { quarter: 'Q2', source: 'Solar', twh: 35 },
+  { quarter: 'Q2', source: 'Wind', twh: 50 },
+  { quarter: 'Q2', source: 'Hydro', twh: 22 },
+  { quarter: 'Q2', source: 'Gas', twh: 55 },
+];
+
+function stackedSpec(fillPattern?: 'auto' | 'none'): ChartSpec {
+  return {
+    mark: { type: 'bar', ...(fillPattern ? { fillPattern } : {}) },
+    data: FOUR_SERIES_DATA,
+    encoding: {
+      x: { field: 'quarter', type: 'nominal' },
+      y: { field: 'twh', type: 'quantitative', stack: 'zero' },
+      color: { field: 'source', type: 'nominal' },
+    },
+  };
+}
+
+const OPTS = { width: 600, height: 400 };
+
+function rectMarks(spec: ChartSpec): RectMark[] {
+  return compileChart(spec, OPTS).marks.filter((m): m is RectMark => m.type === 'rect');
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('applyFillPatterns via compileChart', () => {
+  it('assigns four distinct patterns to a four-series stacked bar', () => {
+    const rects = rectMarks(stackedSpec('auto'));
+    expect(rects.length).toBeGreaterThan(0);
+
+    const byColor = new Map<string, string>();
+    for (const rect of rects) {
+      expect(rect.pattern).toBeDefined();
+      byColor.set(String(rect.fill), rect.pattern!.type);
+    }
+    // 4 series -> 4 distinct fills -> 4 distinct pattern shapes
+    expect(byColor.size).toBe(4);
+    expect(new Set(byColor.values()).size).toBe(4);
+    expect([...byColor.values()].sort()).toEqual(
+      ['crosshatch', 'diagonal', 'dot', 'vertical'].sort(),
+    );
+  });
+
+  it('is deterministic across repeat compiles', () => {
+    const first = rectMarks(stackedSpec('auto')).map((r) => r.pattern);
+    const second = rectMarks(stackedSpec('auto')).map((r) => r.pattern);
+    expect(second).toEqual(first);
+  });
+
+  it('picks a contrast-aware line color for each pattern', () => {
+    for (const rect of rectMarks(stackedSpec('auto'))) {
+      expect(['#ffffff', '#111111']).toContain(rect.pattern!.line);
+      expect(rect.pattern!.base).toBe(rect.fill);
+    }
+  });
+
+  it('does nothing by default or with fillPattern: none', () => {
+    for (const rect of rectMarks(stackedSpec())) {
+      expect(rect.pattern).toBeUndefined();
+    }
+    for (const rect of rectMarks(stackedSpec('none'))) {
+      expect(rect.pattern).toBeUndefined();
+    }
+  });
+
+  it('minimum-area rule: thin segments keep their solid fill', () => {
+    // Tiny values force sub-12px stacked segments at 400px height.
+    const thinData = FOUR_SERIES_DATA.map((row) =>
+      row.source === 'Hydro' ? { ...row, twh: 0.5 } : row,
+    );
+    const spec = { ...stackedSpec('auto'), data: thinData };
+    const rects = rectMarks(spec);
+
+    const thin = rects.filter((r) => Math.min(r.width, r.height) < 12);
+    const thick = rects.filter((r) => Math.min(r.width, r.height) >= 12);
+    expect(thin.length).toBeGreaterThan(0);
+    expect(thick.length).toBeGreaterThan(0);
+    for (const rect of thin) expect(rect.pattern).toBeUndefined();
+    for (const rect of thick) expect(rect.pattern).toBeDefined();
+  });
+
+  it('assignment does not shift when individual marks are too small', () => {
+    // Same series order, one series squeezed below the minimum extent:
+    // surviving patterns keep the same shape per series color.
+    const thinData = FOUR_SERIES_DATA.map((row) =>
+      row.source === 'Wind' ? { ...row, twh: 0.5 } : row,
+    );
+    const base = rectMarks(stackedSpec('auto'));
+    const squeezed = rectMarks({ ...stackedSpec('auto'), data: thinData });
+
+    const patternByFill = (rects: RectMark[]) => {
+      const map = new Map<string, string>();
+      for (const r of rects) {
+        if (r.pattern) map.set(String(r.fill), r.pattern.type);
+      }
+      return map;
+    };
+
+    const baseMap = patternByFill(base);
+    for (const [fill, type] of patternByFill(squeezed)) {
+      expect(baseMap.get(fill)).toBe(type);
+    }
+  });
+});
+
+describe('fill patterns on arcs', () => {
+  it('patterns pie slices and skips slivers', () => {
+    const spec: ChartSpec = {
+      mark: { type: 'arc', fillPattern: 'auto' },
+      data: [
+        { browser: 'Chrome', share: 64 },
+        { browser: 'Safari', share: 20 },
+        { browser: 'Edge', share: 15 },
+        { browser: 'Other', share: 0.4 },
+      ],
+      encoding: {
+        color: { field: 'browser', type: 'nominal' },
+        y: { field: 'share', type: 'quantitative' },
+      },
+    };
+    const layout = compileChart(spec, OPTS);
+    const arcs = layout.marks.filter((m) => m.type === 'arc');
+    expect(arcs.length).toBe(4);
+
+    const patterned = arcs.filter((a) => a.pattern);
+    const solid = arcs.filter((a) => !a.pattern);
+    // The 0.4% sliver falls under the minimum-area rule.
+    expect(patterned.length).toBe(3);
+    expect(solid.length).toBe(1);
+  });
+});

package/src/compile/__tests__/size-scale.test.ts

@@ -0,0 +1,108 @@
+import type { EncodingChannel } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { buildSizeScale } from '../size-scale';
+
+const DATA = [{ v: 1 }, { v: 4 }, { v: 9 }];
+const SQRT = { curve: 'sqrt' as const, range: [3, 30] as [number, number] };
+const LINEAR = { curve: 'linear' as const, range: [11, 32] as [number, number] };
+
+const size = (extra: Partial<EncodingChannel> = {}): EncodingChannel =>
+  ({ field: 'v', type: 'quantitative', ...extra }) as EncodingChannel;
+
+describe('buildSizeScale', () => {
+  it('returns null when there is no size encoding', () => {
+    expect(buildSizeScale(undefined, DATA, SQRT)).toBeNull();
+  });
+
+  it('fits the domain to the data extent and the range to the default', () => {
+    const resolved = buildSizeScale(size(), DATA, SQRT);
+    expect(resolved?.domain).toEqual([1, 9]);
+    expect(resolved?.range).toEqual([3, 30]);
+    expect(resolved?.field).toBe('v');
+  });
+
+  it('maps circles by area (sqrt), not by radius', () => {
+    const { scale } = buildSizeScale(size(), DATA, SQRT)!;
+    // Endpoints pin to the range.
+    expect(scale(1)).toBeCloseTo(3, 5);
+    expect(scale(9)).toBeCloseTo(30, 5);
+    // The midpoint of a sqrt scale sits ABOVE the linear midpoint (16.5):
+    // r = 3 + 27 * (sqrt(4)-sqrt(1)) / (sqrt(9)-sqrt(1)) = 16.5 -- for v=4
+    // that lands exactly on the linear midpoint by coincidence of 1/4/9, so
+    // check a value where the two genuinely diverge.
+    const linearAt6 = 3 + 27 * ((6 - 1) / (9 - 1)); // 19.875
+    expect(scale(6)).toBeGreaterThan(linearAt6);
+  });
+
+  it('maps glyphs by height (linear)', () => {
+    const { scale } = buildSizeScale(size(), DATA, LINEAR)!;
+    expect(scale(1)).toBeCloseTo(11, 5);
+    expect(scale(9)).toBeCloseTo(32, 5);
+    // Exactly proportional: no sqrt bulge.
+    expect(scale(5)).toBeCloseTo(11 + (32 - 11) * ((5 - 1) / (9 - 1)), 5);
+  });
+
+  it('lets an explicit scale.domain override the data extent', () => {
+    const resolved = buildSizeScale(size({ scale: { domain: [0, 100] } }), DATA, SQRT);
+    expect(resolved?.domain).toEqual([0, 100]);
+  });
+
+  it('lets an explicit scale.range override the default magnitudes', () => {
+    const resolved = buildSizeScale(size({ scale: { range: [5, 12] } }), DATA, SQRT);
+    expect(resolved?.range).toEqual([5, 12]);
+    expect(resolved?.scale(1)).toBeCloseTo(5, 5);
+    expect(resolved?.scale(9)).toBeCloseTo(12, 5);
+  });
+
+  it('clamps data outside an explicit domain to the range endpoints', () => {
+    // This is why a size legend must key the DOMAIN, not the data extent: every
+    // datum above domain[1] renders at max magnitude and is indistinguishable.
+    const { scale } = buildSizeScale(size({ scale: { domain: [0, 5] } }), DATA, SQRT)!;
+    expect(scale(9)).toBeCloseTo(scale(5), 5);
+    expect(scale(-100)).toBeCloseTo(scale(0), 5);
+  });
+
+  it('returns null for a degenerate domain (every value identical)', () => {
+    // A zero-width domain maps every datum to range[0]. There is no magnitude
+    // being encoded, so the caller falls back to its static default rather than
+    // rendering a field of identical minimum-size marks.
+    expect(buildSizeScale(size(), [{ v: 7 }, { v: 7 }], SQRT)).toBeNull();
+  });
+
+  it('returns null when no value is finite', () => {
+    expect(buildSizeScale(size(), [{ v: 'x' }, { v: null }], SQRT)).toBeNull();
+  });
+
+  it('ignores non-finite rows when fitting the domain', () => {
+    const resolved = buildSizeScale(size(), [{ v: 1 }, { v: 'nope' }, { v: 9 }], SQRT);
+    expect(resolved?.domain).toEqual([1, 9]);
+  });
+
+  it('treats a null hole as absent data, not as a zero', () => {
+    // `Number(null)` is a finite 0, so a hole that reaches the extent silently
+    // drags the domain floor to zero and rescales every genuine mark.
+    const resolved = buildSizeScale(size(), [{ v: 10 }, { v: 20 }, { v: null }], SQRT);
+    expect(resolved?.domain).toEqual([10, 20]);
+  });
+
+  it('treats an empty string the same way (Number("") is also 0)', () => {
+    const resolved = buildSizeScale(size(), [{ v: 10 }, { v: 20 }, { v: '' }], SQRT);
+    expect(resolved?.domain).toEqual([10, 20]);
+  });
+
+  it('returns null when the field is absent from every row', () => {
+    // `min([])`/`max([])` are undefined; a `?? 0` / `?? 1` fallback would
+    // fabricate a live [0, 1] scale out of data that encodes no size at all.
+    expect(buildSizeScale(size(), [{ other: 1 }, { other: 2 }], SQRT)).toBeNull();
+  });
+
+  it('returns null on empty data', () => {
+    expect(buildSizeScale(size(), [], SQRT)).toBeNull();
+  });
+
+  it('honours an explicit domain even when the data has no usable extent', () => {
+    // The domain is the author's, not the data's, so it stands on its own.
+    const resolved = buildSizeScale(size({ scale: { domain: [0, 100] } }), [{ v: null }], SQRT);
+    expect(resolved?.domain).toEqual([0, 100]);
+  });
+});

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

@@ -14,12 +14,53 @@
  */
 
 import { ACHROMATIC_RAMP, type Encoding, type ResolvedTheme } from '@opendata-ai/openchart-core';
-import type { ScaleLinear, ScaleOrdinal } from 'd3-scale';
+import type { ScaleLinear, ScaleOrdinal, ScaleQuantile } from 'd3-scale';
 import type { ResolvedScales } from '../layout/scales';
+import { sampleRampColors } from '../legend/continuous';
 
 /** Neutral gray applied to muted (non-highlighted) series. */
 const MUTED_COLOR = '#bfc3c8';
 
+/**
+ * Resolve the categorical color range for a color-scale domain.
+ *
+ * Single source of truth for categorical color assignment: the ordinal scale
+ * (which colors the marks) and the legend (which colors the swatches) both go
+ * through this, so highlight muting and the accent-neutral series strategy
+ * stay in sync. Callers pass the domain in the same order the scale uses.
+ *
+ * The result is a d3 ordinal *range*, so callers index it the way d3 does:
+ * `colors[domainIndex % colors.length]`. In the pass-through cases the full
+ * palette comes back unsliced (d3 cycles it), matching the range the scale
+ * carried before this was factored out.
+ */
+export function categoricalColorsForDomain(
+  domain: string[],
+  theme: ResolvedTheme,
+  highlight?: string[],
+): string[] {
+  const palette = theme.colors.categorical;
+
+  if (highlight && highlight.length > 0) {
+    const highlightSet = new Set(highlight);
+    return domain.map((v, i) => (highlightSet.has(v) ? palette[i % palette.length] : MUTED_COLOR));
+  }
+
+  const strategy = theme.seriesStrategy ?? 'palette';
+  if (strategy !== 'accent-neutral') return palette;
+
+  const count = domain.length;
+  if (count <= 1) return [palette[0]];
+  if (count > 4) return palette;
+
+  // Prominence tracks contrast against the surface: on dark canvases the
+  // brightest gray reads strongest, on light canvases the darkest.
+  const neutrals = theme.isDark
+    ? [ACHROMATIC_RAMP.fgMuted, ACHROMATIC_RAMP.fgSubtle, ACHROMATIC_RAMP.fgFaint]
+    : [ACHROMATIC_RAMP.fgFaint, ACHROMATIC_RAMP.fgSubtle, ACHROMATIC_RAMP.fgMuted];
+  return domain.map((_, i) => (i === 0 ? palette[0] : neutrals[(i - 1) % neutrals.length]));
+}
+
 /** Mutates `scales.color.scale.range` in place when no explicit palette was set. */
 export function applyColorScaleRange(
   scales: ResolvedScales,
@@ -42,39 +83,19 @@ export function applyColorScaleRange(
       seqStops[0],
       seqStops[seqStops.length - 1],
     ]);
+  } else if (
+    scales.color.type === 'quantile' ||
+    scales.color.type === 'quantize' ||
+    scales.color.type === 'threshold'
+  ) {
+    // Binned color scales: replace the placeholder colors with the theme's
+    // sequential ramp, sampled to the class count. Same ramp the gradient
+    // legend and continuous marks use.
+    const seqStops = Object.values(theme.colors.sequential)[0] ?? theme.colors.categorical;
+    const scale = scales.color.scale as unknown as ScaleQuantile<string>;
+    scale.range(sampleRampColors(seqStops, scale.range().length));
   } else {
     const ordinalScale = scales.color.scale as ScaleOrdinal<string, string>;
-    const palette = theme.colors.categorical;
-    const domain = ordinalScale.domain();
-
-    if (highlight && highlight.length > 0) {
-      const highlightSet = new Set(highlight);
-      const colors = domain.map((v, i) =>
-        highlightSet.has(v) ? palette[i % palette.length] : MUTED_COLOR,
-      );
-      ordinalScale.range(colors);
-    } else {
-      const strategy = theme.seriesStrategy ?? 'palette';
-      if (strategy !== 'accent-neutral') {
-        ordinalScale.range(palette);
-      } else {
-        const count = domain.length;
-        if (count <= 1) {
-          ordinalScale.range([palette[0]]);
-        } else if (count <= 4) {
-          // Prominence tracks contrast against the surface: on dark canvases
-          // the brightest gray reads strongest, on light canvases the darkest.
-          const neutrals = theme.isDark
-            ? [ACHROMATIC_RAMP.fgMuted, ACHROMATIC_RAMP.fgSubtle, ACHROMATIC_RAMP.fgFaint]
-            : [ACHROMATIC_RAMP.fgFaint, ACHROMATIC_RAMP.fgSubtle, ACHROMATIC_RAMP.fgMuted];
-          const colors = domain.map((_, i) =>
-            i === 0 ? palette[0] : neutrals[(i - 1) % neutrals.length],
-          );
-          ordinalScale.range(colors);
-        } else {
-          ordinalScale.range(palette);
-        }
-      }
-    }
+    ordinalScale.range(categoricalColorsForDomain(ordinalScale.domain(), theme, highlight));
   }
 }

package/src/compile/data-clip.ts

@@ -1,9 +1,16 @@
 /**
  * Data filter for clipped scale domains.
  *
- * When an x or y encoding declares `scale.clip: true` with a numeric
- * [lo, hi] domain, rows whose field value falls outside that range are
- * dropped before scales and marks are computed. Pure and side-effect free.
+ * When an x or y encoding declares `scale.clip: true`, rows whose field value
+ * falls outside the declared domain are dropped before scales and marks are
+ * computed. Pure and side-effect free.
+ *
+ * Two domain forms, two semantics:
+ * - Numeric `[lo, hi]`: a RANGE. Rows are kept when `lo <= value <= hi`.
+ * - Categorical `string[]`: a MEMBERSHIP SET. Rows are kept when the value is
+ *   listed. A categorical domain enumerates its categories rather than bounding
+ *   them, so range comparison would be meaningless (and lexicographic on years
+ *   would only work by accident).
  */
 
 import type { DataRow, Encoding } from '@opendata-ai/openchart-core';
@@ -11,8 +18,8 @@ import type { DataRow, Encoding } from '@opendata-ai/openchart-core';
 /**
  * Return a new data array with rows outside any clipped scale domain removed.
  *
- * Only inspects the `x` and `y` channels. Non-numeric domains and channels
- * without `scale.clip` are passed through unchanged.
+ * Only inspects the `x` and `y` channels. Channels without `scale.clip` (or
+ * without a `scale.domain` to clip to) are passed through unchanged.
  */
 export function filterClippedDomains(data: DataRow[], encoding: Encoding): DataRow[] {
   let result = data;
@@ -21,12 +28,20 @@ export function filterClippedDomains(data: DataRow[], encoding: Encoding): DataR
     if (!enc?.scale?.clip || !enc.scale.domain) continue;
     const domain = enc.scale.domain;
     const field = enc.field;
-    if (Array.isArray(domain) && domain.length === 2 && typeof domain[0] === 'number') {
+    if (!Array.isArray(domain)) continue;
+
+    if (domain.length === 2 && typeof domain[0] === 'number') {
       const [lo, hi] = domain as [number, number];
       result = result.filter((row) => {
         const v = Number(row[field]);
         return Number.isFinite(v) && v >= lo && v <= hi;
       });
+    } else if (typeof domain[0] === 'string') {
+      // Compare as strings: a categorical domain is authored as string[], but
+      // the underlying row value may be a number (e.g. a year column), so
+      // `domain.includes(row[field])` would miss on a type mismatch.
+      const allowed = new Set(domain as string[]);
+      result = result.filter((row) => allowed.has(String(row[field])));
     }
   }
   return result;

package/src/compile/fill-patterns.ts

@@ -0,0 +1,74 @@
+/**
+ * Per-series fill pattern assignment for `mark.fillPattern: 'auto'`.
+ *
+ * Series identity is the mark's resolved fill color (already theme-resolved
+ * by the color scale), so assignment is deterministic: the first distinct
+ * fill gets the first pattern shape, the second the next, cycling through
+ * the four built-in shapes. The pattern line color is contrast-picked
+ * against the series color per mode, so patterns read in light and dark.
+ *
+ * The renderer turns each ResolvedFillPattern into an SVG `<pattern>` def
+ * (see packages/vanilla/src/pattern-utils.ts).
+ */
+
+import type {
+  FillPatternType,
+  GradientDef,
+  Mark,
+  MarkDef,
+  ResolvedFillPattern,
+  ResolvedTheme,
+} from '@opendata-ai/openchart-core';
+import { getRepresentativeColor, pickLabelColor } from '@opendata-ai/openchart-core';
+
+/** Assignment order for series patterns. */
+const PATTERN_SEQUENCE: readonly FillPatternType[] = ['diagonal', 'dot', 'crosshatch', 'vertical'];
+
+/**
+ * Minimum-area rule: a mark keeps its solid fill when its thin dimension is
+ * below this many pixels. Pattern tiles are 6px; below ~2 tiles the pattern
+ * degrades into noise on thin stacked segments and slivers of pie.
+ */
+const MIN_PATTERN_EXTENT = 12;
+
+/**
+ * Stamp `pattern` onto filled marks (rect, area, arc) when the mark def opts
+ * in with `fillPattern: 'auto'`. Mutates marks in place (same convention as
+ * assignAnimationIndices). No-op otherwise.
+ */
+export function applyFillPatterns(marks: Mark[], markDef: MarkDef, theme: ResolvedTheme): void {
+  if (markDef.fillPattern !== 'auto') return;
+
+  const assignment = new Map<string, ResolvedFillPattern>();
+  const resolve = (fill: string | GradientDef): ResolvedFillPattern => {
+    const base = getRepresentativeColor(fill);
+    let resolved = assignment.get(base);
+    if (!resolved) {
+      const type = PATTERN_SEQUENCE[assignment.size % PATTERN_SEQUENCE.length];
+      resolved = { type, base, line: pickLabelColor(base, theme.isDark) };
+      assignment.set(base, resolved);
+    }
+    return resolved;
+  };
+
+  for (const mark of marks) {
+    // Resolve BEFORE any size check so pattern-to-series assignment does not
+    // depend on which individual marks are large enough to render one.
+    if (mark.type === 'rect') {
+      const pattern = resolve(mark.fill);
+      if (Math.min(mark.width, mark.height) >= MIN_PATTERN_EXTENT) {
+        mark.pattern = pattern;
+      }
+    } else if (mark.type === 'area') {
+      mark.pattern = resolve(mark.fill);
+    } else if (mark.type === 'arc') {
+      const pattern = resolve(mark.fill);
+      const radialExtent = mark.outerRadius - mark.innerRadius;
+      const midRadius = (mark.innerRadius + mark.outerRadius) / 2;
+      const arcExtent = Math.abs(mark.endAngle - mark.startAngle) * midRadius;
+      if (Math.min(radialExtent, arcExtent) >= MIN_PATTERN_EXTENT) {
+        mark.pattern = pattern;
+      }
+    }
+  }
+}