142 lines
3.3 KiB
HTML
142 lines
3.3 KiB
HTML
<script type="text/javascript" src="static/plugin/momentjs/moment.js"></script>
|
|
<script type="text/javascript" src="static/plugin/chartjs/chart-2.7.3.min.js"></script>
|
|
{% for graph in graphs %}
|
|
<div class="chart-container col-10" style="position: relative; width:60vw">
|
|
<canvas id="{{ graph.id }}">Your browser does not support the canvas element.</canvas>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
|
{% for button in graph.buttons %}
|
|
<label class="btn btn-secondary {{ button.class_active }}">
|
|
<input type="radio" name="{{ graph.button_name }}" value="{{ button.time }}" id="{{ button.unit }}" autocomplete="off" {% if button.class_active %} checked {% endif %}> {{ button.label }}
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% if graph.id == 'history_short' %}
|
|
<script>
|
|
var historyShort = new Chart(document.getElementById("{{ graph.id }}").getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
data: [{{ graph.lines.offline.value }}],
|
|
label: '{{ graph.lines.offline.name }}',
|
|
backgroundColor: '#dc3545',
|
|
borderColor: '#dc3545',
|
|
borderWidth: 2,
|
|
radius: 0,
|
|
pointStyle: 'crossRot',
|
|
fill: true,
|
|
spanGaps: false,
|
|
},
|
|
{
|
|
data: [{{ graph.lines.online.value }}],
|
|
label: '{{graph.lines.online.name }}',
|
|
fill: false,
|
|
spanGaps: false,
|
|
backgroundColor: '#28a745',
|
|
borderColor: '#28a745',
|
|
lineTension: 0,
|
|
steppedLine: true
|
|
},
|
|
]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
min: 0.0
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
type: 'time',
|
|
time: {
|
|
unit: '{{ graph.unit }}',
|
|
minUnit: 'hour',
|
|
min: {{ graph.start_timestamp }},
|
|
max: {{ graph.end_timestamp }},
|
|
},
|
|
distribution: 'linear',
|
|
ticks: {
|
|
source: 'auto',
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% elseif graph.id == 'history_long' %}
|
|
<script>
|
|
var colors = {
|
|
/*
|
|
ChartJS example colors
|
|
red: 'rgb(255, 99, 132)',
|
|
orange: 'rgb(255, 159, 64)',
|
|
yellow: 'rgb(255, 205, 86)',
|
|
green: 'rgb(75, 192, 192)',
|
|
blue: 'rgb(54, 162, 235)',
|
|
purple: 'rgb(153, 102, 255)',
|
|
grey: 'rgb(201, 203, 207)'
|
|
*/
|
|
latency_min: 'rgb(255, 99, 132)',
|
|
latency_avg: 'rgb(54, 162, 235)',
|
|
latency_max: 'rgb(255, 205, 86)'
|
|
}
|
|
var historyLong = new Chart(document.getElementById("{{ graph.id }}").getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{% for key,line in graph.lines %}
|
|
{
|
|
data: [{{ line.value|raw }}],
|
|
label: '{{ line.name }}',
|
|
backgroundColor: colors['{{key}}'],
|
|
borderColor: colors['{{key}}'],
|
|
},
|
|
{% endfor %}
|
|
]
|
|
},
|
|
options: {
|
|
animation: {
|
|
easing: 'easeInOutExpo',
|
|
},
|
|
tooltips: {
|
|
mode: 'index'
|
|
},
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
min: 0.0
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
type: 'time',
|
|
time: {
|
|
unit: '{{ graph.unit }}',
|
|
minUnit: 'day',
|
|
min: {{ graph.start_timestamp }},
|
|
max: {{ graph.end_timestamp }},
|
|
},
|
|
distribution: 'linear',
|
|
ticks: {
|
|
source: 'auto',
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% else %}
|
|
<script>
|
|
alert('Graph is missing the \'javascript part\'.');
|
|
</script>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<script>
|
|
document.onreadystatechange = function () {
|
|
if (document.readyState === 'interactive') {
|
|
$.getScript("static/js/history.js");
|
|
}
|
|
}
|
|
</script> |