Skip to content

Commit eb5dd99

Browse files
williamowen65williamowen65
authored
Merge pull request #8 from oslabs-beta/fixing_ts
Fixing ts
2 parents 34d5b92 + 08d511c commit eb5dd99

38 files changed

+58799
-114069
lines changed

‎app/assets/search.svg

Lines changed: 1 addition & 1 deletion
Loading

‎app/charts/MemoryChart.tsx

Lines changed: 150 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -15,48 +15,142 @@ interface SoloStyles {
1515
const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
1616
const { healthData } = useContext(HealthContext);
1717
const createChart = () => {
18-
const free: number[] = healthData.freememory;
19-
const used: number[] = healthData.usedmemory;
20-
const active: number[] = healthData.activememory;
18+
// const free: number[] = healthData.freememory;
19+
// const used: number[] = healthData.usedmemory;
20+
// const active: number[] = healthData.activememory;
2121

2222
const [solo, setSolo] = useState<SoloStyles | null>(null);
2323

24+
const [data, setData] = useState<Array<Array<string> | string>>([]);
25+
2426
setInterval(() => {
25-
if (solo != soloStyle) {
27+
if (solo !== soloStyle) {
2628
setSolo(soloStyle);
2729
}
2830
}, 20);
2931

32+
useEffect(() => {
33+
if (healthData.length) {
34+
healthData.forEach(
35+
(service: {
36+
service: any[];
37+
freememory: string;
38+
usedmemory: string;
39+
activememory: string;
40+
}) => {
41+
const temp: any[] = [
42+
service.service[0],
43+
service.freememory,
44+
service.usedmemory,
45+
service.activememory,
46+
];
47+
setData(data.concat([temp]));
48+
}
49+
);
50+
}
51+
}, [healthData]);
52+
3053
const sizeSwitch = sizing === 'all' ? all : solo;
3154

32-
return (
33-
<Plot
34-
data={[
35-
{
55+
// interface DataObject {
56+
// type: string;
57+
// mode: string;
58+
// y: string | [];
59+
// name: string;
60+
// marker: {
61+
// color: string;
62+
// size: number;
63+
// symbol: string;
64+
// }
65+
// }
66+
interface DataObject {
67+
type: any;
68+
mode: any;
69+
y: any;
70+
name: any;
71+
marker: {
72+
color: any;
73+
size: any;
74+
symbol: any;
75+
};
76+
}
77+
78+
let plotlyData: DataObject[][] = [];
79+
80+
const serviceMarker: string[] = [
81+
'square-dot',
82+
'hexagram-dot',
83+
'star-diamond',
84+
'bowtie-open',
85+
'hourglass',
86+
'line-ew',
87+
];
88+
89+
plotlyData = data.map((dataArr, index) => {
90+
// eslint-disable-next-line no-bitwise
91+
const randomColor = `#${(((1 << 24) * Math.random()) | 0).toString(16)}`;
92+
const tempArr: DataObject[] = [];
93+
for (let i = 1; i < dataArr.length; i++) {
94+
if (i === 1) {
95+
const temp: DataObject = {
3696
type: 'scattergl',
37-
fill: 'tonexty',
38-
fillcolor: '#fc4039',
39-
mode: 'none',
40-
y: free,
41-
name: 'Free Memory',
42-
},
43-
{
97+
mode: 'lines+markers',
98+
y: dataArr[i],
99+
name: `${dataArr[0]} - Free Memory`,
100+
marker: {
101+
color: randomColor,
102+
size: 5,
103+
symbol: serviceMarker[index],
104+
},
105+
// legendgroup: `${dataArr[0]}`,
106+
// legendgrouptitle: {
107+
// text: `${dataArr[0]}`,
108+
// },
109+
};
110+
tempArr.push(temp);
111+
} else if (i === 2) {
112+
const temp: DataObject = {
44113
type: 'scatter',
45-
fill: 'tonexty',
46-
fillcolor: '#4b54ea',
47-
mode: 'none',
48-
y: used,
49-
name: 'Used Memory',
50-
},
51-
{
114+
mode: 'lines+markers',
115+
y: dataArr[i],
116+
name: `${dataArr[0]} - Used Memory`,
117+
marker: {
118+
color: randomColor,
119+
size: 5,
120+
symbol: serviceMarker[index],
121+
},
122+
// legendgroup: `${dataArr[0]}`,
123+
// legendgrouptitle: {
124+
// text: `${dataArr[0]}`,
125+
// },
126+
};
127+
tempArr.push(temp);
128+
} else {
129+
const temp: DataObject = {
52130
type: 'scatter',
53-
fill: 'tonexty',
54-
fillcolor: '#3788fc',
55-
mode: 'none',
56-
y: active,
57-
name: 'Active Memory',
58-
},
59-
]}
131+
mode: 'lines+markers',
132+
y: dataArr[i],
133+
name: `${dataArr[0]} - Active Memory`,
134+
marker: {
135+
color: randomColor,
136+
size: 5,
137+
symbol: serviceMarker[index],
138+
},
139+
// legendgroup: `${dataArr[0]}`,
140+
// legendgrouptitle: {
141+
// text: `${dataArr[0]}`,
142+
// },
143+
};
144+
tempArr.push(temp);
145+
}
146+
}
147+
148+
return tempArr;
149+
});
150+
151+
return (
152+
<Plot
153+
data={[...plotlyData.flat()]}
60154
layout={{
61155
title: 'Memory Traces',
62156
...sizeSwitch,
@@ -71,7 +165,7 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
71165
orientation: 'h',
72166
xanchor: 'center',
73167
x: 0.5,
74-
y: -1.0,
168+
y: -1,
75169
font: {
76170
size: 9,
77171
},
@@ -83,7 +177,7 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
83177
title: 'Time Elapsed (min)',
84178
},
85179
yaxis: {
86-
title: 'Bytes',
180+
title: 'Gigabytes',
87181
},
88182
}}
89183
/>
@@ -94,3 +188,28 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
94188
});
95189

96190
export default MemoryChart;
191+
192+
// {
193+
// type: 'scattergl',
194+
// fill: 'tonexty',
195+
// fillcolor: '#fc4039',
196+
// mode: 'none',
197+
// y: free,
198+
// name: 'Free Memory',
199+
// },
200+
// {
201+
// type: 'scatter',
202+
// fill: 'tonexty',
203+
// fillcolor: '#4b54ea',
204+
// mode: 'none',
205+
// y: used,
206+
// name: 'Used Memory',
207+
// },
208+
// {
209+
// type: 'scatter',
210+
// fill: 'tonexty',
211+
// fillcolor: randomColor,
212+
// mode: 'none',
213+
// y: active,
214+
// name: 'Active Memory',
215+
// },

‎app/charts/ProcessesChart.tsx

Lines changed: 89 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-useless-concat */
12
import React, { useContext, useState, useEffect } from 'react';
23
import Plot from 'react-plotly.js';
34
import { HealthContext } from '../context/HealthContext';
@@ -15,54 +16,122 @@ interface SoloStyles {
1516
const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
1617
const { healthData } = useContext(HealthContext);
1718
const createChart = () => {
18-
const runningProcesses: Array<number> = healthData.runningprocesses;
19-
const blockedProcesses: Array<number> = healthData.blockedprocesses;
20-
const sleepingProcesses: Array<number> = healthData.sleepingprocesses;
19+
// const runningProcesses: Array<number> = healthData.runningprocesses;
20+
// const blockedProcesses: Array<number> = healthData.blockedprocesses;
21+
// const sleepingProcesses: Array<number> = healthData.sleepingprocesses;
2122

2223
const [solo, setSolo] = useState<SoloStyles | null>(null);
2324

25+
const [data, setData] = useState<Array<Array<string | Array<string>>>>([]);
26+
2427
setInterval(() => {
25-
if (solo != soloStyle) {
28+
if (solo !== soloStyle) {
2629
setSolo(soloStyle);
2730
}
2831
}, 20);
2932

33+
useEffect(() => {
34+
if (healthData.length) {
35+
// loop over each
36+
healthData.forEach(
37+
(service: {
38+
service: string[];
39+
runningprocesses: string[];
40+
blockedprocesses: string[];
41+
sleepingprocesses: string[];
42+
}) => {
43+
const temp: [string, string[], string[], string[]] = [
44+
service.service[0],
45+
service.runningprocesses,
46+
service.blockedprocesses,
47+
service.sleepingprocesses,
48+
];
49+
setData(data.concat([temp]));
50+
}
51+
);
52+
// temp = [ string, [], [], [] ]
53+
// setTime(healthData[0].time); //push
54+
// setCpuSpeed(healthData[0].cpuspeed); //push
55+
}
56+
}, [healthData]);
57+
3058
const sizeSwitch = sizing === 'all' ? all : solo;
3159

32-
return (
33-
<Plot
34-
data={[
35-
{
60+
interface DataObject {
61+
type: any;
62+
y: any;
63+
mode: any;
64+
name: any;
65+
marker: {
66+
color: any;
67+
size: any;
68+
};
69+
}
70+
// interface DataObject {
71+
// type: string;
72+
// y: string | [];
73+
// mode: string;
74+
// name: string;
75+
// marker: {
76+
// color: string;
77+
// size: number;
78+
// };
79+
// }
80+
81+
let plotlyData: DataObject[][] = [];
82+
83+
plotlyData = data.map(dataArr => {
84+
// eslint-disable-next-line no-bitwise
85+
const newLocal = 1 << 24;
86+
const randomColor = '#' + `${(newLocal * Math.random() || 0).toString(16)}`;
87+
const tempArr: DataObject[] = [];
88+
for (let i = 1; i < dataArr.length; i++) {
89+
// console.log(dataArr[i], i);
90+
if (i === 1) {
91+
const temp: DataObject = {
3692
type: 'scattergl',
37-
y: runningProcesses,
93+
y: dataArr[i],
3894
mode: 'markers',
3995
name: 'Running Processes',
4096
marker: {
41-
color: '#3788fc',
97+
color: randomColor,
4298
size: 3,
4399
},
44-
},
45-
{
100+
};
101+
tempArr.push(temp);
102+
} else if (i === 2) {
103+
const temp: DataObject = {
46104
type: 'scatter',
47-
y: blockedProcesses,
105+
y: dataArr[i],
48106
mode: 'markers',
49107
name: 'Blocked Processes',
50108
marker: {
51-
color: '#fc4039',
109+
color: randomColor,
52110
size: 3,
53111
},
54-
},
55-
{
112+
};
113+
tempArr.push(temp);
114+
} else {
115+
const temp: DataObject = {
56116
type: 'scatter',
57-
y: sleepingProcesses,
117+
y: dataArr[i],
58118
mode: 'markers',
59119
name: 'Sleeping Processes',
60120
marker: {
61-
color: '#4b54ea',
121+
color: randomColor,
62122
size: 3,
63123
},
64-
},
65-
]}
124+
};
125+
tempArr.push(temp);
126+
}
127+
}
128+
129+
return tempArr;
130+
});
131+
132+
return (
133+
<Plot
134+
data={[...plotlyData.flat()]}
66135
layout={{
67136
title: 'Process Overview',
68137
...sizeSwitch,

0 commit comments

Comments
 (0)