GraphNG: refactor by-value color schemes (#37670)

* GraphNG: account for top canvas padding in gradient gen for color scheme/thresholds-by-value

* Updated test dashboard

* Added fix for issue when scaleMin was same as threshold

* fixed firefox issue

* revert docs changes

* update gdev dash for easier comparisons & regression spotting

* refactor

* optimize gradient re-gen/re-use and color more tinycolor.setAlpha() -> alpha(). update uPlot to dev build.

* fix percentage steps

* implement % threshold region rendering

* crisp threshold line rendering

* simplify

* WIP: hoverpoint dynamic color interpolation

* fix hover point color interp

* re-use gradient gen to draw threshold areas

* re-implement by-value color scales

* tweak comment

* mimic tinycolor behavior in colorManipulator.alpha() for empty colors

* explicitly disable hover points for BarChart and Histogram

* reduce test failures and required changes to tests

* fix barchart tests

* uPlot 1.6.15

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap

@@ -63,6 +63,7 @@ Object {
     },
     "points": Object {
       "fill": [Function],
+      "show": false,
       "size": [Function],
       "stroke": [Function],
       "width": [Function],
@@ -191,6 +192,7 @@ Object {
     },
     "points": Object {
       "fill": [Function],
+      "show": false,
       "size": [Function],
       "stroke": [Function],
       "width": [Function],
@@ -319,6 +321,7 @@ Object {
     },
     "points": Object {
       "fill": [Function],
+      "show": false,
       "size": [Function],
       "stroke": [Function],
       "width": [Function],
@@ -447,6 +450,7 @@ Object {
     },
     "points": Object {
       "fill": [Function],
+      "show": false,
       "size": [Function],
       "stroke": [Function],
       "width": [Function],
@@ -575,6 +579,7 @@ Object {
     },
     "points": Object {
       "fill": [Function],
+      "show": false,
       "size": [Function],
       "stroke": [Function],
       "width": [Function],
@@ -703,6 +708,7 @@ Object {
     },
     "points": Object {
       "fill": [Function],
+      "show": false,
       "size": [Function],
       "stroke": [Function],
       "width": [Function],
@@ -831,6 +837,7 @@ Object {
     },
     "points": Object {
       "fill": [Function],
+      "show": false,
       "size": [Function],
       "stroke": [Function],
       "width": [Function],
@@ -959,6 +966,7 @@ Object {
     },
     "points": Object {
       "fill": [Function],
+      "show": false,
       "size": [Function],
       "stroke": [Function],
       "width": [Function],

public/app/plugins/panel/barchart/bars.ts

@@ -324,6 +324,7 @@ export function getConfig(opts: BarsOptions, theme: GrafanaTheme2) {
     cursor: {
       x: false,
       y: false,
+      points: { show: false },
     },
     // scale & axis opts
     xValues,

public/app/plugins/panel/histogram/Histogram.tsx

@@ -146,6 +146,7 @@ const prepConfig = (frame: DataFrame, theme: GrafanaTheme2) => {
   });
 
   builder.setCursor({
+    points: { show: false },
     drag: {
       x: true,
       y: false,