Heatmap: Add option to reverse color scheme (#54365)

public/app/plugins/panel/heatmap/migrations.test.ts

@@ -55,6 +55,7 @@ describe('Heatmap Migrations', () => {
             "max": 100,
             "min": 5,
             "mode": "scheme",
+            "reverse": true,
             "scale": "exponential",
             "scheme": "BuGn",
             "steps": 128,
@@ -155,8 +156,8 @@ const oldHeatmap = {
     colorScale: 'sqrt',
     exponent: 0.5,
     colorScheme: 'interpolateBuGn',
-    min: 5,
-    max: 100,
+    min: 100,
+    max: 5,
   },
   legend: {
     show: true,

public/app/plugins/panel/heatmap/migrations.ts

@@ -145,6 +145,12 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
   options.color.min = color.min;
   options.color.max = color.max;
 
+  if (typeof color.min === 'number' && typeof color.max === 'number' && color.min > color.max) {
+    options.color.min = color.max;
+    options.color.max = color.min;
+    options.color.reverse = true;
+  }
+
   return { fieldConfig, options };
 }
 

public/app/plugins/panel/heatmap/models.gen.ts

@@ -26,13 +26,15 @@ export interface HeatmapColorOptions {
   exponent: number; // when scale== sqrt
   steps: number; // 2-128
 
+  reverse: boolean;
+
   // Clamp the colors to the value range
   min?: number;
   max?: number;
 }
 export interface YAxisConfig extends AxisConfig {
   unit?: string;
-  reverse?: boolean; 
+  reverse?: boolean;
   decimals?: number;
   // Only used when the axis is not ordinal
   min?: number;
@@ -78,9 +80,9 @@ export interface PanelOptions {
   cellGap?: number; // was cardPadding
   cellRadius?: number; // was cardRadius (not used, but migrated from angular)
   cellValues?: CellValues;
-  
+
   yAxis: YAxisConfig;
-  
+
   legend: HeatmapLegend;
 
   tooltip: HeatmapTooltip;
@@ -94,6 +96,7 @@ export const defaultPanelOptions: PanelOptions = {
     scheme: 'Oranges',
     fill: 'dark-orange',
     scale: HeatmapColorScale.Exponential,
+    reverse: false,
     exponent: 0.5,
     steps: 64,
   },

public/app/plugins/panel/heatmap/module.tsx

@@ -244,6 +244,12 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
           step: 1,
         },
       })
+      .addBooleanSwitch({
+        path: 'color.reverse',
+        name: 'Reverse',
+        defaultValue: defaultPanelOptions.color.reverse,
+        category,
+      })
       .addCustomEditor({
         id: '__scale__',
         path: `__scale__`,

public/app/plugins/panel/heatmap/palettes.ts

@@ -97,6 +97,7 @@ export function quantizeScheme(opts: HeatmapColorOptions, theme: GrafanaTheme2):
     }
 
     if (
+      opts.reverse ||
       scheme.invert === 'always' ||
       (scheme.invert === 'dark' && theme.isDark) ||
       (scheme.invert === 'light' && theme.isLight)