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

}

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"

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": "accent-1",
    "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)",
  "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",
  "placeholder": "#AAAAAA",
  "selected": "brand",
  "text": {
    "dark": "#f8f8f8",
    "light": "#444444"
  },
  "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.

"accent-1"

meter.extend

Any additional style for Meter.

"any CSS"

(props) => {}