diff --git a/modules/rflows/components/flows.css b/modules/rflows/components/flows.css index 7f1f384..aeb3415 100644 --- a/modules/rflows/components/flows.css +++ b/modules/rflows/components/flows.css @@ -756,18 +756,13 @@ min-width: 40px; text-align: right; } -/* Derived threshold info */ -.icp-derived-info { - margin-top: 6px; padding: 6px 0 0; - border-top: 1px solid var(--rs-border-subtle); -} -.icp-derived-row { - display: flex; align-items: center; gap: 6px; - font-size: 10px; color: var(--rs-text-secondary); margin-bottom: 3px; -} -.icp-derived-dot { - width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; -} +/* Threshold color bar */ +.icp-threshold-bar-wrap { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rs-border-subtle); } +.icp-threshold-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 1px; } +.icp-threshold-seg--red { background: var(--rflows-status-critical, #ef4444); } +.icp-threshold-seg--yellow { background: var(--rflows-status-sustained, #eab308); } +.icp-threshold-seg--green { background: var(--rflows-status-thriving, #10b981); } +.icp-threshold-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--rs-text-muted); margin-top: 2px; } /* Analytics bars */ .icp-analytics-row { diff --git a/modules/rflows/components/folk-flows-app.ts b/modules/rflows/components/folk-flows-app.ts index 7b08297..e0daa70 100644 --- a/modules/rflows/components/folk-flows-app.ts +++ b/modules/rflows/components/folk-flows-app.ts @@ -2873,13 +2873,20 @@ class FolkFlowsApp extends HTMLElement {
$/mo - + ${this.formatDollar(outflow)}
-
-
Min (1mo): ${this.formatDollar(d.minThreshold)}
-
Sufficient (4mo): ${this.formatDollar(d.sufficientThreshold ?? d.maxThreshold)}
-
Overflow (6mo): ${this.formatDollar(d.maxThreshold)}
+
+
+
+
+
+
+
+ ${this.formatDollar(d.minThreshold)} + ${this.formatDollar(d.sufficientThreshold ?? d.maxThreshold)} + ${this.formatDollar(d.maxThreshold)} +
`; } @@ -3252,13 +3259,13 @@ class FolkFlowsApp extends HTMLElement { fd.maxCapacity = derived.maxCapacity; const valueSpan = input.parentElement?.querySelector(".icp-range-value") as HTMLElement; if (valueSpan) valueSpan.textContent = this.formatDollar(val); - // Update derived info display - const info = overlay.querySelector(".icp-derived-info"); - if (info) { - const rows = info.querySelectorAll(".icp-derived-row"); - if (rows[0]) rows[0].innerHTML = `Min (1mo): ${this.formatDollar(derived.minThreshold)}`; - if (rows[1]) rows[1].innerHTML = `Sufficient (4mo): ${this.formatDollar(derived.sufficientThreshold)}`; - if (rows[2]) rows[2].innerHTML = `Overflow (6mo): ${this.formatDollar(derived.maxThreshold)}`; + // Update threshold bar labels + const thresholds = overlay.querySelector("[data-icp-thresholds]"); + if (thresholds) { + const spans = thresholds.querySelectorAll("span"); + if (spans[0]) spans[0].textContent = this.formatDollar(derived.minThreshold); + if (spans[1]) spans[1].textContent = this.formatDollar(derived.sufficientThreshold); + if (spans[2]) spans[2].textContent = this.formatDollar(derived.maxThreshold); } this.redrawNodeOnly(node); this.redrawEdges();