Legend text is now bolded also the Y legend text has a transparent background

to help differentiate legends

app/assets/javascripts/monitoring/prometheus_graph.js

@@ -129,7 +129,7 @@ class PrometheusGraph {
       .attr('class', 'prometheus-graph-overlay')
       .attr('width', this.width)
       .attr('height', this.height)
-      .on('mousemove', this.handleMouseOverGraph.bind(this, chart, prometheusGraphContainer));
+      .on('mousemove', this.handleMouseOverGraph.bind(this, prometheusGraphContainer));
   }
 
   // The legends from the metric
@@ -141,9 +141,9 @@ class PrometheusGraph {
         .attr('stroke', '#000000')
         .attr('stroke-width', '1')
         .attr({
-          x1: 0,
+          x1: 10,
           y1: this.originalHeight - 80,
-          x2: this.originalWidth - this.margin.right,
+          x2: (this.originalWidth - this.margin.right) + 10,
           y2: this.originalHeight - 80,
         });
 
@@ -152,11 +152,17 @@ class PrometheusGraph {
           .attr('stroke', '#000000')
           .attr('stroke-width', '1')
           .attr({
-            x1: 0,
+            x1: 10,
             y1: 0,
-            x2: 0,
+            x2: 10,
             y2: this.originalHeight - 80,
           });
+    axisLabelContainer.append('rect')
+          .attr('class', 'rect-axis-text')
+          .attr('x', 0)
+          .attr('y', 50)
+          .attr('width', 30)
+          .attr('height', 150);
 
     axisLabelContainer.append('text')
           .attr('class', 'label-axis-text')
@@ -189,7 +195,7 @@ class PrometheusGraph {
           .attr('height', 35);
 
     axisLabelContainer.append('text')
-          .attr('class', 'label-axis-text')
+          .attr('class', 'text-metric-title')
           .attr('x', this.originalWidth - 140)
           .attr('y', (this.originalHeight / 2) - 50)
           .text('Average');
@@ -200,7 +206,7 @@ class PrometheusGraph {
             .attr('y', (this.originalHeight / 2) - 25);
   }
 
-  handleMouseOverGraph(chart, prometheusGraphContainer) {
+  handleMouseOverGraph(prometheusGraphContainer) {
     const rectOverlay = document.querySelector(`${prometheusGraphContainer} .prometheus-graph-overlay`);
     const currentXCoordinate = d3.mouse(rectOverlay)[0];
 

app/assets/stylesheets/pages/environments.scss

@@ -159,11 +159,19 @@
   text {
     fill: $stat-graph-axis-fill;
   }
+  .label-axis-text,
+  .text-metric-usage {
+    fill: $black;
+    font-weight: 500;
+  }
+  .legend-axis-text{
+    fill: $black;
+  }
 }
 
 .x-axis path,
 .y-axis path,
-.label-x-axis-line,
+.x-axis-line,
 .label-y-axis-line {
   fill: none;
   stroke-width: 1;