-
Notifications
You must be signed in to change notification settings - Fork 2
/
NEPviewerCR+.html
122 lines (122 loc) · 4.8 KB
/
NEPviewerCR+.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<!--
| NEPviewerCR (https://github.com/DE-cr/NEPviewerCR)
| (file NEPviewerCR+.html)
| - (partial) replacement for the official nepviewer.com offer to monitor a
| photovoltaic micro inverter registered with their site
| - usage: unblock CORS via browser plugin,
| then open this file in the browser with '?SN=...' added to its url,
| where '...' must be replaced with your microinverter's serial number,
| as used in registering this system with nepviewer.com
-->
<html>
<head>
<title>NEPviewerCR+</title>
</head>
<body>
<div style='float:left;width:50%'>
<input id='date' type='date' onchange='show_day()'>
<div id='detail'></div>
</div>
<div style='float:right;width:50%'>
<div id='week'></div>
<div id='month'></div>
<div id='year'></div>
</div>
<style>
svg, .c3-tooltip { font: 10px sans-serif }
div path, line { fill: none; stroke: #aaa }
.c3-focused { opacity: 1; stroke-width: 2px }
.c3-defocused, .c3-legend-item-hidden { opacity: 0.5 !important }
.c3-tooltip { opacity: 0.7; background-color: #eee }
th { background-color: #ccc }
.value { text-align: right }
</style>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/c3'></script>
<script>
let SN = new URLSearchParams(window.location.search).get('SN');
let date = document.getElementById('date');
date.value = new Date().toJSON().slice(0,10);
show_day();
bar_chart('week');
bar_chart('month');
bar_chart('year');
function show_day() {
let sdate = date.value.replace(/-/g,'');
fetch('http://user.nepviewer.com/pv_monitor/proxy/history/'+SN+'/'+sdate+'/'+sdate+'/0/1/2')
.then(response => response.json())
.then(json => {
// sample data:
// {"data":["2023-05-30 04:53 0 27 226 0 49.6 8 0 0 8a01 0000 \n",---],"totalpage":1,"page":"1"}
// 0:Date 1:Time 2:kW 3:V-DC 4:V-AC 5:* 6:Hz 7:°C 8:kWh 9:* 10:8a0? 11:0000 12:\n
let lines = json['data'];
let data = [];
for (let i=0; i<lines.length; ++i) {
let col = lines[i].split(' ');
if (col.length > 8)
data.push( { 'time':col[1], 'W':col[2]*1000, 'kWh':col[8] } );
}
let graph = c3.generate({
bindto: '#detail',
data: {
json: data,
keys: { x: 'time', value: ['W','kWh'] },
names: { W: 'Power [W]', kWh: 'Energy [kWh]' },
axes: { kWh: 'y2' },
xFormat: '%H:%M',
},
axis: {
x: { type: 'timeseries', tick: { count: 2, format: '%H:%M' },
label: '(' + data.length + ' samples)' },
y: { padding: { bottom: 0, top: 0 }, label: 'W' },
y2: { padding: { bottom: 0, top: 0 }, label: 'kWh',
show: true },
},
// grid: { x: { show: true }, y: { show: true } },
// point: { show: false },
zoom: { enabled: true, rescale: true,
onzoomstart: function() { graph.subchart.show() }
},
size: { height: window.innerHeight - 35 },
onresize: function(){graph.resize({height: window.innerHeight-35})},
});
});
}
function bar_chart(what) { // what=week/month/year
fetch('http://user.nepviewer.com/pv_monitor/proxy/'+what+'/'+SN+'/0/2/')
.then(response => response.json())
.then(json => {
// sample data:
// {"meter":0,"arr":[["2024.08.12",3.7],---],"arr2":[]}
let row = json['arr'];
let data = [];
let sum = 0;
let i = 0;
for (i=0; i<row.length && !row[i][1]; ++i)
; // skip leading empty data, then process rest
let months = ['Jan','Feb','Mar','Apr','May','Jun',
'Jul','Aug','Sep','Oct','Nov','Dec'];
for (; i<row.length; ++i) {
let xv = row[i][0].replace(/[/.]/g,'-');
if (what=='month')
xv = months[xv.substr(5)-1]; // save some display space
data.push({ 'x': xv, 'y': row[i][1] });
sum += row[i][1];
}
let graph = c3.generate({
bindto: '#' + what,
data: { type: 'bar', labels: true, json: data,
keys: { x:'x', value:['y'] } },
axis: { x: { type: 'category' },
y: { label: 'kWh (total=' + sum.toFixed(2) + ')' } },
legend: { show: false },
tooltip: { show: false },
size: { height: (window.innerHeight - 12)/3 },
onresize: function(){graph.resize({height: (window.innerHeight-12)/3})},
});
});
}
</script>
</body>
</html>