Remove fetch request from heatmap (#13623)
* Remove fetch request from heatmap Render heatmap data directly to HTML, eliminating one HTTP request on frontpage and user profile. Also added min-height to the container so the page content will no longer move after loading. * rename and error display * also log the js error * add error handler * remove useless inline style and hide divider on small screens * Update routers/user/home.go * Update routers/user/profile.go
This commit is contained in:
parent
d02c3508e6
commit
12c2efb45c
11 changed files with 90 additions and 78 deletions
23
web_src/js/features/heatmap.js
Normal file
23
web_src/js/features/heatmap.js
Normal file
|
@ -0,0 +1,23 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
import ActivityHeatmap from '../components/ActivityHeatmap.vue';
|
||||
|
||||
export default async function initHeatmap() {
|
||||
const el = document.getElementById('user-heatmap');
|
||||
if (!el) return;
|
||||
|
||||
try {
|
||||
const values = JSON.parse(el.dataset.heatmapData).map(({contributions, timestamp}) => {
|
||||
return {date: new Date(timestamp * 1000), count: contributions};
|
||||
});
|
||||
|
||||
const View = Vue.extend({
|
||||
render: (createElement) => createElement(ActivityHeatmap, {props: {values}}),
|
||||
});
|
||||
|
||||
new View().$mount(el);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
el.textContent = 'Heatmap failed to load';
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue