Skip to content

Commit 04d0445

Browse files
AndyB909AndyB909
authored
Merge pull request #4 from oslabs-beta/peng
trying to add graph
2 parents 7df998d + ecd0b14 commit 04d0445

File tree

2 files changed

+180
-61
lines changed

2 files changed

+180
-61
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 136 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @ts-nocheck
22
import React, { useEffect, useState } from 'react';
33
import { BarStack } from '@visx/shape';
4+
import { Bar } from '@visx/shape';
45
import { SeriesPoint } from '@visx/shape/lib/types';
56
import { Group } from '@visx/group';
67
import { Grid } from '@visx/grid';
@@ -61,7 +62,7 @@ const tooltipStyles = {
6162

6263
const BarGraph = props => {
6364
const [{ tabs, currentTab }, dispatch] = useStoreContext();
64-
const { width, height, data, comparison, setRoute, allRoutes, filteredSnapshots } = props;
65+
const { width, height, data, comparison, setRoute, allRoutes, filteredSnapshots, setSnapshot} = props;
6566
const [ seriesNameInput, setSeriesNameInput ] = useState(`Series ${comparison.length + 1}`);
6667
const {
6768
tooltipOpen,
@@ -76,13 +77,78 @@ const BarGraph = props => {
7677
detectBounds: true,
7778
scroll: true,
7879
});
80+
81+
const HorizontalGraph = () => {
82+
// data.barStack =
83+
// [{snapshot: 1.0,
84+
// box1: 5.4,
85+
// box2: 3.7
86+
// box3: 2.3
87+
// box4: 5.9,
88+
// box5: 3.5
89+
// box6: 2.9
90+
// }]
91+
92+
// width = 50
93+
// -xxxxx-xxxxx
94+
const BarArray = [];
95+
// []
96+
//-----------:: :: 3 4
97+
let i = 0;
98+
let barWidth = (xMax / (Object.keys(data.barStack[0]).length) + 5);
99+
console.log(data, '<-- data from snapshot');
100+
for (const [key, value] of Object.entries(data.barStack[0])) {
101+
if (key !== 'snapshotId' && key !== 'route'){
102+
console.log(`${key}: ${value}`);
103+
BarArray.push(<Bar
104+
x={10 + 10 * i + barWidth * i}
105+
y={yMax - value * 25}
106+
height={value * 25}
107+
key={key}
108+
width={barWidth}
109+
fill="rgba(23, 233, 217, .5)"
110+
onMouseLeave={() => {
111+
dispatch(
112+
onHoverExit(data.componentData[key].rtid),
113+
(tooltipTimeout = window.setTimeout(() => {
114+
hideTooltip();
115+
}, 300)),
116+
);
117+
}}
118+
// Cursor position in window updates position of the tool tip.
119+
onMouseMove={event => {
120+
console.log(event, '<-- event from onMouseMove')
121+
console.log(key, '<--key from onMouseMove');
122+
dispatch(onHover(data.componentData[key].rtid));
123+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
124+
const top = event.clientY - margin.top - value * 25;
125+
const left = 10 + 10 * i + barWidth * i + barWidth / 2;
126+
showTooltip({
127+
tooltipData: value,
128+
tooltipTop: top,
129+
tooltipLeft: left,
130+
});
131+
}}
132+
/>);
133+
}
134+
i++;
135+
}
136+
console.log(BarArray, '<-- barArray');
137+
return BarArray;
138+
};
79139
const keys = Object.keys(data.componentData);
80-
console.log('this is data in barGraph.tsx: ', data);
81-
console.log('these are the data\'s keys: ', keys);
140+
//console.log('this is data in barGraph.tsx: ', data);
141+
//console.log('these are the data\'s keys: ', keys);
82142

83143
// data accessor (used to generate scales) and formatter (add units for on hover box)
84144
const getSnapshotId = (d: snapshot) => {
85-
console.log('snapshot object here: ', d);
145+
//d coming from data.barstack post filtered data
146+
//Object.keys(data.barStack[0]).map(keys => if ())
147+
console.log('snapshot object here from getSnapshotId: ', d);
148+
return d.snapshotId;
149+
};
150+
const getComponentKeys = d => {
151+
console.log('snapshot object here from getComponentKeys: ', d);
86152
return d.snapshotId;
87153
};
88154
const formatSnapshotId = id => `Snapshot ID: ${id}`;
@@ -161,7 +227,10 @@ const BarGraph = props => {
161227
<select
162228
labelId="demo-simple-select-label"
163229
id="routes-select"
164-
onChange={e => setRoute(e.target.value)}
230+
onChange={e => {
231+
setSnapshot('All Snapshots');
232+
setRoute(e.target.value);
233+
}}
165234
>
166235
<option>
167236
All Routes
@@ -178,7 +247,7 @@ const BarGraph = props => {
178247
<select
179248
labelId="demo-simple-select-label"
180249
id="routes-select"
181-
onChange={e => setSnapshot(e.target.value)}
250+
onChange={e => setSnapshot(e.target.value)}
182251
>
183252
<option>
184253
All Snapshots
@@ -211,57 +280,68 @@ const BarGraph = props => {
211280
strokeOpacity={0.1}
212281
xOffset={snapshotIdScale.bandwidth() / 2}
213282
/>
283+
{console.log('this is from the BarStack graph')}
214284
<Group top={margin.top} left={margin.left}>
215-
<BarStack
216-
data={data.barStack}
217-
keys={keys}
218-
x={getSnapshotId}
219-
xScale={snapshotIdScale}
220-
yScale={renderingScale}
221-
color={colorScale}
222-
>
223-
{barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
224-
console.log(width, '<-- width');
225-
console.log(height, '<-- height');
226-
console.log(bar, '<-- bar');
227-
// Hides new components if components don't exist in previous snapshots.
228-
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
229-
bar.height = 0;
230-
}
231-
return (
232-
<rect
233-
key={`bar-stack-${bar.bar.data.snapshotId}-${bar.key}`}
234-
x={bar.x}
235-
y={bar.y}
236-
height={bar.height === 0 ? null : bar.height}
237-
width={bar.width}
238-
fill={bar.color}
239-
/* TIP TOOL EVENT HANDLERS */
240-
// Hides tool tip once cursor moves off the current rect.
241-
onMouseLeave={() => {
242-
dispatch(
243-
onHoverExit(data.componentData[bar.key].rtid),
244-
(tooltipTimeout = window.setTimeout(() => {
245-
hideTooltip();
246-
}, 300)),
247-
);
248-
}}
249-
// Cursor position in window updates position of the tool tip.
250-
onMouseMove={event => {
251-
dispatch(onHover(data.componentData[bar.key].rtid));
252-
if (tooltipTimeout) clearTimeout(tooltipTimeout);
253-
const top = event.clientY - margin.top - bar.height;
254-
const left = bar.x + bar.width / 2;
255-
showTooltip({
256-
tooltipData: bar,
257-
tooltipTop: top,
258-
tooltipLeft: left,
259-
});
260-
}}
261-
/>
262-
);
263-
}))}
264-
</BarStack>
285+
{data.barStack.length > 1 ? (
286+
<BarStack
287+
data={data.barStack}
288+
keys={keys}
289+
x={getSnapshotId}
290+
xScale={snapshotIdScale}
291+
yScale={renderingScale}
292+
color={colorScale}
293+
>
294+
{barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
295+
console.log(filteredSnapshots, '<-- filtered snap shots');
296+
console.log(data, '<-- data from barStacks');
297+
console.log(data.barStack, '<-- data.barstack');
298+
console.log(barStacks, '<--barStacks');
299+
console.log(width, '<-- width');
300+
console.log(height, '<-- height');
301+
console.log(bar, '<-- bar');
302+
// Hides new components if components don't exist in previous snapshots.
303+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
304+
bar.height = 0;
305+
}
306+
return (
307+
<rect
308+
key={`bar-stack-${bar.bar.data.snapshotId}-${bar.key}`}
309+
x={bar.x}
310+
y={bar.y}
311+
height={bar.height === 0 ? null : bar.height}
312+
width={bar.width}
313+
fill={bar.color}
314+
/* TIP TOOL EVENT HANDLERS */
315+
// Hides tool tip once cursor moves off the current rect.
316+
onMouseLeave={() => {
317+
dispatch(
318+
onHoverExit(data.componentData[bar.key].rtid),
319+
(tooltipTimeout = window.setTimeout(() => {
320+
hideTooltip();
321+
}, 300)),
322+
);
323+
}}
324+
// Cursor position in window updates position of the tool tip.
325+
onMouseMove={event => {
326+
dispatch(onHover(data.componentData[bar.key].rtid));
327+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
328+
const top = event.clientY - margin.top - bar.height;
329+
const left = bar.x + bar.width / 2;
330+
showTooltip({
331+
tooltipData: bar,
332+
tooltipTop: top,
333+
tooltipLeft: left,
334+
});
335+
}}
336+
/>
337+
);
338+
}))}
339+
</BarStack>
340+
)
341+
: (
342+
HorizontalGraph()
343+
)
344+
}
265345
</Group>
266346
<AxisLeft
267347
top={margin.top}

‎src/app/components/PerformanceVisx.tsx

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,8 @@ const PerformanceVisx = (props: BarStackProps) => {
179179
const [action, setAction] = useState(false);
180180

181181
const [route, setRoute] = useState('All Routes');
182-
const [snapshot, setSnapshot] = useState('Choose Snapshot ID');
183-
182+
const [snapshot, setSnapshot] = useState('All Snapshots');
183+
//snapshots = 3.0
184184
useEffect(() => {
185185
dispatch(setCurrentTabInApp('performance'));
186186
}, [dispatch]);
@@ -246,9 +246,48 @@ const PerformanceVisx = (props: BarStackProps) => {
246246
if (route !== 'All Routes') {
247247
data.barStack = filteredSnapshots;
248248
}
249-
250-
console.log(filteredSnapshots, '<-- filtered snap shots');
251-
249+
console.log(snapshot);
250+
// snapshot = '2.0' parseInt(snapshot) = 3
251+
// 2-1 =
252+
// data.barStack[] // 0: 1.0 snapshot 1: 2.0 snapshot 2: 3.0 snapshot
253+
// data.barStack[{123123},{123123},12312,12312]
254+
// && data.barStack[parseInt(snapshot, 10) - 1]
255+
if (snapshot !== 'All Snapshots') {
256+
console.log(data.barStack, '<---------data.barstack', snapshot, '<-----snapshot');
257+
// const checkData = [];
258+
// for (let i = 0; i < data.barStack.length; i++) {
259+
// if (data.barStack[i].snapshotId === snapshot) {
260+
// console.log(data.barStack[i], '<----barstack[i]', i);
261+
// console.log(snapshot, '<--- snapshot from for loop inside performance');
262+
// console.log(route, '<--- this is a route');
263+
// checkData.push(data.barStack[i]);
264+
// break;
265+
// }
266+
// }
267+
// filter barStack to make it equal to an array of length 1 with object matching snapshot ID
268+
// const checkData = data.barStack.map(comp => {
269+
// console.log(comp);
270+
// if (comp.snapshotId === snapshot) return comp;
271+
// });
272+
const checkData = [data.barStack.find(comp => comp.snapshotId === snapshot)];
273+
// checkData = checkData.filter(element => { return element !== undefined; })
274+
console.log(checkData, '<-- checkData');
275+
if (checkData) data.barStack = checkData;
276+
}
277+
// data.barStack = [
278+
// {snapshot: 1.0,
279+
// box1: 5.4,
280+
// box2: 3.7
281+
// },
282+
// {snapshot: 2.0,
283+
// box1: 5.4,
284+
// box2: 3.7},
285+
// {snapshot: 3.0,
286+
// box1: 5.4,
287+
// box2: 3.7
288+
// }
289+
// ]
290+
//console.log(filteredSnapshots, '<-- filtered snap shots');
252291
const renderBargraph = () => {
253292
if (hierarchy) {
254293
return (

0 commit comments

Comments
 (0)