{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-echarts-bar-chart",
  "description": "Bar chart whose columns are stacks of blocks, on the ECharts blocks variant",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-bar-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-grid-echarts-bar-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsBarChart, type ChartConfig } from \"@/registry/charts/echarts-bar-chart\";\n\nconst chartData = [\n  { hour: \"00:00\", sessions: 42 },\n  { hour: \"01:00\", sessions: 28 },\n  { hour: \"02:00\", sessions: 19 },\n  { hour: \"03:00\", sessions: 14 },\n  { hour: \"04:00\", sessions: 12 },\n  { hour: \"05:00\", sessions: 18 },\n  { hour: \"06:00\", sessions: 34 },\n  { hour: \"07:00\", sessions: 66 },\n  { hour: \"08:00\", sessions: 98 },\n  { hour: \"09:00\", sessions: 124 },\n  { hour: \"10:00\", sessions: 147 },\n  { hour: \"11:00\", sessions: 163 },\n  { hour: \"12:00\", sessions: 158 },\n  { hour: \"13:00\", sessions: 171 },\n  { hour: \"14:00\", sessions: 186 },\n  { hour: \"15:00\", sessions: 174 },\n  { hour: \"16:00\", sessions: 152 },\n  { hour: \"17:00\", sessions: 138 },\n  { hour: \"18:00\", sessions: 119 },\n  { hour: \"19:00\", sessions: 96 },\n  { hour: \"20:00\", sessions: 84 },\n  { hour: \"21:00\", sessions: 71 },\n  { hour: \"22:00\", sessions: 58 },\n  { hour: \"23:00\", sessions: 47 },\n];\n\nconst chartConfig = {\n  sessions: {\n    label: \"Sessions\",\n    colors: {\n      light: [\"#18181b\"],\n      dark: [\"#FFFFFF\"],\n    },\n  },\n} satisfies ChartConfig;\n\nconst TOTAL = chartData.reduce((sum, { sessions }) => sum + sessions, 0);\nconst PEAK = chartData.reduce(\n  (max, row) => (row.sessions > max.sessions ? row : max),\n  chartData[0],\n);\n\nexport function EChartsGridBarChart() {\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\"}</span>\n            <span className=\"text-primary font-mono text-3xl tracking-tighter\">\n              {TOTAL.toLocaleString()}\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\">{\"[⬆] Peak\"}</span>\n            <span className=\"text-primary font-mono text-3xl tracking-tighter\">{PEAK.hour}</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            {\"// CELL: \"}\n            <span className=\"text-primary\">1:1</span>\n          </span>\n          <span className=\"text-muted-foreground font-mono text-[10px]\">\n            {\"// TYPE: \"}\n            <span className=\"text-primary\">GRID</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=\"hour\"\n          className=\"h-full w-full\"\n          barCategoryGap={14}\n        >\n          <EChartsBarChart.XAxis dataKey=\"hour\" hideDots />\n          <EChartsBarChart.Tooltip />\n          <EChartsBarChart.Bar dataKey=\"sessions\" variant=\"blocks\" />\n        </EChartsBarChart>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/grid-echarts-bar-chart.tsx"
    }
  ],
  "type": "registry:block"
}