Chart Component

Chart Component — DataPilot

Principe architectural

Les charts Recharts sont TOUJOURS wrappés dans src/components/charts/. Jamais importer Recharts directement dans une page ou composant feature.

Types de charts disponibles

• BarChartWrapper — comparaisons, distributions
• LineChartWrapper — tendances temporelles
• PieChartWrapper — répartitions proportionnelles
• TableView — données tabulaires brutes

Template wrapper

// src/components/charts/BarChartWrapper.tsx
"use client"

import {
  BarChart, Bar, XAxis, YAxis, CartesianGrid,
  Tooltip, Legend, ResponsiveContainer
} from 'recharts'

interface BarChartWrapperProps {
  data: Record<string, unknown>[]
  xKey: string
  yKey: string
  title?: string
  color?: string
}

export const BarChartWrapper = ({
  data, xKey, yKey, title, color = '#4f46e5'
}: BarChartWrapperProps) => {
  return (
    <div className="w-full">
      {title && <h4 className="text-sm font-medium text-gray-700 mb-2">{title}</h4>}
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey={xKey} />
          <YAxis />
          <Tooltip />
          <Legend />
          <Bar dataKey={yKey} fill={color} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}