Statistic Node

Statistics allow you to showcase an important number to your users.

Statistics can be rendered with arbitrary precision and include a prefix or suffix, such as for units.

Properties

Prop	`statisticNode.isVisible`
Type	`boolean`
Default	`{{true}}`

Prop	`statisticNode.isEnabled`
Type	`boolean`
Default	`{{true}}`

Tooltip

Prop	`statisticNode.tooltip`
Type	`string`
Default	`undefined`

The tooltip text to display when hovered or focused over this node.

Top

Prop	`statisticNode.top`
Type	`string`
Default	`1`

The position of the node from the top side of the grid (grid-row-start).

Left

Prop	`statisticNode.left`
Type	`string`
Default	`1`

The position of the node from the left side of the grid (grid-column-start).

Width

Prop	`statisticNode.width`
Type	`string`
Default	`76px`

The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4 will become grid-column-end: span 4). When this node is in a stack layout, the width must be specified using CSS units (e.g. 100px or 100%).

Min Width

Prop	`statisticNode.minWidth`
Type	`string`
Default	`none`

The minimum width of the node. When this node is in a grid layout, this property is ignored.

Max Width

Prop	`statisticNode.maxWidth`
Type	`string`
Default	`none`

The maximum width of the node. When this node is in a grid layout, this property is ignored.

Height

Prop	`statisticNode.height`
Type	`string`
Default	`100px`

The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4 will become grid-row-end: span 4). When this node is in a stack layout, the height must be specified using CSS units (e.g. 100px or 100%).

Min Height

Prop	`statisticNode.minHeight`
Type	`string`
Default	`none`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Max Height

Prop	`statisticNode.maxHeight`
Type	`string`
Default	`none`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Overflow

Prop	`statisticNode.overflow`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.

Overflow X

Prop	`statisticNode.overflowX`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the horizontal axis for content that is larger than its container.

Overflow Y

Prop	`statisticNode.overflowY`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the vertical axis for content that is larger than its container.

Custom Styles

Prop	`statisticNode.styles`
Type	`string`
Default	`element.styles { }`

Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.

Label

Prop	`statisticNode.label`
Type	`string`
Default	`Enter a label`

The label for the statistic, to be displayed alongside it.

Value

Prop	`statisticNode.value`
Type	`number`
Default	`0`

The value of the statistic to display without units.

Precision

Prop	`statisticNode.precision`
Type	`number`
Default	`2`

The precision to display the statistic at in terms of number of significant figures after the decimal point.

Rounding

Prop	`statisticNode.rounding`
Type	`Rounding ('floor' \| 'ceil' \| 'round' \| 'trunc')`
Default	`round`

The rounding behavior of the statistic value.

Prefix

Prop	`statisticNode.prefix`
Type	`string`
Default	`undefined`

The text to display before the statistic.

Suffix

Prop	`statisticNode.suffix`
Type	`string`
Default	`undefined`

The text to display after the statistic. Useful for units.