mirror of
https://github.com/LibreQoE/LibreQoS.git
synced 2025-02-25 18:55:32 -06:00
Various chart improvements.
This commit is contained in:
parent
614685ba49
commit
ea7ec93c80
@ -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)
|
||||||
|
@ -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',
|
||||||
|
@ -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',
|
||||||
|
@ -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];
|
||||||
|
@ -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',
|
||||||
|
@ -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',
|
||||||
|
@ -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',
|
||||||
|
@ -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',
|
||||||
|
@ -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"),
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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">
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user