DataSmile
components/data/Smile.vue
Articulating SVG smile gauge — a curve that bends from frown (low) through flat (mid) to smile (high), with a range-driven gradient fill and matching numeric readout.
100
Scenarios
20
50
100
0
80
Slots
92/100
components/data/Smile.vue
Usage
<DataSmile
:value = "50"
:size = "180"
:curve = "78"
:showValue = "true"
:ranges = "red/orange/green"
>
Content here
</DataSmile>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Number | 50 | 0–100 (clamped). 0 = deepest frown, 50 = flat, 100 = full smile. Drives curvature, fill length, and color. |
| size | Number | 180 | SVG width in px; height scales to the viewBox ratio |
| curve | Number | 78 | Max bend amount in viewBox units (0 = flat line; ~110 before the belly clips) |
| showValue | Boolean | true | Render the numeric readout beside the smile |
| ranges | Array | red/orange/green | Color bands: [{ max, track, from, to }] — first range whose max ≥ value wins; track tints the rail, from→to is the fill gradient |
Slots
| Slot | Description |
|---|---|
| default | Overrides the numeric readout; receives the rounded `value` as a slot prop |