Added legends for each of the time series

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,15 +56,6 @@
       :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 
       class="rect-text-metric"
       :x="currentFlagPosition"

app/assets/javascripts/monitoring/components/graph/legend.vue

 <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,6 +141,10 @@
       dy=".35em">
       Time
     </text>
+    <g class="legend-group"
+      v-for="(series, index) in timeSeries"
+      :key="index"
+      :transform="translateLegendGroup(index)">
       <rect
         :fill="areaColorRgb"
         :width="measurements.legends.width"
@@ -130,15 +154,22 @@
       </rect>
       <text
         class="text-metric-title"
-      x="50"
-      :y="graphHeight - 25">
+        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="50"
+        x="45"
         :y="graphHeight - 10">
-      {{metricUsage}}
+        {{formatMetricUsage(series)}}
       </text>
     </g>
+  </g>
 </template>