Metric display variants with average indicator.
Show simple Metrics Card
Show Bar Gauge Metrics Card with average indicator.
Show Metrics Card in a loading state.
Custom value element
MetricCard.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
title | Card/Metric Title | string | - | - |
value | Metric Value | number or React.ReactElement | - | - |
unit | Metric Unit | string | - | - |
width | Card With | string | - | 100% |
loading | Loading State | boolean | - | false |
... | native props | HTMLAttributes | 'id', className', ... | - |
MetricCard.MetricCardBarGauge.Props
[alias: MetricCard.BarGauge
]Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
value | Metric Value | number | - | - |
min | Max Value | number | - | 0 |
max | Min Value | number | - | 100 |
average | Average Value (for avg. indicator) | number | - | - |
color | Bar Gauge Color | string | - | theme.palette.success |
loading | Loading State | boolean | - | false |
... | native props | HTMLAttributes | 'id', className', ... | - |
MetricCard.MetricCardFooter.Props
[alias: MetricCard.Footer
]Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
value | Metric Value | number | - | - |
average | Average Value (for avg. indicator) | number | - | - |
unit | Metric Unit | string | - | - |
labelText | Optional Label Text | string | - | - |
loading | Loading State | boolean | - | false |
... | native props | HTMLAttributes | 'id', className', ... | - |