From 5930a29cdf4b7548cab9c7a7e0a59a1108f8b416 Mon Sep 17 00:00:00 2001 From: Diogo Cordeiro Date: Sat, 22 Sep 2018 18:22:25 +0100 Subject: [PATCH] Add webserver for log file Improved charts --- chart.js | 95 ++++++++++++++------------- equation-plotter.js | 153 -------------------------------------------- index.html | 14 +++- log-provider.sh | 5 ++ 4 files changed, 69 insertions(+), 198 deletions(-) delete mode 100644 equation-plotter.js create mode 100755 log-provider.sh diff --git a/chart.js b/chart.js index 39f486b..f1d6055 100644 --- a/chart.js +++ b/chart.js @@ -20,13 +20,13 @@ const chartColors = [ // This function loops for ever function loop(charts) { - fetch('top.csv') // Fetches data + fetch('http://localhost:4870') // Fetches data .then(response => response.text()) // Read it .then(data => data.split('\n').map(x => x.split(','))) // Divide in lines and lines in columns .then(data => { if (!charts) { paint(data); - } else { //We already have charts, lets update values + } else { // We already have charts, lets update values for (const chart of charts) { const index = chart.meta.index if (!chart) continue; @@ -37,7 +37,6 @@ function loop(charts) { return charts }) .then(charts => { - plot_lines() setTimeout(_ => loop(charts), 3000) // update every 3 seconds }) .catch(error => { @@ -118,49 +117,59 @@ function paint (data) { }, options.options.responsiveAnimationDuration = 0 + // Annotations + if (header == "execTime (ms)") { + options.options.annotation = { + annotations: [{ + type: 'line', + mode: 'horizontal', + scaleID: 'y-axis-0', + value: sla.maxExecTime, + borderColor: 'rgb(126, 0, 0)', + borderWidth: 4, + label: { + enabled: false, + content: 'Max Exec Time' + } + }] + } + } + if (header == "Accuracy (%)") { + options.options.annotation = { + annotations: [{ + type: 'line', + mode: 'horizontal', + scaleID: 'y-axis-0', + value: sla.minAccuracy, + borderColor: 'rgb(126, 0, 0)', + borderWidth: 4, + label: { + enabled: false, + content: 'Min Accuracy' + } + }] + } + } + if (header == "cost") { + options.options.annotation = { + annotations: [{ + type: 'line', + mode: 'horizontal', + scaleID: 'y-axis-0', + value: sla.maxCost, + borderColor: 'rgb(126, 0, 0)', + borderWidth: 4, + label: { + enabled: false, + content: 'Max Cost' + } + }] + } + } + const chart = new Chart(canvas.getContext('2d'), options) chart.meta = { // recursion metadata index } }) } - -// Plot lines over the charts -function plot_lines() { - if (sla == null) return; - var execTime_line = new Graph({ - canvasId: 'chart-execTime (ms)', - minX: -10, - minY: -10, - maxX: 10, - maxY: 10, - unitsPerTick: 1 - }); - execTime_line.drawEquation(function(x) { - return sla.maxExecTime; - }, 'green', 1); - - var accuracy_line = new Graph({ - canvasId: 'chart-Accuracy (%)', - minX: -10, - minY: -10, - maxX: 10, - maxY: 10, - unitsPerTick: 1 - }); - accuracy_line.drawEquation(function(x) { - return sla.minAccuracy; - }, 'green', 1); - - var cost_line = new Graph({ - canvasId: 'chart-cost', - minX: -10, - minY: -10, - maxX: 10, - maxY: 10, - unitsPerTick: 1 - }); - cost_line.drawEquation(function(x) { - return sla.maxCost; - }, 'green', 1); -} diff --git a/equation-plotter.js b/equation-plotter.js deleted file mode 100644 index 4a6b1bb..0000000 --- a/equation-plotter.js +++ /dev/null @@ -1,153 +0,0 @@ -// Source: https://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/ - -function Graph(config) { - // user defined properties - this.canvas = document.getElementById(config.canvasId); - this.minX = config.minX; - this.minY = config.minY; - this.maxX = config.maxX; - this.maxY = config.maxY; - this.unitsPerTick = config.unitsPerTick; - - // constants - this.axisColor = '#aaa'; - this.font = '8pt Calibri'; - this.tickSize = 20; - - // relationships - this.context = this.canvas.getContext('2d'); - this.rangeX = this.maxX - this.minX; - this.rangeY = this.maxY - this.minY; - this.unitX = this.canvas.width / this.rangeX; - this.unitY = this.canvas.height / this.rangeY; - this.centerY = Math.round(Math.abs(this.minY / this.rangeY) * this.canvas.height); - this.centerX = Math.round(Math.abs(this.minX / this.rangeX) * this.canvas.width); - this.iteration = (this.maxX - this.minX) / 1000; - this.scaleX = this.canvas.width / this.rangeX; - this.scaleY = this.canvas.height / this.rangeY; - - /*/ draw x and y axis - this.drawXAxis(); - this.drawYAxis();*/ -} - -Graph.prototype.drawXAxis = function() { - var context = this.context; - context.save(); - context.beginPath(); - context.moveTo(0, this.centerY); - context.lineTo(this.canvas.width, this.centerY); - context.strokeStyle = this.axisColor; - context.lineWidth = 2; - context.stroke(); - - // draw tick marks - var xPosIncrement = this.unitsPerTick * this.unitX; - var xPos, unit; - context.font = this.font; - context.textAlign = 'center'; - context.textBaseline = 'top'; - - // draw left tick marks - xPos = this.centerX - xPosIncrement; - unit = -1 * this.unitsPerTick; - while (xPos > 0) { - context.moveTo(xPos, this.centerY - this.tickSize / 2); - context.lineTo(xPos, this.centerY + this.tickSize / 2); - context.stroke(); - context.fillText(unit, xPos, this.centerY + this.tickSize / 2 + 3); - unit -= this.unitsPerTick; - xPos = Math.round(xPos - xPosIncrement); - } - - // draw right tick marks - xPos = this.centerX + xPosIncrement; - unit = this.unitsPerTick; - while (xPos < this.canvas.width) { - context.moveTo(xPos, this.centerY - this.tickSize / 2); - context.lineTo(xPos, this.centerY + this.tickSize / 2); - context.stroke(); - context.fillText(unit, xPos, this.centerY + this.tickSize / 2 + 3); - unit += this.unitsPerTick; - xPos = Math.round(xPos + xPosIncrement); - } - context.restore(); -}; - -Graph.prototype.drawYAxis = function() { - var context = this.context; - context.save(); - context.beginPath(); - context.moveTo(this.centerX, 0); - context.lineTo(this.centerX, this.canvas.height); - context.strokeStyle = this.axisColor; - context.lineWidth = 2; - context.stroke(); - - // draw tick marks - var yPosIncrement = this.unitsPerTick * this.unitY; - var yPos, unit; - context.font = this.font; - context.textAlign = 'right'; - context.textBaseline = 'middle'; - - // draw top tick marks - yPos = this.centerY - yPosIncrement; - unit = this.unitsPerTick; - while (yPos > 0) { - context.moveTo(this.centerX - this.tickSize / 2, yPos); - context.lineTo(this.centerX + this.tickSize / 2, yPos); - context.stroke(); - context.fillText(unit, this.centerX - this.tickSize / 2 - 3, yPos); - unit += this.unitsPerTick; - yPos = Math.round(yPos - yPosIncrement); - } - - // draw bottom tick marks - yPos = this.centerY + yPosIncrement; - unit = -1 * this.unitsPerTick; - while (yPos < this.canvas.height) { - context.moveTo(this.centerX - this.tickSize / 2, yPos); - context.lineTo(this.centerX + this.tickSize / 2, yPos); - context.stroke(); - context.fillText(unit, this.centerX - this.tickSize / 2 - 3, yPos); - unit -= this.unitsPerTick; - yPos = Math.round(yPos + yPosIncrement); - } - context.restore(); -}; - -Graph.prototype.drawEquation = function(equation, color, thickness) { - var context = this.context; - context.save(); - context.save(); - this.transformContext(); - - context.beginPath(); - context.moveTo(this.minX, equation(this.minX)); - - for (var x = this.minX + this.iteration; x <= this.maxX; x += this.iteration) { - context.lineTo(x, equation(x)); - } - - context.restore(); - context.lineJoin = 'round'; - context.lineWidth = thickness; - context.strokeStyle = color; - context.stroke(); - context.restore(); -}; - -Graph.prototype.transformContext = function() { - var context = this.context; - - // move context to center of canvas - this.context.translate(this.centerX, this.centerY); - - /* - * stretch grid to fit the canvas window, and - * invert the y scale so that that increments - * as you move upwards - */ - context.scale(this.scaleX, -this.scaleY); -}; diff --git a/index.html b/index.html index 0de6e78..9f59ab0 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,11 @@ #chart-container > canvas { height: 400px; } + #ingestion-rate-box { + position: fixed; + top: 1em; + right: 25em; + } @@ -38,11 +43,16 @@ +
+ + +
- + + diff --git a/log-provider.sh b/log-provider.sh new file mode 100755 index 0000000..468acb5 --- /dev/null +++ b/log-provider.sh @@ -0,0 +1,5 @@ +#/bin/bash +while true +do + { echo -ne "HTTP/1.0 200 OK\r\nContent-Length: $(wc -c