modules/private/websites/papa/maison_bbc_static/index.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Pause</title>
   5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6     <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
   7     <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>
   8     <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
   9     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.7"></script>
  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&nbsp;!</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