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.gotokarchuk/v1.17
parent
d02c3508e6
commit
12c2efb45c
@ -1,7 +1,8 @@ |
||||
<div id="user-heatmap" style="padding-right: 40px"> |
||||
<activity-heatmap :locale="locale" :suburl="suburl" :user="heatmapUser"> |
||||
{{if .HeatmapData}} |
||||
<div id="user-heatmap" data-heatmap-data="{{Json .HeatmapData}}"> |
||||
<div slot="loading"> |
||||
<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.i18n.Tr "user.heatmap.loading"}}</div> |
||||
</div> |
||||
</activity-heatmap> |
||||
</div> |
||||
</div> |
||||
<div class="ui divider"></div> |
||||
{{end}} |
@ -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'; |
||||
} |
||||
} |
@ -1,10 +0,0 @@ |
||||
import Vue from 'vue'; |
||||
|
||||
import ActivityHeatmap from '../components/ActivityHeatmap.vue'; |
||||
|
||||
export default async function initUserHeatmap() { |
||||
const el = document.getElementById('user-heatmap'); |
||||
if (!el) return; |
||||
const View = Vue.extend(ActivityHeatmap); |
||||
new View().$mount(el); |
||||
} |
@ -1,49 +1,50 @@ |
||||
#user-heatmap { |
||||
width: 107%; // Fixes newest contributions not showing |
||||
width: 100%; |
||||
text-align: center; |
||||
position: relative; |
||||
min-height: 125px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
svg:not(:root) { |
||||
overflow: inherit; |
||||
padding: 0 !important; |
||||
} |
||||
|
||||
text { |
||||
fill: currentColor !important; |
||||
} |
||||
|
||||
@media @mediaLgAndDown { |
||||
& { |
||||
&, |
||||
& + .divider { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.total-contributions { |
||||
text-align: left; |
||||
margin-top: 0; |
||||
font-size: 11px; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 25px; |
||||
} |
||||
} |
||||
|
||||
.heatmap-container { |
||||
position: relative; |
||||
} |
||||
|
||||
.heatmap-container .total-contributions { |
||||
font-size: 11px; |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 25px; |
||||
} |
||||
|
||||
@media @mediaLgAndDown { |
||||
.heatmap-container .total-contributions { |
||||
left: 21px; |
||||
@media @mediaLgAndDown { |
||||
.total-contributions { |
||||
left: 21px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (max-width: 1000px) { |
||||
.heatmap-container .total-contributions { |
||||
font-size: 10px; |
||||
left: 17px; |
||||
bottom: -2px; |
||||
@media (max-width: 1000px) { |
||||
.total-contributions { |
||||
font-size: 10px; |
||||
left: 17px; |
||||
bottom: -2px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.heatmap-container text { |
||||
fill: currentColor !important; |
||||
.user.profile #user-heatmap { |
||||
min-height: 135px; |
||||
} |
||||
|
Loading…
Reference in new issue