From ea7ec93c803ebd83e12de506998838965fa60370 Mon Sep 17 00:00:00 2001
From: Herbert Wolverson <herberticus@gmail.com>
Date: Mon, 15 May 2023 16:58:03 +0000
Subject: [PATCH] Various chart improvements.

---
 src/rust/long_term_stats/pgdb/src/tree.rs     |  3 ++
 .../site_build/src/components/packets.ts      |  8 ++---
 .../src/components/packets_single.ts          |  8 ++---
 .../site_build/src/components/root_heat.ts    |  2 +-
 .../site_build/src/components/throughput.ts   |  8 ++---
 .../src/components/throughput_circuit.ts      |  8 ++---
 .../src/components/throughput_single.ts       |  8 ++---
 .../src/components/throughput_site.ts         |  8 ++---
 .../site_build/src/dashboard/dashboard.ts     |  2 ++
 .../site_build/src/dashboard/template.html    | 10 ++++++
 .../site_build/src/site_tree/site_tree.ts     | 34 ++++++++++---------
 11 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/src/rust/long_term_stats/pgdb/src/tree.rs b/src/rust/long_term_stats/pgdb/src/tree.rs
index 17f6fb1d..1d9e8322 100644
--- a/src/rust/long_term_stats/pgdb/src/tree.rs
+++ b/src/rust/long_term_stats/pgdb/src/tree.rs
@@ -45,6 +45,9 @@ pub async fn get_site_id_from_name(
     key: &str,
     site_name: &str,
 ) -> 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")
         .bind(key)
         .bind(site_name)
diff --git a/src/rust/long_term_stats/site_build/src/components/packets.ts b/src/rust/long_term_stats/site_build/src/components/packets.ts
index a1c1d0cc..8e646f96 100644
--- a/src/rust/long_term_stats/site_build/src/components/packets.ts
+++ b/src/rust/long_term_stats/site_build/src/components/packets.ts
@@ -31,8 +31,8 @@ export class PacketsChart implements Component {
             let legend: string[] = [];
             for (let i=0; i<event.nodes.length; i++) {
                 let node = event.nodes[i];
-                legend.push(node.node_name + " DL");
-                legend.push(node.node_name + " UL");
+                legend.push(node.node_name);
+                //legend.push(node.node_name + " UL");
                 //console.log(node);
 
                 let d: number[] = [];
@@ -70,7 +70,7 @@ export class PacketsChart implements Component {
                     },
                 };
                 let val: echarts.SeriesOption = {
-                    name: node.node_name + " DL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
@@ -114,7 +114,7 @@ export class PacketsChart implements Component {
                     },
                 };
                 val = {
-                    name: node.node_name + " UL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
diff --git a/src/rust/long_term_stats/site_build/src/components/packets_single.ts b/src/rust/long_term_stats/site_build/src/components/packets_single.ts
index 6719f459..329c2309 100644
--- a/src/rust/long_term_stats/site_build/src/components/packets_single.ts
+++ b/src/rust/long_term_stats/site_build/src/components/packets_single.ts
@@ -35,8 +35,8 @@ export class PacketsChartSingle implements Component {
             let legend: string[] = [];
             for (let i=0; i<event.nodes.length; i++) {
                 let node = event.nodes[i];
-                legend.push(node.node_name + " DL");
-                legend.push(node.node_name + " UL");
+                legend.push(node.node_name);
+                //legend.push(node.node_name + " UL");
                 //console.log(node);
 
                 let d: number[] = [];
@@ -74,7 +74,7 @@ export class PacketsChartSingle implements Component {
                     },
                 };
                 let val: echarts.SeriesOption = {
-                    name: node.node_name + " DL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
@@ -118,7 +118,7 @@ export class PacketsChartSingle implements Component {
                     },
                 };
                 val = {
-                    name: node.node_name + " UL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
diff --git a/src/rust/long_term_stats/site_build/src/components/root_heat.ts b/src/rust/long_term_stats/site_build/src/components/root_heat.ts
index d3334f13..b955c7d1 100644
--- a/src/rust/long_term_stats/site_build/src/components/root_heat.ts
+++ b/src/rust/long_term_stats/site_build/src/components/root_heat.ts
@@ -36,7 +36,7 @@ export class RootHeat implements Component {
                 keys.push(key);
             }
             keys = keys.sort().reverse();
-            console.log(keys);
+            //console.log(keys);
 
             for (let j=0; j<keys.length; j++) {
                 let key = keys[j];
diff --git a/src/rust/long_term_stats/site_build/src/components/throughput.ts b/src/rust/long_term_stats/site_build/src/components/throughput.ts
index a7a67103..fcf8a93e 100644
--- a/src/rust/long_term_stats/site_build/src/components/throughput.ts
+++ b/src/rust/long_term_stats/site_build/src/components/throughput.ts
@@ -31,8 +31,8 @@ export class ThroughputChart implements Component {
             let legend: string[] = [];
             for (let i=0; i<event.nodes.length; i++) {
                 let node = event.nodes[i];
-                legend.push(node.node_name + " DL");
-                legend.push(node.node_name + " UL");
+                legend.push(node.node_name);
+                //legend.push(node.node_name + " UL");
                 //console.log(node);
 
                 let d: number[] = [];
@@ -70,7 +70,7 @@ export class ThroughputChart implements Component {
                     },
                 };
                 let val: echarts.SeriesOption = {
-                    name: node.node_name + " DL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
@@ -114,7 +114,7 @@ export class ThroughputChart implements Component {
                     },
                 };
                 val = {
-                    name: node.node_name + " UL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
diff --git a/src/rust/long_term_stats/site_build/src/components/throughput_circuit.ts b/src/rust/long_term_stats/site_build/src/components/throughput_circuit.ts
index 24981c37..e0c26580 100644
--- a/src/rust/long_term_stats/site_build/src/components/throughput_circuit.ts
+++ b/src/rust/long_term_stats/site_build/src/components/throughput_circuit.ts
@@ -33,8 +33,8 @@ export class ThroughputCircuitChart implements Component {
             let legend: string[] = [];
             for (let i=0; i<event.nodes.length; i++) {
                 let node = event.nodes[i];
-                legend.push(node.node_name + " DL");
-                legend.push(node.node_name + " UL");
+                legend.push(node.node_name);
+                //legend.push(node.node_name + " UL");
                 //console.log(node);
 
                 let d: number[] = [];
@@ -72,7 +72,7 @@ export class ThroughputCircuitChart implements Component {
                     },
                 };
                 let val: echarts.SeriesOption = {
-                    name: node.node_name + " DL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
@@ -116,7 +116,7 @@ export class ThroughputCircuitChart implements Component {
                     },
                 };
                 val = {
-                    name: node.node_name + " UL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
diff --git a/src/rust/long_term_stats/site_build/src/components/throughput_single.ts b/src/rust/long_term_stats/site_build/src/components/throughput_single.ts
index 72718f14..9301c763 100644
--- a/src/rust/long_term_stats/site_build/src/components/throughput_single.ts
+++ b/src/rust/long_term_stats/site_build/src/components/throughput_single.ts
@@ -35,8 +35,8 @@ export class ThroughputChartSingle implements Component {
             let legend: string[] = [];
             for (let i=0; i<event.nodes.length; i++) {
                 let node = event.nodes[i];
-                legend.push(node.node_name + " DL");
-                legend.push(node.node_name + " UL");
+                legend.push(node.node_name);
+                //legend.push(node.node_name + " UL");
                 //console.log(node);
 
                 let d: number[] = [];
@@ -74,7 +74,7 @@ export class ThroughputChartSingle implements Component {
                     },
                 };
                 let val: echarts.SeriesOption = {
-                    name: node.node_name + " DL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
@@ -118,7 +118,7 @@ export class ThroughputChartSingle implements Component {
                     },
                 };
                 val = {
-                    name: node.node_name + " UL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
diff --git a/src/rust/long_term_stats/site_build/src/components/throughput_site.ts b/src/rust/long_term_stats/site_build/src/components/throughput_site.ts
index 11b0a79d..84dfa967 100644
--- a/src/rust/long_term_stats/site_build/src/components/throughput_site.ts
+++ b/src/rust/long_term_stats/site_build/src/components/throughput_site.ts
@@ -33,8 +33,8 @@ export class ThroughputSiteChart implements Component {
             let legend: string[] = [];
             for (let i=0; i<event.nodes.length; i++) {
                 let node = event.nodes[i];
-                legend.push(node.node_name + " DL");
-                legend.push(node.node_name + " UL");
+                legend.push(node.node_name);
+                //legend.push(node.node_name + " UL");
                 //console.log(node);
 
                 let d: number[] = [];
@@ -72,7 +72,7 @@ export class ThroughputSiteChart implements Component {
                     },
                 };
                 let val: echarts.SeriesOption = {
-                    name: node.node_name + " DL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
@@ -116,7 +116,7 @@ export class ThroughputSiteChart implements Component {
                     },
                 };
                 val = {
-                    name: node.node_name + " UL",
+                    name: node.node_name,
                     type: "line",
                     data: d,
                     symbol: 'none',
diff --git a/src/rust/long_term_stats/site_build/src/dashboard/dashboard.ts b/src/rust/long_term_stats/site_build/src/dashboard/dashboard.ts
index 448be514..11bdc4f7 100644
--- a/src/rust/long_term_stats/site_build/src/dashboard/dashboard.ts
+++ b/src/rust/long_term_stats/site_build/src/dashboard/dashboard.ts
@@ -8,6 +8,7 @@ import { ThroughputChart } from '../components/throughput';
 import { RttChart } from '../components/rtt_graph';
 import { RttHisto } from '../components/rtt_histo';
 import { RootHeat } from '../components/root_heat';
+import { SiteStackChart } from '../components/site_stack';
 
 export class DashboardPage implements Page {
     menu: MenuPage;
@@ -26,6 +27,7 @@ export class DashboardPage implements Page {
             new RttChart(),
             new RttHisto(),
             new RootHeat(),
+            new SiteStackChart("root"),
         ];
     }
 
diff --git a/src/rust/long_term_stats/site_build/src/dashboard/template.html b/src/rust/long_term_stats/site_build/src/dashboard/template.html
index 587142a5..802032da 100644
--- a/src/rust/long_term_stats/site_build/src/dashboard/template.html
+++ b/src/rust/long_term_stats/site_build/src/dashboard/template.html
@@ -40,6 +40,16 @@
         </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="col-12">
             <div class="card">
diff --git a/src/rust/long_term_stats/site_build/src/site_tree/site_tree.ts b/src/rust/long_term_stats/site_build/src/site_tree/site_tree.ts
index d3fee155..7e96ccb2 100644
--- a/src/rust/long_term_stats/site_build/src/site_tree/site_tree.ts
+++ b/src/rust/long_term_stats/site_build/src/site_tree/site_tree.ts
@@ -109,22 +109,24 @@ function buildTree(data: TreeItem[]) {
 
     for (let i=0; i<data.length; i++) {
         if (data[i].parent == 0) {
-            let up = (data[i].current_up / (data[i].max_up * mbps_to_bps)) * 100.0;
-            let down = (data[i].current_down / (data[i].max_down * mbps_to_bps)) * 100.0;
-            let peak = Math.max(up, down);
-            let usageBg = usageColor(peak);
-            let rttBg = rttColor(data[i].current_rtt / 100);
-            html += "<tr>";
-            let url = makeUrl(data[i].site_type, data[i].site_name);
-            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].max_down * mbps_to_bps) + " / " + scaleNumber(data[i].max_up * mbps_to_bps) + "</td>";
-            html += "</td><td>" + scaleNumber(data[i].current_down) + " / " + scaleNumber(data[i].current_up) + "</td>";
-            html += "<td style='background-color: " + usageBg + "'>" + up.toFixed(1) + "% / " + down.toFixed(1) + "%</td>";
-            html += "<td style='background-color: " + rttBg + "'>" + (data[i].current_rtt / 100).toFixed(1) + "</td>";
-            html += "</tr>";
-            html += treeChildren(data, data[i].index, 1);
-            def += "Root --> " + data[i].index + "[" + t(data[i].site_name) + "]\n";
-            def += graphChildren(data, data[i].index, 1);
+            if (data[i].site_name != "Root") {
+                let up = (data[i].current_up / (data[i].max_up * mbps_to_bps)) * 100.0;
+                let down = (data[i].current_down / (data[i].max_down * mbps_to_bps)) * 100.0;
+                let peak = Math.max(up, down);
+                let usageBg = usageColor(peak);
+                let rttBg = rttColor(data[i].current_rtt / 100);
+                html += "<tr>";
+                let url = makeUrl(data[i].site_type, data[i].site_name);
+                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].max_down * mbps_to_bps) + " / " + scaleNumber(data[i].max_up * mbps_to_bps) + "</td>";
+                html += "</td><td>" + scaleNumber(data[i].current_down) + " / " + scaleNumber(data[i].current_up) + "</td>";
+                html += "<td style='background-color: " + usageBg + "'>" + up.toFixed(1) + "% / " + down.toFixed(1) + "%</td>";
+                html += "<td style='background-color: " + rttBg + "'>" + (data[i].current_rtt / 100).toFixed(1) + "</td>";
+                html += "</tr>";
+                html += treeChildren(data, data[i].index, 1);
+                def += "Root --> " + data[i].index + "[" + t(data[i].site_name) + "]\n";
+                def += graphChildren(data, data[i].index, 1);
+            }
         }
     }