Add a little formatting to the capacity displays.

This commit is contained in:
Herbert Wolverson 2024-07-16 16:13:31 -05:00
parent 023ce18879
commit f61c6ae212
3 changed files with 12 additions and 7 deletions

View File

@ -1,6 +1,6 @@
import {BaseDashlet} from "./base_dashlet";
import {clearDashDiv, simpleRow, simpleRowHtml, theading} from "../helpers/builders";
import {scaleNumber, scaleNanos, formatRtt} from "../helpers/scaling";
import {clearDashDiv, simpleRowHtml, theading} from "../helpers/builders";
import {formatRtt, formatPercent} from "../helpers/scaling";
import {redactCell} from "../helpers/redact";
export class CircuitCapacityDash extends BaseDashlet {
@ -69,8 +69,8 @@ export class CircuitCapacityDash extends BaseDashlet {
linkCol.appendChild(link);
row.appendChild(linkCol);
row.appendChild(simpleRow((c.capacity[0]*100).toFixed(0)));
row.appendChild(simpleRow((c.capacity[1]*100).toFixed(0)));
row.appendChild(simpleRowHtml(formatPercent(c.capacity[0]*100)));
row.appendChild(simpleRowHtml(formatPercent(c.capacity[1]*100)));
row.appendChild(simpleRowHtml(formatRtt(c.rtt)));
tbody.appendChild(row);

View File

@ -1,6 +1,6 @@
import {BaseDashlet} from "./base_dashlet";
import {clearDashDiv, simpleRow, simpleRowHtml, theading} from "../helpers/builders";
import {scaleNumber, scaleNanos, formatRtt} from "../helpers/scaling";
import {formatRtt, formatPercent} from "../helpers/scaling";
export class TreeCapacityDash extends BaseDashlet {
constructor(slot) {
@ -63,8 +63,8 @@ export class TreeCapacityDash extends BaseDashlet {
row.classList.add("small");
row.appendChild(simpleRow(node.name));
row.appendChild(simpleRow((down*100).toFixed(0)));
row.appendChild(simpleRow((up*100).toFixed(0)));
row.appendChild(simpleRowHtml(formatPercent(down*100)));
row.appendChild(simpleRowHtml(formatPercent(up*100)));
row.appendChild(simpleRowHtml(formatRtt(node.rtt)));
tbody.appendChild(row);

View File

@ -128,4 +128,9 @@ export function lerpColor(color1, color2, weight) {
var g = Math.round(color1[1] + (color2[1] - color1[1]) * weight);
var b = Math.round(color1[2] + (color2[2] - color1[2]) * weight);
return `rgb(${r}, ${g}, ${b})`;
}
export function formatPercent(percent, digits=0) {
let color = lerpGreenToRedViaOrange(percent, 100);
return "<span style='color: " + color + "'>" + percent.toFixed(digits) + "%</span>";
}