81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { Line } from "react-chartjs-2"
|
|
import { useTheme } from "next-themes"
|
|
import { getChartColors, defaultChartOptions } from "@/lib/chart-config"
|
|
import type { ChartOptions } from "chart.js"
|
|
|
|
interface LineChartProps {
|
|
data: {
|
|
labels: string[]
|
|
datasets: {
|
|
label: string
|
|
data: number[]
|
|
borderColor?: string
|
|
backgroundColor?: string
|
|
}[]
|
|
}
|
|
options?: ChartOptions<"line">
|
|
height?: number
|
|
showGrid?: boolean
|
|
showPoints?: boolean
|
|
}
|
|
|
|
export function LineChart({ data, options, height = 300, showGrid = true, showPoints = true }: LineChartProps) {
|
|
const { theme } = useTheme()
|
|
const colors = getChartColors(theme)
|
|
|
|
const chartData = {
|
|
...data,
|
|
datasets: data.datasets.map((dataset, index) => ({
|
|
...dataset,
|
|
borderColor: dataset.borderColor || (index === 0 ? colors.primary : colors.secondary),
|
|
backgroundColor: dataset.backgroundColor || (index === 0 ? `${colors.primary}20` : `${colors.secondary}20`),
|
|
tension: 0.4,
|
|
fill: true,
|
|
borderWidth: 2,
|
|
pointRadius: showPoints ? 3 : 0,
|
|
pointHoverRadius: showPoints ? 5 : 0,
|
|
})),
|
|
}
|
|
|
|
const chartOptions: ChartOptions<"line"> = {
|
|
...defaultChartOptions,
|
|
...options,
|
|
scales: {
|
|
y: {
|
|
display: showGrid,
|
|
grid: {
|
|
display: showGrid,
|
|
color: colors.grid,
|
|
},
|
|
ticks: {
|
|
display: showGrid,
|
|
color: colors.text,
|
|
},
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
color: colors.text,
|
|
},
|
|
},
|
|
},
|
|
plugins: {
|
|
...defaultChartOptions.plugins,
|
|
...options?.plugins,
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
}
|
|
|
|
return (
|
|
<div style={{ height: `${height}px` }}>
|
|
<Line data={chartData} options={chartOptions} />
|
|
</div>
|
|
)
|
|
}
|