Metrics
Use the <x-euikit::metric> component to
highlight a (typically numeric) value in a scoreboard-like fashion. It can automatically
change its colors based on a given value (called "stoplight" mode, see below).
The typical use of metric takes two attributes, neither of
which are required:
type
| No | "info" | Type of metric. Can take any of the Colors and Types common to other EUIKit components. Defaults to "info" if not specified. |
label
| No | (none) | Header to use to describe the metric. If not defined, the header area will not be rendered. |
lefticon
| No | (none) |
Icon to place on the left side of the metric's label. The icon will be rendered with
the @svg() Blade directive, so any icon
pack in Blade Icons can be used.
EUIKit supports Heroicons by default.
|
righticon
| No | (none) |
Icon to place on the right side of the metric's label. The icon will be rendered with
the @svg() Blade directive, so any icon
pack in Blade Icons can be used.
EUIKit supports Heroicons by default.
|
The component's default slot is the value to be highlighted.
Stoplight Metric
The metric component can take a stoplight attribute, which, if present (or TRUE) will
color the metric based on the value of the default slot and given thresholds.
If the slot is not a number, the metric will use the "red" type and render the contents
of the slot. Take care to ensure that the slot is numeric when using
stoplight.
All of the above attributes can be used on a stoplight metric, along with the following:
stoplight
| No | FALSE (not present) | If present, or set to TRUE, changes the metric to use stoplight coloring (green, blue, yellow, red) based on the numeric value in the default slot. |
slgreen
| No | 75 |
The stoplight metric will use type="green"
if the value is higher than this value. Defaults to 75.
|
slblue
| No | 50 |
The stoplight metric will use type="blue"
if the value is higher than this value. Defaults to 50.
|
slyellow
| No | 25 |
The stoplight metric will use
The stoplight metric will use |
The defaults for the color limits will split a whole percentage value (pct × 100) into fourths.
Example Metrics
Light
30
Dark
30
Account
GT000EAF
Success
30
Warning
30
OVERDRAWN
-$10.95
Primary
30
Ghost
30
No label
Example code:
<x-e::metric type="primary" label="Primary">
30
</x-e::metric>
Stoplight Metric
Stoplight Value
51
<x-e::metric stoplight label="Stoplight Value" class="w-[150px]">51</x-e::metric>
Stoplight Value
30
<x-e::metric stoplight value="20" label="Stoplight Value" class="w-[150px]">30</x-e::metric>