bar-gauge storybook

b34f2665 · Torkel Ödegaard · 843f8b04 · b34f2665 · b34f2665 · b34f2665
Commit b34f2665 authored Feb 15, 2019 by Torkel Ödegaard
10 changed files
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
+import { storiesOf } from '@storybook/react';
+import { number, text } from '@storybook/addon-knobs';
+import { BarGauge } from './BarGauge';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
+const getKnobs = () => {
+  return {
+    value: number('value', 70),
+    minValue: number('minValue', 0),
+    maxValue: number('maxValue', 100),
+    threshold1Value: number('threshold1Value', 40),
+    threshold1Color: text('threshold1Color', 'orange'),
+    threshold2Value: number('threshold2Value', 60),
+    threshold2Color: text('threshold2Color', 'red'),
+    unit: text('unit', 'ms'),
+    decimals: number('decimals', 1),
+  };
+};
+const BarGaugeStories = storiesOf('UI/BarGauge/BarGauge', module);
+BarGaugeStories.addDecorator(withCenteredStory);
+BarGaugeStories.add('Vertical, with basic thresholds', () => {
+  const {
+    value,
+    minValue,
+    maxValue,
+    threshold1Color,
+    threshold2Color,
+    threshold1Value,
+    threshold2Value,
+    unit,
+    decimals,
+  } = getKnobs();
+  return renderComponentWithTheme(BarGauge, {
+    width: 300,
+    height: 600,
+    value: value,
+    minValue: minValue,
+    maxValue: maxValue,
+    unit: unit,
+    prefix: '',
+    postfix: '',
+    decimals: decimals,
+    thresholds: [
+      { index: 0, value: null, color: 'green' },
+      { index: 1, value: threshold1Value, color: threshold1Color },
+      { index: 1, value: threshold2Value, color: threshold2Color },
+    ],
+  });
+});
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
 // Library
 import React, { PureComponent } from 'react';
+import tinycolor from 'tinycolor2';
 // Utils
-import { getValueFormat } from '../../utils';
+import { getColorFromHexRgbOrName, getValueFormat, getThresholdForValue } from '../../utils';
 // Types
-import { Themeable, TimeSeriesValue } from '../../types';
+import { Themeable, TimeSeriesValue, Threshold, ValueMapping } from '../../types';
 export interface Props extends Themeable {
  height: number;
  unit: string;
  width: number;
+  thresholds: Threshold[];
+  valueMappings: ValueMapping[];
  value: TimeSeriesValue;
-  prefix: string;
-  suffix: string;
  maxValue: number;
  minValue: number;
+  prefix?: string;
+  suffix?: string;
+  decimals?: number;
 }
 export class BarGauge extends PureComponent<Props> {
-  static defaultProps = {
+  static defaultProps: Partial<Props> = {
    maxValue: 100,
    minValue: 0,
+    value: 100,
    unit: 'none',
+    thresholds: [],
+    valueMappings: [],
  };
  getNumericValue(): number {
@@ -32,8 +39,45 @@ export class BarGauge extends PureComponent<Props> {
    return 0;
  }
+  getColors(): BarColors {
+    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);
+      return {
+        value: color,
+        border: color,
+        bar: tinycolor(color)
+          .setAlpha(0.3)
+          .toRgbString(),
+      };
+    }
+    return {
+      value: getColorFromHexRgbOrName('gray', theme.type),
+      bar: getColorFromHexRgbOrName('gray', theme.type),
+      border: getColorFromHexRgbOrName('gray', theme.type),
+    };
+  }
+  getValueStyles(value: string, color: string) {
+    const { width } = this.props;
+    const guess = width / value.length;
+    const fontSize = Math.max(guess, 14);
+    return {
+      color: color,
+      fontSize: fontSize + 'px',
+    };
+  }
  render() {
-    const { height, width, maxValue, minValue, unit } = this.props;
+    const { height, width, maxValue, minValue, unit, decimals } = this.props;
    const numericValue = this.getNumericValue();
    const barMaxHeight = height * 0.8; // 20% for value & name
@@ -41,19 +85,31 @@ export class BarGauge extends PureComponent<Props> {
    const barHeight = valuePercent * barMaxHeight;
    const formatFunc = getValueFormat(unit);
-    const valueFormatted = formatFunc(numericValue);
+    const valueFormatted = formatFunc(numericValue, decimals);
+    const colors = this.getColors();
+    const containerStyles = { width: `${width}px`, height: `${height}px` };
+    const valueStyles = this.getValueStyles(valueFormatted, colors.value);
+    const barStyles = {
+      height: `${barHeight}px`,
+      width: `${width}px`,
+      backgroundColor: colors.bar,
+      borderTop: `1px solid ${colors.border}`,
+    };
    return (
-      <div className="bar-gauge" style={{ width: `${width}px`, height: `${height}px` }}>
+      <div className="bar-gauge" style={containerStyles}>
-        <div className="bar-gauge__value">{valueFormatted}</div>
+        <div className="bar-gauge__value" style={valueStyles}>
-        <div
+          {valueFormatted}
-          style={{
+        </div>
-            height: `${barHeight}px`,
+        <div style={barStyles} />
-            width: `${width}px`,
-            backgroundColor: 'rgba(200,0,0,0.3)',
-          }}
-        />
      </div>
    );
  }
 }
+interface BarColors {
+  value: string;
+  bar: string;
+  border: string;
+}
--- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx
+++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { ValueMapping, Threshold, BasicGaugeColor, GrafanaThemeType } from '../../types';
+import { ValueMapping, Threshold, GrafanaThemeType } from '../../types';
 import { getMappedValue } from '../../utils/valueMappings';
-import { getColorFromHexRgbOrName, getValueFormat } from '../../utils';
+import { getColorFromHexRgbOrName, getValueFormat, getThresholdForValue } from '../../utils';
 import { Themeable } from '../../index';
-type TimeSeriesValue = string | number | null;
+type GaugeValue = string | number | null;
 export interface Props extends Themeable {
  decimals: number;
@@ -30,7 +30,7 @@ const FONT_SCALE = 1;
 export class Gauge extends PureComponent<Props> {
  canvasElement: any;
-  static defaultProps = {
+  static defaultProps: Partial<Props> = {
    maxValue: 100,
    valueMappings: [],
    minValue: 0,
@@ -41,7 +41,6 @@ export class Gauge extends PureComponent<Props> {
    thresholds: [],
    unit: 'none',
    stat: 'avg',
-    theme: GrafanaThemeType.Dark,
  };
  componentDidMount() {
@@ -52,7 +51,7 @@ export class Gauge extends PureComponent<Props> {
    this.draw();
  }
-  formatValue(value: TimeSeriesValue) {
+  formatValue(value: GaugeValue) {
    const { decimals, valueMappings, prefix, suffix, unit } = this.props;
    if (isNaN(value as number)) {
@@ -73,26 +72,16 @@ export class Gauge extends PureComponent<Props> {
    return `${prefix && prefix + ' '}${handleNoValueValue}${suffix && ' ' + suffix}`;
  }
-  getFontColor(value: TimeSeriesValue) {
+  getFontColor(value: GaugeValue): string {
    const { thresholds, theme } = this.props;
-    if (thresholds.length === 1) {
+    const activeThreshold = getThresholdForValue(thresholds, value);
-      return getColorFromHexRgbOrName(thresholds[0].color, theme.type);
-    }
-    const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0];
+    if (activeThreshold !== null) {
-    if (atThreshold) {
+      return getColorFromHexRgbOrName(activeThreshold.color, theme.type);
-      return getColorFromHexRgbOrName(atThreshold.color, theme.type);
    }
-    const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value);
+    return '';
-    if (belowThreshold.length > 0) {
-      const nearestThreshold = belowThreshold.sort((t1, t2) => t2.value - t1.value)[0];
-      return getColorFromHexRgbOrName(nearestThreshold.color, theme.type);
-    }
-    return BasicGaugeColor.Red;
  }
  getFormattedThresholds() {
@@ -199,5 +188,3 @@ export class Gauge extends PureComponent<Props> {
    );
  }
 }
-export default Gauge;
--- a/packages/grafana-ui/src/types/index.ts
+++ b/packages/grafana-ui/src/types/index.ts
@@ -4,3 +4,4 @@ export * from './panel';
 export * from './plugin';
 export * from './datasource';
 export * from './theme';
+export * from './threshold';
--- a/packages/grafana-ui/src/types/panel.ts
+++ b/packages/grafana-ui/src/types/panel.ts
@@ -38,17 +38,6 @@ export interface PanelMenuItem {
  subMenu?: PanelMenuItem[];
 }
-export interface Threshold {
-  index: number;
-  value: number;
-  color: string;
-}
-export enum BasicGaugeColor {
-  Green = '#299c46',
-  Red = '#d44a3a',
-}
 export enum MappingType {
  ValueToText = 1,
  RangeToText = 2,

--- a/packages/grafana-ui/src/types/threshold.ts
+++ b/packages/grafana-ui/src/types/threshold.ts
+export interface Threshold {
+  index: number;
+  value: number;
+  color: string;
+}
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -2,3 +2,4 @@ export * from './processTimeSeries';
 export * from './valueFormats/valueFormats';
 export * from './colors';
 export * from './namedColorsPalette';
+export * from './thresholds';
--- a/packages/grafana-ui/src/utils/thresholds.ts
+++ b/packages/grafana-ui/src/utils/thresholds.ts
+import { Threshold } from '../types';
+export function getThresholdForValue(
+  thresholds: Threshold[],
+  value: number | null | string | undefined
+): Threshold | null {
+  if (thresholds.length === 1) {
+    return thresholds[0];
+  }
+  const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0];
+  if (atThreshold) {
+    return atThreshold;
+  }
+  const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value);
+  if (belowThreshold.length > 0) {
+    const nearestThreshold = belowThreshold.sort((t1: Threshold, t2: Threshold) => t2.value - t1.value)[0];
+    return nearestThreshold;
+  }
+  return null;
+}
--- a/public/app/plugins/panel/bargauge/plugin.json
+++ b/public/app/plugins/panel/bargauge/plugin.json
@@ -2,6 +2,7 @@
  "type": "panel",
  "name": "Bar Gauge",
  "id": "bargauge",
+  "state": "alpha",
  "dataFormats": ["time_series"],

--- a/public/app/plugins/panel/bargauge/types.ts
+++ b/public/app/plugins/panel/bargauge/types.ts
+import { Threshold, ValueMapping } from '@grafana/ui';
 export interface BarGaugeOptions {
  minValue: number;
  maxValue: number;
@@ -5,6 +7,8 @@ export interface BarGaugeOptions {
  stat: string;
  suffix: string;
  unit: string;
+  valueMappings: ValueMapping[];
+  thresholds: Threshold[];
 }
 export const PanelDefaults: BarGaugeOptions = {
@@ -14,4 +18,6 @@ export const PanelDefaults: BarGaugeOptions = {
  suffix: '',
  stat: 'avg',
  unit: 'none',
+  thresholds: [],
+  valueMappings: [],
 };