1 files changed, 61 insertions, 0 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time.vue b/app/assets/javascripts/cycle_analytics/components/total_time.vue
new file mode 100644
index 00000000000..a5a90a56974
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/total_time.vue
@@ -0,0 +1,61 @@
+<script>
+import { n__, s__ } from '~/locale';
+
+export default {
+  props: {
+    time: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    hasData() {
+      return Object.keys(this.time).length;
+    },
+    calculatedTime() {
+      const {
+        time: { days = null, mins = null, hours = null, seconds = null },
+      } = this;
+
+      if (days) {
+        return {
+          duration: days,
+          units: n__('day', 'days', days),
+        };
+      }
+
+      if (hours) {
+        return {
+          duration: hours,
+          units: n__('Time|hr', 'Time|hrs', hours),
+        };
+      }
+
+      if (mins && !days) {
+        return {
+          duration: mins,
+          units: n__('Time|min', 'Time|mins', mins),
+        };
+      }
+
+      if ((seconds && this.hasData === 1) || seconds === 0) {
+        return {
+          duration: seconds,
+          units: s__('Time|s'),
+        };
+      }
+
+      return { duration: null, units: null };
+    },
+  },
+};
+</script>
+<template>
+  <span class="total-time">
+    <template v-if="hasData">
+      {{ calculatedTime.duration }} <span>{{ calculatedTime.units }}</span>
+    </template>
+    <template v-else> -- </template>
+  </span>
+</template>