1 files changed, 16 insertions, 16 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 04d546fafa0..9bf32d8a2da 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -3,6 +3,7 @@ import { scaleLinear, scaleTime } from 'd3-scale';
 import { axisLeft, axisBottom } from 'd3-axis';
 import { max, extent } from 'd3-array';
 import { select } from 'd3-selection';
+import GraphAxis from './graph/axis.vue';
 import GraphLegend from './graph/legend.vue';
 import GraphFlag from './graph/flag.vue';
 import GraphDeployment from './graph/deployment.vue';
@@ -18,10 +19,11 @@ const d3 = { scaleLinear, scaleTime, axisLeft, axisBottom, max, extent, select }
 
 export default {
   components: {
-    GraphLegend,
+    GraphAxis,
     GraphFlag,
     GraphDeployment,
     GraphPath,
+    GraphLegend,
   },
   mixins: [MonitoringMixin],
   props: {
@@ -138,7 +140,7 @@ export default {
       this.legendTitle = query.label || 'Average';
       this.graphWidth = this.$refs.baseSvg.clientWidth - this.margin.left - this.margin.right;
       this.graphHeight = this.graphHeight - this.margin.top - this.margin.bottom;
-      this.baseGraphHeight = this.graphHeight;
+      this.baseGraphHeight = this.graphHeight - 50;
       this.baseGraphWidth = this.graphWidth;
 
       // pixel offsets inside the svg and outside are not 1:1
@@ -177,14 +179,10 @@ export default {
         this.graphHeightOffset,
       );
 
-      if (!this.showLegend) {
-        this.baseGraphHeight -= 50;
-      } else if (this.timeSeries.length > 3) {
-        this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
-      }
-
-      const axisXScale = d3.scaleTime().range([0, this.graphWidth - 70]);
-      const axisYScale = d3.scaleLinear().range([this.graphHeight - this.graphHeightOffset, 0]);
+      const axisXScale = d3.scaleTime()
+        .range([0, this.graphWidth - 70]);
+      const axisYScale = d3.scaleLinear()
+        .range([this.graphHeight - this.graphHeightOffset, 0]);
 
       const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
       axisXScale.domain(d3.extent(allValues, d => d.time));
@@ -251,17 +249,12 @@ export default {
           class="y-axis"
           transform="translate(70, 20)"
         />
-        <graph-legend
+        <graph-axis
           :graph-width="graphWidth"
           :graph-height="graphHeight"
           :margin="margin"
           :measurements="measurements"
-          :legend-title="legendTitle"
           :y-axis-label="yAxisLabel"
-          :time-series="timeSeries"
-          :unit-of-display="unitOfDisplay"
-          :current-data-index="currentDataIndex"
-          :show-legend-group="showLegend"
         />
         <svg
           class="graph-data"
@@ -306,5 +299,12 @@ export default {
         :deployment-flag-data="deploymentFlagData"
       />
     </div>
+    <graph-legend
+      v-if="showLegend"
+      :legend-title="legendTitle"
+      :time-series="timeSeries"
+      :current-data-index="currentDataIndex"
+      :unit-of-display="unitOfDisplay"
+    />
   </div>
 </template>