DataMetric_Base
components/data/metric/_/Base.vue
Full-featured machine layout composing label, value, trend, and spark chart. Optionally clickable.
Requests
24.3
k
+128
Latency
142
ms
+12ms
Errors
3
-2
Scenarios
No spark
500
+10
Empty spark
500
+10
Overflow spark
500
+10
Default slot — hairline spans slot content
Agents
34
20 active · 14 other
components/data/metric/_/Base.vue
Usage
<DataMetric_Base
label = "—"
:val = "val"
unit = "—"
:spark = "spark"
:trend = "trend"
:healthMode = "healthModes.NEVER_HOT"
:size = "size"
weight = "—"
:showFullNumber = "false"
spaceAfterLabel = "—"
:sparkMaxWidth = "sparkMaxWidth"
to = "_none_"
>
Content here
</DataMetric_Base>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | String | '' | Component label |
| val | Number | undefined | Numeric value |
| unit | String | '' | Unit label |
| spark | Array | undefined | Spark chart data |
| trend | Number | undefined | Change value |
| healthMode | Function | healthModes.NEVER_HOT | Health evaluation function |
| size | Number | undefined | Value font size |
| weight | String | '' | Value font weight |
| showFullNumber | Boolean | false | Show unabbreviated number |
| spaceAfterLabel | String | '' | Spacing after label |
| sparkMaxWidth | Number | undefined | Max width for spark chart |
| to | String | '_none_' | Optional navigation route |
Slots
| Slot | Description |
|---|---|
| default | Additional content below the value (e.g. a segment bar + legend). Renders inside the inline-block root, so the label hairline spans the slot width — added c59. |