Meter

a graphical meter

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

string

"start"

"center"

"end"

"stretch"

"baseline"

background

Background color.

string

"light-2"

object

{ color: "light-2", opacity: "medium" }

where opacity could be:

"weak"

"medium"

"strong"

number

boolean

color

The color of the value region. This is only valid when used with 'value'.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

direction

The direction of the Meter you want to display. Currently, direction works only when 'type' of Meter is 'bar'.

string

"horizontal"

"vertical"

gridArea

The name of the area to place this inside a parent Grid.

string

"a parent grid area name"

margin

The amount of margin around the component.

string

"none"

"xxsmall"

"xsmall"

"small"

"medium"

"large"

"xlarge"

object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    vertical: "...",
    horizontal: "...",
    top: "...",
    bottom: "...",
    left: "...",
    right: "..."
}

max

The maximum value for the Meter.

number

string

"25"

reverse

Whether the direction of the Meter should be reversed.

boolean

true

false

round

Whether to round the line ends.

boolean

true

false

size

The size of the Meter.

string

"xsmall"

"small"

"medium"

"large"

"xlarge"

"full"

"string"

thickness

The size of the Meter.

string

"xsmall"

"small"

"medium"

"large"

"xlarge"

"string"

type

The visual type of meter.

string

"bar"

"circle"

"pie"

"semicircle"

value

The numeric value to represent. Ignored when 'values' is specified.

number

values

Array of value objects describing the data.

array

'value' is the actual numeric value. 'label' is a text string describing it. 'color' indicates the color name to use. If not specified a default one will be chosen. 'onClick' will be called when the user clicks on it. Set 'highlight' to call attention to it. 'onHover' will be called with a boolean argument indicating when the user hovers onto or away from it.


[
  {
    value: 45,
    color: "graph-0",
    highlight: boolean,
    label: "string",
    onClick: () => {},
    onHover: (true) => {}
  }
]

Theme

global.colors

Color options.

object


{
  icon: { dark: '#f8f8f8', light: '#666666' },
  active: 'rgba(221, 221, 221, 0.5)',
  'background-back': { dark: '#33333308', light: '#EDEDED' },
  'background-front': { dark: '#444444', light: '#FFFFFF' },
  'background-contrast': { light: '#33333310', dark: '#FFFFFF18' },
  'active-background': 'background-contrast',
  'active-text': 'text-strong',
  black: '#000000',
  border: { dark: 'rgba(255, 255, 255, 0.33)', light: 'rgba(0, 0, 0, 0.33)' },
  brand: '#7D4CDB',
  control: { dark: 'accent-1', light: 'brand' },
  focus: '#6FFFB0',
  'graph-0': 'accent-1',
  'graph-1': 'neutral-1',
  'graph-2': 'neutral-2',
  'graph-3': 'neutral-3',
  'graph-4': 'neutral-4',
  placeholder: '#AAAAAA',
  selected: 'brand',
  text: { dark: '#f8f8f8', light: '#444444' },
  'text-strong': { dark: '#FFFFFF', light: '#000000' },
  'text-weak': { dark: '#CCCCCC', light: '#555555' },
  'text-xweak': { dark: '#BBBBBB', light: '#666666' },
  'selected-background': 'brand',
  'selected-text': 'text-strong',
  white: '#FFFFFF',
  'accent-1': '#6FFFB0',
  'accent-2': '#FD6FFF',
  'accent-3': '#81FCED',
  'accent-4': '#FFCA58',
  'dark-1': '#333333',
  'dark-2': '#555555',
  'dark-3': '#777777',
  'dark-4': '#999999',
  'dark-5': '#999999',
  'dark-6': '#999999',
  'light-1': '#F8F8F8',
  'light-2': '#F2F2F2',
  'light-3': '#EDEDED',
  'light-4': '#DADADA',
  'light-5': '#DADADA',
  'light-6': '#DADADA',
  'neutral-1': '#00873D',
  'neutral-2': '#3D138D',
  'neutral-3': '#00739D',
  'neutral-4': '#A2423D',
  'status-critical': '#FF4040',
  'status-error': '#FF4040',
  'status-warning': '#FFAA15',
  'status-ok': '#00C781',
  'status-unknown': '#CCCCCC',
  'status-disabled': '#CCCCCC',
  background: { light: '#ffffff', dark: '#000000' },
}

global.edgeSize

The border-radius of the styled Meter. thickness, height and width of the Bar Meter, height of the Circle Meter.

object


    {
      none: '0px',
      hair: '1px',
      xxsmall: '3px',
      xsmall: '6px',
      small: '12px',
      medium: '24px',
      large: '48px',
      xlarge: '96px',
      responsiveBreakpoint: 'small'
    }

global.opacity.medium

The opacity value used on the Meter color.

number

0.4

global.size

The possible sizes for Circle Meter width.

object

{
  xxsmall: "48px",
  xsmall: "96px",
  small: "192px",
  medium: "384px",
  large: "768px",
  xlarge: "1152px",
  xxlarge: "1536px",
  full: "100%",
}

meter.color

The color used for the Meter.

string

"graph-0"

meter.extend

Any additional style for Meter.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}