oiov
105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { TrendingUp } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
import {
|
|
Label,
|
|
PolarGrid,
|
|
PolarRadiusAxis,
|
|
RadialBar,
|
|
RadialBarChart,
|
|
} from "recharts";
|
|
|
|
import { Card, CardContent, CardFooter } from "@/components/ui/card";
|
|
import { ChartConfig, ChartContainer } from "@/components/ui/chart";
|
|
|
|
const chartConfig = {
|
|
actived: {
|
|
label: "Actived",
|
|
},
|
|
safari: {
|
|
label: "Safari",
|
|
color: "hsl(var(--chart-1))",
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
export function RadialShapeChart({
|
|
total,
|
|
totalUser,
|
|
}: {
|
|
total: number;
|
|
totalUser: number;
|
|
}) {
|
|
const t = useTranslations("Components");
|
|
const chartData = [
|
|
{ browser: "safari", actived: total, fill: "var(--color-safari)" },
|
|
];
|
|
|
|
return (
|
|
<Card className="flex flex-col">
|
|
<CardContent className="flex-1 pb-0">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="mx-auto aspect-square max-h-[250px]"
|
|
>
|
|
<RadialBarChart
|
|
data={chartData}
|
|
endAngle={total}
|
|
innerRadius={80}
|
|
outerRadius={140}
|
|
>
|
|
<PolarGrid
|
|
gridType="circle"
|
|
radialLines={false}
|
|
stroke="none"
|
|
className="first:fill-muted last:fill-background"
|
|
polarRadius={[86, 74]}
|
|
/>
|
|
<RadialBar dataKey="actived" background />
|
|
<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
|
|
<Label
|
|
content={({ viewBox }) => {
|
|
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
|
return (
|
|
<text
|
|
x={viewBox.cx}
|
|
y={viewBox.cy}
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
>
|
|
<tspan
|
|
x={viewBox.cx}
|
|
y={viewBox.cy}
|
|
className="fill-foreground text-4xl font-bold"
|
|
>
|
|
{chartData[0].actived.toLocaleString()}
|
|
</tspan>
|
|
<tspan
|
|
x={viewBox.cx}
|
|
y={(viewBox.cy || 0) + 24}
|
|
className="fill-muted-foreground"
|
|
>
|
|
Users
|
|
</tspan>
|
|
</text>
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
</PolarRadiusAxis>
|
|
</RadialBarChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
<CardFooter className="flex-col gap-2 text-pretty text-center text-sm">
|
|
<div className="flex items-center gap-2 font-medium leading-none">
|
|
{((total / totalUser) * 100).toFixed(2)}%
|
|
<TrendingUp className="size-4" />
|
|
</div>
|
|
<div className="leading-none text-muted-foreground">
|
|
{t("Activated Api Key users")}
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|