700 lines
21 KiB
HTML
700 lines
21 KiB
HTML
<!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> |