+++ /dev/null
-<!doctype html>
-<html>
- <head>
- <title>Pause</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src="https://assets.immae.eu/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
- <script src="https://assets.immae.eu/chart.js/2.9.3/Chart.bundle.min.js" integrity="sha256-TQq84xX6vkwR0Qs1qH5ADkP+MvH0W+9E7TdHJsoIQiM=" crossorigin="anonymous"></script>
- <script src="https://assets.immae.eu/hammerjs/2.0.8/hammer.min.js" integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script>
- <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>
- <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