StatTile

A compact summary stat, Apple/Samsung-Health style — a bold number + label + a small sparkline hinting at the recent trend, instead of a flat colored box with just a number.

Playground

7.420Ø steps / day

label unitLabel accentColor accentzone-underzone-overnutrient-proteinnutrient-water sparkline points: 5

Drag sparkline points below 2 to see the sparkline disappear entirely — there's no meaningful line to draw with fewer than two values.

<script setup>
import { StatTile } from 'yemek'
</script>

<template>
  <StatTile
    label="Ø steps / day"
    :value="7420"
    :trend="[6200, 7100, 6800, 8300, 7420]"
    accent-color="var(--yemek-color-accent)"
  />
</template>

Props

Prop	Type	Default	Description
label	string	—	Stat label.
value	number	—	The stat's current value — no averaging/classification happens in the component, the consumer already computed it.
unitLabel	string	''	Unit suffix, e.g. "kcal".
trend	number[]	[]	Recent values, oldest first, for the sparkline. Fewer than 2 points hides the sparkline entirely.
accentColor	string	var(--yemek-color-accent)	CSS color value — lets each tile pick whichever color fits its metric (e.g. var(--yemek-nutrient-water)) instead of the kit guessing one.

Behavior notes

• The sparkline draws in via a stroke-dashoffset animation.
• No trend/average computation happens in the component — pass already-summarized data.