github/kubeinvaders
1
0
Fork 0
mirror of https://github.com/lucky-sideburn/kubeinvaders.git synced 2026-08-23 21:46:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

added echarts

Browse Source
This commit is contained in:
luckysideburn
2024-02-28 21:33:25 +00:00
parent cb2cc2639d
commit df407c6409
4 changed files with 141 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html5/chaos_report.js
+89 -55
View File
@@ -162,6 +162,9 @@ function updateElapsedTimeArray(projectName) {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
console.log("[SAVE-CHAOS-REPORT-CONF] Elapsed time array received from Redis: " + parseFloat(this.responseText));
chaos_report_http_elapsed_time_array.push(parseFloat(this.responseText));
while (chaos_report_http_elapsed_time_array.length > 40) {
chaos_report_http_elapsed_time_array.shift();
}
}
};;
@@ -190,66 +193,97 @@ function updateChaosReportStartTime(projectName) {
function drawCanvasHTTPStatusCodeStats() {
while (chaos_report_http_elapsed_time_array.length > 40) {
chaos_report_http_elapsed_time_array.shift();
}
var elapsedTimeArray = chaos_report_http_elapsed_time_array;
var canvas = document.getElementById('httpStatsCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
// Imposta la dimensione dei rettangoli e il numero di colonne e righe
var rectSize = 20;
var rows = canvas.height / rectSize;
var columns = canvas.width / rectSize;
// Disegna la griglia di rettangoli
for (var i = 0; i < rows; i++) {
for (var j = 0; j < columns; j++) {
// Calcola le coordinate del rettangolo
var x = j * rectSize;
var y = i * rectSize;
context.strokeStyle = 'black';
context.fillStyle = 'white';
// Disegna il rettangolo
context.fillRect(x, y, rectSize, rectSize);
// Aggiungi bordi per una migliore visualizzazione
//context.strokeRect(x, y, rectSize, rectSize);
console.log("[SAVE-CHAOS-REPORT-CONF] Updating chart");
myChart.setOption({
xAxis: {},
yAxis: {
data: chaos_report_http_elapsed_time_array,
},
series: [
{
data: chaos_report_http_elapsed_time_array,
type: 'line',
smooth: true
}
}
]
});
for (var i = 0; i < elapsedTimeArray.length; i++) {
var x = i * rectSize;
var y = 80;
// while (chaos_report_http_elapsed_time_array.length > 40) {
// chaos_report_http_elapsed_time_array.shift();
// }
var width = rectSize;
var height = rectSize;
// var elapsedTimeArray = chaos_report_http_elapsed_time_array;
// var canvas = document.getElementById('httpStatsCanvas');
// var context = canvas.getContext('2d');
// context.clearRect(0, 0, canvas.width, canvas.height);
if (elapsedTimeArray[i] > 3) {
context.strokeStyle = 'black';
context.fillStyle = 'red';
} else if (elapsedTimeArray[i] > 2) {
context.strokeStyle = 'black';
context.fillStyle = 'orange';
} else {
context.strokeStyle = 'black';
context.fillStyle = "green";
}
// // Imposta la dimensione dei rettangoli e il numero di colonne e righe
// var rectSize = 20;
// var rows = canvas.height / rectSize;
// var columns = canvas.width / rectSize;
if (i == elapsedTimeArray.length - 1) {
var text = String(elapsedTimeArray[i]);
context.fillStyle = 'black';
context.font = '20px Courier New';
context.fillText(text, x + width / 2 - context.measureText(text).width / 2, y - (height / 2));
}
// // Disegna la griglia di rettangoli
// for (var i = 0; i < rows; i++) {
// for (var j = 0; j < columns; j++) {
// // Calcola le coordinate del rettangolo
// var x = j * rectSize;
// var y = i * rectSize;
// context.strokeStyle = 'black';
// context.fillStyle = 'white';
// // Disegna il rettangolo
// context.fillRect(x, y, rectSize, rectSize);
// // Aggiungi bordi per una migliore visualizzazione
// //context.strokeRect(x, y, rectSize, rectSize);
// }
// }
// for (var i = 0; i < elapsedTimeArray.length; i++) {
// var x = i * rectSize;
// var y = 80;
// var width = rectSize;
// var height = rectSize;
// if (elapsedTimeArray[i] > 3) {
// context.strokeStyle = 'black';
// context.fillStyle = 'red';
// } else if (elapsedTimeArray[i] > 2) {
// context.strokeStyle = 'black';
// context.fillStyle = 'orange';
// } else {
// context.strokeStyle = 'black';
// context.fillStyle = "green";
// }
// if (i == elapsedTimeArray.length - 1) {
// var text = String(elapsedTimeArray[i]);
// context.fillStyle = 'black';
// context.font = '20px Courier New';
// context.fillText(text, x + width / 2 - context.measureText(text).width / 2, y - (height / 2));
// }
context.fillRect(x, y, width, height);
// context.fillRect(x, y, width, height);
//context.strokeRect(x, y, 20, 20);
}
// //context.strokeRect(x, y, 20, 20);
// }
}
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
data: chaos_report_http_elapsed_time_array,
},
yAxis: {},
series: [
{
data: chaos_report_http_elapsed_time_array,
type: 'line',
smooth: true
}
]
};
myChart.setOption(option);
html5/echarts/echarts.min.js
Vendored
+45
View File
File diff suppressed because one or more lines are too long
html5/index.html
+7 -6
View File
@@ -383,8 +383,9 @@ experiments:
<p id="chaosReportDateDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
<p id="chaosReportSessionTimeDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
<p id="chaosReportCheckSiteURLDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
<label for="httpStatsCanvas" style="font-family: 'Courier New', Courier, monospace; font-size: large;">HTTP Elapsed</label>
<canvas id="httpStatsCanvas" width="720" height="100" class="http-stats-code-canvas"></canvas>
<!-- <label for="httpStatsCanvas" style="font-family: 'Courier New', Courier, monospace; font-size: large;">HTTP Elapsed</label>
<canvas id="httpStatsCanvas" width="720" height="100" class="http-stats-code-canvas"></canvas> -->
<div id="main" style="width: 600px;height:400px;"></div>
</div>
<!-- START GAME MODE SCREEN -->
<div id="game-screen" style="display: none;">
@@ -421,16 +422,16 @@ experiments:
</div>
</div>
</div>
<script src="./programming_mode.js"></script>
<script src="./utils.js"></script>
<script src="./modals.js"></script>
<script src="./programming_mode.js"></script>
<script src="./mode_controls.js"></script>
<script src="./game_console.js"></script>
<script src="./chaos_report.js"></script>
<script src="./kubeinvaders.js"></script>
<script src="./bootstrap-5.0.0-dist/js/bootstrap.min.js"></script>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./kubeinvaders.js"></script>
<script src="./echarts/echarts.min.js"></script>
<script src="./chaos_report.js"></script>
</body>
</html>
nginx/KubeInvaders.conf
-4
View File
@@ -12,10 +12,6 @@ server {
return os.getenv("INSECURE_ENDPOINT")
}
location /chartjs {
autoindex on;
}
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';