import React from "react"; import { defineInfigure } from "@infigure/sdk"; const readText = (value: unknown, fallback = "") => 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; }; const readColor = (value: unknown, fallback: string) => typeof value === "string" && value.trim().length > 0 ? value : fallback; function ObservablePlotWaffle({ api, data, width: widthParam, height, femaleColor: femaleColorParam = "#375BC7", maleColor: maleColorParam = "#1F7F7A", cellSize: cellSizeParam = 12, gap: gapParam = 2, padding: paddingParam = 20, labelColor: labelColorParam = "#111827", gridColor: gridColorParam = "#E5E7EB", }) { api.applyObjectSurface({ background: "transparent", overflow: "auto" }); const rows = (Array.isArray(data) ? data : []) .map((row) => ({ weight: readNumber(row.weight ?? row.Weight ?? row.x, NaN), sex: readText(row.sex ?? row.Sex ?? row.gender ?? row.fill, "").toLowerCase(), })) .filter((row) => Number.isFinite(row.weight) && (row.sex === "female" || row.sex === "male")); const width = Math.max(320, widthParam); const cellSize = Math.max(8, readNumber(cellSizeParam, 12)); const gap = Math.max(0, readNumber(gapParam, 2)); const padding = Math.max(8, readNumber(paddingParam, 20)); const labelColor = readColor(labelColorParam, "#111827"); const gridColor = readColor(gridColorParam, "#E5E7EB"); const femaleColor = readColor(femaleColorParam, "#375BC7"); const maleColor = readColor(maleColorParam, "#1F7F7A"); if (rows.length === 0) { return (

Connect weight and sex rows.

); } const groups = Array.from(new Map(rows.map((row) => [row.weight, { weight: row.weight, female: 0, male: 0 }])).values()).sort((left, right) => left.weight - right.weight); rows.forEach((row) => { const group = groups.find((entry) => entry.weight === row.weight); if (group) group[row.sex] += 1; }); const maxCount = Math.max(1, ...groups.map((group) => Math.max(group.female, group.male))); const columnWidth = cellSize + gap; const centerY = padding + maxCount * columnWidth + cellSize * 0.5; const labelY = centerY + maxCount * columnWidth + 18; const svgWidth = Math.max(width, groups.length * columnWidth + padding * 2); const svgHeight = Math.max(height, labelY + 20); return (

); } export default defineInfigure(ObservablePlotWaffle, { label: "Observable Plot Waffle", bindings: [ { id: "weight", label: "Weight", path: "data.weight", required: true, kind: "field", cardinality: "one", description: "Weight bucket." }, { id: "sex", label: "Sex", path: "data.sex", required: true, kind: "field", cardinality: "one", description: "Category used to split the diverging waffle." }, ], controls: [ { id: "femaleColor", label: "Female Color", kind: "color", default: "#375BC7", group: "Colors" }, { id: "maleColor", label: "Male Color", kind: "color", default: "#1F7F7A", group: "Colors" }, { id: "cellSize", label: "Cell Size", kind: "number", default: 12, min: 8, max: 20, step: 1, group: "Layout" }, { id: "gap", label: "Cell Gap", kind: "number", default: 2, min: 0, max: 8, step: 1, group: "Layout" }, { id: "padding", label: "Padding", kind: "number", default: 20, min: 8, max: 48, step: 1, group: "Layout" }, { id: "labelColor", label: "Label Color", kind: "color", default: "#111827", group: "Colors" }, { id: "gridColor", label: "Grid Color", kind: "color", default: "#E5E7EB", group: "Colors" }, ], });