From 7974972d49c0abed885c9c72f0863b1dfc7ab947 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Tue, 8 Dec 2020 12:50:18 -0800 Subject: [PATCH] GraphNG: fix bars migration and support color and linewidth (#29697) --- .../__snapshots__/migrations.test.ts.snap | 54 +++++++++- .../plugins/panel/graph3/migrations.test.ts | 102 ++++++++++++++++++ public/app/plugins/panel/graph3/migrations.ts | 42 ++++++-- 3 files changed, 189 insertions(+), 9 deletions(-) diff --git a/public/app/plugins/panel/graph3/__snapshots__/migrations.test.ts.snap b/public/app/plugins/panel/graph3/__snapshots__/migrations.test.ts.snap index 81ff3500999..a430b0c1ebb 100644 --- a/public/app/plugins/panel/graph3/__snapshots__/migrations.test.ts.snap +++ b/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, }, diff --git a/public/app/plugins/panel/graph3/migrations.test.ts b/public/app/plugins/panel/graph3/migrations.test.ts index ddd9c0e3018..7987d7ed20f 100644 --- a/public/app/plugins/panel/graph3/migrations.test.ts +++ b/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, +}; diff --git a/public/app/plugins/panel/graph3/migrations.ts b/public/app/plugins/panel/graph3/migrations.ts index 79d8f2f15fc..a3725e3e2d5 100644 --- a/public/app/plugins/panel/graph3/migrations.ts +++ b/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;