Ubuntu
18 lines
5.6 KiB
JSON
18 lines
5.6 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "bar-chart",
|
|
"type": "registry:component",
|
|
"title": "Bar Chart",
|
|
"description": "Beautiful bar chart for data visualization with retro styling",
|
|
"dependencies": [
|
|
"recharts"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "components/retroui/charts/BarChart.tsx",
|
|
"content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n Bar,\n BarChart as RechartsBarChart,\n CartesianGrid,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\"\n\ninterface BarChartProps 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 stacked?: boolean\n alignment?: \"vertical\" | \"horizontal\"\n className?: string\n}\n\nconst BarChart = React.forwardRef<HTMLDivElement, BarChartProps>(\n (\n {\n data = [],\n index,\n categories = [],\n strokeColors = [\"var(--foreground)\"],\n fillColors = [\"var(--primary)\", \"var(--secondary)\"],\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 stacked = false,\n alignment = \"vertical\",\n className,\n ...props\n },\n ref\n ) => {\n return (\n <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n <ResponsiveContainer width=\"100%\" height=\"100%\">\n <RechartsBarChart\n data={data}\n layout={alignment === \"horizontal\" ? \"vertical\" : undefined}\n margin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n >\n {showGrid && (\n <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n )}\n\n {alignment === \"horizontal\" ? (\n <>\n <XAxis\n type=\"number\"\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n tickFormatter={valueFormatter}\n />\n\n <YAxis\n type=\"category\"\n dataKey={index}\n axisLine={false}\n tickLine={false}\n className=\"text-xs fill-muted-foreground\"\n width={80}\n />\n </>\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 )}\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 fillColor = fillColors[index] || fillColors[0]\n const strokeColor = strokeColors[index] || strokeColors[0]\n\n return (\n <Bar\n key={category}\n dataKey={category}\n fill={fillColor}\n stroke={strokeColor}\n strokeWidth={1}\n stackId={stacked ? \"strokeId\" : undefined} />\n )\n })}\n </RechartsBarChart>\n </ResponsiveContainer>\n </div>\n )\n }\n)\n\nBarChart.displayName = \"BarChart\"\n\nexport { BarChart, type BarChartProps }",
|
|
"type": "registry:component",
|
|
"target": "components/retroui/charts/BarChart.tsx"
|
|
}
|
|
]
|
|
} |