{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "most-visited-chart",
  "type": "registry:component",
  "description": "A Chart component with optional code display for UI blocks.",
  "dependencies": [
    "@iconify/react"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/charts/code/MostVisitedCode.tsx",
      "content": "\"use client\";\r\nimport React from \"react\";\r\nimport { Card } from '@/components/ui/card'\r\nimport dynamic from \"next/dynamic\";\r\nconst Chart = dynamic(() => import(\"react-apexcharts\"), { ssr: false });\r\nimport {\r\n  Select,\r\n  SelectTrigger,\r\n  SelectValue,\r\n  SelectContent,\r\n  SelectItem,\r\n} from \"@/components/ui/select\";\r\n\r\nconst MostVisited = () => {\r\n  const ChartData: any = {\r\n    series: [\r\n      {\r\n        name: 'San Francisco',\r\n        data: [44, 55, 41, 67, 22, 43]\r\n      },\r\n      {\r\n        name: 'Diego',\r\n        data: [13, 23, 20, 8, 13, 27]\r\n      }\r\n    ],\r\n    chart: {\r\n      height: 265,\r\n      type: 'bar',\r\n      fontFamily: 'inherit',\r\n      foreColor: '#adb0bb',\r\n      toolbar: {\r\n        show: false\r\n      },\r\n      stacked: true\r\n    },\r\n    colors: [\"var(--color-primary)\", \"var(--color-secondary)\"],\r\n    plotOptions: {\r\n      bar: {\r\n        borderRadius: [6],\r\n        horizontal: false,\r\n        barHeight: '60%',\r\n        columnWidth: '40%',\r\n        borderRadiusApplication: 'end',\r\n        borderRadiusWhenStacked: 'all'\r\n      }\r\n    },\r\n    stroke: {\r\n      show: false\r\n    },\r\n    dataLabels: {\r\n      enabled: false\r\n    },\r\n    legend: {\r\n      show: false\r\n    },\r\n    grid: {\r\n      show: false,\r\n      padding: {\r\n        top: 0,\r\n        right: 0,\r\n        bottom: 0,\r\n        left: 0\r\n      }\r\n    },\r\n    yaxis: {\r\n      tickAmount: 4\r\n    },\r\n    xaxis: {\r\n      categories: ['01', '02', '03', '04', '05', '06'],\r\n      axisTicks: {\r\n        show: false\r\n      }\r\n    },\r\n    tooltip: {\r\n      theme: 'dark',\r\n      fillSeriesColor: false,\r\n      x: {\r\n        show: false\r\n      }\r\n    }\r\n  }\r\n  return (\r\n    <>\r\n      <Card className=\"mt-[30px] overflow-hidden\">\r\n        <div className=\"flex justify-between items-center \">\r\n          <h5 className=\"text-lg font-semibold text-dark dark:text-white\">Most Visited</h5>\r\n          <Select defaultValue=\"march-2025\">\r\n            <SelectTrigger className=\"w-fit\">\r\n              <SelectValue placeholder=\"Select Month\" />\r\n            </SelectTrigger>\r\n            <SelectContent>\r\n              <SelectItem value=\"march-2025\">March 2025</SelectItem>\r\n              <SelectItem value=\"april-2025\">April 2025</SelectItem>\r\n              <SelectItem value=\"may-2025\">May 2025</SelectItem>\r\n            </SelectContent>\r\n          </Select>\r\n        </div>\r\n        <div className=\"rounded-bars -ms-4 mt-4\">\r\n          <Chart\r\n            options={ChartData}\r\n            series={ChartData.series}\r\n            type=\"bar\"\r\n            height='265px'\r\n            width='100%'\r\n\r\n          />\r\n          <div className=\"flex gap-5 justify-center items-center\">\r\n            <div className=\"flex gap-2 items-center\">\r\n              <span className=\"h-2 w-2 rounded-full bg-primary\"></span>\r\n              <span className=\"text-sm\">San Francisco</span>\r\n            </div>\r\n            <div className=\"flex gap-2 items-center\">\r\n              <span className=\"h-2 w-2 rounded-full bg-secondary\"></span>\r\n              <span className=\"text-sm\">Diego</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Card>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default MostVisited;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/charts/most-visited-chart/MostVisitedCode.tsx"
    }
  ]
}