import React from "react"; import { defineInfigure, infigureElement } from "@infigure/sdk"; import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; import { Card, CardBody, CardHeader, MetricPill, type CardPalette, } from "./ui/card"; import { ChartFrame, InteractiveChartTooltip, chartTextStyle, formatCompactDate, formatMetricValue, } from "./ui/chart"; const readText = (value: unknown, fallback = "") => { if (typeof value === "string") { return value.trim().length > 0 ? value : fallback; } if (value == null) { return fallback; } return String(value); }; const readNumber = (value: unknown, fallback: number) => { const numeric = Number(value); return Number.isFinite(numeric) ? numeric : fallback; }; const readColor = (value: unknown, fallback: string) => typeof value === "string" && value.trim().length > 0 ? value : fallback; const normalizeRows = (rows: Array>) => rows .map((row, index) => ({ date: readText( row.date ?? row.day ?? row.label ?? "2024-04-" + String(index + 1).padStart(2, "0") ), desktop: Math.max(0, readNumber(row.desktop ?? row.value, NaN)), mobile: Math.max(0, readNumber(row.mobile ?? row.secondaryValue, NaN)), })) .filter((row) => row.date.length > 0 && Number.isFinite(row.desktop) && Number.isFinite(row.mobile)); type ShadcnBarChartCardRow = Record; type ShadcnBarChartCardProps = { api: any; data?: ShadcnBarChartCardRow[]; title?: string; subtitle?: string; desktopLabel?: string; mobileLabel?: string; desktopValue?: number; mobileValue?: number; desktopValueMode?: string; mobileValueMode?: string; seriesKey?: string; surfaceColor?: string; borderColor?: string; dividerColor?: string; barColor?: string; barInactiveColor?: string; labelColor?: string; valueColor?: string; mutedTextColor?: string; gridColor?: string; axisLabelColor?: string; tooltipBorderColor?: string; tooltipBackground?: string; width?: number; height?: number; radius?: number; tickEvery?: number; }; function ShadcnBarChartCardVisual({ api, data, title = "Bar Chart - Interactive", subtitle = "Showing total visitors for the last 3 months", desktopLabel = "Desktop", mobileLabel = "Mobile", desktopValue = 7324, mobileValue = 7250, desktopValueMode = "auto", mobileValueMode = "auto", seriesKey = "desktop", surfaceColor = "#ffffff", borderColor = "rgba(15,23,42,0.08)", dividerColor = "rgba(15,23,42,0.08)", barColor = "#3b82f6", barInactiveColor = "rgba(59,130,246,0.26)", labelColor = "#64748b", valueColor = "#0f172a", mutedTextColor = "#64748b", gridColor = "rgba(148,163,184,0.16)", axisLabelColor = "#64748b", tooltipBorderColor = "rgba(15,23,42,0.08)", tooltipBackground = "#ffffff", width = 640, height = 420, radius = 24, tickEvery = 5, }: ShadcnBarChartCardProps) { const [activeSeries, setActiveSeries] = React.useState<"desktop" | "mobile">("desktop"); api.applyObjectSurface({ background: "transparent", overflow: "hidden" }); React.useEffect(() => { setActiveSeries(readText(seriesKey, "desktop") === "mobile" ? "mobile" : "desktop"); }, [seriesKey]); const rows = normalizeRows(Array.isArray(data) ? data : []); const boxWidth = Math.max(420, readNumber(width, 640)); const boxHeight = Math.max(360, readNumber(height, 420)); const palette: CardPalette = { surface: readColor(surfaceColor, "#ffffff"), border: readColor(borderColor, "rgba(15,23,42,0.08)"), divider: readColor(dividerColor, "rgba(15,23,42,0.08)"), bar: readColor(barColor, "#3b82f6"), barInactive: readColor(barInactiveColor, "rgba(59,130,246,0.26)"), label: readColor(labelColor, "#64748b"), value: readColor(valueColor, "#0f172a"), muted: readColor(mutedTextColor, "#64748b"), grid: readColor(gridColor, "rgba(148,163,184,0.16)"), axis: readColor(axisLabelColor, "#64748b"), tooltipBorder: readColor(tooltipBorderColor, "rgba(15,23,42,0.08)"), tooltipBackground: readColor(tooltipBackground, "#ffffff"), }; const desktopTotal = rows.reduce((sum, row) => sum + row.desktop, 0); const mobileTotal = rows.reduce((sum, row) => sum + row.mobile, 0); const resolvedDesktopValue = readText(desktopValueMode, "auto") === "override" ? readNumber(desktopValue, desktopTotal) : desktopTotal; const resolvedMobileValue = readText(mobileValueMode, "auto") === "override" ? readNumber(mobileValue, mobileTotal) : mobileTotal; const resolvedTickEvery = Math.max(1, Math.round(readNumber(tickEvery, 5))); const resolvedRadius = Math.max(0, readNumber(radius, 24)); return (

setActiveSeries("desktop")} /> setActiveSeries("mobile")} /> } /> {rows.length === 0 ? (

Connect table data to render the chart.

) : ( } /> )}

); } ShadcnBarChartCardVisual.infigureReactive = true; export default defineInfigure(ShadcnBarChartCardVisual, { label: "ShadCN Bar Chart Card", bindings: [ { id: "rows", label: "Rows", kind: "table", path: "data", required: true, cardinality: "many", description: "Table data bound into the card.", }, ], controls: [ { id: "title", label: "Title", kind: "text", default: "Bar Chart - Interactive", group: "Content" }, { id: "subtitle", label: "Subtitle", kind: "text", default: "Showing total visitors for the last 3 months", group: "Content" }, { id: "desktopLabel", label: "Desktop Label", kind: "text", default: "Desktop", group: "Content" }, { id: "mobileLabel", label: "Mobile Label", kind: "text", default: "Mobile", group: "Content" }, { id: "desktopValue", label: "Desktop Override", kind: "number", default: 7324, group: "Content" }, { id: "mobileValue", label: "Mobile Override", kind: "number", default: 7250, group: "Content" }, { id: "desktopValueMode", label: "Desktop Value Mode", kind: "text", default: "auto", group: "Content" }, { id: "mobileValueMode", label: "Mobile Value Mode", kind: "text", default: "auto", group: "Content" }, { id: "seriesKey", label: "Chart Series Key", kind: "text", default: "desktop", group: "Content" }, { id: "surfaceColor", label: "Surface Color", kind: "color", default: "#ffffff", group: "Colors" }, { id: "borderColor", label: "Border Color", kind: "color", default: "rgba(15,23,42,0.08)", group: "Colors" }, { id: "dividerColor", label: "Divider Color", kind: "color", default: "rgba(15,23,42,0.08)", group: "Colors" }, { id: "barColor", label: "Bar Color", kind: "color", default: "#3b82f6", group: "Colors" }, { id: "barInactiveColor", label: "Inactive Bar Color", kind: "color", default: "rgba(59,130,246,0.26)", group: "Colors" }, { id: "labelColor", label: "Metric Label Color", kind: "color", default: "#64748b", group: "Colors" }, { id: "valueColor", label: "Metric Value Color", kind: "color", default: "#0f172a", group: "Colors" }, { id: "mutedTextColor", label: "Muted Text Color", kind: "color", default: "#64748b", group: "Colors" }, { id: "gridColor", label: "Grid Color", kind: "color", default: "rgba(148,163,184,0.16)", group: "Colors" }, { id: "axisLabelColor", label: "Axis Label Color", kind: "color", default: "#64748b", group: "Colors" }, { id: "tooltipBorderColor", label: "Tooltip Border Color", kind: "color", default: "rgba(15,23,42,0.08)", group: "Colors" }, { id: "tooltipBackground", label: "Tooltip Background", kind: "color", default: "#ffffff", group: "Colors" }, { id: "width", label: "Width", kind: "number", default: 640, min: 420, max: 1600, step: 1, group: "Layout" }, { id: "height", label: "Height", kind: "number", default: 420, min: 360, max: 1200, step: 1, group: "Layout" }, { id: "radius", label: "Corner Radius", kind: "number", default: 24, min: 0, max: 48, step: 1, group: "Layout" }, { id: "tickEvery", label: "Tick Every N Bars", kind: "number", default: 5, min: 1, max: 14, step: 1, group: "Layout" }, ], elements: [ { id: "chart-root", label: "Chart Frame", role: "container", resizable: true, propertyBindings: { width: { kind: "param", path: "width" }, height: { kind: "param", path: "height" }, }, }, ], });