Add a utility to compute stats for a diff file

app/assets/javascripts/diffs/utils/diff_file.js

 import { diffViewerModes as viewerModes } from '~/ide/constants';
+import { changeInPercent, numberToHumanSize } from '~/lib/utils/number_utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { uuids } from '~/lib/utils/uuids';
 
@@ -87,3 +88,35 @@ export function isCollapsed(file) {
 export function getShortShaFromFile(file) {
   return file.content_sha ? truncateSha(String(file.content_sha)) : null;
 }
+
+export function stats(file) {
+  let valid = false;
+  let classes = '';
+  let sign = '';
+  let text = '';
+  let percent = 0;
+  let diff = 0;
+
+  if (file) {
+    percent = changeInPercent(file.old_size, file.new_size);
+    diff = file.new_size - file.old_size;
+    sign = diff >= 0 ? '+' : '';
+    text = `${sign}${numberToHumanSize(diff)} (${sign}${percent}%)`;
+    valid = true;
+
+    if (diff > 0) {
+      classes = 'cgreen';
+    } else if (diff < 0) {
+      classes = 'cred';
+    }
+  }
+
+  return {
+    changed: diff,
+    text,
+    percent,
+    classes,
+    sign,
+    valid,
+  };
+}

spec/frontend/diffs/mock_data/diff_file.js

@@ -19,6 +19,8 @@ export default {
   renamed_file: false,
   old_path: 'CHANGELOG',
   new_path: 'CHANGELOG',
+  old_size: 1024,
+  new_size: 2048,
   mode_changed: false,
   a_mode: '100644',
   b_mode: '100644',

spec/frontend/diffs/utils/diff_file_spec.js

-import { prepareRawDiffFile, getShortShaFromFile, isNotDiffable } from '~/diffs/utils/diff_file';
+import {
+  prepareRawDiffFile,
+  getShortShaFromFile,
+  stats,
+  isNotDiffable,
+} from '~/diffs/utils/diff_file';
 import { diffViewerModes } from '~/ide/constants';
+import mockDiffFile from '../mock_data/diff_file';
 
 function getDiffFiles() {
   const loadFull = 'namespace/project/-/merge_requests/12345/diff_for_path?file_identifier=abc';
@@ -156,6 +162,53 @@ describe('diff_file utilities', () => {
     });
   });
 
+  describe('stats', () => {
+    const noFile = [
+      "returns empty stats when the file isn't provided",
+      undefined,
+      {
+        text: '',
+        percent: 0,
+        changed: 0,
+        classes: '',
+        sign: '',
+        valid: false,
+      },
+    ];
+    const validFile = [
+      'computes the correct stats from a file',
+      mockDiffFile,
+      {
+        changed: 1024,
+        percent: 100,
+        classes: 'cgreen',
+        sign: '+',
+        text: '+1.00 KiB (+100%)',
+        valid: true,
+      },
+    ];
+    const negativeChange = [
+      'computed the correct states from a file with a negative size change',
+      {
+        ...mockDiffFile,
+        new_size: 0,
+        old_size: 1024,
+      },
+      {
+        changed: -1024,
+        percent: -100,
+        classes: 'cred',
+        sign: '',
+        text: '-1.00 KiB (-100%)',
+        valid: true,
+      },
+    ];
+
+    it.each([noFile, validFile, negativeChange])('%s', (_, file, output) => {
+      expect(stats(file)).toEqual(output);
+    });
+  });
+
   describe('isNotDiffable', () => {
     it.each`
       bool     | vw