@opendata-ai/openchart-engine 7.10.0 → 8.0.0-rc.1

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

@@ -533,5 +533,44 @@ describe('compileTileMap', () => {
       const caTile = result.tiles.find((t) => t.stateCode === 'CA')!;
       expect(caTile.formattedValue).toBe('Medical Only');
     });
+
+    it('suppresses value labels in categorical mode (showValueLabels: false)', () => {
+      const result = compileTileMap(categoricalRecordSpec, defaultOptions);
+
+      // All tiles should have valueLabel.visible = false in categorical mode
+      const dataTiles = result.tiles.filter((t) => t.hasData);
+      for (const tile of dataTiles) {
+        expect(tile.valueLabel.visible).toBe(false);
+      }
+    });
+  });
+
+  describe('value label visibility', () => {
+    it('shows value labels by default in quantitative mode (when tile size permits)', () => {
+      const result = compileTileMap(basicSpec, defaultOptions);
+
+      // Tiles should have valueLabel.visible = true when tileSize >= 24 in quantitative mode
+      const dataTiles = result.tiles.filter((t) => t.hasData);
+      const tilesWithVisibleLabels = dataTiles.filter((t) => t.valueLabel.visible);
+
+      // At least some tiles should have visible value labels (depends on computed tile size)
+      // If tileSize is large enough (>= 24), all data tiles should show value labels
+      if (dataTiles.length > 0 && dataTiles[0].size >= 24) {
+        expect(tilesWithVisibleLabels.length).toBe(dataTiles.length);
+      }
+    });
+
+    it('hides value labels when tile size is too small (< 24px)', () => {
+      // Use a very narrow container to force small tiles
+      const result = compileTileMap(basicSpec, { width: 200, height: 400 });
+
+      const dataTiles = result.tiles.filter((t) => t.hasData);
+      if (dataTiles.length > 0 && dataTiles[0].size < 24) {
+        // When tiles are small, value labels should be hidden
+        for (const tile of dataTiles) {
+          expect(tile.valueLabel.visible).toBe(false);
+        }
+      }
+    });
   });
 });

package/src/tilemap/compile-tilemap.ts

@@ -33,11 +33,9 @@ import type {
 } from '@opendata-ai/openchart-core';
 import {
   adaptTheme,
-  buildD3Formatter,
   CATEGORICAL_PALETTE,
   computeChrome,
   estimateTextWidth,
-  formatNumber,
   getBreakpoint,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
@@ -46,9 +44,10 @@ import {
   SEQUENTIAL_PALETTES,
 } from '@opendata-ai/openchart-core';
 import { scaleLinear } from 'd3-scale';
-
+import { emitSpecWarnings, expandSpecSugar } from '../compile/spec-sugar';
 import { resolveAnimation } from '../compiler/animation';
 import { compile as compileSpec } from '../compiler/index';
+import { resolveFieldFormatter } from '../format/field-format';
 import { computeTilePositions, STATE_CODE_SET, STATE_NAMES, US_STATE_TILES } from './layout';
 import type { NormalizedTileMapSpec } from './types';
 
@@ -79,8 +78,19 @@ function clamp(value: number, min: number, max: number): number {
  * @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);
+  // 1. Expand deprecated top-level sugar (valueFormat -> encoding.value.format)
+  // before validation, then validate + normalize via the shared compiler
+  // pipeline. Surface any normalize warnings (e.g. "only N of M rows have
+  // valid US state codes", mixed-type coercion) the same way the chart path
+  // does; without this the primary "your data did not map" diagnostic is
+  // computed and then dropped.
+  const sugarWarnings: string[] = [];
+  const expandedSpec =
+    spec && typeof spec === 'object' && !Array.isArray(spec)
+      ? expandSpecSugar(spec as Record<string, unknown>, sugarWarnings)
+      : spec;
+  const { spec: normalized, warnings } = compileSpec(expandedSpec);
+  emitSpecWarnings([...sugarWarnings, ...warnings], options.onWarn);
 
   if (!('type' in normalized) || normalized.type !== 'tilemap') {
     throw new Error(
@@ -208,7 +218,11 @@ function compileQuantitative(
   const legendY = tileGridOffsetY + tilePositions.gridHeight + legendGap;
   const legendWidth = tilePositions.gridWidth;
 
-  const formatter = buildD3Formatter(tilemapSpec.valueFormat) ?? formatNumber;
+  // Encoding-level format (v8 canonical) wins over deprecated top-level valueFormat
+  const formatter = resolveFieldFormatter({
+    surfaceFormat: tilemapSpec.encoding.value.format ?? tilemapSpec.valueFormat,
+    values: Array.from(stateValueMap.values()),
+  });
   const neutralFill = isDarkMode ? '#1e2a30' : '#e0e0e0';
   const neutralStroke = isDarkMode ? 'rgba(255,255,255,0.08)' : '#d0d0d0';
 
@@ -432,6 +446,7 @@ function compileCategorical(
         theme,
         isDarkMode: !!isDarkMode,
         category: hasData ? category : undefined,
+        showValueLabels: false,
       }),
     );
   }
@@ -526,6 +541,7 @@ interface TileMarkOptions {
   theme: ResolvedTheme;
   isDarkMode: boolean;
   category?: string | null;
+  showValueLabels?: boolean;
 }
 
 function buildTileMark(opts: TileMarkOptions): TileMapTileMark {
@@ -544,6 +560,7 @@ function buildTileMark(opts: TileMarkOptions): TileMapTileMark {
     theme,
     isDarkMode,
     category,
+    showValueLabels = true,
   } = opts;
   const tileCenterX = gridOffsetX + pos.x + tileSize / 2;
   const tileTopY = gridOffsetY + pos.y;
@@ -553,7 +570,7 @@ function buildTileMark(opts: TileMarkOptions): TileMapTileMark {
 
   // A two-line layout (code over value) only fits once tiles are large enough;
   // below that we drop the value and center the code so nothing overflows.
-  const showValue = tileSize >= 24;
+  const showValue = showValueLabels && tileSize >= 24;
 
   // Scale the code font with the tile so a 2-char label always fits its box,
   // rather than snapping between two fixed sizes. A 2-char string is ~1.2x the

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

@@ -141,10 +141,10 @@ describe('computeTooltipDescriptors', () => {
       // Should have fields for y (value) and x (date)
       expect(content.fields.length).toBeGreaterThanOrEqual(1);
 
-      // The value field should be formatted with commas
+      // The value field should use compact notation (smart default formatting)
       const valueField = content.fields.find((f) => f.label === 'value');
       expect(valueField).toBeDefined();
-      expect(valueField!.value).toBe('1,500');
+      expect(valueField!.value).toBe('1.5k');
     });
 
     it('tooltip title uses temporal x-axis value', () => {