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
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_"
/>
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 |