From 4270f446643ee363e211a435f83855eabaaa7969 Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Fri, 9 Dec 2022 17:42:21 +0000 Subject: [PATCH] [v9.3.x] TimeSeries: Better y-axis ticks for IEC units (#60110) TimeSeries: Better y-axis ticks for IEC units (#59984) (cherry picked from commit 435ada45c53fdb1b93a97e88a9a99ebed6d6da8b) Co-authored-by: Leon Sorokin --- .../GraphNG/__snapshots__/utils.test.ts.snap | 2 + .../src/components/TimeSeries/utils.ts | 37 +++++++++++++++++++ .../uPlot/config/UPlotAxisBuilder.ts | 2 + .../uPlot/config/UPlotConfigBuilder.test.ts | 1 + .../barchart/__snapshots__/utils.test.ts.snap | 16 ++++++++ 5 files changed, 58 insertions(+) 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 05d9b60120e..dc91e8bd7aa 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 @@ -12,6 +12,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "x", @@ -39,6 +40,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "__fixed/na-na/na-na/auto/linear/na", diff --git a/packages/grafana-ui/src/components/TimeSeries/utils.ts b/packages/grafana-ui/src/components/TimeSeries/utils.ts index 2a9b134b11a..96dfada1e99 100644 --- a/packages/grafana-ui/src/components/TimeSeries/utils.ts +++ b/packages/grafana-ui/src/components/TimeSeries/utils.ts @@ -31,6 +31,36 @@ import { GraphGradientMode, } from '@grafana/schema'; +// unit lookup needed to determine if we want power-of-2 or power-of-10 axis ticks +// see categories.ts is @grafana/data +const IEC_UNITS = new Set([ + 'bytes', + 'bits', + 'kbytes', + 'mbytes', + 'gbytes', + 'tbytes', + 'pbytes', + 'binBps', + 'binbps', + 'KiBs', + 'Kibits', + 'MiBs', + 'Mibits', + 'GiBs', + 'Gibits', + 'TiBs', + 'Tibits', + 'PiBs', + 'Pibits', +]); + +const BIN_INCRS = Array(53); + +for (let i = 0; i < BIN_INCRS.length; i++) { + BIN_INCRS[i] = 2 ** i; +} + import { buildScaleKey } from '../GraphNG/utils'; import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConfigBuilder'; import { getScaleGradientFn } from '../uPlot/config/gradientFills'; @@ -272,6 +302,12 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ }; } + let incrs: uPlot.Axis.Incrs | undefined; + + if (IEC_UNITS.has(config.unit!)) { + incrs = BIN_INCRS; + } + builder.addAxis( tweakAxis( { @@ -284,6 +320,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ grid: { show: customConfig.axisGridShow }, decimals: field.config.decimals, distr: customConfig.scaleDistribution?.type, + incrs, ...axisColorOpts, }, field diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts index 5f894fa9a86..3fff07ecd41 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts @@ -114,6 +114,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder { formatValue, splits, values, + incrs, isTime, timeZone, theme, @@ -175,6 +176,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder { return this.calculateSpace(self, axisIdx, scaleMin, scaleMax, plotDim); }), filter, + incrs, }; if (border != null) { 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 a32fadd34d7..ebc7a6ec3cd 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts @@ -422,6 +422,7 @@ describe('UPlotConfigBuilder', () => { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "label": "test label", "labelFont": "12px \\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", "labelGap": 8, 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 eb7fa961463..9fe25473697 100644 --- a/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap +++ b/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap @@ -12,6 +12,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": -0, "scale": "x", @@ -39,6 +40,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "m/s", @@ -165,6 +167,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": -0, "scale": "x", @@ -192,6 +195,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "m/s", @@ -318,6 +322,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": -0, "scale": "x", @@ -345,6 +350,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "m/s", @@ -471,6 +477,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": -0, "scale": "x", @@ -498,6 +505,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "m/s", @@ -624,6 +632,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": -0, "scale": "x", @@ -651,6 +660,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "m/s", @@ -777,6 +787,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": -0, "scale": "x", @@ -804,6 +815,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "m/s", @@ -930,6 +942,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": -0, "scale": "x", @@ -957,6 +970,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "m/s", @@ -1083,6 +1097,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": -0, "scale": "x", @@ -1110,6 +1125,7 @@ Object { "stroke": "rgba(240, 250, 255, 0.09)", "width": 1, }, + "incrs": undefined, "labelGap": 0, "rotate": undefined, "scale": "m/s",