@opendata-ai/openchart-engine 6.25.4 → 6.27.0

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

@@ -0,0 +1,322 @@
+import { describe, expect, it } from 'vitest';
+import { compileTileMap } from '../../compile';
+
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+const basicSpec = {
+  type: 'tilemap' as const,
+  data: { CA: 5.4, TX: 4.1, NY: 4.5, FL: 3.3, IL: 4.6 } as Record<string, number>,
+};
+
+const fullSpec = {
+  type: 'tilemap' as const,
+  data: {
+    AL: 2.7,
+    AK: 6.4,
+    AZ: 3.5,
+    AR: 3.4,
+    CA: 5.4,
+    CO: 3.4,
+    CT: 4.1,
+    DE: 4.4,
+    FL: 3.3,
+    GA: 3.4,
+    HI: 3.2,
+    ID: 3.0,
+    IL: 4.6,
+    IN: 3.3,
+    IA: 2.7,
+    KS: 3.2,
+    KY: 4.4,
+    LA: 3.6,
+    ME: 3.6,
+    MD: 1.8,
+    MA: 3.3,
+    MI: 4.2,
+    MN: 2.8,
+    MS: 3.7,
+    MO: 3.5,
+    MT: 2.9,
+    NE: 2.2,
+    NV: 5.4,
+    NH: 2.4,
+    NJ: 4.8,
+    NM: 4.1,
+    NY: 4.5,
+    NC: 3.5,
+    ND: 1.9,
+    OH: 4.0,
+    OK: 3.9,
+    OR: 4.2,
+    PA: 3.4,
+    RI: 3.8,
+    SC: 3.3,
+    SD: 2.0,
+    TN: 3.5,
+    TX: 4.1,
+    UT: 2.9,
+    VT: 2.3,
+    VA: 2.9,
+    WA: 4.6,
+    WV: 4.0,
+    WI: 2.9,
+    WY: 3.2,
+    DC: 5.2,
+  } as Record<string, number>,
+};
+
+const defaultOptions = { width: 600, height: 400 };
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('compileTileMap', () => {
+  it('always renders all 51 state tiles', () => {
+    const result = compileTileMap(basicSpec, defaultOptions);
+    expect(result.tiles).toHaveLength(51);
+  });
+
+  it('marks data-bearing states as hasData: true', () => {
+    const result = compileTileMap(basicSpec, defaultOptions);
+
+    const caTile = result.tiles.find((t) => t.stateCode === 'CA')!;
+    expect(caTile.hasData).toBe(true);
+    expect(caTile.value).toBe(5.4);
+
+    const dataTiles = result.tiles.filter((t) => t.hasData);
+    expect(dataTiles).toHaveLength(5);
+    const codes = dataTiles.map((t) => t.stateCode).sort();
+    expect(codes).toEqual(['CA', 'FL', 'IL', 'NY', 'TX']);
+  });
+
+  it('marks missing states as hasData: false with neutral fill', () => {
+    const result = compileTileMap(basicSpec, defaultOptions);
+
+    const akTile = result.tiles.find((t) => t.stateCode === 'AK')!;
+    expect(akTile).toBeDefined();
+    expect(akTile.hasData).toBe(false);
+    expect(akTile.value).toBeNull();
+    expect(akTile.formattedValue).toBe('–');
+  });
+
+  it('all tiles have valid position and size (x >= 0, y >= 0, size > 0)', () => {
+    const result = compileTileMap(fullSpec, defaultOptions);
+
+    for (const tile of result.tiles) {
+      expect(tile.x).toBeGreaterThanOrEqual(0);
+      expect(tile.y).toBeGreaterThanOrEqual(0);
+      expect(tile.size).toBeGreaterThan(0);
+    }
+  });
+
+  it('data tiles have fill colors from the sequential palette', () => {
+    const result = compileTileMap(basicSpec, defaultOptions);
+
+    const dataTiles = result.tiles.filter((t) => t.hasData);
+    for (const tile of dataTiles) {
+      expect(tile.fill).toBeTruthy();
+      expect(typeof tile.fill).toBe('string');
+    }
+
+    const fills = new Set(dataTiles.map((t) => t.fill));
+    expect(fills.size).toBeGreaterThan(1);
+  });
+
+  it('compiles tabular DataRow[] data with encoding', () => {
+    const spec = {
+      type: 'tilemap' as const,
+      data: [
+        { code: 'CA', rate: 5.4 },
+        { code: 'TX', rate: 4.1 },
+        { code: 'NY', rate: 4.5 },
+      ],
+      encoding: {
+        state: { field: 'code', type: 'nominal' as const },
+        value: { field: 'rate', type: 'quantitative' as const },
+      },
+    };
+
+    const result = compileTileMap(spec, defaultOptions);
+
+    expect(result.tiles).toHaveLength(51);
+    const dataTiles = result.tiles.filter((t) => t.hasData);
+    expect(dataTiles).toHaveLength(3);
+    const codes = dataTiles.map((t) => t.stateCode).sort();
+    expect(codes).toEqual(['CA', 'NY', 'TX']);
+  });
+
+  it('handles null values in record-map data as missing', () => {
+    const spec = {
+      type: 'tilemap' as const,
+      data: { CA: 5.4, TX: null, NY: 4.5 } as Record<string, number | null>,
+    };
+
+    const result = compileTileMap(spec, defaultOptions);
+
+    const caTile = result.tiles.find((t) => t.stateCode === 'CA')!;
+    expect(caTile.hasData).toBe(true);
+
+    const txTile = result.tiles.find((t) => t.stateCode === 'TX')!;
+    expect(txTile.hasData).toBe(false);
+    expect(txTile.value).toBeNull();
+  });
+
+  describe('gradient legend', () => {
+    it('has correct min/max labels', () => {
+      const result = compileTileMap(basicSpec, defaultOptions);
+
+      expect(result.gradientLegend).not.toBeNull();
+      expect(result.gradientLegend!.minLabel).toBeTruthy();
+      expect(result.gradientLegend!.maxLabel).toBeTruthy();
+      expect(Number(result.gradientLegend!.minLabel)).toBeLessThan(
+        Number(result.gradientLegend!.maxLabel),
+      );
+    });
+
+    it('has colorStops', () => {
+      const result = compileTileMap(basicSpec, defaultOptions);
+
+      expect(result.gradientLegend!.colorStops.length).toBeGreaterThan(0);
+      for (const stop of result.gradientLegend!.colorStops) {
+        expect(stop.offset).toBeGreaterThanOrEqual(0);
+        expect(stop.offset).toBeLessThanOrEqual(1);
+        expect(stop.color).toBeTruthy();
+      }
+    });
+
+    it('is null when legend.show is false', () => {
+      const spec = { ...basicSpec, legend: { show: false } };
+      const result = compileTileMap(spec, defaultOptions);
+
+      expect(result.gradientLegend).toBeNull();
+    });
+  });
+
+  describe('valueFormat', () => {
+    it('applies to tile formattedValue', () => {
+      const spec = { ...basicSpec, valueFormat: '.1f' };
+      const result = compileTileMap(spec, defaultOptions);
+
+      const caTile = result.tiles.find((t) => t.stateCode === 'CA');
+      expect(caTile).toBeDefined();
+      expect(caTile!.formattedValue).toBe('5.4');
+    });
+  });
+
+  describe('dark mode', () => {
+    it('reverses palette direction compared to light mode', () => {
+      const lightResult = compileTileMap(basicSpec, defaultOptions);
+      const darkResult = compileTileMap(basicSpec, { ...defaultOptions, darkMode: true });
+
+      const lightFL = lightResult.tiles.find((t) => t.stateCode === 'FL');
+      const darkFL = darkResult.tiles.find((t) => t.stateCode === 'FL');
+      expect(lightFL!.fill).not.toBe(darkFL!.fill);
+    });
+  });
+
+  describe('chrome', () => {
+    it('resolves title and subtitle', () => {
+      const spec = {
+        ...basicSpec,
+        chrome: {
+          title: 'Test Title',
+          subtitle: 'Test Subtitle',
+        },
+      };
+      const result = compileTileMap(spec, defaultOptions);
+
+      expect(result.chrome.title).toBeDefined();
+      expect(result.chrome.title!.text).toBe('Test Title');
+      expect(result.chrome.subtitle).toBeDefined();
+      expect(result.chrome.subtitle!.text).toBe('Test Subtitle');
+    });
+  });
+
+  describe('tooltip descriptors', () => {
+    it('contains entries for all tiles', () => {
+      const result = compileTileMap(basicSpec, defaultOptions);
+
+      expect(result.tooltipDescriptors.has('CA')).toBe(true);
+      expect(result.tooltipDescriptors.has('TX')).toBe(true);
+      expect(result.tooltipDescriptors.size).toBe(51);
+    });
+
+    it('tooltip has title and value field', () => {
+      const result = compileTileMap(basicSpec, defaultOptions);
+
+      const tooltip = result.tooltipDescriptors.get('CA')!;
+      expect(tooltip.title).toBe('California');
+      expect(tooltip.fields.length).toBeGreaterThan(0);
+      expect(tooltip.fields.some((f) => f.label === 'Value')).toBe(true);
+    });
+  });
+
+  describe('a11y', () => {
+    it('generates descriptive alt text', () => {
+      const result = compileTileMap(basicSpec, defaultOptions);
+
+      expect(result.a11y.altText).toContain('Tile map');
+      expect(result.a11y.altText).toContain('US states');
+    });
+
+    it('has a data table fallback', () => {
+      const result = compileTileMap(basicSpec, defaultOptions);
+
+      expect(result.a11y.dataTableFallback.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('validation', () => {
+    it('throws on non-tilemap spec', () => {
+      const chartSpec = {
+        mark: 'bar' as const,
+        data: [{ x: 1, y: 2 }],
+        encoding: {
+          x: { field: 'x', type: 'quantitative' as const },
+          y: { field: 'y', type: 'quantitative' as const },
+        },
+      };
+
+      expect(() => compileTileMap(chartSpec, defaultOptions)).toThrow(/non-tilemap/);
+    });
+
+    it('throws on empty record-map data', () => {
+      const spec = {
+        type: 'tilemap' as const,
+        data: {} as Record<string, number>,
+      };
+
+      expect(() => compileTileMap(spec, defaultOptions)).toThrow();
+    });
+  });
+
+  describe('dimensions', () => {
+    it('reflects the compile options', () => {
+      const result = compileTileMap(basicSpec, defaultOptions);
+
+      expect(result.width).toBe(600);
+      expect(result.height).toBe(400);
+    });
+
+    it('works with different container sizes', () => {
+      const result = compileTileMap(basicSpec, { width: 800, height: 600 });
+
+      expect(result.width).toBe(800);
+      expect(result.height).toBe(600);
+    });
+  });
+
+  describe('palette', () => {
+    it('uses the specified palette (data tiles differ between palettes)', () => {
+      const blueResult = compileTileMap(basicSpec, defaultOptions);
+      const greenResult = compileTileMap({ ...basicSpec, palette: 'green' }, defaultOptions);
+
+      const blueCa = blueResult.tiles.find((t) => t.stateCode === 'CA')!;
+      const greenCa = greenResult.tiles.find((t) => t.stateCode === 'CA')!;
+      expect(blueCa.fill).not.toBe(greenCa.fill);
+    });
+  });
+});

package/src/tilemap/compile-tilemap.ts

@@ -0,0 +1,383 @@
+/**
+ * TileMap compilation pipeline.
+ *
+ * Takes a raw tilemap spec (unknown shape), validates, normalizes, resolves
+ * theme, computes chrome, builds a color scale, computes tile positions and
+ * marks, builds legend and tooltips, and returns a TileMapLayout.
+ *
+ * Pipeline:
+ *   validate -> normalize -> resolve theme -> dark mode adapt ->
+ *   compute chrome -> extract data -> build color scale -> compute positions ->
+ *   build tile marks -> legend -> tooltips -> a11y -> animation ->
+ *   return TileMapLayout
+ */
+
+import type {
+  CompileOptions,
+  GradientColorStop,
+  GradientLegendLayout,
+  ResolvedAnimation,
+  ResolvedTheme,
+  TextStyle,
+  TileMapLayout,
+  TileMapTileMark,
+  TooltipContent,
+  TooltipField,
+} from '@opendata-ai/openchart-core';
+import {
+  adaptTheme,
+  buildD3Formatter,
+  computeChrome,
+  estimateTextWidth,
+  formatNumber,
+  resolveTheme,
+  SEQUENTIAL_PALETTES,
+} from '@opendata-ai/openchart-core';
+import { scaleLinear } from 'd3-scale';
+
+import { resolveAnimation } from '../compiler/animation';
+import { compile as compileSpec } from '../compiler/index';
+import { computeTilePositions, STATE_CODE_SET, STATE_NAMES, US_STATE_TILES } from './layout';
+import type { NormalizedTileMapSpec } from './types';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const TILE_CORNER_RADIUS = 2;
+const TILE_STROKE_WIDTH = 0;
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Compile a tilemap spec into a TileMapLayout.
+ *
+ * @param spec - Raw tilemap spec (validated and normalized internally).
+ * @param options - Compile options (width, height, theme, darkMode).
+ * @returns TileMapLayout with computed positions and visual properties.
+ * @throws Error if spec is invalid or not a tilemap type.
+ */
+export function compileTileMap(spec: unknown, options: CompileOptions): TileMapLayout {
+  // 1. Validate + normalize via the shared compiler pipeline
+  const { spec: normalized } = compileSpec(spec);
+
+  if (!('type' in normalized) || normalized.type !== 'tilemap') {
+    throw new Error(
+      'compileTileMap received a non-tilemap spec. Use compileChart, compileTable, compileGraph, or compileSankey instead.',
+    );
+  }
+
+  const tilemapSpec = normalized as NormalizedTileMapSpec;
+
+  // Resolve watermark: explicit spec value wins, then options fallback, then default true.
+  const rawWatermark = (spec as Record<string, unknown>).watermark;
+  const watermark =
+    rawWatermark !== undefined ? tilemapSpec.watermark : (options.watermark ?? true);
+
+  // 2. Resolve theme
+  const mergedThemeConfig = options.theme
+    ? { ...tilemapSpec.theme, ...options.theme }
+    : tilemapSpec.theme;
+  const lightTheme: ResolvedTheme = resolveTheme(mergedThemeConfig);
+  let theme: ResolvedTheme = lightTheme;
+  if (options.darkMode) {
+    theme = adaptTheme(theme);
+  }
+
+  const isDarkMode = options.darkMode;
+
+  // 3. Compute chrome
+  const chrome = computeChrome(
+    {
+      title: tilemapSpec.chrome.title,
+      subtitle: tilemapSpec.chrome.subtitle,
+      source: tilemapSpec.chrome.source,
+      byline: tilemapSpec.chrome.byline,
+      footer: tilemapSpec.chrome.footer,
+    },
+    theme,
+    options.width,
+    options.measureText,
+    'full',
+    undefined,
+    watermark,
+  );
+
+  // 4. Compute drawing area (total space minus chrome)
+  const padding = theme.spacing.padding;
+  const fullArea = {
+    x: padding,
+    y: padding + chrome.topHeight,
+    width: options.width - padding * 2,
+    height: options.height - chrome.topHeight - chrome.bottomHeight - padding * 2,
+  };
+
+  // Guard against negative dimensions
+  if (fullArea.width <= 0 || fullArea.height <= 0) {
+    return emptyLayout(chrome, theme, options, watermark);
+  }
+
+  // 5. Extract encoding fields
+  const stateField = tilemapSpec.encoding.state.field;
+  const valueField = tilemapSpec.encoding.value.field;
+
+  // 6. Extract values from data, preserving null/undefined as missing
+  const stateValueMap = new Map<string, number>();
+
+  for (const row of tilemapSpec.data) {
+    const stateCode = String(row[stateField]);
+    const raw = row[valueField];
+
+    if (STATE_CODE_SET.has(stateCode) && raw !== null && raw !== undefined) {
+      const value = Number(raw);
+      if (!Number.isNaN(value)) {
+        stateValueMap.set(stateCode, value);
+      }
+    }
+  }
+
+  // 7. Compute value range for color scale
+  const values = Array.from(stateValueMap.values());
+  const min = values.length > 0 ? Math.min(...values) : 0;
+  const max = values.length > 0 ? Math.max(...values) : 100;
+
+  // 8. Build color scale (fallback to 'blue' if palette name is invalid)
+  const paletteStops = [...(SEQUENTIAL_PALETTES[tilemapSpec.palette] ?? SEQUENTIAL_PALETTES.blue)];
+  if (isDarkMode) paletteStops.reverse();
+
+  const domain = paletteStops.map((_, i) => min + (i / (paletteStops.length - 1)) * (max - min));
+  const colorScale = scaleLinear<string>().domain(domain).range(paletteStops).clamp(true);
+
+  // 9. Reserve space for gradient legend at bottom (unless hidden)
+  const showLegend = tilemapSpec.legend?.show !== false;
+  const legendBarHeight = 12;
+  const legendLabelGap = 4;
+  const legendTotalHeight = showLegend ? legendBarHeight + legendLabelGap + 14 : 0;
+
+  // 10. Compute tile positions in the remaining area
+  const legendGap = showLegend ? 8 : 0;
+  const tileAreaHeight = fullArea.height - legendTotalHeight - legendGap;
+  const tilePositions = computeTilePositions(fullArea.width, tileAreaHeight, 4);
+
+  // Center tile grid horizontally
+  const tileGridOffsetX = fullArea.x + (fullArea.width - tilePositions.gridWidth) / 2;
+  const tileGridOffsetY = fullArea.y;
+
+  // Position for legend
+  const legendX = tileGridOffsetX;
+  const legendY = tileGridOffsetY + tilePositions.gridHeight + legendGap;
+  const legendWidth = tilePositions.gridWidth;
+
+  // 11. Build TileMapTileMark[]
+  const formatter = buildD3Formatter(tilemapSpec.valueFormat) ?? formatNumber;
+  const neutralFillLight = '#e0e0e0';
+  const neutralFillDark = '#2a2a3e';
+  const neutralStrokeLight = '#d0d0d0';
+  const neutralStrokeDark = '#3a3a50';
+
+  const neutralFill = isDarkMode ? neutralFillDark : neutralFillLight;
+  const neutralStroke = isDarkMode ? neutralStrokeDark : neutralStrokeLight;
+
+  const tiles: TileMapTileMark[] = [];
+
+  for (const { state: stateCode } of US_STATE_TILES) {
+    const pos = tilePositions.positions.get(stateCode);
+    if (!pos) continue;
+
+    const hasData = stateValueMap.has(stateCode);
+    const value = hasData ? stateValueMap.get(stateCode)! : null;
+    const fill = hasData ? colorScale(value!) : neutralFill;
+    const formattedValue = hasData ? formatter(value!) : '–';
+
+    const labelStyle: TextStyle = {
+      fontFamily: theme.fonts.family,
+      fontSize: tilePositions.tileSize > 24 ? 14 : 11,
+      fontWeight: 700,
+      fill: '#ffffff',
+      lineHeight: 1.2,
+    };
+
+    const valueLabelStyle: TextStyle = {
+      fontFamily: theme.fonts.family,
+      fontSize: tilePositions.tileSize > 24 ? 12 : 10,
+      fontWeight: 400,
+      fill: '#ffffff',
+      lineHeight: 1.2,
+    };
+
+    // Only show value label on larger tiles
+    const valueLabel =
+      tilePositions.tileSize < 24
+        ? { text: '', x: 0, y: 0, style: valueLabelStyle, visible: false }
+        : {
+            text: formattedValue,
+            x: tileGridOffsetX + pos.x + tilePositions.tileSize / 2,
+            y: tileGridOffsetY + pos.y + tilePositions.tileSize / 2 + 8,
+            style: valueLabelStyle,
+            visible: true,
+          };
+
+    const tile: TileMapTileMark = {
+      type: 'tile' as const,
+      stateCode,
+      x: tileGridOffsetX + pos.x,
+      y: tileGridOffsetY + pos.y,
+      size: tilePositions.tileSize,
+      fill,
+      stroke: neutralStroke,
+      strokeWidth: TILE_STROKE_WIDTH,
+      cornerRadius: TILE_CORNER_RADIUS,
+      value: value ?? null,
+      formattedValue,
+      hasData,
+      label: {
+        text: stateCode,
+        x: tileGridOffsetX + pos.x + tilePositions.tileSize / 2,
+        y: tileGridOffsetY + pos.y + tilePositions.tileSize / 2 - 4,
+        style: labelStyle,
+        visible: true,
+      },
+      valueLabel,
+      data: { state: stateCode, value, stateName: STATE_NAMES[stateCode] ?? stateCode },
+      aria: {
+        role: 'img',
+        label: `${STATE_NAMES[stateCode] ?? stateCode}: ${formattedValue}`,
+      },
+      animationIndex: 0,
+    };
+
+    tiles.push(tile);
+  }
+
+  // Assign shuffled animation indices for a scattered pop-in effect.
+  // Uses a deterministic Fisher-Yates shuffle so the order looks random
+  // but is consistent across renders.
+  const indices = Array.from({ length: tiles.length }, (_, i) => i);
+  let seed = 42;
+  for (let i = indices.length - 1; i > 0; i--) {
+    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
+    const j = seed % (i + 1);
+    [indices[i], indices[j]] = [indices[j], indices[i]];
+  }
+  for (let i = 0; i < tiles.length; i++) {
+    tiles[i].animationIndex = indices[i];
+  }
+
+  // 12. Build gradient legend (null when legend is hidden)
+  let gradientLegend: GradientLegendLayout | null = null;
+
+  if (showLegend) {
+    const gradientColorStops: GradientColorStop[] = paletteStops.map((color, i) => ({
+      offset: i / (paletteStops.length - 1),
+      color,
+    }));
+
+    gradientLegend = {
+      type: 'gradient',
+      position: 'bottom',
+      bounds: { x: legendX, y: legendY, width: legendWidth, height: legendBarHeight },
+      labelStyle: {
+        fontFamily: theme.fonts.family,
+        fontSize: 11,
+        fontWeight: 400,
+        fill: theme.colors.text,
+        lineHeight: 1.2,
+      },
+      colorStops: gradientColorStops,
+      minLabel: formatter(min),
+      maxLabel: formatter(max),
+    };
+  }
+
+  // 13. Build tooltip descriptors
+  const tooltipDescriptors = new Map<string, TooltipContent>();
+  for (const tile of tiles) {
+    const fields: TooltipField[] = [
+      {
+        label: 'Value',
+        value: tile.formattedValue,
+      },
+    ];
+    tooltipDescriptors.set(tile.stateCode, {
+      title: STATE_NAMES[tile.stateCode] ?? tile.stateCode,
+      fields,
+    });
+  }
+
+  // 14. Build a11y metadata
+  const a11y = {
+    altText: `Tile map of US states showing values from ${formatter(min)} to ${formatter(max)}`,
+    dataTableFallback: tiles.map((t) => [t.stateCode, t.formattedValue]),
+    role: 'img',
+    keyboardNavigable: tiles.length > 0,
+  };
+
+  // 15. Resolve animation
+  const resolvedAnimation: ResolvedAnimation | undefined = resolveAnimation(tilemapSpec.animation);
+
+  return {
+    area: fullArea,
+    chrome,
+    tiles,
+    gradientLegend,
+    tooltipDescriptors,
+    a11y,
+    theme,
+    width: options.width,
+    height: options.height,
+    animation: resolvedAnimation,
+    watermark,
+    measureText:
+      options.measureText ??
+      ((text, fontSize) => ({ width: estimateTextWidth(text, fontSize), height: fontSize })),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Empty layout fallback
+// ---------------------------------------------------------------------------
+
+function emptyLayout(
+  chrome: ReturnType<typeof computeChrome>,
+  theme: ResolvedTheme,
+  options: CompileOptions,
+  watermark: boolean,
+): TileMapLayout {
+  return {
+    area: { x: 0, y: 0, width: 0, height: 0 },
+    chrome,
+    tiles: [],
+    gradientLegend: {
+      type: 'gradient',
+      position: 'bottom',
+      bounds: { x: 0, y: 0, width: 0, height: 0 },
+      labelStyle: {
+        fontFamily: theme.fonts.family,
+        fontSize: 11,
+        fontWeight: 400,
+        fill: theme.colors.text,
+        lineHeight: 1.2,
+      },
+      colorStops: [],
+      minLabel: '0',
+      maxLabel: '0',
+    },
+    tooltipDescriptors: new Map(),
+    a11y: {
+      altText: 'Empty tile map',
+      dataTableFallback: [],
+      role: 'img',
+      keyboardNavigable: false,
+    },
+    theme,
+    width: options.width,
+    height: options.height,
+    watermark,
+    animation: undefined,
+    measureText:
+      options.measureText ??
+      ((text, fontSize) => ({ width: estimateTextWidth(text, fontSize), height: fontSize })),
+  };
+}