Merge pull request #14725 from grafana/14719/gauge-issues

14719/gauge issues

public/app/plugins/panel/gauge/module.tsx

@@ -38,8 +38,8 @@ export const defaultProps = {
     showThresholdLabels: false,
     suffix: '',
     decimals: 0,
-    stat: '',
-    unit: '',
+    stat: 'avg',
+    unit: 'none',
     mappings: [],
     thresholds: [],
   },

public/app/viz/Gauge.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Gauge, Props } from './Gauge';
+import { BasicGaugeColor } from '../types';
+import { TimeSeriesVMs } from '@grafana/ui';
+
+jest.mock('jquery', () => ({
+  plot: jest.fn(),
+}));
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    baseColor: BasicGaugeColor.Green,
+    maxValue: 100,
+    mappings: [],
+    minValue: 0,
+    prefix: '',
+    showThresholdMarkers: true,
+    showThresholdLabels: false,
+    suffix: '',
+    thresholds: [],
+    unit: 'none',
+    stat: 'avg',
+    height: 300,
+    width: 300,
+    timeSeries: {} as TimeSeriesVMs,
+    decimals: 0,
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<Gauge {...props} />);
+  const instance = wrapper.instance() as Gauge;
+
+  return {
+    instance,
+    wrapper,
+  };
+};
+
+describe('Get font color', () => {
+  it('should get base color if no threshold', () => {
+    const { instance } = setup();
+
+    expect(instance.getFontColor(40)).toEqual(BasicGaugeColor.Green);
+  });
+
+  it('should be f2f2f2', () => {
+    const { instance } = setup({
+      thresholds: [{ value: 59, color: '#f2f2f2' }],
+    });
+
+    expect(instance.getFontColor(58)).toEqual('#f2f2f2');
+  });
+});

public/app/viz/Gauge.tsx

@@ -5,7 +5,7 @@ import { TimeSeriesVMs } from '@grafana/ui';
 import config from '../core/config';
 import kbn from '../core/utils/kbn';
 
-interface Props {
+export interface Props {
   baseColor: string;
   decimals: number;
   height: number;
@@ -96,12 +96,14 @@ export class Gauge extends PureComponent<Props> {
   getFontColor(value) {
     const { baseColor, maxValue, thresholds } = this.props;
 
-    const atThreshold = thresholds.filter(threshold => value <= threshold.value);
+    if (thresholds.length > 0) {
+      const atThreshold = thresholds.filter(threshold => value <= threshold.value);
 
-    if (atThreshold.length > 0) {
-      return atThreshold[0].color;
-    } else if (value <= maxValue) {
-      return BasicGaugeColor.Red;
+      if (atThreshold.length > 0) {
+        return atThreshold[0].color;
+      } else if (value <= maxValue) {
+        return BasicGaugeColor.Red;
+      }
     }
 
     return baseColor;