Change fonts and add labels

Author: Umius-Brian

app/charts/docker-stats-chart.jsx

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

app/charts/latency-chart.jsx

@@ -28,7 +28,7 @@ const LatencyChart = (props) =>  {
           rangemode: 'nonnegative',
           name: `${props.service} CPU Latency`,
           marker: {
-              color: 'rgb(218, 170, 23',
+              color: '#daaa17',
           },
         }]}
         layout = {{

app/charts/memory-chart.jsx

@@ -36,7 +36,7 @@ const MemoryChart = (props) => {
         data = {[
           {
             type: 'scatter',
-            fill: 'tozeroy',
+            fill: 'tonexty',
             fillcolor: 'rgb(0, 237, 160)',
             mode: 'none',
             x: {autorange: true},
@@ -46,8 +46,8 @@ const MemoryChart = (props) => {
           },
           {
             type: 'scatter',
-            fill: 'tozeroy',
-            fillcolor: 'rgba(0, 237, 160, .5)',
+            fill: 'tonexty',
+            fillcolor: 'rgba(0, 237, 160, .4)',
             mode: 'none',
             x: {autorange: true},
             y: used,
@@ -56,8 +56,8 @@ const MemoryChart = (props) => {
           },
           {
             type: 'scatter',
-            fill: 'tozeroy',
-            fillcolor: 'rgba(74, 78, 238, .7)',
+            fill: 'tonexty',
+            fillcolor: 'rgba(74, 78, 238, .5)',
             mode: 'none',
             x: {autorange: true},
             y: active,

app/charts/request-type-chart.jsx

@@ -29,7 +29,7 @@ const RequestTypesChart = (props) => {
           values: Object.values(requestObj),
           labels: ['DELETE', 'GET', 'PATCH', 'POST', 'PUSH', 'PUT'],
           type: 'pie',
-          name: 'Request Types',
+          textposition: 'inside',
           marker: {
             'colors': [
               '#fa1a58',
@@ -42,11 +42,16 @@ const RequestTypesChart = (props) => {
           },
         }]}
         layout = {{
+          title: {
+            text: 'Request Types',
+            font: {size: 25}
+          },
           height: 400,
           width: 400,
           font: {
             color: 'black',
-            size: 15
+            size: 15,
+            family: 'Nunito, san serif'
           },
           displaylogo: false,
           paper_bgcolor: 'white',

app/charts/response-code-chart.jsx

@@ -62,16 +62,17 @@ const ResponseCodeChart = (props) => {
             labels: [
               'Informational 1xx',
               'Successful 2xx',
-              'Redirection 3xx',
+              'Redirectional 3xx',
               'Client Error 4xx',
               'Server Error 5xx',
             ],
             type: 'pie',
+            textposition: 'inside',
             domain: { y: [0, 2] },
             marker: {
               colors: [
                 '#fa1a58',
-                '#f3f5fa',
+                '#f3f5fe',
                 '#00eda0',
                 '#00fff2',
                 '#73605b',
@@ -80,19 +81,23 @@ const ResponseCodeChart = (props) => {
           },
         ]}
         layout={{
+          title: {
+            text: 'Response Status Codes',
+            font: {size: 25}
+          },
           height: 400,
           width: 400,
           font: {
             color: 'black',
-            size: 15
+            size: 15,
+            family: 'Nunito, san serif'
           },
           displaylogo: false,
           paper_bgcolor: 'white',
           legend: {
-            orientation: 'h',
-            xanchor: 'center',
-            x: 0.5,
-            y: 5,
+              orientation: 'h',
+              xanchor: 'center',
+              x: .5
           },
         }}
       />

app/charts/speed-chart.jsx

@@ -30,7 +30,7 @@ const SpeedChart = (props) => {
           domain: { x: [0, 1], y: [0, 1] },
           type: 'indicator',
           value: yAxis[yAxis.length - 1],
-          title: {'text': "Speed Chart"},
+          title: {text: "Speed Chart", font: {size: 25}},
           delta: {'reference': 3.5, 'decreasing': {'color': '#FA1A58'}},
           mode: "gauge+number+delta",
           gauge: { axis: { range: [null, 8] },
@@ -54,7 +54,8 @@ const SpeedChart = (props) => {
           width: 400,
           font: {
             color: 'black',
-            size: 15
+            size: 15,
+            family: 'Nunito, san serif'
           },
           paper_bgcolor: 'white',
           legend: {

app/stylesheets/graphs.css

@@ -13,7 +13,6 @@ svg {
 
 #docker-stats-chart {
   position: relative;
-  font-family: "Open Sans", verdana, arial, sans-serif;
   display: flex;
   flex-direction: column;
   background-color: white;

app/stylesheets/monitoring.css

@@ -7,6 +7,7 @@
   box-shadow: black;
   border-radius: 5px;
   background-color: #F9FAFE;
+  font-family: 'Nunito', sans-serif;
 }
 
 #microserviceHealthTitle{