121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { PolarAngleAxis, RadialBar, RadialBarChart } 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 ChartCard19Props {
|
|
title?: string;
|
|
description?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const percentFormatter = new Intl.NumberFormat("fa-IR", {
|
|
maximumFractionDigits: 0,
|
|
});
|
|
|
|
const chartData = [
|
|
{ name: "Chrome", value: 45, fill: "var(--chart-1)" },
|
|
{ name: "Safari", value: 28, fill: "var(--chart-2)" },
|
|
{ name: "Firefox", value: 15, fill: "var(--chart-3)" },
|
|
{ name: "Edge", value: 8, fill: "var(--chart-4)" },
|
|
{ name: "سایر", value: 4, fill: "var(--chart-5)" },
|
|
];
|
|
|
|
const chartConfig = {
|
|
Chrome: { label: "Chrome", color: "var(--chart-1)" },
|
|
Safari: { label: "Safari", color: "var(--chart-2)" },
|
|
Firefox: { label: "Firefox", color: "var(--chart-3)" },
|
|
Edge: { label: "Edge", color: "var(--chart-4)" },
|
|
سایر: { label: "سایر", color: "var(--chart-5)" },
|
|
} satisfies ChartConfig;
|
|
|
|
const ChartCard19 = ({
|
|
title = "سهم مرورگرها",
|
|
description = "ترافیک به تفکیک نوع مرورگر",
|
|
className,
|
|
}: ChartCard19Props) => {
|
|
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>
|
|
<div className="flex items-center justify-center gap-6">
|
|
<ChartContainer config={chartConfig} className="aspect-square h-48">
|
|
<RadialBarChart
|
|
data={chartData}
|
|
innerRadius={30}
|
|
outerRadius={90}
|
|
startAngle={90}
|
|
endAngle={-270}
|
|
>
|
|
<PolarAngleAxis
|
|
type="number"
|
|
domain={[0, 100]}
|
|
angleAxisId={0}
|
|
tick={false}
|
|
/>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={
|
|
<ChartTooltipContent
|
|
hideLabel
|
|
formatter={(value, name) => (
|
|
<span className="tabular-nums">
|
|
{chartConfig[name as keyof typeof chartConfig]?.label ??
|
|
name}
|
|
: {percentFormatter.format(Number(value))}٪
|
|
</span>
|
|
)}
|
|
/>
|
|
}
|
|
/>
|
|
<RadialBar
|
|
dataKey="value"
|
|
background={{ fill: "var(--muted)" }}
|
|
cornerRadius={4}
|
|
/>
|
|
</RadialBarChart>
|
|
</ChartContainer>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{chartData.map((item) => (
|
|
<div key={item.name} className="flex items-center gap-2">
|
|
<div
|
|
className="size-3 rounded-sm"
|
|
style={{ backgroundColor: item.fill }}
|
|
/>
|
|
<span className="text-sm">{item.name}</span>
|
|
<span className="ms-auto text-sm font-medium tabular-nums">
|
|
{percentFormatter.format(item.value)}٪
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export { ChartCard19 };
|