Merge pull request #6223 from janh/luci-mod-dsl-pilot-tones
luci-mod-dsl: add pilot tones
This commit is contained in:
commit
ddc5f5fd89
1 changed files with 57 additions and 25 deletions
|
@ -89,6 +89,7 @@ const usQLNData = new DataSet(window.json['qln']['upstream'], myQLNFunction);
|
|||
const dsQLNData = new DataSet(window.json['qln']['downstream'], myQLNFunction);
|
||||
const usHLOGData = new DataSet(window.json['hlog']['upstream'], myHLOGFunction);
|
||||
const dsHLOGData = new DataSet(window.json['hlog']['downstream'], myHLOGFunction);
|
||||
const pilotTonesData = window.json['pilot_tones'] || [];
|
||||
|
||||
const marginX = 50;
|
||||
const marginY = 80;
|
||||
|
@ -120,6 +121,12 @@ let bitsChart = {
|
|||
"data" : dsBitsData.data,
|
||||
"color": "navy",
|
||||
"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);
|
||||
|
||||
drawData(info.config, info.dataSet[0].data, info.dataSet[0].color);
|
||||
drawData(info.config, info.dataSet[1].data, info.dataSet[1].color);
|
||||
for (let item of info.dataSet) {
|
||||
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) {
|
||||
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) {
|
||||
let ctx = config.ctx;
|
||||
let len = dataPoints.length;
|
||||
|
@ -263,35 +295,35 @@ function drawLegend(config, dataSet){
|
|||
let graphHeight = config.graphHeight;
|
||||
|
||||
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") {
|
||||
ctx.strokeStyle = "#505050";
|
||||
ctx.fillStyle = "#A0A0A0";
|
||||
} else {
|
||||
ctx.strokeStyle = "#303030";
|
||||
ctx.fillStyle = "#303030";
|
||||
let legendWidth = -10;
|
||||
for (let item of dataSet) {
|
||||
legendWidth += 50 + ctx.measureText(item.title).width;
|
||||
}
|
||||
|
||||
ctx.textAlign = "right"
|
||||
ctx.fillText(dataSet[0].title, 0.5 * graphWidth + marginX - 10, config.canvas.height - marginY*1/4);
|
||||
var x = 0.5 * (graphWidth - legendWidth) + marginX;
|
||||
var y = config.canvas.height - marginY*1/4;
|
||||
|
||||
ctx.fillStyle = dataSet[1].color;
|
||||
ctx.fillRect(0.5 * graphWidth + marginX, config.canvas.height - marginY*1/4 - 8, 30, 10);
|
||||
ctx.strokeStyle = "#C0C0C0";
|
||||
ctx.strokeRect(0.5 * graphWidth + marginX, config.canvas.height - marginY*1/4 - 8, 30, 10);
|
||||
for (let item of dataSet) {
|
||||
ctx.fillStyle = item.color;
|
||||
ctx.fillRect(x, y - 8, 30, 10);
|
||||
ctx.strokeStyle = "#C0C0C0";
|
||||
ctx.strokeRect(x, y - 8, 30, 10);
|
||||
|
||||
if (darkMode == "true") {
|
||||
ctx.fillStyle = "#A0A0A0";
|
||||
} else {
|
||||
ctx.fillStyle = "#303030";
|
||||
if (darkMode == "true") {
|
||||
ctx.fillStyle = "#A0A0A0";
|
||||
} else {
|
||||
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) {
|
||||
|
|
Loading…
Reference in a new issue