@opendata-ai/openchart-engine 7.2.3 → 7.3.0

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

@@ -20,13 +20,14 @@ describe('computeHeatmapColors', () => {
     const theme = getTheme();
     const colors = computeHeatmapColors(data, column, theme, false);
 
-    expect(colors.size).toBe(5);
+    // Domain-minimum row (value=0) is skipped so the normal row
+    // background shows through instead of an opaque low-end color.
+    expect(colors.size).toBe(4);
+    expect(colors.has(0)).toBe(false);
 
-    // Lowest value should have a lighter background
-    const lowBg = colors.get(0)!.backgroundColor!;
+    const lowBg = colors.get(1)!.backgroundColor!;
     const highBg = colors.get(4)!.backgroundColor!;
 
-    // Check that they're different colors
     expect(lowBg).not.toBe(highBg);
   });
 
@@ -51,8 +52,8 @@ describe('computeHeatmapColors', () => {
     const theme = getTheme();
     const colors = computeHeatmapColors(data, col, theme, false);
 
-    // All values are in the lower half of the domain, so should all have lighter colors
-    expect(colors.size).toBe(5);
+    // value=0 sits at the domain minimum and is skipped
+    expect(colors.size).toBe(4);
   });
 
   it('values outside custom domain are clamped', () => {
@@ -63,8 +64,9 @@ describe('computeHeatmapColors', () => {
     const theme = getTheme();
     const colors = computeHeatmapColors(data, col, theme, false);
 
-    // value=0 is clamped to domain min, value=100 to domain max
-    expect(colors.has(0)).toBe(true);
+    // value=0 clamps to domain[0]=25, which is the minimum, so it's skipped
+    expect(colors.has(0)).toBe(false);
+    // value=100 clamps to domain max and gets colored
     expect(colors.has(4)).toBe(true);
   });
 
@@ -80,8 +82,9 @@ describe('computeHeatmapColors', () => {
     const theme = getTheme();
     const colors = computeHeatmapColors(dataWithLabel, col, theme, false);
 
-    // Should have colors for both rows since score has numeric values
-    expect(colors.size).toBe(2);
+    // score=10 is the domain minimum and is skipped; only score=90 gets colored
+    expect(colors.size).toBe(1);
+    expect(colors.has(1)).toBe(true);
   });
 
   it('returns empty map for non-numeric columns', () => {
@@ -102,8 +105,8 @@ describe('computeHeatmapColors', () => {
     const theme = getTheme(true);
     const colors = computeHeatmapColors(data, column, theme, true);
 
-    expect(colors.size).toBe(5);
-    // In dark mode, text colors should still have adequate contrast
+    // Domain-minimum row skipped
+    expect(colors.size).toBe(4);
     for (const [, style] of colors) {
       const bg = style.backgroundColor!;
       const fg = style.color!;
@@ -112,7 +115,7 @@ describe('computeHeatmapColors', () => {
     }
   });
 
-  it('custom palette arrays are not adapted in dark mode', () => {
+  it('custom palette arrays are adapted for dark mode', () => {
     const col: ColumnConfig = {
       key: 'value',
       heatmap: { palette: ['#fca5a5', '#c44e52'], domain: [0, 100] },
@@ -122,14 +125,14 @@ describe('computeHeatmapColors', () => {
     const lightColors = computeHeatmapColors(data, col, lightTheme, false);
     const darkColors = computeHeatmapColors(data, col, darkTheme, true);
 
-    const lightLowBg = lightColors.get(0)!.backgroundColor!;
+    // Domain-minimum row (value=0) is skipped in both modes
+    expect(lightColors.has(0)).toBe(false);
+    expect(darkColors.has(0)).toBe(false);
+
+    // The high-end color gets adapted for dark mode
     const lightHighBg = lightColors.get(4)!.backgroundColor!;
-    const darkLowBg = darkColors.get(0)!.backgroundColor!;
     const darkHighBg = darkColors.get(4)!.backgroundColor!;
-
-    // Custom palettes produce the same colors in both modes
-    expect(darkLowBg).toBe(lightLowBg);
-    expect(darkHighBg).toBe(lightHighBg);
+    expect(darkHighBg).not.toBe(lightHighBg);
   });
 
   it('supports array of color stops as palette', () => {
@@ -139,6 +142,7 @@ describe('computeHeatmapColors', () => {
     };
     const theme = getTheme();
     const colors = computeHeatmapColors(data, col, theme, false);
-    expect(colors.size).toBe(5);
+    // Domain-minimum row skipped
+    expect(colors.size).toBe(4);
   });
 });

package/src/tables/heatmap.ts

@@ -6,7 +6,7 @@
  */
 
 import type { CellStyle, ColumnConfig, ResolvedTheme } from '@opendata-ai/openchart-core';
-import { adaptColorForDarkMode } from '@opendata-ai/openchart-core';
+import { adaptColorForDarkMode, contrastRatio } from '@opendata-ai/openchart-core';
 import { interpolateRgb } from 'd3-interpolate';
 import { scaleSequential } from 'd3-scale';
 import { accessibleTextColor } from './utils';
@@ -96,22 +96,38 @@ export function computeHeatmapColors(
   }
 
   // Resolve palette and build scale.
-  // Only adapt theme-derived palettes for dark mode. Custom color arrays
-  // are used as-is since the author chose them for a reason, and
-  // adaptColorForDarkMode inverts the perceived intensity ordering
-  // (light pink -> dark red becomes dark red -> pink on dark backgrounds).
+  // For dark mode with custom palettes: replace near-white low-end stops
+  // with the dark background so the gradient blends into the table surface.
+  // Theme-named palettes use the standard adaptColorForDarkMode path.
   let stops = resolvePalette(config.palette, theme);
-  if (darkMode && !Array.isArray(config.palette)) {
+  if (darkMode) {
     const lightBg = '#ffffff';
-    const darkBg = theme.colors.background;
-    stops = stops.map((c) => adaptColorForDarkMode(c, lightBg, darkBg));
+    const themeBg = theme.colors.background;
+    // Use an opaque dark surface for palette blending even when the theme
+    // bg is transparent, so interpolation never passes through alpha=0
+    // (which breaks accessibleTextColor via NaN contrast ratios).
+    const darkBg = themeBg === 'transparent' ? '#09090b' : themeBg;
+    if (Array.isArray(config.palette)) {
+      // Custom arrays: swap near-white stops for the dark bg so the low end
+      // blends in, then adapt the remaining (saturated) stops normally.
+      stops = stops.map((c) => {
+        const ratio = contrastRatio(c, lightBg);
+        if (ratio < 1.15) return darkBg;
+        return adaptColorForDarkMode(c, lightBg, darkBg);
+      });
+    } else {
+      stops = stops.map((c) => adaptColorForDarkMode(c, lightBg, darkBg));
+    }
   }
 
   const interpolator = interpolatorFromStops(stops);
   const scale = scaleSequential(interpolator).domain(domain).clamp(true);
 
-  // Apply to each row
+  // Apply to each row. Skip cells at the domain minimum so the normal
+  // row background (striping) shows through instead of painting an
+  // opaque low-end color that clashes with the table chrome.
   for (const { index, value } of numericValues) {
+    if (value <= domain[0]) continue;
     const bg = scale(value);
     const textColor = accessibleTextColor(bg);