]>
Commit | Line | Data |
---|---|---|
8b2f048b IB |
1 | <!doctype html> |
2 | <html> | |
3 | <head> | |
4 | <title>Pause</title> | |
5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
4c42e0be IB |
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> | |
8b2f048b IB |
10 | <style> |
11 | body { | |
12 | padding-left: 5px; | |
13 | padding-right: 5px; | |
14 | text-align: center; | |
15 | margin: auto; | |
16 | font: 20px Helvetica, sans-serif; | |
17 | color: #333; | |
18 | } | |
19 | h1 { | |
20 | margin: 0px; | |
21 | font-size: 40px; | |
22 | } | |
23 | article { | |
24 | display: block; | |
25 | max-width: 850px; | |
26 | margin: 0 auto; | |
27 | padding-top: 30px; | |
28 | } | |
29 | article + article { | |
30 | border-top: 1px solid lightgrey; | |
31 | } | |
32 | article div { | |
33 | text-align: center; | |
34 | } | |
35 | a { | |
36 | color: #dc8100; | |
37 | text-decoration: none; | |
38 | } | |
39 | a:hover { | |
40 | color: #333; | |
41 | } | |
42 | button.selected { | |
43 | background-color: lightgreen; | |
44 | background-opacity: 40%; | |
45 | } | |
46 | img.banner { | |
47 | max-width: 100%; | |
48 | } | |
49 | .button-row { | |
50 | padding: 10px; | |
51 | } | |
52 | </style> | |
53 | </head> | |
54 | <body> | |
55 | <article> | |
56 | <h1>Site web en pause !</h1> | |
57 | <div> | |
58 | <img class="banner" src="/lamaison.png" /> | |
59 | <p>Le site est actuellement en pause.</p> | |
60 | </div> | |
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> | |
67 | </div> | |
68 | <canvas id="chart" width="400" height="400"></canvas> | |
69 | </article> | |
70 | <script> | |
71 | $(".chart-choice").click(function() { | |
72 | drawData($(this).data("type")); | |
73 | $(".chart-choice").removeClass("selected"); | |
74 | $(this).addClass("selected"); | |
75 | }); | |
76 | var allData = {}; | |
77 | var myChart; | |
78 | var colors = [ | |
79 | "#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", | |
80 | "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee" | |
81 | ]; | |
82 | ||
83 | $.ajax({ | |
84 | type: "GET", | |
85 | url: "/data.json", | |
86 | dataType: "json", | |
87 | success: function(data) { | |
88 | allData = data; | |
89 | $(".chart-choice")[3].click(); | |
90 | }, | |
91 | }); | |
92 | ||
93 | var getData = function(key, colorIndex) { | |
94 | var d = allData[key]; | |
95 | return { | |
96 | borderColor: colors[colorIndex], | |
97 | hidden: d.hide, | |
98 | fill: false, | |
99 | label: d.name + " (" + d.unit + ")", | |
100 | data: d.data.map(function(value) { | |
101 | return { | |
102 | "x": new Date(value.x), | |
103 | "y": Math.max(0,value.y), | |
104 | }; | |
105 | }), | |
106 | }; | |
107 | }; | |
108 | ||
109 | var getDataByType = function(type) { | |
110 | var colorIndex = 0; | |
111 | return Object.keys(allData) | |
112 | .filter(function (key) { return allData[key].unit === type; }) | |
113 | .map(function (key) { return getData(key, colorIndex++); }); | |
114 | }; | |
115 | ||
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, { | |
120 | type: 'line', | |
121 | options: { | |
122 | scales: { | |
123 | xAxes: [ | |
124 | { | |
125 | type: "time", | |
126 | time: { | |
127 | displayFormats: { | |
128 | 'millisecond': 'YYYY-MM', | |
129 | 'second': 'YYYY-MM', | |
130 | 'minute': 'YYYY-MM', | |
131 | 'hour': 'YYYY-MM', | |
132 | 'day': 'YYYY-MM', | |
133 | 'week': 'YYYY-MM', | |
134 | 'month': 'YYYY-MM', | |
135 | 'quarter': 'YYYY-MM', | |
136 | 'year': 'YYYY-MM', | |
137 | } | |
138 | } | |
139 | } | |
140 | ], | |
141 | yAxes: [ | |
142 | { | |
143 | ticks: { | |
144 | callback: function(value, index, values) { return value + " " + type; } | |
145 | } | |
146 | } | |
147 | ], | |
148 | }, | |
149 | plugins: { | |
150 | zoom: { | |
151 | pan: { enabled: true, mode: "x" }, | |
152 | zoom: { enabled: true, mode: "x" }, | |
153 | } | |
154 | }, | |
155 | }, | |
156 | data: { | |
157 | datasets: getDataByType(type), | |
158 | } | |
159 | }); | |
160 | } | |
161 | </script> | |
162 | </body> | |
163 | </html> | |
164 |