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

1 files changed, 8 insertions, 17 deletions

diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index 1970cb609a..943bf704e2 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -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/>