68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Cell,
|
|
} from "recharts";
|
|
import { PLATFORM_MAP } from "@/lib/platforms";
|
|
|
|
interface PlatformData {
|
|
platform: string;
|
|
rate: number;
|
|
label: string;
|
|
}
|
|
|
|
interface PlatformChartProps {
|
|
data: Record<string, { queries: number; citations: number; rate: number; avg_position: number }>;
|
|
}
|
|
|
|
const COLORS = [
|
|
"hsl(221.2 83.2% 53.3%)",
|
|
"hsl(142.1 76.2% 36.3%)",
|
|
"hsl(346.8 77.2% 49.8%)",
|
|
"hsl(24.6 95% 53.1%)",
|
|
"hsl(262.1 83.3% 57.8%)",
|
|
"hsl(188.7 94.5% 42.6%)",
|
|
];
|
|
|
|
export function PlatformChart({ data }: PlatformChartProps) {
|
|
const chartData: PlatformData[] = Object.entries(data).map(([platform, stats]) => ({
|
|
platform,
|
|
rate: Math.round(stats.rate * 100),
|
|
label: PLATFORM_MAP[platform] || platform,
|
|
}));
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<BarChart data={chartData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis dataKey="label" tick={{ fontSize: 12 }} />
|
|
<YAxis
|
|
tick={{ fontSize: 12 }}
|
|
domain={[0, 100]}
|
|
tickFormatter={(value: number) => `${value}%`}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: "hsl(var(--card))",
|
|
border: "1px solid hsl(var(--border))",
|
|
borderRadius: "var(--radius)",
|
|
}}
|
|
formatter={(value: number) => [`引用率: ${value}%`, ""]}
|
|
/>
|
|
<Bar dataKey="rate" radius={[4, 4, 0, 0]}>
|
|
{chartData.map((_, index) => (
|
|
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|