{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "price-history-chart",
  "title": "Price History Chart",
  "description": "Area chart of a product's price over time, built on the shadcn chart wrapper.",
  "dependencies": [
    "@channel3/sdk",
    "recharts"
  ],
  "registryDependencies": [
    "chart",
    "empty",
    "https://ui.trychannel3.com/r/format.json"
  ],
  "files": [
    {
      "path": "registry/default/components/price-history-chart.tsx",
      "content": "import * as React from \"react\";\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\";\nimport type { PriceHistoryPoint } from \"@channel3/sdk/resources\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  type ChartConfig,\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from \"@/components/ui/empty\";\nimport { formatCurrency } from \"@/registry/default/lib/format\";\n\nconst chartConfig = {\n  price: { label: \"Price\", color: \"var(--chart-1)\" },\n} satisfies ChartConfig;\n\nexport interface PriceHistoryChartProps extends React.ComponentProps<\"div\"> {\n  history: ReadonlyArray<PriceHistoryPoint>;\n  currency?: string;\n  locale?: string;\n}\n\nexport function PriceHistoryChart({\n  history,\n  currency,\n  locale,\n  className,\n  ...props\n}: PriceHistoryChartProps) {\n  const points = React.useMemo(\n    () => [...history].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime()),\n    [history],\n  );\n\n  if (points.length === 0) {\n    return (\n      <Empty className={className} {...props}>\n        <EmptyHeader>\n          <EmptyTitle>No price history</EmptyTitle>\n          <EmptyDescription>Price tracking hasn't recorded any data points yet.</EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    );\n  }\n\n  const code = currency ?? points[0]?.currency ?? \"USD\";\n  const prices = points.map((p) => p.price);\n  const lo = Math.min(...prices);\n  const hi = Math.max(...prices);\n  const pad = (hi - lo || hi || 1) * 0.15; // flat or all-zero series\n  const yDomain: [number, number] = [Math.max(0, lo - pad), hi + pad];\n  const formatDate = (value: Date) =>\n    value.toLocaleDateString(locale, { month: \"short\", day: \"numeric\" });\n  const formatAxis = (value: number) =>\n    new Intl.NumberFormat(locale, {\n      style: \"currency\",\n      currency: code,\n      notation: \"compact\",\n      maximumFractionDigits: 1,\n    }).format(value);\n\n  return (\n    <ChartContainer config={chartConfig} className={cn(\"aspect-16/7 w-full\", className)} {...props}>\n      <AreaChart data={points} margin={{ left: 4, right: 4, top: 8, bottom: 0 }}>\n        <defs>\n          <linearGradient id=\"channel3-price-fill\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"5%\" stopColor=\"var(--color-price)\" stopOpacity={0.3} />\n            <stop offset=\"95%\" stopColor=\"var(--color-price)\" stopOpacity={0.02} />\n          </linearGradient>\n        </defs>\n        <CartesianGrid vertical={false} />\n        <XAxis\n          dataKey=\"timestamp\"\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          minTickGap={24}\n          tickFormatter={formatDate}\n        />\n        <YAxis\n          tickLine={false}\n          axisLine={false}\n          tickMargin={8}\n          width={56}\n          domain={yDomain}\n          tickFormatter={formatAxis}\n        />\n        <ChartTooltip\n          content={\n            <ChartTooltipContent\n              labelFormatter={(_label, payload) => {\n                const raw = payload?.[0]?.payload as PriceHistoryPoint | undefined;\n                return raw ? raw.timestamp.toLocaleDateString(locale, {\n                  year: \"numeric\",\n                  month: \"short\",\n                  day: \"numeric\",\n                }) : \"\";\n              }}\n              formatter={(value) => formatCurrency(Number(value), code, locale)}\n            />\n          }\n        />\n        <Area\n          dataKey=\"price\"\n          type=\"monotone\"\n          stroke=\"var(--color-price)\"\n          strokeWidth={2}\n          fill=\"url(#channel3-price-fill)\"\n        />\n      </AreaChart>\n    </ChartContainer>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}