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', ... | - |