Added basic tests

packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx

@@ -36,8 +36,8 @@ BarGaugeStories.add('Vertical, with basic thresholds', () => {
   } = getKnobs();
 
   return renderComponentWithTheme(BarGauge, {
-    width: 300,
+    width: 200,
-    height: 600,
+    height: 400,
     value: value,
     minValue: minValue,
     maxValue: maxValue,
@@ -46,7 +46,7 @@ BarGaugeStories.add('Vertical, with basic thresholds', () => {
     postfix: '',
     decimals: decimals,
     thresholds: [
-      { index: 0, value: null, color: 'green' },
+      { index: 0, value: -Infinity, color: 'green' },
       { index: 1, value: threshold1Value, color: threshold1Color },
       { index: 1, value: threshold2Value, color: threshold2Color },
     ],

packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { BarGauge, Props } from './BarGauge';
+import { getTheme } from '../../themes';
+
+jest.mock('jquery', () => ({
+  plot: jest.fn(),
+}));
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    maxValue: 100,
+    valueMappings: [],
+    minValue: 0,
+    prefix: '',
+    suffix: '',
+    thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }],
+    unit: 'none',
+    height: 300,
+    width: 300,
+    value: 25,
+    decimals: 0,
+    theme: getTheme(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<BarGauge {...props} />);
+  const instance = wrapper.instance() as BarGauge;
+
+  return {
+    instance,
+    wrapper,
+  };
+};
+
+describe('Get font color', () => {
+  it('should get first threshold color when only one threshold', () => {
+    const { instance } = setup({ thresholds: [{ index: 0, value: -Infinity, color: '#7EB26D' }] });
+
+    expect(instance.getColors().value).toEqual('#7EB26D');
+  });
+
+  it('should get the threshold color if value is same as a threshold', () => {
+    const { instance } = setup({
+      thresholds: [
+        { index: 2, value: 75, color: '#6ED0E0' },
+        { index: 1, value: 10, color: '#EAB839' },
+        { index: 0, value: -Infinity, color: '#7EB26D' },
+      ],
+    });
+
+    expect(instance.getColors().value).toEqual('#EAB839');
+  });
+});
+
+describe('Render BarGauge with basic options', () => {
+  it('should render', () => {
+    const { wrapper } = setup();
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -43,7 +43,6 @@ export class BarGauge extends PureComponent<Props> {
     const { thresholds, theme, value } = this.props;
 
     const activeThreshold = getThresholdForValue(thresholds, value);
-    console.log(thresholds, value);
 
     if (activeThreshold !== null) {
       const color = getColorFromHexRgbOrName(activeThreshold.color, theme.type);
@@ -68,7 +67,7 @@ export class BarGauge extends PureComponent<Props> {
     const { width } = this.props;
 
     const guess = width / value.length;
-    const fontSize = Math.max(guess, 14);
+    const fontSize = Math.min(Math.max(guess, 14), 40);
 
     return {
       color: color,
@@ -82,7 +81,7 @@ export class BarGauge extends PureComponent<Props> {
     const numericValue = this.getNumericValue();
     const barMaxHeight = height * 0.8; // 20% for value & name
     const valuePercent = numericValue / (maxValue - minValue);
-    const barHeight = valuePercent * barMaxHeight;
+    const barHeight = Math.max(valuePercent * barMaxHeight, 0);
 
     const formatFunc = getValueFormat(unit);
     const valueFormatted = formatFunc(numericValue, decimals);

packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render BarGauge with basic options should render 1`] = `
+<div
+  className="bar-gauge"
+  style={
+    Object {
+      "height": "300px",
+      "width": "300px",
+    }
+  }
+>
+  <div
+    className="bar-gauge__value"
+    style={
+      Object {
+        "color": "#7EB26D",
+        "fontSize": "40px",
+      }
+    }
+  >
+    25
+  </div>
+  <div
+    style={
+      Object {
+        "backgroundColor": "rgba(126, 178, 109, 0.3)",
+        "borderTop": "1px solid #7EB26D",
+        "height": "60px",
+        "width": "300px",
+      }
+    }
+  />
+</div>
+`;

public/app/plugins/panel/bargauge/types.ts

@@ -18,6 +18,10 @@ export const PanelDefaults: BarGaugeOptions = {
   suffix: '',
   stat: 'avg',
   unit: 'none',
-  thresholds: [],
+  thresholds: [
+    { index: 0, value: -Infinity, color: 'green' },
+    { index: 1, value: 50, color: 'orange' },
+    { index: 2, value: 80, color: 'red' },
+  ],
   valueMappings: [],
 };