-
🌊
-
Sources
-
Revenue streams and deposits flow into the system, split across funnels by configurable allocation percentages.
+
+
+
1
+
+
Define Sources
+
Add revenue streams — grants, donations, sales, or any recurring income — with allocation splits.
+
-
-
🏛
-
Funnels
-
Budget buckets with min/max thresholds. When a funnel reaches sufficiency, overflow cascades to the next layer.
+
+
2
+
+
Configure Funnels
+
Set minimum, sufficient, and maximum thresholds. Overflow rules determine where surplus flows.
+
-
-
🎯
-
Outcomes
-
Funding targets that receive spending allocations from funnels. Track progress toward each goal.
+
+
3
+
+
Track Outcomes
+
Funding targets receive allocations as funnels reach sufficiency. Watch the river flow in real time.
+
@@ -258,8 +323,9 @@ class FolkFundsApp extends HTMLElement {
- Table
+ Diagram
River
+ Table
Transactions
@@ -270,6 +336,7 @@ class FolkFundsApp extends HTMLElement {
}
private renderTab(): string {
+ if (this.tab === "diagram") return this.renderDiagramTab();
if (this.tab === "river") return this.renderRiverTab();
if (this.tab === "transactions") return this.renderTransactionsTab();
return this.renderTableTab();
@@ -441,6 +508,234 @@ class FolkFundsApp extends HTMLElement {
return (node.data as any).label || id;
}
+ // ─── Diagram tab ──────────────────────────────────────
+
+ private renderDiagramTab(): string {
+ if (this.nodes.length === 0) {
+ return '
No nodes to display.
';
+ }
+
+ const sources = this.nodes.filter((n) => n.type === "source");
+ const funnels = this.nodes.filter((n) => n.type === "funnel");
+ const outcomes = this.nodes.filter((n) => n.type === "outcome");
+
+ // Layout constants
+ const NODE_W = 200;
+ const SOURCE_H = 54;
+ const FUNNEL_H = 120;
+ const OUTCOME_H = 70;
+ const PAD = 60;
+ const ROW_GAP = 160;
+ const COL_GAP = 40;
+
+ // Compute layers: root funnels (no overflow targeting them) vs child funnels
+ const overflowTargets = new Set
();
+ funnels.forEach((n) => {
+ const d = n.data as FunnelNodeData;
+ d.overflowAllocations?.forEach((a) => overflowTargets.add(a.targetId));
+ });
+ const rootFunnels = funnels.filter((n) => !overflowTargets.has(n.id));
+ const childFunnels = funnels.filter((n) => overflowTargets.has(n.id));
+
+ // Assign positions
+ const positions = new Map();
+
+ const placeRow = (nodes: { id: string }[], y: number, h: number) => {
+ const totalW = nodes.length * NODE_W + (nodes.length - 1) * COL_GAP;
+ const startX = PAD + Math.max(0, (svgW - 2 * PAD - totalW) / 2);
+ nodes.forEach((n, i) => {
+ positions.set(n.id, { x: startX + i * (NODE_W + COL_GAP), y, w: NODE_W, h });
+ });
+ };
+
+ // Estimate SVG size
+ const maxCols = Math.max(sources.length, rootFunnels.length, childFunnels.length, outcomes.length, 1);
+ const svgW = Math.max(800, maxCols * (NODE_W + COL_GAP) + 2 * PAD);
+ let currentY = PAD;
+
+ if (sources.length > 0) { placeRow(sources, currentY, SOURCE_H); currentY += SOURCE_H + ROW_GAP; }
+ if (rootFunnels.length > 0) { placeRow(rootFunnels, currentY, FUNNEL_H); currentY += FUNNEL_H + ROW_GAP; }
+ if (childFunnels.length > 0) { placeRow(childFunnels, currentY, FUNNEL_H); currentY += FUNNEL_H + ROW_GAP; }
+ if (outcomes.length > 0) { placeRow(outcomes, currentY, OUTCOME_H); currentY += OUTCOME_H + PAD; }
+ const svgH = currentY;
+
+ // Build SVG
+ const defs = `
+
+
+
+
+
+
+
+
+ `;
+
+ // Edges
+ let edges = "";
+
+ // Source → Funnel edges
+ sources.forEach((sn) => {
+ const sd = sn.data as SourceNodeData;
+ const sp = positions.get(sn.id);
+ if (!sp) return;
+ sd.targetAllocations?.forEach((alloc) => {
+ const tp = positions.get(alloc.targetId);
+ if (!tp) return;
+ const x1 = sp.x + sp.w / 2;
+ const y1 = sp.y + sp.h;
+ const x2 = tp.x + tp.w / 2;
+ const y2 = tp.y;
+ const cy1 = y1 + (y2 - y1) * 0.4;
+ const cy2 = y1 + (y2 - y1) * 0.6;
+ edges += `${alloc.percentage}% `;
+ });
+ });
+
+ // Overflow edges (funnel → funnel)
+ funnels.forEach((fn) => {
+ const fd = fn.data as FunnelNodeData;
+ const fp = positions.get(fn.id);
+ if (!fp) return;
+ fd.overflowAllocations?.forEach((alloc) => {
+ const tp = positions.get(alloc.targetId);
+ if (!tp) return;
+ const x1 = fp.x + fp.w / 2;
+ const y1 = fp.y + fp.h;
+ const x2 = tp.x + tp.w / 2;
+ const y2 = tp.y;
+ // If same row, draw sideways
+ if (Math.abs(y1 - fp.h - (y2 - tp?.h)) < 10) {
+ const sideY = fp.y + fp.h / 2;
+ const midX = (fp.x + fp.w + tp.x) / 2;
+ edges += `${alloc.percentage}% `;
+ } else {
+ const cy1 = y1 + (y2 - y1) * 0.4;
+ const cy2 = y1 + (y2 - y1) * 0.6;
+ edges += `${alloc.percentage}% `;
+ }
+ });
+ });
+
+ // Spending edges (funnel → outcome)
+ funnels.forEach((fn) => {
+ const fd = fn.data as FunnelNodeData;
+ const fp = positions.get(fn.id);
+ if (!fp) return;
+ fd.spendingAllocations?.forEach((alloc, i) => {
+ const tp = positions.get(alloc.targetId);
+ if (!tp) return;
+ const x1 = fp.x + fp.w / 2;
+ const y1 = fp.y + fp.h;
+ const x2 = tp.x + tp.w / 2;
+ const y2 = tp.y;
+ const cy1 = y1 + (y2 - y1) * 0.4;
+ const cy2 = y1 + (y2 - y1) * 0.6;
+ edges += `${alloc.percentage}% `;
+ });
+ });
+
+ // Render nodes
+ let nodesSvg = "";
+
+ // Sources
+ sources.forEach((sn) => {
+ const sd = sn.data as SourceNodeData;
+ const p = positions.get(sn.id)!;
+ nodesSvg += `
+ ${this.esc(sd.label)}
+ $${sd.flowRate.toLocaleString()}/mo · ${sd.sourceType}
+ `;
+ });
+
+ // Funnels
+ funnels.forEach((fn) => {
+ const fd = fn.data as FunnelNodeData;
+ const p = positions.get(fn.id)!;
+ const sufficiency = computeSufficiencyState(fd);
+ const isSufficient = sufficiency === "sufficient" || sufficiency === "abundant";
+ const threshold = fd.sufficientThreshold ?? fd.maxThreshold;
+ const fillPct = Math.min(1, fd.currentValue / (fd.maxCapacity || 1));
+ const fillH = fillPct * (p.h - 36);
+ const fillY = p.y + 36 + (p.h - 36) - fillH;
+
+ const borderColor = fd.currentValue > fd.maxThreshold ? "#f59e0b"
+ : fd.currentValue < fd.minThreshold ? "#ef4444"
+ : isSufficient ? "#fbbf24" : "#0ea5e9";
+ const fillColor = fd.currentValue > fd.maxThreshold ? "#f59e0b"
+ : fd.currentValue < fd.minThreshold ? "#ef4444"
+ : isSufficient ? "#fbbf24" : "#0ea5e9";
+ const statusLabel = sufficiency === "abundant" ? "Abundant"
+ : sufficiency === "sufficient" ? "Sufficient"
+ : fd.currentValue < fd.minThreshold ? "Critical" : "Seeking";
+
+ nodesSvg += `
+ ${isSufficient ? `${this.esc(fd.label)}
+ $${Math.floor(fd.currentValue).toLocaleString()} / $${Math.floor(threshold).toLocaleString()}
+ ${statusLabel}
+ `;
+ });
+
+ // Outcomes
+ outcomes.forEach((on) => {
+ const od = on.data as OutcomeNodeData;
+ const p = positions.get(on.id)!;
+ const fillPct = od.fundingTarget > 0 ? Math.min(1, od.fundingReceived / od.fundingTarget) : 0;
+ const statusColor = od.status === "completed" ? "#10b981"
+ : od.status === "blocked" ? "#ef4444"
+ : od.status === "in-progress" ? "#3b82f6" : "#64748b";
+
+ nodesSvg += `
+ ${this.esc(od.label)}
+ ${Math.round(fillPct * 100)}% · $${Math.floor(od.fundingReceived).toLocaleString()}
+ `;
+ });
+
+ // Sufficiency badge
+ const score = computeSystemSufficiency(this.nodes);
+ const scorePct = Math.round(score * 100);
+ const scoreColor = scorePct >= 90 ? "#fbbf24" : scorePct >= 60 ? "#10b981" : scorePct >= 30 ? "#f59e0b" : "#ef4444";
+
+ return `
+
+
+ ${defs}
+ ${edges}
+ ${nodesSvg}
+
+ ${scorePct}%
+ ENOUGH
+
+
+
+
+