--- /dev/null
+<!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>
+
projects / perso / Immae / Config / Nix.git / blobdiff