-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
143 lines (127 loc) · 5.07 KB
/
main.js
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
// -*- coding: utf-8-unix -*-
function addClasses(div, title, pastDay, pastHour) {
title && div.classList.add("title");
pastDay && div.classList.add("past-day", "hidden");
pastHour && div.classList.add("past-hour");
}
function appendBar(chart, width, q33, q67, time, price, title, pastDay, pastHour) {
// Bar
let div = document.createElement("div");
div.classList.add("bar");
addClasses(div, title, pastDay, pastHour);
div.style.backgroundImage = `
linear-gradient(
to right,
transparent 0 calc(${q33}% - 1px),
var(--color-ref) calc(${q33}% - 1px) calc(${q33}% + 1px),
transparent calc(${q33}% + 1px) calc(${q67}% - 1px),
var(--color-ref) calc(${q67}% - 1px) calc(${q67}% + 1px),
transparent calc(${q67}% + 1px) 100%
), linear-gradient(
to right,
var(--color-bar) 0 ${width}%,
transparent ${width}% 100%
)`;
chart.appendChild(div);
// Time label
div = document.createElement("div");
div.classList.add("label", "time");
addClasses(div, title, pastDay, pastHour);
div.innerHTML = time;
chart.appendChild(div);
// Price label
div = document.createElement("div");
div.classList.add("label", "price");
addClasses(div, title, pastDay, pastHour);
div.innerHTML = price;
chart.appendChild(div);
}
function formatDate(string) {
const date = new Date(string);
const weekday = ["su", "ma", "ti", "ke", "to", "pe", "la"][date.getDay()];
return `${weekday} ${date.getDate()}.${date.getMonth()+1}.${date.getFullYear()}`;
}
function getReferenceData(data) {
// Daytime hours of the first seven days of data.
return data.slice(0, 7 * 24).filter(x => {
const hour = new Date(x.datetime.replace(" ", "T")).getHours();
return hour >= 7 && hour < 23;
});
}
function isPastDay(date, now) {
if (date > now) return false;
if (date.getFullYear() < now.getFullYear()) return true;
if (date.getMonth() < now.getMonth()) return true;
if (date.getDate() < now.getDate()) return true;
return false;
}
function isPastHour(date, now) {
// Add one hour to get the endpoint of the range.
return (date.getTime() + 3600*1000) < now.getTime();
}
function nround(x, n) {
n = n || 0;
const factor = Math.pow(10, n);
return Math.round(factor * x) / factor;
}
function quantile(values, q) {
values.sort((a, b) => a - b);
const pos = (values.length - 1) * q;
const i = Math.floor(pos);
const diff = pos - i;
return (1 - diff) * values[i] + diff * values[i+1];
}
function renderChart(data) {
if (data.length === 0) return;
const now = new Date(),
chart = document.getElementById("chart"),
ref = getReferenceData(data),
refPrices = ref.map(x => x.price_with_vat),
priceMax = 1.05 * Math.max(...data.map(x => x.price_with_vat)),
priceQ33 = quantile(refPrices, 0.33),
priceQ67 = quantile(refPrices, 0.67);
var prevDate = null;
for (const item of data) {
const width = nround(Math.max(0, item.price_with_vat) / priceMax * 100, 1),
q33 = nround(priceQ33 / priceMax * 100, 1),
q67 = nround(priceQ67 / priceMax * 100, 1),
title = item.date !== prevDate,
time = title ? `${formatDate(item.date)}` : item.time,
price = item.price_with_vat.toFixed(1).replace(".", ",");
datetime = new Date(item.datetime.replace(" ", "T")),
pastDay = isPastDay(datetime, now),
pastHour = isPastHour(datetime, now);
appendBar(chart, width, q33, q67, time, price, title, pastDay, pastHour);
prevDate = item.date;
}
for (const p of document.getElementsByClassName("tick q33")) {
const label = priceQ33.toPrecision(2).replace(".", ",");
const width = nround(priceQ33 / priceMax * 100, 1);
const shift = (0.25 * label.length).toFixed(2);
p.innerHTML = `${label}`;
p.style.paddingLeft = `calc(${width}% - ${shift}em)`;
}
for (const p of document.getElementsByClassName("tick q67")) {
const label = priceQ67.toPrecision(2).replace(".", ",");
const width = nround(priceQ67 / priceMax * 100, 1);
const shift = (0.25 * label.length).toFixed(2);
p.innerHTML = `${label} snt/kWh`;
p.style.paddingLeft = `calc(${width}% - ${shift}em)`;
}
}
(function() {
const today = (new Date()).toISOString().substring(0, 10);
if (today >= "2022-12-01" && today <= "2023-04-30") {
// Use reduced VAT December–April.
// https://vm.fi/hanke?tunnus=VM112:00/2022
// https://www.hs.fi/politiikka/art-2000009040795.html
document.querySelector("#vat").innerHTML = "10%";
}
fetch("prices.json")
.then(response => response.json())
.then(data => renderChart(data));
document.querySelector("#toggle-history-button")
.addEventListener("click", event =>
document.querySelectorAll(".past-day")
.forEach(x => x.classList.toggle("hidden")));
})();