2019-09-26 12:47:55 +02:00
|
|
|
<script type="text/javascript" src="src/templates/default/static/plugin/momentjs/moment.js"></script>
|
|
|
|
<script type="text/javascript" src="src/templates/default/static/plugin/chartjs/chart-2.7.3.min.js"></script>
|
2020-05-25 18:12:43 +02:00
|
|
|
<script type="text/javascript" src="src/templates/default/static/plugin/hammer/hammer.min.js"></script>
|
|
|
|
<script type="text/javascript" src="src/templates/default/static/plugin/chartjs/plugin-zoom.min.js"></script>
|
2014-08-01 16:40:20 +02:00
|
|
|
{% for graph in graphs %}
|
2019-02-08 15:43:22 +01:00
|
|
|
<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">
|
2019-03-30 22:22:15 +01:00
|
|
|
<noscript><div hidden></noscript>
|
2019-02-08 15:43:22 +01:00
|
|
|
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
2019-03-30 22:22:15 +01:00
|
|
|
{% 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>
|
2019-05-19 00:58:48 +02:00
|
|
|
<noscript></div></noscript><div class="w-100"></div>
|
|
|
|
<br>
|
|
|
|
{% if graph.id == 'history_short' %}
|
|
|
|
<div id="meter" data-value="{{ graph.uptime|round(3) }}" translation="{{ graph.info.1.label|lower }}">
|
|
|
|
<span id="needle" style="transform: rotate({{ ((graph.uptime|round/100)*180)|round }}deg);"></span>
|
|
|
|
</div><br>
|
|
|
|
{% endif %}
|
2020-05-18 19:58:33 +02:00
|
|
|
{{ graph.info.0.label }}: {{ graph.info.0.value * 1000 }} ms
|
2014-03-24 02:29:22 +01:00
|
|
|
</div>
|
2019-05-19 00:58:48 +02:00
|
|
|
|
2019-02-08 15:43:22 +01:00
|
|
|
{% 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',
|
|
|
|
}
|
|
|
|
}]
|
2020-05-25 18:12:43 +02:00
|
|
|
},
|
|
|
|
plugins: {
|
|
|
|
zoom: {
|
|
|
|
pan: {
|
|
|
|
enabled: true,
|
|
|
|
mode: 'x',
|
|
|
|
rangeMax: {
|
|
|
|
x: new Date,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
zoom: {
|
|
|
|
enabled: true,
|
|
|
|
mode: 'x',
|
|
|
|
rangeMax: {
|
|
|
|
x: new Date,
|
|
|
|
},
|
|
|
|
speed: 0.05,
|
|
|
|
}
|
|
|
|
}
|
2019-02-08 15:43:22 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</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',
|
|
|
|
}
|
|
|
|
}]
|
2020-05-25 18:12:43 +02:00
|
|
|
},
|
|
|
|
plugins: {
|
|
|
|
zoom: {
|
|
|
|
pan: {
|
|
|
|
enabled: true,
|
|
|
|
mode: 'x',
|
|
|
|
rangeMax: {
|
|
|
|
x: new Date,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
zoom: {
|
|
|
|
enabled: true,
|
|
|
|
mode: 'x',
|
|
|
|
rangeMax: {
|
|
|
|
x: new Date,
|
|
|
|
},
|
|
|
|
speed: 0.05,
|
|
|
|
}
|
|
|
|
}
|
2019-02-08 15:43:22 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
{% else %}
|
|
|
|
<script>
|
|
|
|
alert('Graph is missing the \'javascript part\'.');
|
|
|
|
</script>
|
|
|
|
{% endif %}
|
2014-08-01 16:40:20 +02:00
|
|
|
{% endfor %}
|
2019-02-08 15:43:22 +01:00
|
|
|
<script>
|
|
|
|
document.onreadystatechange = function () {
|
|
|
|
if (document.readyState === 'interactive') {
|
2019-09-26 12:47:55 +02:00
|
|
|
$.getScript("src/templates/default/static/js/history.js");
|
2019-02-08 15:43:22 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|