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, 23 insertions, 0 deletions

diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
new file mode 100644
index 0000000000..d1cb43dde0
--- /dev/null
+++ b/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';
+  }
+}