From 28426219ce01d6c5364ce8b5f38051ff9c2f9df2 Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Fri, 2 Sep 2022 09:26:04 -0500 Subject: [PATCH] TimeSeries: fix padding, force 0-100% y range when % stacked (#54197) --- .betterer.results | 3 +- .../GraphNG/__snapshots__/utils.test.ts.snap | 14 ++- .../src/components/TimeSeries/utils.ts | 1 + .../grafana-ui/src/components/uPlot/Plot.tsx | 4 +- .../uPlot/config/UPlotConfigBuilder.test.ts | 112 ++++++++++++++++-- .../uPlot/config/UPlotConfigBuilder.ts | 8 +- .../grafana-ui/src/components/uPlot/utils.ts | 1 + .../barchart/__snapshots__/utils.test.ts.snap | 112 ++++++++++++++++-- 8 files changed, 231 insertions(+), 24 deletions(-) diff --git a/.betterer.results b/.betterer.results index b9d843a59ff..d4ebc1c53e5 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1816,8 +1816,7 @@ exports[`better eslint`] = { ], "packages/grafana-ui/src/components/uPlot/Plot.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"] + [0, 0, 0, "Do not use any type assertions.", "1"] ], "packages/grafana-ui/src/components/uPlot/PlotLegend.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], diff --git a/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap b/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap index bb9819144ef..5bb603fa828 100644 --- a/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap +++ b/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap @@ -83,9 +83,21 @@ Object { ], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "__fixed/na-na/na-na/auto/linear/na": Object { "auto": true, diff --git a/packages/grafana-ui/src/components/TimeSeries/utils.ts b/packages/grafana-ui/src/components/TimeSeries/utils.ts index b077fca144a..d1640605a7b 100644 --- a/packages/grafana-ui/src/components/TimeSeries/utils.ts +++ b/packages/grafana-ui/src/components/TimeSeries/utils.ts @@ -222,6 +222,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ softMin: customConfig.axisSoftMin, softMax: customConfig.axisSoftMax, centeredZero: customConfig.axisCenteredZero, + range: customConfig.stacking?.mode === StackingMode.Percent ? [0, 1] : undefined, }, field ) diff --git a/packages/grafana-ui/src/components/uPlot/Plot.tsx b/packages/grafana-ui/src/components/uPlot/Plot.tsx index d54b7939c14..28cc4c7e728 100644 --- a/packages/grafana-ui/src/components/uPlot/Plot.tsx +++ b/packages/grafana-ui/src/components/uPlot/Plot.tsx @@ -2,7 +2,7 @@ import React, { Component, createRef } from 'react'; import uPlot, { AlignedData, Options } from 'uplot'; import { PlotProps } from './types'; -import { DEFAULT_PLOT_CONFIG, pluginLog } from './utils'; +import { pluginLog } from './utils'; function sameDims(prevProps: PlotProps, nextProps: PlotProps) { return nextProps.width === prevProps.width && nextProps.height === prevProps.height; @@ -65,10 +65,8 @@ export class UPlotChart extends Component { }); const config: Options = { - ...DEFAULT_PLOT_CONFIG, width: this.props.width, height: this.props.height, - ms: 1 as 1, ...this.props.config.getConfig(), }; diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts index a2c6f852117..ee182713179 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts @@ -37,9 +37,21 @@ describe('UPlotConfigBuilder', () => { "width": [Function], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object {}, "select": undefined, "series": Array [ @@ -88,9 +100,21 @@ describe('UPlotConfigBuilder', () => { "width": [Function], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "scale-x": Object { "auto": false, @@ -168,9 +192,21 @@ describe('UPlotConfigBuilder', () => { "width": [Function], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "scale-y": Object { "auto": true, @@ -221,9 +257,21 @@ describe('UPlotConfigBuilder', () => { "width": [Function], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "scale-y": Object { "auto": true, @@ -275,9 +323,21 @@ describe('UPlotConfigBuilder', () => { "width": [Function], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "scale-y": Object { "auto": true, @@ -394,9 +454,21 @@ describe('UPlotConfigBuilder', () => { "width": [Function], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object {}, "select": undefined, "series": Array [ @@ -513,9 +585,21 @@ describe('UPlotConfigBuilder', () => { "width": [Function], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object {}, "select": undefined, "series": Array [ @@ -628,9 +712,21 @@ describe('UPlotConfigBuilder', () => { "width": [Function], }, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object {}, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object {}, "select": undefined, "series": Array [ diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts index 034b8eae90e..ab9b722cc1f 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts @@ -14,7 +14,7 @@ import { import { AxisPlacement } from '@grafana/schema'; import { FacetedData, PlotConfig, PlotTooltipInterpolator } from '../types'; -import { getStackingBands, pluginLog, StackingGroup } from '../utils'; +import { DEFAULT_PLOT_CONFIG, getStackingBands, pluginLog, StackingGroup } from '../utils'; import { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder'; import { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder'; @@ -191,6 +191,7 @@ export class UPlotConfigBuilder { getConfig() { const config: PlotConfig = { + ...DEFAULT_PLOT_CONFIG, mode: this.mode, series: [ this.mode === 2 @@ -238,7 +239,10 @@ export class UPlotConfigBuilder { ); config.tzDate = this.tzDate; - config.padding = this.padding; + + if (Array.isArray(this.padding)) { + config.padding = this.padding; + } if (this.stackingGroups.length) { this.stackingGroups.forEach((group) => { diff --git a/packages/grafana-ui/src/components/uPlot/utils.ts b/packages/grafana-ui/src/components/uPlot/utils.ts index 6684d0e4952..5e0253fb0d2 100644 --- a/packages/grafana-ui/src/components/uPlot/utils.ts +++ b/packages/grafana-ui/src/components/uPlot/utils.ts @@ -20,6 +20,7 @@ const paddingSide: PaddingSide = (u, side, sidesWithAxes) => { }; export const DEFAULT_PLOT_CONFIG: Partial = { + ms: 1, focus: { alpha: 1, }, diff --git a/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap b/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap index 2410f353ef2..b02536f380b 100644 --- a/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap +++ b/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap @@ -78,6 +78,9 @@ Object { "x": false, "y": false, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object { "draw": Array [ [Function], @@ -89,8 +92,17 @@ Object { [Function], ], }, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "m/s": Object { "auto": true, @@ -217,6 +229,9 @@ Object { "x": false, "y": false, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object { "draw": Array [ [Function], @@ -228,8 +243,17 @@ Object { [Function], ], }, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "m/s": Object { "auto": true, @@ -356,6 +380,9 @@ Object { "x": false, "y": false, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object { "draw": Array [ [Function], @@ -367,8 +394,17 @@ Object { [Function], ], }, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "m/s": Object { "auto": true, @@ -495,6 +531,9 @@ Object { "x": false, "y": false, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object { "draw": Array [ [Function], @@ -506,8 +545,17 @@ Object { [Function], ], }, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "m/s": Object { "auto": true, @@ -634,6 +682,9 @@ Object { "x": false, "y": false, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object { "draw": Array [ [Function], @@ -645,8 +696,17 @@ Object { [Function], ], }, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "m/s": Object { "auto": true, @@ -773,6 +833,9 @@ Object { "x": false, "y": false, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object { "draw": Array [ [Function], @@ -784,8 +847,17 @@ Object { [Function], ], }, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "m/s": Object { "auto": true, @@ -912,6 +984,9 @@ Object { "x": false, "y": false, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object { "draw": Array [ [Function], @@ -923,8 +998,17 @@ Object { [Function], ], }, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "m/s": Object { "auto": true, @@ -1051,6 +1135,9 @@ Object { "x": false, "y": false, }, + "focus": Object { + "alpha": 1, + }, "hooks": Object { "draw": Array [ [Function], @@ -1062,8 +1149,17 @@ Object { [Function], ], }, + "legend": Object { + "show": false, + }, "mode": 1, - "padding": undefined, + "ms": 1, + "padding": Array [ + [Function], + [Function], + [Function], + [Function], + ], "scales": Object { "m/s": Object { "auto": true,