1 files changed, 72 insertions, 0 deletions
diff --git a/app/assets/javascripts/branches/components/divergence_graph.vue b/app/assets/javascripts/branches/components/divergence_graph.vue
new file mode 100644
index 00000000000..36fff370ea1
--- /dev/null
+++ b/app/assets/javascripts/branches/components/divergence_graph.vue
@@ -0,0 +1,72 @@
+<script>
+import { sprintf, __ } from '~/locale';
+import GraphBar from './graph_bar.vue';
+import { MAX_COMMIT_COUNT } from '../constants';
+
+export default {
+  components: {
+    GraphBar,
+  },
+  props: {
+    defaultBranch: {
+      type: String,
+      required: true,
+    },
+    distance: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+    aheadCount: {
+      type: Number,
+      required: true,
+    },
+    behindCount: {
+      type: Number,
+      required: true,
+    },
+    maxCommits: {
+      type: Number,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      if (this.distance) {
+        return sprintf(
+          __('More than %{number_commits_distance} commits different with %{default_branch}'),
+          {
+            number_commits_distance:
+              this.distance >= MAX_COMMIT_COUNT ? `${MAX_COMMIT_COUNT - 1}+` : this.distance,
+            default_branch: this.defaultBranch,
+          },
+        );
+      }
+
+      return sprintf(
+        __(
+          '%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead',
+        ),
+        {
+          number_commits_behind: this.behindCount,
+          number_commits_ahead: this.aheadCount,
+          default_branch: this.defaultBranch,
+        },
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <div :title="title" class="divergence-graph px-2 d-none d-md-block">
+    <template v-if="distance">
+      <graph-bar :count="distance" :max-commits="maxCommits" position="full" />
+    </template>
+    <template v-else>
+      <graph-bar :count="behindCount" :max-commits="maxCommits" position="left" />
+      <div class="graph-separator pull-left mt-1"></div>
+      <graph-bar :count="aheadCount" :max-commits="maxCommits" position="right" />
+    </template>
+  </div>
+</template>