{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "line-chart-card",
  "title": "Line Chart",
  "description": "Single-series line over a soft area fill with a period switcher.",
  "dependencies": [
    "recharts@^3.10.1"
  ],
  "registryDependencies": [
    "https://components.exe.xyz/r/chart-card.json"
  ],
  "files": [
    {
      "path": "src/components/charts/line-chart-card.tsx",
      "content": "import { useId } from \"react\"\nimport {\n  Area,\n  CartesianGrid,\n  ComposedChart,\n  Line,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\"\n\nimport {\n  ChartCard,\n  ChartPeriodSwitch,\n  ChartPlot,\n  PlotTooltip,\n  axisTick,\n  formatNumber,\n  useActiveRange,\n  usePrefersReducedMotion,\n} from \"@/components/charts/chart-card\"\n\nexport type LineChartPoint = { label: string; value: number }\n\nconst DEFAULT_RANGES = [\n  {\n    id: \"weekly\",\n    label: \"Weekly\",\n    headline: 18240,\n    delta: 9.4,\n    data: [\n      { label: \"Mon\", value: 2100 },\n      { label: \"Tue\", value: 2480 },\n      { label: \"Wed\", value: 2720 },\n      { label: \"Thu\", value: 3100 },\n      { label: \"Fri\", value: 2940 },\n      { label: \"Sat\", value: 2460 },\n      { label: \"Sun\", value: 2440 },\n    ],\n  },\n  {\n    id: \"monthly\",\n    label: \"Monthly\",\n    headline: 72960,\n    delta: 6.1,\n    data: [\n      { label: \"W1\", value: 16800 },\n      { label: \"W2\", value: 18240 },\n      { label: \"W3\", value: 17680 },\n      { label: \"W4\", value: 20240 },\n    ],\n  },\n  {\n    id: \"yearly\",\n    label: \"Yearly\",\n    headline: 218880,\n    delta: 11.2,\n    data: [\n      { label: \"Jan\", value: 14800 },\n      { label: \"Feb\", value: 15200 },\n      { label: \"Mar\", value: 16800 },\n      { label: \"Apr\", value: 17400 },\n      { label: \"May\", value: 18240 },\n      { label: \"Jun\", value: 18600 },\n      { label: \"Jul\", value: 19200 },\n      { label: \"Aug\", value: 18400 },\n      { label: \"Sep\", value: 19800 },\n      { label: \"Oct\", value: 20400 },\n      { label: \"Nov\", value: 19800 },\n      { label: \"Dec\", value: 20240 },\n    ],\n  },\n]\n\nexport function LineChartCard({\n  title = \"Revenue\",\n  shape = \"smooth\",\n  data,\n  headline,\n  delta,\n  format = (n) => `$${formatNumber(Math.round(n))}`,\n  ranges,\n  className,\n}: {\n  title?: string\n  shape?: \"smooth\" | \"sharp\"\n  data?: LineChartPoint[]\n  headline?: number\n  delta?: number\n  format?: (n: number) => string\n  ranges?: {\n    id: string\n    label: string\n    data: LineChartPoint[]\n    delta?: number\n    headline?: number\n  }[]\n  className?: string\n}) {\n  const reduced = usePrefersReducedMotion()\n  const reactId = useId().replace(/:/g, \"\")\n  const fillId = `line-fill-${reactId}`\n  const usingCustomData = ranges == null && data != null\n  const plotRanges = ranges ?? (usingCustomData ? undefined : DEFAULT_RANGES)\n  const { id, setId, active } = useActiveRange(plotRanges)\n  const plotData = active?.data ?? data ?? DEFAULT_RANGES[0].data\n  const plotHeadline =\n    active?.headline ??\n    headline ??\n    plotData.reduce((sum, row) => sum + row.value, 0)\n  const plotDelta = active?.delta ?? delta ?? 9.4\n  const curve = shape === \"sharp\" ? \"linear\" : \"monotone\"\n  const summary = `${title} ${format(plotHeadline)}`\n\n  return (\n    <ChartCard\n      title={title}\n      headline={plotHeadline}\n      headlineFormat={format}\n      delta={plotDelta}\n      periodControl={\n        plotRanges ? (\n          <ChartPeriodSwitch value={id} onChange={setId} options={plotRanges} />\n        ) : undefined\n      }\n      summary={summary}\n      className={className}\n    >\n      <ChartPlot height={220} summary={summary}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ComposedChart\n            data={plotData}\n            margin={{ top: 8, right: 8, left: 0, bottom: 0 }}\n          >\n            <defs>\n              <linearGradient id={fillId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"0%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity={0.38}\n                />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity={0}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid\n              vertical={false}\n              stroke=\"var(--border)\"\n              strokeDasharray=\"1 4\"\n            />\n            <XAxis\n              dataKey=\"label\"\n              tick={axisTick}\n              tickLine={false}\n              axisLine={{ stroke: \"var(--border)\" }}\n            />\n            <YAxis\n              tick={axisTick}\n              tickLine={false}\n              axisLine={false}\n              width={40}\n              tickFormatter={(value: number) =>\n                value >= 1000\n                  ? `${Math.round(value / 100) / 10}k`\n                  : String(value)\n              }\n            />\n            <Tooltip\n              cursor={{\n                stroke: \"var(--ring)\",\n                strokeWidth: 1,\n                strokeDasharray: \"4 4\",\n              }}\n              content={<PlotTooltip formatter={(value) => format(value)} />}\n            />\n            <Area\n              type={curve}\n              dataKey=\"value\"\n              stroke=\"none\"\n              fill={`url(#${fillId})`}\n              isAnimationActive={!reduced}\n            />\n            <Line\n              type={curve}\n              dataKey=\"value\"\n              name={title}\n              stroke=\"var(--chart-1)\"\n              strokeWidth={2}\n              dot={false}\n              activeDot={{\n                r: 4,\n                fill: \"var(--chart-1)\",\n                stroke: \"var(--ring)\",\n                strokeWidth: 2,\n              }}\n              isAnimationActive={!reduced}\n            />\n          </ComposedChart>\n        </ResponsiveContainer>\n      </ChartPlot>\n    </ChartCard>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}