{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "portfolio-echarts-area-chart",
  "description": "Portfolio comparison card with hover-reveal, on the ECharts area chart",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-area-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-portfolio-echarts-area-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsAreaChart, type ChartConfig } from \"@/registry/charts/echarts-area-chart\";\n\nconst SERIES = [\n  { key: \"robinhood\", label: \"Robinhood\", color: \"#c3f000\", pct: -4.41, delta: -2377.66 },\n  { key: \"coinbase\", label: \"Coinbase\", color: \"#2f6bff\", pct: 1.15, delta: 617.22 },\n] as const;\n\nconst chartData = [\n  { date: \"Dec 22\", robinhood: 53916, coinbase: 53670 },\n  { date: \"Dec 23\", robinhood: 54380, coinbase: 53080 },\n  { date: \"Dec 24\", robinhood: 54760, coinbase: 52460 },\n  { date: \"Dec 25\", robinhood: 54480, coinbase: 51880 },\n  { date: \"Dec 26\", robinhood: 54060, coinbase: 51340 },\n  { date: \"Dec 27\", robinhood: 53820, coinbase: 50900 },\n  { date: \"Dec 28\", robinhood: 53520, coinbase: 50520 },\n  { date: \"Dec 29\", robinhood: 53240, coinbase: 50200 },\n  { date: \"Dec 30\", robinhood: 53080, coinbase: 49960 },\n  { date: \"Dec 31\", robinhood: 52840, coinbase: 49760 },\n  { date: \"Jan 1\", robinhood: 52700, coinbase: 49640 },\n  { date: \"Jan 2\", robinhood: 52520, coinbase: 49600 },\n  { date: \"Jan 3\", robinhood: 52420, coinbase: 49720 },\n  { date: \"Jan 4\", robinhood: 52340, coinbase: 49980 },\n  { date: \"Jan 5\", robinhood: 52240, coinbase: 50360 },\n  { date: \"Jan 6\", robinhood: 52140, coinbase: 50820 },\n  { date: \"Jan 7\", robinhood: 52080, coinbase: 51340 },\n  { date: \"Jan 8\", robinhood: 52020, coinbase: 51900 },\n  { date: \"Jan 9\", robinhood: 51960, coinbase: 52440 },\n  { date: \"Jan 10\", robinhood: 51900, coinbase: 52960 },\n  { date: \"Jan 11\", robinhood: 51860, coinbase: 53420 },\n  { date: \"Jan 12\", robinhood: 51800, coinbase: 53780 },\n  { date: \"Jan 13\", robinhood: 51740, coinbase: 54040 },\n  { date: \"Jan 14\", robinhood: 51700, coinbase: 54200 },\n  { date: \"Jan 15\", robinhood: 51640, coinbase: 54300 },\n  { date: \"Jan 16\", robinhood: 51580, coinbase: 54320 },\n  { date: \"Jan 17\", robinhood: 51538, coinbase: 54287 },\n];\n\nconst chartConfig = {\n  robinhood: { label: \"Robinhood\", colors: { light: [\"#a6cc00\"], dark: [\"#c3f000\"] } },\n  coinbase: { label: \"Coinbase\", colors: { light: [\"#2f6bff\"], dark: [\"#4c86ff\"] } },\n} satisfies ChartConfig;\n\nconst money = (value: number) =>\n  Math.abs(value).toLocaleString(\"en-US\", { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n\nexport function EChartsPortfolioAreaChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col pt-4\">\n      <div className=\"grid grid-cols-2 gap-x-8 px-4\">\n        {SERIES.map(({ key, label, color, pct, delta }) => (\n          <div key={key} className=\"flex flex-col gap-1\">\n            <div className=\"text-muted-foreground flex items-center gap-2 text-sm\">\n              <span\n                className=\"size-3 shrink-0 rounded-full border-2\"\n                style={{ borderColor: color }}\n              />\n              {label}\n            </div>\n            <div className=\"text-primary text-2xl font-semibold tracking-tight sm:text-3xl\">\n              {pct > 0 ? \"+\" : \"−\"}\n              {Math.abs(pct).toFixed(2)}%\n            </div>\n            <div className={delta < 0 ? \"text-rose-500\" : \"text-emerald-500\"}>\n              {delta < 0 ? \"−\" : \"+\"}${money(delta)}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      <EChartsAreaChart\n        data={chartData}\n        config={chartConfig}\n        xDataKey=\"date\"\n        className=\"mt-4 min-h-0 w-full flex-1\"\n        curveType=\"step\"\n        enableHoverReveal\n        chartOptions={{\n          grid: { left: 0, right: 0, top: 16, bottom: 0 },\n          yAxis: { type: \"value\", show: false, scale: true, boundaryGap: [\"12%\", \"16%\"] },\n        }}\n      >\n        <EChartsAreaChart.Tooltip variant=\"frosted-glass\" />\n        <EChartsAreaChart.Area dataKey=\"robinhood\" variant=\"dotted\" strokeVariant=\"solid\">\n          <EChartsAreaChart.ActiveDot variant=\"ping\" />\n        </EChartsAreaChart.Area>\n        <EChartsAreaChart.Area dataKey=\"coinbase\" variant=\"dotted\" strokeVariant=\"solid\">\n          <EChartsAreaChart.ActiveDot variant=\"ping\" />\n        </EChartsAreaChart.Area>\n      </EChartsAreaChart>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/portfolio-echarts-area-chart.tsx"
    }
  ],
  "type": "registry:block"
}