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.

"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.

"start"
"center"
"end"
"stretch"

background

Background color
"string"
{
color:
"string,"
opacity:
"weak""medium""strong""number""boolean"
}

color

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

"string"

direction

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

"horizontal""vertical"

gridArea

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

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"
"small"
"medium"
"large"
"xlarge"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

max

The maximum value for the Meter.
number"string"

round

Whether to round the line ends
truefalse

size

The size of the Meter.
"xsmall""small""medium""large""xlarge""full""string"

thickness

The size of the Meter.
"xsmall""small""medium""large""xlarge""string"

type

The visual type of meter.
"bar""circle""pie"

value

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

values

Array of value objects describing the data. '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": 75}]
[
  {
    "value": 45,
    "color": "graph-0",
    "highlight": false,
    "label": "utilization",
    "onClick": "() => {}",
    "onHover": "(true) => {}"
  }
]

Theme

global.colors

Color options.
{
  "icon": {
    "0": "#",
    "1": "6",
    "2": "6",
    "3": "6",
    "4": "6",
    "5": "6",
    "6": "6",
    "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.

{
  "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.
0.4

global.size

The possible sizes for Circle Meter width.
{
  "xxsmall": "48px",
  "xsmall": "96px",
  "small": "192px",
  "medium": "384px",
  "large": "768px",
  "xlarge": "1152px",
  "xxlarge": "1536px",
  "full": "100%"
}

meter.color

The color used for the Meter.
"graph-0"

meter.extend

Any additional style for Meter.
"any CSS"
(props) => {}