From 0e7ab2ea01f5358d00b6370b83aee52fcb0f4715 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 7 Sep 2022 18:22:35 +0200
Subject: [PATCH] Heatmap: Add option to reverse color scheme (#54365) (#54861)

(cherry picked from commit 4223d3a6a732385fabdc70a001c863659d8b4702)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
---
 public/app/plugins/panel/heatmap/migrations.test.ts | 5 +++--
 public/app/plugins/panel/heatmap/migrations.ts      | 6 ++++++
 public/app/plugins/panel/heatmap/models.gen.ts      | 9 ++++++---
 public/app/plugins/panel/heatmap/module.tsx         | 6 ++++++
 public/app/plugins/panel/heatmap/palettes.ts        | 1 +
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/migrations.test.ts b/public/app/plugins/panel/heatmap/migrations.test.ts
index a75e0c2ab79..fd12e6fd556 100644
--- a/public/app/plugins/panel/heatmap/migrations.test.ts
+++ b/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,
diff --git a/public/app/plugins/panel/heatmap/migrations.ts b/public/app/plugins/panel/heatmap/migrations.ts
index 873272cf6c3..7c27f53e04e 100644
--- a/public/app/plugins/panel/heatmap/migrations.ts
+++ b/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 };
 }
 
diff --git a/public/app/plugins/panel/heatmap/models.gen.ts b/public/app/plugins/panel/heatmap/models.gen.ts
index 9b97a10fb75..fc52189160d 100644
--- a/public/app/plugins/panel/heatmap/models.gen.ts
+++ b/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,
   },
diff --git a/public/app/plugins/panel/heatmap/module.tsx b/public/app/plugins/panel/heatmap/module.tsx
index db2e7cab5e7..32a9940a031 100644
--- a/public/app/plugins/panel/heatmap/module.tsx
+++ b/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__`,
diff --git a/public/app/plugins/panel/heatmap/palettes.ts b/public/app/plugins/panel/heatmap/palettes.ts
index 7a4ea65c46d..4c9c719b882 100644
--- a/public/app/plugins/panel/heatmap/palettes.ts
+++ b/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)