import React from "react"; import { createRoot } from "react-dom/client"; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts"; declare const api: any; declare const root: any; // --- infigure-metadata --- // { // "label": "ShadCN Bar Chart Controls", // "controls": [ // { // "id": "barColor", // "label": "Bar Color", // "kind": "color", // "default": "#3b82f6", // "group": "Colors" // }, // { // "id": "gridColor", // "label": "Grid Color", // "kind": "color", // "default": "rgba(255,255,255,0.08)", // "group": "Colors" // }, // { // "id": "axisLabelColor", // "label": "Axis Label Color", // "kind": "color", // "default": "rgba(255,255,255,0.40)", // "group": "Colors" // }, // { // "id": "surfaceColor", // "label": "Surface Color", // "kind": "color", // "default": "#18181b", // "group": "Colors" // }, // { // "id": "borderColor", // "label": "Border Color", // "kind": "color", // "default": "rgba(255,255,255,0.12)", // "group": "Colors" // }, // { // "id": "radius", // "label": "Corner Radius", // "kind": "number", // "default": 24, // "min": 0, // "max": 48, // "step": 1, // "group": "Layout" // }, // { // "id": "chartPaddingX", // "label": "Chart Padding X", // "kind": "number", // "default": 36, // "min": 8, // "max": 96, // "step": 1, // "group": "Layout" // }, // { // "id": "chartPaddingTop", // "label": "Chart Padding Top", // "kind": "number", // "default": 28, // "min": 0, // "max": 96, // "step": 1, // "group": "Layout" // }, // { // "id": "chartPaddingBottom", // "label": "Chart Padding Bottom", // "kind": "number", // "default": 44, // "min": 12, // "max": 120, // "step": 1, // "group": "Layout" // }, // { // "id": "tickEvery", // "label": "Tick Every N Bars", // "kind": "number", // "default": 4, // "min": 1, // "max": 10, // "step": 1, // "group": "Axes" // }, // { // "id": "barGap", // "label": "Bar Gap", // "kind": "number", // "default": 0.22, // "min": 0, // "max": 0.6, // "step": 0.01, // "group": "Axes" // } // ] // } // ------------------------- const DEFAULT_ROWS = [ { date: "2024-04-01", value: 168 }, { date: "2024-04-02", value: 278 }, { date: "2024-04-03", value: 216 }, { date: "2024-04-04", value: 66 }, { date: "2024-04-05", value: 190 }, { date: "2024-04-06", value: 195 }, { date: "2024-04-07", value: 296 }, { date: "2024-04-08", value: 372 }, { date: "2024-04-09", value: 205 }, { date: "2024-04-10", value: 284 }, { date: "2024-04-11", value: 161 }, { date: "2024-04-12", value: 373 }, { date: "2024-04-13", value: 355 }, { date: "2024-04-14", value: 234 }, { date: "2024-04-15", value: 303 }, { date: "2024-04-16", value: 257 }, { date: "2024-04-17", value: 132 }, { date: "2024-04-18", value: 189 }, { date: "2024-04-19", value: 273 }, { date: "2024-04-20", value: 250 }, { date: "2024-04-21", value: 173 }, { date: "2024-04-22", value: 382 }, { date: "2024-04-23", value: 282 }, { date: "2024-04-24", value: 238 }, { date: "2024-04-25", value: 132 }, { date: "2024-04-26", value: 328 }, { date: "2024-04-27", value: 164 }, { date: "2024-04-28", value: 264 }, { date: "2024-04-29", value: 180 }, { date: "2024-04-30", value: 384 } ]; const coerceNumber = (value: any, fallback: number): number => { const numeric = Number(value); return Number.isFinite(numeric) ? numeric : fallback; }; const coerceColor = (value: any, fallback: string): string => typeof value === "string" && value.trim().length > 0 ? value : fallback; const formatTick = (value: any) => { const date = new Date(value); if (Number.isNaN(date.getTime())) { return String(value); } return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", }).format(date); }; function ShadcnBarChartInteractive() { const { data, dimensions, params } = api.useInfigure(); React.useEffect(() => { api.applyObjectSurface({ background: "transparent", overflow: "hidden", }); }, []); const barColor = coerceColor(params.barColor, "#3b82f6"); const gridColor = coerceColor(params.gridColor, "rgba(255,255,255,0.08)"); const axisLabelColor = coerceColor(params.axisLabelColor, "rgba(255,255,255,0.40)"); const surfaceColor = coerceColor(params.surfaceColor, "#18181b"); const borderColor = coerceColor(params.borderColor, "rgba(255,255,255,0.12)"); const radius = Math.max(0, coerceNumber(params.radius, 24)); const chartPaddingX = Math.max(8, coerceNumber(params.chartPaddingX, 36)); const chartPaddingTop = Math.max(0, coerceNumber(params.chartPaddingTop, 28)); const chartPaddingBottom = Math.max(12, coerceNumber(params.chartPaddingBottom, 44)); const tickEvery = Math.max(1, Math.round(coerceNumber(params.tickEvery, 4))); const sampleRows = Array.isArray(params.sampleRows) ? params.sampleRows : []; const rows = (data && data.length > 0 ? data : sampleRows.length > 0 ? sampleRows : DEFAULT_ROWS) .map((row: any, index: number) => { const rawDate = row.date ?? row.day ?? row.label ?? row.x ?? `2024-04-${String(index + 1).padStart(2, "0")}`; return { date: String(rawDate), value: Math.max( 0, coerceNumber(row.value ?? row.desktop ?? row.y ?? row.count, 0) ), }; }) .filter((row: any) => row.date.length > 0); return (

); } const reactRoot = createRoot(root); reactRoot.render();

ShadCN Bar Chart - Interactive