Cleanup minor UX issues in the performance dashboard

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

@@ -159,12 +159,12 @@
         const xAxis = d3.svg.axis()
           .scale(axisXScale)
-          .ticks(measurements.ticks)
+          .ticks(measurements.xTicks)
           .orient('bottom');
         const yAxis = d3.svg.axis()
           .scale(this.yScale)
-          .ticks(measurements.ticks)
+          .ticks(measurements.yTicks)
           .orient('left');
         d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
@@ -172,8 +172,12 @@
         const width = this.graphWidth;
         d3.select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
           .selectAll('.tick')
-          .each(function createTickLines() {
-            d3.select(this).select('line').attr('x2', width);
+          .each(function createTickLines(d, i) {
+            if (i > 0) {
+              d3.select(this).select('line')
+                .attr('x2', width)
+                .attr('class', 'axis-tick');
+            } // Avoid adding the class to the first tick, to prevent coloring
           }); // This will select all of the ticks once they're rendered
         this.xScale = d3.time.scale()

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

@@ -87,14 +87,14 @@
       </rect>
       <text
         class="text-metric text-metric-bold"
-        x="8"
+        x="16"
         y="35"
         transform="translate(-5, 20)">
         {{formatTime}}
       </text>
       <text
-        class="text-metric-date"
-        x="8"
+        class="text-metric"
+        x="16"
         y="15"
         transform="translate(-5, 20)">
         {{formatDate}}

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

@@ -109,13 +109,13 @@
     </text>
     <rect
       class="rect-axis-text"
-      :x="xPosition + 50"
+      :x="xPosition + 60"
       :y="graphHeight - 80"
-      width="50"
+      width="35"
       height="50">
     </rect>
     <text
-      class="label-axis-text"
+      class="label-axis-text x-label-text"
       :x="xPosition + 60"
       :y="yPosition"
       dy=".35em">
@@ -131,13 +131,13 @@
     <text
       class="text-metric-title"
       x="50"
-      :y="graphHeight - 40">
+      :y="graphHeight - 25">
       {{legendTitle}}
     </text>
     <text
       class="text-metric-usage"
       x="50"
-      :y="graphHeight - 25">
+      :y="graphHeight - 10">
       {{metricUsage}}
     </text>
   </g>

app/assets/javascripts/monitoring/utils/measurements.js

@@ -8,14 +8,14 @@ export default {
     },
     legends: {
       width: 15,
-      height: 30,
+      height: 25,
     },
     backgroundLegend: {
       width: 30,
       height: 50,
     },
     axisLabelLineOffset: -20,
-    legendOffset: 52,
+    legendOffset: 35,
   },
   large: { // This covers both md and lg screen sizes
     margin: {
@@ -26,14 +26,15 @@ export default {
     },
     legends: {
       width: 20,
-      height: 35,
+      height: 30,
     },
     backgroundLegend: {
       width: 30,
       height: 150,
     },
     axisLabelLineOffset: 20,
-    legendOffset: 55,
+    legendOffset: 38,
   },
-  ticks: 3,
+  xTicks: 8,
+  yTicks: 3,
 };

app/assets/stylesheets/pages/environments.scss

@@ -187,8 +187,7 @@
 }
 .text-metric {
-  font-weight: 600;
-  font-size: 14px;
+  font-size: 12px;
 }
 .selected-metric-line {
@@ -232,10 +231,6 @@
   width: 100%;
   padding: 0;
   padding-bottom: 100%;
-
-  .text-metric-bold {
-    font-weight: 600;
-  }
 }
 .prometheus-svg-container > svg {
@@ -250,6 +245,10 @@
     stroke-width: 0;
   }
+  .text-metric-bold {
+    font-weight: 600;
+  }
+
   .label-axis-text,
   .text-metric-usage {
     fill: $black;
@@ -269,6 +268,15 @@
     font-size: 12px;
   }
+  .y-label-text,
+  .x-label-text {
+    fill: $gray-darkest;
+  }
+
+  .axis-tick {
+    stroke: $gray-darker;
+  }
+
   @media (max-width: $screen-sm-max) {
     .label-axis-text,
     .text-metric-usage,

changelogs/unreleased/34653-minor-ux-cleanups-for-performance-dashboard.yml

+---
+title: Cleanup minor UX issues in the performance dashboard
+merge_request:
+author: