diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6
index c41c57c1dcd..f161eb23795 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6
@@ -97,7 +97,7 @@ $(() => {
         }
 
         this.isLoadingStage = true;
-        cycleAnalyticsStore.setStageEvents([]);
+        cycleAnalyticsStore.setStageEvents([], stage);
         cycleAnalyticsStore.setActiveStage(stage);
 
         cycleAnalyticsService
@@ -107,7 +107,7 @@ $(() => {
           })
           .done((response) => {
             this.isEmptyStage = !response.events.length;
-            cycleAnalyticsStore.setStageEvents(response.events);
+            cycleAnalyticsStore.setStageEvents(response.events, stage);
           })
           .error(() => {
             this.isEmptyStage = true;
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6
index be732971c7f..3efeb141008 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js.es6
@@ -1,4 +1,8 @@
 /* eslint-disable no-param-reassign */
+
+require('../lib/utils/text_utility');
+const DEFAULT_EVENT_OBJECTS = require('./default_event_objects');
+
 ((global) => {
   global.cycleAnalytics = global.cycleAnalytics || {};
 
@@ -34,11 +38,12 @@
       });
 
       newData.stages.forEach((item) => {
-        const stageName = item.title.toLowerCase();
+        const stageSlug = gl.text.dasherize(item.title.toLowerCase());
         item.active = false;
-        item.isUserAllowed = data.permissions[stageName];
-        item.emptyStageText = EMPTY_STAGE_TEXTS[stageName];
-        item.component = `stage-${stageName}-component`;
+        item.isUserAllowed = data.permissions[stageSlug];
+        item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug];
+        item.component = `stage-${stageSlug}-component`;
+        item.slug = stageSlug;
       });
       newData.analytics = data;
       return newData;
@@ -58,31 +63,33 @@
       this.deactivateAllStages();
       stage.active = true;
     },
-    setStageEvents(events) {
-      this.state.events = this.decorateEvents(events);
+    setStageEvents(events, stage) {
+      this.state.events = this.decorateEvents(events, stage);
     },
-    decorateEvents(events) {
+    decorateEvents(events, stage) {
       const newEvents = [];
 
       events.forEach((item) => {
         if (!item) return;
 
-        item.totalTime = item.total_time;
-        item.author.webUrl = item.author.web_url;
-        item.author.avatarUrl = item.author.avatar_url;
+        const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item);
 
-        if (item.created_at) item.createdAt = item.created_at;
-        if (item.short_sha) item.shortSha = item.short_sha;
-        if (item.commit_url) item.commitUrl = item.commit_url;
+        eventItem.totalTime = eventItem.total_time;
+        eventItem.author.webUrl = eventItem.author.web_url;
+        eventItem.author.avatarUrl = eventItem.author.avatar_url;
 
-        delete item.author.web_url;
-        delete item.author.avatar_url;
-        delete item.total_time;
-        delete item.created_at;
-        delete item.short_sha;
-        delete item.commit_url;
+        if (eventItem.created_at) eventItem.createdAt = eventItem.created_at;
+        if (eventItem.short_sha) eventItem.shortSha = eventItem.short_sha;
+        if (eventItem.commit_url) eventItem.commitUrl = eventItem.commit_url;
 
-        newEvents.push(item);
+        delete eventItem.author.web_url;
+        delete eventItem.author.avatar_url;
+        delete eventItem.total_time;
+        delete eventItem.created_at;
+        delete eventItem.short_sha;
+        delete eventItem.commit_url;
+
+        newEvents.push(eventItem);
       });
 
       return newEvents;
diff --git a/app/assets/javascripts/cycle_analytics/default_event_objects.js.es6 b/app/assets/javascripts/cycle_analytics/default_event_objects.js.es6
new file mode 100644
index 00000000000..cfaf9835bf8
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/default_event_objects.js.es6
@@ -0,0 +1,98 @@
+module.exports = {
+  issue: {
+    created_at: '',
+    url: '',
+    iid: '',
+    title: '',
+    total_time: {},
+    author: {
+      avatar_url: '',
+      id: '',
+      name: '',
+      web_url: '',
+    },
+  },
+  plan: {
+    title: '',
+    commit_url: '',
+    short_sha: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+  },
+  code: {
+    title: '',
+    iid: '',
+    created_at: '',
+    url: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+  },
+  test: {
+    name: '',
+    id: '',
+    date: '',
+    url: '',
+    short_sha: '',
+    commit_url: '',
+    total_time: {},
+    branch: {
+      name: '',
+      url: '',
+    },
+  },
+  review: {
+    title: '',
+    iid: '',
+    created_at: '',
+    url: '',
+    state: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+  },
+  staging: {
+    id: '',
+    short_sha: '',
+    date: '',
+    url: '',
+    commit_url: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+    branch: {
+      name: '',
+      url: '',
+    },
+  },
+  production: {
+    title: '',
+    created_at: '',
+    url: '',
+    iid: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+  },
+};
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index d9370db0cf2..326b7cb7f57 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -1,5 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, quotes, one-var, one-var-declaration-per-line, operator-assignment, no-else-return, prefer-template, prefer-arrow-callback, no-empty, max-len, consistent-return, no-unused-vars, no-return-assign, max-len */
 
+require('vendor/latinise');
+
 (function() {
   (function(w) {
     var base;
@@ -164,8 +166,14 @@
     gl.text.pluralize = function(str, count) {
       return str + (count > 1 || count === 0 ? 's' : '');
     };
-    return gl.text.truncate = function(string, maxLength) {
+    gl.text.truncate = function(string, maxLength) {
       return string.substr(0, (maxLength - 3)) + '...';
     };
+    gl.text.dasherize = function(str) {
+      return str.replace(/[_\s]+/g, '-');
+    };
+    gl.text.slugify = function(str) {
+      return str.trim().toLowerCase().latinise();
+    };
   })(window);
 }).call(this);
diff --git a/app/assets/javascripts/wikis.js.es6 b/app/assets/javascripts/wikis.js.es6
index ef99b2e92f0..75fd1394a03 100644
--- a/app/assets/javascripts/wikis.js.es6
+++ b/app/assets/javascripts/wikis.js.es6
@@ -1,14 +1,10 @@
 /* eslint-disable no-param-reassign */
 /* global Breakpoints */
 
-require('vendor/latinise');
 require('./breakpoints');
 require('vendor/jquery.nicescroll');
 
 ((global) => {
-  const dasherize = str => str.replace(/[_\s]+/g, '-');
-  const slugify = str => dasherize(str.trim().toLowerCase().latinise());
-
   class Wikis {
     constructor() {
       this.bp = Breakpoints.get();
@@ -34,7 +30,7 @@ require('vendor/jquery.nicescroll');
       if (!this.newWikiForm) return;
 
       const slugInput = this.newWikiForm.querySelector('#new_wiki_path');
-      const slug = slugify(slugInput.value);
+      const slug = gl.text.slugify(slugInput.value);
 
       if (slug.length > 0) {
         const wikisPath = slugInput.getAttribute('data-wikis-path');
diff --git a/app/serializers/analytics_stage_entity.rb b/app/serializers/analytics_stage_entity.rb
index a559d0850c4..69bf693de8d 100644
--- a/app/serializers/analytics_stage_entity.rb
+++ b/app/serializers/analytics_stage_entity.rb
@@ -2,6 +2,7 @@ class AnalyticsStageEntity < Grape::Entity
   include EntityDateHelper
 
   expose :title
+  expose :legend
   expose :description
 
   expose :median, as: :value do |stage|
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 5405ff16bea..ad904a8708e 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -44,7 +44,7 @@
                       Last 90 days
     .stage-panel-container
       .panel.panel-default.stage-panel
-        .panel-heading
+        .panel-heading 
           %nav.col-headers
             %ul
               %li.stage-header
diff --git a/lib/gitlab/cycle_analytics/code_stage.rb b/lib/gitlab/cycle_analytics/code_stage.rb
index d1bc2055ba8..1e52b6614a1 100644
--- a/lib/gitlab/cycle_analytics/code_stage.rb
+++ b/lib/gitlab/cycle_analytics/code_stage.rb
@@ -13,6 +13,10 @@ module Gitlab
         :code
       end
 
+      def legend
+        "Related Merge Requests"
+      end
+
       def description
         "Time until first merge request"
       end
diff --git a/lib/gitlab/cycle_analytics/issue_stage.rb b/lib/gitlab/cycle_analytics/issue_stage.rb
index d2068fbc38f..213994988a5 100644
--- a/lib/gitlab/cycle_analytics/issue_stage.rb
+++ b/lib/gitlab/cycle_analytics/issue_stage.rb
@@ -14,6 +14,10 @@ module Gitlab
         :issue
       end
 
+      def legend
+        "Related Issues"
+      end
+
       def description
         "Time before an issue gets scheduled"
       end
diff --git a/lib/gitlab/cycle_analytics/plan_stage.rb b/lib/gitlab/cycle_analytics/plan_stage.rb
index 3b4dfc6a30e..45d51d30ccc 100644
--- a/lib/gitlab/cycle_analytics/plan_stage.rb
+++ b/lib/gitlab/cycle_analytics/plan_stage.rb
@@ -14,6 +14,10 @@ module Gitlab
         :plan
       end
 
+      def legend
+        "Related Commits"
+      end
+
       def description
         "Time before an issue starts implementation"
       end
diff --git a/lib/gitlab/cycle_analytics/production_stage.rb b/lib/gitlab/cycle_analytics/production_stage.rb
index 2a6bcc80116..9f387a02945 100644
--- a/lib/gitlab/cycle_analytics/production_stage.rb
+++ b/lib/gitlab/cycle_analytics/production_stage.rb
@@ -15,6 +15,10 @@ module Gitlab
         :production
       end
 
+      def legend
+        "Related Issues"
+      end
+
       def description
         "From issue creation until deploy to production"
       end
diff --git a/lib/gitlab/cycle_analytics/review_stage.rb b/lib/gitlab/cycle_analytics/review_stage.rb
index fbaa3010d81..4744be834de 100644
--- a/lib/gitlab/cycle_analytics/review_stage.rb
+++ b/lib/gitlab/cycle_analytics/review_stage.rb
@@ -13,6 +13,10 @@ module Gitlab
         :review
       end
 
+      def legend
+        "Relative Merged Requests"
+      end
+
       def description
         "Time between merge request creation and merge/close"
       end
diff --git a/lib/gitlab/cycle_analytics/staging_stage.rb b/lib/gitlab/cycle_analytics/staging_stage.rb
index 945909a4d62..3cdbe04fbaf 100644
--- a/lib/gitlab/cycle_analytics/staging_stage.rb
+++ b/lib/gitlab/cycle_analytics/staging_stage.rb
@@ -14,6 +14,10 @@ module Gitlab
         :staging
       end
 
+      def legend
+        "Relative Deployed Builds"
+      end
+
       def description
         "From merge request merge until deploy to production"
       end
diff --git a/lib/gitlab/cycle_analytics/test_stage.rb b/lib/gitlab/cycle_analytics/test_stage.rb
index 0079d56e0e4..e96943833bc 100644
--- a/lib/gitlab/cycle_analytics/test_stage.rb
+++ b/lib/gitlab/cycle_analytics/test_stage.rb
@@ -13,6 +13,10 @@ module Gitlab
         :test
       end
 
+      def legend
+        "Relative Builds Trigger by Commits"
+      end
+
       def description
         "Total test time for all commits/merges"
       end