diogo/spark-art-dashboard
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add webserver for log file

Browse Source 
Improved charts
This commit is contained in:
Diogo Cordeiro 2018-09-22 18:22:25 +01:00
parent b3afbc3785
commit 5930a29cdf
4 changed files with 69 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
chart.js
View File

@ -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);
}

153
equation-plotter.js
View File

@ -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);
};

14
index.html
View File

@ -17,6 +17,11 @@
#chart-container > canvas {
height: 400px;
}
#ingestion-rate-box {
position: fixed;
top: 1em;
right: 25em;
}
</style>
</head>
<body>
@ -38,11 +43,16 @@
<canvas id="chart-Delay (ms)"></canvas>
<canvas id="chart-execTime (ms)"></canvas>
</div>
<div id="ingestion-rate-box">
<label for="ingestion-rate-controller">Ingestion Rate</label>
<input id="ingestion-rate" type="number">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="equation-plotter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<script src="chart.js"></script>
<script src="ingestion-rate.js"></script>
<footer id="footer">
<p><a href="https://www.diogo.site/projects/excalibur_template/">ART Dashboard</a> and <a href="https://github.com/diogogithub/excalibur_template/">Excalibur template</a> by <a href="https://www.diogo.site/">Diogo Cordeiro</a> - <a href="https://www.inesc-id.pt/">INESC-ID</a>
<p><a href="https://github.com/diogogithub/spark-art-dashboard">ART Dashboard</a> and <a href="https://github.com/diogogithub/excalibur_template/">Excalibur template</a> by <a href="https://www.diogo.site/">Diogo Cordeiro</a> - <a href="https://www.inesc-id.pt/">INESC-ID</a>
</footer>
</body>
</html>

5
log-provider.sh Executable file
View File

@ -0,0 +1,5 @@
#/bin/bash
while true
do
{ echo -ne "HTTP/1.0 200 OK\r\nContent-Length: $(wc -c <top.csv)\r\nAccess-Control-Allow-Origin: *\r\n\r"; cat top.csv; } | nc -v -l -p 4870
done