import React, { useEffect, useMemo, useRef, useState } from "react"; import { defineInfigure } from "@infigure/sdk"; import { toTitleCase, coerceColor, coerceNumber, inferColumnDisplayMode, formatCurrency, formatNumber, formatPercent, type ColumnDisplayMode, type ColumnAlignMode, } from "./ui/table-utils"; import { TableCell } from "./ui/table-cells"; const MIN_COLUMN_WIDTH = 96; const MAX_COLUMN_WIDTH = 640; const DISPLAY_MODES = ["auto", "text", "number", "currency", "percent", "bar", "line", "badge"]; function normalizePresentation(value) { const source = value && typeof value === "object" ? value : {}; const columns = {}; if (source.columns && typeof source.columns === "object") { Object.keys(source.columns).forEach((key) => { const column = source.columns[key]; if (!column || typeof column !== "object") return; columns[key] = { ...column, width: typeof column.width === "number" ? Math.max(MIN_COLUMN_WIDTH, Math.min(MAX_COLUMN_WIDTH, column.width)) : undefined, displayMode: DISPLAY_MODES.includes(column.displayMode) ? column.displayMode : undefined, align: ["auto", "left", "center", "right"].includes(column.align) ? column.align : undefined, }; }); } const sort = source.sort && typeof source.sort.field === "string" && ["asc", "desc"].includes(source.sort.direction) ? { field: source.sort.field, direction: source.sort.direction } : null; return { sort, columns, rowHover: source.rowHover !== false, stripedRows: Boolean(source.stripedRows), showSummaryRow: source.showSummaryRow !== false, }; } function isEmptyValue(value) { return value === null || value === undefined || (typeof value === "string" && value.trim() === ""); } function compareValues(left, right) { const leftEmpty = isEmptyValue(left); const rightEmpty = isEmptyValue(right); if (leftEmpty || rightEmpty) return leftEmpty && rightEmpty ? 0 : leftEmpty ? 1 : -1; const leftNumber = coerceNumber(left); const rightNumber = coerceNumber(right); if (leftNumber !== null && rightNumber !== null) return leftNumber - rightNumber; if (typeof left === "string" && typeof right === "string") { const leftDate = Date.parse(left); const rightDate = Date.parse(right); if (Number.isFinite(leftDate) && Number.isFinite(rightDate)) return leftDate - rightDate; } return String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: "base" }); } function ExecutiveSummaryTable({ api, data, width, height, sizing = "frame", tablePresentation, tableConfig = { sortable: true, resizableColumns: true }, surfaceColor = "#FFFFFF", borderColor = "#E2E8F0", headerBackground = "#F8FAFC", headerTextColor = "#0F172A", textColor = "#334155", rowDividerColor = "#F1F5F9", stripedRowColor = "#F8FAFC", positiveColor = "#10B981", negativeColor = "#EF4444", barChartColor = "#3B82F6", lineChartColor = "#6366F1", padding = 16, cornerRadius = 14, rowHeight = 42, fontSize = 13, stripedRows = false, showSummaryRow = true, }) { api.applyObjectSurface({ background: "transparent", overflow: sizing === "intrinsic" ? "visible" : "hidden" }); const dataRows = (Array.isArray(data) ? data : []).filter((row) => row && typeof row === "object"); const presentation = normalizePresentation(tablePresentation); const [columnWidths, setColumnWidths] = useState({}); const columnWidthsRef = useRef({}); const [hoveredRow, setHoveredRow] = useState(null); const resizeRef = useRef(null); const presentationRef = useRef(presentation); presentationRef.current = presentation; useEffect(() => { const nextWidths = {}; Object.keys(presentation.columns).forEach((key) => { if (typeof presentation.columns[key].width === "number") nextWidths[key] = presentation.columns[key].width; }); setColumnWidths((current) => { const next = { ...nextWidths, ...current }; columnWidthsRef.current = next; return next; }); }, [tablePresentation]); useEffect(() => () => { if (!resizeRef.current) return; window.removeEventListener("pointermove", resizeRef.current.move); window.removeEventListener("pointerup", resizeRef.current.up); }, []); const availableKeys = useMemo(() => { const seen = new Set(); dataRows.forEach((row) => Object.keys(row).forEach((key) => seen.add(key))); return Array.from(seen); }, [dataRows]); const orderedKeys = useMemo(() => availableKeys .map((key, index) => ({ key, index, order: typeof presentation.columns[key]?.order === "number" ? presentation.columns[key].order : index })) .sort((left, right) => left.order - right.order || left.index - right.index) .map((entry) => entry.key), [availableKeys, presentation.columns]); const visibleKeys = orderedKeys.filter((key) => presentation.columns[key]?.visible !== false); const columnConfigs = visibleKeys.map((key) => { const values = dataRows.map((row) => row[key]); const configuredMode = presentation.columns[key]?.displayMode; const displayMode = configuredMode || inferColumnDisplayMode(key, values); const alignMode = presentation.columns[key]?.align || "auto"; return { key, displayMode, alignMode, values, label: presentation.columns[key]?.label || toTitleCase(key) }; }); const sortedRows = useMemo(() => { if (!presentation.sort || !availableKeys.includes(presentation.sort.field)) return dataRows; return dataRows .map((row, index) => ({ row, index })) .sort((left, right) => { const result = compareValues(left.row[presentation.sort.field], right.row[presentation.sort.field]); return (presentation.sort.direction === "desc" ? -result : result) || left.index - right.index; }) .map((entry) => entry.row); }, [availableKeys, dataRows, presentation.sort]); const updatePresentation = (next) => api.updatePresentationState?.(normalizePresentation(next)); const setSort = (field) => { if (tableConfig.sortable === false) return; const current = presentation.sort; const sort = !current || current.field !== field ? { field, direction: "asc" } : current.direction === "asc" ? { field, direction: "desc" } : null; updatePresentation({ ...presentation, sort }); }; const setColumnWidth = (key, rawWidth, commit = true) => { const widthValue = Math.max(MIN_COLUMN_WIDTH, Math.min(MAX_COLUMN_WIDTH, rawWidth)); setColumnWidths((current) => { const next = { ...current, [key]: widthValue }; columnWidthsRef.current = next; return next; }); if (commit) { updatePresentation({ ...presentationRef.current, columns: { ...presentationRef.current.columns, [key]: { ...(presentationRef.current.columns[key] || {}), width: widthValue } } }); } }; const beginColumnResize = (key, event) => { event.preventDefault(); event.stopPropagation(); const header = event.currentTarget.parentElement; const startWidth = columnWidths[key] || header?.getBoundingClientRect().width || 160; const move = (moveEvent) => setColumnWidth(key, startWidth + moveEvent.clientX - event.clientX, false); const up = () => { const widthValue = columnWidthsRef.current[key] || startWidth; setColumnWidth(key, widthValue, true); window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); resizeRef.current = null; }; resizeRef.current = { move, up }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); }; const nudgeColumnWidth = (key, amount) => setColumnWidth(key, (columnWidths[key] || 160) + amount, true); const resolvedSurfaceColor = coerceColor(surfaceColor, "#FFFFFF"); const resolvedBorderColor = coerceColor(borderColor, "#E2E8F0"); const resolvedHeaderBackground = coerceColor(headerBackground, "#F8FAFC"); const resolvedHeaderTextColor = coerceColor(headerTextColor, "#0F172A"); const resolvedTextColor = coerceColor(textColor, "#334155"); const resolvedRowDividerColor = coerceColor(rowDividerColor, "#F1F5F9"); const resolvedStripedRowColor = coerceColor(stripedRowColor, "#F8FAFC"); const resolvedPositiveColor = coerceColor(positiveColor, "#10B981"); const resolvedNegativeColor = coerceColor(negativeColor, "#EF4444"); const resolvedBarChartColor = coerceColor(barChartColor, "#3B82F6"); const resolvedLineChartColor = coerceColor(lineChartColor, "#6366F1"); const resolvedPadding = Math.max(4, Number(padding ?? 16)); const resolvedCornerRadius = Math.max(0, Number(cornerRadius ?? 14)); const resolvedRowHeight = Math.max(28, Number(rowHeight ?? 42)); const resolvedFontSize = Math.max(10, Number(fontSize ?? 13)); const resolvedStripedRows = presentation.stripedRows ?? Boolean(stripedRows); const resolvedShowSummaryRow = presentation.showSummaryRow ?? Boolean(showSummaryRow); const rowKeys = new Set(); const getRowKey = (row, index) => { const base = row.row_id ?? row.id ?? index; const candidate = String(base); const key = rowKeys.has(candidate) ? candidate + "-" + index : candidate; rowKeys.add(key); return key; }; const cellAlign = (mode, displayMode) => mode === "auto" ? (displayMode === "badge" ? "center" : ["currency", "percent", "number", "bar", "line"].includes(displayMode) ? "right" : "left") : mode; return (

{dataRows.length === 0 ?

No table data connected.

: visibleKeys.length === 0 ?

No visible columns. Configure columns in Presentation.

: ( {columnConfigs.map(({ key, displayMode, alignMode, label }) => { const sortActive = presentation.sort?.field === key; const align = cellAlign(alignMode, displayMode); return ; })}{sortedRows.map((row, rowIndex) => { const rowKey = getRowKey(row, rowIndex); const striped = resolvedStripedRows && rowIndex % 2 === 1; const hovered = presentation.rowHover && hoveredRow === rowKey; return presentation.rowHover && setHoveredRow(rowKey)} onMouseLeave={() => setHoveredRow(null)} style={{ backgroundColor: hovered ? resolvedHeaderBackground : striped ? resolvedStripedRowColor : "transparent", transition: "background-color 120ms ease" }}>{columnConfigs.map(({ key, displayMode, alignMode }) => )}; })} {resolvedShowSummaryRow && sortedRows.length > 0 ? {columnConfigs.map(({ key, displayMode, alignMode }, colIndex) => { if (colIndex === 0) return ; const numbers = sortedRows.map((row) => coerceNumber(row[key])).filter((value) => value !== null); if (!numbers.length) return ; })} : null}

{tableConfig.resizableColumns !== false && columnConfigs.length > 1 ?
entry[key])} rowIndex={rowIndex} allRows={sortedRows} textColor={resolvedTextColor} positiveColor={resolvedPositiveColor} negativeColor={resolvedNegativeColor} barChartColor={resolvedBarChartColor} lineChartColor={resolvedLineChartColor} />
Total / Summary	; const sum = numbers.reduce((total, value) => total + value, 0); const summary = displayMode === "percent" ? sum / numbers.length : sum; let text = formatNumber(summary); if (displayMode === "currency") text = formatCurrency(summary); if (displayMode === "percent") text = formatPercent(summary); return	{text}

)}

); } export default defineInfigure(ExecutiveSummaryTable, { resizable: false, sizing: "intrinsic", label: "Executive Summary Table", table: { binding: "rows", sortable: true, resizableColumns: true, configurableColumns: true, displayModes: ["auto", "text", "number", "currency", "percent", "bar", "line", "badge"] }, bindings: [{ id: "rows", label: "Table Data", path: "data", required: true, kind: "table", cardinality: "many", description: "Embedded or external table dataset node." }], controls: [ { id: "surfaceColor", label: "Surface Fill", kind: "color", default: "#FFFFFF", group: "Colors" }, { id: "borderColor", label: "Border Color", kind: "color", default: "#E2E8F0", group: "Colors" }, { id: "headerBackground", label: "Header Fill", kind: "color", default: "#F8FAFC", group: "Colors" }, { id: "headerTextColor", label: "Header Text", kind: "color", default: "#0F172A", group: "Colors" }, { id: "textColor", label: "Body Text", kind: "color", default: "#334155", group: "Colors" }, { id: "rowDividerColor", label: "Divider Color", kind: "color", default: "#F1F5F9", group: "Colors" }, { id: "stripedRowColor", label: "Striped Fill", kind: "color", default: "#F8FAFC", group: "Colors" }, { id: "positiveColor", label: "Positive Accent", kind: "color", default: "#10B981", group: "Colors" }, { id: "negativeColor", label: "Negative Accent", kind: "color", default: "#EF4444", group: "Colors" }, { id: "barChartColor", label: "Bar Color", kind: "color", default: "#3B82F6", group: "Colors" }, { id: "lineChartColor", label: "Sparkline Color", kind: "color", default: "#6366F1", group: "Colors" }, { id: "padding", label: "Table Padding", kind: "number", default: 16, min: 4, max: 48, step: 1, group: "Layout" }, { id: "cornerRadius", label: "Corner Radius", kind: "number", default: 14, min: 0, max: 36, step: 1, group: "Layout" }, { id: "rowHeight", label: "Row Height", kind: "number", default: 42, min: 28, max: 72, step: 1, group: "Layout" }, { id: "fontSize", label: "Font Size", kind: "number", default: 13, min: 10, max: 20, step: 1, group: "Typography" }, ], });