import React from "react"; import { defineInfigure } from "@infigure/sdk"; const readText = (value: unknown, fallback = "") => typeof value === "string" && value.trim().length > 0 ? value : fallback; const readColor = (value: unknown, fallback: string) => typeof value === "string" && value.trim().length > 0 ? value : fallback; const readNumber = (value: unknown, fallback = 0) => { const numeric = Number(value); return Number.isFinite(numeric) ? numeric : fallback; }; function ProgressBars({ api, data, width: widthParam, height: heightParam, surfaceColor: surfaceColorParam = "#FFFFFF", trackColor: trackColorParam = "#E2E8F0", fillColor: fillColorParam = "#2563EB", labelColor: labelColorParam = "#334155", valueColor: valueColorParam = "#0F172A", padding: paddingParam = 18, }) { api.applyObjectSurface({ background: "transparent", overflow: "hidden" }); const rows = (Array.isArray(data) ? data : []) .map((row, index) => ({ label: readText(row.label ?? row.stage ?? row.name, `Stage ${index + 1}`), value: Math.max(0, Math.min(100, readNumber(row.value ?? row.percent, 0))), })); const surfaceColor = readColor(surfaceColorParam, "#FFFFFF"); const trackColor = readColor(trackColorParam, "#E2E8F0"); const fillColor = readColor(fillColorParam, "#2563EB"); const labelColor = readColor(labelColorParam, "#334155"); const valueColor = readColor(valueColorParam, "#0F172A"); const padding = Math.max(8, readNumber(paddingParam, 18)); const width = Math.max(280, widthParam); const height = Math.max(180, heightParam); return (

{rows.map((row) => (

{row.label}

{Math.round(row.value)}%

))}

); } export default defineInfigure(ProgressBars, { label: "Progress Bars", bindings: [ { id: "label", label: "Label", path: "data.label", required: true, kind: "field", cardinality: "one", description: "Stage label." }, { id: "value", label: "Value", path: "data.value", required: true, kind: "field", cardinality: "one", description: "Completion percentage." }, ], controls: [ { id: "surfaceColor", label: "Surface", kind: "color", default: "#FFFFFF", group: "Colors" }, { id: "trackColor", label: "Track", kind: "color", default: "#E2E8F0", group: "Colors" }, { id: "fillColor", label: "Fill", kind: "color", default: "#2563EB", group: "Colors" }, { id: "labelColor", label: "Label", kind: "color", default: "#334155", group: "Colors" }, { id: "valueColor", label: "Value", kind: "color", default: "#0F172A", group: "Colors" }, { id: "padding", label: "Padding", kind: "number", default: 18, min: 8, max: 40, step: 1, group: "Layout" }, ], });

Argument Bars