Fichier html/js de visualisation
This commit is contained in:
KiboOst
GitHub
700
LinkyLog.html
Normal file
700
LinkyLog.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user