42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { LineChart } from "@/components/charts/line-chart"
|
|
import type { ChartDataPoint } from "@/types/dashboard"
|
|
|
|
interface RevenueChartProps {
|
|
data: ChartDataPoint[]
|
|
}
|
|
|
|
export function RevenueChart({ data }: RevenueChartProps) {
|
|
const chartData = {
|
|
labels: data.map((d) => d.label),
|
|
datasets: [
|
|
{
|
|
label: "Revenue",
|
|
data: data.map((d) => d.value),
|
|
borderColor: "rgb(244, 114, 182)",
|
|
backgroundColor: "rgba(244, 114, 182, 0.2)",
|
|
},
|
|
{
|
|
label: "Subscriptions",
|
|
data: data.map((d) => d.secondaryValue || 0),
|
|
borderColor: "rgb(94, 234, 212)",
|
|
backgroundColor: "rgba(94, 234, 212, 0.2)",
|
|
},
|
|
],
|
|
}
|
|
|
|
return (
|
|
<Card className="h-[300px] 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={180} showGrid={false} showPoints={false} />
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|