From fd54b7b7ef2ea41ab55039ed3a01a5abe3f60206 Mon Sep 17 00:00:00 2001 From: Jan Hoffmann Date: Sat, 28 Jan 2023 19:14:53 +0100 Subject: luci-mod-dsl: allow arbitrary number of datasets per graph Currently the graph code is hard-coded to draw two datsets. Use loops instead to also allow more or less datasets. Signed-off-by: Jan Hoffmann --- .../luci-static/resources/view/status/dsl/graph.js | 51 +++++++++++----------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js b/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js index ba0d590c18..e6cc1a3221 100644 --- a/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js +++ b/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js @@ -220,8 +220,9 @@ 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) { + drawData(info.config, item.data, item.color); + } } function drawBlocks(config, dataPoints, color, borders) { @@ -263,35 +264,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"; + } - ctx.textAlign = "left" - ctx.fillText(dataSet[1].title, 0.5 * graphWidth + marginX + 40, config.canvas.height - marginY*1/4); + x += 40; + + ctx.textAlign = "left" + ctx.fillText(item.title, x, y); + + x += ctx.measureText(item.title).width; + x += 10; + } } function drawAxisX(config, minValue, maxValue, step, title) { -- cgit v1.2.3 From 3ed20aac9d086be6cec6291d0e33f19ef2d58355 Mon Sep 17 00:00:00 2001 From: Jan Hoffmann Date: Sat, 28 Jan 2023 19:15:03 +0100 Subject: luci-mod-dsl: add support for pilot tones in bit allocation graph If the data is available, draw pilot tones as vertical red lines. Signed-off-by: Jan Hoffmann --- .../luci-static/resources/view/status/dsl/graph.js | 33 +++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js b/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js index e6cc1a3221..218b67938a 100644 --- a/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js +++ b/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/graph.js @@ -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") } ] }; @@ -221,7 +228,11 @@ function drawChart (info) { drawLegend(info.config, info.dataSet); for (let item of info.dataSet) { - drawData(info.config, item.data, item.color); + if (item.lines === true) { + drawLines(info.config, item.data, item.color); + } else { + drawData(info.config, item.data, item.color); + } } } @@ -229,6 +240,26 @@ 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; -- cgit v1.2.3