<tyro-ui-bar-chart>
Bar Chart
Diagramme en barres verticales pour une série (ex. visites par jour), avec grille discrète et infobulle par barre.
Visites par jour (30 jours)
Survolez une barre · jours sans visite = 0
Peu de barres
6 mois · [height]=180
Vide
[items]=[]
Aucune donnée
Inputs
Propriété | Type | Défaut | Description |
|---|---|---|---|
[items] | ITyroUiBarChartItem[] | [] | Barres : { label, value, details? }. details ajoute des lignes à l'infobulle ({ label, value }). |
[valueLabel] | string | '' | Nom de la valeur dans l'infobulle (ex. "visites") |
[height] | number | 220 | Hauteur de la zone de tracé en px |
[emptyLabel] | string | 'Aucune donnée' | Message quand toutes les valeurs sont à 0 |
Règles de design
- Une seule série, donc une seule couleur et pas de légende : le titre de la carte nomme la série.
- Barres de 24px max, arrondies seulement en haut, 2px d'écart entre elles.
- Axe Y en graduations rondes (1, 2, 2.5, 5 × 10ⁿ), grille discrète.
- Au-delà de 8 barres, un libellé X sur N pour éviter les chevauchements.
- Infobulle par barre au survol et au focus clavier (colonne entière = cible).
Utilisation
<tyro-ui-bar-chart
[items]="days()"
valueLabel="visites"
emptyLabel="Aucune visite sur cette période.">
</tyro-ui-bar-chart>
// days = [{ label: '04 oct.', value: 114, details: [{ label: 'uniques', value: 17 }] }, ...]