75 lines
1.5 KiB
TypeScript
75 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { Bar } from "react-chartjs-2"
|
|
import { useTheme } from "next-themes"
|
|
import { getChartColors, defaultChartOptions } from "@/lib/chart-config"
|
|
import type { ChartOptions } from "chart.js"
|
|
|
|
interface BarChartProps {
|
|
data: {
|
|
labels: string[]
|
|
datasets: {
|
|
label: string
|
|
data: number[]
|
|
backgroundColor?: string | string[]
|
|
}[]
|
|
}
|
|
options?: ChartOptions<"bar">
|
|
height?: number
|
|
showGrid?: boolean
|
|
}
|
|
|
|
export function BarChart({ data, options, height = 300, showGrid = true }: BarChartProps) {
|
|
const { theme } = useTheme()
|
|
const colors = getChartColors(theme)
|
|
|
|
const chartData = {
|
|
...data,
|
|
datasets: data.datasets.map((dataset) => ({
|
|
...dataset,
|
|
backgroundColor: dataset.backgroundColor || colors.primary,
|
|
borderRadius: 6,
|
|
borderSkipped: false,
|
|
})),
|
|
}
|
|
|
|
const chartOptions: ChartOptions<"bar"> = {
|
|
...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` }}>
|
|
<Bar data={chartData} options={chartOptions} />
|
|
</div>
|
|
)
|
|
}
|