Various chart improvements.

This commit is contained in:
Herbert Wolverson 2023-05-15 16:58:03 +00:00
parent 614685ba49
commit ea7ec93c80
11 changed files with 58 additions and 41 deletions

View File

@ -45,6 +45,9 @@ pub async fn get_site_id_from_name(
key: &str, key: &str,
site_name: &str, site_name: &str,
) -> Result<i32, StatsHostError> { ) -> Result<i32, StatsHostError> {
if site_name == "root" {
return Ok(0);
}
let site_id_db = sqlx::query("SELECT index FROM site_tree WHERE key = $1 AND site_name=$2") let site_id_db = sqlx::query("SELECT index FROM site_tree WHERE key = $1 AND site_name=$2")
.bind(key) .bind(key)
.bind(site_name) .bind(site_name)

View File

@ -31,8 +31,8 @@ export class PacketsChart implements Component {
let legend: string[] = []; let legend: string[] = [];
for (let i=0; i<event.nodes.length; i++) { for (let i=0; i<event.nodes.length; i++) {
let node = event.nodes[i]; let node = event.nodes[i];
legend.push(node.node_name + " DL"); legend.push(node.node_name);
legend.push(node.node_name + " UL"); //legend.push(node.node_name + " UL");
//console.log(node); //console.log(node);
let d: number[] = []; let d: number[] = [];
@ -70,7 +70,7 @@ export class PacketsChart implements Component {
}, },
}; };
let val: echarts.SeriesOption = { let val: echarts.SeriesOption = {
name: node.node_name + " DL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',
@ -114,7 +114,7 @@ export class PacketsChart implements Component {
}, },
}; };
val = { val = {
name: node.node_name + " UL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',

View File

@ -35,8 +35,8 @@ export class PacketsChartSingle implements Component {
let legend: string[] = []; let legend: string[] = [];
for (let i=0; i<event.nodes.length; i++) { for (let i=0; i<event.nodes.length; i++) {
let node = event.nodes[i]; let node = event.nodes[i];
legend.push(node.node_name + " DL"); legend.push(node.node_name);
legend.push(node.node_name + " UL"); //legend.push(node.node_name + " UL");
//console.log(node); //console.log(node);
let d: number[] = []; let d: number[] = [];
@ -74,7 +74,7 @@ export class PacketsChartSingle implements Component {
}, },
}; };
let val: echarts.SeriesOption = { let val: echarts.SeriesOption = {
name: node.node_name + " DL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',
@ -118,7 +118,7 @@ export class PacketsChartSingle implements Component {
}, },
}; };
val = { val = {
name: node.node_name + " UL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',

View File

@ -36,7 +36,7 @@ export class RootHeat implements Component {
keys.push(key); keys.push(key);
} }
keys = keys.sort().reverse(); keys = keys.sort().reverse();
console.log(keys); //console.log(keys);
for (let j=0; j<keys.length; j++) { for (let j=0; j<keys.length; j++) {
let key = keys[j]; let key = keys[j];

View File

@ -31,8 +31,8 @@ export class ThroughputChart implements Component {
let legend: string[] = []; let legend: string[] = [];
for (let i=0; i<event.nodes.length; i++) { for (let i=0; i<event.nodes.length; i++) {
let node = event.nodes[i]; let node = event.nodes[i];
legend.push(node.node_name + " DL"); legend.push(node.node_name);
legend.push(node.node_name + " UL"); //legend.push(node.node_name + " UL");
//console.log(node); //console.log(node);
let d: number[] = []; let d: number[] = [];
@ -70,7 +70,7 @@ export class ThroughputChart implements Component {
}, },
}; };
let val: echarts.SeriesOption = { let val: echarts.SeriesOption = {
name: node.node_name + " DL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',
@ -114,7 +114,7 @@ export class ThroughputChart implements Component {
}, },
}; };
val = { val = {
name: node.node_name + " UL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',

View File

@ -33,8 +33,8 @@ export class ThroughputCircuitChart implements Component {
let legend: string[] = []; let legend: string[] = [];
for (let i=0; i<event.nodes.length; i++) { for (let i=0; i<event.nodes.length; i++) {
let node = event.nodes[i]; let node = event.nodes[i];
legend.push(node.node_name + " DL"); legend.push(node.node_name);
legend.push(node.node_name + " UL"); //legend.push(node.node_name + " UL");
//console.log(node); //console.log(node);
let d: number[] = []; let d: number[] = [];
@ -72,7 +72,7 @@ export class ThroughputCircuitChart implements Component {
}, },
}; };
let val: echarts.SeriesOption = { let val: echarts.SeriesOption = {
name: node.node_name + " DL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',
@ -116,7 +116,7 @@ export class ThroughputCircuitChart implements Component {
}, },
}; };
val = { val = {
name: node.node_name + " UL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',

View File

@ -35,8 +35,8 @@ export class ThroughputChartSingle implements Component {
let legend: string[] = []; let legend: string[] = [];
for (let i=0; i<event.nodes.length; i++) { for (let i=0; i<event.nodes.length; i++) {
let node = event.nodes[i]; let node = event.nodes[i];
legend.push(node.node_name + " DL"); legend.push(node.node_name);
legend.push(node.node_name + " UL"); //legend.push(node.node_name + " UL");
//console.log(node); //console.log(node);
let d: number[] = []; let d: number[] = [];
@ -74,7 +74,7 @@ export class ThroughputChartSingle implements Component {
}, },
}; };
let val: echarts.SeriesOption = { let val: echarts.SeriesOption = {
name: node.node_name + " DL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',
@ -118,7 +118,7 @@ export class ThroughputChartSingle implements Component {
}, },
}; };
val = { val = {
name: node.node_name + " UL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',

View File

@ -33,8 +33,8 @@ export class ThroughputSiteChart implements Component {
let legend: string[] = []; let legend: string[] = [];
for (let i=0; i<event.nodes.length; i++) { for (let i=0; i<event.nodes.length; i++) {
let node = event.nodes[i]; let node = event.nodes[i];
legend.push(node.node_name + " DL"); legend.push(node.node_name);
legend.push(node.node_name + " UL"); //legend.push(node.node_name + " UL");
//console.log(node); //console.log(node);
let d: number[] = []; let d: number[] = [];
@ -72,7 +72,7 @@ export class ThroughputSiteChart implements Component {
}, },
}; };
let val: echarts.SeriesOption = { let val: echarts.SeriesOption = {
name: node.node_name + " DL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',
@ -116,7 +116,7 @@ export class ThroughputSiteChart implements Component {
}, },
}; };
val = { val = {
name: node.node_name + " UL", name: node.node_name,
type: "line", type: "line",
data: d, data: d,
symbol: 'none', symbol: 'none',

View File

@ -8,6 +8,7 @@ import { ThroughputChart } from '../components/throughput';
import { RttChart } from '../components/rtt_graph'; import { RttChart } from '../components/rtt_graph';
import { RttHisto } from '../components/rtt_histo'; import { RttHisto } from '../components/rtt_histo';
import { RootHeat } from '../components/root_heat'; import { RootHeat } from '../components/root_heat';
import { SiteStackChart } from '../components/site_stack';
export class DashboardPage implements Page { export class DashboardPage implements Page {
menu: MenuPage; menu: MenuPage;
@ -26,6 +27,7 @@ export class DashboardPage implements Page {
new RttChart(), new RttChart(),
new RttHisto(), new RttHisto(),
new RootHeat(), new RootHeat(),
new SiteStackChart("root"),
]; ];
} }

View File

@ -40,6 +40,16 @@
</div> </div>
</div> </div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div id="siteStack" style="height: 900px"></div>
</div>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">

View File

@ -109,22 +109,24 @@ function buildTree(data: TreeItem[]) {
for (let i=0; i<data.length; i++) { for (let i=0; i<data.length; i++) {
if (data[i].parent == 0) { if (data[i].parent == 0) {
let up = (data[i].current_up / (data[i].max_up * mbps_to_bps)) * 100.0; if (data[i].site_name != "Root") {
let down = (data[i].current_down / (data[i].max_down * mbps_to_bps)) * 100.0; let up = (data[i].current_up / (data[i].max_up * mbps_to_bps)) * 100.0;
let peak = Math.max(up, down); let down = (data[i].current_down / (data[i].max_down * mbps_to_bps)) * 100.0;
let usageBg = usageColor(peak); let peak = Math.max(up, down);
let rttBg = rttColor(data[i].current_rtt / 100); let usageBg = usageColor(peak);
html += "<tr>"; let rttBg = rttColor(data[i].current_rtt / 100);
let url = makeUrl(data[i].site_type, data[i].site_name); html += "<tr>";
html += "<td>" + siteIcon(data[i].site_type) + " <a href='#" + url + "' onclick='window.router.goto(\"" + url + "\")'>" + data[i].site_name + "</a>"; let url = makeUrl(data[i].site_type, data[i].site_name);
html += "</td><td>" + scaleNumber(data[i].max_down * mbps_to_bps) + " / " + scaleNumber(data[i].max_up * mbps_to_bps) + "</td>"; html += "<td>" + siteIcon(data[i].site_type) + " <a href='#" + url + "' onclick='window.router.goto(\"" + url + "\")'>" + data[i].site_name + "</a>";
html += "</td><td>" + scaleNumber(data[i].current_down) + " / " + scaleNumber(data[i].current_up) + "</td>"; html += "</td><td>" + scaleNumber(data[i].max_down * mbps_to_bps) + " / " + scaleNumber(data[i].max_up * mbps_to_bps) + "</td>";
html += "<td style='background-color: " + usageBg + "'>" + up.toFixed(1) + "% / " + down.toFixed(1) + "%</td>"; html += "</td><td>" + scaleNumber(data[i].current_down) + " / " + scaleNumber(data[i].current_up) + "</td>";
html += "<td style='background-color: " + rttBg + "'>" + (data[i].current_rtt / 100).toFixed(1) + "</td>"; html += "<td style='background-color: " + usageBg + "'>" + up.toFixed(1) + "% / " + down.toFixed(1) + "%</td>";
html += "</tr>"; html += "<td style='background-color: " + rttBg + "'>" + (data[i].current_rtt / 100).toFixed(1) + "</td>";
html += treeChildren(data, data[i].index, 1); html += "</tr>";
def += "Root --> " + data[i].index + "[" + t(data[i].site_name) + "]\n"; html += treeChildren(data, data[i].index, 1);
def += graphChildren(data, data[i].index, 1); def += "Root --> " + data[i].index + "[" + t(data[i].site_name) + "]\n";
def += graphChildren(data, data[i].index, 1);
}
} }
} }