74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
XAxis,
|
|
YAxis,
|
|
LabelList,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
import { Card, CardContent } from "~/components/ui/card";
|
|
import {
|
|
type ChartConfig,
|
|
ChartContainer,
|
|
} from "~/components/ui/chart";
|
|
import { formatNumber } from "~/lib/utils";
|
|
|
|
export type PopupChartDatum = {
|
|
name: string;
|
|
value: number;
|
|
};
|
|
|
|
const chartConfig = {
|
|
value: {
|
|
label: "Operational Fee",
|
|
color: "#4ADE80", // Green-400
|
|
},
|
|
} satisfies ChartConfig;
|
|
|
|
|
|
export function PopupBarChart({
|
|
data,
|
|
}: {
|
|
data: PopupChartDatum[];
|
|
}) {
|
|
return (
|
|
<Card className="py-0 bg-transparent mt-4 border-none h-full">
|
|
<CardContent className="px-2 sm:p-6 bg-transparent">
|
|
<ChartContainer config={chartConfig} className="aspect-auto h-80 w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
accessibilityLayer
|
|
data={data}
|
|
margin={{ top: 20, right: 20, left: 20, bottom: 5 }}
|
|
>
|
|
<CartesianGrid vertical={false} stroke="#475569" />
|
|
<XAxis
|
|
dataKey="name"
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
tick={{ fill: "#94a3b8", fontSize: 12 }}
|
|
/>
|
|
<YAxis
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
tick={{ fill: "#94a3b8", fontSize: 12 }}
|
|
tickFormatter={(value) => `${formatNumber(Math.round(value))}`}
|
|
/>
|
|
<Bar dataKey="value" fill={chartConfig.value.color} radius={[8, 8, 0, 0]}>
|
|
<LabelList
|
|
dataKey="value"
|
|
position="top"
|
|
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
|
|
formatter={(v: number) => `${formatNumber(Math.round(v))}`}
|
|
/>
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |