{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "peak-echarts-bar-chart",
  "description": "Stacked weekly signups with only the best week in color",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-bar-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-peak-echarts-bar-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsBarChart, type ChartConfig } from \"@/registry/charts/echarts-bar-chart\";\nimport { cn } from \"@/lib/utils\";\n\nconst chartData = [\n  { week: \"W01\", organic: 128, paid: 74 },\n  { week: \"W02\", organic: 164, paid: 91 },\n  { week: \"W03\", organic: 142, paid: 66 },\n  { week: \"W04\", organic: 199, paid: 108 },\n  { week: \"W05\", organic: 176, paid: 84 },\n  { week: \"W06\", organic: 231, paid: 167 },\n  { week: \"W07\", organic: 208, paid: 96 },\n  { week: \"W08\", organic: 287, paid: 158 },\n  { week: \"W09\", organic: 244, paid: 112 },\n  { week: \"W10\", organic: 196, paid: 88 },\n  { week: \"W11\", organic: 221, paid: 103 },\n  { week: \"W12\", organic: 173, paid: 79 },\n];\n\nconst chartConfig = {\n  organic: { label: \"Organic\", colors: { light: [\"#7c3aed\"], dark: [\"#a78bfa\"] } },\n  paid: { label: \"Paid\", colors: { light: [\"#0891b2\"], dark: [\"#22d3ee\"] } },\n} satisfies ChartConfig;\n\nconst LEGEND = [\n  { key: \"organic\", label: \"Organic\", swatch: \"bg-[#7c3aed] dark:bg-[#a78bfa]\" },\n  { key: \"paid\", label: \"Paid\", swatch: \"bg-[#0891b2] dark:bg-[#22d3ee]\" },\n];\n\nconst PEAK = chartData.reduce(\n  (best, row) => (row.organic + row.paid > best.organic + best.paid ? row : best),\n  chartData[0],\n);\nconst PEAK_TOTAL = PEAK.organic + PEAK.paid;\n\nexport function EChartsPeakBarChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col p-4\">\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-muted-foreground text-xs\">Best week</span>\n          <div className=\"flex items-baseline gap-2\">\n            <span className=\"text-primary text-2xl font-semibold tracking-tight sm:text-3xl\">\n              {PEAK_TOTAL}\n            </span>\n            <span className=\"text-muted-foreground text-sm\">signups in {PEAK.week}</span>\n          </div>\n        </div>\n        <div className=\"flex shrink-0 flex-col items-end gap-1.5 pt-1\">\n          {LEGEND.map(({ key, label, swatch }) => (\n            <span\n              key={key}\n              className=\"text-muted-foreground flex items-center gap-2 text-[11px] sm:text-xs\"\n            >\n              <span className={cn(\"size-2.5 shrink-0 rounded-[3px]\", swatch)} />\n              {label}\n            </span>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"mt-3 min-h-0 w-full flex-1\">\n        <EChartsBarChart\n          data={chartData}\n          config={chartConfig}\n          xDataKey=\"week\"\n          className=\"h-full w-full\"\n          stackType=\"stacked\"\n          enableMaxValueHighlight\n        >\n          <EChartsBarChart.XAxis dataKey=\"week\" hideDots />\n          <EChartsBarChart.Tooltip />\n          <EChartsBarChart.Bar dataKey=\"paid\" radius={6} />\n          <EChartsBarChart.Bar dataKey=\"organic\" radius={6} />\n        </EChartsBarChart>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/peak-echarts-bar-chart.tsx"
    }
  ],
  "type": "registry:block"
}