Merge pull request #7 from Umius-Brian/graph1

Umius-Brian · web-flow · commit f239c912b72e · 2020-05-12T10:53:51.000-07:00
Graph1
diff --git a/Chronos Slide Deck Notes.rtf b/Chronos Slide Deck Notes.rtf
diff --git a/app/charts/latency-chart.jsx b/app/charts/latency-chart.jsx
@@ -20,6 +20,7 @@ const LatencyChart = (props) =>  {
     return (
       <Plot
         data = {[{
+          name: 'CPU Latency',
           type: 'scatter',
           x: xAxis,
           y: yAxis,
@@ -33,8 +34,12 @@ const LatencyChart = (props) =>  {
         layout = {{
           height: 400,
           width: 400,
-          paper_bgcolor: '#fffbe0',
-          plot_bgcolor: '#fffbe0',
+          font: {
+            color: 'azure',
+            size: 15
+          },
+          paper_bgcolor: '#8BA6B9',
+          plot_bgcolor: '#8BA6B9',
           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(14, 49, 80)',
+            fillcolor: 'rgb(193, 225, 220)',
             mode: 'none',
             x: {autorange: true},
             y: free,
@@ -47,7 +47,7 @@ const MemoryChart = (props) => {
           {
             type: 'scatter',
             fill: 'tozeroy',
-            fillcolor: 'rgba(255, 64, 87, .3)',
+            fillcolor: 'rgba(255, 235, 148, .3)',
             mode: 'none',
             x: {autorange: true},
             y: used,
@@ -57,7 +57,7 @@ const MemoryChart = (props) => {
           {
             type: 'scatter',
             fill: 'tozeroy',
-            fillcolor: 'rgba(144, 0, 72, .4)',
+            fillcolor: 'rgba(253, 212, 117, .4)',
             mode: 'none',
             x: {autorange: true},
             y: active,
@@ -69,8 +69,12 @@ const MemoryChart = (props) => {
         layout = {{
           height: 400,
           width: 400,
-          paper_bgcolor: '#fffbe0',
-          plot_bgcolor: '#fffbe0',
+          font: {
+            color: 'azure',
+            size: 15
+          },
+          paper_bgcolor: '#8BA6B9',
+          plot_bgcolor: '#8BA6B9',
           legend: {
             itemsizing: 'constant',
             orientation: 'h',
diff --git a/app/charts/microservice-traffic.jsx b/app/charts/microservice-traffic.jsx
@@ -86,8 +86,8 @@ const MicroServiceTraffic = (props) => {
         x: ['Orders', 'Customers', 'Books', 'Reverse-Proxy', 'ReverseProxy'],
         y: [...serverPingCount, 0, yAxisHeadRoom],
         fill: 'tozeroy',
-        color: 'red',
-        opacity: .4,
+        marker: {'color': '#5C80FF'},
+        opacity: .7,
         mode: 'none',
         name: 'Times Server Pinged',
         showlegend: true
@@ -96,8 +96,12 @@ const MicroServiceTraffic = (props) => {
         {
           height: 400,
           width: 400,
-          paper_bgcolor: '#fffbe0',
-          plot_bgcolor: '#fffbe0',
+          font: {
+            color: 'azure',
+            size: 15
+          },
+          paper_bgcolor: '#8BA6B9',
+          plot_bgcolor: '#8BA6B9',
           legend: {
             orientation: 'h',
             xanchor: 'center',
diff --git a/app/charts/processes-chart.jsx b/app/charts/processes-chart.jsx
@@ -73,8 +73,12 @@ const ProcessesChart = (props) => {
         layout = {{
           height: 400,
           width: 400,
-          paper_bgcolor: '#fffbe0',
-          plot_bgcolor: '#fffbe0',
+          font: {
+            color: 'azure',
+            size: 15
+          },
+          paper_bgcolor: '#8BA6B9',
+          plot_bgcolor: '#8BA6B9',
           legend: {
             itemsizing: 'constant',
             orientation: 'h',
diff --git a/app/charts/request-type-chart.jsx b/app/charts/request-type-chart.jsx
@@ -29,22 +29,27 @@ const RequestTypesChart = (props) => {
           values: Object.values(requestObj),
           labels: ['DELETE', 'GET', 'PATCH', 'POST', 'PUSH', 'PUT'],
           type: 'pie',
+          name: 'Request Types',
           marker: {
             'colors': [
-              '#95e1d3',
-              '#fce38a',
-              '#fcbad3',
-              '#aa96da',
-              '#a8d8ea',
-              '#f38181',           
+              '#c1e1dc',
+              '#8369E3',
+              '#ffeb94',
+              '#69C9E3',
+              '#73605b',
+              '#d09683',           
             ]
           },
         }]}
         layout = {{
           height: 400,
           width: 400,
+          font: {
+            color: 'azure',
+            size: 15
+          },
           displaylogo: false,
-          paper_bgcolor: '#fffbe0',
+          paper_bgcolor: '#8BA6B9',
           legend: {
               orientation: 'h',
               xanchor: 'center',
diff --git a/app/charts/response-code-chart.jsx b/app/charts/response-code-chart.jsx
@@ -70,21 +70,24 @@ const ResponseCodeChart = (props) => {
             domain: { y: [0, 2] },
             marker: {
               colors: [
-                '#f38181',
-                '#fce38a',
-                '#fcbad3',
-                '#95e1d3',
-                '#a8d8ea',
-                '#aa96da',
+                '#4897d8',
+                '#ffd480',
+                '#fffe9f',
+                '#f8a055',
+                '#73605b',
               ],
             },
           },
         ]}
         layout={{
           height: 400,
           width: 400,
+          font: {
+            color: 'azure',
+            size: 15
+          },
           displaylogo: false,
-          paper_bgcolor: '#fffbe0',
+          paper_bgcolor: '#8BA6B9',
           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, 'increasing': {'color': "mistyrose"}},
+          delta: {'reference': 3.5, 'decreasing': {'color': 'mistyrose'}},
           mode: "gauge+number+delta",
           gauge: { axis: { range: [null, 8] },
             'tickwidth': 1,
-            'tickcolor': "#fce38a",
-            'bar': {'color': "#6eb6ff"},
-            'bordercolor': "#a3de83",
+            'tickcolor': 'mistyrose',
+            'bar': {'color': "#e1315b"},
+            'bordercolor': "#a1be95",
             'steps': [
-              {'range': [0, 4], 'color': '#edf798'},
+              {'range': [0, 4], 'color': '#e2dfa2'},
               {'range': [4, 6], 'color': '#fab57a'}
             ],
             'threshold': {
-              'line': {'color': "red", 'width': 3.5},
+              'line': {'color': 'mistyrose', 'width': 3.5},
               'thickness': 0.75,
               'value': 7.5
             }
@@ -52,7 +52,11 @@ const SpeedChart = (props) => {
         layout = {{
           height: 400,
           width: 400,
-          paper_bgcolor: '#fffbe0',
+          font: {
+            color: 'azure',
+            size: 15
+          },
+          paper_bgcolor: '#8BA6B9',
           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, .6)',
+          fillcolor: 'rgba(224, 62, 54, .4)',
           mode: 'none',
           x: yAxis,
           y: xAxis,
@@ -39,9 +39,14 @@ const TemperatureChart = (props) => {
         layout = {
           {
             height: 400,
-          width: 400,
-            paper_bgcolor: '#fffbe0',
-            plot_bgcolor: '#fffbe0',
+            width: 400,
+            font: {
+              color: 'azure',
+              size: 15
+            },
+            paper_bgcolor: '#8BA6B9',
+            plot_bgcolor: '#8BA6B9',
+
             legend: {
               orientation: 'h',
               xanchor: 'center',
diff --git a/app/stylesheets/dashboard.css b/app/stylesheets/dashboard.css
@@ -4,3 +4,5 @@
   position: relative;
 }
 
+
+
diff --git a/app/stylesheets/graphs.css b/app/stylesheets/graphs.css
@@ -5,6 +5,6 @@
 }
 
 svg {
-  border-radius: 10px;
-  box-shadow: 5px 5px 5px rgba(255, 0, 0, 0.6);
+  border-radius: 2px;
+  box-shadow: 5px 5px 5px rgba(212, 164, 219, 0.5);
 }
diff --git a/app/stylesheets/index.css b/app/stylesheets/index.css
@@ -14,7 +14,8 @@ html {
 
 body {
   /* background-color: #333; Original background*/
-  background: linear-gradient(135deg, rgba(25,0,36,1) 0%, rgb(68, 68, 68) 0%, rgb(29, 29, 29) 100%);
+  background-color: white;
+  
 }
 
 img {
diff --git a/app/stylesheets/monitoring.css b/app/stylesheets/monitoring.css
@@ -10,4 +10,5 @@
   color: white;
   font-size: 38px;
   margin-top: 0px;
+  font-family: 'Quicksand', sans-serif;
 }
diff --git a/app/stylesheets/sidebar.css b/app/stylesheets/sidebar.css
diff --git a/dist/index_bundle.js b/dist/index_bundle.js
diff --git a/user/settings.json b/user/settings.json

Original file line number	Diff line number	Diff line change
`@@ -4,3 +4,5 @@`
`4`	`4`	`position: relative;`
`5`	`5`	`}`
`6`	`6`
	`7`	`+`
	`8`	`+`