"use client" // shadcn import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" // third-party import { Label, Pie, PieChart } from "recharts" // assets import { ArrowUpRight, BarChart3, BellRing, Download, MoreVertical, RefreshCcw, TrendingUp, } from "lucide-react" // ------------------------------ | CHARTS 11 | ------------------------------ // const chartConfig = { income: { label: "Income", color: "var(--color-teal-600)", }, rent: { label: "Rent", color: "var(--color-amber-500)", }, download: { label: "Download", color: "var(--color-blue-500)", }, views: { label: "Views", color: "var(--color-teal-200)", }, } satisfies ChartConfig type SegmentKey = "income" | "rent" | "download" | "views" const chartData = [ { key: "income", amount: 23876, change: 763.43, fill: "var(--color-income)" }, { key: "rent", amount: 8420, change: 325.0, fill: "var(--color-rent)" }, { key: "download", amount: 15760, change: 1284.0, fill: "var(--color-download)", }, { key: "views", amount: 12480, change: 512.0, fill: "var(--color-views)" }, ] satisfies { key: SegmentKey; amount: number; change: number; fill: string }[] const currency = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }) const compactCurrency = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", notation: "compact", maximumFractionDigits: 1, }) const incomeActions = [ { label: "View breakdown", icon: BarChart3 }, { label: "Export summary", icon: Download }, { label: "Set alert", icon: BellRing }, { label: "Refresh data", icon: RefreshCcw }, ] export default function Charts11() { const total = chartData.reduce((sum, item) => sum + item.amount, 0) return (

{/* Header */}

Total Income

} > {incomeActions.map(({ icon: Icon, label }) => ( event.preventDefault()} > {label} ))} event.preventDefault()} > Compare periods

{/* Donut chart */} (

{chartConfig[name as SegmentKey]?.label} {currency.format(value as number)}

)} /> } /> { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( Total {compactCurrency.format(total)} ) } return null }} /> {/* Legend cards */}

{chartData.map((item) => ( {/* Subtle tinted glow */} {chartConfig[item.key].label}

{currency.format(item.amount)} + {currency.format(item.change)}

))}

) }