Flo.w

# Gauge

<flow-gauge>
Reactive Stable

The gauge component displays a single reactive data value.

The gauge component wraps the data value component and adds an optional heading, units field and information popup dialog. Use gauges to build detail panels in your visualization, highlighting key metrics from your data.

Like the data value component, the gauge's value attribute should be set to a Flo.w reactive expression. The gauge will update when the expression result changes. Formatting of numeric values can be set using a D3 format string (opens new window). The value can also be interpreted as an icon name to produce graphical indicator gauges.

# Examples

# Layout

By default, a gauge is sized to fit its content. Gauges can be layed out in an information panel using CSS Flexbox (opens new window) or CSS Grid Layout (opens new window).

# Gauge Styling

Use CSS Custom Properties and CSS Parts to customize gauge style.

# Icon Gauges

Set format to icon to interpet the value property as an icon name. The icon name is also added as a CSS class to the gauge component to allow colouring of the gauge based on the icon displayed.

# Properties

Property Description Type Default
color The color of the gauge value. Colors are taken from the application palette. "danger" | "gray" | "primary" | "secondary" | "success" | "warning"
duration The transition duration in milliseconds for the animation between numeric values. Set to zero to disable animation. number 250
flowContext
flow-context		 The Flo.w context ID to use for application state. string 'default'
format The display format of the gauge value. Use a D3 format string for numeric values. Use `"icon"` to treat `value` as an icon name. string
heading The gauge heading text. string
icon Set to display an icon in the gauge heading. The property can be the name of a built-in icon, a URL to an SVG file, or an SVG data URI. string
units The units text to display under the gauge value. string
Reactive
value 		The gauge value specified as a Flo.w reactive expression. string

# Slots

Slot Description
info Content to place in the gauge's information dialog. Information button is added to the gauge. (optional)

# CSS Custom Properties

Name Description
--background-color The gauge background color (default: surface)
--color The gauge value color (default: text)
--flow-gauge-header-font-size The gauge header font size. (Default: 14px)
--flow-gauge-units-font-size The gauge units font size. (Default: 13px)
--flow-gauge-value-font-size The gauge value font size. (Default: 30px)
--header-color The gauge header text color (default: --color)
--header-icon-color The gauge header icon color (default: --header-color)
--info-button-color The info button color (default: --flow-color-step-400)
--units-color The gauge background color (default: --color)

# CSS Parts

Name Description
header The gauge header.
header-icon The gauge header icon.
info-button The gauge header info button.
units The gauge units.
value The gauge value.

← Icon →