forked from forgejo/forgejo
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
|
@ -1,13 +1,9 @@
|
|||
<template>
|
||||
<div class="heatmap-container">
|
||||
<div v-show="isLoading">
|
||||
<slot name="loading"/>
|
||||
</div>
|
||||
<div v-if="!isLoading" class="total-contributions">
|
||||
<div id="user-heatmap">
|
||||
<div class="total-contributions">
|
||||
{{ values.length }} contributions in the last 12 months
|
||||
</div>
|
||||
<calendar-heatmap
|
||||
v-show="!isLoading"
|
||||
:locale="locale"
|
||||
:no-data-text="locale.no_contributions"
|
||||
:tooltip-unit="locale.contributions"
|
||||
|
@ -19,13 +15,17 @@
|
|||
</template>
|
||||
<script>
|
||||
import {CalendarHeatmap} from 'vue-calendar-heatmap';
|
||||
const {AppSubUrl, heatmapUser} = window.config;
|
||||
|
||||
export default {
|
||||
name: 'ActivityHeatmap',
|
||||
components: {CalendarHeatmap},
|
||||
props: {
|
||||
values: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
isLoading: true,
|
||||
colorRange: [
|
||||
'var(--color-secondary-alpha-70)',
|
||||
'var(--color-primary-light-4)',
|
||||
|
@ -35,20 +35,11 @@ export default {
|
|||
'var(--color-primary-dark-4)',
|
||||
],
|
||||
endDate: new Date(),
|
||||
values: [],
|
||||
locale: {
|
||||
contributions: 'contributions',
|
||||
no_contributions: 'No contributions',
|
||||
},
|
||||
}),
|
||||
async mounted() {
|
||||
const res = await fetch(`${AppSubUrl}/api/v1/users/${heatmapUser}/heatmap`);
|
||||
const data = await res.json();
|
||||
this.values = data.map(({contributions, timestamp}) => {
|
||||
return {date: new Date(timestamp * 1000), count: contributions};
|
||||
});
|
||||
this.isLoading = false;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue