Skip to content

Commit cf28c19

Browse files
christinaorchristinaor
committed
Merge branch 'pocke' of https://github.com/oslabs-beta/reactime into c-feature-branch
2 parents d94df73 + e51fd19 commit cf28c19

File tree

2 files changed

+114
-105
lines changed

2 files changed

+114
-105
lines changed

‎src/app/components/BarGraph.tsx‎

Lines changed: 109 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// @ts-nocheck
22
import React, { useEffect, useState } from 'react';
3-
import { BarStack } from '@visx/shape';
4-
import { Bar } from '@visx/shape';
3+
import { BarStack, Bar } from '@visx/shape';
54
import { SeriesPoint } from '@visx/shape/lib/types';
65
import { Group } from '@visx/group';
76
import { Grid } from '@visx/grid';
@@ -62,8 +61,18 @@ const tooltipStyles = {
6261

6362
const BarGraph = props => {
6463
const [{ tabs, currentTab }, dispatch] = useStoreContext();
65-
const { width, height, data, comparison, setRoute, allRoutes, filteredSnapshots, snapshot, setSnapshot} = props;
66-
const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length + 1}`);
64+
const {
65+
width,
66+
height,
67+
data,
68+
comparison,
69+
setRoute,
70+
allRoutes,
71+
filteredSnapshots,
72+
snapshot,
73+
setSnapshot
74+
} = props;
75+
const [seriesNameInput, setSeriesNameInput] = useState(`Series ${comparison.length + 1}`);
6776
const {
6877
tooltipOpen,
6978
tooltipLeft,
@@ -81,34 +90,34 @@ const BarGraph = props => {
8190
const HorizontalGraph = () => {
8291
const BarArray = [];
8392
// []
84-
//-----------:: :: 3 4
93+
// -----------:: :: 3 4
8594
let i = 0;
8695
// let barWidth = (xMax / (Object.keys(data.barStack[0]).length) + 5);
87-
let barWidth = (xMax * (2/3)/ (Object.keys(data.barStack[0]).length - 2));
96+
const barWidth = (xMax * (2 / 3) / (Object.keys(data.barStack[0]).length - 2));
8897
console.log(data, '<-- data from snapshot');
8998
// function colorGen() {
9099
// const r = Math.floor(Math.random() * 256);
91100
// const g = Math.floor(Math.random() * 256);
92101
// const b = Math.floor(Math.random() * 256);
93102
// return "rgb(" + r + "," + g + "," + b + ", " + .5 + ")"
94103
// }
95-
const rgb = ["rgba(50, 100, 241, .5)", "rgba(90, 150, 217, .5)", "rgba(200, 30, 7, .5)", "rgba(23, 233, 217, .5)", "rgba(150, 227, 19, .5)"]
104+
const rgb = ['rgba(50, 100, 241, .5)', 'rgba(90, 150, 217, .5)', 'rgba(200, 30, 7, .5)', 'rgba(23, 233, 217, .5)', 'rgba(150, 227, 19, .5)'];
96105
for (const [key, value] of Object.entries(data.barStack[0])) {
97-
console.log(xMax, '<-- xmax');
98-
if (key !== 'snapshotId' && key !== 'route'){
99-
//console.log(`${key}: ${value}`);
100-
// let color = colorGen();
106+
console.log(xMax, '<-- xmax');
107+
if (key !== 'snapshotId' && key !== 'route') {
108+
// console.log(`${key}: ${value}`);
109+
// let color = colorGen();
101110
if (i === 0) {
102111
BarArray.push(<Bar
103-
min={'outer min'}
104-
max={'first if'}
112+
min="outer min"
113+
max="first if"
105114
// x={100}
106115
x={xMax / (Object.keys(data.barStack[0]).length)}
107116
y={yMax - value}
108117
height={value}
109118
key={key}
110119
width={barWidth}
111-
fill={'#62d6fb'}
120+
fill="#62d6fb"
112121
onMouseLeave={() => {
113122
dispatch(
114123
onHoverExit(data.componentData[key].rtid),
@@ -119,7 +128,7 @@ const BarGraph = props => {
119128
}}
120129
// Cursor position in window updates position of the tool tip.
121130
onMouseMove={event => {
122-
console.log(event, '<-- event from onMouseMove')
131+
console.log(event, '<-- event from onMouseMove');
123132
console.log(key, '<--key from onMouseMove');
124133
dispatch(onHover(data.componentData[key].rtid));
125134
if (tooltipTimeout) clearTimeout(tooltipTimeout);
@@ -132,18 +141,17 @@ const BarGraph = props => {
132141
});
133142
}}
134143
/>);
135-
}
136-
else {
144+
} else {
137145
BarArray.push(<Bar
138-
min={'outer min'}
139-
max={'else here'}
140-
x={(xMax / (Object.keys(data.barStack[0]).length)) * (i + 1)}
146+
min="outer min"
147+
max="else here"
148+
x={(xMax / (Object.keys(data.barStack[0]).length)) * (i + 1)}
141149
// x={(xMax / (Object.keys(data.barStack[0]).length - 2)) + barWidth * i}
142150
y={yMax - value * 20}
143151
height={value * 20}
144152
key={key}
145153
width={barWidth}
146-
fill={'#62d6fb'}
154+
fill="#62d6fb"
147155
onMouseLeave={() => {
148156
dispatch(
149157
onHoverExit(data.componentData[key].rtid),
@@ -154,7 +162,7 @@ const BarGraph = props => {
154162
}}
155163
// Cursor position in window updates position of the tool tip.
156164
onMouseMove={event => {
157-
console.log(event, '<-- event from onMouseMove')
165+
console.log(event, '<-- event from onMouseMove');
158166
console.log(key, '<--key from onMouseMove');
159167
dispatch(onHover(data.componentData[key].rtid));
160168
if (tooltipTimeout) clearTimeout(tooltipTimeout);
@@ -168,22 +176,21 @@ const BarGraph = props => {
168176
}}
169177
/>);
170178
}
171-
i++;
172-
}
173-
179+
i += 1;
174180
}
175-
console.log(BarArray, '<-- barArray');
176-
return BarArray;
177-
};
181+
}
182+
console.log(BarArray, '<-- barArray');
183+
return BarArray;
184+
};
178185

179186
const keys = Object.keys(data.componentData);
180-
//console.log('this is data in barGraph.tsx: ', data);
181-
//console.log('these are the data\'s keys: ', keys);
187+
// console.log('this is data in barGraph.tsx: ', data);
188+
// console.log('these are the data\'s keys: ', keys);
182189

183190
// data accessor (used to generate scales) and formatter (add units for on hover box)
184191
const getSnapshotId = (d: snapshot) => {
185-
//d coming from data.barstack post filtered data
186-
//Object.keys(data.barStack[0]).map(keys => if ())
192+
// d coming from data.barstack post filtered data
193+
// Object.keys(data.barStack[0]).map(keys => if ())
187194
// console.log('snapshot object here from getSnapshotId: ', d);
188195
return d.snapshotId;
189196
};
@@ -200,8 +207,8 @@ const BarGraph = props => {
200207
padding: 0.2,
201208
});
202209

203-
console.log(data,' <--data')
204-
console.log(data.maxTotalRender,' <--data.maxTotalRender')
210+
console.log(data, ' <--data');
211+
console.log(data.maxTotalRender, ' <--data.maxTotalRender');
205212

206213
const renderingScale = scaleLinear<number>({
207214
domain: [0, data.maxTotalRender],
@@ -210,16 +217,15 @@ const BarGraph = props => {
210217

211218
const componentsKeys = [];
212219
for (let key in data.barStack[0]) {
213-
if(key !== 'route' && key !== 'snapshotId' )
214-
componentsKeys.push(key);
220+
if (key !== 'route' && key !== 'snapshotId' ) componentsKeys.push(key);
215221
}
216-
console.log(data.barStack.map(getSnapshotId), '<-- check if getSnapshotId matches componentKeys')
217-
console.log(componentsKeys, '<-- componentKeys')
222+
console.log(data.barStack.map(getSnapshotId), '<-- check if getSnapshotId matches componentKeys');
223+
console.log(componentsKeys, '<-- componentKeys');
218224

219225
const componentScale = scaleBand<string>({
220226
domain: componentsKeys,
221-
padding: 0.2
222-
})
227+
padding: 0.2,
228+
});
223229

224230
const colorScale = scaleOrdinal<string>({
225231
domain: keys,
@@ -331,17 +337,18 @@ const BarGraph = props => {
331337
rx={14}
332338
/>
333339
{snapshot === 'All Snapshots' ? (
334-
<><Grid
335-
top={margin.top}
336-
left={margin.left}
337-
xScale={snapshotIdScale}
338-
yScale={renderingScale}
339-
width={xMax}
340-
height={yMax}
341-
stroke="black"
342-
strokeOpacity={0.1}
343-
xOffset={snapshotIdScale.bandwidth() / 2}
344-
/>
340+
<>
341+
<Grid
342+
top={margin.top}
343+
left={margin.left}
344+
xScale={snapshotIdScale}
345+
yScale={renderingScale}
346+
width={xMax}
347+
height={yMax}
348+
stroke="black"
349+
strokeOpacity={0.1}
350+
xOffset={snapshotIdScale.bandwidth() / 2}
351+
/>
345352
<Group top={margin.top} left={margin.left}>
346353
<BarStack
347354
data={data.barStack}
@@ -378,70 +385,70 @@ const BarGraph = props => {
378385
onHoverExit(data.componentData[bar.key].rtid),
379386
(tooltipTimeout = window.setTimeout(() => {
380387
hideTooltip();
381-
}, 300))
388+
}, 300)),
382389
);
383-
} }
390+
}}
384391
// Cursor position in window updates position of the tool tip.
385392
onMouseMove={event => {
386393
dispatch(onHover(data.componentData[bar.key].rtid));
387-
if (tooltipTimeout)
388-
clearTimeout(tooltipTimeout);
394+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
389395
const top = event.clientY - margin.top - bar.height;
390396
const left = bar.x + bar.width / 2;
391397
showTooltip({
392398
tooltipData: bar,
393399
tooltipTop: top,
394400
tooltipLeft: left,
395401
});
396-
} } />
402+
}}
403+
/>
397404
);
398405
}))}
399406
</BarStack>
400407
</Group>
401408
<AxisLeft
402-
top={margin.top}
403-
left={margin.left}
404-
scale={renderingScale}
405-
stroke={axisColor}
406-
tickStroke={axisColor}
407-
strokeWidth={2}
408-
tickLabelProps={() => ({
409-
fill: 'rgb(231, 231, 231)',
410-
fontSize: 11,
411-
verticalAnchor: 'middle',
412-
textAnchor: 'end',
413-
})}
414-
/>
415-
<AxisBottom
416-
top={yMax + margin.top}
417-
left={margin.left}
418-
scale={snapshotIdScale}
419-
stroke={axisColor}
420-
tickStroke={axisColor}
421-
strokeWidth={2}
422-
tickLabelProps={() => ({
423-
fill: 'rgb(231, 231, 231)',
424-
fontSize: 11,
425-
textAnchor: 'middle',
426-
})}
427-
/>
428-
<Text
429-
x={-xMax / 2}
430-
y="15"
431-
transform="rotate(-90)"
432-
fontSize={12}
433-
fill="#FFFFFF"
434-
>
435-
Rendering Time (ms)
436-
</Text>
437-
<br />
438-
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
439-
Snapshot ID
440-
</Text>
409+
top={margin.top}
410+
left={margin.left}
411+
scale={renderingScale}
412+
stroke={axisColor}
413+
tickStroke={axisColor}
414+
strokeWidth={2}
415+
tickLabelProps={() => ({
416+
fill: 'rgb(231, 231, 231)',
417+
fontSize: 11,
418+
verticalAnchor: 'middle',
419+
textAnchor: 'end',
420+
})}
421+
/>
422+
<AxisBottom
423+
top={yMax + margin.top}
424+
left={margin.left}
425+
scale={snapshotIdScale}
426+
stroke={axisColor}
427+
tickStroke={axisColor}
428+
strokeWidth={2}
429+
tickLabelProps={() => ({
430+
fill: 'rgb(231, 231, 231)',
431+
fontSize: 11,
432+
textAnchor: 'middle',
433+
})}
434+
/>
435+
<Text
436+
x={-xMax / 2}
437+
y="15"
438+
transform="rotate(-90)"
439+
fontSize={12}
440+
fill="#FFFFFF"
441+
>
442+
Rendering Time (ms)
443+
</Text>
444+
<br />
445+
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
446+
Snapshot ID
447+
</Text>
441448
</>
442-
)
443-
: (
444-
<>
449+
)
450+
: (
451+
<>
445452
<Grid
446453
top={margin.top}
447454
left={margin.left}
@@ -454,10 +461,10 @@ const BarGraph = props => {
454461
strokeOpacity={0.1}
455462
xOffset={componentScale.bandwidth() / 2}
456463
/>
457-
<Group top={margin.top} left={margin.left}>
464+
<Group top={margin.top} left={margin.left}>
458465
{HorizontalGraph()}
459-
</Group>
460-
<AxisLeft
466+
</Group>
467+
<AxisLeft
461468
top={margin.top}
462469
left={margin.left}
463470
scale={renderingScale}
@@ -499,7 +506,7 @@ const BarGraph = props => {
499506
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
500507
Snapshot ID
501508
</Text>
502-
</>
509+
</>
503510
)}
504511

505512
</svg>

‎src/app/components/PerformanceVisx.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@ const collectNodes = (snaps, componentName) => {
5959
if (x !== 0 && componentsResult.length !== 0) {
6060
// needs to be stringified because values are hard to determine if
6161
// true or false if in they're seen as objects
62-
if (JSON.stringify(Object.values(componentsResult[newChange ? componentsResult.length - 1 : trackChanges])[0]) !== JSON.stringify(cur.componentData.props)) {
62+
if (JSON.stringify(Object.values(componentsResult[newChange
63+
? componentsResult.length - 1 : trackChanges])[0])
64+
!== JSON.stringify(cur.componentData.props)) {
6365
newChange = true;
6466
const props = { [`snapshot${x}`]: { ...cur.componentData.props } };
6567
componentsResult.push(props);
@@ -182,7 +184,7 @@ const PerformanceVisx = (props: BarStackProps) => {
182184

183185
const [route, setRoute] = useState('All Routes');
184186
const [snapshot, setSnapshot] = useState('All Snapshots');
185-
//snapshots = 3.0
187+
// snapshots = 3.0
186188
useEffect(() => {
187189
dispatch(setCurrentTabInApp('performance'));
188190
}, [dispatch]);
@@ -289,7 +291,7 @@ const PerformanceVisx = (props: BarStackProps) => {
289291
// box2: 3.7
290292
// }
291293
// ]
292-
//console.log(filteredSnapshots, '<-- filtered snap shots');
294+
// console.log(filteredSnapshots, '<-- filtered snap shots');
293295
const renderBargraph = () => {
294296
if (hierarchy) {
295297
return (

0 commit comments

Comments
 (0)