@@ -96,7 +97,7 @@ export default function ComponentShowcase() {
-
+
diff --git a/components/ui/8bit/blocks/chart-bar.tsx b/components/ui/8bit/blocks/chart-bar.tsx
new file mode 100644
index 00000000..4139245d
--- /dev/null
+++ b/components/ui/8bit/blocks/chart-bar.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+ ChartConfig,
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from "@/components/ui/8bit/chart";
+
+export const description = "A multiple bar chart";
+
+const chartData = [
+ { month: "January", desktop: 186, mobile: 80 },
+ { month: "February", desktop: 305, mobile: 200 },
+ { month: "March", desktop: 237, mobile: 120 },
+ { month: "April", desktop: 73, mobile: 190 },
+ { month: "May", desktop: 209, mobile: 130 },
+ { month: "June", desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ color: "var(--chart-1)",
+ },
+ mobile: {
+ label: "Mobile",
+ color: "var(--chart-2)",
+ },
+} satisfies ChartConfig;
+
+export default function ChartBarMultiple() {
+ return (
+
+
+
+ value.slice(0, 3)}
+ />
+ }
+ />
+
+
+
+
+ );
+}
diff --git a/components/ui/8bit/blocks/chart.tsx b/components/ui/8bit/blocks/chart.tsx
index 25975d14..c349ae97 100644
--- a/components/ui/8bit/blocks/chart.tsx
+++ b/components/ui/8bit/blocks/chart.tsx
@@ -48,7 +48,7 @@ export function ChartExample() {
/>
} />
@@ -207,7 +207,7 @@ function ChartTooltipContent({
!hideIndicator && (
) : (
\n
\n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n );\n}\n",
+ "type": "registry:component",
+ "target": "components/ui/8bit/blocks/chart-bar.tsx"
+ },
+ {
+ "path": "components/ui/8bit/chart.tsx",
+ "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"@/lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode;\n icon?: React.ComponentType;\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record
}\n );\n};\n\ntype ChartContextProps = {\n config: ChartConfig;\n};\n\nconst ChartContext = React.createContext(null);\n\nfunction useChart() {\n const context = React.useContext(ChartContext);\n\n if (!context) {\n throw new Error(\"useChart must be used within a \");\n }\n\n return context;\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig;\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"];\n}) {\n const uniqueId = React.useId();\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n return (\n \n \n \n \n {children}\n \n \n {labelFormatter(value, payload)}\n
\n );\n }\n\n if (!value) {\n return null;\n }\n\n return {value}
;\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ]);\n\n if (!active || !payload?.length) {\n return null;\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n return (\n \n \n {!nestLabel ? tooltipLabel : null}\n \n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n const itemConfig = getPayloadConfigFromPayload(config, item, key);\n const indicatorColor = color || item.payload.fill || item.color;\n\n return (\n
svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n \n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label || item.name}\n \n {item.value && (\n \n {item.value.toLocaleString()}\n \n )}\n
\n