DataStat
components/data/Stat.vue
Large numeric statistic with label, formatted value, loading spinner, and optional health coloring.
Success Rate
99.7%
Requests
24K
Latency
components/data/Stat.vue
Usage
<DataStat
label = "—"
:val = "val"
size = "StatSizes.SMALL"
kind = "StatTypes.PERCENTAGE"
:showHealth = "false"
:isHealthy = "true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | String | '' | Stat label |
| val | [Number, null] | null | Numeric value (null shows spinner) |
| size | String | StatSizes.SMALL | SMALL or MED |
| kind | String | StatTypes.PERCENTAGE | PERCENTAGE, NUM_SHORT, or NUM_FULL |
| showHealth | Boolean | false | Enable health-based text color |
| isHealthy | Boolean | true | Healthy (green) or unhealthy (red) |