Skip to content

Commit 6aa036e

Browse files
jcpoirier20beezoo10jeffreyNakelsicw
committed
Interactive HealthChart and save to .PNG
Co-authored-by: beezoo10 <beezoo10@users.noreply.github.com> Co-authored-by: jeffreyNa <jeffreyNa@users.noreply.github.com> Co-authored-by: kelsicw <kelsicw@users.noreply.github.com>
1 parent c8d2997 commit 6aa036e

2 files changed

Lines changed: 59 additions & 59 deletions

File tree

‎app/charts/HealthChart.tsx‎

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -21,23 +21,51 @@ interface SoloStyles {
2121
width: number;
2222
}
2323

24+
type plotlyData = {
25+
name: string;
26+
x: string[];
27+
y: string[];
28+
type: string;
29+
mode: string;
30+
marker: { colors: string[] };
31+
};
32+
2433
const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
25-
// const { renderService, metric, timeList, valueList, sizing, colourGenerator } = props;
34+
// 'metrics' is an array of the user-specified metrics as objects
2635
const { serviceName, categoryName, metrics, timeList, sizing, colourGenerator } = props;
2736
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
37+
const timeArr = timeList.map((el: any) => moment(el).format('kk:mm:ss'));
38+
const reverseTimeArr = timeArr.reverse();
39+
const re = /_/g;
40+
const plotlyDataObjectArray: plotlyData[] = [];
3241

33-
function generatePlotlyDataObjects(metricsArray) {
42+
// generates an array plotly data objects to add to be passed into our plotly chart's data prop
43+
const generatePlotlyDataObjects = (metricsArray, timeArray) => {
44+
console.log('metricsArray: ', metricsArray);
45+
console.log('timeArray: ', timeArray);
46+
// initalize an array of objects for output
3447
// 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-
48+
// each element is an array of num data (y-axis)
49+
metricsArray.forEach(el => {
50+
const originalMetricName = Object.keys(el)[0];
51+
const prettyMetricName = originalMetricName.replace(re, ' ');
52+
const newColor = colourGenerator(serviceName);
53+
console.log('prettyMetricName ', prettyMetricName);
54+
// plotly's data prop takes an array of objects that each have x, y, type, mode, marker
55+
const dataObject: plotlyData = {
56+
name: prettyMetricName,
57+
x: timeArray,
58+
y: el[originalMetricName],
59+
type: 'scattergl',
60+
mode: 'lines',
61+
marker: {
62+
colors: ['#fc4039', '#4b54ea', '#32b44f', '#3788fc', '#9c27b0', '#febc2c'],
63+
},
64+
};
65+
plotlyDataObjectArray.push(dataObject);
66+
});
67+
console.log('plotlydataObjectarray: ', plotlyDataObjectArray);
68+
};
4169

4270
setInterval(() => {
4371
if (solo !== soloStyle) {
@@ -46,34 +74,13 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
4674
}, 20);
4775

4876
const createChart = () => {
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-
// };
77+
generatePlotlyDataObjects(metrics, reverseTimeArr);
7078
const sizeSwitch = sizing === 'all' ? all : solo;
7179

7280
return (
7381
<Plot
74-
// data takes an array of objects that each have x, y, type, mode, marker
75-
data={[plotlyData]}
76-
config={{ displayModeBar: false }}
82+
data={plotlyDataObjectArray}
83+
config={{ displayModeBar: true }}
7784
layout={{
7885
title: `${serviceName} | ${categoryName}`,
7986
...sizeSwitch,

‎app/containers/HealthContainer.tsx‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ 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;
29+
const dataList: any[] = healthData.healthDataList;
3030
const timeList: any[] = healthData.healthTimeList;
3131
// 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.
33-
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);
33+
// console.log('healthData object in state: ', healthData);
34+
// console.log('dataList in healthcontainer is:', dataList);
35+
// console.log('timelist in healthcontainer is:', timeList);
3636

3737
if (healthData && dataList && timeList && dataList.length > 0 && timeList.length > 0) {
3838
let selectedMetricsList: string[] = [];
@@ -41,7 +41,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
4141
selectedMetricsList = element[category];
4242
}
4343
});
44-
// temporary solution to getting the list of times for our single chart
44+
// ***ALERT*** temporary solution to getting the list of times for our single chart
4545
const times: string[] = timeList[0].Memory[0].books[0].activememory_in_bytes;
4646

4747
dataList.forEach((element: {}) => {
@@ -60,34 +60,27 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
6060
*/
6161
if (category === categoryName) {
6262
const categoryObj: [] = element[categoryName];
63-
let filteredMetrics;
63+
const filteredMetrics: any[] = [];
6464
for (const metricObj of categoryObj) {
6565
// serviceName = category (ex. books)
66-
const serviceName: string = Object.keys(metricObj)[0];
67-
/* serviceMetricsArr = array of ALL objects
66+
const serviceName: string = Object.keys(metricObj)[0];
67+
console.log('metricObj: ', metricObj)
68+
const serviceMetricsArr: any[] = Object.values(metricObj).flat();
69+
console.log('serviceMetricsArr: ', serviceMetricsArr); // -> array of arrays containing numerical data.
70+
/* serviceMetricsArr = array of all metric objects
6871
[0: {
6972
total-availle-memory-in-bytes: [numbers, more numbers, nums, woo]
7073
}]
7174
*/
72-
const serviceMetricsArr: any[] = Object.values(metricObj).flat();
73-
// const serviceTimesArr: any[] = Object.values();
74-
console.log('serviceMetricsArr: ', serviceMetricsArr); // -> array of objects.
75-
// filter through the desired metrics and pass them down to HealthChart
75+
76+
// filters through the desired metrics and pass them down to HealthChart
7677
selectedMetricsList.forEach(selected => {
77-
filteredMetrics = serviceMetricsArr.filter(metric => {
78-
metric[selected];
78+
serviceMetricsArr.forEach(metric => {
79+
if (metric[selected]) filteredMetrics.push(metric);
7980
});
8081
});
82+
console.log('filteredMetrics: ', filteredMetrics);
8183

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)) {
9184
const re = /_/g;
9285
const newHealthChart = (
9386
<HealthChart

0 commit comments

Comments
 (0)