make legend X-offset into a constant

app/assets/javascripts/monitoring/components/graph/legend.vue

@@ -173,10 +173,10 @@
         :stroke="series.lineColor"
         :stroke-width="measurements.legends.height"
         :stroke-dasharray="strokeDashArray(series.lineStyle)"
-        x1="20"
-        :x2="20 + measurements.legends.width"
-        :y1="graphHeight - measurements.legendOffset"
-        :y2="graphHeight - measurements.legendOffset">
+        :x1="measurements.legends.offsetX"
+        :x2="measurements.legends.offsetX + measurements.legends.width"
+        :y1="graphHeight - measurements.legends.offsetY"
+        :y2="graphHeight - measurements.legends.offsetY">
       </line>
       <text
         v-if="timeSeries.length > 1"

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

@@ -9,13 +9,14 @@ export default {
     legends: {
       width: 15,
       height: 3,
+      offsetX: 20,
+      offsetY: 32,
     },
     backgroundLegend: {
       width: 30,
       height: 50,
     },
     axisLabelLineOffset: -20,
-    legendOffset: 32,
   },
   large: { // This covers both md and lg screen sizes
     margin: {
@@ -27,13 +28,14 @@ export default {
     legends: {
       width: 15,
       height: 3,
+      offsetX: 20,
+      offsetY: 34,
     },
     backgroundLegend: {
       width: 30,
       height: 150,
     },
     axisLabelLineOffset: 20,
-    legendOffset: 34,
   },
   xTicks: 8,
   yTicks: 3,