Update all chart titles, labels, and ticks

Author: Umius-Brian

app/charts/docker-stats-chart.jsx

@@ -68,20 +68,30 @@ const DockerStatsChart = (props) => {
   if (Object.keys(dockerStats).length > 0) {
     // Build an array of <span>s that'll be rendered. Each <span> contains one stat.
     const dockerStatsArr = [];
+    const dockerDataArr = [];
 
     for (let stat in dockerStats) {
       dockerStatsArr.push(
         <span key={stat}>
-          {stat}: {dockerStats[stat]}
+          {stat}:
         </span>
       )
     }
+    for (let stat in dockerStats) {
+      dockerDataArr.push(
+        <span key={stat}>
+          {dockerStats[stat]}
+        </span>
+      )
+
+    }
     console.log('dockerStatsArr (docker stats chart):', dockerStatsArr);
 
     return (
       <div id="docker-stats-chart">
         <header id="docker-stats-chart-header">Docker Container Stats</header>
         {dockerStatsArr}
+        {dockerDataArr}
       </div>
     )
   } else { // If no Docker data:

app/charts/latency-chart.jsx

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

app/charts/memory-chart.jsx

@@ -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

@@ -44,7 +44,7 @@ const RequestTypesChart = (props) => {
         layout = {{
           title: {
             text: 'Request Types',
-            font: {size: 25}
+            font: {size: 22}
           },
           height: 400,
           width: 400,

app/charts/response-code-chart.jsx

@@ -83,7 +83,7 @@ const ResponseCodeChart = (props) => {
         layout={{
           title: {
             text: 'Response Status Codes',
-            font: {size: 25}
+            font: {size: 22}
           },
           height: 400,
           width: 400,

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", font: {size: 25}},
+          title: {text: "Speed Chart", font: {size: 22}},
           delta: {'reference': 3.5, 'decreasing': {'color': '#FA1A58'}},
           mode: "gauge+number+delta",
           gauge: { axis: { range: [null, 8] },

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,9 @@
   display: grid;
   grid-template-columns: auto auto auto;
   grid-gap: 30px;  /* align-items: center; */
-  margin: auto; 
+  margin: auto;
+  border-radius: 2px;
+  box-shadow: 2px 2px 2px rgba(216, 210, 247, .5);
 }
 
 
@@ -16,8 +18,8 @@ svg {
   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;
@@ -26,4 +28,5 @@ svg {
 #docker-stats-chart-header {
   align-self: center;
   font-size: 1.5em;
+  padding-bottom: 25px
 }