TimeSeries: Better y-axis ticks for IEC units (#59984)

packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap

@@ -12,6 +12,7 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": undefined,
       "scale": "x",
@@ -39,6 +40,7 @@ exports[`GraphNG utils preparePlotConfigBuilder 1`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": undefined,
       "scale": "__fixed/na-na/na-na/auto/linear/na",

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

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

@@ -114,6 +114,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
       formatValue,
       splits,
       values,
+      incrs,
       isTime,
       timeZone,
       theme,
@@ -175,6 +176,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
           return this.calculateSpace(self, axisIdx, scaleMin, scaleMax, plotDim);
         }),
       filter,
+      incrs,
     };
 
     if (border != null) {

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 "Inter", "Helvetica", "Arial", sans-serif",
             "labelGap": 8,

public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap

@@ -12,6 +12,7 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 1`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": 0,
       "scale": "x",
@@ -39,6 +40,7 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 1`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": -0,
       "scale": "m/s",
@@ -165,6 +167,7 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 2`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": 0,
       "scale": "x",
@@ -192,6 +195,7 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 2`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": -0,
       "scale": "m/s",
@@ -318,6 +322,7 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 3`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": -0,
       "scale": "x",
@@ -345,6 +350,7 @@ exports[`BarChart utils preparePlotConfigBuilder orientation 3`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": 0,
       "scale": "m/s",
@@ -471,6 +477,7 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 1`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": 0,
       "scale": "x",
@@ -498,6 +505,7 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 1`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": -0,
       "scale": "m/s",
@@ -624,6 +632,7 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 2`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": 0,
       "scale": "x",
@@ -651,6 +660,7 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 2`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": -0,
       "scale": "m/s",
@@ -777,6 +787,7 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 3`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": 0,
       "scale": "x",
@@ -804,6 +815,7 @@ exports[`BarChart utils preparePlotConfigBuilder stacking 3`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": -0,
       "scale": "m/s",
@@ -930,6 +942,7 @@ exports[`BarChart utils preparePlotConfigBuilder value visibility 1`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": 0,
       "scale": "x",
@@ -957,6 +970,7 @@ exports[`BarChart utils preparePlotConfigBuilder value visibility 1`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": -0,
       "scale": "m/s",
@@ -1083,6 +1097,7 @@ exports[`BarChart utils preparePlotConfigBuilder value visibility 2`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": 0,
       "scale": "x",
@@ -1110,6 +1125,7 @@ exports[`BarChart utils preparePlotConfigBuilder value visibility 2`] = `
         "stroke": "rgba(240, 250, 255, 0.09)",
         "width": 1,
       },
+      "incrs": undefined,
       "labelGap": 0,
       "rotate": -0,
       "scale": "m/s",