Added legends for each of the time series

2 files changed, 52 insertions, 34 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index c4d4647d240..a98e3d06c18 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -7,10 +7,6 @@
         type: Number,
         required: true,
       },
-      currentYCoordinate: {
-        type: Number,
-        required: true,
-      },
       currentFlagPosition: {
         type: Number,
         required: true,
@@ -60,16 +56,7 @@
       :y2="calculatedHeight"
       transform="translate(-5, 20)">
     </line>
-    <circle
-      class="circle-metric"
-      :fill="circleColorRgb"
-      stroke="#000"
-      :cx="currentXCoordinate"
-      :cy="currentYCoordinate"
-      r="5"
-      transform="translate(-5, 20)">
-    </circle>
-    <svg
+    <svg 
       class="rect-text-metric"
       :x="currentFlagPosition"
       y="0">
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index d08f9cbffd4..088612cadd3 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -1,4 +1,6 @@
 <script>
+  import { formatRelevantDigits } from '../../lib/utils/number_utils';
+
   export default {
     props: {
       graphWidth: {
@@ -29,10 +31,18 @@
         type: String,
         required: true,
       },
-      metricUsage: {
+      timeSeries: {
+        type: Array,
+        required: true,
+      },
+      unitOfDisplay: {
         type: String,
         required: true,
       },
+      currentDataIndex: {
+        type: Number,
+        required: true,
+      },
     },
     data() {
       return {
@@ -63,6 +73,16 @@
       yPosition() {
         return ((this.graphHeight - this.margin.top) + this.measurements.axisLabelLineOffset) || 0;
       },
+
+    },
+    methods: {
+      translateLegendGroup(index) {
+        return `translate(${120 * index}, 0)`;
+      },
+
+      formatMetricUsage(series) {
+        return `${formatRelevantDigits(series.values[this.currentDataIndex].value)} ${this.unitOfDisplay}`;
+      },
     },
     mounted() {
       this.$nextTick(() => {
@@ -121,24 +141,35 @@
       dy=".35em">
       Time
     </text>
-    <rect
-      :fill="areaColorRgb"
-      :width="measurements.legends.width"
-      :height="measurements.legends.height"
-      x="20"
-      :y="graphHeight - measurements.legendOffset">
-    </rect>
-    <text
-      class="text-metric-title"
-      x="50"
-      :y="graphHeight - 25">
-      {{legendTitle}}
-    </text>
-    <text
-      class="text-metric-usage"
-      x="50"
-      :y="graphHeight - 10">
-      {{metricUsage}}
-    </text>
+    <g class="legend-group"
+      v-for="(series, index) in timeSeries"
+      :key="index"
+      :transform="translateLegendGroup(index)">
+      <rect
+        :fill="areaColorRgb"
+        :width="measurements.legends.width"
+        :height="measurements.legends.height"
+        x="20"
+        :y="graphHeight - measurements.legendOffset">
+      </rect>
+      <text
+        class="text-metric-title"
+        x="45"
+        :y="graphHeight - 30">
+        {{legendTitle}}
+      </text>
+      <text
+        class="text-metric-title"
+        x="45"
+        :y="graphHeight - 20">
+        Series {{index + 1}}
+      </text>
+      <text
+        class="text-metric-usage"
+        x="45"
+        :y="graphHeight - 10">
+        {{formatMetricUsage(series)}}
+      </text>
+    </g>
   </g>
 </template>