2018-09-11 23:05:37 +01:00
<!DOCTYPE html>
2018-09-07 18:20:45 +01:00
< html >
2018-09-11 23:05:37 +01:00
< head >
< meta http-equiv = "content-type" content = "text/html; charset=UTF-8" >
< title > Spark ART Dashboard< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet" href = "https://www.diogo.site/projects/excalibur_template/assets/css/main.css" >
< style >
#chart-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
#chart-container > canvas {
height: 400px;
}
2018-10-03 03:48:27 +01:00
#ingestion-rate-box {
float: right;
height: 76px;
left: 0;
2018-10-03 22:04:44 +01:00
position: fixed;
2018-10-03 03:48:27 +01:00
top: 7em;
z-index: 50;
padding: 20px;
}
@media screen and (max-width: 1200px) {
position:static;
float:none;
}
2018-09-11 23:05:37 +01:00
< / style >
< / head >
2018-09-07 18:20:45 +01:00
< body >
2018-09-11 23:05:37 +01:00
< header id = "header" >
< nav id = "side-menu" >
< label for = "show-menu" id = "menu-button" > Menu< / label >
< input id = "show-menu" role = "button" type = "checkbox" >
< ul id = "menu" >
< li > < a href = "#" class = "current" > Stats< / a > < / li >
< / ul >
< / nav >
< h1 > ART Dashboard< / h1 >
2018-09-29 18:40:22 +01:00
< div id = "ingestion-rate-box" >
2018-10-03 03:48:27 +01:00
< p > Ingestion Rate< / p >
< label for = "ingestion-rate-min" > Minimum (Kbps)< / label >
< input id = "ingestion-rate-min" type = "number" >
< label for = "ingestion-rate-max" > Maximum (Kbps)< / label >
< input id = "ingestion-rate-max" type = "number" >
< label for = "ingestion-rate-per" > Period (ms)< / label >
< input id = "ingestion-rate-per" type = "number" > < br >
2018-09-29 18:40:22 +01:00
< input id = "ingestion-rate-update" type = "submit" value = "Update" >
< / div >
2018-09-11 23:05:37 +01:00
< / header >
2018-09-07 18:20:45 +01:00
< div id = "chart-container" >
< canvas id = "chart-ingestionRate" > < / canvas >
< canvas id = "chart-Accuracy (%)" > < / canvas >
< canvas id = "chart-cost" > < / canvas >
< canvas id = "chart-Window (ms)" > < / canvas >
< canvas id = "chart-Delay (ms)" > < / canvas >
< canvas id = "chart-execTime (ms)" > < / canvas >
< / div >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js" > < / script >
2018-09-22 18:22:25 +01:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js" > < / script >
2018-09-07 18:20:45 +01:00
< script src = "chart.js" > < / script >
2018-09-22 18:22:25 +01:00
< script src = "ingestion-rate.js" > < / script >
2018-09-11 23:05:37 +01:00
< footer id = "footer" >
2018-09-22 18:22:25 +01:00
< 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 >
2018-09-11 23:05:37 +01:00
< / footer >
2018-09-07 18:20:45 +01:00
< / body >
< / html >
