CreditChart
Le graphe en barres verticales d'un échéancier de crédit. Chaque barre porte sa hauteur, son état de paiement et son libellé.
Utilisation
import { CreditChart } from "@monstera/ui"- payée
- payée
- payée
- payée
- en cours
- à venir
Échéancier
value est une hauteur relative de 0 à 100, jamais un montant : c'est à l'appelant de ramener ses euros sur cette échelle. state colore la barre, payed en gris, activated en cyan, not-payed en navy.
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
- payée
Hauteur et libellés
height ne règle que la zone des barres, 87 px par défaut, et le libellé sous chaque barre est facultatif. Les barres se partagent la largeur disponible, quel que soit leur nombre.
- Juil. : payée
- Août : en cours
- Sept. : à venir
- Juil. : payée
- Août : en cours
- Sept. : à venir
- Juil. : payée
- Août : en cours
- Sept. : à venir
Segments
segments empile 2 ou 3 segments dans une barre : le premier, en bas, prend la hauteur qui reste, les suivants font 28 puis 12 px, séparés d'un trait. En activated ils vont du cyan au teal foncé puis au rouge, en not-payed ils restent navy, et une barre payed reste d'un seul gris.
Accessibilité
Le graphique exige un nom, et se double d'une liste masquée : une ligne par barre. Passer description sur chaque barre pour dire le montant (« Juillet : 350 €, payée »), que le composant ne connaît pas : il ne reçoit qu'une hauteur relative. Sans description, la ligne dit le libellé et l'état (payée, en cours, à venir). Le dessin des barres est caché aux lecteurs d'écran.
API
Prop
Type