{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "monospace-echarts-bar-chart",
  "description": "Monospace sales card whose hairline bars expand on hover, on the ECharts bar chart",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-bar-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-monospace-echarts-bar-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsBarChart, type ChartConfig } from \"@/registry/charts/echarts-bar-chart\";\n\nconst chartData = [\n  { month: \"Jan '24\", sales: 342 },\n  { month: \"Feb '24\", sales: 876 },\n  { month: \"Mar '24\", sales: 512 },\n  { month: \"Apr '24\", sales: 629 },\n  { month: \"May '24\", sales: 458 },\n  { month: \"Jun '24\", sales: 781 },\n  { month: \"Jul '24\", sales: 394 },\n  { month: \"Aug '24\", sales: 925 },\n  { month: \"Sep '24\", sales: 647 },\n  { month: \"Oct '24\", sales: 532 },\n  { month: \"Nov '24\", sales: 803 },\n  { month: \"Dec '24\", sales: 271 },\n  { month: \"Jan '25\", sales: 388 },\n  { month: \"Feb '25\", sales: 912 },\n  { month: \"Mar '25\", sales: 564 },\n  { month: \"Apr '25\", sales: 671 },\n  { month: \"May '25\", sales: 499 },\n  { month: \"Jun '25\", sales: 838 },\n  { month: \"Jul '25\", sales: 427 },\n  { month: \"Aug '25\", sales: 968 },\n  { month: \"Sep '25\", sales: 702 },\n  { month: \"Oct '25\", sales: 585 },\n  { month: \"Nov '25\", sales: 861 },\n  { month: \"Dec '25\", sales: 314 },\n];\n\nconst chartConfig = {\n  sales: {\n    label: \"Sales\",\n    colors: {\n      light: [\"#18181b\"],\n      dark: [\"#fafafa\"],\n    },\n  },\n} satisfies ChartConfig;\n\nconst TOTAL = chartData.reduce((sum, { sales }) => sum + sales, 0);\nconst TOP = chartData.reduce((max, row) => (row.sales > max.sales ? row : max), chartData[0]);\n\nexport function EChartsMonospaceBarChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col p-4\">\n      <div className=\"flex flex-row justify-between\">\n        <div className=\"flex flex-row\">\n          <div className=\"flex flex-col gap-2\">\n            <span className=\"text-muted-foreground font-mono text-xs\">{\"[$] Total Sales\"}</span>\n            <span className=\"text-primary font-mono text-3xl\">\n              <span className=\"text-muted-foreground text-xl font-normal\">$</span>\n              <span className=\"tracking-tighter\">{TOTAL.toLocaleString()}</span>\n            </span>\n          </div>\n          <hr className=\"mx-4 h-full border-l border-dashed\" />\n          <div className=\"flex flex-col gap-2\">\n            <span className=\"text-muted-foreground font-mono text-xs\">{\"[⬆] Top Month\"}</span>\n            <span className=\"text-primary font-mono text-3xl tracking-tighter\">{TOP.month}</span>\n          </div>\n        </div>\n        <div className=\"flex flex-col justify-end gap-1\">\n          <span className=\"text-muted-foreground font-mono text-[10px]\">\n            {\"// X-AXIS: \"}\n            <span className=\"text-primary\">MONTHS</span>\n          </span>\n          <span className=\"text-muted-foreground font-mono text-[10px]\">\n            {\"// Y-AXIS: \"}\n            <span className=\"text-primary\">SALES</span>\n          </span>\n        </div>\n      </div>\n\n      <hr className=\"my-4 border-t border-dashed\" />\n\n      <div className=\"min-h-0 w-full flex-1\">\n        <EChartsBarChart\n          data={chartData}\n          config={chartConfig}\n          xDataKey=\"month\"\n          className=\"h-full w-full\"\n        >\n          <EChartsBarChart.XAxis\n            dataKey=\"month\"\n            tickFormatter={(value) => value.slice(0, 3)}\n            hideDots\n          />\n          <EChartsBarChart.Bar dataKey=\"sales\" variant=\"expandable\" />\n        </EChartsBarChart>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/monospace-echarts-bar-chart.tsx"
    }
  ],
  "type": "registry:block"
}