DataCard
components/data/Card.vue
Bordered surface card wrapping a title, a primary DataMetricValue, and a description, with slots to override the value or append details.
Total Events
1482
Across all sources, last 24h
Total Events
1482
Across all sources, last 24h
No Risk Factors Detected
Scenarios
Total Events
1482
Across all sources, last 24h
3
Requests
2.4
m
Abbreviated
Transferred
82.24
Loading
null data → spinner
A very long metric title that wraps
999999999
Slots
Custom value (default slot)
98.6% healthy
Renders arbitrary content in place of the metric
With details slot
240
Extra detail rendered below
+18% vs. previous period
components/data/Card.vue
Usage
<DataCard
title = "undefined"
:data = "data"
dataUnit = "undefined"
description = "undefined"
:size = "50"
weight = "undefined"
:showFullNumber = "true"
>
Content here
</DataCard>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | String | undefined | Bold title shown above the value |
| data | any | null | Main value passed to DataMetricValue (null shows spinner) |
| dataUnit | String | undefined | Unit hint forwarded to DataMetricValue |
| description | String | undefined | Muted description below the value |
| size | Number | 50 | Value font size in px |
| weight | String | undefined | Value font weight override |
| showFullNumber | Boolean | true | Exact counts instead of abbreviations |
Slots
| Slot | Description |
|---|---|
| default | Overrides the DataMetricValue with arbitrary content |
| details | Extra content rendered below the description |