Ubuntu
18 lines
5.6 KiB
JSON
18 lines
5.6 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "area-chart",
|
|
"type": "registry:component",
|
|
"title": "Area Chart",
|
|
"description": "Beautiful area chart for data visualization with retro styling",
|
|
"dependencies": [
|
|
"recharts"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "components/retroui/charts/AreaChart.tsx",
|
|
"content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n Area,\n AreaChart as RechartsAreaChart,\n CartesianGrid,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\n\ninterface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {\n data: Record<string, any>[]\n index: string\n categories: string[]\n strokeColors?: string[]\n fillColors?: string[]\n tooltipBgColor?: string\n tooltipBorderColor?: string\n gridColor?: string\n valueFormatter?: (value: number) => string\n showGrid?: boolean\n showTooltip?: boolean\n fill?: \"gradient\" | \"solid\"\n className?: string\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n (\n {\n data = [],\n index,\n categories = [],\n strokeColors = [\"var(--foreground)\"],\n fillColors = [\"var(--primary)\"],\n tooltipBgColor = \"var(--background)\",\n tooltipBorderColor = \"var(--border)\",\n gridColor = \"var(--muted)\",\n valueFormatter = (value: number) => value.toString(),\n showGrid = true,\n showTooltip = true,\n fill = \"gradient\",\n className,\n ...props\n },\n ref\n ) => {\n const chartId = React.useId()\n\n return (\n <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsAreaChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>\n <defs>\n {categories.map((category, index) => {\n const fillColor = fillColors[index] || fillColors[0]\n const gradientId = `gradient-${chartId}-${category}`\n return (\n <linearGradient key={category} id={gradientId} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n {fill === \"gradient\" ? (\n <>\n <stop offset=\"5%\" stopColor={fillColor} stopOpacity={0.8} />\n <stop offset=\"95%\" stopColor={fillColor} stopOpacity={0} />\n </>\n ) : (\n <stop stopColor={fillColor} stopOpacity={0.6} />\n )}\n </linearGradient>\n )\n })}\n </defs>\n \n {showGrid && (\n <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n )}\n \n <XAxis \n dataKey={index}\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n />\n \n <YAxis\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n tickFormatter={valueFormatter}\n />\n \n {showTooltip && (\n <Tooltip\n content={({ active, payload, label }) => {\n if (!active || !payload?.length) return null\n \n return (\n <div \n className=\"border p-2 shadow\"\n style={{ \n backgroundColor: tooltipBgColor,\n borderColor: tooltipBorderColor \n }}\n >\n <div className=\"grid grid-cols-2 gap-2\">\n <div className=\"flex flex-col\">\n <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n {index}\n </span>\n <span className=\"font-bold text-muted-foreground\">\n {label}\n </span>\n </div>\n {payload.map((entry, index) => (\n <div key={index} className=\"flex flex-col\">\n <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n {entry.dataKey}\n </span>\n <span className=\"font-bold\" style={{ color: strokeColors[0] }}>\n {valueFormatter(entry.value as number)}\n </span>\n </div>\n ))}\n </div>\n </div>\n )\n }}\n />\n )}\n \n {categories.map((category, index) => {\n const strokeColor = strokeColors[index] || strokeColors[0]\n const gradientId = `gradient-${chartId}-${category}`\n \n return (\n <Area\n key={category}\n dataKey={category}\n stroke={strokeColor}\n fill={`url(#${gradientId})`}\n strokeWidth={2}\n />\n )\n })}\n </RechartsAreaChart>\n </ResponsiveContainer>\n </div>\n )\n }\n)\n\nAreaChart.displayName = \"AreaChart\"\n\nexport { AreaChart, type AreaChartProps }",
|
|
"type": "registry:component",
|
|
"target": "components/retroui/charts/AreaChart.tsx"
|
|
}
|
|
]
|
|
} |