import React from "react"; import { defineInfigure } from "@infigure/sdk"; const readText = (value: unknown, fallback = "") => { if (typeof value === "string") { return value.trim().length > 0 ? value.trim() : 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; function VerticalBarChart({ api, data, width, height, barColor = "#2563EB", gridColor = "#E5E7EB", axisColor = "#475569", surfaceColor = "#FFFFFF", labelColor = "#0F172A", padding = 20, barRadius = 6, bottomPadding = 42, leftPadding = 44, fontSize = 12, }) { api.applyObjectSurface({ background: "transparent", overflow: "hidden" }); const rows = (Array.isArray(data) ? data : []) .map((row, index) => ({ category: readText(row.category ?? row.label ?? row.Category, `Item ${index + 1}`), value: readNumber(row.value ?? row.Value, NaN), })) .filter((row) => row.category.length > 0 && Number.isFinite(row.value)); const resolvedSurfaceColor = readColor(surfaceColor, "#FFFFFF"); const resolvedBarColor = readColor(barColor, "#2563EB"); const resolvedGridColor = readColor(gridColor, "#E5E7EB"); const resolvedAxisColor = readColor(axisColor, "#475569"); const resolvedLabelColor = readColor(labelColor, "#0F172A"); const resolvedPadding = Math.max(8, readNumber(padding, 20)); const radius = Math.max(0, readNumber(barRadius, 6)); const resolvedBottomPadding = Math.max(24, readNumber(bottomPadding, 42)); const resolvedLeftPadding = Math.max(24, readNumber(leftPadding, 44)); const resolvedFontSize = Math.max(9, readNumber(fontSize, 12)); return (

{rows.length === 0 ? (

Connect category and value rows.

) : ( )}

); } export default defineInfigure(VerticalBarChart, { label: "Vertical Bar Chart", bindings: [ { id: "category", label: "Category", path: "data.category", required: true, kind: "field", cardinality: "one", description: "Discrete category displayed on the x axis.", }, { id: "value", label: "Value", path: "data.value", required: true, kind: "field", cardinality: "one", description: "Numeric value used to determine bar height.", }, ], controls: [ { id: "barColor", label: "Bar Color", kind: "color", default: "#2563EB", group: "Colors" }, { id: "gridColor", label: "Grid Lines", kind: "color", default: "#E5E7EB", group: "Colors" }, { id: "axisColor", label: "Axis Color", kind: "color", default: "#475569", group: "Colors" }, { id: "surfaceColor", label: "Surface", kind: "color", default: "#FFFFFF", group: "Colors" }, { id: "labelColor", label: "Labels", kind: "color", default: "#0F172A", group: "Colors" }, { id: "padding", label: "Padding", kind: "number", default: 20, min: 8, max: 48, step: 1, group: "Layout" }, { id: "barRadius", label: "Bar Radius", kind: "number", default: 6, min: 0, max: 24, step: 1, group: "Layout" }, { id: "bottomPadding", label: "Bottom Padding", kind: "number", default: 42, min: 24, max: 80, step: 1, group: "Layout" }, { id: "leftPadding", label: "Left Padding", kind: "number", default: 44, min: 24, max: 80, step: 1, group: "Layout" }, { id: "fontSize", label: "Font Size", kind: "number", default: 12, min: 9, max: 20, step: 1, group: "Typography" }, ], });