{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "line-chart-card",
  "title": "Line Chart Card",
  "author": "Zubeyr <https://zubeyr.dev>",
  "description": "Smooth area chart comparing this period against the last, with a dotted comparison line, trend and legend.",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://tomei.zubeyr.dev/ui/r/card.json"
  ],
  "files": [
    {
      "path": "registry/dashboard/blocks/line-chart-card/line-chart-card.tsx",
      "content": "'use client'\n\nimport { useId } from 'react'\nimport {\n  Area,\n  AreaChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from 'recharts'\n\nimport { Card, LegendItem } from '@/registry/dashboard/components/card/card'\n\nexport type LinePoint = { label: string; current: number; previous?: number }\n\ntype LineChartCardProps = {\n  title: React.ReactNode\n  data: LinePoint[]\n  value?: React.ReactNode\n  change?: number\n  currentLabel?: string\n  previousLabel?: string\n  formatOptions?: Intl.NumberFormatOptions\n  action?: React.ReactNode\n  height?: number\n  className?: string\n}\n\nexport function LineChartCard({\n  title,\n  data,\n  value,\n  change,\n  currentLabel = 'This period',\n  previousLabel = 'Previous period',\n  formatOptions,\n  action,\n  height = 200,\n  className,\n}: LineChartCardProps) {\n  const gradient = `fill-${useId().replace(/[^a-zA-Z0-9]/g, '')}`\n  const full = new Intl.NumberFormat('en', formatOptions)\n  const compact = new Intl.NumberFormat('en', { ...formatOptions, notation: 'compact' })\n  const hasPrevious = data.some((d) => d.previous !== undefined)\n\n  return (\n    <Card\n      title={title}\n      value={value}\n      change={change}\n      action={action}\n      className={className}\n      legend={\n        <>\n          <LegendItem color=\"var(--chart-1)\">{currentLabel}</LegendItem>\n          {hasPrevious && (\n            <LegendItem color=\"var(--chart-2)\" dashed>\n              {previousLabel}\n            </LegendItem>\n          )}\n        </>\n      }\n    >\n      <ResponsiveContainer width=\"100%\" height={height}>\n        <AreaChart data={data} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>\n          <defs>\n            <linearGradient id={gradient} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stopColor=\"var(--chart-1)\" stopOpacity={0.18} />\n              <stop offset=\"100%\" stopColor=\"var(--chart-1)\" stopOpacity={0} />\n            </linearGradient>\n          </defs>\n          <CartesianGrid vertical={false} stroke=\"var(--border)\" />\n          <XAxis\n            dataKey=\"label\"\n            axisLine={false}\n            tickLine={false}\n            minTickGap={32}\n            tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }}\n          />\n          <YAxis\n            width={44}\n            axisLine={false}\n            tickLine={false}\n            tickCount={3}\n            tickFormatter={(v: number) => compact.format(v)}\n            tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }}\n          />\n          <Tooltip\n            cursor={{ stroke: 'var(--border)', strokeWidth: 1 }}\n            content={({ active, payload, label }) =>\n              active && payload?.length ? (\n                <div className=\"rounded-lg bg-popover px-3 py-2 text-xs text-popover-foreground shadow-(--shadow-card)\">\n                  <p className=\"mb-1 text-muted-foreground\">{label}</p>\n                  {payload.map((p) => (\n                    <p key={String(p.dataKey)} className=\"flex items-center gap-2 tabular-nums\">\n                      <span\n                        className=\"size-2 rounded-full\"\n                        style={{\n                          background: p.dataKey === 'current' ? 'var(--chart-1)' : 'var(--chart-2)',\n                        }}\n                      />\n                      {full.format(Number(p.value))}\n                    </p>\n                  ))}\n                </div>\n              ) : null\n            }\n          />\n          {hasPrevious && (\n            <Area\n              type=\"monotone\"\n              dataKey=\"previous\"\n              stroke=\"var(--chart-2)\"\n              strokeWidth={2.5}\n              strokeDasharray=\"0.5 6\"\n              strokeLinecap=\"round\"\n              fill=\"none\"\n              dot={false}\n              activeDot={false}\n            />\n          )}\n          <Area\n            type=\"monotone\"\n            dataKey=\"current\"\n            stroke=\"var(--chart-1)\"\n            strokeWidth={2.5}\n            fill={`url(#${gradient})`}\n            dot={false}\n            activeDot={{ r: 4, strokeWidth: 0, fill: 'var(--chart-1)' }}\n          />\n        </AreaChart>\n      </ResponsiveContainer>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/dashboard/line-chart-card.tsx"
    }
  ],
  "meta": {
    "scenario": "dashboard",
    "kind": "blocks"
  },
  "categories": [
    "dashboard",
    "charts"
  ],
  "type": "registry:block"
}