Updated all charts with appropriate fonts, labels, and ticks

Author: Umius-Brian

app/charts/docker-stats-chart.jsx

@@ -76,6 +76,7 @@ const DockerStatsChart = (props) => {
         </span>
       )
     }
+    
     console.log('dockerStatsArr (docker stats chart):', dockerStatsArr);
     return (
       <div id="docker-stats-chart">

app/charts/latency-chart.jsx

@@ -26,7 +26,8 @@ const LatencyChart = (props) =>  {
           y: yAxis,
           mode: 'lines',
           rangemode: 'nonnegative',
-          name: `${props.service} CPU Latency`,
+          // name: `${props.service} CPU Latency`,
+          name: 'CPU Latency',
           marker: {
               color: '#daaa17',
           },
@@ -43,9 +44,10 @@ const LatencyChart = (props) =>  {
           plot_bgcolor: 'white',
           showlegend: true,
           legend: {
-              orientation: 'h',
-              xanchor: 'center',
-              x: .5
+            orientation: 'h',
+            xanchor: 'center',
+            x: 0.5,
+            y: 5,
           },
           xaxis: {
             tickmode: 'linear',

app/stylesheets/graphs.css

@@ -3,6 +3,7 @@
   grid-template-columns: auto auto auto;
   grid-gap: 30px;  /* align-items: center; */
   margin: auto;
+  padding-bottom: 25px;
   border-radius: 2px;
   box-shadow: 2px 2px 2px rgba(216, 210, 247, .5);
 }

app/stylesheets/monitoring.css

@@ -14,6 +14,6 @@
 #microserviceHealthTitle{
   color: black;
   font-size: 38px;
-  margin-top: 0px;
+  margin-top: 20px;
   font-family: 'Quicksand', sans-serif;
 }