-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
113 lines (98 loc) · 3.28 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
109
110
111
112
113
<!DOCTYPE html>
<html class="dark" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Telegram Charts</title>
<link rel="stylesheet" href="dist/chart.css">
<style>
body {
padding: 0;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}
.container {
max-width: 600px;
width: 100%;
margin: 0 auto;
}
.change-theme {
width: 50%;
height: 100px;
border: none;
outline: none;
font-weight: 700;
font-size: 1.6em;
color: #108BE3;
cursor: pointer;
background: transparent;
float: left;
}
html.dark .change-theme {
color: #48AAF0;
}
p {
padding: 0px 10px;
}
</style>
</head>
<body>
<div class="container" id="container">
<button class="change-theme" id="dark-mode">Dark theme</button>
<button class="change-theme" id="light-mode">Light theme</button>
</div>
<script src="dist/chart.js"></script>
<script>
const html = document.querySelector('html');
document.getElementById('dark-mode').addEventListener('click', function handleChangeTheme() {
const splitted = html.className ? html.className.split(' ') : [];
const darkIndex = splitted.indexOf('dark');
if (darkIndex == -1) {
splitted.push('dark');
html.className = splitted.join(' ');
document.dispatchEvent(new Event('darkmode'))
}
});
document.getElementById('light-mode').addEventListener('click', function handleChangeTheme() {
const splitted = html.className ? html.className.split(' ') : [];
const darkIndex = splitted.indexOf('dark');
if (darkIndex > -1) {
splitted.splice(darkIndex, 1);
html.className = splitted.join(' ');
document.dispatchEvent(new Event('darkmode'))
}
});
var chartsContainer = document.querySelector('#container');
fetch('assets/stage_2_data/1/overview.json').then(res => res.json()).then(chartData => {
chartData.x_on_zoom = (timestamp) => {
const response = fetch('assets/stage_2_data_extended/1/2018-04/07.json').then(res => res.json())
return response;
};
Graph.render(chartsContainer, chartData);
})
fetch('assets/stage_2_data/2/overview.json').then(res => res.json()).then(chartData => {
chartData.x_on_zoom = (timestamp) => {
const response = fetch('assets/stage_2_data_extended/2/2018-04/07.json').then(res => res.json())
return response;
};
Graph.render(chartsContainer, chartData);
})
fetch('assets/stage_2_data/3/overview.json').then(res => res.json()).then(chartData => {
chartData.x_on_zoom = (timestamp) => {
const response = fetch('assets/stage_2_data_extended/3/2018-04/07.json').then(res => res.json())
return response;
};
Graph.render(chartsContainer, chartData);
});
fetch('assets/stage_2_data/4/overview.json').then(res => res.json()).then(chartData => {
chartData.x_on_zoom = (timestamp) => {
const response = fetch('assets/stage_2_data_extended/4/2018-04/07.json').then(res => res.json())
return response;
};
Graph.render(chartsContainer, chartData);
});
fetch('assets/stage_2_data/5/overview.json').then(res => res.json()).then(chartData => Graph.render(chartsContainer, chartData))
</script>
</body>
</html>