47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import { useTheme } from "next-themes"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { LineChart } from "@/components/charts/line-chart"
|
|
import { getChartColors } from "@/lib/chart-config"
|
|
import type { ChartDataPoint } from "@/types/dashboard"
|
|
|
|
interface RevenueChartProps {
|
|
data: ChartDataPoint[]
|
|
}
|
|
|
|
export function RevenueChart({ data }: RevenueChartProps) {
|
|
const { theme } = useTheme()
|
|
const colors = getChartColors(theme)
|
|
|
|
const chartData = {
|
|
labels: data.map((d) => d.label),
|
|
datasets: [
|
|
{
|
|
label: "Revenue",
|
|
data: data.map((d) => d.value),
|
|
borderColor: colors.blue,
|
|
backgroundColor: `${colors.blue.replace('rgb', 'rgba').replace(')', ', 0.2)')}`,
|
|
},
|
|
{
|
|
label: "Subscriptions",
|
|
data: data.map((d) => d.secondaryValue || 0),
|
|
borderColor: colors.orange,
|
|
backgroundColor: `${colors.orange.replace('rgb', 'rgba').replace(')', ', 0.2)')}`,
|
|
},
|
|
],
|
|
}
|
|
|
|
return (
|
|
<Card className="h-[350px] flex flex-col">
|
|
<CardHeader className="flex-shrink-0">
|
|
<CardTitle>Revenue Overview</CardTitle>
|
|
<CardDescription>Showing total revenue for the last 6 months</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 min-h-0">
|
|
<LineChart data={chartData} height={230} showGrid={false} showPoints={false} />
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|