hide legend without hiding the axis labels

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

@@ -188,7 +188,7 @@
         );
 
         if (!this.showLegend) {
-          this.baseGraphHeight -= 60;
+          this.baseGraphHeight -= 50;
         } else if (this.timeSeries.length > 3) {
           this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
         }
@@ -253,7 +253,6 @@
           transform="translate(70, 20)"
         />
         <graph-legend
-          v-if="showLegend"
           :graph-width="graphWidth"
           :graph-height="graphHeight"
           :margin="margin"
@@ -263,6 +262,7 @@
           :time-series="timeSeries"
           :unit-of-display="unitOfDisplay"
           :current-data-index="currentDataIndex"
+          :show-legend-group="showLegend"
         />
         <svg
           class="graph-data"

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

@@ -39,6 +39,11 @@
         type: Number,
         required: true,
       },
+      showLegendGroup: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
     },
     data() {
       return {
@@ -166,6 +171,7 @@
     >
       Time
     </text>
+    <template v-if="showLegendGroup">
       <g
         class="legend-group"
         v-for="(series, index) in timeSeries"
@@ -200,5 +206,6 @@
           {{ legendTitle }} {{ formatMetricUsage(series) }}
         </text>
       </g>
+    </template>
   </g>
 </template>