142 lines
3.6 KiB
TypeScript
142 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Cell,
|
|
ReferenceLine,
|
|
XAxis,
|
|
YAxis,
|
|
} from "recharts";
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
type ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ChartCard13Props {
|
|
title?: string;
|
|
description?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const monthLabel = (monthIndex: number) =>
|
|
new Intl.DateTimeFormat("fa-IR", { month: "short" }).format(
|
|
new Date(2025, monthIndex, 1),
|
|
);
|
|
|
|
const currencyFormatter = new Intl.NumberFormat("fa-IR", {
|
|
style: "currency",
|
|
currency: "IRR",
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
});
|
|
|
|
const compactCurrencyFormatter = new Intl.NumberFormat("fa-IR", {
|
|
style: "currency",
|
|
currency: "IRR",
|
|
notation: "compact",
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
});
|
|
|
|
const chartData = [
|
|
{ month: monthLabel(0), value: 2400 },
|
|
{ month: monthLabel(1), value: -1398 },
|
|
{ month: monthLabel(2), value: 3200 },
|
|
{ month: monthLabel(3), value: -2780 },
|
|
{ month: monthLabel(4), value: 1890 },
|
|
{ month: monthLabel(5), value: 2390 },
|
|
{ month: monthLabel(6), value: -1490 },
|
|
{ month: monthLabel(7), value: 3490 },
|
|
];
|
|
|
|
const chartConfig = {
|
|
value: {
|
|
label: "تغییر خالص",
|
|
color: "var(--chart-1)",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const ChartCard13 = ({
|
|
title = "تغییر خالص ماهانه",
|
|
description = "سود و زیان به تفکیک ماه",
|
|
className,
|
|
}: ChartCard13Props) => {
|
|
return (
|
|
<Card
|
|
dir="rtl"
|
|
lang="fa"
|
|
className={cn("w-full max-w-2xl text-start", className)}
|
|
>
|
|
<CardHeader>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ChartContainer config={chartConfig} className="h-64 w-full">
|
|
<BarChart
|
|
data={chartData}
|
|
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
|
<XAxis
|
|
dataKey="month"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tickMargin={8}
|
|
fontSize={12}
|
|
/>
|
|
<YAxis
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tickMargin={8}
|
|
fontSize={10}
|
|
width={52}
|
|
tickFormatter={(value) =>
|
|
compactCurrencyFormatter.format(Number(value))
|
|
}
|
|
/>
|
|
<ReferenceLine y={0} stroke="var(--border)" strokeWidth={1} />
|
|
<ChartTooltip
|
|
content={
|
|
<ChartTooltipContent
|
|
formatter={(value) => {
|
|
const num = Number(value);
|
|
const formatted = currencyFormatter.format(Math.abs(num));
|
|
return num < 0
|
|
? `${formatted} (زیان)`
|
|
: `${formatted} (سود)`;
|
|
}}
|
|
/>
|
|
}
|
|
cursor={{ fillOpacity: 0.05 }}
|
|
/>
|
|
<Bar dataKey="value" radius={[4, 4, 4, 4]}>
|
|
{chartData.map((entry, index) => (
|
|
<Cell
|
|
key={index}
|
|
fill={entry.value >= 0 ? "var(--chart-1)" : "var(--chart-5)"}
|
|
/>
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { ChartCard13 };
|