143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
CartesianGrid,
|
|||
|
|
Scatter,
|
|||
|
|
ScatterChart,
|
|||
|
|
XAxis,
|
|||
|
|
YAxis,
|
|||
|
|
ZAxis,
|
|||
|
|
} 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 ChartCard23Props {
|
|||
|
|
title?: string;
|
|||
|
|
description?: string;
|
|||
|
|
className?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currencyFormatter = new Intl.NumberFormat("fa-IR", {
|
|||
|
|
style: "currency",
|
|||
|
|
currency: "IRR",
|
|||
|
|
minimumFractionDigits: 0,
|
|||
|
|
maximumFractionDigits: 0,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const numberFormatter = new Intl.NumberFormat("fa-IR", {
|
|||
|
|
maximumFractionDigits: 0,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const chartData = [
|
|||
|
|
{ x: 100, y: 200, name: "محصول ۱" },
|
|||
|
|
{ x: 120, y: 100, name: "محصول ۲" },
|
|||
|
|
{ x: 170, y: 300, name: "محصول ۳" },
|
|||
|
|
{ x: 140, y: 250, name: "محصول ۴" },
|
|||
|
|
{ x: 150, y: 400, name: "محصول ۵" },
|
|||
|
|
{ x: 110, y: 280, name: "محصول ۶" },
|
|||
|
|
{ x: 200, y: 320, name: "محصول ۷" },
|
|||
|
|
{ x: 180, y: 150, name: "محصول ۸" },
|
|||
|
|
{ x: 160, y: 350, name: "محصول ۹" },
|
|||
|
|
{ x: 190, y: 220, name: "محصول ۱۰" },
|
|||
|
|
{ x: 130, y: 180, name: "محصول ۱۱" },
|
|||
|
|
{ x: 220, y: 280, name: "محصول ۱۲" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const chartConfig = {
|
|||
|
|
x: {
|
|||
|
|
label: "قیمت",
|
|||
|
|
color: "var(--chart-1)",
|
|||
|
|
},
|
|||
|
|
y: {
|
|||
|
|
label: "تعداد فروش",
|
|||
|
|
color: "var(--chart-1)",
|
|||
|
|
},
|
|||
|
|
} satisfies ChartConfig;
|
|||
|
|
|
|||
|
|
const ChartCard23 = ({
|
|||
|
|
title = "قیمت در برابر فروش",
|
|||
|
|
description = "همبستگی بین قیمت و تعداد فروش",
|
|||
|
|
className,
|
|||
|
|
}: ChartCard23Props) => {
|
|||
|
|
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">
|
|||
|
|
<ScatterChart margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
|||
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|||
|
|
<XAxis
|
|||
|
|
type="number"
|
|||
|
|
dataKey="x"
|
|||
|
|
axisLine={false}
|
|||
|
|
tickLine={false}
|
|||
|
|
tickMargin={8}
|
|||
|
|
fontSize={10}
|
|||
|
|
width={52}
|
|||
|
|
tickFormatter={(value) =>
|
|||
|
|
currencyFormatter.format(Number(value))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<YAxis
|
|||
|
|
type="number"
|
|||
|
|
dataKey="y"
|
|||
|
|
axisLine={false}
|
|||
|
|
tickLine={false}
|
|||
|
|
tickMargin={8}
|
|||
|
|
fontSize={10}
|
|||
|
|
width={40}
|
|||
|
|
tickFormatter={(value) => numberFormatter.format(Number(value))}
|
|||
|
|
/>
|
|||
|
|
<ZAxis range={[60, 60]} />
|
|||
|
|
<ChartTooltip
|
|||
|
|
cursor={{ strokeDasharray: "3 3" }}
|
|||
|
|
content={
|
|||
|
|
<ChartTooltipContent
|
|||
|
|
labelFormatter={(_, payload) => {
|
|||
|
|
const item = payload?.[0]?.payload as
|
|||
|
|
| { name?: string }
|
|||
|
|
| undefined;
|
|||
|
|
return item?.name ?? "";
|
|||
|
|
}}
|
|||
|
|
formatter={(value, name) => {
|
|||
|
|
if (name === "x") {
|
|||
|
|
return `قیمت: ${currencyFormatter.format(Number(value))}`;
|
|||
|
|
}
|
|||
|
|
if (name === "y") {
|
|||
|
|
return `تعداد: ${numberFormatter.format(Number(value))}`;
|
|||
|
|
}
|
|||
|
|
return `${name}: ${value}`;
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Scatter data={chartData} fill="var(--chart-1)" fillOpacity={0.7} />
|
|||
|
|
</ScatterChart>
|
|||
|
|
</ChartContainer>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export { ChartCard23 };
|