From 874039992f3c6d8769af3dfb5f1dec66a64c7c93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 21 May 2019 13:10:23 +0200
Subject: [PATCH] BarGauge: Fix for negative min values (#17192)

---
 devenv/dev-dashboards/home.json               |  70 +-
 ...animated_demo.json => bar_gauge_demo.json} | 402 ++++++---
 .../panel-bargauge/gradient_demo.json         | 376 --------
 .../panel-bargauge/many_modes_demo.json       | 405 ---------
 .../panel-bargauge/panel_tests_bar_gauge.json | 829 ++++++++++++++++++
 .../panel-bargauge/retro_led_demo.json        | 400 ---------
 .../src/components/BarGauge/BarGauge.test.tsx |  28 +-
 .../src/components/BarGauge/BarGauge.tsx      |  42 +-
 8 files changed, 1177 insertions(+), 1375 deletions(-)
 rename devenv/dev-dashboards/panel-bargauge/{animated_demo.json => bar_gauge_demo.json} (62%)
 delete mode 100644 devenv/dev-dashboards/panel-bargauge/gradient_demo.json
 delete mode 100644 devenv/dev-dashboards/panel-bargauge/many_modes_demo.json
 create mode 100644 devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge.json
 delete mode 100644 devenv/dev-dashboards/panel-bargauge/retro_led_demo.json

diff --git a/devenv/dev-dashboards/home.json b/devenv/dev-dashboards/home.json
index 8608b0b8264..f4cdfed9d53 100644
--- a/devenv/dev-dashboards/home.json
+++ b/devenv/dev-dashboards/home.json
@@ -48,28 +48,6 @@
         "y": 0
       },
       "headings": false,
-      "id": 8,
-      "limit": 1000,
-      "links": [],
-      "query": "",
-      "recent": false,
-      "search": true,
-      "starred": false,
-      "tags": ["panel-demo"],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "tag: panel-demo",
-      "type": "dashlist"
-    },
-    {
-      "folderId": null,
-      "gridPos": {
-        "h": 13,
-        "w": 6,
-        "x": 12,
-        "y": 0
-      },
-      "headings": false,
       "id": 2,
       "limit": 1000,
       "links": [],
@@ -83,6 +61,28 @@
       "title": "tag: panel-tests",
       "type": "dashlist"
     },
+    {
+      "folderId": null,
+      "gridPos": {
+        "h": 26,
+        "w": 6,
+        "x": 12,
+        "y": 0
+      },
+      "headings": false,
+      "id": 3,
+      "limit": 1000,
+      "links": [],
+      "query": "",
+      "recent": false,
+      "search": true,
+      "starred": false,
+      "tags": ["gdev", "demo"],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "tag: dashboard-demo",
+      "type": "dashlist"
+    },
     {
       "folderId": null,
       "gridPos": {
@@ -114,28 +114,6 @@
         "y": 13
       },
       "headings": false,
-      "id": 3,
-      "limit": 1000,
-      "links": [],
-      "query": "",
-      "recent": false,
-      "search": true,
-      "starred": false,
-      "tags": ["gdev", "demo"],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "tag: dashboard-demo",
-      "type": "dashlist"
-    },
-    {
-      "folderId": null,
-      "gridPos": {
-        "h": 13,
-        "w": 6,
-        "x": 12,
-        "y": 13
-      },
-      "headings": false,
       "id": 4,
       "limit": 1000,
       "links": [],
@@ -146,7 +124,7 @@
       "tags": ["templating", "gdev"],
       "timeFrom": null,
       "timeShift": null,
-      "title": "tag: templating",
+      "title": "tag: templating ",
       "type": "dashlist"
     }
   ],
@@ -167,5 +145,5 @@
   "timezone": "",
   "title": "Grafana Dev Overview & Home",
   "uid": "j6T00KRZz",
-  "version": 1
+  "version": 2
 }
diff --git a/devenv/dev-dashboards/panel-bargauge/animated_demo.json b/devenv/dev-dashboards/panel-bargauge/bar_gauge_demo.json
similarity index 62%
rename from devenv/dev-dashboards/panel-bargauge/animated_demo.json
rename to devenv/dev-dashboards/panel-bargauge/bar_gauge_demo.json
index a061f5766d1..dcbc7fd1343 100644
--- a/devenv/dev-dashboards/panel-bargauge/animated_demo.json
+++ b/devenv/dev-dashboards/panel-bargauge/bar_gauge_demo.json
@@ -15,26 +15,27 @@
   "editable": true,
   "gnetId": null,
   "graphTooltip": 0,
+  "id": 7501,
   "links": [],
   "panels": [
     {
+      "datasource": "gdev-testdata",
       "gridPos": {
         "h": 7,
-        "w": 18,
+        "w": 24,
         "x": 0,
         "y": 0
       },
-      "id": 7,
+      "id": 2,
       "links": [],
       "options": {
-        "displayMode": "gradient",
+        "displayMode": "lcd",
         "fieldOptions": {
           "calcs": ["mean"],
           "defaults": {
-            "decimals": null,
             "max": 100,
             "min": 0,
-            "unit": "watt"
+            "unit": "decgbytes"
           },
           "mappings": [],
           "override": {},
@@ -47,7 +48,7 @@
             {
               "color": "orange",
               "index": 1,
-              "value": 40
+              "value": 60
             },
             {
               "color": "red",
@@ -59,95 +60,188 @@
         },
         "orientation": "vertical"
       },
-      "pluginVersion": "6.2.0-pre",
       "targets": [
         {
+          "alias": "sda1",
           "refId": "A",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda2",
           "refId": "B",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda3",
           "refId": "C",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda4",
           "refId": "D",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda5",
           "refId": "E",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "10003,33333"
+          "scenarioId": "random_walk"
         },
         {
+          "alias": "sda6",
           "refId": "F",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda7",
           "refId": "G",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda8",
           "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
+          "scenarioId": "random_walk"
         },
         {
+          "alias": "sda9",
           "refId": "I",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda10",
           "refId": "J",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda11",
           "refId": "K",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda12",
           "refId": "L",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda13",
           "refId": "M",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda14",
           "refId": "N",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda15",
           "refId": "O",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda16",
           "refId": "P",
           "scenarioId": "random_walk"
-        },
-        {
-          "refId": "Q",
-          "scenarioId": "random_walk"
         }
       ],
       "timeFrom": null,
       "timeShift": null,
-      "title": "Usage",
+      "title": "",
+      "transparent": true,
       "type": "bargauge"
     },
     {
+      "datasource": "gdev-testdata",
       "gridPos": {
-        "h": 22,
-        "w": 6,
-        "x": 18,
-        "y": 0
+        "h": 10,
+        "w": 16,
+        "x": 0,
+        "y": 7
       },
-      "id": 8,
+      "id": 4,
       "links": [],
       "options": {
         "displayMode": "gradient",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "celsius"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 20
+            },
+            {
+              "color": "orange",
+              "index": 2,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "alias": "Inside",
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "alias": "Outhouse",
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "Area B",
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "Basement",
+          "refId": "C",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "Garage",
+          "refId": "D",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Gradient mode",
+      "type": "bargauge"
+    },
+    {
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 10,
+        "w": 6,
+        "x": 16,
+        "y": 7
+      },
+      "id": 6,
+      "links": [],
+      "options": {
+        "displayMode": "basic",
         "fieldOptions": {
           "calcs": ["mean"],
           "defaults": {
@@ -160,19 +254,24 @@
           "override": {},
           "thresholds": [
             {
-              "color": "green",
+              "color": "blue",
               "index": 0,
               "value": null
             },
             {
-              "color": "orange",
+              "color": "green",
               "index": 1,
-              "value": 55
+              "value": 42.5
+            },
+            {
+              "color": "orange",
+              "index": 2,
+              "value": 80
             },
             {
               "color": "red",
-              "index": 2,
-              "value": 95
+              "index": 3,
+              "value": 90
             }
           ],
           "values": false
@@ -181,10 +280,6 @@
       },
       "pluginVersion": "6.2.0-pre",
       "targets": [
-        {
-          "refId": "E",
-          "scenarioId": "random_walk"
-        },
         {
           "refId": "H",
           "scenarioId": "csv_metric_values",
@@ -194,22 +289,6 @@
           "refId": "A",
           "scenarioId": "random_walk"
         },
-        {
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "I",
-          "scenarioId": "random_walk"
-        },
         {
           "refId": "J",
           "scenarioId": "random_walk"
@@ -241,47 +320,78 @@
         {
           "refId": "Q",
           "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Basic",
+      "type": "bargauge"
+    },
+    {
+      "datasource": "gdev-testdata",
+      "gridPos": {
+        "h": 22,
+        "w": 2,
+        "x": 22,
+        "y": 7
+      },
+      "id": 8,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "max": 100,
+            "min": 0
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "red",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "red",
+              "index": 1,
+              "value": 90
+            }
+          ],
+          "values": false
         },
+        "orientation": "vertical"
+      },
+      "targets": [
         {
-          "refId": "F",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "G",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "R",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "S",
+          "refId": "A",
           "scenarioId": "random_walk"
         }
       ],
       "timeFrom": null,
       "timeShift": null,
-      "title": "Usage",
+      "title": "Completion",
       "type": "bargauge"
     },
     {
+      "datasource": "gdev-testdata",
       "gridPos": {
-        "h": 15,
-        "w": 11,
+        "h": 12,
+        "w": 22,
         "x": 0,
-        "y": 7
+        "y": 17
       },
-      "id": 6,
+      "id": 10,
       "links": [],
       "options": {
         "displayMode": "gradient",
         "fieldOptions": {
           "calcs": ["mean"],
           "defaults": {
-            "decimals": null,
             "max": 100,
             "min": 0,
-            "unit": "celsius"
+            "unit": "decgbytes"
           },
           "mappings": [],
           "override": {},
@@ -294,12 +404,12 @@
             {
               "color": "green",
               "index": 1,
-              "value": 20
+              "value": 30
             },
             {
               "color": "orange",
               "index": 2,
-              "value": 40
+              "value": 60
             },
             {
               "color": "red",
@@ -309,69 +419,113 @@
           ],
           "values": false
         },
-        "orientation": "horizontal"
+        "orientation": "vertical"
       },
-      "pluginVersion": "6.2.0-pre",
       "targets": [
         {
-          "alias": "Inside",
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "alias": "Outhouse",
+          "alias": "sda1",
           "refId": "A",
           "scenarioId": "random_walk"
         },
         {
-          "alias": "Area B",
+          "alias": "sda2",
           "refId": "B",
           "scenarioId": "random_walk"
         },
         {
-          "alias": "Basement",
+          "alias": "sda3",
           "refId": "C",
           "scenarioId": "random_walk"
         },
         {
-          "alias": "Garage",
+          "alias": "sda4",
           "refId": "D",
           "scenarioId": "random_walk"
         },
         {
-          "alias": "Attic",
+          "alias": "sda5",
           "refId": "E",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda6",
           "refId": "F",
           "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda7",
+          "refId": "G",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda8",
+          "refId": "H",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda9",
+          "refId": "I",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda10",
+          "refId": "J",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda11",
+          "refId": "K",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda12",
+          "refId": "L",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda13",
+          "refId": "M",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda14",
+          "refId": "N",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda15",
+          "refId": "O",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda16",
+          "refId": "P",
+          "scenarioId": "random_walk"
         }
       ],
       "timeFrom": null,
       "timeShift": null,
-      "title": "Temperature",
+      "title": "",
       "type": "bargauge"
     },
     {
+      "datasource": "gdev-testdata",
       "gridPos": {
-        "h": 15,
-        "w": 7,
-        "x": 11,
-        "y": 7
+        "h": 8,
+        "w": 24,
+        "x": 0,
+        "y": 29
       },
-      "id": 9,
+      "id": 11,
       "links": [],
       "options": {
         "displayMode": "basic",
         "fieldOptions": {
           "calcs": ["mean"],
           "defaults": {
-            "decimals": null,
             "max": 100,
             "min": 0,
-            "unit": "celsius"
+            "unit": "decgbytes"
           },
           "mappings": [],
           "override": {},
@@ -384,12 +538,12 @@
             {
               "color": "green",
               "index": 1,
-              "value": 20
+              "value": 30
             },
             {
               "color": "orange",
               "index": 2,
-              "value": 40
+              "value": 60
             },
             {
               "color": "red",
@@ -399,89 +553,113 @@
           ],
           "values": false
         },
-        "orientation": "horizontal"
+        "orientation": "vertical"
       },
-      "pluginVersion": "6.2.0-pre",
       "targets": [
         {
-          "alias": "Inside",
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "alias": "Outhouse",
+          "alias": "sda1",
           "refId": "A",
           "scenarioId": "random_walk"
         },
         {
-          "alias": "Area B",
+          "alias": "sda2",
           "refId": "B",
           "scenarioId": "random_walk"
         },
         {
-          "alias": "Basement",
+          "alias": "sda3",
           "refId": "C",
           "scenarioId": "random_walk"
         },
         {
-          "alias": "Garage",
+          "alias": "sda4",
           "refId": "D",
           "scenarioId": "random_walk"
         },
         {
-          "alias": "Attic",
+          "alias": "sda5",
           "refId": "E",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda6",
           "refId": "F",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda7",
           "refId": "G",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda8",
+          "refId": "H",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda9",
           "refId": "I",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda10",
           "refId": "J",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda11",
           "refId": "K",
           "scenarioId": "random_walk"
         },
         {
+          "alias": "sda12",
           "refId": "L",
           "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda13",
+          "refId": "M",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda14",
+          "refId": "N",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda15",
+          "refId": "O",
+          "scenarioId": "random_walk"
+        },
+        {
+          "alias": "sda16",
+          "refId": "P",
+          "scenarioId": "random_walk"
         }
       ],
       "timeFrom": null,
       "timeShift": null,
-      "title": "Temperature",
+      "title": "",
       "type": "bargauge"
     }
   ],
-  "refresh": false,
+  "refresh": "10s",
   "schemaVersion": 18,
   "style": "dark",
-  "tags": ["gdev", "bargauge", "panel-demo"],
+  "tags": ["gdev", "demo"],
   "templating": {
     "list": []
   },
   "time": {
-    "from": "now-30m",
+    "from": "now-6h",
     "to": "now"
   },
   "timepicker": {
-    "refresh_intervals": ["1s", "5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
+    "refresh_intervals": ["2s", "5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
     "time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
   },
   "timezone": "",
-  "title": "Bar Gauge Animated Demo",
-  "uid": "k5IUwQeikaa",
-  "version": 1
+  "title": "Bar Gauge Demo",
+  "uid": "vmie2cmWz",
+  "version": 3
 }
diff --git a/devenv/dev-dashboards/panel-bargauge/gradient_demo.json b/devenv/dev-dashboards/panel-bargauge/gradient_demo.json
deleted file mode 100644
index ffe68eb7a86..00000000000
--- a/devenv/dev-dashboards/panel-bargauge/gradient_demo.json
+++ /dev/null
@@ -1,376 +0,0 @@
-{
-  "annotations": {
-    "list": [
-      {
-        "builtIn": 1,
-        "datasource": "-- Grafana --",
-        "enable": true,
-        "hide": true,
-        "iconColor": "rgba(0, 211, 255, 1)",
-        "name": "Annotations & Alerts",
-        "type": "dashboard"
-      }
-    ]
-  },
-  "editable": true,
-  "gnetId": null,
-  "graphTooltip": 0,
-  "links": [],
-  "panels": [
-    {
-      "gridPos": {
-        "h": 7,
-        "w": 18,
-        "x": 0,
-        "y": 0
-      },
-      "id": 7,
-      "links": [],
-      "options": {
-        "displayMode": "gradient",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "watt"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "orange",
-              "index": 1,
-              "value": 40
-            },
-            {
-              "color": "red",
-              "index": 2,
-              "value": 80
-            }
-          ],
-          "values": false
-        },
-        "orientation": "vertical"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "E",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "10003,33333"
-        },
-        {
-          "refId": "F",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "G",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "refId": "I",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "J",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "K",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "L",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "M",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "N",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "O",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "P",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "Q",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Usage",
-      "type": "bargauge"
-    },
-    {
-      "gridPos": {
-        "h": 20,
-        "w": 6,
-        "x": 18,
-        "y": 0
-      },
-      "id": 8,
-      "links": [],
-      "options": {
-        "displayMode": "gradient",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "watt"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "orange",
-              "index": 1,
-              "value": 65
-            },
-            {
-              "color": "red",
-              "index": 2,
-              "value": 95
-            }
-          ],
-          "values": false
-        },
-        "orientation": "horizontal"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "refId": "E",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "I",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "J",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "K",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "L",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "M",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "N",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "O",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "P",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "Q",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "F",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "G",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "R",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "S",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Usage",
-      "type": "bargauge"
-    },
-    {
-      "gridPos": {
-        "h": 13,
-        "w": 18,
-        "x": 0,
-        "y": 7
-      },
-      "id": 6,
-      "links": [],
-      "options": {
-        "displayMode": "gradient",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "celsius"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "blue",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "green",
-              "index": 1,
-              "value": 20
-            },
-            {
-              "color": "orange",
-              "index": 2,
-              "value": 40
-            },
-            {
-              "color": "red",
-              "index": 3,
-              "value": 80
-            }
-          ],
-          "values": false
-        },
-        "orientation": "horizontal"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "alias": "Inside",
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "alias": "Outhouse",
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Area B",
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Basement",
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Garage",
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Attic",
-          "refId": "E",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "F",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Temperature",
-      "type": "bargauge"
-    }
-  ],
-  "schemaVersion": 18,
-  "style": "dark",
-  "tags": ["gdev", "bargauge", "panel-demo"],
-  "templating": {
-    "list": []
-  },
-  "time": {
-    "from": "now-6h",
-    "to": "now"
-  },
-  "timepicker": {
-    "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
-    "time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
-  },
-  "timezone": "",
-  "title": "Bar Gauge Gradient Demo",
-  "uid": "RndRQw6mz",
-  "version": 1
-}
diff --git a/devenv/dev-dashboards/panel-bargauge/many_modes_demo.json b/devenv/dev-dashboards/panel-bargauge/many_modes_demo.json
deleted file mode 100644
index 8b498e78ef1..00000000000
--- a/devenv/dev-dashboards/panel-bargauge/many_modes_demo.json
+++ /dev/null
@@ -1,405 +0,0 @@
-{
-  "annotations": {
-    "list": [
-      {
-        "builtIn": 1,
-        "datasource": "-- Grafana --",
-        "enable": true,
-        "hide": true,
-        "iconColor": "rgba(0, 211, 255, 1)",
-        "name": "Annotations & Alerts",
-        "type": "dashboard"
-      }
-    ]
-  },
-  "editable": true,
-  "gnetId": null,
-  "graphTooltip": 0,
-  "links": [],
-  "panels": [
-    {
-      "gridPos": {
-        "h": 7,
-        "w": 22,
-        "x": 0,
-        "y": 0
-      },
-      "id": 7,
-      "links": [],
-      "options": {
-        "displayMode": "lcd",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "watt"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "orange",
-              "index": 1,
-              "value": 40
-            },
-            {
-              "color": "red",
-              "index": 2,
-              "value": 80
-            }
-          ],
-          "values": false
-        },
-        "orientation": "vertical"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "E",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "10003,33333"
-        },
-        {
-          "refId": "F",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "G",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "refId": "I",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "J",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "K",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "L",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "M",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "N",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "O",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "P",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "Q",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Usage",
-      "type": "bargauge"
-    },
-    {
-      "gridPos": {
-        "h": 20,
-        "w": 2,
-        "x": 22,
-        "y": 0
-      },
-      "id": 11,
-      "links": [],
-      "options": {
-        "displayMode": "lcd",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "percent"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "red",
-              "index": 1,
-              "value": 80
-            }
-          ],
-          "values": false
-        },
-        "orientation": "vertical"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "refId": "A",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Progress",
-      "type": "bargauge"
-    },
-    {
-      "gridPos": {
-        "h": 13,
-        "w": 10,
-        "x": 0,
-        "y": 7
-      },
-      "id": 6,
-      "links": [],
-      "options": {
-        "displayMode": "gradient",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "celsius"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "blue",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "green",
-              "index": 1,
-              "value": 20
-            },
-            {
-              "color": "orange",
-              "index": 2,
-              "value": 40
-            },
-            {
-              "color": "red",
-              "index": 3,
-              "value": 80
-            }
-          ],
-          "values": false
-        },
-        "orientation": "horizontal"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "alias": "Inside",
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "alias": "Outhouse",
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Area B",
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Basement",
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Garage",
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Attic",
-          "refId": "E",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "F",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Temperature",
-      "type": "bargauge"
-    },
-    {
-      "gridPos": {
-        "h": 13,
-        "w": 12,
-        "x": 10,
-        "y": 7
-      },
-      "id": 8,
-      "links": [],
-      "options": {
-        "displayMode": "basic",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "watt"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "purple",
-              "index": 1,
-              "value": 50
-            },
-            {
-              "color": "blue",
-              "index": 2,
-              "value": 70
-            }
-          ],
-          "values": false
-        },
-        "orientation": "horizontal"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "I",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "J",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "K",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "L",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "M",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "N",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "O",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "P",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "Q",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Usage",
-      "type": "bargauge"
-    }
-  ],
-  "schemaVersion": 18,
-  "style": "dark",
-  "tags": ["gdev", "bargauge", "panel-demo"],
-  "templating": {
-    "list": []
-  },
-  "time": {
-    "from": "now-6h",
-    "to": "now"
-  },
-  "timepicker": {
-    "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
-    "time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
-  },
-  "timezone": "",
-  "title": "Bar Gauge All Modes Demo",
-  "uid": "zt2f6NgZzaa",
-  "version": 1
-}
diff --git a/devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge.json b/devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge.json
new file mode 100644
index 00000000000..6230bb6c305
--- /dev/null
+++ b/devenv/dev-dashboards/panel-bargauge/panel_tests_bar_gauge.json
@@ -0,0 +1,829 @@
+{
+  "annotations": {
+    "list": [
+      {
+        "builtIn": 1,
+        "datasource": "-- Grafana --",
+        "enable": true,
+        "hide": true,
+        "iconColor": "rgba(0, 211, 255, 1)",
+        "name": "Annotations & Alerts",
+        "type": "dashboard"
+      }
+    ]
+  },
+  "editable": true,
+  "gnetId": null,
+  "graphTooltip": 0,
+  "links": [],
+  "panels": [
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 6,
+        "x": 0,
+        "y": 0
+      },
+      "id": 6,
+      "links": [],
+      "options": {
+        "displayMode": "gradient",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "celsius"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 20
+            },
+            {
+              "color": "orange",
+              "index": 2,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "alias": "Inside",
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "alias": "Outhouse",
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "F",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Title above bar",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 5,
+        "x": 6,
+        "y": 0
+      },
+      "id": 12,
+      "links": [],
+      "options": {
+        "displayMode": "gradient",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "celsius"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 20
+            },
+            {
+              "color": "orange",
+              "index": 2,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "alias": "Inside",
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "alias": "Outhouse",
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "F",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "C",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Title to left of bar",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 7,
+        "x": 11,
+        "y": 0
+      },
+      "id": 13,
+      "links": [],
+      "options": {
+        "displayMode": "basic",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "celsius"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 20
+            },
+            {
+              "color": "orange",
+              "index": 2,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "alias": "Inside",
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "alias": "Outhouse",
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "F",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "C",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Basic mode",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 6,
+        "x": 18,
+        "y": 0
+      },
+      "id": 14,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "celsius"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 20
+            },
+            {
+              "color": "orange",
+              "index": 2,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "alias": "Inside",
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "alias": "Outhouse",
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "F",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "C",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "LED",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 9,
+        "w": 11,
+        "x": 0,
+        "y": 7
+      },
+      "id": 7,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "watt"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "green",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "orange",
+              "index": 1,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 2,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "vertical"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "refId": "E",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "10003,33333"
+        },
+        {
+          "refId": "F",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "G",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "refId": "I",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "J",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "K",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "L",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "M",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "N",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "O",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "P",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "LED Vertical",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 9,
+        "w": 13,
+        "x": 11,
+        "y": 7
+      },
+      "id": 8,
+      "links": [],
+      "options": {
+        "displayMode": "basic",
+        "fieldOptions": {
+          "calcs": ["mean"],
+          "defaults": {
+            "decimals": null,
+            "max": 100,
+            "min": 0,
+            "unit": "watt"
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "green",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "purple",
+              "index": 1,
+              "value": 50
+            },
+            {
+              "color": "blue",
+              "index": 2,
+              "value": 70
+            }
+          ],
+          "values": false
+        },
+        "orientation": "vertical"
+      },
+      "pluginVersion": "6.2.0-pre",
+      "targets": [
+        {
+          "refId": "H",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "100,100,100"
+        },
+        {
+          "refId": "A",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "B",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "C",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "D",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "I",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "J",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "K",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "L",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "M",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "N",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "O",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "P",
+          "scenarioId": "random_walk"
+        },
+        {
+          "refId": "Q",
+          "scenarioId": "random_walk"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Basic vertical ",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 11,
+        "x": 0,
+        "y": 16
+      },
+      "id": 16,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["last"],
+          "defaults": {
+            "max": 100,
+            "min": 0
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "green",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "blue",
+              "index": 1,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 2,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "horizontal"
+      },
+      "pluginVersion": "6.3.0-pre",
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0,-100"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Negative value below min",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 3,
+        "x": 11,
+        "y": 16
+      },
+      "id": 17,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["last"],
+          "defaults": {
+            "max": 100,
+            "min": 0
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "green",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "blue",
+              "index": 1,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 2,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "vertical"
+      },
+      "pluginVersion": "6.3.0-pre",
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,0,-100"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Negative value below min",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 3,
+        "x": 14,
+        "y": 16
+      },
+      "id": 18,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["last"],
+          "defaults": {
+            "max": 100,
+            "min": -10
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "green",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "blue",
+              "index": 1,
+              "value": 40
+            },
+            {
+              "color": "red",
+              "index": 2,
+              "value": 80
+            }
+          ],
+          "values": false
+        },
+        "orientation": "vertical"
+      },
+      "pluginVersion": "6.3.0-pre",
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,6"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Positive value above min",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 3,
+        "x": 17,
+        "y": 16
+      },
+      "id": 19,
+      "links": [],
+      "options": {
+        "displayMode": "lcd",
+        "fieldOptions": {
+          "calcs": ["last"],
+          "defaults": {
+            "max": 35,
+            "min": -20
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 5
+            },
+            {
+              "color": "#EAB839",
+              "index": 2,
+              "value": 25
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 30
+            }
+          ],
+          "values": false
+        },
+        "orientation": "vertical"
+      },
+      "pluginVersion": "6.3.0-pre",
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "1,20,90,30,5,6"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Negative min ",
+      "type": "bargauge"
+    },
+    {
+      "gridPos": {
+        "h": 7,
+        "w": 4,
+        "x": 20,
+        "y": 16
+      },
+      "id": 20,
+      "links": [],
+      "options": {
+        "displayMode": "gradient",
+        "fieldOptions": {
+          "calcs": ["last"],
+          "defaults": {
+            "max": 35,
+            "min": -20
+          },
+          "mappings": [],
+          "override": {},
+          "thresholds": [
+            {
+              "color": "blue",
+              "index": 0,
+              "value": null
+            },
+            {
+              "color": "green",
+              "index": 1,
+              "value": 5
+            },
+            {
+              "color": "#EAB839",
+              "index": 2,
+              "value": 25
+            },
+            {
+              "color": "red",
+              "index": 3,
+              "value": 30
+            }
+          ],
+          "values": false
+        },
+        "orientation": "vertical"
+      },
+      "pluginVersion": "6.3.0-pre",
+      "targets": [
+        {
+          "refId": "A",
+          "scenarioId": "csv_metric_values",
+          "stringInput": "30,30"
+        }
+      ],
+      "timeFrom": null,
+      "timeShift": null,
+      "title": "Negative min",
+      "type": "bargauge"
+    }
+  ],
+  "schemaVersion": 18,
+  "style": "dark",
+  "tags": ["gdev", "panel-tests"],
+  "templating": {
+    "list": []
+  },
+  "time": {
+    "from": "now-6h",
+    "to": "now"
+  },
+  "timepicker": {
+    "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
+    "time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
+  },
+  "timezone": "",
+  "title": "Panel Tests - Bar Gauge",
+  "uid": "O6f11TZWk",
+  "version": 12
+}
diff --git a/devenv/dev-dashboards/panel-bargauge/retro_led_demo.json b/devenv/dev-dashboards/panel-bargauge/retro_led_demo.json
deleted file mode 100644
index 3fe8272c4df..00000000000
--- a/devenv/dev-dashboards/panel-bargauge/retro_led_demo.json
+++ /dev/null
@@ -1,400 +0,0 @@
-{
-  "annotations": {
-    "list": [
-      {
-        "builtIn": 1,
-        "datasource": "-- Grafana --",
-        "enable": true,
-        "hide": true,
-        "iconColor": "rgba(0, 211, 255, 1)",
-        "name": "Annotations & Alerts",
-        "type": "dashboard"
-      }
-    ]
-  },
-  "editable": true,
-  "gnetId": null,
-  "graphTooltip": 0,
-  "links": [],
-  "panels": [
-    {
-      "gridPos": {
-        "h": 8,
-        "w": 22,
-        "x": 0,
-        "y": 0
-      },
-      "id": 7,
-      "links": [],
-      "options": {
-        "displayMode": "lcd",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "watt"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "orange",
-              "index": 1,
-              "value": 40
-            },
-            {
-              "color": "red",
-              "index": 2,
-              "value": 80
-            }
-          ],
-          "values": false
-        },
-        "orientation": "vertical"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "E",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "10003,33333"
-        },
-        {
-          "refId": "F",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "G",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "refId": "I",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "J",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "K",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "L",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "M",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "N",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "O",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "P",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "Q",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Usage",
-      "type": "bargauge"
-    },
-    {
-      "gridPos": {
-        "h": 21,
-        "w": 2,
-        "x": 22,
-        "y": 0
-      },
-      "id": 11,
-      "links": [],
-      "options": {
-        "displayMode": "lcd",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "percent"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "red",
-              "index": 1,
-              "value": 80
-            }
-          ],
-          "values": false
-        },
-        "orientation": "vertical"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "refId": "A",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Progress",
-      "type": "bargauge"
-    },
-    {
-      "gridPos": {
-        "h": 13,
-        "w": 10,
-        "x": 0,
-        "y": 8
-      },
-      "id": 6,
-      "links": [],
-      "options": {
-        "displayMode": "lcd",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "celsius"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "orange",
-              "index": 1,
-              "value": 40
-            },
-            {
-              "color": "red",
-              "index": 2,
-              "value": 80
-            }
-          ],
-          "values": false
-        },
-        "orientation": "horizontal"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "alias": "Inside",
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "alias": "Outhouse",
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Area B",
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Basement",
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Garage",
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "alias": "Attic",
-          "refId": "E",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "F",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Temperature",
-      "type": "bargauge"
-    },
-    {
-      "gridPos": {
-        "h": 13,
-        "w": 12,
-        "x": 10,
-        "y": 8
-      },
-      "id": 8,
-      "links": [],
-      "options": {
-        "displayMode": "lcd",
-        "fieldOptions": {
-          "calcs": ["mean"],
-          "defaults": {
-            "decimals": null,
-            "max": 100,
-            "min": 0,
-            "unit": "watt"
-          },
-          "mappings": [],
-          "override": {},
-          "thresholds": [
-            {
-              "color": "green",
-              "index": 0,
-              "value": null
-            },
-            {
-              "color": "orange",
-              "index": 1,
-              "value": 85
-            },
-            {
-              "color": "red",
-              "index": 2,
-              "value": 95
-            }
-          ],
-          "values": false
-        },
-        "orientation": "horizontal"
-      },
-      "pluginVersion": "6.2.0-pre",
-      "targets": [
-        {
-          "refId": "H",
-          "scenarioId": "csv_metric_values",
-          "stringInput": "100,100,100"
-        },
-        {
-          "refId": "A",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "B",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "C",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "D",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "I",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "J",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "K",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "L",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "M",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "N",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "O",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "P",
-          "scenarioId": "random_walk"
-        },
-        {
-          "refId": "Q",
-          "scenarioId": "random_walk"
-        }
-      ],
-      "timeFrom": null,
-      "timeShift": null,
-      "title": "Usage",
-      "type": "bargauge"
-    }
-  ],
-  "schemaVersion": 18,
-  "style": "dark",
-  "tags": ["gdev", "bargauge", "panel-demo"],
-  "templating": {
-    "list": []
-  },
-  "time": {
-    "from": "now-6h",
-    "to": "now"
-  },
-  "timepicker": {
-    "refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"],
-    "time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
-  },
-  "timezone": "",
-  "title": "Bar Gauge LED Demo",
-  "uid": "0G3rbkqmkaa",
-  "version": 1
-}
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
index 620222315fa..0dea5e2c9b5 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { BarGauge, Props, getValueColor, getBasicAndGradientStyles, getBarGradient, getTitleStyles } from './BarGauge';
+import {
+  BarGauge,
+  Props,
+  getValueColor,
+  getBasicAndGradientStyles,
+  getBarGradient,
+  getTitleStyles,
+  getValuePercent,
+} from './BarGauge';
 import { VizOrientation, DisplayValue } from '../../types';
 import { getTheme } from '../../themes';
 
@@ -63,6 +71,24 @@ describe('BarGauge', () => {
     });
   });
 
+  describe('Get value percent', () => {
+    it('0 to 100 and value 40', () => {
+      expect(getValuePercent(40, 0, 100)).toEqual(0.4);
+    });
+
+    it('50 to 100 and value 75', () => {
+      expect(getValuePercent(75, 50, 100)).toEqual(0.5);
+    });
+
+    it('-30 to 30 and value 0', () => {
+      expect(getValuePercent(0, -30, 30)).toEqual(0.5);
+    });
+
+    it('-30 to 30 and value 30', () => {
+      expect(getValuePercent(30, -30, 30)).toEqual(1);
+    });
+  });
+
   describe('Vertical bar without title', () => {
     it('should not include title height in height', () => {
       const props = getProps({
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index 9c5bf656382..4351b6671d6 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -161,7 +161,7 @@ export class BarGauge extends PureComponent<Props> {
     const cells: JSX.Element[] = [];
 
     for (let i = 0; i < cellCount; i++) {
-      const currentValue = (valueRange / cellCount) * i;
+      const currentValue = minValue + (valueRange / cellCount) * i;
       const cellColor = this.getCellColor(currentValue);
       const cellStyles: CSSProperties = {
         borderRadius: '2px',
@@ -345,11 +345,6 @@ function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions {
     }
   }
 
-  // console.log('titleDim', titleDim);
-  // console.log('valueWidth', valueWidth);
-  // console.log('width', width);
-  // console.log('total', titleDim.width + maxBarWidth + valueWidth);
-
   return {
     valueWidth,
     valueHeight,
@@ -360,6 +355,10 @@ function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions {
   };
 }
 
+export function getValuePercent(value: number, minValue: number, maxValue: number): number {
+  return Math.min((value - minValue) / (maxValue - minValue), 1);
+}
+
 /**
  * Only exported to for unit test
  */
@@ -367,7 +366,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
   const { displayMode, maxValue, minValue, value } = props;
   const { valueWidth, valueHeight, maxBarHeight, maxBarWidth } = calculateBarAndValueDimensions(props);
 
-  const valuePercent = Math.min(value.numeric / (maxValue - minValue), 1);
+  const valuePercent = getValuePercent(value.numeric, minValue, maxValue);
   const valueColor = getValueColor(props);
   const valueStyles = getValueStyles(value.text, valueColor, valueWidth, valueHeight);
   const isBasic = displayMode === 'basic';
@@ -450,7 +449,7 @@ export function getBarGradient(props: Props, maxSize: number): string {
   for (let i = 0; i < thresholds.length; i++) {
     const threshold = thresholds[i];
     const color = getColorFromHexRgbOrName(threshold.color);
-    const valuePercent = Math.min(threshold.value / (maxValue - minValue), 1);
+    const valuePercent = getValuePercent(threshold.value, minValue, maxValue);
     const pos = valuePercent * maxSize;
     const offset = Math.round(pos - (pos - lastpos) / 2);
 
@@ -499,30 +498,3 @@ function getValueStyles(value: string, color: string, width: number, height: num
     fontSize: fontSize.toFixed(2) + 'px',
   };
 }
-
-// let canvasElement: HTMLCanvasElement | null = null;
-//
-// interface TextDimensions {
-//   width: number;
-//   height: number;
-// }
-//
-// /**
-//  * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
-//  *
-//  * @param {String} text The text to be rendered.
-//  * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
-//  *
-//  * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
-//  */
-// function getTextWidth(text: string): number {
-//   // re-use canvas object for better performance
-//   canvasElement = canvasElement || document.createElement('canvas');
-//   const context = canvasElement.getContext('2d');
-//   if (context) {
-//     context.font = 'normal 16px Roboto';
-//     const metrics = context.measureText(text);
-//     return metrics.width;
-//   }
-//   return 16;
-// }