{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "title": "Chart",
  "description": "Chart components.",
  "dependencies": ["recharts"],
  "files": [
    {
      "path": "registry/components/dashboardblocks/chart.tsx",
      "content": "'use client'\n\nimport {\n  Area,\n  AreaChart,\n  AreaProps,\n  Bar,\n  BarChart,\n  BarProps,\n  Line,\n  LineChart,\n  LineProps,\n  ResponsiveContainer,\n  Tooltip,\n  TooltipContentProps,\n} from 'recharts'\nimport { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'\n\nexport type ValueFormatter = (value: number) => string\n\nconst ChartTooltipContent = ({\n  payload,\n  formatter,\n  valueFormatter,\n}: TooltipContentProps<ValueType, NameType> & { valueFormatter?: ValueFormatter }) => {\n  if (!payload || payload.length === 0) return null\n\n  return (\n    <div className='border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-md border px-2.5 py-1.5 text-xs shadow-xl'>\n      <span className='font-medium'>{payload?.[0].payload.label}</span>\n\n      {payload.map((item, index) => {\n        const itemColor =\n          (item.color as string | undefined) ??\n          (item.fill as string | undefined) ??\n          'var(--color-foreground)'\n\n        return (\n          <div\n            key={\n              typeof item.dataKey === 'string' || typeof item.dataKey === 'number'\n                ? item.dataKey\n                : index\n            }\n            className='flex items-center gap-1'\n          >\n            <div\n              className='h-2.5 w-2.5 shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)'\n              style={\n                {\n                  '--color-bg': itemColor,\n                  '--color-border': itemColor,\n                } as React.CSSProperties\n              }\n            />\n            {valueFormatter\n              ? valueFormatter(Number(item.value))\n              : formatter\n                ? formatter(item.value, item.name, item, index, payload)\n                : item.value}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport interface TinyBarChartProps {\n  bars: BarProps[]\n  className?: string\n  data: unknown[]\n  formatter?: ValueFormatter\n  height?: number\n}\n\nexport const TinyBarChart = ({\n  bars,\n  className = '',\n  data,\n  formatter,\n  height = 180,\n}: TinyBarChartProps) => {\n  const safeData = Array.isArray(data) ? data : []\n  const resolvedBars = Array.isArray(bars) && bars.length > 0 ? bars : []\n\n  return (\n    <div className={`w-full ${className}`} style={{ height }}>\n      <ResponsiveContainer width='100%' height='100%'>\n        <BarChart data={safeData}>\n          <Tooltip\n            content={(props) => (\n              <ChartTooltipContent {...props} valueFormatter={formatter} />\n            )}\n          />\n          {resolvedBars.map((barProps, index) => {\n            const dataKey =\n              typeof barProps.dataKey === 'string' || typeof barProps.dataKey === 'number'\n                ? barProps.dataKey\n                : index\n\n            return (\n              <Bar\n                key={String(dataKey)}\n                radius={barProps.radius ?? [4, 4, 0, 0]}\n                {...barProps}\n              />\n            )\n          })}\n        </BarChart>\n      </ResponsiveContainer>\n    </div>\n  )\n}\n\nexport interface TinyLineChartProps {\n  className?: string\n  data: unknown[]\n  formatter?: ValueFormatter\n  height?: number\n  lines: LineProps[]\n}\n\nexport const TinyLineChart = ({\n  className = '',\n  data,\n  formatter,\n  height = 180,\n  lines,\n}: TinyLineChartProps) => {\n  const safeData = Array.isArray(data) ? data : []\n  const resolvedLines = Array.isArray(lines) && lines.length > 0 ? lines : []\n\n  return (\n    <div className={`w-full ${className}`} style={{ height }}>\n      <ResponsiveContainer width='100%' height='100%'>\n        <LineChart data={safeData}>\n          <Tooltip\n            content={(props) => (\n              <ChartTooltipContent {...props} valueFormatter={formatter} />\n            )}\n          />\n          {resolvedLines.map((lineProps, index) => {\n            const dataKey =\n              typeof lineProps.dataKey === 'string' ||\n              typeof lineProps.dataKey === 'number'\n                ? lineProps.dataKey\n                : index\n\n            return (\n              <Line\n                key={String(dataKey)}\n                type={lineProps.type ?? 'monotone'}\n                strokeWidth={lineProps.strokeWidth ?? 2}\n                dot={lineProps.dot ?? { r: 4 }}\n                {...lineProps}\n              />\n            )\n          })}\n        </LineChart>\n      </ResponsiveContainer>\n    </div>\n  )\n}\n\nexport interface TinyAreaChartProps {\n  areas: AreaProps[]\n  className?: string\n  data: unknown[]\n  formatter?: ValueFormatter\n  height?: number\n}\n\nexport const TinyAreaChart = ({\n  areas,\n  className = '',\n  data,\n  formatter,\n  height = 180,\n}: TinyAreaChartProps) => {\n  const safeData = Array.isArray(data) ? data : []\n  const resolvedAreas = Array.isArray(areas) && areas.length > 0 ? areas : []\n\n  return (\n    <div className={`w-full ${className}`} style={{ height }}>\n      <ResponsiveContainer width='100%' height='100%'>\n        <AreaChart data={safeData}>\n          <Tooltip\n            content={(props) => (\n              <ChartTooltipContent {...props} valueFormatter={formatter} />\n            )}\n          />\n          {resolvedAreas.map((areaProps, index) => {\n            const dataKey =\n              typeof areaProps.dataKey === 'string' ||\n              typeof areaProps.dataKey === 'number'\n                ? areaProps.dataKey\n                : index\n\n            return (\n              <Area\n                key={String(dataKey)}\n                type={areaProps.type ?? 'monotone'}\n                {...areaProps}\n              />\n            )\n          })}\n        </AreaChart>\n      </ResponsiveContainer>\n    </div>\n  )\n}\n\nexport type RechartsTooltipFormatter = TooltipContentProps<\n  ValueType,\n  NameType\n>['formatter']\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}