-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
124 lines (112 loc) · 3.77 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
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>github contribution graph</title>
<style>
svg {
background: #000;
padding: 12px 16px;
border-radius: 12px;
fill: white;
}
</style>
</head>
<body>
<div>github contribution graph client side rendering demo:</div>
<div>refresh to randomize :)</div>
<!-- <form>
<div>
<label for="change_theme">change theme:</label>
<select id="change_theme" name="change_theme">
<option value="standard">standard</option>
<option value="figma">figma</option>
</select>
</div>
</form> -->
<br>
<br>
<div id="app"></div>
<br>
<br>
<div>check out the <a href="https://www.npmjs.com/package/github-contribution-graph">library</a></div>
<script type="module">
// import drawContributionGraph from "./dist/github-contribution-graph.es.js"; // for prod build
import drawContributionGraph from "./src/index.js"; // for dev
const randomData = {
generator({ years = [] }) {
const data = {};
if (!years.length) return data;
years.forEach(year => {
for (let month = 1; month <= 12; month++) {
for (let day = 1; day <= this.getDaysInMonth(month, year); day++) {
const date = `${year}-${this.padZero(month)}-${this.padZero(day)}`;
const done = Math.floor(Math.random() * 10) + 1;
const not_done = Math.floor(Math.random() * 10);
if (!data[year]) {
data[year] = [];
}
data[year].push({ done, not_done, date });
}
}
})
return data;
},
getDaysInMonth(month, year) {
return new Date(year, month, 0).getDate();
},
padZero(number) {
return number.toString().padStart(2, '0');
}
}
const data = randomData.generator({ years: [2023, 2022] });
// const data = {
// 2023: [
// {
// "done": 1,
// "not_done": 0,
// "date": "2023-09-03"
// },
// {
// "done": 1,
// "not_done": 0,
// "date": "2023-08-31"
// },
// {
// "done": 1,
// "not_done": 0,
// "date": "2023-08-20"
// },
// {
// "done": 10,
// "not_done": 0,
// "date": "2023-08-19"
// },
// {
// "done": 1,
// "not_done": 0,
// "date": "2023-08-14"
// },
// {
// "done": 2,
// "not_done": 0,
// "date": "2023-08-13"
// }
// ]
// }
// const selectElem = document.querySelector("#change_theme");
// selectElem.addEventListener("change", evt => {
// const selectedValue = selectElem.value;
// console.log(selectedValue)
// })
drawContributionGraph({
data,
config: {
graphMountElement: "#app",
graphTheme: "figmaa",
},
});
</script>
</body>
</html>