rattail/tailbone
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Add more time range options for viewing tempmon probe readings as graph

Browse source
This commit is contained in:
Lance Edgar 2018-10-25 15:57:25 -05:00
parent 92c1b165fb
commit f086a2aa38
2 changed files with 105 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

73
tailbone/templates/tempmon/probes/graph.mako
View file

@ -8,29 +8,64 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<script type="text/javascript">
var ctx = null;
var chart = null;
function fetchReadings(timeRange) {
if (timeRange === undefined) {
timeRange = $('#time-range').val();
}
var timeUnit;
if (timeRange == 'last hour') {
timeUnit = 'minute';
} else if (['last 6 hours', 'last day'].includes(timeRange)) {
timeUnit = 'hour';
} else {
timeUnit = 'day';
}
if (chart) {
$('.form-wrapper').mask("Fetching data");
chart.destroy();
}
$.get('${url('{}.graph_readings'.format(route_prefix), uuid=probe.uuid)}', {'time-range': timeRange}, function(data) {
chart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: "${probe.description}",
data: data
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {unit: timeUnit},
position: 'bottom'
}]
}
}
});
$('.form-wrapper').unmask();
});
}
$(function() {
var ctx = $('#tempchart');
ctx = $('#tempchart');
var chart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: "${probe.description}",
data: ${json.dumps(readings_data)|n}
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {unit: 'minute'},
position: 'bottom'
}]
}
$('#time-range').selectmenu({
change: function(event, ui) {
fetchReadings(ui.item.value);
}
});
fetchReadings();
});
</script>
@ -55,9 +90,7 @@
<div class="field-wrapper">
<label>Showing</label>
<div class="field">
<select name="showing-window" id="showing-window" auto-enhance="true">
<option value="last-hour">Last Hour</option>
</select>
${time_range}
</div>
</div>