Composants de Graphiques
Composants pour visualiser des données avec des graphiques interactifs
Chart - Ligne
Évolution des ventes
Chart - Barres
Ventes hebdomadaires
Lun
Mar
Mer
Jeu
Ven
Sam
Dim
Chart - Aire
Revenus trimestriels
Chart interactif
Graphique en ligne
Advanced Charts - Scatter
Scatter Chart - Correlation Analysis
Point 1
Point 2
Point 3
Point 4
Point 5
Point 6
Advanced Charts - Radar
Radar Chart - Performance Metrics
Advanced Charts - Donut
Donut Chart - Device Distribution
Desktop: 45
Mobile: 30
Tablet: 15
Other: 10
Advanced Charts - Gauge
CPU Usage
Memory Usage
Disk Usage
Informations
Types de graphiques disponibles:
- Line: Graphique en ligne pour visualiser des tendances
- Bar: Graphique en barres pour comparer des valeurs
- Area: Graphique en aire pour montrer l'évolution cumulée
- Scatter: Graphique de dispersion pour analyser les corrélations
- Radar: Graphique radar pour comparer plusieurs métriques
- Donut: Graphique en donut pour visualiser des proportions
- Gauge: Graphique jauge pour afficher des valeurs dans une plage
Utilisation:
import { Chart, AdvancedCharts } from '@/components/ui';
// Basic chart
const data: ChartDataPoint[] = [
{ label: 'Jan', value: 65 },
{ label: 'Fév', value: 59 },
];
<Chart type="line" data={data} title="Mon graphique" height={300} />
// Advanced scatter chart
const scatterData: ScatterDataPoint[] = [
{ x: 10, y: 20, label: 'Point 1' },
{ x: 15, y: 30, label: 'Point 2' },
];
<AdvancedCharts type="scatter" data={scatterData} height={300} />