-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
108 lines (101 loc) · 2.94 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Power price</title>
</head>
<body>
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const CHART_COLORS = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
const lineRentParts = {
elCertificateNOK: 0.04950,
lineRentEnergyNOK: 0.26988,
usageFeeNOK: 0.20863,
enovaNOK: 0.01250
}
const lineRent = lineRentParts.elCertificateNOK+lineRentParts.lineRentEnergyNOK+lineRentParts.usageFeeNOK+lineRentParts.enovaNOK;
const params = new URLSearchParams(window.location.search);
const key = params.get("key");
if (key == null) {
document.body.innerText = "you need a api key to use this, send an email to "
+ "[email protected] to get a free API key";
throw new Error("missing key query parameter");
}
const date = params.get("date");
if (date == null) {
window.history.pushState(
"",
document.title,
window.location.href += "&date=" + new Date().toLocaleDateString("sv")
);
}
let zone = params.get("zone");
if (zone == null) {
window.history.pushState("", document.title, window.location.href += "&zone=NO2");
}
const priceURL = `/?zone=${zone}&date=${date}&key=${key}`
const data = {
labels: ["00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23"],
datasets: [
{
label: 'Price kWh',
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
backgroundColor: CHART_COLORS.orange,
},
{
label: 'Line rent kWh',
data: Array(24).fill(lineRent),
backgroundColor: CHART_COLORS.yellow,
}
]
};
const config = {
type: 'bar',
data: data,
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: `Power price in ${zone} ${date}`
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
min: 0,
suggestedMax: 2,
stacked: true
}
}
}
};
Chart.defaults.color = Chart.defaults.borderColor = "#FFFFFF";
const myChart = new Chart(document.getElementById('myChart'), config);
fetch(priceURL)
.then(r => r.json())
.then(obj => Object.keys(obj).map(key => obj[key]))
.then(priceInfo => priceInfo.map(price => price.NOK_per_kWh))
.then(prices => {
data.datasets[0].data = prices;
myChart.update();
});
</script>
</body>
</html>