Merge pull request #8 from Umius-Brian/graph1

Umius-Brian · web-flow · commit 29dd8a0c8bd3 · 2020-05-12T20:00:51.000-07:00
Graph1
diff --git a/app/charts/latency-chart.jsx b/app/charts/latency-chart.jsx
@@ -28,18 +28,18 @@ const LatencyChart = (props) =>  {
           rangemode: 'nonnegative',
           name: `${props.service} CPU Latency`,
           marker: {
-              color: '#155263',
+              color: 'rgb(218, 170, 23',
           },
         }]}
         layout = {{
           height: 400,
           width: 400,
           font: {
-            color: 'azure',
+            color: 'black',
             size: 15
           },
-          paper_bgcolor: '#8BA6B9',
-          plot_bgcolor: '#8BA6B9',
+          paper_bgcolor: 'white',
+          plot_bgcolor: 'white',
           showlegend: true,
           legend: {
               orientation: 'h',
diff --git a/app/charts/memory-chart.jsx b/app/charts/memory-chart.jsx
@@ -37,7 +37,7 @@ const MemoryChart = (props) => {
           {
             type: 'scatter',
             fill: 'tozeroy',
-            fillcolor: 'rgb(193, 225, 220)',
+            fillcolor: 'rgb(0, 237, 160)',
             mode: 'none',
             x: {autorange: true},
             y: free,
@@ -47,7 +47,7 @@ const MemoryChart = (props) => {
           {
             type: 'scatter',
             fill: 'tozeroy',
-            fillcolor: 'rgba(255, 235, 148, .3)',
+            fillcolor: 'rgba(0, 237, 160, .5)',
             mode: 'none',
             x: {autorange: true},
             y: used,
@@ -57,7 +57,7 @@ const MemoryChart = (props) => {
           {
             type: 'scatter',
             fill: 'tozeroy',
-            fillcolor: 'rgba(253, 212, 117, .4)',
+            fillcolor: 'rgba(74, 78, 238, .7)',
             mode: 'none',
             x: {autorange: true},
             y: active,
@@ -70,11 +70,11 @@ const MemoryChart = (props) => {
           height: 400,
           width: 400,
           font: {
-            color: 'azure',
+            color: 'black',
             size: 15
           },
-          paper_bgcolor: '#8BA6B9',
-          plot_bgcolor: '#8BA6B9',
+          paper_bgcolor: 'white',
+          plot_bgcolor: 'white',
           legend: {
             itemsizing: 'constant',
             orientation: 'h',
diff --git a/app/charts/microservice-traffic.jsx b/app/charts/microservice-traffic.jsx
@@ -87,7 +87,7 @@ const MicroServiceTraffic = (props) => {
         y: [...serverPingCount, 0, yAxisHeadRoom],
         fill: 'tozeroy',
         marker: {'color': '#5C80FF'},
-        opacity: .7,
+        // opacity: .7,
         mode: 'none',
         name: 'Times Server Pinged',
         showlegend: true
@@ -97,11 +97,11 @@ const MicroServiceTraffic = (props) => {
           height: 400,
           width: 400,
           font: {
-            color: 'azure',
+            color: 'black',
             size: 15
           },
-          paper_bgcolor: '#8BA6B9',
-          plot_bgcolor: '#8BA6B9',
+          paper_bgcolor: 'white',
+          plot_bgcolor: 'white',
           legend: {
             orientation: 'h',
             xanchor: 'center',
diff --git a/app/charts/processes-chart.jsx b/app/charts/processes-chart.jsx
@@ -43,7 +43,7 @@ const ProcessesChart = (props) => {
             rangemode: 'nonnegative',
             name: 'Running Processes',
             marker: {
-              color: '#3ec1d3',
+              color: '#00d3f2',
               size: 3
             }},
           {
@@ -54,7 +54,7 @@ const ProcessesChart = (props) => {
             rangemode: 'nonnegative',
             name: 'Blocked Processes',
             marker: {
-              color: '#ff9a00',
+              color: '#00eda0',
               size: 3
             }},
           { 
@@ -65,7 +65,7 @@ const ProcessesChart = (props) => {
             rangemode: 'nonnegative',
             name: 'Sleeping Processes',
             marker: {
-              color: '#ff165d',
+              color: '#4a4eee',
               size: 3
           }},
           {label: communicationLabel},
@@ -74,11 +74,11 @@ const ProcessesChart = (props) => {
           height: 400,
           width: 400,
           font: {
-            color: 'azure',
+            color: 'black',
             size: 15
           },
-          paper_bgcolor: '#8BA6B9',
-          plot_bgcolor: '#8BA6B9',
+          paper_bgcolor: 'white',
+          plot_bgcolor: 'white',
           legend: {
             itemsizing: 'constant',
             orientation: 'h',
diff --git a/app/charts/request-type-chart.jsx b/app/charts/request-type-chart.jsx
@@ -32,10 +32,10 @@ const RequestTypesChart = (props) => {
           name: 'Request Types',
           marker: {
             'colors': [
-              '#c1e1dc',
-              '#8369E3',
-              '#ffeb94',
-              '#69C9E3',
+              '#fa1a58',
+              '#4a4eee',
+              '#00eda0',
+              '#00d3f2',
               '#73605b',
               '#d09683',           
             ]
@@ -45,11 +45,11 @@ const RequestTypesChart = (props) => {
           height: 400,
           width: 400,
           font: {
-            color: 'azure',
+            color: 'black',
             size: 15
           },
           displaylogo: false,
-          paper_bgcolor: '#8BA6B9',
+          paper_bgcolor: 'white',
           legend: {
               orientation: 'h',
               xanchor: 'center',
diff --git a/app/charts/response-code-chart.jsx b/app/charts/response-code-chart.jsx
@@ -70,10 +70,10 @@ const ResponseCodeChart = (props) => {
             domain: { y: [0, 2] },
             marker: {
               colors: [
-                '#4897d8',
-                '#ffd480',
-                '#fffe9f',
-                '#f8a055',
+                '#fa1a58',
+                '#f3f5fa',
+                '#00eda0',
+                '#00fff2',
                 '#73605b',
               ],
             },
@@ -83,11 +83,11 @@ const ResponseCodeChart = (props) => {
           height: 400,
           width: 400,
           font: {
-            color: 'azure',
+            color: 'black',
             size: 15
           },
           displaylogo: false,
-          paper_bgcolor: '#8BA6B9',
+          paper_bgcolor: 'white',
           legend: {
             orientation: 'h',
             xanchor: 'center',
diff --git a/app/charts/speed-chart.jsx b/app/charts/speed-chart.jsx
@@ -31,19 +31,19 @@ const SpeedChart = (props) => {
           type: 'indicator',
           value: yAxis[yAxis.length - 1],
           title: {'text': "Speed Chart"},
-          delta: {'reference': 3.5, 'decreasing': {'color': 'mistyrose'}},
+          delta: {'reference': 3.5, 'decreasing': {'color': '#FA1A58'}},
           mode: "gauge+number+delta",
           gauge: { axis: { range: [null, 8] },
             'tickwidth': 1,
-            'tickcolor': 'mistyrose',
-            'bar': {'color': "#e1315b"},
+            'tickcolor': '#FA1A58',
+            'bar': {'color': '#00eda0'},
             'bordercolor': "#a1be95",
             'steps': [
-              {'range': [0, 4], 'color': '#e2dfa2'},
-              {'range': [4, 6], 'color': '#fab57a'}
+              {'range': [0, 4], 'color': '#fef5fa'},
+              {'range': [4, 6], 'color': '#4a4eee'}
             ],
             'threshold': {
-              'line': {'color': 'mistyrose', 'width': 3.5},
+              'line': {'color': '#FA1A58', 'width': 3.5},
               'thickness': 0.75,
               'value': 7.5
             }
@@ -53,10 +53,10 @@ const SpeedChart = (props) => {
           height: 400,
           width: 400,
           font: {
-            color: 'azure',
+            color: 'black',
             size: 15
           },
-          paper_bgcolor: '#8BA6B9',
+          paper_bgcolor: 'white',
           legend: {
             orientation: 'h',
             xanchor: 'center',
diff --git a/app/charts/temperature-chart.jsx b/app/charts/temperature-chart.jsx
@@ -29,7 +29,7 @@ const TemperatureChart = (props) => {
         data = {[{
           type: 'scatter',
           fill: 'tozeroy',
-          fillcolor: 'rgba(224, 62, 54, .4)',
+          fillcolor: 'rgb(250, 26, 88)',
           mode: 'none',
           x: yAxis,
           y: xAxis,
@@ -41,11 +41,11 @@ const TemperatureChart = (props) => {
             height: 400,
             width: 400,
             font: {
-              color: 'azure',
+              color: 'black',
               size: 15
             },
-            paper_bgcolor: '#8BA6B9',
-            plot_bgcolor: '#8BA6B9',
+            paper_bgcolor: 'white',
+            plot_bgcolor: 'white',
 
             legend: {
               orientation: 'h',
diff --git a/app/stylesheets/graphs.css b/app/stylesheets/graphs.css
@@ -6,5 +6,5 @@
 
 svg {
   border-radius: 2px;
-  box-shadow: 5px 5px 5px rgba(212, 164, 219, 0.5);
+  box-shadow: 2px 2px 2px rgba(216, 210, 247, .5);
 }
diff --git a/app/stylesheets/index.css b/app/stylesheets/index.css
@@ -14,8 +14,7 @@ html {
 
 body {
   /* background-color: #333; Original background*/
-  background-color: white;
-  
+  background-color: rgb(248, 249, 253);
 }
 
 img {
diff --git a/app/stylesheets/monitoring.css b/app/stylesheets/monitoring.css
@@ -7,7 +7,7 @@
 }
 
 #microserviceHealthTitle{
-  color: white;
+  color: black;
   font-size: 38px;
   margin-top: 0px;
   font-family: 'Quicksand', sans-serif;
diff --git a/app/stylesheets/sidebar.css b/app/stylesheets/sidebar.css
@@ -31,7 +31,8 @@
 
 .servicesBtn {
   font-family: 'Nunito', sans-serif;
-  background-color: #D7B396; 
+  background-color: #24262F;
+  color: white; 
   width: 13em;
   word-wrap: break-word;
   font-size: 15px;
@@ -44,7 +45,7 @@
 }
 
 .servicesBtn:hover {
-  background-color: #b7e2b4;
+  background-color: #494FEE;
   font-weight: 400;
   box-shadow: #333;
   cursor: pointer;
@@ -73,28 +74,28 @@
   height: 1000px;
   color:white;
   font-family: 'Nunito', sans-serif;
-  background-color: #24262F
+  background-color: #24262F;
   /* display: flex; */
 }
 
 .microserviceBtn {
   font-family: 'Nunito', sans-serif;
   width: 80%;
   height: 50px;
-  background-color: #8FB98B;
+  background-color: #24262F;
   padding: 2%;
   margin: 10px 0 10px 0;
   font-size: 2.5vh;
   border: none;
   text-align: center;
-  color: azure;
+  color: white;
   transition: 0.1s;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .overviewSubmitBtn {
   font-family: 'Nunito', sans-serif;
-  background-color: #B99E8B;
+  background-color: #24262F;
   margin: 8% auto 0 auto;
   height: 40px;
   border: none;
@@ -105,8 +106,8 @@
 }
 
 .overviewSubmitBtn:hover {
-  border: .5px solid azure;
-  background-color: #c8afc9;
+  /* border: .5px solid azure; */
+  background-color: #494FEE;
   color: azure;
   cursor: pointer;
 }
@@ -119,8 +120,8 @@
 .microserviceBtn:hover {
   /* font-weight: 900; */
   cursor: pointer;
-  border: 2px solid #98ba8e;
-  background-color: #ceb6cf;
+  /* border: 2px solid #98ba8e; */
+  background-color: #494FEE;
 }
 
 .servicesList {
diff --git a/dist/index_bundle.js b/dist/index_bundle.js

Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,5 @@`
`6`	`6`
`7`	`7`	`svg {`
`8`	`8`	`border-radius: 2px;`
`9`		`- box-shadow: 5px 5px 5px rgba(212, 164, 219, 0.5);`
	`9`	`+ box-shadow: 2px 2px 2px rgba(216, 210, 247, .5);`
`10`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,8 +14,7 @@ html {`
`14`	`14`
`15`	`15`	`body {`
`16`	`16`	`/* background-color: #333; Original background*/`
`17`		`- background-color: white;`
`18`		`-`
	`17`	`+ background-color: rgb(248, 249, 253);`
`19`	`18`	`}`
`20`	`19`
`21`	`20`	`img {`