Chart Card
PROCabecera compartida por todos los charts: titulo, cifra grande con contador animado, pildora de variacion, switcher de rango y menu. Evita reescribir el mismo header diecisiete veces.
npx orbitui-cli add chart-cardProps
| Prop | Tipo | Descripción |
|---|---|---|
title* | string | — |
value | number | Cifra principal. Se anima de 0 al valor con easing out. |
formatValue | (value: number) => string | — |
delta | number | Variacion porcentual mostrada al lado de la cifra. |
invertDelta | boolean | Para metricas donde bajar es bueno (churn, latencia, gasto). |
caption | string | — |
ranges | SegmentedOption[] | Opciones del switcher de rango. Si falta, no se renderiza. |
range | string | — |
onRangeChange | (value: string) => void | — |
action | ReactNode | — |
footer | ReactNode | — |
className | string | — |
children* | ReactNode | — |
Qué instala
- Archivo
components/orbit/charts/chart-card.tsx- Componentes
- card, chart-core, chip, cx, segmented-control
- Paquetes npm
- ninguno
A partir de la instalación el archivo es tuyo: editalo sin miedo. Si volvés a correr add y lo modificaste, el CLI pregunta antes de pisarlo.