Sparkline: Guess decimals rather than going with 0 (#115246)

* Sparkline: Guess decimals rather than going with 0

* Update packages/grafana-ui/src/components/Sparkline/utils.test.ts

packages/grafana-ui/src/components/Sparkline/utils.test.ts

@@ -119,7 +119,14 @@ describe('Get y range', () => {
     values: [2, 1.999999999999999, 2.000000000000001, 2, 2],
     type: FieldType.number,
     config: {},
-    state: { range: { min: 1.999999999999999, max: 2.000000000000001, delta: 0 } },
+    state: { range: { min: 1.9999999999999999999, max: 2.000000000000000001, delta: 0 } },
+  };
+  const decimalsNotCloseYField: Field = {
+    name: 'y',
+    values: [2, 0.0094, 0.0053, 0.0078, 0.0061],
+    type: FieldType.number,
+    config: {},
+    state: { range: { min: 0.0053, max: 0.0094, delta: 0.0041 } },
   };
   const xField: Field = {
     name: 'x',
@@ -183,6 +190,11 @@ describe('Get y range', () => {
       field: decimalsCloseYField,
       expected: [2, 4],
     },
+    {
+      description: 'decimal values which are not close to equal should not be rounded out',
+      field: decimalsNotCloseYField,
+      expected: [0.0053, 0.0094],
+    },
   ])(`should return correct range for $description`, ({ field, expected }) => {
     const actual = getYRange(getAlignedFrame(field));
     expect(actual).toEqual(expected);

packages/grafana-ui/src/components/Sparkline/utils.ts

@@ -8,6 +8,7 @@ import {
   FieldType,
   getFieldColorModeForField,
   GrafanaTheme2,
+  guessDecimals,
   isLikelyAscendingVector,
   nullToValue,
   roundDecimals,
@@ -76,8 +77,6 @@ export function getYRange(alignedFrame: DataFrame): Range.MinMax {
   min = Math.min(min!, field.config.min ?? Infinity);
   max = Math.max(max!, field.config.max ?? -Infinity);
 
-  // console.log({ min, max });
-
   // if noValue is set, ensure that it is included in the range as well
   const noValue = +field.config?.noValue!;
   if (!Number.isNaN(noValue)) {
@@ -85,9 +84,11 @@ export function getYRange(alignedFrame: DataFrame): Range.MinMax {
     max = Math.max(max, noValue);
   }
 
+  const decimals = field.config.decimals ?? Math.max(guessDecimals(min), guessDecimals(max));
+
   // call roundDecimals to mirror what is going to eventually happen in uplot
-  let roundedMin = roundDecimals(min, field.config.decimals ?? 0);
-  let roundedMax = roundDecimals(max, field.config.decimals ?? 0);
+  let roundedMin = roundDecimals(min, decimals);
+  let roundedMax = roundDecimals(max, decimals);
 
   // if the rounded min and max are different,
   // we can return the real min and max.
@@ -102,11 +103,9 @@ export function getYRange(alignedFrame: DataFrame): Range.MinMax {
     roundedMax = 1;
   } else if (roundedMin < 0) {
     // both are negative
-    // max = 0;
     roundedMin *= 2;
   } else {
     // both are positive
-    // min = 0;
     roundedMax *= 2;
   }