<!doctype html>
<html>
<head>
<title>Pause</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7"></script>
<style>
body {
padding-left: 5px;
padding-right: 5px;
text-align: center;
margin: auto;
font: 20px Helvetica, sans-serif;
color: #333;
}
h1 {
margin: 0px;
font-size: 40px;
}
article {
display: block;
max-width: 850px;
margin: 0 auto;
padding-top: 30px;
}
article + article {
border-top: 1px solid lightgrey;
}
article div {
text-align: center;
}
a {
color: #dc8100;
text-decoration: none;
}
a:hover {
color: #333;
}
button.selected {
background-color: lightgreen;
background-opacity: 40%;
}
img.banner {
max-width: 100%;
}
.button-row {
padding: 10px;
}
</style>
</head>
<body>
<article>
<h1>Site web en pause !</h1>
<div>
<img class="banner" src="/lamaison.png" />
<p>Le site est actuellement en pause.</p>
</div>
<h1>Données historiques</h1>
<div class="button-row">
<button class="chart-choice" data-type="kW" id="mean_consumption">Consommation moyenne</button>
<button class="chart-choice" data-type="kWh" id="total_consumption">Consommation totale</button>
<button class="chart-choice" data-type="%" id="hygrometrie">Hygrométrie</button>
<button class="chart-choice" data-type="°C" id="temperature">Température</button>
</div>
<canvas id="chart" width="400" height="400"></canvas>
</article>
<script>
$(".chart-choice").click(function() {
drawData($(this).data("type"));
$(".chart-choice").removeClass("selected");
$(this).addClass("selected");
});
var allData = {};
var myChart;
var colors = [
"#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee",
"#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"
];
$.ajax({
type: "GET",
url: "/data.json",
dataType: "json",
success: function(data) {
allData = data;
$(".chart-choice")[3].click();
},
});
var getData = function(key, colorIndex) {
var d = allData[key];
return {
borderColor: colors[colorIndex],
hidden: d.hide,
fill: false,
label: d.name + " (" + d.unit + ")",
data: d.data.map(function(value) {
return {
"x": new Date(value.x),
"y": Math.max(0,value.y),
};
}),
};
};
var getDataByType = function(type) {
var colorIndex = 0;
return Object.keys(allData)
.filter(function (key) { return allData[key].unit === type; })
.map(function (key) { return getData(key, colorIndex++); });
};
var drawData = function (type) {
$('#chart').replaceWith('<canvas id="chart" width="400" height="400"></canvas>');
var ctx = document.getElementById('chart').getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
options: {
scales: {
xAxes: [
{
type: "time",
time: {
displayFormats: {
'millisecond': 'YYYY-MM',
'second': 'YYYY-MM',
'minute': 'YYYY-MM',
'hour': 'YYYY-MM',
'day': 'YYYY-MM',
'week': 'YYYY-MM',
'month': 'YYYY-MM',
'quarter': 'YYYY-MM',
'year': 'YYYY-MM',
}
}
}
],
yAxes: [
{
ticks: {
callback: function(value, index, values) { return value + " " + type; }
}
}
],
},
plugins: {
zoom: {
pan: { enabled: true, mode: "x" },
zoom: { enabled: true, mode: "x" },
}
},
},
data: {
datasets: getDataByType(type),
}
});
}
</script>
</body>
</html>