Skip to content

Commit c9be132

Browse files
lu0713lu0713
committed
removed directed graph border, styling changes all around
1 parent 5c06054 commit c9be132

24 files changed

+144
-126
lines changed

‎app/charts/LatencyChart.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,17 @@ const LatencyChart = React.memo(() => {
1616
type: 'scattergl',
1717
y: yAxis,
1818
mode: 'lines',
19-
marker: { color: '#daaa17' },
19+
marker: { color: '#f7215b' },
2020
},
2121
]}
2222
layout={{
2323
title: 'Latency',
2424
height: 300,
2525
width: 300,
2626
font: {
27-
color: 'black',
27+
color: '#444d56',
2828
size: 11.5,
29-
family: 'Open Sans',
29+
family: 'Roboto',
3030
},
3131
paper_bgcolor: 'white',
3232
plot_bgcolor: 'white',

‎app/charts/MemoryChart.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,23 @@ const MemoryChart = React.memo(() => {
1515
{
1616
type: 'scattergl',
1717
fill: 'tonexty',
18-
fillcolor: 'rgb(0, 237, 160)',
18+
fillcolor: '#24d3f0',
1919
mode: 'none',
2020
y: free,
2121
name: 'Free Memory',
2222
},
2323
{
2424
type: 'scatter',
2525
fill: 'tonexty',
26-
fillcolor: 'rgba(0, 237, 160, .4)',
26+
fillcolor: '#4b54ea',
2727
mode: 'none',
2828
y: used,
2929
name: 'Used Memory',
3030
},
3131
{
3232
type: 'scatter',
3333
fill: 'tonexty',
34-
fillcolor: 'rgba(74, 78, 238, .5)',
34+
fillcolor: '#5e84fb',
3535
mode: 'none',
3636
y: active,
3737
name: 'Active Memory',
@@ -42,9 +42,9 @@ const MemoryChart = React.memo(() => {
4242
height: 300,
4343
width: 300,
4444
font: {
45-
color: 'black',
45+
color: '#444d56',
4646
size: 11.5,
47-
family: 'Open Sans',
47+
family: 'Roboto',
4848
},
4949
paper_bgcolor: 'white',
5050
plot_bgcolor: 'white',

‎app/charts/ProcessesChart.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ProcessesChart = React.memo(() => {
1818
mode: 'markers',
1919
name: 'Running Processes',
2020
marker: {
21-
color: '#00d3f2',
21+
color: '#24d3f0',
2222
size: 3,
2323
},
2424
},
@@ -28,7 +28,7 @@ const ProcessesChart = React.memo(() => {
2828
mode: 'markers',
2929
name: 'Blocked Processes',
3030
marker: {
31-
color: '#00eda0',
31+
color: '#f7215b',
3232
size: 3,
3333
},
3434
},
@@ -38,7 +38,7 @@ const ProcessesChart = React.memo(() => {
3838
mode: 'markers',
3939
name: 'Sleeping Processes',
4040
marker: {
41-
color: '#4a4eee',
41+
color: '#4b54ea',
4242
size: 3,
4343
},
4444
},
@@ -48,9 +48,9 @@ const ProcessesChart = React.memo(() => {
4848
height: 300,
4949
width: 300,
5050
font: {
51-
color: 'black',
51+
color: '#444d56',
5252
size: 11.5,
53-
family: 'Open Sans',
53+
family: 'Roboto',
5454
},
5555
paper_bgcolor: 'white',
5656
plot_bgcolor: 'white',

‎app/charts/RequestTypesChart.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useContext } from 'react';
22
import Plot from 'react-plotly.js';
33
import { CommsContext } from '../context/CommsContext';
4+
import '../stylesheets/constants.scss';
45

56
const RequestTypesChart: React.FC = React.memo(() => {
67
const { commsData } = useContext(CommsContext);
@@ -44,7 +45,7 @@ const RequestTypesChart: React.FC = React.memo(() => {
4445
type: 'pie',
4546
textposition: 'inside',
4647
marker: {
47-
colors: ['#fa1a58', '#4a4eee', '#00eda0', '#00d3f2', '#73605b', '#d09683'],
48+
colors: ['#fa1a58', '#4a4eee', '#00eda0', '#00d3f2', '#9c27b0', '#ff9800'],
4849
},
4950

5051
},
@@ -59,17 +60,17 @@ const RequestTypesChart: React.FC = React.memo(() => {
5960
height: 300,
6061
width: 300,
6162
font: {
62-
color: 'black',
63+
color: '#444d56',
6364
size: 11.5,
64-
family: 'Open Sans',
65+
family: 'Roboto',
6566
},
6667
paper_bgcolor: 'white',
6768
legend: {
6869
orientation: 'h',
6970
xanchor: 'center',
7071
x: 0.5,
7172
font: {
72-
size: 6,
73+
size: 7,
7374
}
7475
},
7576
}}

‎app/charts/ResponseCodesChart.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
5151
{
5252
values: Object.values(responseCodes),
5353
labels: [
54-
'Informational (100-199',
54+
'Informational (100-199)',
5555
'Success (200-299)',
5656
'Redirects (300-399)',
5757
'Client errors (400-499)',
@@ -61,7 +61,7 @@ const ResponseCodesChart: React.FC = React.memo(() => {
6161
textposition: 'inside',
6262
domain: { y: [0, 2] },
6363
marker: {
64-
colors: ['#fa1a58', '#f3f5fe', '#00eda0', '#00fff2', '#73605b'],
64+
colors: ['#f7215b', '#4b54ea', '#24d3f0', '#27eba2', '#9c27b0'],
6565
},
6666
},
6767
]}
@@ -75,17 +75,17 @@ const ResponseCodesChart: React.FC = React.memo(() => {
7575
height: 300,
7676
width: 300,
7777
font: {
78-
color: 'black',
78+
color: '#444d56',
7979
size: 11.5,
80-
family: 'Open Sans',
80+
family: 'Roboto',
8181
},
8282
paper_bgcolor: 'white',
8383
legend: {
8484
orientation: 'h',
8585
xanchor: 'center',
8686
x: 0.5,
8787
font: {
88-
size: 6,
88+
size: 7,
8989
}
9090
},
9191
}}

‎app/charts/RouteChart.jsx‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const RouteLocations = React.memo(() => {
8484
height: 300,
8585
width: 300,
8686
textAlign: 'center',
87-
color: '#888888',
87+
color: '#444d56',
8888
whiteSpace: 'nowrap',
8989
backgroundColor: '#ffffff',
9090
borderRadius: 3,
@@ -105,7 +105,10 @@ const RouteLocations = React.memo(() => {
105105
// check if node exists if not then add node
106106
let id = route[i].microservice
107107
if (nodeListObj[id] === undefined) {
108-
nodeListObj[id] = { id: id, label: id, color: { background: '#24d2f1', border: 'white', hover: { background: '#4d55ec', border: 'white' } }, shape: 'circle' }
108+
nodeListObj[id] = {
109+
id: id,
110+
label: id
111+
}
109112
}
110113
// add edge from node 1 to node 2 (repeat til end)
111114
if (i !== 0) {
@@ -140,15 +143,37 @@ const RouteLocations = React.memo(() => {
140143
hierarchical: false
141144
},
142145
edges: {
143-
color: "#000000",
146+
color: "#444d56",
144147
physics: true,
145148
smooth: {
146149
type: "curvedCCW",
147150
forceDirection: "none",
148151
roundness: 0.3
149-
}
152+
},
153+
font: {
154+
color: '#444d56',
155+
size: 9,
156+
},
150157
},
151-
};
158+
nodes: {
159+
borderWidth: 0,
160+
color: {
161+
background: '#24d3f0',
162+
hover: {
163+
background: '#4b54ea',
164+
},
165+
highlight: {
166+
background: '#f7215b',
167+
}
168+
},
169+
shape: 'circle',
170+
font: {
171+
color: '#444d56',
172+
size: 10,
173+
face: 'roboto'
174+
},
175+
}
176+
}
152177

153178
const events = {
154179
select: function (event) {
@@ -164,7 +189,7 @@ const RouteLocations = React.memo(() => {
164189
return (
165190
<div className='traceContainer'>
166191
<span id='tracesTitle'>Route Traces</span>
167-
<Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontSize: '2px', color: '#555555', fontFamily: 'Open Sans', boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)', backgroundColor: 'white', borderRadius: '3px' }} />
192+
<Graph className={classes.paper} graph={graph} options={options} events={events} style={{ fontFamily: 'Roboto', boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)', backgroundColor: 'white', borderRadius: '3px' }} />
168193
</div>
169194
);
170195
});

‎app/charts/SpeedChart.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,19 @@ const SpeedChart = React.memo(() => {
2222
y: yAxis,
2323
type: 'scatter',
2424
mode: 'lines+markers',
25+
marker: {
26+
color: '#4b54ea'
27+
},
2528
},
2629
]}
2730
layout={{
2831
title: 'Speed Chart',
2932
height: 300,
3033
width: 300,
3134
font: {
32-
color: 'black',
35+
color: '#444d56',
3336
size: 11.5,
34-
family: 'Open Sans',
37+
family: 'Roboto',
3538
},
3639
xaxis: {
3740
title: 'Time (EST)',

‎app/charts/TemperatureChart.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const TemperatureChart = React.memo(() => {
2323
type: 'scatter',
2424
fill: 'tozeroy',
2525
mode: 'lines',
26-
fillcolor: 'rgb(250, 26, 88)',
26+
fillcolor: '#4b54ea',
2727
x: timeArr,
2828
y: yAxis,
2929
name: 'CPU Temperature',
@@ -36,9 +36,9 @@ const TemperatureChart = React.memo(() => {
3636
height: 300,
3737
width: 300,
3838
font: {
39-
color: 'black',
39+
color: '#444d56',
4040
size: 11.5,
41-
family: 'Open Sans',
41+
family: 'Roboto',
4242
},
4343
paper_bgcolor: 'white',
4444
plot_bgcolor: 'white',

‎app/charts/TrafficChart.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,20 @@ const TrafficChart = React.memo(() => {
3232
x: [...xAxis],
3333
y: [...serverPings, 0, yAxisHeadRoom],
3434
fill: 'tozeroy',
35-
marker: { color: '#5C80FF' },
35+
marker: { color: '#fa1a58' },
3636
mode: 'none',
37-
name: 'Open Sans',
38-
showlegend: true,
37+
name: 'Times Server Pinged',
38+
showlegend: false,
3939
},
4040
]}
4141
layout={{
4242
title: 'Server Traffic',
4343
height: 300,
4444
width: 300,
4545
font: {
46-
color: 'black',
46+
color: '#444d56',
4747
size: 11.5,
48-
family: 'Open Sans',
48+
family: 'Roboto',
4949
},
5050
paper_bgcolor: 'white',
5151
plot_bgcolor: 'white',
@@ -55,7 +55,11 @@ const TrafficChart = React.memo(() => {
5555
x: 0.5,
5656
y: 5,
5757
},
58-
yaxis: { rangemode: 'nonnegative' },
58+
yaxis: {
59+
rangemode: 'nonnegative',
60+
title: 'Times Server Pinged',
61+
showline: true,
62+
},
5963
}}
6064
/>
6165
</div>

‎app/components/Applications.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@ const Applications: React.FC = React.memo((props) => {
8787
[theme.breakpoints.up('lg')]: {
8888
fontSize: '18px',
8989
// MAIN PAGE SQUARE BUTTON FONTS
90-
fontFamily: 'Open Sans'
90+
fontFamily: 'Roboto',
91+
fontWeight: 100,
9192
},
9293
},
9394
}));

0 commit comments

Comments
 (0)