DataVal
components/data/Val.vue
Metric card with label, formatted value, inline slot, health coloring, and optional radio-button mode.
Success Rate
99.7
%
Requests
24K
Loading
components/data/Val.vue
Usage
<DataVal
label = "—"
:val = "val"
metric = "—"
size = "StatSizes.SMALL"
kind = "StatTypes.PERCENTAGE"
:showHealth = "false"
:isHealthy = "true"
:isChecked = "false"
:fitHeight = "false"
:fitWidth = "false"
>
Content here
</DataVal>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | String | '' | Label text |
| val | [Number, null] | null | Numeric value (null shows spinner) |
| metric | String | '' | Unit/metric label suffix |
| 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) |
| isChecked | Boolean | false | Radio-button selected state |
| fitHeight | Boolean | false | Fill parent height |
| fitWidth | Boolean | false | Fill parent width |
Events
| Event | Description |
|---|---|
| check | Emitted on click when used as a selectable tile |
Slots
| Slot | Description |
|---|---|
| inline | Content placed top-right of the value |
| default | Content below the value |