Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #6223 from janh/luci-mod-dsl-pilot-tones

Browse source 
luci-mod-dsl: add pilot tones
This commit is contained in:
Jo-Philipp Wich 2023-02-06 10:20:54 +01:00 committed by GitHub
commit ddc5f5fd89
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js
View file

@ -89,6 +89,7 @@ const usQLNData = new DataSet(window.json['qln']['upstream'], myQLNFunction);
const dsQLNData = new DataSet(window.json['qln']['downstream'], myQLNFunction); const dsQLNData = new DataSet(window.json['qln']['downstream'], myQLNFunction);
const usHLOGData = new DataSet(window.json['hlog']['upstream'], myHLOGFunction); const usHLOGData = new DataSet(window.json['hlog']['upstream'], myHLOGFunction);
const dsHLOGData = new DataSet(window.json['hlog']['downstream'], myHLOGFunction); const dsHLOGData = new DataSet(window.json['hlog']['downstream'], myHLOGFunction);
const pilotTonesData = window.json['pilot_tones'] || [];
const marginX = 50; const marginX = 50;
const marginY = 80; const marginY = 80;
@ -120,6 +121,12 @@ let bitsChart = {
"data" : dsBitsData.data, "data" : dsBitsData.data,
"color": "navy", "color": "navy",
"title": _("Downstream bits allocation") "title": _("Downstream bits allocation")
},
{
"lines": true,
"data": pilotTonesData,
"color": "red",
"title": _("Pilot tones")
} }
] ]
}; };
@ -220,14 +227,39 @@ function drawChart (info) {
drawLegend(info.config, info.dataSet); drawLegend(info.config, info.dataSet);
drawData(info.config, info.dataSet[0].data, info.dataSet[0].color); for (let item of info.dataSet) {
drawData(info.config, info.dataSet[1].data, info.dataSet[1].color); if (item.lines === true) {
drawLines(info.config, item.data, item.color);
} else {
drawData(info.config, item.data, item.color);
}
}
} }
function drawBlocks(config, dataPoints, color, borders) { function drawBlocks(config, dataPoints, color, borders) {
borders.map(drawBlock, {config, dataPoints, color, borders}); borders.map(drawBlock, {config, dataPoints, color, borders});
} }
function drawLines(config, dataPoints, color) {
let ctx = config.ctx;
let len = dataPoints.length;
let minX = config.minX;
let maxX = config.maxX;
let minY = config.minY;
let maxY = config.maxY;
ctx.strokeStyle = color;
ctx.beginPath();
for (let item of dataPoints) {
let relX = (item - minX) / (maxX - minX);
ctx.moveTo(relX * config.graphWidth + marginX, marginY);
ctx.lineTo(relX * config.graphWidth + marginX, marginY + config.graphHeight);
}
ctx.stroke();
}
function drawData(config, dataPoints, color) { function drawData(config, dataPoints, color) {
let ctx = config.ctx; let ctx = config.ctx;
let len = dataPoints.length; let len = dataPoints.length;
@ -263,35 +295,35 @@ function drawLegend(config, dataSet){
let graphHeight = config.graphHeight; let graphHeight = config.graphHeight;
ctx.font = "12px Arial"; ctx.font = "12px Arial";
ctx.fillStyle = dataSet[0].color;
ctx.fillRect(0.5 * graphWidth + marginX - ctx.measureText(dataSet[0].title).width - 50, config.canvas.height - marginY*1/4 - 8, 30, 10);
ctx.strokeStyle = "#C0C0C0";
ctx.strokeRect(0.5 * graphWidth + marginX - ctx.measureText(dataSet[0].title).width - 50, config.canvas.height - marginY*1/4 - 8, 30, 10);
if (darkMode == "true") { let legendWidth = -10;
ctx.strokeStyle = "#505050"; for (let item of dataSet) {
ctx.fillStyle = "#A0A0A0"; legendWidth += 50 + ctx.measureText(item.title).width;
} else {
ctx.strokeStyle = "#303030";
ctx.fillStyle = "#303030";
} }
ctx.textAlign = "right" var x = 0.5 * (graphWidth - legendWidth) + marginX;
ctx.fillText(dataSet[0].title, 0.5 * graphWidth + marginX - 10, config.canvas.height - marginY*1/4); var y = config.canvas.height - marginY*1/4;
ctx.fillStyle = dataSet[1].color; for (let item of dataSet) {
ctx.fillRect(0.5 * graphWidth + marginX, config.canvas.height - marginY*1/4 - 8, 30, 10); ctx.fillStyle = item.color;
ctx.strokeStyle = "#C0C0C0"; ctx.fillRect(x, y - 8, 30, 10);
ctx.strokeRect(0.5 * graphWidth + marginX, config.canvas.height - marginY*1/4 - 8, 30, 10); ctx.strokeStyle = "#C0C0C0";
ctx.strokeRect(x, y - 8, 30, 10);
if (darkMode == "true") { if (darkMode == "true") {
ctx.fillStyle = "#A0A0A0"; ctx.fillStyle = "#A0A0A0";
} else { } else {
ctx.fillStyle = "#303030"; ctx.fillStyle = "#303030";
}
x += 40;
ctx.textAlign = "left"
ctx.fillText(item.title, x, y);
x += ctx.measureText(item.title).width;
x += 10;
} }
ctx.textAlign = "left"
ctx.fillText(dataSet[1].title, 0.5 * graphWidth + marginX + 40, config.canvas.height - marginY*1/4);
} }
function drawAxisX(config, minValue, maxValue, step, title) { function drawAxisX(config, minValue, maxValue, step, title) {