KPI
Eine Zahl und was sie tut: Veränderung mit selbst bestimmter Farbe, ein kleiner Verlauf und der Fortschritt zum Ziel.
import { Kpi } from "@/forma/data/kpi";Base
In FORMA
- Liegt in
kit/data/kpi.tsxund ist über@/forma/data/kpierreichbar. - FORMAs eigener Baustein, auf Arc gebaut: Arcs Buttons, Felder und Federn darunter, Farbe, Ecken, Höhen und Tempo aus der Richtung.
Usage
import { Kpi } from "@/forma/data/kpi";API reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | – | |
value | number | – | zählt beim Erscheinen hoch |
change | number | – | Veränderung in % |
goodDirection | "up" | "down" | "up" | down für Kosten, Latenz, Abwanderung |
data | number[] | – | Sparkline |
target | {value, label} | – | Fortschritt zum Ziel |
Motion
- Der Wert zählt hoch, der Zielbalken füllt sich auf Arcs smooth-Feder.
Herkunft
- Aufbau und Inhalt nach PanelUI (panelui.dev, MIT), neu gebaut auf Arc: Arcs Buttons, Felder und Bewegung, Farben und Formen aus der Richtung.
Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.