import React from "react"; import { defineInfigure } from "@infigure/sdk"; const readNumber = (value: unknown, fallback = 0) => { 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 BoxPlot({ api, data, width, height, trackColor = "#94A3B8", boxFill = "#BFDBFE", boxStroke = "#2563EB", medianColor = "#1D4ED8", labelColor = "#334155", padding = 20, }) { api.applyObjectSurface({ background: "transparent", overflow: "hidden" }); const row = (Array.isArray(data) ? data[0] : null) ?? {}; const min = readNumber(row.min, 0); const q1 = readNumber(row.q1, 25); const median = readNumber(row.median, 50); const q3 = readNumber(row.q3, 75); const max = readNumber(row.max, 100); const valid = [min, q1, median, q3, max].every((value) => Number.isFinite(value)); const boxWidth = Math.max(280, readNumber(width, 280)); const boxHeight = Math.max(140, readNumber(height, 140)); const boxPadding = Math.max(8, readNumber(padding, 20)); if (!valid) { return (

Connect min, q1, median, q3, and max values.

); } const span = Math.max(1, max - min); const scale = (value: number) => boxPadding + ((value - min) / span) * (boxWidth - boxPadding * 2); const boxY = boxHeight * 0.34; const barHeight = boxHeight * 0.32; const centerY = boxHeight * 0.5; return ( ); } export default defineInfigure(BoxPlot, { label: "Box Plot", bindings: [ { id: "min", label: "Minimum", path: "data.min", required: true, kind: "field", cardinality: "one", description: "Lower whisker value." }, { id: "q1", label: "Q1", path: "data.q1", required: true, kind: "field", cardinality: "one", description: "First quartile." }, { id: "median", label: "Median", path: "data.median", required: true, kind: "field", cardinality: "one", description: "Median value." }, { id: "q3", label: "Q3", path: "data.q3", required: true, kind: "field", cardinality: "one", description: "Third quartile." }, { id: "max", label: "Maximum", path: "data.max", required: true, kind: "field", cardinality: "one", description: "Upper whisker value." }, ], controls: [ { id: "trackColor", label: "Track Color", kind: "color", default: "#94A3B8", group: "Colors" }, { id: "boxFill", label: "Box Fill", kind: "color", default: "#BFDBFE", group: "Colors" }, { id: "boxStroke", label: "Box Stroke", kind: "color", default: "#2563EB", group: "Colors" }, { id: "medianColor", label: "Median Color", kind: "color", default: "#1D4ED8", group: "Colors" }, { id: "labelColor", label: "Label Color", kind: "color", default: "#334155", group: "Colors" }, { id: "padding", label: "Padding", kind: "number", default: 20, min: 8, max: 48, step: 1, group: "Layout" }, ], });