Utiliser les bibliothèques de graphiques avec Claude Code

Exploiter les bibliothèques de graphiques avec Claude Code

Les affichages graphiques sont indispensables dans les tableaux de bord et les écrans de rapports. De nombreuses bibliothèques existent comme Recharts, Chart.js et D3.js, et avec Claude Code, vous pouvez construire rapidement des composants de graphiques qui tirent parti des caractéristiques de chacune.

Choix de la bibliothèque

> Je veux afficher des graphiques dans une application React.
> Implémente des graphiques en courbes, en barres, en camembert et en aires.
> Utilise Recharts, avec support responsive et mode sombre.

• Recharts : natif React, déclaratif et simple
• Chart.js : léger avec une large gamme de graphiques
• D3.js : flexibilité maximale, courbe d’apprentissage élevée

Différents types de graphiques avec Recharts

// src/components/charts/SalesLineChart.tsx
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip,
  Legend, ResponsiveContainer
} from 'recharts';

interface DataPoint {
  date: string;
  revenue: number;
  orders: number;
}

export function SalesLineChart({ data }: { data: DataPoint[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">Évolution du chiffre d'affaires</h3>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart data={data}>
          <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
          <XAxis dataKey="date" stroke="#9CA3AF" />
          <YAxis
            yAxisId="revenue"
            stroke="#3B82F6"
            tickFormatter={(v) => `${(v / 1000).toFixed(0)}k€`}
          />
          <YAxis yAxisId="orders" orientation="right" stroke="#10B981" />
          <Tooltip
            contentStyle={{
              backgroundColor: '#1F2937',
              border: 'none',
              borderRadius: '8px',
              color: '#fff',
            }}
            formatter={(value: number, name: string) =>
              name === 'revenue' ? `${value.toLocaleString()} €` : `${value} commandes`
            }
          />
          <Legend />
          <Line yAxisId="revenue" type="monotone" dataKey="revenue" stroke="#3B82F6" name="Chiffre d'affaires" strokeWidth={2} dot={false} />
          <Line yAxisId="orders" type="monotone" dataKey="orders" stroke="#10B981" name="Commandes" strokeWidth={2} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

Graphique en barres

// src/components/charts/CategoryBarChart.tsx
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'];

interface CategoryData {
  name: string;
  value: number;
}

export function CategoryBarChart({ data }: { data: CategoryData[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">Ventes par catégorie</h3>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data} layout="vertical">
          <CartesianGrid strokeDasharray="3 3" horizontal={false} />
          <XAxis type="number" tickFormatter={(v) => `${(v / 1000).toFixed(0)}k€`} />
          <YAxis type="category" dataKey="name" width={100} />
          <Tooltip formatter={(v: number) => `${v.toLocaleString()} €`} />
          <Bar dataKey="value" radius={[0, 4, 4, 0]}>
            {data.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

Graphique en camembert

// src/components/charts/DistributionPieChart.tsx
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];

interface SegmentData {
  name: string;
  value: number;
}

export function DistributionPieChart({ data, title }: { data: SegmentData[]; title: string }) {
  const total = data.reduce((sum, d) => sum + d.value, 0);

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">
      <h3 className="text-lg font-semibold mb-4 dark:text-white">{title}</h3>
      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={100}
            dataKey="value"
            label={({ name, value }) => `${name} ${((value / total) * 100).toFixed(0)}%`}
          >
            {data.map((_, index) => (
              <Cell key={index} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip formatter={(v: number) => `${v.toLocaleString()} (${((v / total) * 100).toFixed(1)}%)`} />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}

Assemblage du tableau de bord graphique

// src/app/dashboard/analytics/page.tsx
import { SalesLineChart } from '@/components/charts/SalesLineChart';
import { CategoryBarChart } from '@/components/charts/CategoryBarChart';
import { DistributionPieChart } from '@/components/charts/DistributionPieChart';

export default async function AnalyticsPage() {
  const [salesData, categoryData, channelData] = await Promise.all([
    fetchSalesData(),
    fetchCategoryData(),
    fetchChannelData(),
  ]);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold dark:text-white">Tableau de bord analytique</h1>
      <SalesLineChart data={salesData} />
      <div className="grid md:grid-cols-2 gap-6">
        <CategoryBarChart data={categoryData} />
        <DistributionPieChart data={channelData} title="Trafic par canal" />
      </div>
    </div>
  );
}

Articles connexes

Pour la visualisation de données en général, consultez Implémentation de la visualisation de données, et pour la construction de tableaux de bord, consultez Développement de tableau de bord d’administration.

La documentation officielle de Recharts (recharts.org) fournit la référence API.