41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
"use client";
|
|
import type { ChartBlock } from "@/types/page";
|
|
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from "recharts";
|
|
|
|
export default function ChartBlockView({ title, series }: ChartBlock) {
|
|
return (
|
|
<div className="w-full h-80 rounded-xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800">
|
|
<div className="mb-4 font-medium text-lg text-gray-900 dark:text-gray-100">{title}</div>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={series}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
|
<XAxis
|
|
dataKey="x"
|
|
stroke="#6b7280"
|
|
tick={{ fill: '#6b7280' }}
|
|
/>
|
|
<YAxis
|
|
stroke="#6b7280"
|
|
tick={{ fill: '#6b7280' }}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: '#1f2937',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
color: '#f9fafb'
|
|
}}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="y"
|
|
stroke="#3b82f6"
|
|
strokeWidth={2}
|
|
dot={{ fill: '#3b82f6', strokeWidth: 2, r: 4 }}
|
|
activeDot={{ r: 6, stroke: '#3b82f6', strokeWidth: 2 }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|