{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "yearly-sales-chart",
  "type": "registry:component",
  "description": "A Chart component with optional code display for UI blocks.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/charts/code/YearlySalesCode.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 { TbGridDots } from \"react-icons/tb\";\r\n\r\n\r\nconst YearlySales = () => {\r\n  const ChartData: any = {\r\n    series: [\r\n      {\r\n        name: \"\",\r\n        data: [20, 15, 30, 25, 10, 15, 20],\r\n      },\r\n    ],\r\n\r\n    chart: {\r\n      toolbar: {\r\n        show: false,\r\n      },\r\n      height: 275,\r\n      type: \"bar\",\r\n      fontFamily: \"inherit\",\r\n      foreColor: \"#adb0bb\",\r\n    },\r\n    colors: [\r\n      \"var(--color-lightprimary)\",\r\n      \"var(--color-lightprimary)\",\r\n      \"var(--color-primary)\",\r\n      \"var(--color-lightprimary)\",\r\n      \"var(--color-lightprimary)\",\r\n      \"var(--color-lightprimary)\",\r\n      \"var(--color-lightprimary)\",\r\n    ],\r\n    plotOptions: {\r\n      bar: {\r\n        borderRadius: 3,\r\n        columnWidth: \"55%\",\r\n        distributed: true,\r\n        endingShape: \"rounded\",\r\n      },\r\n    },\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      yaxis: {\r\n        lines: {\r\n          show: false,\r\n        },\r\n      },\r\n    },\r\n    xaxis: {\r\n      categories: [\r\n        [\"Apr\"],\r\n        [\"May\"],\r\n        [\"June\"],\r\n        [\"July\"],\r\n        [\"Aug\"],\r\n        [\"Sept\"],\r\n        [\"Oct\"],\r\n      ],\r\n      axisBorder: {\r\n        show: false,\r\n      },\r\n      axisTicks: {\r\n        show: false,\r\n      },\r\n    },\r\n    yaxis: {\r\n      labels: {\r\n        show: false,\r\n      },\r\n    },\r\n    tooltip: {\r\n      theme: \"dark\",\r\n    },\r\n  };\r\n  return (\r\n    <>\r\n      <Card>\r\n        <div>\r\n          <h5 className=\"text-lg font-semibold text-dark dark:text-white\">Yearly Sales</h5>\r\n          <p className=\"text-sm\">Every month</p>\r\n        </div>\r\n        <div className=\"-ms-6 -me-4\">\r\n          <Chart\r\n            options={ChartData}\r\n            series={ChartData.series}\r\n            type=\"bar\"\r\n            height='275px'\r\n            width='100%'\r\n          />\r\n        </div>\r\n\r\n        <div className=\"flex items-center justify-between\">\r\n          <div className=\"flex gap-3 items-center\">\r\n            <div className=\"bg-lightprimary dark:bg-lightprimary h-10 w-10 flex justify-center items-center rounded-md\">\r\n              <TbGridDots size={20} className=\"text-primary\" />\r\n            </div>\r\n            <div>\r\n              <p className=\" text-sm\">Salary</p>\r\n              <h6 className=\"text-base\">$36,358</h6>\r\n            </div>\r\n          </div>\r\n          <div className=\"flex gap-3 items-center\">\r\n            <div className=\"bg-lightgray dark:bg-darkmuted h-10 w-10 flex justify-center items-center rounded-md\">\r\n              <TbGridDots size={20} className=\"text-darklink\" />\r\n            </div>\r\n            <div>\r\n              <p className=\" text-sm\">Expance</p>\r\n              <h6 className=\"text-base\">$5,296</h6>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Card>\r\n    </>\r\n  );\r\n};\r\n\r\n\r\n\r\n\r\nexport default YearlySales;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/charts/yearly-sales-chart/YearlySalesCode.tsx"
    }
  ]
}