2 files changed, 23 insertions, 10 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';
+  }
+}
diff --git a/web_src/js/features/userheatmap.js b/web_src/js/features/userheatmap.js
deleted file mode 100644
index f7e0d1a75f..0000000000
--- a/web_src/js/features/userheatmap.js
+++ /dev/null
@@ -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);
-}