@opendata-ai/openchart-engine 6.28.2 → 6.28.4

package/package.json

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

package/src/tables/__tests__/heatmap.test.ts

@@ -112,6 +112,28 @@ describe('computeHeatmapColors', () => {
     }
   });
 
+  it('preserves luminance ordering in dark mode with custom color stops', () => {
+    const col: ColumnConfig = {
+      key: 'value',
+      heatmap: { palette: ['#fca5a5', '#c44e52'], domain: [0, 100] },
+    };
+    const lightTheme = getTheme(false);
+    const darkTheme = getTheme(true);
+    const lightColors = computeHeatmapColors(data, col, lightTheme, false);
+    const darkColors = computeHeatmapColors(data, col, darkTheme, true);
+
+    // Low value should have a visually lighter/less intense background than high value
+    // in both modes. Extract the backgrounds and compare luminance ordering.
+    const lightLowBg = lightColors.get(0)!.backgroundColor!;
+    const lightHighBg = lightColors.get(4)!.backgroundColor!;
+    const darkLowBg = darkColors.get(0)!.backgroundColor!;
+    const darkHighBg = darkColors.get(4)!.backgroundColor!;
+
+    // The low-value cell and high-value cell should have different backgrounds in both modes
+    expect(lightLowBg).not.toBe(lightHighBg);
+    expect(darkLowBg).not.toBe(darkHighBg);
+  });
+
   it('supports array of color stops as palette', () => {
     const col: ColumnConfig = {
       key: 'value',

package/src/tables/heatmap.ts

@@ -11,6 +11,17 @@ import { interpolateRgb } from 'd3-interpolate';
 import { scaleSequential } from 'd3-scale';
 import { accessibleTextColor } from './utils';
 
+/** WCAG relative luminance from a hex color string. */
+function relativeLuminance(hex: string): number {
+  const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+  if (!m) return 0;
+  const [r, g, b] = [m[1], m[2], m[3]].map((c) => {
+    const v = Number.parseInt(c, 16) / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
 /**
  * Build an interpolator from an array of color stops.
  * Uses d3-interpolate for smooth color transitions.
@@ -100,7 +111,24 @@ export function computeHeatmapColors(
   if (darkMode) {
     const lightBg = '#ffffff';
     const darkBg = theme.colors.background;
+    const originalStops = stops;
     stops = stops.map((c) => adaptColorForDarkMode(c, lightBg, darkBg));
+
+    // adaptColorForDarkMode preserves contrast ratios independently per stop,
+    // which can invert the luminance ordering (light-to-dark becomes dark-to-light).
+    // Detect this and reverse the adapted stops to preserve the intended gradient direction.
+    if (originalStops.length >= 2) {
+      const origDirection = Math.sign(
+        relativeLuminance(originalStops[originalStops.length - 1]) -
+          relativeLuminance(originalStops[0]),
+      );
+      const adaptedDirection = Math.sign(
+        relativeLuminance(stops[stops.length - 1]) - relativeLuminance(stops[0]),
+      );
+      if (origDirection !== 0 && adaptedDirection !== 0 && origDirection !== adaptedDirection) {
+        stops = stops.slice().reverse();
+      }
+    }
   }
 
   const interpolator = interpolatorFromStops(stops);

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

@@ -297,18 +297,20 @@ describe('compileTileMap', () => {
   });
 
   describe('dimensions', () => {
-    it('reflects the compile options', () => {
+    it('width matches compile options, height fits content', () => {
       const result = compileTileMap(basicSpec, defaultOptions);
 
       expect(result.width).toBe(600);
-      expect(result.height).toBe(400);
+      expect(result.height).toBeGreaterThan(0);
+      expect(result.height).toBeLessThanOrEqual(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);
+      expect(result.height).toBeGreaterThan(0);
+      expect(result.height).toBeLessThanOrEqual(600);
     });
   });
 

package/src/tilemap/compile-tilemap.ts

@@ -329,6 +329,15 @@ export function compileTileMap(spec: unknown, options: CompileOptions): TileMapL
   // 15. Resolve animation
   const resolvedAnimation: ResolvedAnimation | undefined = resolveAnimation(tilemapSpec.animation);
 
+  // Tight content height: tiles + legend + chrome + padding
+  const contentHeight =
+    tileGridOffsetY +
+    tilePositions.gridHeight +
+    legendGap +
+    legendTotalHeight +
+    chrome.bottomHeight +
+    padding;
+
   return {
     area: fullArea,
     chrome,
@@ -338,7 +347,7 @@ export function compileTileMap(spec: unknown, options: CompileOptions): TileMapL
     a11y,
     theme,
     width: options.width,
-    height: options.height,
+    height: contentHeight,
     animation: resolvedAnimation,
     watermark,
     measureText: