Added vertical spacing when there's multiple legends

4 files changed, 40 insertions, 21 deletions

diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 049240963fe..0488842a205 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -36,6 +36,8 @@
 
     data() {
       return {
+        baseGraphHeight: 450,
+        baseGraphWidth: 600,
         graphHeight: 450,
         graphWidth: 600,
         graphHeightOffset: 120,
@@ -54,7 +56,6 @@
         currentDataIndex: 0,
         currentXCoordinate: 0,
         currentFlagPosition: 0,
-        metricUsage: '',
         showFlag: false,
         showDeployInfo: true,
         timeSeries: [],
@@ -76,12 +77,12 @@
 
     computed: {
       outterViewBox() {
-        return `0 0 ${this.graphWidth} ${this.graphHeight}`;
+        return `0 0 ${this.baseGraphWidth} ${this.baseGraphHeight}`;
       },
 
       innerViewBox() {
-        if ((this.graphWidth - 150) > 0) {
-          return `0 0 ${this.graphWidth - 150} ${this.graphHeight}`;
+        if ((this.baseGraphWidth - 150) > 0) {
+          return `0 0 ${this.baseGraphWidth - 150} ${this.baseGraphHeight}`;
         }
         return '0 0 0 0';
       },
@@ -92,7 +93,7 @@
 
       paddingBottomRootSvg() {
         return {
-          paddingBottom: `${(Math.ceil(this.graphHeight * 100) / this.graphWidth) || 0}%`,
+          paddingBottom: `${(Math.ceil(this.baseGraphHeight * 100) / this.baseGraphWidth) || 0}%`,
         };
       },
     },
@@ -113,6 +114,8 @@
         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.baseGraphWidth = this.graphWidth;
         this.renderAxesPaths();
         this.formatDeployments();
       },
@@ -178,6 +181,10 @@
           };
         });
 
+        if (this.timeSeries.length > 4) {
+          this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 4) * 20;
+        }
+
         const axisXScale = d3.time.scale()
           .range([0, this.graphWidth]);
         const axisYScale = d3.scale.linear()
diff --git a/app/assets/javascripts/monitoring/components/graph/legend.vue b/app/assets/javascripts/monitoring/components/graph/legend.vue
index 088612cadd3..1bbd1631701 100644
--- a/app/assets/javascripts/monitoring/components/graph/legend.vue
+++ b/app/assets/javascripts/monitoring/components/graph/legend.vue
@@ -48,6 +48,8 @@
       return {
         yLabelWidth: 0,
         yLabelHeight: 0,
+        seriesXPosition: 0,
+        metricUsageXPosition: 0,
       };
     },
     computed: {
@@ -77,7 +79,7 @@
     },
     methods: {
       translateLegendGroup(index) {
-        return `translate(${120 * index}, 0)`;
+        return `translate(0, ${12 * (index)})`;
       },
 
       formatMetricUsage(series) {
@@ -87,6 +89,8 @@
     mounted() {
       this.$nextTick(() => {
         const bbox = this.$refs.ylabel.getBBox();
+        this.seriesXPosition = this.$refs.legendTitleSvg[0].getBBox().width;
+        this.metricUsageXPosition = this.$refs.seriesTitleSvg[0].getBBox().width;
         this.yLabelWidth = bbox.width + 10; // Added some padding
         this.yLabelHeight = bbox.height + 5;
       });
@@ -153,21 +157,23 @@
         :y="graphHeight - measurements.legendOffset">
       </rect>
       <text
-        class="text-metric-title"
-        x="45"
+        class="legend-metric-title"
+        ref="legendTitleSvg"
+        x="38"
         :y="graphHeight - 30">
         {{legendTitle}}
       </text>
       <text
-        class="text-metric-title"
-        x="45"
-        :y="graphHeight - 20">
+        class="legend-metric-title"
+        ref="seriesTitleSvg"
+        :x="seriesXPosition + 40"
+        :y="graphHeight - 30">
         Series {{index + 1}}
       </text>
       <text
         class="text-metric-usage"
-        x="45"
-        :y="graphHeight - 10">
+        :x="metricUsageXPosition + seriesXPosition + 45"
+        :y="graphHeight - 30">
         {{formatMetricUsage(series)}}
       </text>
     </g>
diff --git a/app/assets/javascripts/monitoring/utils/measurements.js b/app/assets/javascripts/monitoring/utils/measurements.js
index 62cd19c86e1..ee3c45efacc 100644
--- a/app/assets/javascripts/monitoring/utils/measurements.js
+++ b/app/assets/javascripts/monitoring/utils/measurements.js
@@ -7,15 +7,15 @@ export default {
       left: 40,
     },
     legends: {
-      width: 15,
-      height: 25,
+      width: 10,
+      height: 3,
     },
     backgroundLegend: {
       width: 30,
       height: 50,
     },
     axisLabelLineOffset: -20,
-    legendOffset: 35,
+    legendOffset: 33,
   },
   large: { // This covers both md and lg screen sizes
     margin: {
@@ -25,15 +25,15 @@ export default {
       left: 80,
     },
     legends: {
-      width: 20,
-      height: 30,
+      width: 15,
+      height: 3,
     },
     backgroundLegend: {
       width: 30,
       height: 150,
     },
     axisLabelLineOffset: 20,
-    legendOffset: 38,
+    legendOffset: 36,
   },
   xTicks: 8,
   yTicks: 3,
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index a8d2ae0af28..3c96cc4930b 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -249,8 +249,14 @@
     font-weight: $gl-font-weight-bold;
   }
 
-  .label-axis-text,
-  .text-metric-usage {
+  .label-axis-text {
+    fill: $black;
+    font-weight: $gl-font-weight-normal;
+    font-size: 10px;
+  }
+
+  .text-metric-usage,
+  .legend-metric-title{
     fill: $black;
     font-weight: $gl-font-weight-normal;
     font-size: 12px;