hide legend without hiding the axis labels

2 files changed, 42 insertions, 35 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 2aab8e0afe7..30236d51d30 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/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"
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index c6e8d726ffc..bdd00a61d85 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/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,39 +171,41 @@
     >
       Time
     </text>
-    <g
-      class="legend-group"
-      v-for="(series, index) in timeSeries"
-      :key="index"
-      :transform="translateLegendGroup(index)"
-    >
-      <line
-        :stroke="series.lineColor"
-        :stroke-width="measurements.legends.height"
-        :stroke-dasharray="strokeDashArray(series.lineStyle)"
-        :x1="measurements.legends.offsetX"
-        :x2="measurements.legends.offsetX + measurements.legends.width"
-        :y1="graphHeight - measurements.legends.offsetY"
-        :y2="graphHeight - measurements.legends.offsetY"
-      />
-      <text
-        v-if="timeSeries.length > 1"
-        class="legend-metric-title"
-        ref="legendTitleSvg"
-        x="38"
-        :y="graphHeight - 30"
-      >
-        {{ createSeriesString(index, series) }}
-      </text>
-      <text
-        v-else
-        class="legend-metric-title"
-        ref="legendTitleSvg"
-        x="38"
-        :y="graphHeight - 30"
+    <template v-if="showLegendGroup">
+      <g
+        class="legend-group"
+        v-for="(series, index) in timeSeries"
+        :key="index"
+        :transform="translateLegendGroup(index)"
       >
-        {{ legendTitle }} {{ formatMetricUsage(series) }}
-      </text>
-    </g>
+        <line
+          :stroke="series.lineColor"
+          :stroke-width="measurements.legends.height"
+          :stroke-dasharray="strokeDashArray(series.lineStyle)"
+          :x1="measurements.legends.offsetX"
+          :x2="measurements.legends.offsetX + measurements.legends.width"
+          :y1="graphHeight - measurements.legends.offsetY"
+          :y2="graphHeight - measurements.legends.offsetY"
+        />
+        <text
+          v-if="timeSeries.length > 1"
+          class="legend-metric-title"
+          ref="legendTitleSvg"
+          x="38"
+          :y="graphHeight - 30"
+        >
+          {{ createSeriesString(index, series) }}
+        </text>
+        <text
+          v-else
+          class="legend-metric-title"
+          ref="legendTitleSvg"
+          x="38"
+          :y="graphHeight - 30"
+        >
+          {{ legendTitle }} {{ formatMetricUsage(series) }}
+        </text>
+      </g>
+    </template>
   </g>
 </template>