114 lines
3.0 KiB
HTML
114 lines
3.0 KiB
HTML
|
{% extends 'data/base.html' %}
|
||
|
|
{% block title %}Dashboard{% endblock %}
|
||
|
|
{% block body %}
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
Highcharts.setOptions({
|
||
|
|
time: {
|
||
|
|
timezone: 'Europe/Paris'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const chart = Highcharts.chart('container', {
|
||
|
|
chart: {
|
||
|
|
type: 'spline',
|
||
|
|
zoomType: 'x',
|
||
|
|
panning: true,
|
||
|
|
panKey: 'shift'
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: 'Brightness by time'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
title: {
|
||
|
|
text: 'Time'
|
||
|
|
},
|
||
|
|
type: 'datetime',
|
||
|
|
dateTimeLabelFormats: {
|
||
|
|
second: '%H:%M:%S',
|
||
|
|
minute: '%H:%M',
|
||
|
|
hour: '%H:%M',
|
||
|
|
day: '%e. %b',
|
||
|
|
month: '%Y %m',
|
||
|
|
year: '%Y',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
title: {
|
||
|
|
text: 'Brightness'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{% for d in data %}
|
||
|
|
{
|
||
|
|
name: '{{ d[0].device_id }}',
|
||
|
|
data: [
|
||
|
|
{% for item in d %}
|
||
|
|
[Date.parse('{{ item.created }} GMT +0000'), {{ item.data }}],
|
||
|
|
{% endfor %}
|
||
|
|
]},
|
||
|
|
{% endfor %}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
const chart1 = Highcharts.chart('container1', {
|
||
|
|
chart: {
|
||
|
|
zoomType: 'x',
|
||
|
|
panning: true,
|
||
|
|
panKey: 'shift'
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
text: 'Button by time'
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
title: {
|
||
|
|
text: 'Time'
|
||
|
|
},
|
||
|
|
type: 'datetime',
|
||
|
|
dateTimeLabelFormats: {
|
||
|
|
second: '%H:%M:%S',
|
||
|
|
minute: '%H:%M',
|
||
|
|
hour: '%H:%M',
|
||
|
|
day: '%e. %b',
|
||
|
|
month: '%Y %m',
|
||
|
|
year: '%Y',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
min: 0,
|
||
|
|
max: 1,
|
||
|
|
title: {
|
||
|
|
text: 'Button'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{% for d in data %}
|
||
|
|
{
|
||
|
|
name: '{{ d[0].device_id }}',
|
||
|
|
type: 'column',
|
||
|
|
data: [
|
||
|
|
{% for item in d %}
|
||
|
|
{% if item.sensor_type == "button" %}
|
||
|
|
[Date.parse('{{ item.created }} GMT +0000'), {{ item.data }}],
|
||
|
|
{% endif %}
|
||
|
|
{% endfor %}
|
||
|
|
]},
|
||
|
|
{% endfor %}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
let d = new Date();
|
||
|
|
chart.xAxis[0].setExtremes(
|
||
|
|
Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 1),
|
||
|
|
Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()));
|
||
|
|
chart.showResetZoom();
|
||
|
|
chart1.xAxis[0].setExtremes(
|
||
|
|
Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 1),
|
||
|
|
Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()));
|
||
|
|
chart1.showResetZoom();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<div id="container" style="width:50%; height:400px;"></div>
|
||
|
|
<div id="container1" style="width:50%; height:400px;"></div>
|
||
|
|
{% for id, value in button_count.items() %}
|
||
|
|
<h3>Button {{ id }} was pressed: {{ value }} times.</h3>
|
||
|
|
{% endfor %}
|
||
|
|
{% endblock %}
|