@opendata-ai/openchart-engine 6.28.4 → 6.28.5

package/package.json

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

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

@@ -112,7 +112,7 @@ describe('computeHeatmapColors', () => {
     }
   });
 
-  it('preserves luminance ordering in dark mode with custom color stops', () => {
+  it('high values are more visually prominent than low values in both modes', () => {
     const col: ColumnConfig = {
       key: 'value',
       heatmap: { palette: ['#fca5a5', '#c44e52'], domain: [0, 100] },
@@ -122,16 +122,37 @@ describe('computeHeatmapColors', () => {
     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);
+
+    function parseLum(color: string): number {
+      const rgbMatch = /rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)/.exec(color);
+      if (rgbMatch) {
+        const [r, g, b] = [rgbMatch[1], rgbMatch[2], rgbMatch[3]].map((c) => {
+          const v = Number(c) / 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;
+      }
+      const hexMatch = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
+      if (!hexMatch) return 0;
+      const [r, g, b] = [hexMatch[1], hexMatch[2], hexMatch[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;
+    }
+
+    // Light mode: high values get darker/more saturated bg (lower luminance = more prominent)
+    expect(parseLum(lightLowBg)).toBeGreaterThan(parseLum(lightHighBg));
+
+    // Dark mode: high values get brighter bg (higher luminance = more prominent on dark bg)
+    expect(parseLum(darkHighBg)).toBeGreaterThan(parseLum(darkLowBg));
   });
 
   it('supports array of color stops as palette', () => {

package/src/tables/heatmap.ts

@@ -11,17 +11,6 @@ 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.
@@ -111,24 +100,7 @@ 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);