GraphNG: uPlot 1.6, hide "Show points" in Points mode, enable "dot" lineStyle (#30263)

devenv/dev-dashboards/panel-graph/graph-ng.json

@@ -1156,6 +1156,21 @@
                 "id": "custom.lineStyle"
                 "id": "custom.lineStyle"
               }
               }
             ]
             ]
+          },
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "F-series"
+            },
+            "properties": [
+              {
+                "id": "custom.lineStyle",
+                "value": {
+                  "dash": [0, 10],
+                  "fill": "dot"
+                }
+              }
+            ]
           }
           }
         ]
         ]
       },
       },
@@ -1311,6 +1326,32 @@
             "type": "signal"
             "type": "signal"
           },
           },
           "stringInput": "6,6"
           "stringInput": "6,6"
+        },
+        {
+          "points": [],
+          "stream": {
+            "type": "signal",
+            "speed": 250,
+            "spread": 3.5,
+            "noise": 2.2,
+            "bands": 1
+          },
+          "pulseWave": {
+            "timeStep": 60,
+            "onCount": 3,
+            "onValue": 2,
+            "offCount": 3,
+            "offValue": 1
+          },
+          "csvWave": {
+            "timeStep": 60,
+            "valuesCSV": "0,0,2,2,1,1"
+          },
+          "stringInput": "5,5",
+          "scenarioId": "csv_metric_values",
+          "lines": 10,
+          "refId": "F",
+          "alias": ""
         }
         }
       ],
       ],
       "timeFrom": null,
       "timeFrom": null,

packages/grafana-ui/package.json

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

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

@@ -52,7 +52,7 @@ export enum ScaleDistribution {
  * @alpha
  * @alpha
  */
  */
 export interface LineStyle {
 export interface LineStyle {
-  fill?: 'solid' | 'dash' | 'dot' | 'square'; // cap = 'butt' | 'round' | 'square'
+  fill?: 'solid' | 'dash' | 'dot' | 'square';
   dash?: number[];
   dash?: number[];
 }
 }
 
 

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

@@ -43,7 +43,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
       lineConfig.width = lineWidth;
       lineConfig.width = lineWidth;
       if (lineStyle && lineStyle.fill !== 'solid') {
       if (lineStyle && lineStyle.fill !== 'solid') {
         if (lineStyle.fill === 'dot') {
         if (lineStyle.fill === 'dot') {
-          // lineConfig.dashCap = 'round'; // square or butt
+          lineConfig.cap = 'round';
         }
         }
         lineConfig.dash = lineStyle.dash ?? [10, 10];
         lineConfig.dash = lineStyle.dash ?? [10, 10];
       }
       }
@@ -62,14 +62,18 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
     };
     };
 
 
     // we cannot set points.show property above (even to undefined) as that will clear uPlot's default auto behavior
     // we cannot set points.show property above (even to undefined) as that will clear uPlot's default auto behavior
-    if (showPoints === PointVisibility.Auto) {
-      if (drawStyle === DrawStyle.Bars) {
+    if (drawStyle === DrawStyle.Points) {
+      pointsConfig.points!.show = true;
+    } else {
+      if (showPoints === PointVisibility.Auto) {
+        if (drawStyle === DrawStyle.Bars) {
+          pointsConfig.points!.show = false;
+        }
+      } else if (showPoints === PointVisibility.Never) {
         pointsConfig.points!.show = false;
         pointsConfig.points!.show = false;
+      } else if (showPoints === PointVisibility.Always) {
+        pointsConfig.points!.show = true;
       }
       }
-    } else if (showPoints === PointVisibility.Never) {
-      pointsConfig.points!.show = false;
-    } else if (showPoints === PointVisibility.Always) {
-      pointsConfig.points!.show = true;
     }
     }
 
 
     return {
     return {

public/app/plugins/panel/timeseries/LineStyleEditor.tsx

@@ -13,10 +13,10 @@ const lineFillOptions: Array<SelectableValue<LineFill>> = [
     label: 'Dash',
     label: 'Dash',
     value: 'dash',
     value: 'dash',
   },
   },
-  // {
-  //   label: 'Dots',
-  //   value: 'dot',
-  // },
+  {
+    label: 'Dots',
+    value: 'dot',
+  },
 ];
 ];
 
 
 const dashOptions: Array<SelectableValue<string>> = [
 const dashOptions: Array<SelectableValue<string>> = [

public/app/plugins/panel/timeseries/config.ts

@@ -115,6 +115,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           settings: {
           settings: {
             options: graphFieldOptions.showPoints,
             options: graphFieldOptions.showPoints,
           },
           },
+          showIf: c => c.drawStyle !== DrawStyle.Points,
         })
         })
         .addSliderInput({
         .addSliderInput({
           path: 'pointSize',
           path: 'pointSize',

yarn.lock

@@ -25535,10 +25535,10 @@ update-notifier@^2.5.0:
     semver-diff "^2.0.0"
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
     xdg-basedir "^3.0.0"
 
 
-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==
+uplot@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/uplot/-/uplot-1.6.0.tgz#c91317d4defcf0406c9fb1cbbfcabc2dcaa78230"
+  integrity sha512-Xv25lGDHB5MdUwVwO8MDbhzyCrg6bgfiQwBBzLF9xhwyQStzTLzQlQarmYUkuzEjrHMRkH2vvLnK1XvjiNeDbw==
 
 
 upper-case@^1.1.1:
 upper-case@^1.1.1:
   version "1.1.3"
   version "1.1.3"