GraphNG: fix bars migration and support color and linewidth (#29697)

public/app/plugins/panel/graph3/__snapshots__/migrations.test.ts.snap

@@ -35,7 +35,8 @@ Object {
         "drawStyle": "line",
         "fillOpacity": 0.5,
         "lineInterpolation": "stepAfter",
-        "pointSize": 2,
+        "lineWidth": 1,
+        "pointSize": 6,
         "showPoints": "never",
         "spanNulls": true,
       },
@@ -58,6 +59,54 @@ Object {
 }
 `;
 
+exports[`Graph Migrations stepped line 1`] = `
+Object {
+  "fieldConfig": Object {
+    "defaults": Object {
+      "custom": Object {
+        "axisPlacement": "auto",
+        "drawStyle": "line",
+        "fillOpacity": 0.5,
+        "lineInterpolation": "stepAfter",
+        "lineWidth": 5,
+        "pointSize": 6,
+        "showPoints": "never",
+        "spanNulls": true,
+      },
+      "nullValueMode": "null",
+      "unit": "short",
+    },
+    "overrides": Array [
+      Object {
+        "matcher": Object {
+          "id": "byName",
+          "options": "A-series",
+        },
+        "properties": Array [
+          Object {
+            "id": "color",
+            "value": Object {
+              "fixedColor": "red",
+              "mode": "fixed",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  "options": Object {
+    "graph": Object {},
+    "legend": Object {
+      "displayMode": "list",
+      "placement": "bottom",
+    },
+    "tooltipOptions": Object {
+      "mode": "single",
+    },
+  },
+}
+`;
+
 exports[`Graph Migrations twoYAxis 1`] = `
 Object {
   "fieldConfig": Object {
@@ -67,7 +116,8 @@ Object {
         "axisPlacement": "auto",
         "drawStyle": "line",
         "fillOpacity": 0.1,
-        "pointSize": 2,
+        "lineWidth": 1,
+        "pointSize": 6,
         "showPoints": "never",
         "spanNulls": true,
       },

public/app/plugins/panel/graph3/migrations.test.ts

@@ -30,6 +30,15 @@ describe('Graph Migrations', () => {
     panel.options = graphPanelChangedHandler(panel, 'graph', old);
     expect(panel).toMatchSnapshot();
   });
+
+  it('stepped line', () => {
+    const old: any = {
+      angular: stepedColordLine,
+    };
+    const panel = {} as PanelModel;
+    panel.options = graphPanelChangedHandler(panel, 'graph', old);
+    expect(panel).toMatchSnapshot();
+  });
 });
 
 const stairscase = {
@@ -201,3 +210,96 @@ const twoYAxis = {
   timeShift: null,
   datasource: null,
 };
+
+const stepedColordLine = {
+  aliasColors: {
+    'A-series': 'red',
+  },
+  dashLength: 10,
+  fieldConfig: {
+    defaults: {
+      custom: {},
+    },
+    overrides: [],
+  },
+  fill: 5,
+  gridPos: {
+    h: 9,
+    w: 12,
+    x: 0,
+    y: 0,
+  },
+  id: 2,
+  legend: {
+    avg: false,
+    current: false,
+    max: false,
+    min: false,
+    show: true,
+    total: false,
+    values: false,
+  },
+  lines: true,
+  linewidth: 5,
+  maxDataPoints: 20,
+  nullPointMode: 'null',
+  options: {
+    alertThreshold: true,
+  },
+  pluginVersion: '7.4.0-pre',
+  pointradius: 2,
+  renderer: 'flot',
+  seriesOverrides: [],
+  spaceLength: 10,
+  steppedLine: true,
+  thresholds: [],
+  timeRegions: [],
+  title: 'Panel Title',
+  tooltip: {
+    shared: true,
+    sort: 0,
+    value_type: 'individual',
+  },
+  type: 'graph',
+  xaxis: {
+    buckets: null,
+    mode: 'time',
+    name: null,
+    show: true,
+    values: [],
+  },
+  yaxes: [
+    {
+      $$hashKey: 'object:38',
+      format: 'short',
+      label: null,
+      logBase: 1,
+      max: null,
+      min: null,
+      show: true,
+    },
+    {
+      $$hashKey: 'object:39',
+      format: 'short',
+      label: null,
+      logBase: 1,
+      max: null,
+      min: null,
+      show: true,
+    },
+  ],
+  yaxis: {
+    align: false,
+    alignLevel: null,
+  },
+  bars: false,
+  dashes: false,
+  fillGradient: 0,
+  hiddenSeries: false,
+  percentage: false,
+  points: false,
+  stack: false,
+  timeFrom: null,
+  timeShift: null,
+  datasource: null,
+};

public/app/plugins/panel/graph3/migrations.ts

@@ -7,6 +7,8 @@ import {
   ConfigOverrideRule,
   FieldMatcherID,
   DynamicConfigValue,
+  FieldConfigProperty,
+  FieldColorModeId,
 } from '@grafana/data';
 import { GraphFieldConfig, LegendDisplayMode } from '@grafana/ui';
 import { AxisPlacement, DrawStyle, LineInterpolation, PointVisibility } from '@grafana/ui/src/components/uPlot/config';
@@ -54,6 +56,30 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
   //     "linewidth": 2
   //   }
   // ],
+
+  if (angular.aliasColors) {
+    for (const alias of Object.keys(angular.aliasColors)) {
+      const color = angular.aliasColors[alias];
+      if (color) {
+        overrides.push({
+          matcher: {
+            id: FieldMatcherID.byName,
+            options: alias,
+          },
+          properties: [
+            {
+              id: FieldConfigProperty.Color,
+              value: {
+                mode: FieldColorModeId.Fixed,
+                fixedColor: color,
+              },
+            },
+          ],
+        });
+      }
+    }
+  }
+
   if (angular.seriesOverrides?.length) {
     for (const seriesOverride of angular.seriesOverrides) {
       if (!seriesOverride.alias) {
@@ -109,7 +135,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
               });
             }
             break;
-          case 'lineWidth':
+          case 'linewidth':
             rule.properties.push({
               id: 'custom.lineWidth',
               value: v,
@@ -118,7 +144,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
           case 'pointradius':
             rule.properties.push({
               id: 'custom.pointSize',
-              value: v,
+              value: 2 + v * 2,
             });
             break;
           default:
@@ -138,12 +164,11 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
   } else if (graph.drawStyle !== DrawStyle.Points) {
     graph.showPoints = PointVisibility.Never;
   }
-  if (graph.drawStyle === DrawStyle.Bars) {
-    graph.fillOpacity = 1.0; // bars were always
-  }
 
-  graph.lineWidth = angular.lineWidth;
-  graph.pointSize = angular.pointradius;
+  graph.lineWidth = angular.linewidth;
+  if (isNumber(angular.pointradius)) {
+    graph.pointSize = 2 + angular.pointradius * 2;
+  }
   if (isNumber(angular.fill)) {
     graph.fillOpacity = angular.fill / 10; // fill is 0-10
   }
@@ -151,6 +176,9 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
   if (angular.steppedLine) {
     graph.lineInterpolation = LineInterpolation.StepAfter;
   }
+  if (graph.drawStyle === DrawStyle.Bars) {
+    graph.fillOpacity = 1.0; // bars were always
+  }
   y1.custom = omitBy(graph, isNil);
   y1.nullValueMode = angular.nullPointMode as NullValueMode;