143 lines
3.8 KiB
TypeScript
143 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
type ChartConfig,
|
|
ChartContainer,
|
|
ChartLegend,
|
|
ChartLegendContent,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ChartCard11Props {
|
|
title?: string;
|
|
description?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const percentFormatter = new Intl.NumberFormat("fa-IR", {
|
|
style: "percent",
|
|
maximumFractionDigits: 0,
|
|
});
|
|
|
|
const formatPercent = (value: number) => {
|
|
const ratio = value <= 1 ? value : value / 100;
|
|
return percentFormatter.format(ratio);
|
|
};
|
|
|
|
const chartData = [
|
|
{ category: "الکترونیک", inStock: 65, lowStock: 20, outOfStock: 15 },
|
|
{ category: "پوشاک", inStock: 72, lowStock: 18, outOfStock: 10 },
|
|
{ category: "خانه", inStock: 58, lowStock: 25, outOfStock: 17 },
|
|
{ category: "ورزش", inStock: 80, lowStock: 12, outOfStock: 8 },
|
|
{ category: "کتاب", inStock: 45, lowStock: 35, outOfStock: 20 },
|
|
];
|
|
|
|
const chartConfig = {
|
|
inStock: {
|
|
label: "موجود",
|
|
color: "var(--chart-1)",
|
|
},
|
|
lowStock: {
|
|
label: "کمموجود",
|
|
color: "var(--chart-4)",
|
|
},
|
|
outOfStock: {
|
|
label: "ناموجود",
|
|
color: "var(--chart-5)",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
const ChartCard11 = ({
|
|
title = "وضعیت موجودی",
|
|
description = "سطح موجودی به تفکیک دسته (درصد)",
|
|
className,
|
|
}: ChartCard11Props) => {
|
|
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}
|
|
layout="vertical"
|
|
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
|
stackOffset="expand"
|
|
barSize={24}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" horizontal={false} />
|
|
<XAxis
|
|
type="number"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tickMargin={8}
|
|
fontSize={10}
|
|
tickFormatter={(value) => formatPercent(Number(value))}
|
|
/>
|
|
<YAxis
|
|
type="category"
|
|
dataKey="category"
|
|
axisLine={false}
|
|
tickLine={false}
|
|
tickMargin={8}
|
|
fontSize={12}
|
|
width={88}
|
|
/>
|
|
<ChartTooltip
|
|
content={
|
|
<ChartTooltipContent
|
|
formatter={(value, name) => (
|
|
<span className="tabular-nums">
|
|
{chartConfig[name as keyof typeof chartConfig]?.label}:{" "}
|
|
{formatPercent(Number(value))}
|
|
</span>
|
|
)}
|
|
/>
|
|
}
|
|
cursor={{ fillOpacity: 0.05 }}
|
|
/>
|
|
<ChartLegend content={<ChartLegendContent />} />
|
|
<Bar
|
|
dataKey="inStock"
|
|
stackId="a"
|
|
fill="var(--color-inStock)"
|
|
radius={[4, 0, 0, 4]}
|
|
/>
|
|
<Bar
|
|
dataKey="lowStock"
|
|
stackId="a"
|
|
fill="var(--color-lowStock)"
|
|
radius={0}
|
|
/>
|
|
<Bar
|
|
dataKey="outOfStock"
|
|
stackId="a"
|
|
fill="var(--color-outOfStock)"
|
|
radius={[0, 4, 4, 0]}
|
|
/>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { ChartCard11 };
|