Recharts

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const data = [
  { name: 'يناير', مبيعات: 4000, أرباح: 2400 },
  { name: 'فبراير', مبيعات: 3000, أرباح: 1398 },
  { name: 'مارس', مبيعات: 2000, أرباح: 9800 },
  { name: 'أبريل', مبيعات: 2780, أرباح: 3908 },
  { name: 'مايو', مبيعات: 1890, أرباح: 4800 },
];

function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip 
          contentStyle={{ direction: 'rtl', textAlign: 'right' }}
          formatter={(value, name) => [`${value} ر.س`, name]}
        />
        <Legend />
        <Line type="monotone" dataKey="مبيعات" stroke="#8884d8" strokeWidth={2} />
        <Line type="monotone" dataKey="أرباح" stroke="#82ca9d" strokeWidth={2} />
      </LineChart>
    </ResponsiveContainer>
  );
}

// Pie Chart
import { PieChart, Pie, Cell } from 'recharts';

const pieData = [
  { name: 'منتج أ', value: 400 },
  { name: 'منتج ب', value: 300 },
  { name: 'منتج ج', value: 300 },
  { name: 'منتج د', value: 200 },
];

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

function ProductPie() {
  return (
    <PieChart width={400} height={400}>
      <Pie
        data={pieData}
        cx={200}
        cy={200}
        labelLine={false}
        label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
        outerRadius={80}
        fill="#8884d8"
        dataKey="value"
      >
        {pieData.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Pie>
    </PieChart>
  );
}