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
|
import Vue from 'vue';
const { AppSubUrl, heatmapUser } = window.config;
export default async function initHeatmap() {
const el = document.getElementById('user-heatmap');
if (!el) return;
const { CalendarHeatmap } = await import(/* webpackChunkName: "userheatmap" */'vue-calendar-heatmap');
Vue.component('calendarHeatmap', CalendarHeatmap);
const vueDelimeters = ['${', '}'];
Vue.component('activity-heatmap', {
delimiters: vueDelimeters,
props: {
user: {
type: String,
required: true
},
suburl: {
type: String,
required: true
},
locale: {
type: Object,
required: true
}
},
data() {
return {
isLoading: true,
colorRange: [],
endDate: null,
values: [],
totalContributions: 0,
};
},
mounted() {
this.colorRange = [
this.getColor(0),
this.getColor(1),
this.getColor(2),
this.getColor(3),
this.getColor(4),
this.getColor(5)
];
this.endDate = new Date();
this.loadHeatmap(this.user);
},
methods: {
loadHeatmap(userName) {
const self = this;
$.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
const chartData = [];
for (let i = 0; i < chartRawData.length; i++) {
self.totalContributions += chartRawData[i].contributions;
chartData[i] = { date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions };
}
self.values = chartData;
self.isLoading = false;
});
},
getColor(idx) {
const el = document.createElement('div');
el.className = `heatmap-color-${idx}`;
document.body.appendChild(el);
const color = getComputedStyle(el).backgroundColor;
document.body.removeChild(el);
return color;
}
},
template: '<div><div v-show="isLoading"><slot name="loading"></slot></div><h4 class="total-contributions" v-if="!isLoading"><span v-html="totalContributions"></span> total contributions in the last 12 months</h4><calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange"/></div>'
});
new Vue({
delimiters: vueDelimeters,
el,
data: {
suburl: AppSubUrl,
heatmapUser,
locale: {
contributions: 'contributions',
no_contributions: 'No contributions',
},
},
});
}
|
