60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
|
|
interface TrendData {
|
|
date: string;
|
|
citations: number;
|
|
}
|
|
|
|
interface TrendChartProps {
|
|
data: TrendData[];
|
|
}
|
|
|
|
export function TrendChart({ data }: TrendChartProps) {
|
|
return (
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<LineChart data={data} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis
|
|
dataKey="date"
|
|
tick={{ fontSize: 12 }}
|
|
tickFormatter={(value: string) => {
|
|
const date = new Date(value);
|
|
return `${date.getMonth() + 1}/${date.getDate()}`;
|
|
}}
|
|
/>
|
|
<YAxis tick={{ fontSize: 12 }} allowDecimals={false} />
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: "hsl(var(--card))",
|
|
border: "1px solid hsl(var(--border))",
|
|
borderRadius: "var(--radius)",
|
|
}}
|
|
labelFormatter={(value: string) => {
|
|
const date = new Date(value);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
|
|
}}
|
|
formatter={(value: number) => [`引用次数: ${value}`, ""]}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="citations"
|
|
stroke="hsl(221.2 83.2% 53.3%)"
|
|
strokeWidth={2}
|
|
dot={{ r: 3 }}
|
|
activeDot={{ r: 5 }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|