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

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/>

web_src/js/features/heatmap.js

@@ -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';
+  }
+}

web_src/js/features/userheatmap.js

@@ -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);
-}

web_src/js/index.js

@@ -12,7 +12,7 @@ import initMigration from './features/migration.js';
 import initContextPopups from './features/contextpopup.js';
 import initGitGraph from './features/gitgraph.js';
 import initClipboard from './features/clipboard.js';
-import initUserHeatmap from './features/userheatmap.js';
+import initHeatmap from './features/heatmap.js';
 import initProject from './features/projects.js';
 import initServiceWorker from './features/serviceworker.js';
 import initMarkdownAnchors from './markdown/anchors.js';
@@ -2553,7 +2553,7 @@ $(document).ready(async () => {
     attachTribute(document.querySelectorAll('#content, .emoji-input')),
     initGitGraph(),
     initClipboard(),
-    initUserHeatmap(),
+    initHeatmap(),
     initProject(),
     initServiceWorker(),
     initNotificationCount(),