Merge pull request #21 from lu0713/master

Commented out console.logs, incorporated RouteChart removal of doubled edges

Author: lu0713

app/assets/mongo-icon-color.png

@@ -16,17 +16,17 @@ const LatencyChart = React.memo(() => {
             type: 'scattergl',
             y: yAxis,
             mode: 'lines',
-            marker: { color: '#daaa17' },
+            marker: { color: '#fc4039' },
           },
         ]}
         layout={{
           title: 'Latency',
           height: 300,
           width: 300,
           font: {
-            color: 'black',
+            color: '#444d56',
             size: 11.5,
-            family: 'Open Sans',
+            family: 'Roboto',
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',

app/assets/mongo-icon-green-light.png

@@ -15,23 +15,23 @@ const MemoryChart = React.memo(() => {
           {
             type: 'scattergl',
             fill: 'tonexty',
-            fillcolor: 'rgb(0, 237, 160)',
+            fillcolor: '#fc4039',
             mode: 'none',
             y: free,
             name: 'Free Memory',
           },
           {
             type: 'scatter',
             fill: 'tonexty',
-            fillcolor: 'rgba(0, 237, 160, .4)',
+            fillcolor: '#4b54ea',
             mode: 'none',
             y: used,
             name: 'Used Memory',
           },
           {
             type: 'scatter',
             fill: 'tonexty',
-            fillcolor: 'rgba(74, 78, 238, .5)',
+            fillcolor: '#3788fc',
             mode: 'none',
             y: active,
             name: 'Active Memory',
@@ -42,21 +42,26 @@ const MemoryChart = React.memo(() => {
           height: 300,
           width: 300,
           font: {
-            color: 'black',
+            color: '#444d56',
             size: 11.5,
-            family: 'Open Sans',
+            family: 'Roboto',
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',
           legend: {
             orientation: 'h',
             xanchor: 'center',
             x: 0.5,
+            y: -1.0,
+            font: {
+              size: 9
+            }
           },
           xaxis: {
             tickmode: 'linear',
             tick0: 0,
             dtick: 10,
+            title: 'Time Elapsed (min)',
           },
           yaxis: {
             title: 'Bytes'

app/assets/mongo-icon-green.png

@@ -18,7 +18,7 @@ const ProcessesChart = React.memo(() => {
             mode: 'markers',
             name: 'Running Processes',
             marker: {
-              color: '#00d3f2',
+              color: '#3788fc',
               size: 3,
             },
           },
@@ -28,7 +28,7 @@ const ProcessesChart = React.memo(() => {
             mode: 'markers',
             name: 'Blocked Processes',
             marker: {
-              color: '#00eda0',
+              color: '#fc4039',
               size: 3,
             },
           },
@@ -38,7 +38,7 @@ const ProcessesChart = React.memo(() => {
             mode: 'markers',
             name: 'Sleeping Processes',
             marker: {
-              color: '#4a4eee',
+              color: '#4b54ea',
               size: 3,
             },
           },
@@ -48,19 +48,24 @@ const ProcessesChart = React.memo(() => {
           height: 300,
           width: 300,
           font: {
-            color: 'black',
+            color: '#444d56',
             size: 11.5,
-            family: 'Open Sans',
+            family: 'Roboto',
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',
           legend: {
             orientation: 'h',
             xanchor: 'center',
             x: 0.5,
+            y: -1.0,
+          font: {
+            size: 9
+          }
           },
           xaxis: {
             dtick: 10,
+            title: 'Time Elapsed (min)',
           },
           yaxis: {
             title: 'Number of Processes'