"use client" import { CSSProperties } from "react" import { Badge } from "@/components/reui/badge" import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card" import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig, } from "@/components/ui/chart" import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" const chartData = [ { month: "January", organic: 1200, paid: 580, referral: 320 }, { month: "February", organic: 1450, paid: 620, referral: 380 }, { month: "March", organic: 1380, paid: 540, referral: 420 }, { month: "April", organic: 1650, paid: 710, referral: 460 }, { month: "May", organic: 1520, paid: 680, referral: 390 }, { month: "June", organic: 1800, paid: 750, referral: 510 }, ] const chartConfig = { organic: { label: "Organic", color: "var(--chart-1)" }, paid: { label: "Paid", color: "var(--chart-2)" }, referral: { label: "Referral", color: "var(--chart-3)" }, } satisfies ChartConfig export function Pattern() { return ( Traffic Sources Visitor acquisition by channel {(["organic", "paid", "referral"] as const).map((key) => ( ))} value.slice(0, 3)} /> (

{value} 2024

)} formatter={(value, name) => (

{chartConfig[name as keyof typeof chartConfig] ?.label || name}

{Number(value).toLocaleString()}

)} /> } /> ) }