Charts Reference

import {
  ResponsiveContainer,
  BarChart,
  Bar,
  LineChart,
  Line,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts'

const data = [
  { month: 'Jan', revenue: 4200, expenses: 3100 },
  { month: 'Feb', revenue: 5800, expenses: 3400 },
  { month: 'Mar', revenue: 4900, expenses: 2900 },
  { month: 'Apr', revenue: 6200, expenses: 3800 },
]

function RevenueChart() {
  return (
    <div className="h-72 w-full rounded-3xl bg-white p-4 shadow-sm">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data}>
          <CartesianGrid vertical={false} stroke="#e4e4e7" />
          <XAxis dataKey="month" tickLine={false} axisLine={false} />
          <YAxis tickLine={false} axisLine={false} tickFormatter={(v) => `$${v}`} />
          <Tooltip />
          <Legend />
          <Bar dataKey="revenue" fill="#2563eb" radius={[4, 4, 0, 0]} />
          <Bar dataKey="expenses" fill="#f97316" radius={[4, 4, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}

const data = [
  { day: 'Mon', visitors: 120 },
  { day: 'Tue', visitors: 180 },
  { day: 'Wed', visitors: 150 },
  { day: 'Thu', visitors: 230 },
  { day: 'Fri', visitors: 280 },
]

function VisitorsChart() {
  return (
    <div className="h-72 w-full rounded-3xl bg-zinc-950 p-4">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data}>
          <CartesianGrid stroke="#3f3f46" strokeDasharray="3 3" />
          <XAxis dataKey="day" stroke="#a1a1aa" tickLine={false} axisLine={false} />
          <YAxis stroke="#a1a1aa" tickLine={false} axisLine={false} />
          <Tooltip />
          <Line
            type="monotone"
            dataKey="visitors"
            stroke="#a78bfa"
            strokeWidth={3}
            dot={{ r: 4, fill: '#a78bfa' }}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}

const data = [
  { name: 'Design', value: 42, color: '#ec4899' },
  { name: 'Build', value: 34, color: '#8b5cf6' },
  { name: 'Review', value: 24, color: '#06b6d4' },
]

function WorkMixChart() {
  return (
    <div className="h-72 w-full rounded-3xl bg-white p-4 shadow-sm">
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Tooltip />
          <Pie data={data} dataKey="value" nameKey="name" innerRadius={58} outerRadius={92}>
            {data.map((entry) => (
              <Cell key={entry.name} fill={entry.color} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
    </div>
  )
}