+
+
← Flows
+
${this.esc(this.flowName || "Flow Detail")}
+ ${this.isDemo ? '
Demo' : ""}
+
${scorePct}%
@@ -581,6 +568,7 @@ class FolkFlowsApp extends HTMLElement {
+
+ ${this.renderAnalyticsPanel()}
- Source
- Funnel
- Overflow
- Spending
- Outcome
- Sufficient
+ Inflow
+ Spending
+ Overflow
+ Critical
+ Sustained
+ Thriving
@@ -893,6 +882,7 @@ class FolkFlowsApp extends HTMLElement {
else if (action === "add-outcome") this.addNode("outcome");
else if (action === "sim") this.toggleSimulation();
else if (action === "fit") this.fitView();
+ else if (action === "analytics") this.toggleAnalytics();
else if (action === "share") this.shareState();
else if (action === "zoom-in") { this.canvasZoom = Math.min(4, this.canvasZoom * 1.2); this.updateCanvasTransform(); }
else if (action === "zoom-out") { this.canvasZoom = Math.max(0.1, this.canvasZoom * 0.8); this.updateCanvasTransform(); }
@@ -989,6 +979,7 @@ class FolkFlowsApp extends HTMLElement {
if (e.key === "Escape") {
if (this.inlineEditNodeId) { this.exitInlineEdit(); return; }
if (this.wiringActive) { this.cancelWiring(); return; }
+ if (this.analyticsOpen) { this.toggleAnalytics(); return; }
this.closeModal();
this.closeEditor();
}
@@ -1081,19 +1072,14 @@ class FolkFlowsApp extends HTMLElement {
const d = n.data as FunnelNodeData;
const s = this.getNodeSize(n);
const x = n.position.x, y = n.position.y, w = s.w, h = s.h;
- const sufficiency = computeSufficiencyState(d);
- const isSufficient = sufficiency === "sufficient" || sufficiency === "abundant";
- const isAbundant = sufficiency === "abundant";
const threshold = d.sufficientThreshold ?? d.maxThreshold;
const fillPct = Math.min(1, d.currentValue / (d.maxCapacity || 1));
- const borderColor = d.currentValue > d.maxThreshold ? "#f59e0b"
- : d.currentValue < d.minThreshold ? "#ef4444"
- : isSufficient ? "#fbbf24" : "#0ea5e9";
+ const isOverflow = d.currentValue > d.maxThreshold;
+ const isCritical = d.currentValue < d.minThreshold;
+ const borderColor = isCritical ? "#ef4444" : isOverflow ? "#10b981" : "#f59e0b";
const fillColor = borderColor;
- const statusLabel = sufficiency === "abundant" ? "Abundant"
- : sufficiency === "sufficient" ? "Sufficient"
- : d.currentValue < d.minThreshold ? "Critical" : "Seeking";
+ const statusLabel = isCritical ? "Critical" : isOverflow ? "Overflow" : "Sustained";
// Funnel shape parameters
const r = 10; // corner radius
@@ -1154,13 +1140,14 @@ class FolkFlowsApp extends HTMLElement {
const satLabel = sat ? `${this.formatDollar(sat.actual)} of ${this.formatDollar(sat.needed)}/mo` : "";
const satBarBorder = satOverflow ? `stroke="#fbbf24" stroke-width="1"` : "";
- const glowClass = isSufficient ? " node-glow" : "";
+ const glowStyle = isOverflow ? "filter: drop-shadow(0 0 6px rgba(16,185,129,0.5))"
+ : !isCritical ? "filter: drop-shadow(0 0 6px rgba(245,158,11,0.4))" : "";
- return `
+ return `
- ${isSufficient ? `` : ""}
+ ${isOverflow ? `` : ""}
@@ -1168,10 +1155,10 @@ class FolkFlowsApp extends HTMLElement {
-
-
+
+
${this.esc(d.label)}
- ${statusLabel}
+ ${statusLabel}
${satLabel}
@@ -1265,7 +1252,7 @@ class FolkFlowsApp extends HTMLElement {
const flowAmount = d.flowRate * (alloc.percentage / 100);
edges.push({
fromNode: n, toNode: target, fromPort: "outflow",
- color: alloc.color || "#10b981", flowAmount,
+ color: "#10b981", flowAmount,
pct: alloc.percentage, dashed: false,
fromId: n.id, toId: alloc.targetId, edgeType: "source",
});
@@ -1283,7 +1270,7 @@ class FolkFlowsApp extends HTMLElement {
edges.push({
fromNode: n, toNode: target, fromPort: "overflow",
fromSide: side,
- color: alloc.color || "#f59e0b", flowAmount,
+ color: "#6ee7b7", flowAmount,
pct: alloc.percentage, dashed: true,
fromId: n.id, toId: alloc.targetId, edgeType: "overflow",
});
@@ -1300,7 +1287,7 @@ class FolkFlowsApp extends HTMLElement {
const flowAmount = drain * (alloc.percentage / 100);
edges.push({
fromNode: n, toNode: target, fromPort: "spending",
- color: alloc.color || "#8b5cf6", flowAmount,
+ color: "#34d399", flowAmount,
pct: alloc.percentage, dashed: false,
fromId: n.id, toId: alloc.targetId, edgeType: "spending",
});
@@ -1317,7 +1304,7 @@ class FolkFlowsApp extends HTMLElement {
const flowAmount = excess * (alloc.percentage / 100);
edges.push({
fromNode: n, toNode: target, fromPort: "overflow",
- color: alloc.color || "#f59e0b", flowAmount,
+ color: "#6ee7b7", flowAmount,
pct: alloc.percentage, dashed: true,
fromId: n.id, toId: alloc.targetId, edgeType: "overflow",
});
@@ -1446,11 +1433,9 @@ class FolkFlowsApp extends HTMLElement {
if (n.type === "source") return "#10b981";
if (n.type === "funnel") {
const d = n.data as FunnelNodeData;
- const suf = computeSufficiencyState(d);
- const isSuf = suf === "sufficient" || suf === "abundant";
- return d.currentValue > d.maxThreshold ? "#f59e0b"
- : d.currentValue < d.minThreshold ? "#ef4444"
- : isSuf ? "#fbbf24" : "#0ea5e9";
+ return d.currentValue < d.minThreshold ? "#ef4444"
+ : d.currentValue > d.maxThreshold ? "#10b981"
+ : "#f59e0b";
}
const d = n.data as OutcomeNodeData;
return d.status === "completed" ? "#10b981" : d.status === "blocked" ? "#ef4444" : d.status === "in-progress" ? "#3b82f6" : "#64748b";
@@ -2723,28 +2708,62 @@ class FolkFlowsApp extends HTMLElement {
}
}
- // ─── River tab ────────────────────────────────────────
+ // ─── Analytics popout panel ──────────────────────────
- private renderRiverTab(): string {
- return ``;
+ private renderAnalyticsPanel(): string {
+ return `
+
+
+
+ ${this.analyticsTab === "overview" ? this.renderTableTab() : this.renderTransactionsTab()}
+
+