Began experimenting with a bar gauge

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

@@ -0,0 +1,59 @@
+// Library
+import React, { PureComponent } from 'react';
+
+// Utils
+import { getValueFormat } from '../../utils';
+
+// Types
+import { Themeable, TimeSeriesValue } from '../../types';
+
+export interface Props extends Themeable {
+  height: number;
+  unit: string;
+  width: number;
+  value: TimeSeriesValue;
+  prefix: string;
+  suffix: string;
+  maxValue: number;
+  minValue: number;
+}
+
+export class BarGauge extends PureComponent<Props> {
+  static defaultProps = {
+    maxValue: 100,
+    minValue: 0,
+    unit: 'none',
+  };
+
+  getNumericValue(): number {
+    if (Number.isFinite(this.props.value as number)) {
+      return this.props.value as number;
+    }
+    return 0;
+  }
+
+  render() {
+    const { height, width, maxValue, minValue, unit } = this.props;
+
+    const numericValue = this.getNumericValue();
+    const barMaxHeight = height * 0.8; // 20% for value & name
+    const valuePercent = numericValue / (maxValue - minValue);
+    const barHeight = valuePercent * barMaxHeight;
+
+    const formatFunc = getValueFormat(unit);
+    const valueFormatted = formatFunc(numericValue);
+
+    return (
+      <div className="bar-gauge" style={{ width: `${width}px`, height: `${height}px` }}>
+        <div className="bar-gauge__value">{valueFormatted}</div>
+        <div
+          style={{
+            height: `${barHeight}px`,
+            width: `${width}px`,
+            backgroundColor: 'rgba(200,0,0,0.3)',
+          }}
+        />
+      </div>
+    );
+  }
+}

packages/grafana-ui/src/components/BarGauge/_BarGauge.scss

@@ -0,0 +1,9 @@
+.bar-gauge {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.bar-gauge__value {
+  text-align: center;
+}

packages/grafana-ui/src/components/index.scss

@@ -9,3 +9,4 @@
 @import 'ValueMappingsEditor/ValueMappingsEditor';
 @import 'EmptySearchResult/EmptySearchResult';
 @import 'FormField/FormField';
+@import 'BarGauge/BarGauge';

packages/grafana-ui/src/components/index.ts

@@ -17,10 +17,13 @@ export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
 export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
-export { Graph } from './Graph/Graph';
 export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
 export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
 export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
-export { Gauge } from './Gauge/Gauge';
 export { Switch } from './Switch/Switch';
 export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
+
+// Visualizations
+export { Gauge } from './Gauge/Gauge';
+export { Graph } from './Graph/Graph';
+export { BarGauge } from './BarGauge/BarGauge';