Statistic Component
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
Visible
| Prop | isVisible |
|---|---|
| Type | boolean |
| Default | true |
Whether or not this node is visible.
Enabled
| Prop | isEnabled |
|---|---|
| Type | boolean |
| Default | true |
Whether or not this node is enabled.
Tooltip
| Prop | tooltip |
|---|---|
| Type | string |
| Default | undefined |
The tooltip text to display when hovered or focused over this node.
Top
| Prop | top |
|---|---|
| Type | number |
| Default | 1 |
The position of the node from the top side of the grid (grid-row-start).
Left
| Prop | left |
|---|---|
| Type | number |
| Default | 1 |
The position of the node from the left side of the grid (grid-column-start).
Width
| Prop | 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 can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.
Min Width
| Prop | minWidth |
|---|---|
| Type | string |
| Default | undefined |
The minimum width of the node. When this node is in a grid layout, this property is ignored.
Max Width
| Prop | maxWidth |
|---|---|
| Type | string |
| Default | undefined |
The maximum width of the node. When this node is in a grid layout, this property is ignored.
Height
| Prop | 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 can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.
Min Height
| Prop | minHeight |
|---|---|
| Type | string |
| Default | undefined |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Max Height
| Prop | maxHeight |
|---|---|
| Type | string |
| Default | undefined |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Overflow
| Prop | 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 | 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 | 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 | styles |
|---|---|
| Type | string |
| Default | ::component { } |
Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.
Object Fit
| Prop | objectFit |
|---|---|
| Type | ObjectFit ('none' | 'contain' | 'cover' | 'fill' | 'scale-down') |
| Default | cover |
The strategy used to set how the content of a replaced element should be resized to fit its container.
Label
| Prop | label |
|---|---|
| Type | string |
| Default | Enter a label |
The label for the statistic, to be displayed alongside it.
Value
| Prop | value |
|---|---|
| Type | number |
| Default | 0 |
The value of the statistic to display without units.
Precision
| Prop | 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 | rounding |
|---|---|
| Type | Rounding ('floor' | 'ceil' | 'round' | 'trunc') |
| Default | round |
The rounding behavior of the statistic value.
Prefix
| Prop | prefix |
|---|---|
| Type | string |
| Default | undefined |
The text to display before the statistic.
Suffix
| Prop | suffix |
|---|---|
| Type | string |
| Default | undefined |
The text to display after the statistic. Useful for units.
Event Handlers
On Click
| Handler | statisticNode.onClick |
|---|
Called when the user clicks the node. Use this event to trigger downstream actions when this node is clicked.
On Double Click
| Handler | statisticNode.onDoubleClick |
|---|
Called when the user double clicks the node. Use this event to trigger downstream actions when this node is double clicked.
On Hover
| Handler | statisticNode.onHover |
|---|
Called when the user hovers on the node. Use this event to trigger downstream actions when this node is hovered.
On Leave
| Handler | statisticNode.onLeave |
|---|
Called when the user is not hovering over the node. Use this event to trigger downstream actions when this node is no longer hovered.