GraphNG: uPlot 1.5.2, dynamic stroke/fill, Flot-style hover points (#29866)

* upgrade uPlot 1.5.2 (dynamic stroke & fill, cursor.points API)

* flot-style hover points

* fix tests?

packages/grafana-ui/package.json

@@ -71,7 +71,7 @@
     "react-transition-group": "4.4.1",
     "slate": "0.47.8",
     "tinycolor2": "1.4.1",
-    "uplot": "1.5.1"
+    "uplot": "1.5.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "16.0.0",

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts

@@ -24,6 +24,12 @@ describe('UPlotConfigBuilder', () => {
             "drag": Object {
               "setScale": false,
             },
+            "points": Object {
+              "fill": [Function],
+              "size": [Function],
+              "stroke": [Function],
+              "width": [Function],
+            },
           },
           "scales": Object {
             "scale-x": Object {
@@ -76,6 +82,12 @@ describe('UPlotConfigBuilder', () => {
               "drag": Object {
                 "setScale": false,
               },
+              "points": Object {
+                "fill": [Function],
+                "size": [Function],
+                "stroke": [Function],
+                "width": [Function],
+              },
             },
             "scales": Object {
               "scale-y": Object {
@@ -109,6 +121,12 @@ describe('UPlotConfigBuilder', () => {
                 "drag": Object {
                   "setScale": false,
                 },
+                "points": Object {
+                  "fill": [Function],
+                  "size": [Function],
+                  "stroke": [Function],
+                  "width": [Function],
+                },
               },
               "scales": Object {
                 "scale-y": Object {
@@ -143,6 +161,12 @@ describe('UPlotConfigBuilder', () => {
                 "drag": Object {
                   "setScale": false,
                 },
+                "points": Object {
+                  "fill": [Function],
+                  "size": [Function],
+                  "stroke": [Function],
+                  "width": [Function],
+                },
               },
               "scales": Object {
                 "scale-y": Object {
@@ -210,6 +234,12 @@ describe('UPlotConfigBuilder', () => {
           "drag": Object {
             "setScale": false,
           },
+          "points": Object {
+            "fill": [Function],
+            "size": [Function],
+            "stroke": [Function],
+            "width": [Function],
+          },
         },
         "scales": Object {},
         "series": Array [
@@ -258,6 +288,12 @@ describe('UPlotConfigBuilder', () => {
           "drag": Object {
             "setScale": false,
           },
+          "points": Object {
+            "fill": [Function],
+            "size": [Function],
+            "stroke": [Function],
+            "width": [Function],
+          },
         },
         "scales": Object {},
         "series": Array [

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -72,8 +72,22 @@ export class UPlotConfigBuilder {
 
     config.cursor = this.cursor || {};
 
-    // prevent client-side zoom from triggering at the end of a selection
-    defaultsDeep(config.cursor, { drag: { setScale: false } });
+    const cursorDefaults: Cursor = {
+      // prevent client-side zoom from triggering at the end of a selection
+      drag: { setScale: false },
+      points: {
+        /*@ts-ignore*/
+        size: (u, seriesIdx) => u.series[seriesIdx].points.size * 2,
+        /*@ts-ignore*/
+        width: (u, seriesIdx, size) => size / 4,
+        /*@ts-ignore*/
+        stroke: (u, seriesIdx) => u.series[seriesIdx].points.stroke(u, seriesIdx) + '80',
+        /*@ts-ignore*/
+        fill: (u, seriesIdx) => u.series[seriesIdx].points.stroke(u, seriesIdx),
+      },
+    };
+
+    defaultsDeep(config.cursor, cursorDefaults);
 
     return config;
   }

yarn.lock

@@ -25703,10 +25703,10 @@ update-notifier@^2.5.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
-uplot@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.5.1.tgz#5d5e846f76af2fd913ae980c00249f953072ea90"
-  integrity sha512-R4SfT2P60jKlZdh+mW40U2WzrN7976XLKdA9IsZ1SWLgVryvrqx6uFY5lF+o7GsFUWIW0pJOzaE/03+1gzuhOw==
+uplot@1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.5.2.tgz#758e894b6e9c1d864b50a82aef50d392212d20de"
+  integrity sha512-GK/orAJjCz1thBiQUAzwCVur016z/0m/vmoxCU8kWXwbn4HnYBsKQ2Iixxj8fPy+uA9Pa7m99U+D/zXxMuo3gQ==
 
 upper-case@^1.1.1:
   version "1.1.3"