import { Meta, ArgTypes } from '@storybook/addon-docs/blocks'; import { BigValue } from './BigValue';

BigValue

Component for showing a value based on a DisplayValue.

Display properties

There are a few properties that will determine the look of the BigValue.

Justify mode

There are two modes for aligning text, auto and center.

Graph mode

You can control graph shown in BigValue with the GraphMode property. GraphMode.Area renders a graph in the behind the value. GrapMode.None will hide it.

Color mode

ColorMode controls which part of the component that should have the color from thresholds or field config, ColorMode.Background and ColorMode.Value.

Note, ColorMode.Value will only set the color for the value.

Text mode

There are four variants to render text:

• TextMode.Auto - Show value and name if there's more than on BigValue in the same pane.
• TextMode.Value - Show only the value.
• TextMode.ValueAndName - Show value and the name.
• TextMode.None - Do not show any value or name.

Example usage

An example usage is in the Stat panel.

import { DisplayValue } from '@grafana/data';
import {
  BigValue,
  BigValueColorMode,
  BigValueGraphMode,
  BigValueJustifyMode,
  BigValueTextMode,
  useTheme,
} from '@grafana/ui';

const bigValue: DisplayValue = {
  color: 'red',
  value: '5000',
  numeric: 5000,
  title: 'Volume',
};

return (
  <BigValue
    theme={useTheme()}
    justifyMode={BigValueJustifyMode.Auto}
    graphMode={BigValueGraphMode.Area}
    colorMode={BigValueColorMode.Value}
    textMode={BigValueTextMode.Auto}
    value={bigValue}
  />
);

Props