1 files changed, 32 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/projects/commit/show/index.js b/app/assets/javascripts/pages/projects/commit/show/index.js
index c6a76df7bde..eca3cf7ab13 100644
--- a/app/assets/javascripts/pages/projects/commit/show/index.js
+++ b/app/assets/javascripts/pages/projects/commit/show/index.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-new */
 import $ from 'jquery';
+import Vue from 'vue';
 import loadAwardsHandler from '~/awards_handler';
 import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
 import Diff from '~/diff';
@@ -14,6 +15,7 @@ import { initCommitBoxInfo } from '~/projects/commit_box/info';
 import syntaxHighlight from '~/syntax_highlight';
 import ZenMode from '~/zen_mode';
 import '~/sourcegraph/load';
+import DiffStats from '~/diffs/components/diff_stats.vue';
 
 const hasPerfBar = document.querySelector('.with-performance-bar');
 const performanceHeight = hasPerfBar ? 35 : 0;
@@ -25,6 +27,33 @@ initCommitBoxInfo();
 
 initDeprecatedNotes();
 
+const loadDiffStats = () => {
+  const diffStatsElements = document.querySelectorAll('#js-diff-stats');
+
+  if (diffStatsElements.length) {
+    diffStatsElements.forEach((diffStatsEl) => {
+      const { addedLines, removedLines, oldSize, newSize, viewerName } = diffStatsEl.dataset;
+
+      new Vue({
+        el: diffStatsEl,
+        render(createElement) {
+          return createElement(DiffStats, {
+            props: {
+              diffFile: {
+                old_size: oldSize,
+                new_size: newSize,
+                viewer: { name: viewerName },
+              },
+              addedLines: Number(addedLines),
+              removedLines: Number(removedLines),
+            },
+          });
+        },
+      });
+    });
+  }
+};
+
 const filesContainer = $('.js-diffs-batch');
 
 if (filesContainer.length) {
@@ -37,12 +66,15 @@ if (filesContainer.length) {
       syntaxHighlight(filesContainer);
       handleLocationHash();
       new Diff();
+      loadDiffStats();
     })
     .catch(() => {
       createFlash({ message: __('An error occurred while retrieving diff files') });
     });
 } else {
   new Diff();
+  loadDiffStats();
 }
+
 loadAwardsHandler();
 initCommitActions();