{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "views-chart",
  "type": "registry:component",
  "description": "A Chart component with optional code display for UI blocks.",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "src/app/components/ui-blocks/charts/code/ViewsChartCode.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\n\r\nconst ViewsChart = () => {\r\n    const ChartData: any = {\r\n        series: [\r\n            {\r\n                name: '',\r\n                data: [20, 15, 30, 25, 10, 18, 20, 15, 12, 10]\r\n            }\r\n        ],\r\n        chart: {\r\n            type: 'bar',\r\n            height: 80,\r\n            fontFamily: `inherit`,\r\n            sparkline: {\r\n                enabled: true\r\n            }\r\n        },\r\n        colors: ['var(--color-lightsecondary)', 'var(--color-lightsecondary)', 'var(--color-secondary)', 'var(--color-lightsecondary)', 'var(--color-lightsecondary)', 'var(--color-lightsecondary)'],\r\n\r\n        plotOptions: {\r\n            bar: {\r\n                borderRadius: 4,\r\n                columnWidth: '50%',\r\n                distributed: true,\r\n                endingShape: 'rounded'\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            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        xaxis: {\r\n            categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],\r\n            labels: {\r\n                show: false\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 className=\"overflow-hidden\">\r\n                <div className=\"flex justify-between items-end\">\r\n                    <div>\r\n                        <h5 className=\"text-lg font-semibold text-dark dark:text-white\">15,480</h5>\r\n                        <p className=\"text-sm\">Views</p>\r\n                    </div>\r\n                    <span className=\"text-error text-sm\">-4.150%</span>\r\n                </div>\r\n\r\n                <Chart\r\n                    options={ChartData}\r\n                    series={ChartData.series}\r\n                    type=\"bar\"\r\n                    height='80px'\r\n                    width='100%'\r\n                    className=\"mt-2\"\r\n                />\r\n            </Card>\r\n        </>\r\n    );\r\n};\r\n\r\nexport default ViewsChart;\r\n",
      "type": "registry:component",
      "target": "components/tailwind-admin/charts/views-chart/ViewsChartCode.tsx"
    }
  ]
}