Skip to content

Commit e728780

Browse files
d28601581d28601581
committed
trying to add graph
1 parent 870af30 commit e728780

File tree

2 files changed

+100
-56
lines changed

2 files changed

+100
-56
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 93 additions & 53 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,12 +77,38 @@ const BarGraph = props => {
7677
detectBounds: true,
7778
scroll: true,
7879
});
80+
81+
const HorizontalGraph = () => {
82+
const BarArray = [];
83+
let i = 0;
84+
for (const [key, value] of Object.entries(data.barStack[0])) {
85+
if (key !== 'snapshotId' && key !== 'route'){
86+
console.log(`${key}: ${value}`);
87+
BarArray.push(<Bar
88+
x={10 + 30 * i}
89+
y={10}
90+
height={value * 25}
91+
width={20}
92+
fill="rgba(23, 233, 217, .5)"
93+
/>);
94+
}
95+
i++;
96+
}
97+
console.log(BarArray, '<-- barArray');
98+
return BarArray;
99+
};
79100
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);
101+
//console.log('this is data in barGraph.tsx: ', data);
102+
//console.log('these are the data\'s keys: ', keys);
82103

83104
// data accessor (used to generate scales) and formatter (add units for on hover box)
84105
const getSnapshotId = (d: snapshot) => {
106+
//d coming from data.barstack post filtered data
107+
//Object.keys(data.barStack[0]).map(keys => if ())
108+
console.log('snapshot object here: ', d);
109+
return d.snapshotId;
110+
};
111+
const getComponentKeys = d => {
85112
console.log('snapshot object here: ', d);
86113
return d.snapshotId;
87114
};
@@ -212,56 +239,69 @@ const BarGraph = props => {
212239
xOffset={snapshotIdScale.bandwidth() / 2}
213240
/>
214241
<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>
242+
243+
{data.barStack.length > 1 ? (
244+
<BarStack
245+
data={data.barStack}
246+
keys={keys}
247+
x={getSnapshotId}
248+
xScale={snapshotIdScale}
249+
yScale={renderingScale}
250+
color={colorScale}
251+
>
252+
{barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
253+
console.log(filteredSnapshots, '<-- filtered snap shots');
254+
console.log(data, '<-- data');
255+
console.log(data.barStack, '<-- data.barstack');
256+
console.log(barStacks, '<--barStacks');
257+
console.log(width, '<-- width');
258+
console.log(height, '<-- height');
259+
console.log(bar, '<-- bar');
260+
// Hides new components if components don't exist in previous snapshots.
261+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
262+
bar.height = 0;
263+
}
264+
return (
265+
<rect
266+
key={`bar-stack-${bar.bar.data.snapshotId}-${bar.key}`}
267+
x={bar.x}
268+
y={bar.y}
269+
height={bar.height === 0 ? null : bar.height}
270+
width={bar.width}
271+
fill={bar.color}
272+
/* TIP TOOL EVENT HANDLERS */
273+
// Hides tool tip once cursor moves off the current rect.
274+
onMouseLeave={() => {
275+
dispatch(
276+
onHoverExit(data.componentData[bar.key].rtid),
277+
(tooltipTimeout = window.setTimeout(() => {
278+
hideTooltip();
279+
}, 300)),
280+
);
281+
}}
282+
// Cursor position in window updates position of the tool tip.
283+
onMouseMove={event => {
284+
dispatch(onHover(data.componentData[bar.key].rtid));
285+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
286+
const top = event.clientY - margin.top - bar.height;
287+
const left = bar.x + bar.width / 2;
288+
showTooltip({
289+
tooltipData: bar,
290+
tooltipTop: top,
291+
tooltipLeft: left,
292+
});
293+
}}
294+
/>
295+
);
296+
}))}
297+
</BarStack>
298+
)
299+
: (
300+
HorizontalGraph()
301+
)
302+
}
303+
304+
265305
</Group>
266306
<AxisLeft
267307
top={margin.top}

‎src/app/components/PerformanceVisx.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ 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');
182+
const [snapshot, setSnapshot] = useState('All Snapshots');
183183

184184
useEffect(() => {
185185
dispatch(setCurrentTabInApp('performance'));
@@ -246,9 +246,13 @@ const PerformanceVisx = (props: BarStackProps) => {
246246
if (route !== 'All Routes') {
247247
data.barStack = filteredSnapshots;
248248
}
249+
console.log(snapshot);
250+
if (snapshot !== 'All Snapshots') {
251+
console.log(data.barStack, '<---------data.barstack', snapshot, '<-----snapshot', (parseInt(snapshot, 10) - 1), '<-----parseInt-1' )
252+
data.barStack = [data.barStack[parseInt(snapshot, 10) - 1]];
253+
}
249254

250-
console.log(filteredSnapshots, '<-- filtered snap shots');
251-
255+
//console.log(filteredSnapshots, '<-- filtered snap shots');
252256
const renderBargraph = () => {
253257
if (hierarchy) {
254258
return (

0 commit comments

Comments
 (0)