From e4f82d817a0fff74e47011692a1a47519f963360 Mon Sep 17 00:00:00 2001
From: KiboOst <KiboOst@users.noreply.github.com>
Date: Thu, 7 Jun 2018 12:31:32 +0200
Subject: [PATCH] Fichier html/js de visualisation

---
 LinkyLog.html | 700 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 700 insertions(+)
 create mode 100644 LinkyLog.html
diff --git a/LinkyLog.html b/LinkyLog.html
new file mode 100644
index 0000000..f573a95
--- /dev/null
+++ b/LinkyLog.html
@@ -0,0 +1,700 @@
+<!doctype html>
+<script>
+    var linkyLogPath = "cache/linkyLog.json"
+
+    var weekdays = ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] //translate them if needed
+    var yearmonths = [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aôut", "Septembre", "Octobre", "Novembre", "Decembre" ]
+</script>
+<head>
+    <meta charset="utf-8">
+    <meta name="robots" content="noindex">
+    <title>linky Overview</title>
+    <meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate">
+    <meta http-equiv="expires" content="0">
+    <meta http-equiv="pragma" content="no-cache">
+
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+    <style type="text/css">
+        * {
+            font-family: "Exo 2",verdana,arial,sans-serif;
+            font-size: 10pt !important;
+            line-height: 10pt;
+        }
+        section {
+            height: 45%;
+            width: 100%;
+        }
+        body {
+            max-width: 100%;
+        }
+        .center{
+            text-align: center;
+        }
+    </style>
+
+    <style>
+        .dropbtn {
+            background-color: #f9cd70;
+            color: #363636;
+            padding: 12px;
+            font-size: 16px;
+            border: none;
+            cursor: pointer;
+        }
+
+        .dropbtn:hover, .dropbtn:focus {
+            background-color: #eabd5e;
+        }
+
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 140px;
+            max-height: 90vh;
+            overflow: auto;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            z-index: 1;
+        }
+
+        .dropdown-content a {
+            color: black;
+            padding: 4px 16px;
+            text-decoration: none;
+            display: block;
+        }
+
+        .dropdown a:hover {background-color: #f1f1f1}
+
+        .show {display:block;}
+    </style>
+</head>
+<body>
+
+<section>
+    <div class="section">
+        <div id="updatetime" style="text-align:center">Update: </div>
+        <div class="dropdown">
+            <button onclick="goPrevDay()" class="dropbtn"> < </button>
+            <button onclick="openDaySelector()" class="dropbtn">Select day</button>
+            <button onclick="goNextDay()" class="dropbtn"> > </button>
+            <div id="daySelector" class="dropdown-content"></div>
+        </div>
+        <div id="graphLinkyHours"></div>
+
+    </div>
+</section>
+
+<section>
+    <div class="section">
+        <div class="dropdown">
+            <button onclick="goPrevMonth()" class="dropbtn"> < </button>
+            <button onclick="openMonthSelector()" class="dropbtn">Select month</button>
+            <button onclick="goNextMonth()" class="dropbtn"> > </button>
+            <div id="monthSelector" class="dropdown-content"></div>
+        </div>
+        <div id="graphLinkyDays"></div>
+    </div>
+</section>
+
+<section>
+    <div class="section">
+        <div id="graphLinkyMonths"></div>
+    </div>
+</section>
+
+<section>
+    <div class="section">
+        <div id="graphLinkyYears"></div>
+    </div>
+</section>
+
+
+<script>
+    function drawGraphHours(showDay=null) //parse data to plotly!
+    {
+        Plotly.purge(graphLinkyHours)
+        var xAxisValues = []
+        var values = []
+
+        if (showDay == null)
+        {
+            today = new Date()
+            yesterday = new Date(today)
+            yesterday.setDate(today.getDate() - 1)
+            day = yesterday.getDate()
+            day = ("0" + yesterday.getDate()).slice(-2)
+            month = today.getMonth()+1
+            month = ("0" + (yesterday.getMonth() + 1)).slice(-2)
+            year = yesterday.getFullYear()
+            activeDay = day+'/'+month+'/'+year
+
+            plotDatas = jsonDatas['hours'][activeDay]
+        }
+        else
+        {
+            activeDay = showDay
+            plotDatas = jsonDatas['hours'][activeDay]
+        }
+
+
+        for (hour in plotDatas)
+        {
+            xAxisValues.push(hour)
+            value = plotDatas[hour]
+            if (value == null) value = 0
+            else value = value.substring(0, value.length - 2)
+            values.push(value)
+        }
+
+        //set traces:
+        data = []
+        trace = {
+                x: xAxisValues,
+                y: values,
+                type: 'bar',
+                width: 0.8,
+                offset: -0.4,
+                opacity: 1,
+                marker: {
+                        color: 'rgb(60, 100, 210)',
+                        line: {
+                            color: 'rgb(60, 100, 210)',
+                            width: 1
+                            }
+                        },
+                connectgaps: true
+            };
+        data.push(trace)
+
+        //layouting:
+        title = 'Linky Hours'
+        parts = activeDay.split('/')
+        d = new Date(parts[2], parts[1]-1, parts[0])
+        fullDay = weekdays[d.getDay()]
+        title += ' | ' + fullDay + " " + activeDay
+
+        layout = {
+                title: title,
+                height: window.innerHeight/2-80,
+                width: window.innerWidth-10,
+
+                xaxis: {
+                        zeroline: true,
+                        showgrid: false,
+                        ticklen: 9,
+                        tickmode: 'linear',
+                        tick0: 0,
+                        dtick: 2
+                        },
+                yaxis: {
+                        ticklen: 7,
+                        ticksuffix: 'kW',
+                        tickmode: 'linear',
+                        tick0: 0,
+                        dtick: 1,
+                        range: [0, 7],
+                        showline: true
+                        },
+                showlegend: false,
+                margin: {
+                        l: 100,
+                        r: 30,
+                        b: 130,
+                        t: 30,
+                        pad: 0
+                      }
+        }
+        Plotly.newPlot(graphLinkyHours, data, layout);
+    };
+
+    function drawGraphDays(showMonth=null) //parse data to plotly!
+    {
+        Plotly.purge(graphLinkyDays)
+        var xAxisValues = []
+        var values = []
+
+        if (showMonth == null)
+        {
+            today = new Date()
+            month = today.getMonth()+1
+            thisMonth = ("0" + (today.getMonth() + 1)).slice(-2)
+            thisYear = today.getFullYear()
+            month = yearmonths[parseInt(month-1)]
+            activeMonth = month + ' ' + thisYear
+        }
+        else
+        {
+            activeMonth = showMonth
+            thisMonth = showMonth.split(' ')[0]
+            thisMonth = yearmonths.indexOf(thisMonth) + 1
+            if (thisMonth < 10) thisMonth = ("0" + thisMonth.toString().slice(-2))
+            thisYear = showMonth.split(' ')[1]
+        }
+
+        plotDatas = []
+        days = jsonDatas['days']
+        //get all days for this month:
+        for (day in days)
+        {
+            month = day.split('/')[1]
+            year = day.split('/')[2]
+            if (thisMonth == month && thisYear == year) plotDatas[day] = days[day]
+        }
+
+        for (day in plotDatas)
+        {
+            xAxisValues.push(day)
+            value = plotDatas[day]
+            if (value == null) value = 0
+            else value = value.substring(0, value.length - 3)
+            values.push(value)
+        }
+
+        //fill entire month:
+        len = xAxisValues.length
+        daysInMonth = new Date(thisYear, thisMonth, 0).getDate()
+        if (len < daysInMonth)
+        {
+            for (i = len+1; i < daysInMonth+1; i++)
+            {
+                d = i
+                if (i < 10) d = ("0" + d.toString().slice(-2))
+                x = d + '/' + thisMonth + '/' + thisYear
+                xAxisValues.push(x)
+                values.push(0)
+            }
+        }
+
+
+        //set traces:
+        data = []
+        trace = {
+                x: xAxisValues,
+                y: values,
+                type: 'bar',
+                width: 0.8,
+                offset: -0.4,
+                opacity: 1,
+                marker: {
+                        color: 'rgb(210, 210, 12)',
+                        line: {
+                            color: 'rgb(210, 210, 12)',
+                            width: 1
+                            }
+                        },
+                connectgaps: true
+            };
+        data.push(trace)
+
+        //layouting:
+        title = 'Linky Days'
+        title += ' | ' + activeMonth
+
+        layout = {
+                title: title,
+                height: window.innerHeight/2-80,
+                width: window.innerWidth-10,
+
+                xaxis: {
+                        zeroline: true,
+                        showgrid: false,
+                        ticklen: 9,
+                        tickmode: 'linear',
+                        tick0: 0,
+                        dtick: 7
+                        },
+                yaxis: {
+                        ticklen: 7,
+                        ticksuffix: 'kWh',
+                        tickmode: 'linear',
+                        tick0: 0,
+                        dtick: 20,
+                        range: [0, 100],
+                        showline: true
+                        },
+                showlegend: false,
+                margin: {
+                        l: 100,
+                        r: 30,
+                        b: 130,
+                        t: 30,
+                        pad: 0
+                      }
+        }
+        Plotly.newPlot(graphLinkyDays, data, layout);
+    };
+
+    function drawGraphMonths() //parse data to plotly!
+    {
+        Plotly.purge(graphLinkyMonths)
+        var xAxisValues = []
+        var values = []
+
+        plotDatas = jsonDatas['months']
+
+        for (month in plotDatas)
+        {
+            xAxisValues.push(month)
+            value = plotDatas[month]
+            if (value == null) value = 0
+            else value = value.substring(0, value.length - 2)
+            values.push(value)
+        }
+
+        //set traces:
+        data = []
+        trace = {
+                x: xAxisValues,
+                y: values,
+                type: 'bar',
+                width: 0.8,
+                offset: -0.4,
+                opacity: 1,
+                marker: {
+                        color: 'rgb(230, 160, 60)',
+                        line: {
+                            color: 'rgb(230, 160, 60)',
+                            width: 1
+                            }
+                        },
+                connectgaps: true
+            };
+        data.push(trace)
+
+        //layouting:
+        title = 'Linky Months'
+
+        layout = {
+                title: title,
+                height: window.innerHeight/2-80,
+                width: window.innerWidth-10,
+
+                xaxis: {
+                        zeroline: true,
+                        showgrid: false,
+                        ticklen: 9,
+                        tickmode: 'linear',
+                        tick0: 0,
+                        dtick: 1
+                        },
+                yaxis: {
+                        ticklen: 7,
+                        ticksuffix: 'kW',
+                        tickmode: 'linear',
+                        tick0: 0,
+                        dtick: 200,
+                        range: [0, 1400],
+                        showline: true
+                        },
+                showlegend: false,
+                margin: {
+                        l: 100,
+                        r: 30,
+                        b: 130,
+                        t: 30,
+                        pad: 0
+                      }
+        }
+        Plotly.newPlot(graphLinkyMonths, data, layout);
+    };
+
+    function drawGraphYears() //parse data to plotly!
+    {
+        Plotly.purge(graphLinkyYears)
+        var xAxisValues = []
+        var values = []
+
+        plotDatas = jsonDatas['years']
+
+        for (day in plotDatas)
+        {
+            xAxisValues.push(day)
+            value = plotDatas[day]
+            if (value == null) value = 0
+            else value = value.substring(0, value.length - 2)
+            values.push(value)
+        }
+
+        //set traces:
+        data = []
+        trace = {
+                x: xAxisValues,
+                y: values,
+                type: 'bar',
+                width: 0.8,
+                offset: -0.4,
+                opacity: 1,
+                marker: {
+                        color: 'rgb(230, 60, 60)',
+                        line: {
+                            color: 'rgb(230, 60, 60)',
+                            width: 1
+                            }
+                        },
+                connectgaps: true
+            };
+        data.push(trace)
+
+        //layouting:
+        title = 'Linky Years'
+
+        layout = {
+                title: title,
+                height: window.innerHeight/2-80,
+                width: window.innerWidth-10,
+
+                xaxis: {
+                        zeroline: true,
+                        showgrid: false,
+                        ticklen: 9,
+                        tickmode: 'linear',
+                        tick0: 0,
+                        dtick: 1
+                        },
+                yaxis: {
+                        ticklen: 10,
+                        ticksuffix: 'kwh',
+                        tickmode: 'linear',
+                        tick0: 0,
+                        dtick: 2000,
+                        range: [0, 14000],
+                        showline: true
+                        },
+                showlegend: false,
+                margin: {
+                        l: 100,
+                        r: 30,
+                        b: 130,
+                        t: 30,
+                        pad: 0
+                      }
+        }
+        Plotly.newPlot(graphLinkyYears, data, layout);
+    };
+</script>
+
+<script>
+    //load data:
+    var jsonDatas
+    var activeDay
+    var activeMonth
+    var graphLinkyHours
+    var graphLinkyDays
+    var graphLinkyMonths
+    var graphLinkyYears
+
+    graphLinkyHours = document.getElementById('graphLinkyHours')
+    graphLinkyDays = document.getElementById('graphLinkyDays')
+    graphLinkyMonths = document.getElementById('graphLinkyMonths')
+    graphLinkyYears = document.getElementById('graphLinkyYears')
+
+
+    $.getJSON(linkyLogPath, function(data)
+        {
+            jsonDatas = data
+            updateDaySelector()
+            updateMonthSelector()
+
+            document.getElementById('updatetime').innerHTML = "Last Update:" + jsonDatas['Update'] + "<br>"
+
+            drawGraphHours()
+            drawGraphDays()
+            drawGraphMonths()
+            drawGraphYears()
+        });
+
+    function openDaySelector() //Open select day dropdown
+    {
+        document.getElementById("daySelector").classList.toggle("show")
+    }
+    function goPrevDay()
+    {
+        parts = activeDay.split('/')
+        date = new Date(parts[2], parts[1]-1, parts[0]);
+        date.setDate(date.getDate()-1)
+
+        options = {year: "numeric", month: "2-digit" ,  day: "2-digit"}
+        date = date.toLocaleTimeString("fr-fr", options)
+        date = date.split(' ')[0]
+
+        drawGraphHours(date)
+    }
+    function goNextDay()
+    {
+        parts = activeDay.split('/')
+        date = new Date(parts[2], parts[1]-1, parts[0]);
+        date.setDate(date.getDate()+1)
+
+        options = {year: "numeric", month: "2-digit" ,  day: "2-digit"}
+        date = date.toLocaleTimeString("fr-fr", options)
+        date = date.split(' ')[0]
+
+        drawGraphHours(date)
+    }
+    function openDay(date) //Triggered by select day dropdown
+    {
+        activeDay = date
+        drawGraphHours(date)
+    }
+    function updateDaySelector() //Set select day dropdown entries
+    {
+        var daySelection = []
+        //reverse days order in json.hours:
+        plotDatas = {}
+        keys = Object.keys(jsonDatas['hours']).reverse()
+        for(i=0; i< keys.length; i++)
+        {
+            plotDatas[keys[i]] = jsonDatas['hours'][keys[i]]
+        }
+
+        for (day in plotDatas)
+        {
+            daySelection.push(JSON.stringify(day).slice(1, -1))
+        }
+
+        var daysDiv = document.getElementById("daySelector")
+        for (day in daySelection)
+        {
+            date = daySelection[day]
+            var aTag = document.createElement('a')
+            aTag.setAttribute('href', '#')
+            aTag.setAttribute('onclick', "openDay('"+date+"');")
+            aTag.innerHTML = date
+            daysDiv.appendChild(aTag)
+        }
+    }
+
+
+    function goPrevMonth()
+    {
+        month = activeMonth.split(' ')[0]
+        year = activeMonth.split(' ')[1]
+        if (month == 'Janvier')
+        {
+            year = parseInt(year)-1
+            activeMonth = 'Decembre ' + year
+            drawGraphDays(activeMonth)
+        }
+        else
+        {
+            monthNum = yearmonths.indexOf(month)
+            month = yearmonths[monthNum-1]
+            activeMonth = month + ' ' + year
+            drawGraphDays(activeMonth)
+        }
+    }
+    function openMonthSelector()
+    {
+        document.getElementById("monthSelector").classList.toggle("show")
+    }
+    function goNextMonth()
+    {
+        month = activeMonth.split(' ')[0]
+        year = activeMonth.split(' ')[1]
+        if (month == 'Decembre')
+        {
+            year = parseInt(year)+1
+            activeMonth = 'Janvier ' + year
+            drawGraphDays(activeMonth)
+        }
+        else
+        {
+            monthNum = yearmonths.indexOf(month)
+            month = yearmonths[monthNum+1]
+            activeMonth = month + ' ' + year
+            drawGraphDays(activeMonth)
+        }
+    }
+    function openMonth(date)
+    {
+        activeMonth = date
+        drawGraphDays(date)
+    }
+    function updateMonthSelector()
+    {
+        var monthSelection = []
+        //reverse months order in json.hours:
+        plotDatas = {}
+        keys = Object.keys(jsonDatas['days']).reverse()
+        for(i=0; i< keys.length; i++)
+        {
+            plotDatas[keys[i]] = jsonDatas['days'][keys[i]]
+        }
+
+        //yearmonths
+        for (day in plotDatas)
+        {
+            monthIdx = day.split('/')[1]-1
+            year = day.split('/')[2]
+            month = yearmonths[parseInt(monthIdx)]
+            month = month + ' ' + year
+            monthSelection.push(JSON.stringify(month).slice(1, -1))
+        }
+
+        //make it unique:
+        monthSelection = monthSelection.filter(function(item, i, ar){ return ar.indexOf(item) === i; })
+
+        var monthsDiv = document.getElementById("monthSelector")
+
+        for (month in monthSelection)
+        {
+            date = monthSelection[month]
+            var aTag = document.createElement('a')
+            aTag.setAttribute('href', '#')
+            aTag.setAttribute('onclick', "openMonth('"+date+"');")
+            aTag.innerHTML = date
+            monthsDiv.appendChild(aTag)
+        }
+    }
+
+    window.onclick = function(event) //Close select day dropdown
+    {
+        if (!event.target.matches('.dropbtn'))
+        {
+            var daysdropdowns = document.getElementsByClassName("dropdown-content");
+            var i;
+            for (i = 0; i < daysdropdowns.length; i++)
+            {
+                var openDropdown = daysdropdowns[i]
+                if (openDropdown.classList.contains('show'))
+                {
+                    openDropdown.classList.remove('show')
+                }
+            }
+        }
+    }
+
+    function timeConvert(mins) //format mins to h:min
+    {
+        hours = (mins / 60)
+        rhours = Math.floor(hours)
+        minutes = (hours - rhours) * 60
+        rminutes = Math.round(minutes)
+        return rhours + "h" + rminutes + 'min'
+    }
+
+    function updateGraphs()
+    {
+        h = window.innerHeight/2-80
+        w = window.innerWidth-10
+        Plotly.relayout('graphLinkyHours', {height: h, width: w})
+        Plotly.relayout('graphLinkyDays', {height: h, width: w})
+        Plotly.relayout('graphLinkyMonths', {height: h, width: w})
+        Plotly.relayout('graphLinkyYears', {height: h, width: w})
+    }
+
+    window.onresize = function() {
+            updateGraphs()
+        };
+</script>
+
+</body>
+</html>
\ No newline at end of file
