5 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
6 <script src=
"https://assets.immae.eu/jquery/3.5.1/jquery.min.js" integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin=
"anonymous"></script>
7 <script src=
"https://assets.immae.eu/chart.js/2.9.3/Chart.bundle.min.js" integrity=
"sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin=
"anonymous"></script>
8 <script src=
"https://assets.immae.eu/hammerjs/2.0.8/hammer.min.js" integrity=
"sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin=
"anonymous"></script>
9 <script src=
"https://assets.immae.eu/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.min.js" integrity=
"sha256-6S7w9Wue7EBvlJh/Li/cPecjTNN+yBm/AoCePQA9Xi8=" crossorigin=
"anonymous"></script>
16 font:
20px Helvetica, sans-serif;
30 border-top:
1px solid lightgrey;
37 text-decoration: none;
43 background-color: lightgreen;
44 background-opacity:
40%;
56 <h1>Site web en pause
!
</h1>
58 <img class=
"banner" src=
"/lamaison.png" />
59 <p>Le site est actuellement en pause.
</p>
61 <h1>Données historiques
</h1>
62 <div class=
"button-row">
63 <button class=
"chart-choice" data-type=
"kW" id=
"mean_consumption">Consommation moyenne
</button>
64 <button class=
"chart-choice" data-type=
"kWh" id=
"total_consumption">Consommation totale
</button>
65 <button class=
"chart-choice" data-type=
"%" id=
"hygrometrie">Hygrométrie
</button>
66 <button class=
"chart-choice" data-type=
"°C" id=
"temperature">Température
</button>
68 <canvas id=
"chart" width=
"400" height=
"400"></canvas>
71 $(".chart-choice").click(function() {
72 drawData($(this).data("type"));
73 $(".chart-choice").removeClass("selected");
74 $(this).addClass("selected");
79 "#DDDF0D", "#
7798BF", "#
55BF3B", "#DF5353", "#aaeeee",
80 "#ff0066", "#eeaaee", "#
55BF3B", "#DF5353", "#
7798BF", "#aaeeee"
87 success: function(data) {
89 $(".chart-choice")[
3].click();
93 var getData = function(key, colorIndex) {
96 borderColor: colors[colorIndex],
99 label: d.name + " (" + d.unit + ")",
100 data: d.data.map(function(value) {
102 "x": new Date(value.x),
103 "y": Math.max(
0,value.y),
109 var getDataByType = function(type) {
111 return Object.keys(allData)
112 .filter(function (key) { return allData[key].unit === type; })
113 .map(function (key) { return getData(key, colorIndex++); });
116 var drawData = function (type) {
117 $('#chart').replaceWith('
<canvas id=
"chart" width=
"400" height=
"400"></canvas>');
118 var ctx = document.getElementById('chart').getContext('
2d');
119 myChart = new Chart(ctx, {
128 'millisecond': 'YYYY-MM',
135 'quarter': 'YYYY-MM',
144 callback: function(value, index, values) { return value + " " + type; }
151 pan: { enabled: true, mode: "x" },
152 zoom: { enabled: true, mode: "x" },
157 datasets: getDataByType(type),