/
renderCanvas.ts
64 lines (52 loc) · 1.88 KB
/
renderCanvas.ts
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
import { ContributionCalendar, ContributionDay, Week } from "./contributions.ts";
const makeMohthLabels = (contribution: ContributionCalendar) => {
// deno-fmt-ignore
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
return contribution.weeks.map(
(week: Week, i: number, array: Week[]) => {
const isBeginningOfMonth = array[i - 1] === undefined ||
new Date(week.contributionDays[0].date).getMonth() !==
new Date(array[i - 1].contributionDays[0].date).getMonth();
return isBeginningOfMonth ? months[new Date(week.contributionDays[0].date).getMonth()] : " ";
},
);
};
const renderContributions = (
ctx: CanvasRenderingContext2D,
width: number,
height: number,
contribution: ContributionCalendar,
) => {
const space = 2;
const size = 10;
const monthLabels = makeMohthLabels(contribution);
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, width, height);
// deno-fmt-ignore
ctx.fillText(`${contribution.totalContributions} contributions in the last year`, 10, 10);
ctx.fillText("Mon", 1, 52);
ctx.fillText("Wed", 1, 74);
ctx.fillText("Fri", 1, 96);
contribution.weeks.forEach((week: Week, i: number) => {
ctx.fillStyle = "black";
ctx.fillText(monthLabels[i], 20 + (space * i) + (size * i), 25);
week.contributionDays.forEach((day: ContributionDay, j: number) => {
ctx.fillStyle = day.color;
ctx.fillRect(
20 + (space * i) + (size * i),
30 + (space * j) + (size * j),
size,
size,
);
});
});
const legend = ["#ebedf0", ...contribution.colors];
ctx.fillStyle = "black";
ctx.fillText("Less", 500, 128);
ctx.fillText("More", 595, 128);
legend.forEach((color: string, i: number) => {
ctx.fillStyle = color;
ctx.fillRect(530 + (space * i) + (size * i), 120, size, size);
});
};
export { renderContributions };