1 files changed, 51 insertions, 0 deletions
diff --git a/app/assets/javascripts/analytics/cycle_analytics/components/metric_tile.vue b/app/assets/javascripts/analytics/cycle_analytics/components/metric_tile.vue
new file mode 100644
index 00000000000..a5c20b237b3
--- /dev/null
+++ b/app/assets/javascripts/analytics/cycle_analytics/components/metric_tile.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { redirectTo } from '~/lib/utils/url_utility';
+import MetricPopover from '~/analytics/shared/components/metric_popover.vue';
+
+export default {
+  name: 'MetricTile',
+  components: {
+    GlSingleStat,
+    MetricPopover,
+  },
+  props: {
+    metric: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    decimalPlaces() {
+      const parsedFloat = parseFloat(this.metric.value);
+      return Number.isNaN(parsedFloat) || Number.isInteger(parsedFloat) ? 0 : 1;
+    },
+    hasLinks() {
+      return this.metric.links?.length && this.metric.links[0].url;
+    },
+  },
+  methods: {
+    clickHandler({ links }) {
+      if (this.hasLinks) {
+        redirectTo(links[0].url);
+      }
+    },
+  },
+};
+</script>
+<template>
+  <div v-bind="$attrs">
+    <gl-single-stat
+      :id="metric.identifier"
+      :value="`${metric.value}`"
+      :title="metric.label"
+      :unit="metric.unit || ''"
+      :should-animate="true"
+      :animation-decimal-places="decimalPlaces"
+      :class="{ 'gl-hover-cursor-pointer': hasLinks }"
+      tabindex="0"
+      @click="clickHandler(metric)"
+    />
+    <metric-popover :metric="metric" :target="metric.identifier" />
+  </div>
+</template>