Skip to content

Commit c8d2997

Browse files
jcpoirier20jcpoirier20
committed
Multiple plots on chart in progress. Finishing plotly data generator function.
1 parent 162e7d2 commit c8d2997

2 files changed

Lines changed: 139 additions & 100 deletions

File tree

‎app/charts/HealthChart.tsx‎

Lines changed: 86 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@ import moment from 'moment';
22
import React, { useState } from 'react';
33
import Plot from 'react-plotly.js';
44
import { all, solo as soloStyle } from './sizeSwitch';
5+
import { getTime } from '../context/helpers';
56

67
interface HealthChartProps {
78
key: string;
8-
renderService: string;
9-
metric: string;
10-
timeList: any;
11-
valueList: any;
9+
serviceName: string;
10+
// metric: string;
11+
categoryName: string;
12+
metrics: any[];
13+
timeList: any[];
14+
// valueList: any;
1215
sizing: string;
1316
colourGenerator: Function;
1417
}
@@ -19,83 +22,98 @@ interface SoloStyles {
1922
}
2023

2124
const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
22-
const { renderService, metric, timeList, valueList, sizing, colourGenerator } = props;
25+
// const { renderService, metric, timeList, valueList, sizing, colourGenerator } = props;
26+
const { serviceName, categoryName, metrics, timeList, sizing, colourGenerator } = props;
2327
const [solo, setSolo] = useState<SoloStyles | null>(null);
28+
// metrics = specific metrics in categories
29+
// temporary y-axis values for testing purposes
30+
const valueList = metrics[0].books[0].activememory_in_bytes
31+
// filter through metrics to desired metrics and then plot them
32+
33+
function generatePlotlyDataObjects(metricsArray) {
34+
// iterate through the metricsArray
35+
// each element is an array of num data (y-axis)
36+
// generate a plotly data object to add to an array that will be passed into our plotly chart's data prop
37+
38+
}
39+
40+
41+
2442
setInterval(() => {
2543
if (solo !== soloStyle) {
2644
setSolo(soloStyle);
2745
}
2846
}, 20);
2947

3048
const createChart = () => {
31-
//
32-
const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
33-
const reverseTimeArr = timeArr.reverse()
34-
const hashedColour = colourGenerator(renderService);
35-
const re = /_/g;
36-
let plotlyData: {
37-
name: any;
38-
x: any;
39-
y: any;
40-
type: any;
41-
mode: any;
42-
marker: { color: string };
43-
};
44-
plotlyData = {
45-
name: metric.replace(re, " "),
46-
x: reverseTimeArr, //reversed for better UX
47-
y: valueList,
48-
type: 'scattergl',
49-
mode: 'lines',
50-
marker: { color: hashedColour },
51-
};
52-
const sizeSwitch = sizing === 'all' ? all : solo;
49+
//
50+
const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
51+
const reverseTimeArr = timeArr.reverse();
52+
const hashedColour = colourGenerator(serviceName);
53+
const re = /_/g;
54+
type plotlyData = {
55+
name: any;
56+
x: any;
57+
y: any;
58+
type: any;
59+
mode: any;
60+
marker: { color: string };
61+
};
62+
// const plotlyData = {
63+
// name: metric.replace(re, ' '),
64+
// x: reverseTimeArr, //reversed for better UX
65+
// y: valueList,
66+
// type: 'scattergl',
67+
// mode: 'lines',
68+
// marker: { color: hashedColour },
69+
// };
70+
const sizeSwitch = sizing === 'all' ? all : solo;
5371

54-
return (
55-
<Plot
56-
data={[plotlyData]}
57-
config={{ displayModeBar: false }}
58-
layout={{
59-
title: `${renderService} | ${metric}`,
60-
...sizeSwitch,
61-
font: {
62-
color: '#444d56',
63-
size: 11.5,
64-
family: 'Roboto',
65-
},
66-
paper_bgcolor: 'white',
67-
plot_bgcolor: 'white',
68-
showlegend: true,
69-
legend: {
70-
orientation: 'h',
71-
xanchor: 'center',
72-
x: 0.5,
73-
y: 5,
74-
},
75-
xaxis: {
76-
title: 'Time',
77-
tickmode: 'auto',
78-
tick0: 0,
79-
dtick: 10,
80-
rangemode: 'nonnegative',
81-
mirror: false,
82-
ticks: 'outside',
83-
showline: true,
84-
},
85-
yaxis: {
86-
rangemode: 'nonnegative',
87-
title: metric,
88-
},
89-
}}
90-
/>
91-
);
72+
return (
73+
<Plot
74+
// data takes an array of objects that each have x, y, type, mode, marker
75+
data={[plotlyData]}
76+
config={{ displayModeBar: false }}
77+
layout={{
78+
title: `${serviceName} | ${categoryName}`,
79+
...sizeSwitch,
80+
font: {
81+
color: '#444d56',
82+
size: 11.5,
83+
family: 'Roboto',
84+
},
85+
paper_bgcolor: 'white',
86+
plot_bgcolor: 'white',
87+
showlegend: true,
88+
legend: {
89+
orientation: 'h',
90+
xanchor: 'center',
91+
x: 0.5,
92+
y: 5,
93+
},
94+
xaxis: {
95+
title: 'Time',
96+
tickmode: 'auto',
97+
tick0: 0,
98+
dtick: 10,
99+
rangemode: 'nonnegative',
100+
mirror: false,
101+
ticks: 'outside',
102+
showline: true,
103+
},
104+
yaxis: {
105+
rangemode: 'nonnegative',
106+
//! change this later :^)
107+
title: 'Value',
108+
},
109+
}}
110+
/>
111+
);
92112
};
93113

94114
return (
95115
<div className="chart" data-testid="Health Chart">
96-
{
97-
createChart()
98-
}
116+
{createChart()}
99117
</div>
100118
);
101119
});

‎app/containers/HealthContainer.tsx‎

Lines changed: 53 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,30 +26,32 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
2626
useEffect(() => {
2727
const temp: JSX.Element[] = [];
2828
let counter: number = 0;
29-
const datalist: any[] = healthData.healthDataList;
30-
const timelist: any[] = healthData.healthTimeList;
31-
// dataList and timeList are the EXACT same thing. An array of 4 objects. [Memory, CPU, Processes, Latency]
29+
const dataList: any[] = healthData.healthdataList;
30+
const timeList: any[] = healthData.healthTimeList;
31+
// dataList and timeList are structured the same, but time holds timestamps. An array of 4 objects. [Memory, CPU, Processes, Latency]
3232
// Each element has all its metrics.
3333
console.log('healthData object in state: ', healthData);
34-
console.log('datalist in healthcontainer is:', datalist); //array of healthDataList
35-
console.log('timelist in healthcontainer is:', timelist);
34+
console.log('dataList in healthcontainer is:', dataList); //array of healthdataList
35+
console.log('timelist in healthcontainer is:', timeList);
3636

37-
if (healthData && datalist && timelist && datalist.length > 0 && timelist.length > 0) {
37+
if (healthData && dataList && timeList && dataList.length > 0 && timeList.length > 0) {
3838
let selectedMetricsList: string[] = [];
3939
selectedMetrics.forEach(element => {
4040
if (Object.keys(element)[0] === category) {
4141
selectedMetricsList = element[category];
4242
}
4343
});
44+
// temporary solution to getting the list of times for our single chart
45+
const times: string[] = timeList[0].Memory[0].books[0].activememory_in_bytes;
4446

45-
datalist.forEach((element: {}) => {
47+
dataList.forEach((element: {}) => {
4648
const categoryName: string = Object.keys(element)[0];
4749
/*
48-
'element' is the category found in the datalist response from the server query for metrics data.
50+
'element' is the category found in the dataList response from the server query for metrics data.
4951
The above forEach method loops through the different categories.
5052
The 'category' variable is the specific category passed in to HealthContainer via prop drilling.
5153
The 'category' is the string Memory, CPU, or others that are in the Category column of the Query Selector interface.
52-
The 'categoryName' is the string that is Memory/CPU/other inside the metrics data response ('datalist' or 'timelist').
54+
The 'categoryName' is the string that is Memory/CPU/other inside the metrics data response ('dataList' or 'timelist').
5355
When the 'element'/'categoryName' matches the 'category' selected in the Query Selection interface...
5456
... it will dive into that Category object to pull out a chart for each metric selected in the selection interface.
5557
selectedMetricsList is derived from the selectedMetrics that were in the QueryContext.
@@ -58,33 +60,52 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
5860
*/
5961
if (category === categoryName) {
6062
const categoryObj: [] = element[categoryName];
63+
let filteredMetrics;
6164
for (const metricObj of categoryObj) {
65+
// serviceName = category (ex. books)
6266
const serviceName: string = Object.keys(metricObj)[0];
67+
/* serviceMetricsArr = array of ALL objects
68+
[0: {
69+
total-availle-memory-in-bytes: [numbers, more numbers, nums, woo]
70+
}]
71+
*/
6372
const serviceMetricsArr: any[] = Object.values(metricObj).flat();
73+
// const serviceTimesArr: any[] = Object.values();
6474
console.log('serviceMetricsArr: ', serviceMetricsArr); // -> array of objects.
65-
for (const serviceMetric of serviceMetricsArr) {
66-
const metric: string = Object.keys(serviceMetric)[0];
67-
const valueList = Object.values(serviceMetric)[0];
68-
const newTimeList: any = getTime(timelist, serviceName, metric, categoryName);
69-
// console.log('valueList is', valueList); //-> 50 values in an array
70-
// console.log('newTimeList array is:', newTimeList); //-> 50 values in an array
71-
if (selectedMetricsList.includes(metric)) {
72-
const re = /_/g;
73-
const newHealthChart = (
74-
<HealthChart
75-
key={`Chart${counter}`}
76-
renderService={serviceName}
77-
metric={metric.replace(re, " ")}
78-
timeList={newTimeList}
79-
valueList={valueList}
80-
sizing={props.sizing}
81-
colourGenerator={props.colourGenerator}
82-
/>
83-
);
84-
counter++;
85-
temp.push(newHealthChart);
86-
}
87-
}
75+
// filter through the desired metrics and pass them down to HealthChart
76+
selectedMetricsList.forEach(selected => {
77+
filteredMetrics = serviceMetricsArr.filter(metric => {
78+
metric[selected];
79+
});
80+
});
81+
82+
// serviceMetricsArr.filter(...selectedMetricsList)
83+
84+
// for (const serviceMetric of serviceMetricsArr) {
85+
// const metric: string = Object.keys(serviceMetric)[0];
86+
// const valueList = Object.values(serviceMetric)[0];
87+
// const newTimeList: any = getTime(timelist, serviceName, metric, categoryName);
88+
// console.log('valueList is', valueList); //-> 50 values in an array
89+
// console.log('newTimeList array is:', newTimeList); //-> 50 values in an array
90+
// if (selectedMetricsList.includes(metric)) {
91+
const re = /_/g;
92+
const newHealthChart = (
93+
<HealthChart
94+
key={`Chart${counter}`}
95+
categoryName={categoryName}
96+
serviceName={serviceName}
97+
// metric={metric.replace(re, " ")}
98+
metrics={filteredMetrics}
99+
timeList={times}
100+
// valueList={valueList}
101+
sizing={props.sizing}
102+
colourGenerator={props.colourGenerator}
103+
/>
104+
);
105+
counter++;
106+
temp.push(newHealthChart);
107+
// }
108+
// }
88109
}
89110
}
90111
});

0 commit comments

Comments
 (0)