DataMetric_Card

components/data/metric/_/Card.vue

Bordered stat card — label over value in a rounded surface box, built from DataMetricLabel + DataMetricValue.

Events
148
Events
Scenarios
Events
148
Sources
3
Visible
92
Requests
2.4
m
Single
1
Loading
A very long metric label
999999999
components/data/metric/_/Card.vue

Usage

<DataMetric_Card label = "—" :val = "—" unit = "—" :size = "20" weight = "—" :showFullNumber = "true" :healthMode = "NEVER_HOT" />

Props

PropTypeDefaultDescription
labelStringMetric label shown above the value
valanyThe value (required); null shows the loading spinner
unitStringUnit hint (bytes, duration, custom)
sizeNumber20Value font size in px
weightStringValue font weight override
showFullNumberBooleantrueExact counts instead of abbreviations
healthModeFunctionNEVER_HOTReturns true when the value should render hot

Related

Qpoint Brand Style Guide