// Importation des dépendances nécessaires import React, { useState } from 'react'; // Pour gérer l'état du composant import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from 'recharts'; // Pour la visualisation import { Button } from '@/components/ui/button'; // Composant bouton stylisé de shadcn/ui // Fonction utilitaire pour générer des données aléatoires // count: nombre de points à générer (par défaut 50) const generateRandomData = (count = 50) => { return Array.from({ length: count }, () => ({ x: Math.random() * 100, // Valeur X aléatoire entre 0 et 100 y: Math.random() * 100, // Valeur Y aléatoire entre 0 et 100 })); }; // Composant principal du diagramme de dispersion const ScatterPlotComponent = () => { // État pour stocker les données du graphique // useState initialise les données avec un premier jeu de données aléatoires const [data, setData] = useState(generateRandomData()); // Fonction pour régénérer de nouvelles données aléatoires // Appelée lors du clic sur le bouton const regenerateData = () => { setData(generateRandomData()); }; return ( // Conteneur principal avec style Tailwind

{/* Titre du graphique */}

Diagramme de Dispersion Aléatoire

{/* Conteneur du graphique avec hauteur fixe */}

{/* Conteneur responsive qui s'adapte à la taille de son parent */} {/* Configuration du graphique de dispersion */} {/* Grille de fond */} {/* Configuration de l'axe X */} {/* Configuration de l'axe Y */} {/* Configuration de l'infobulle au survol */} { if (payload && payload.length) { return ( // Style personnalisé de l'infobulle

X: {payload[0].payload.x.toFixed(2)}

Y: {payload[0].payload.y.toFixed(2)}

); } return null; }} /> {/* Configuration des points de dispersion */}

{/* Section inférieure avec le compteur et le bouton */}

{/* Affichage du nombre de points */}

Nombre de points affichés : {data.length}

{/* Bouton pour régénérer les données */}

); }; // Export du composant pour utilisation dans d'autres fichiers export default ScatterPlotComponent;

Draw scatter plot

AdamHsaine