{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "earnings-chart-card",
  "title": "Earnings Chart",
  "description": "Period-switchable rounded bars with a count-up total and hover outline.",
  "dependencies": [
    "recharts@^3.10.1"
  ],
  "registryDependencies": [
    "https://components.exe.xyz/r/chart-card.json"
  ],
  "files": [
    {
      "path": "src/components/charts/earnings-chart-card.tsx",
      "content": "import { useState } from \"react\"\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\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  usePrefersReducedMotion,\n} from \"@/components/charts/chart-card\"\n\ntype Period = \"weekly\" | \"monthly\" | \"yearly\"\ntype EarningsPoint = { label: string; value: number }\n\nconst DEFAULT_SERIES: Record<Period, EarningsPoint[]> = {\n  weekly: [\n    { label: \"Mon\", value: 240 },\n    { label: \"Tue\", value: 310 },\n    { label: \"Wed\", value: 280 },\n    { label: \"Thu\", value: 420 },\n    { label: \"Fri\", value: 390 },\n    { label: \"Sat\", value: 120 },\n    { label: \"Sun\", value: 82 },\n  ],\n  monthly: [\n    { label: \"W1\", value: 1680 },\n    { label: \"W2\", value: 1920 },\n    { label: \"W3\", value: 1740 },\n    { label: \"W4\", value: 2122 },\n  ],\n  yearly: [\n    { label: \"Jan\", value: 5200 },\n    { label: \"Feb\", value: 5480 },\n    { label: \"Mar\", value: 6100 },\n    { label: \"Apr\", value: 6420 },\n    { label: \"May\", value: 7010 },\n    { label: \"Jun\", value: 7462 },\n    { label: \"Jul\", value: 7820 },\n    { label: \"Aug\", value: 7340 },\n    { label: \"Sep\", value: 8120 },\n    { label: \"Oct\", value: 8680 },\n    { label: \"Nov\", value: 9240 },\n    { label: \"Dec\", value: 10368 },\n  ],\n}\n\nconst DEFAULT_HEADLINE: Record<Period, number> = {\n  weekly: 1842,\n  monthly: 7462,\n  yearly: 89240,\n}\n\nconst DEFAULT_DELTA: Record<Period, number> = {\n  weekly: 6.4,\n  monthly: 14.8,\n  yearly: 9.1,\n}\n\nconst PERIODS: { id: Period; label: string }[] = [\n  { id: \"weekly\", label: \"Weekly\" },\n  { id: \"monthly\", label: \"Monthly\" },\n  { id: \"yearly\", label: \"Yearly\" },\n]\n\nexport function EarningsChartCard({\n  title = \"Earned so far\",\n  seriesByPeriod = DEFAULT_SERIES,\n  headlineByPeriod = DEFAULT_HEADLINE,\n  deltaByPeriod = DEFAULT_DELTA,\n  format = (n) => `$${formatNumber(Math.round(n))}`,\n}: {\n  title?: string\n  seriesByPeriod?: Record<Period, EarningsPoint[]>\n  headlineByPeriod?: Record<Period, number>\n  deltaByPeriod?: Record<Period, number>\n  format?: (n: number) => string\n}) {\n  const reduced = usePrefersReducedMotion()\n  const [period, setPeriod] = useState<Period>(\"monthly\")\n  const series = seriesByPeriod[period]\n  const headline = headlineByPeriod[period]\n  const delta = deltaByPeriod[period]\n  const summary = `${title} ${format(headline)} ${period}`\n\n  return (\n    <ChartCard\n      title={title}\n      headline={headline}\n      headlineFormat={format}\n      delta={delta}\n      periodControl={\n        <ChartPeriodSwitch\n          value={period}\n          onChange={(id) => setPeriod(id as Period)}\n          options={PERIODS}\n        />\n      }\n      summary={summary}\n    >\n      <ChartPlot height={220} summary={summary}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <BarChart\n            data={series}\n            margin={{ top: 8, right: 8, left: 0, bottom: 0 }}\n            barCategoryGap=\"22%\"\n          >\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={false}\n              content={<PlotTooltip formatter={(value) => format(value)} />}\n            />\n            <Bar\n              dataKey=\"value\"\n              name=\"Earned\"\n              fill=\"var(--chart-1)\"\n              radius={2}\n              maxBarSize={42}\n              isAnimationActive={!reduced}\n              activeBar={{\n                fill: \"var(--chart-1)\",\n                stroke: \"var(--ring)\",\n                strokeWidth: 2,\n                radius: 2,\n              }}\n            />\n          </BarChart>\n        </ResponsiveContainer>\n      </ChartPlot>\n    </ChartCard>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}