Mittarikortti

StatCard ja MiniBarChart — mittarinäkymän palikat

<StatCardRow>
  <StatCard icon={Coins} label="Kokonaiskustannus"
            value={formatCost(totals.cost)} hint="30 päivää" />
  <StatCard icon={Zap} label="Tokenit yhteensä"
            value={compactNumber(totals.tokens)} />
</StatCardRow>

<MiniBarChart data={paivat} formatValue={formatCost}
              label="Päivittäiset kustannukset, 30 päivää" />

Kumpikaan ei tiedä mistä luvut tulevat. StatCard ottaa valmiiksi muotoillun merkkijonon, MiniBarChart pelkkiä lukuja. Sama pari kelpaa LLM-kustannuksille, jonon pituudelle ja toimittajamäärille.

Kolme päätöstä joita kannattaa noudattaa myös kutsupuolella:

• Väri ei ole koriste. StatCardin oletussävy on neutraali, ja sävyn saa vain luku joka on arvio (budjettikatto, epäonnistuneet). StatusBadge käyttää samoja värejä väittämään että jotain onnistui; jos viereinen mittaririvi käyttää niitä somisteena, punainen lakkaa tarkoittamasta mitään.
• Nolla ei näytä samalta kuin melkein nolla. MiniBarChart piirtää jokaiselle pisteelle tausta-uran, joten nollapäivä on tyhjä ura eikä ohut viiva pienen arvon vieressä.
• Huippuarvo on näkyvissä. Ilman sitä pylväiden korkeus ei ankkuroidu mihinkään: korkein on aina täysi olipa se 50 tai 5 000.

Ei kaaviokirjastoa. 40–120 kt riippuvuutta kertautuisi neljään repoon vendoroinnin mukana. Kun tarvitaan akselit, selitteet ja zoom, tarvitaan kirjasto eikä tätä — se on eri komponentti eikä tämän laajennus.

> ⚠️ Paketti ei anna hintoja eikä laske kustannuksia. StatCard ottaa > cost-arvon valmiina. Tariffi kuuluu sinne missä tiedetään mikä malli > ajoi, ja kustannus lasketaan kerran kirjoitushetkellä. Kovakoodattu > $3/M vendoroituisi neljään repoon, ja contentHash kertoisi vain että > kopio vastaa lähdettä — ei että luku on oikein. Vanhentunut hinta ei > tuota virhettä, tyhjää tilaa eikä punaista; se tuottaa uskottavan > summan. Kokonainen esimerkkinäkymä tietosopimuksineen on demossa: > /esimerkit/llm-kaytto.