{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "portfolio-chart",
  "type": "registry:component",
  "registryDependencies": [],
  "files": [
    {
      "path": "components/domain-ui/experimental/portfolio-chart.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from \"recharts\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\nexport interface PortfolioDataPoint {\n  timestamp: number\n  value: number\n}\n\nexport interface PortfolioChartProps {\n  data: PortfolioDataPoint[]\n  className?: string\n  height?: number\n  showGrid?: boolean\n  showTooltip?: boolean\n  timePeriods?: Array<{\n    label: string\n    value: string\n    days: number\n  }>\n  onTimePeriodChange?: (period: string) => void\n  selectedTimePeriod?: string\n}\n\nconst DEFAULT_TIME_PERIODS = [\n  { label: \"1D\", value: \"1D\", days: 1 },\n  { label: \"1W\", value: \"1W\", days: 7 },\n  { label: \"1M\", value: \"1M\", days: 30 },\n  { label: \"3M\", value: \"3M\", days: 90 },\n  { label: \"1Y\", value: \"1Y\", days: 365 },\n  { label: \"ALL\", value: \"ALL\", days: -1 }\n]\n\nconst chartConfig = {\n  value: {\n    label: \"Portfolio Value\",\n    color: \"hsl(var(--chart-1))\",\n  },\n} satisfies ChartConfig\n\nexport function PortfolioChart({\n  data,\n  className,\n  height = 200,\n  showGrid = true,\n  showTooltip = true,\n  timePeriods = DEFAULT_TIME_PERIODS,\n  onTimePeriodChange,\n  selectedTimePeriod = \"1D\"\n}: PortfolioChartProps) {\n  // Transform data for Recharts\n  const chartData = React.useMemo(() => {\n    return data.map((point) => ({\n      timestamp: point.timestamp,\n      value: point.value,\n      date: new Date(point.timestamp).toLocaleDateString('en-US', {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric'\n      }),\n      time: new Date(point.timestamp).toLocaleTimeString('en-US', {\n        hour: '2-digit',\n        minute: '2-digit'\n      })\n    }))\n  }, [data])\n\n  // Determine if portfolio is up or down\n  const isPositive = data.length > 1 && \n    data[data.length - 1]?.value !== undefined && \n    data[0]?.value !== undefined && \n    data[data.length - 1].value >= data[0].value\n  const currentColor = isPositive ? \"#00C805\" : \"#FF3B30\"\n\n  // Format currency\n  const formatCurrency = (value: number) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD',\n      minimumFractionDigits: 2\n    }).format(value)\n  }\n\n  // Calculate percentage change\n  const calculateChange = () => {\n    if (data.length < 2) return { amount: 0, percentage: 0 }\n    const start = data[0]?.value || 0\n    const end = data[data.length - 1]?.value || 0\n    const amount = end - start\n    const percentage = start !== 0 ? (amount / start) * 100 : 0\n    return { amount, percentage }\n  }\n\n  const change = calculateChange()\n  const currentValue = data[data.length - 1]?.value || 0\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      {/* Header with current value and change */}\n      <div className=\"mb-4\">\n        <div className=\"text-2xl font-bold\">\n          {formatCurrency(currentValue)}\n        </div>\n        <div className={cn(\n          \"text-sm font-medium\",\n          isPositive ? \"text-green-600\" : \"text-red-600\"\n        )}>\n          {isPositive ? \"+\" : \"\"}{formatCurrency(change.amount)} ({isPositive ? \"+\" : \"\"}{change.percentage.toFixed(2)}%)\n        </div>\n      </div>\n\n      {/* Time period selector */}\n      <div className=\"flex gap-1 mb-4\">\n        {timePeriods.map((period) => (\n          <button\n            key={period.value}\n            onClick={() => onTimePeriodChange?.(period.value)}\n            className={cn(\n              \"px-3 py-1 text-xs font-medium rounded transition-colors\",\n              selectedTimePeriod === period.value\n                ? \"bg-primary text-primary-foreground\"\n                : \"text-muted-foreground hover:text-foreground hover:bg-muted\"\n            )}\n          >\n            {period.label}\n          </button>\n        ))}\n      </div>\n\n      {/* Chart */}\n      <ChartContainer\n        config={chartConfig}\n        className={cn(\"h-[200px]\", `h-[${height}px]`)}\n      >\n        <AreaChart\n          accessibilityLayer\n          data={chartData}\n          margin={{\n            left: 12,\n            right: 12,\n            top: 12,\n            bottom: 12,\n          }}\n        >\n          {showGrid && (\n            <>\n              <XAxis\n                dataKey=\"timestamp\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                hide\n              />\n              <YAxis\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                hide\n              />\n            </>\n          )}\n          {showTooltip && (\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name, props) => (\n                    <div className=\"flex flex-col gap-1\">\n                      <div className=\"font-medium\">\n                        {formatCurrency(value as number)}\n                      </div>\n                      <div className=\"text-xs text-muted-foreground\">\n                        {props.payload?.date} at {props.payload?.time}\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n            />\n          )}\n          <defs>\n            <linearGradient id=\"fillValue\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop\n                offset=\"5%\"\n                stopColor={currentColor}\n                stopOpacity={0.3}\n              />\n              <stop\n                offset=\"95%\"\n                stopColor={currentColor}\n                stopOpacity={0.1}\n              />\n            </linearGradient>\n          </defs>\n          <Area\n            dataKey=\"value\"\n            type=\"monotone\"\n            fill=\"url(#fillValue)\"\n            fillOpacity={0.4}\n            stroke={currentColor}\n            strokeWidth={2}\n            dot={false}\n            activeDot={{\n              r: 4,\n              fill: currentColor,\n              stroke: \"white\",\n              strokeWidth: 2,\n            }}\n          />\n        </AreaChart>\n      </ChartContainer>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "chart",
      "portfolio",
      "timeline",
      "finance",
      "visualization",
      "interactive",
      "svg",
      "experimental",
      "robinhood",
      "investment"
    ]
  }
}