53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { useTheme } from "next-themes"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { BarChart } from "@/components/charts/bar-chart"
|
|
import { getChartColors } from "@/lib/chart-config"
|
|
import type { ChartDataPoint } from "@/types/dashboard"
|
|
|
|
interface SalesChartProps {
|
|
data: ChartDataPoint[]
|
|
}
|
|
|
|
export function SalesChart({ data }: SalesChartProps) {
|
|
const { theme } = useTheme()
|
|
const colors = getChartColors(theme)
|
|
|
|
// Calculate total and change percentage
|
|
const total = data.reduce((sum, d) => sum + d.value, 0)
|
|
const lastMonthValue = data[data.length - 2]?.value || 0
|
|
const currentMonthValue = data[data.length - 1]?.value || 0
|
|
const changePercent = lastMonthValue > 0
|
|
? (((currentMonthValue - lastMonthValue) / lastMonthValue) * 100).toFixed(1)
|
|
: "0.0"
|
|
|
|
// Alternate colors for bars using centralized palette
|
|
const backgroundColors = data.map((_, index) =>
|
|
index % 2 === 0 ? colors.darkBlue : colors.orange
|
|
)
|
|
|
|
const chartData = {
|
|
labels: data.map((d) => d.label),
|
|
datasets: [
|
|
{
|
|
label: "Expenditure",
|
|
data: data.map((d) => d.value),
|
|
backgroundColor: backgroundColors,
|
|
},
|
|
],
|
|
}
|
|
|
|
return (
|
|
<Card className="h-[350px] flex flex-col">
|
|
<CardHeader className="flex-shrink-0">
|
|
<CardTitle>Expenditure</CardTitle>
|
|
<CardDescription>+{changePercent}% from last month</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 min-h-0">
|
|
<BarChart data={chartData} height={230} showGrid={false} />
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|