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 <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 ba0d590c18d5192139530e8dc61934d4b0a9b611..e6cc1a3221f5fba06c20837e2d8cac438c36e36c 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
@@ -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) {