{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "yarly-breakup-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/YarlyBreakupCode.tsx",
      "content": "\"use client\";\r\nimport { Icon } from \"@iconify/react\";\r\nimport React from \"react\";\r\nimport dynamic from \"next/dynamic\";\r\nconst Chart = dynamic(() => import(\"react-apexcharts\"), { ssr: false });\r\nimport { Card } from '@/components/ui/card'\r\n\r\nconst YarlyBreakup = () => {\r\n  const ChartData: any = {\r\n    color: \"#adb5bd\",\r\n    series: [38, 40, 25],\r\n    labels: [\"2023\", \"2022\", \"2025\"],\r\n    chart: {\r\n      height: 150,\r\n      type: \"donut\",\r\n      fontFamily: \"inherit\",\r\n      foreColor: \"#adb0bb\",\r\n    },\r\n    plotOptions: {\r\n      pie: {\r\n        startAngle: 0,\r\n        endAngle: 360,\r\n        donut: {\r\n          size: \"75%\",\r\n        },\r\n      },\r\n    },\r\n    stroke: {\r\n      show: false,\r\n    },\r\n\r\n    dataLabels: {\r\n      enabled: false,\r\n    },\r\n\r\n    legend: {\r\n      show: false,\r\n    },\r\n    colors: [\r\n      \"var(--color-primary)\",\r\n      \"var(--color-lightprimary)\",\r\n      \"var(--color-lightsecondary)\",\r\n    ],\r\n\r\n    responsive: [\r\n      {\r\n        breakpoint: 991,\r\n        options: {\r\n          chart: {\r\n            width: 120,\r\n          },\r\n        },\r\n      },\r\n    ],\r\n    tooltip: {\r\n      theme: \"dark\",\r\n      fillSeriesColor: false,\r\n    },\r\n  };\r\n  return (\r\n    <>\r\n      <Card>\r\n        <div className=\"grid grid-cols-12 gap-4 items-center\">\r\n          <div className=\"col-span-6\">\r\n            <h5 className=\"text-lg font-semibold text-dark dark:text-white mb-4\">Yearly Breakup</h5>\r\n            <h6 className=\"text-xl\">$36,358</h6>\r\n            <div className=\"flex items-center mb-3 mt-1 gap-2\">\r\n              <span className=\"rounded-full p-1 bg-lightsuccess dark:bg-lightsuccess text-success flex items-center justify-center \">\r\n                <Icon icon=\"solar:arrow-left-up-outline\" height={15} />\r\n              </span>\r\n              <p className=\"text-ld text-sm mb-0\">+9%</p>\r\n              <p className=\" mb-0 text-sm\">last year</p>\r\n            </div>\r\n            <div className=\"flex gap-3 items-center mt-8\">\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-xs \">2023</span>\r\n              </div>\r\n              <div className=\"flex gap-2 items-center\">\r\n                <span className=\"h-2 w-2 rounded-full bg-lightsecondary\"></span>\r\n                <span className=\"text-xs \">2025</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div className=\"col-span-6\">\r\n            <Chart\r\n              options={ChartData}\r\n              series={ChartData.series}\r\n              type=\"donut\"\r\n              height='150px'\r\n              width='100%'\r\n\r\n            />\r\n          </div>\r\n        </div>\r\n      </Card>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default YarlyBreakup;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/charts/yarly-breakup-chart/YarlyBreakupCode.tsx"
    }
  ]
}