Graph: Fixed auto decimals in legend values (#16455)

Fixes #16448

(cherry picked from commit 52c3990412)

package.json

@@ -5,7 +5,7 @@
     "company": "Grafana Labs"
   },
   "name": "grafana",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "repository": {
     "type": "git",
     "url": "http://github.com/grafana/grafana.git"

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -1,6 +1,5 @@
 import React, { PureComponent } from 'react';
 import uniqueId from 'lodash/uniqueId';
-import { Input } from '@grafana/ui';
 
 export interface Props {
   label: string;
@@ -39,7 +38,7 @@ export class Switch extends PureComponent<Props, State> {
         <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
           {label && <div className={labelClassName}>{label}</div>}
           <div className={switchClassName}>
-            <Input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
+            <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
             <span className="gf-form-switch__slider" />
           </div>
         </label>

packages/grafana-ui/src/utils/valueFormats/valueFormats.test.ts

@@ -1,29 +1,38 @@
 import { toFixed, getValueFormat } from './valueFormats';
 
-describe('kbn.toFixed and negative decimals', () => {
-  it('should treat as zero decimals', () => {
-    const str = toFixed(186.123, -2);
-    expect(str).toBe('186');
+describe('valueFormats', () => {
+  describe('toFixed and negative decimals', () => {
+    it('should treat as zero decimals', () => {
+      const str = toFixed(186.123, -2);
+      expect(str).toBe('186');
+    });
   });
-});
 
-describe('kbn ms format when scaled decimals is null do not use it', () => {
-  it('should use specified decimals', () => {
-    const str = getValueFormat('ms')(10000086.123, 1, null);
-    expect(str).toBe('2.8 hour');
+  describe('ms format when scaled decimals is null do not use it', () => {
+    it('should use specified decimals', () => {
+      const str = getValueFormat('ms')(10000086.123, 1, null);
+      expect(str).toBe('2.8 hour');
+    });
   });
-});
 
-describe('kbn kbytes format when scaled decimals is null do not use it', () => {
-  it('should use specified decimals', () => {
-    const str = getValueFormat('kbytes')(10000000, 3, null);
-    expect(str).toBe('9.537 GiB');
+  describe('kbytes format when scaled decimals is null do not use it', () => {
+    it('should use specified decimals', () => {
+      const str = getValueFormat('kbytes')(10000000, 3, null);
+      expect(str).toBe('9.537 GiB');
+    });
   });
-});
 
-describe('kbn deckbytes format when scaled decimals is null do not use it', () => {
-  it('should use specified decimals', () => {
-    const str = getValueFormat('deckbytes')(10000000, 3, null);
-    expect(str).toBe('10.000 GB');
+  describe('deckbytes format when scaled decimals is null do not use it', () => {
+    it('should use specified decimals', () => {
+      const str = getValueFormat('deckbytes')(10000000, 3, null);
+      expect(str).toBe('10.000 GB');
+    });
+  });
+
+  describe('ms format when scaled decimals is 0', () => {
+    it('should use scaledDecimals and add 3', () => {
+      const str = getValueFormat('ms')(1200, 0, 0);
+      expect(str).toBe('1.200 s');
+    });
   });
 });

packages/grafana-ui/src/utils/valueFormats/valueFormats.ts

@@ -56,17 +56,15 @@ export function toFixed(value: number, decimals?: DecimalCount): string {
 
 export function toFixedScaled(
   value: number,
-  decimals?: DecimalCount,
-  scaledDecimals?: DecimalCount,
-  additionalDecimals?: DecimalCount,
+  decimals: DecimalCount,
+  scaledDecimals: DecimalCount,
+  additionalDecimals: number,
   ext?: string
 ) {
-  if (scaledDecimals) {
-    if (additionalDecimals) {
-      return toFixed(value, scaledDecimals + additionalDecimals) + ext;
-    } else {
-      return toFixed(value, scaledDecimals) + ext;
-    }
+  if (scaledDecimals === null || scaledDecimals === undefined) {
+    return toFixed(value, decimals) + ext;
+  } else {
+    return toFixed(value, scaledDecimals + additionalDecimals) + ext;
   }
 
   return toFixed(value, decimals) + ext;

public/app/plugins/panel/singlestat/module.ts

@@ -191,7 +191,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       data.value = 0;
       data.valueRounded = 0;
     } else {
-      const decimalInfo = getDecimalsForValue(data.value);
+      const decimalInfo = getDecimalsForValue(data.value, this.panel.decimals);
       const formatFunc = getValueFormat(this.panel.format);
 
       data.valueFormatted = formatFunc(
@@ -199,7 +199,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         decimalInfo.decimals,
         decimalInfo.scaledDecimals
       );
-      data.valueRounded = kbn.roundValue(data.value, this.panel.decimals || 0);
+      data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
     }
 
     this.setValueMapping(data);
@@ -279,17 +279,15 @@ class SingleStatCtrl extends MetricsPanelCtrl {
         data.value = this.series[0].stats[this.panel.valueName];
         data.flotpairs = this.series[0].flotpairs;
 
-        let decimals = this.panel.decimals;
-        let scaledDecimals = 0;
+        const decimalInfo = getDecimalsForValue(data.value, this.panel.decimals);
 
-        if (!this.panel.decimals) {
-          const decimalInfo = getDecimalsForValue(data.value);
-          decimals = decimalInfo.decimals;
-          scaledDecimals = decimalInfo.scaledDecimals;
-        }
-
-        data.valueFormatted = formatFunc(data.value, decimals, scaledDecimals, this.dashboard.isTimezoneUtc());
-        data.valueRounded = kbn.roundValue(data.value, decimals);
+        data.valueFormatted = formatFunc(
+          data.value,
+          decimalInfo.decimals,
+          decimalInfo.scaledDecimals,
+          this.dashboard.isTimezoneUtc()
+        );
+        data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
       }
 
       // Add $__name variable for using in prefix or postfix

public/sass/components/_panel_graph.scss

@@ -120,6 +120,10 @@
 
 // fix for phantomjs
 .body--phantomjs {
+  .graph-panel {
+    display: -webkit-box;
+  }
+
   .graph-panel--legend-right {
     .graph-legend {
       display: block;