Skip to content

Commit 0893848

Browse files
d28601581d28601581
authored
Merge pull request #5 from christinaor/c-feature-branch
Add graph functionality for individual components of each snapshot
2 parents 04d0445 + df11716 commit 0893848

File tree

1 file changed

+181
-121
lines changed

1 file changed

+181
-121
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 181 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -79,63 +79,105 @@ const BarGraph = props => {
7979
});
8080

8181
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
9482
const BarArray = [];
9583
// []
9684
//-----------:: :: 3 4
9785
let i = 0;
98-
let barWidth = (xMax / (Object.keys(data.barStack[0]).length) + 5);
86+
// let barWidth = (xMax / (Object.keys(data.barStack[0]).length) + 5);
87+
let barWidth = (xMax * (2/3)/ (Object.keys(data.barStack[0]).length - 2));
9988
console.log(data, '<-- data from snapshot');
89+
// function colorGen() {
90+
// const r = Math.floor(Math.random() * 256);
91+
// const g = Math.floor(Math.random() * 256);
92+
// const b = Math.floor(Math.random() * 256);
93+
// return "rgb(" + r + "," + g + "," + b + ", " + .5 + ")"
94+
// }
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)"]
10096
for (const [key, value] of Object.entries(data.barStack[0])) {
97+
console.log(i);
98+
console.log(xMax, '<-- xmax');
10199
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-
/>);
100+
console.log(`${key}: ${value}`);
101+
// let color = colorGen();
102+
if (i === 0) {
103+
console.log('i = 0');
104+
BarArray.push(<Bar
105+
min={'outer min'}
106+
max={'first if'}
107+
// x={100}
108+
x={xMax / (Object.keys(data.barStack[0]).length - 2)}
109+
y={yMax - value}
110+
height={value}
111+
key={key}
112+
width={barWidth}
113+
fill={rgb[Math.floor(Math.random() * 5)]}
114+
onMouseLeave={() => {
115+
dispatch(
116+
onHoverExit(data.componentData[key].rtid),
117+
(tooltipTimeout = window.setTimeout(() => {
118+
hideTooltip();
119+
}, 300)),
120+
);
121+
}}
122+
// Cursor position in window updates position of the tool tip.
123+
onMouseMove={event => {
124+
console.log(event, '<-- event from onMouseMove')
125+
console.log(key, '<--key from onMouseMove');
126+
dispatch(onHover(data.componentData[key].rtid));
127+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
128+
const top = event.clientY - margin.top - value * 25;
129+
const left = 10 + 10 * i + barWidth * i + barWidth / 2;
130+
showTooltip({
131+
tooltipData: value,
132+
tooltipTop: top,
133+
tooltipLeft: left,
134+
});
135+
}}
136+
/>);
137+
}
138+
else {
139+
BarArray.push(<Bar
140+
min={'outer min'}
141+
max={'else here'}
142+
x={(xMax / (Object.keys(data.barStack[0]).length - 2)) * (i + 1)}
143+
// x={(xMax / (Object.keys(data.barStack[0]).length - 2)) + barWidth * i}
144+
y={yMax - value * 20}
145+
height={value * 20}
146+
key={key}
147+
width={barWidth}
148+
fill={rgb[Math.floor(Math.random() * 5)]}
149+
onMouseLeave={() => {
150+
dispatch(
151+
onHoverExit(data.componentData[key].rtid),
152+
(tooltipTimeout = window.setTimeout(() => {
153+
hideTooltip();
154+
}, 300)),
155+
);
156+
}}
157+
// Cursor position in window updates position of the tool tip.
158+
onMouseMove={event => {
159+
console.log(event, '<-- event from onMouseMove')
160+
console.log(key, '<--key from onMouseMove');
161+
dispatch(onHover(data.componentData[key].rtid));
162+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
163+
const top = event.clientY - margin.top - value * 25;
164+
const left = 10 + 10 * i + barWidth * i + barWidth / 2;
165+
showTooltip({
166+
tooltipData: value,
167+
tooltipTop: top,
168+
tooltipLeft: left,
169+
});
170+
}}
171+
/>);
172+
}
173+
i++;
133174
}
134-
i++;
135-
}
136-
console.log(BarArray, '<-- barArray');
137-
return BarArray;
138-
};
175+
176+
}
177+
console.log(BarArray, '<-- barArray');
178+
return BarArray;
179+
};
180+
139181
const keys = Object.keys(data.componentData);
140182
//console.log('this is data in barGraph.tsx: ', data);
141183
//console.log('these are the data\'s keys: ', keys);
@@ -144,7 +186,7 @@ const BarGraph = props => {
144186
const getSnapshotId = (d: snapshot) => {
145187
//d coming from data.barstack post filtered data
146188
//Object.keys(data.barStack[0]).map(keys => if ())
147-
console.log('snapshot object here from getSnapshotId: ', d);
189+
// console.log('snapshot object here from getSnapshotId: ', d);
148190
return d.snapshotId;
149191
};
150192
const getComponentKeys = d => {
@@ -165,6 +207,10 @@ const BarGraph = props => {
165207
nice: true,
166208
});
167209

210+
// const componentScale = scaleBand<string>({
211+
// domain: placeholder
212+
// })
213+
168214
const colorScale = scaleOrdinal<string>({
169215
domain: keys,
170216
range: schemeSet3,
@@ -269,80 +315,94 @@ const BarGraph = props => {
269315
fill={background}
270316
rx={14}
271317
/>
272-
<Grid
273-
top={margin.top}
274-
left={margin.left}
275-
xScale={snapshotIdScale}
276-
yScale={renderingScale}
277-
width={xMax}
278-
height={yMax}
279-
stroke="black"
280-
strokeOpacity={0.1}
281-
xOffset={snapshotIdScale.bandwidth() / 2}
282-
/>
283-
{console.log('this is from the BarStack graph')}
284-
<Group top={margin.top} left={margin.left}>
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>
318+
{data.barStack.length > 1 ? (
319+
<><Grid
320+
top={margin.top}
321+
left={margin.left}
322+
xScale={snapshotIdScale}
323+
yScale={renderingScale}
324+
width={xMax}
325+
height={yMax}
326+
stroke="black"
327+
strokeOpacity={0.1}
328+
xOffset={snapshotIdScale.bandwidth() / 2} />
329+
<Group top={margin.top} left={margin.left}>
330+
<BarStack
331+
data={data.barStack}
332+
keys={keys}
333+
x={getSnapshotId}
334+
xScale={snapshotIdScale}
335+
yScale={renderingScale}
336+
color={colorScale}
337+
>
338+
{barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
339+
console.log(filteredSnapshots, '<-- filtered snap shots');
340+
console.log(data, '<-- data from barStacks');
341+
console.log(data.barStack, '<-- data.barstack');
342+
console.log(barStacks, '<--barStacks');
343+
// console.log(width, '<-- width');
344+
// console.log(height, '<-- height');
345+
console.log(bar, '<-- bar');
346+
// Hides new components if components don't exist in previous snapshots.
347+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
348+
bar.height = 0;
349+
}
350+
return (
351+
<rect
352+
key={`bar-stack-${bar.bar.data.snapshotId}-${bar.key}`}
353+
x={bar.x}
354+
y={bar.y}
355+
height={bar.height === 0 ? null : bar.height}
356+
width={bar.width}
357+
fill={bar.color}
358+
/* TIP TOOL EVENT HANDLERS */
359+
// Hides tool tip once cursor moves off the current rect.
360+
onMouseLeave={() => {
361+
dispatch(
362+
onHoverExit(data.componentData[bar.key].rtid),
363+
(tooltipTimeout = window.setTimeout(() => {
364+
hideTooltip();
365+
}, 300))
366+
);
367+
} }
368+
// Cursor position in window updates position of the tool tip.
369+
onMouseMove={event => {
370+
dispatch(onHover(data.componentData[bar.key].rtid));
371+
if (tooltipTimeout)
372+
clearTimeout(tooltipTimeout);
373+
const top = event.clientY - margin.top - bar.height;
374+
const left = bar.x + bar.width / 2;
375+
showTooltip({
376+
tooltipData: bar,
377+
tooltipTop: top,
378+
tooltipLeft: left,
379+
});
380+
} } />
381+
);
382+
}))}
383+
</BarStack>
384+
</Group></>
340385
)
341386
: (
342-
HorizontalGraph()
387+
<>
388+
{snapshotIdScale.rangeRound([0, xMax + 200])}
389+
<Grid
390+
top={margin.top}
391+
left={margin.left}
392+
xScale={snapshotIdScale}
393+
yScale={renderingScale}
394+
width={xMax}
395+
height={yMax}
396+
stroke="black"
397+
strokeOpacity={0.1}
398+
xOffset={snapshotIdScale.bandwidth() / 2}
399+
/>
400+
<Group top={margin.top} left={margin.left}>
401+
{HorizontalGraph()}
402+
</Group></>
343403
)
344-
}
345-
</Group>
404+
}
405+
346406
<AxisLeft
347407
top={margin.top}
348408
left={margin.left}

0 commit comments

Comments
 (0)