Skip to content

Commit 81106df

Browse files
Umius-BrianUmius-Brian
committed
Implement first iteration of pie chart
1 parent 9908349 commit 81106df

7 files changed

Lines changed: 7021 additions & 1083 deletions

File tree

‎app/charts/plotly_customers.jsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { useContext } from 'react';
2+
import { Doughnut } from 'react-chartjs-2';
3+
import CommunicationsContext from '../context/OverviewContext';
4+
5+
const RequestTypesChart = (props) => {
6+
const communicationsData = useContext(CommunicationsContext).overviewData;
7+
8+
const createRequestChart = () => {
9+
const requestObj = {
10+
DELETE: 0,
11+
GET: 0,
12+
PATCH: 0,
13+
POST: 0,
14+
PUSH: 0,
15+
PUT: 0,
16+
};
17+
18+
for (let i = 0; i < communicationsData.length; i += 1) {
19+
const element = communicationsData[i];
20+
// if Mongo
21+
if (element.currentMicroservice === props.service && element.reqType in requestObj) requestObj[element.reqType] += 1;
22+
// if SQL
23+
else if (element.currentmicroservice === props.service && element.reqtype in requestObj) requestObj[element.reqtype] += 1;
24+
}
25+
26+
const chartData = {
27+
datasets: [
28+
{
29+
data: Object.values(requestObj),
30+
backgroundColor: [
31+
'rgb(2, 210, 249)',
32+
'rgb(198, 42, 177)',
33+
'rgb(252, 170, 52)',
34+
'rgb(239, 91, 145)',
35+
'rgb(182, 219, 26)',
36+
'rgb(254, 255, 0)',
37+
],
38+
},
39+
],
40+
labels: ['DELETE', 'GET', 'PATCH', 'POST', 'PUSH', 'PUT'],
41+
};
42+
43+
return <Doughnut data={chartData} />;
44+
};
45+
46+
return <div>{createRequestChart()}</div>;
47+
};
48+
49+
export default RequestTypesChart;

‎app/charts/request-type-chart.jsx‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useContext } from 'react';
2-
import { Doughnut } from 'react-chartjs-2';
2+
import Plot from 'react-plotly.js';
33
import CommunicationsContext from '../context/OverviewContext';
44

55
const RequestTypesChart = (props) => {
66
const communicationsData = useContext(CommunicationsContext).overviewData;
77

8-
const createRequestChart = () => {
8+
const createRequestChart = () => {
99
const requestObj = {
1010
DELETE: 0,
1111
GET: 0,
@@ -23,27 +23,22 @@ const RequestTypesChart = (props) => {
2323
else if (element.currentmicroservice === props.service && element.reqtype in requestObj) requestObj[element.reqtype] += 1;
2424
}
2525

26-
const chartData = {
27-
datasets: [
28-
{
29-
data: Object.values(requestObj),
30-
backgroundColor: [
31-
'rgb(2, 210, 249)',
32-
'rgb(198, 42, 177)',
33-
'rgb(252, 170, 52)',
34-
'rgb(239, 91, 145)',
35-
'rgb(182, 219, 26)',
36-
'rgb(254, 255, 0)',
37-
],
38-
},
39-
],
40-
labels: ['DELETE', 'GET', 'PATCH', 'POST', 'PUSH', 'PUT'],
41-
};
42-
43-
return <Doughnut data={chartData} />;
44-
};
26+
return (
27+
<Plot
28+
data = {[{
29+
values: Object.values(requestObj),
30+
labels: ['DELETE', 'GET', 'PATCH', 'POST', 'PUSH', 'PUT'],
31+
type: 'pie',
32+
}]}
33+
layout = {{
34+
height: 500,
35+
width: 500
36+
}}
37+
/>
38+
)
39+
}
4540

4641
return <div>{createRequestChart()}</div>;
4742
};
4843

49-
export default RequestTypesChart;
44+
export default RequestTypesChart;

‎app/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>Chronos</title>
8+
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
89
</head>
910
<body>
1011
<div id='app'></div>

0 commit comments

Comments
 (0)