2 files changed, 105 insertions, 99 deletions

diff --git a/web_src/js/features/userHeatmap.js b/web_src/js/features/userHeatmap.js
new file mode 100644
index 0000000000..4862bc436c
--- /dev/null
+++ b/web_src/js/features/userHeatmap.js
@@ -0,0 +1,98 @@
+import Vue from 'vue';
+
+const { AppSubUrl, heatmapUser } = window.config;
+
+export default async function initHeatmap() {
+  const el = document.getElementById('user-heatmap');
+  if (!el) return;
+
+  const { CalendarHeatmap } = await import(/* webpackChunkName: "userheatmap" */'vue-calendar-heatmap');
+  Vue.component('calendarHeatmap', CalendarHeatmap);
+
+  const vueDelimeters = ['${', '}'];
+
+  Vue.component('activity-heatmap', {
+    delimiters: vueDelimeters,
+
+    props: {
+      user: {
+        type: String,
+        required: true
+      },
+      suburl: {
+        type: String,
+        required: true
+      },
+      locale: {
+        type: Object,
+        required: true
+      }
+    },
+
+    data() {
+      return {
+        isLoading: true,
+        colorRange: [],
+        endDate: null,
+        values: [],
+        totalContributions: 0,
+      };
+    },
+
+    mounted() {
+      this.colorRange = [
+        this.getColor(0),
+        this.getColor(1),
+        this.getColor(2),
+        this.getColor(3),
+        this.getColor(4),
+        this.getColor(5)
+      ];
+      this.endDate = new Date();
+      this.loadHeatmap(this.user);
+    },
+
+    methods: {
+      loadHeatmap(userName) {
+        const self = this;
+        $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
+          const chartData = [];
+          for (let i = 0; i < chartRawData.length; i++) {
+            self.totalContributions += chartRawData[i].contributions;
+            chartData[i] = { date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions };
+          }
+          self.values = chartData;
+          self.isLoading = false;
+        });
+      },
+
+      getColor(idx) {
+        const el = document.createElement('div');
+        el.className = `heatmap-color-${idx}`;
+        document.body.appendChild(el);
+
+        const color = getComputedStyle(el).backgroundColor;
+
+        document.body.removeChild(el);
+
+        return color;
+      }
+    },
+
+    template: '<div><div v-show="isLoading"><slot name="loading"></slot></div><h4 class="total-contributions" v-if="!isLoading"><span v-html="totalContributions"></span> total contributions in the last 12 months</h4><calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange"/></div>'
+  });
+
+  new Vue({
+    delimiters: vueDelimeters,
+    el,
+
+    data: {
+      suburl: AppSubUrl,
+      heatmapUser,
+      locale: {
+        contributions: 'contributions',
+        no_contributions: 'No contributions',
+      },
+    },
+  });
+}
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 2b5cc4a529..d4f8bb40e4 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1,10 +1,12 @@
 /* globals wipPrefixes, issuesTribute, emojiTribute */
-/* exported timeAddManual, toggleStopwatch, cancelStopwatch, initHeatmap */
+/* exported timeAddManual, toggleStopwatch, cancelStopwatch */
 /* exported toggleDeadlineForm, setDeadline, updateDeadline, deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
 
-import 'jquery.are-you-sure';
 import './publicPath.js';
 import './polyfills.js';
+
+import Vue from 'vue';
+import 'jquery.are-you-sure';
 import './vendor/semanticDropdown.js';
 import { svg } from './utils.js';
 
@@ -12,6 +14,7 @@ import initContextPopups from './features/contextPopup.js';
 import initHighlight from './features/highlight.js';
 import initGitGraph from './features/gitGraph.js';
 import initClipboard from './features/clipboard.js';
+import initUserHeatmap from './features/userHeatmap.js';
 
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 
@@ -2612,6 +2615,7 @@ $(document).ready(async () => {
     initHighlight(),
     initGitGraph(),
     initClipboard(),
+    initUserHeatmap(),
   ]);
 });
 
@@ -2917,7 +2921,7 @@ function initVueApp() {
     delimiters: ['${', '}'],
     el,
     data: {
-      searchLimit: (document.querySelector('meta[name=_search_limit]') || {}).content,
+      searchLimit: Number((document.querySelector('meta[name=_search_limit]') || {}).content),
       suburl: AppSubUrl,
       uid: Number((document.querySelector('meta[name=_context_uid]') || {}).content),
       activityTopAuthors: window.ActivityTopAuthors || [],
@@ -2945,102 +2949,6 @@ window.cancelStopwatch = function () {
   $('#cancel_stopwatch_form').submit();
 };
 
-window.initHeatmap = function (appElementId, heatmapUser, locale) {
-  const el = document.getElementById(appElementId);
-  if (!el) {
-    return;
-  }
-
-  locale = locale || {};
-
-  locale.contributions = locale.contributions || 'contributions';
-  locale.no_contributions = locale.no_contributions || 'No contributions';
-
-  const vueDelimeters = ['${', '}'];
-
-  Vue.component('activity-heatmap', {
-    delimiters: vueDelimeters,
-
-    props: {
-      user: {
-        type: String,
-        required: true
-      },
-      suburl: {
-        type: String,
-        required: true
-      },
-      locale: {
-        type: Object,
-        required: true
-      }
-    },
-
-    data() {
-      return {
-        isLoading: true,
-        colorRange: [],
-        endDate: null,
-        values: [],
-        totalContributions: 0,
-      };
-    },
-
-    mounted() {
-      this.colorRange = [
-        this.getColor(0),
-        this.getColor(1),
-        this.getColor(2),
-        this.getColor(3),
-        this.getColor(4),
-        this.getColor(5)
-      ];
-      this.endDate = new Date();
-      this.loadHeatmap(this.user);
-    },
-
-    methods: {
-      loadHeatmap(userName) {
-        const self = this;
-        $.get(`${this.suburl}/api/v1/users/${userName}/heatmap`, (chartRawData) => {
-          const chartData = [];
-          for (let i = 0; i < chartRawData.length; i++) {
-            self.totalContributions += chartRawData[i].contributions;
-            chartData[i] = { date: new Date(chartRawData[i].timestamp * 1000), count: chartRawData[i].contributions };
-          }
-          self.values = chartData;
-          self.isLoading = false;
-        });
-      },
-
-      getColor(idx) {
-        const el = document.createElement('div');
-        el.className = `heatmap-color-${idx}`;
-        document.body.appendChild(el);
-
-        const color = getComputedStyle(el).backgroundColor;
-
-        document.body.removeChild(el);
-
-        return color;
-      }
-    },
-
-    template: '<div><div v-show="isLoading"><slot name="loading"></slot></div><h4 class="total-contributions" v-if="!isLoading"><span v-html="totalContributions"></span> total contributions in the last 12 months</h4><calendar-heatmap v-show="!isLoading" :locale="locale" :no-data-text="locale.no_contributions" :tooltip-unit="locale.contributions" :end-date="endDate" :values="values" :range-color="colorRange" />'
-  });
-
-  new Vue({
-    delimiters: vueDelimeters,
-    el,
-
-    data: {
-      suburl: AppSubUrl,
-      heatmapUser,
-      locale
-    },
-  });
-};
-
 function initFilterBranchTagDropdown(selector) {
   $(selector).each(function () {
     const $dropdown = $(this);