@opendata-ai/openchart-engine 8.0.0-rc.5 → 8.0.0-rc.6

package/package.json

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

package/src/geo/__tests__/compile-map.test.ts

@@ -296,6 +296,55 @@ describe('compileMap', () => {
     expect(layout.continuousLegend).toBeNull();
   });
 
+  it('categorical legend defaults to top and sits above the map area', () => {
+    const layout = compileMap(
+      {
+        type: 'map',
+        geo: { features: MINI_TOPO, projection: 'mercator' },
+        data: [
+          { fips: '06', category: 'west' },
+          { fips: '48', category: 'south' },
+        ],
+        encoding: {
+          key: { field: 'fips', type: 'nominal' },
+          color: { field: 'category', type: 'nominal' },
+        },
+      },
+      DEFAULT_OPTIONS,
+    );
+
+    const legend = layout.categoricalLegend!;
+    expect(legend.position).toBe('top');
+    // The map area shifts down to make room for a top legend; the legend row
+    // must land above it, not inside it (the old bottom-anchored legend
+    // overlapped the map because the two disagreed about the layout).
+    expect(legend.bounds.y + legend.bounds.height).toBeLessThanOrEqual(layout.area.y);
+  });
+
+  it('honors position: bottom for categorical legend', () => {
+    const layout = compileMap(
+      {
+        type: 'map',
+        geo: { features: MINI_TOPO, projection: 'mercator' },
+        data: [
+          { fips: '06', category: 'west' },
+          { fips: '48', category: 'south' },
+        ],
+        encoding: {
+          key: { field: 'fips', type: 'nominal' },
+          color: { field: 'category', type: 'nominal' },
+        },
+        legend: { position: 'bottom' },
+      },
+      DEFAULT_OPTIONS,
+    );
+
+    const legend = layout.categoricalLegend!;
+    expect(legend.position).toBe('bottom');
+    // Bottom legend starts at or below the map area's bottom edge.
+    expect(legend.bounds.y).toBeGreaterThanOrEqual(layout.area.y + layout.area.height);
+  });
+
   it('assigns neutral fill to features without data', () => {
     const layout = compileMap(
       {

package/src/geo/compile-map.ts

@@ -360,6 +360,7 @@ export function compileMap(spec: unknown, options: CompileOptions): MapLayout {
       fullArea,
       mapAreaHeight,
       legendReserveGap,
+      legendPosition,
       showLegend,
       droppedFeatures,
     });
@@ -1010,6 +1011,7 @@ interface CategoricalOptions {
   fullArea: { x: number; y: number; width: number; height: number };
   mapAreaHeight: number;
   legendReserveGap: number;
+  legendPosition: 'top' | 'bottom';
   showLegend: boolean;
   droppedFeatures: string[];
 }
@@ -1031,6 +1033,7 @@ function buildCategoricalMarks(opts: CategoricalOptions): {
     fullArea,
     mapAreaHeight,
     legendReserveGap,
+    legendPosition,
     showLegend,
     droppedFeatures,
   } = opts;
@@ -1142,8 +1145,15 @@ function buildCategoricalMarks(opts: CategoricalOptions): {
       shape: 'square' as const,
     }));
 
+    // Honor legend.position like the continuous path does. The map drawing
+    // area (mapAreaY in compileMap) already shifts down for top legends, so
+    // the legend row here must agree with it — a bottom-anchored legend with
+    // a top-shifted map is how legends used to land on top of Alaska.
     const legendX = fullArea.x;
-    const legendY = fullArea.y + mapAreaHeight + legendReserveGap;
+    const legendY =
+      legendPosition === 'bottom'
+        ? fullArea.y + mapAreaHeight + legendReserveGap
+        : fullArea.y + legendReserveGap;
     const legendWidth = fullArea.width;
     const swatchSize = 10;
     const swatchGap = 6;
@@ -1151,7 +1161,7 @@ function buildCategoricalMarks(opts: CategoricalOptions): {
 
     legend = {
       type: 'categorical',
-      position: 'bottom',
+      position: legendPosition,
       bounds: { x: legendX, y: legendY, width: legendWidth, height: swatchSize + 6 },
       labelStyle,
       entries,