77 أسطر
2.7 KiB
TypeScript
77 أسطر
2.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Area,
|
|
AreaChart,
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Cell,
|
|
Legend,
|
|
Pie,
|
|
PieChart,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
|
|
import type { ChannelPoint, Insight, RevenuePoint } from "@/types";
|
|
|
|
const pieColors = ["hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--chart-4))"];
|
|
|
|
export function RevenueAreaChart({ data }: { data: RevenuePoint[] }) {
|
|
return (
|
|
<div className="h-72 w-full">
|
|
<ResponsiveContainer>
|
|
<AreaChart data={data}>
|
|
<CartesianGrid stroke="rgba(180,150,110,0.14)" vertical={false} />
|
|
<XAxis dataKey="month" tick={{ fill: "#c6b698", fontSize: 12 }} axisLine={false} tickLine={false} />
|
|
<YAxis tick={{ fill: "#a79577", fontSize: 12 }} axisLine={false} tickLine={false} />
|
|
<Tooltip
|
|
cursor={{ stroke: "rgba(214,170,100,0.35)" }}
|
|
contentStyle={{ background: "#20160f", border: "1px solid #5e4732", borderRadius: "12px" }}
|
|
/>
|
|
<Legend />
|
|
<Area type="monotone" dataKey="revenue" name="الإيراد" stroke="hsl(var(--chart-1))" fill="hsl(var(--chart-1))" fillOpacity={0.2} strokeWidth={2.5} />
|
|
<Area type="monotone" dataKey="orders" name="الطلبات" stroke="hsl(var(--chart-2))" fill="hsl(var(--chart-2))" fillOpacity={0.16} strokeWidth={2} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ChannelPieChart({ data }: { data: ChannelPoint[] }) {
|
|
return (
|
|
<div className="h-72 w-full">
|
|
<ResponsiveContainer>
|
|
<PieChart>
|
|
<Tooltip contentStyle={{ background: "#20160f", border: "1px solid #5e4732", borderRadius: "12px" }} />
|
|
<Pie data={data} dataKey="value" nameKey="name" innerRadius={58} outerRadius={94} paddingAngle={4}>
|
|
{data.map((entry, index) => (
|
|
<Cell key={entry.name} fill={pieColors[index % pieColors.length]} />
|
|
))}
|
|
</Pie>
|
|
<Legend />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function InsightBarChart({ data }: { data: Insight[] }) {
|
|
return (
|
|
<div className="h-72 w-full">
|
|
<ResponsiveContainer>
|
|
<BarChart data={data}>
|
|
<CartesianGrid stroke="rgba(180,150,110,0.14)" vertical={false} />
|
|
<XAxis dataKey="label" tick={{ fill: "#c6b698", fontSize: 12 }} axisLine={false} tickLine={false} />
|
|
<YAxis tick={{ fill: "#a79577", fontSize: 12 }} axisLine={false} tickLine={false} />
|
|
<Tooltip contentStyle={{ background: "#20160f", border: "1px solid #5e4732", borderRadius: "12px" }} />
|
|
<Bar dataKey="value" radius={[8, 8, 0, 0]} fill="hsl(var(--chart-1))" />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|