-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·69 lines (64 loc) · 2.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Telegram competition</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<link rel="stylesheet" href="./chart.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<button class="mode-btn">Switch to Day Mode</button>
<div id="root"></div>
<script src="./utils.js"></script>
<script src="./LineChart.js"></script>
<script>
const getJSON = function(url, callback) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "json";
xhr.onload = () => {
const status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status);
}
};
xhr.send();
};
getJSON("./data.json", (err, data) => {
let dark = true;
const root = document.getElementById("root");
const modeBtn = document.querySelector(".mode-btn");
const charts = [];
for (let i = 0; i < data.length; i++) {
charts.push(
new LineChart({
right: 20 + getScrollbarWidth(),
dark,
root,
data: normalizeData(data[i]),
header: `<h2>Chart #${i + 1}</h2>`,
}),
);
}
document.body.classList.add("dark");
modeBtn.addEventListener("click", () => {
dark = !dark;
if (document.body.classList.contains("dark")) {
modeBtn.innerText = "Switch to Night Mode";
document.body.classList.remove("dark");
} else {
modeBtn.innerText = "Switch to Day Mode";
document.body.classList.add("dark");
}
for (let i = 0; i < charts.length; i++) {
charts[i].updateTheme({ dark });
}
});
});
</script>
</body>
</html>