diff --git a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6
index bd59124104cfb3e9cbe34cf8e0556d5c4f04d9e1..57e20b2aa4e9cab6c2183899691a9d1555732b1d 100644
--- a/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6
+++ b/app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6
@@ -45,14 +45,7 @@
           </span>
         </div>
         <div class="item-time">
-          <span class="hours" v-if="issue.totalTime.hours">
-            {{ issue.totalTime.hours }}
-            <abbr title="Hours">hr</abbr>
-          </span>
-          <span class="minutes" v-if="issue.totalTime.minutes">
-            {{ issue.totalTime.minutes }}
-            <abbr title="Minutes">mins</abbr>
-          </span>
+          <total-time :time="issue.totalTime"></total-time>
         </div>
       </div>
     `,
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.js.es6 b/app/assets/javascripts/cycle_analytics/components/total_time_component.js.es6
new file mode 100644
index 0000000000000000000000000000000000000000..9d87400dfd8df0cc41befa52365c9f46f208f4bd
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.js.es6
@@ -0,0 +1,29 @@
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.TotalTimeComponent = Vue.extend({
+    props: {
+      time: Object,
+    },
+    template: `
+      <span>
+        <span class="days" v-if="time.days">
+          {{ time.days }}
+          <abbr title="Days">{{ time.days === 1 ? 'day' : 'days' }}</abbr>
+        </span>
+        <span class="hours" v-if="time.hours">
+          {{ time.hours }}
+          <abbr title="Hours">hr</abbr>
+        </span>
+        <span class="mins" v-if="time.mins">
+          {{ time.mins }}
+          <abbr title="Minutes">mins</abbr>
+        </span>
+        <span class="seconds hide" v-if="time.seconds">
+          {{ time.seconds }}
+          <abbr title="Seconds">s</abbr>
+        </span>
+      </span>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
index 8a28db90508b8c7c79a147dbbec5f5491245e5de..05038c3c50076eaa329703764b3426ff8e853511 100644
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -115,4 +115,7 @@ $(() => {
       },
     },
   });
+
+  // Register global components
+  Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent);
 });