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 <jan@3e8.eu>

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 e6cc1a3221f5fba06c20837e2d8cac438c36e36c..218b67938a641d443d0ff74f92e55b371b07624d 100644 (file)
--- 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;