Merge pull request #24 from Umius-Brian/Stretch-Features

Added some headers and tweaked font

Author: ajlee12

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,25 +26,28 @@ const LatencyChart = (props) =>  {
           y: yAxis,
           mode: 'lines',
           rangemode: 'nonnegative',
-          name: `${props.service} CPU Latency`,
+          // name: `${props.service} CPU Latency`,
+          name: 'CPU Latency',
           marker: {
-              color: 'rgb(218, 170, 23',
+              color: '#daaa17',
           },
         }]}
         layout = {{
           height: 400,
           width: 400,
           font: {
             color: 'black',
-            size: 15
+            size: 15,
+            family: 'Nunito, san serif'
           },
           paper_bgcolor: 'white',
           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/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,
@@ -71,7 +71,8 @@ const MemoryChart = (props) => {
           width: 400,
           font: {
             color: 'black',
-            size: 15
+            size: 15,
+            family: 'Nunito, san serif'
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',

app/charts/microservice-traffic.jsx

@@ -94,7 +94,8 @@ const MicroServiceTraffic = (props) => {
           width: 400,
           font: {
             color: 'black',
-            size: 15
+            size: 15,
+            family: 'Nunito, san serif'
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',

app/charts/processes-chart.jsx

@@ -75,7 +75,8 @@ const ProcessesChart = (props) => {
           width: 400,
           font: {
             color: 'black',
-            size: 15
+            size: 15,
+            family: 'Nunito, san serif'
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',

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: 22}
+          },
           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: 22}
+          },
           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: 22}},
           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/charts/temperature-chart.jsx

@@ -42,7 +42,8 @@ const TemperatureChart = (props) => {
             width: 400,
             font: {
               color: 'black',
-              size: 15
+              size: 15,
+              family: 'Nunito, san serif'
             },
             paper_bgcolor: 'white',
             plot_bgcolor: 'white',

app/stylesheets/graphs.css

@@ -2,7 +2,10 @@
   display: grid;
   grid-template-columns: auto auto auto;
   grid-gap: 30px;  /* align-items: center; */
-  margin: auto; 
+  margin: auto;
+  padding-bottom: 25px;
+  border-radius: 2px;
+  box-shadow: 2px 2px 2px rgba(216, 210, 247, .5);
 }
 
 
@@ -13,12 +16,11 @@ svg {
 
 #docker-stats-chart {
   position: relative;
-  font-family: "Open Sans", verdana, arial, sans-serif;
   display: flex;
   flex-direction: column;
   background-color: white;
-  border-radius: 2px;
-  box-shadow: 2px 2px 2px rgba(216, 210, 247, .5);
+  border-radius: 3px;
+  box-shadow: 3px 3px 3px rgba(216, 210, 247, .5);
   height: 400;
   width: 400;
   padding: 10px 10px 10px 10px;
@@ -27,4 +29,8 @@ svg {
 #docker-stats-chart-header {
   align-self: center;
   font-size: 1.5em;
-}
+  padding-bottom: 25px;
+  height: 400;
+  width: 400;
+}
+