Skip to content

Commit 2ef0e04

Browse files
christinaorchristinaor
committed
Merge branch 'pocke' into c-feature-branch
2 parents cf28c19 + 751ff56 commit 2ef0e04

File tree

2 files changed

+57
-17
lines changed

2 files changed

+57
-17
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 54 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ const BarGraph = props => {
8686
detectBounds: true,
8787
scroll: true,
8888
});
89+
console.log(snapshot, '<--current snapshot');
8990

9091
const HorizontalGraph = () => {
9192
const BarArray = [];
@@ -94,6 +95,7 @@ const BarGraph = props => {
9495
let i = 0;
9596
// let barWidth = (xMax / (Object.keys(data.barStack[0]).length) + 5);
9697
const barWidth = (xMax * (2 / 3) / (Object.keys(data.barStack[0]).length - 2));
98+
console.log(barWidth, '<-- barWidth')
9799
console.log(data, '<-- data from snapshot');
98100
// function colorGen() {
99101
// const r = Math.floor(Math.random() * 256);
@@ -102,7 +104,10 @@ const BarGraph = props => {
102104
// return "rgb(" + r + "," + g + "," + b + ", " + .5 + ")"
103105
// }
104106
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)'];
107+
const gap = xMax / (Object.keys(data.barStack[0]).length);
108+
console.log(gap, i, '<-- gap , i');
105109
for (const [key, value] of Object.entries(data.barStack[0])) {
110+
const toolTipData = {key: key, value: value}
106111
console.log(xMax, '<-- xmax');
107112
if (key !== 'snapshotId' && key !== 'route') {
108113
// console.log(`${key}: ${value}`);
@@ -112,9 +117,9 @@ const BarGraph = props => {
112117
min="outer min"
113118
max="first if"
114119
// x={100}
115-
x={xMax / (Object.keys(data.barStack[0]).length)}
116-
y={yMax - value}
117-
height={value}
120+
x={gap}
121+
y={yMax - value * 25}
122+
height={value * 25}
118123
key={key}
119124
width={barWidth}
120125
fill="#62d6fb"
@@ -133,9 +138,10 @@ const BarGraph = props => {
133138
dispatch(onHover(data.componentData[key].rtid));
134139
if (tooltipTimeout) clearTimeout(tooltipTimeout);
135140
const top = event.clientY - margin.top - value * 25;
136-
const left = 10 + 10 * i + barWidth * i + barWidth / 2;
141+
// const left = 10 + 10 * i + barWidth * i + barWidth / 2;
142+
const left = gap + barWidth / 2;
137143
showTooltip({
138-
tooltipData: value,
144+
tooltipData: toolTipData,
139145
tooltipTop: top,
140146
tooltipLeft: left,
141147
});
@@ -145,10 +151,10 @@ const BarGraph = props => {
145151
BarArray.push(<Bar
146152
min="outer min"
147153
max="else here"
148-
x={(xMax / (Object.keys(data.barStack[0]).length)) * (i + 1)}
154+
x={gap * (i + 1)}
149155
// x={(xMax / (Object.keys(data.barStack[0]).length - 2)) + barWidth * i}
150-
y={yMax - value * 20}
151-
height={value * 20}
156+
y={yMax - value * 25}
157+
height={value * 25}
152158
key={key}
153159
width={barWidth}
154160
fill="#62d6fb"
@@ -167,9 +173,10 @@ const BarGraph = props => {
167173
dispatch(onHover(data.componentData[key].rtid));
168174
if (tooltipTimeout) clearTimeout(tooltipTimeout);
169175
const top = event.clientY - margin.top - value * 25;
170-
const left = 10 + 10 * i + barWidth * i + barWidth / 2;
176+
// const left = 10 + 10 * i + barWidth * i + barWidth / 2;
177+
const left = gap * (i + 1) + barWidth / 2;
171178
showTooltip({
172-
tooltipData: value,
179+
tooltipData: toolTipData,
173180
tooltipTop: top,
174181
tooltipLeft: left,
175182
});
@@ -296,7 +303,7 @@ const BarGraph = props => {
296303
setRoute(e.target.value);
297304
setSnapshot('All Snapshots');
298305
const defaultSnapShot = document.querySelector('#snapshot-select');
299-
defaultSnapShot.value = 'defaultSnapShot';
306+
defaultSnapShot.value = 'All Snapshots';
300307
}}
301308
>
302309
<option>
@@ -316,7 +323,7 @@ const BarGraph = props => {
316323
id="snapshot-select"
317324
onChange={e => setSnapshot(e.target.value)}
318325
>
319-
<option value="defaultSnapShot">
326+
<option value="All Snapshots">
320327
All Snapshots
321328
</option>
322329
{filteredSnapshots.map(route => (
@@ -338,6 +345,7 @@ const BarGraph = props => {
338345
/>
339346
{snapshot === 'All Snapshots' ? (
340347
<>
348+
{ console.log(data.barStack, 'data.barStack that gives error 1') }
341349
<Grid
342350
top={margin.top}
343351
left={margin.left}
@@ -349,6 +357,8 @@ const BarGraph = props => {
349357
strokeOpacity={0.1}
350358
xOffset={snapshotIdScale.bandwidth() / 2}
351359
/>
360+
{ console.log(data.barStack, 'data.barStack that gives error 2') }
361+
352362
<Group top={margin.top} left={margin.left}>
353363
<BarStack
354364
data={data.barStack}
@@ -419,6 +429,8 @@ const BarGraph = props => {
419429
textAnchor: 'end',
420430
})}
421431
/>
432+
{ console.log(data.barStack, 'data.barStack that gives error 3') }
433+
422434
<AxisBottom
423435
top={yMax + margin.top}
424436
left={margin.left}
@@ -511,7 +523,10 @@ const BarGraph = props => {
511523

512524
</svg>
513525
{/* FOR HOVER OVER DISPLAY */}
514-
{tooltipOpen && tooltipData && (
526+
{/* Ths conditional statement displays a different tooltip
527+
configuration depending on if we are trying do display a specific
528+
snapshot through options menu or all snapshots together in bargraph */}
529+
{snapshot === 'All Snapshots' ? (tooltipOpen && tooltipData && (
515530
<TooltipInPortal
516531
key={Math.random()} // update tooltip bounds each render
517532
top={tooltipTop}
@@ -536,7 +551,32 @@ const BarGraph = props => {
536551
</small>
537552
</div>
538553
</TooltipInPortal>
539-
)}
554+
))
555+
: (tooltipOpen && tooltipData && (
556+
<TooltipInPortal
557+
key={Math.random()} // update tooltip bounds each render
558+
top={tooltipTop}
559+
left={tooltipLeft}
560+
style={tooltipStyles}
561+
>
562+
{console.log(tooltipData, '<------tooltipData')}
563+
{console.log(data.componentData, '<------data.componentData')}
564+
<div style={{ color: colorScale(tooltipData.key) }}>
565+
{' '}
566+
<strong>{tooltipData.key}</strong>
567+
{' '}
568+
</div>
569+
<div>{data.componentData[tooltipData.key].stateType}</div>
570+
<div>
571+
{' '}
572+
{formatRenderTime(tooltipData.value)}
573+
{' '}
574+
</div>
575+
<div>
576+
{' '}
577+
</div>
578+
</TooltipInPortal>
579+
))}
540580
</div>
541581
);
542582
};

‎src/app/components/PerformanceVisx.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -250,14 +250,14 @@ const PerformanceVisx = (props: BarStackProps) => {
250250
if (route !== 'All Routes') {
251251
data.barStack = filteredSnapshots;
252252
}
253-
console.log(snapshot);
253+
// console.log(snapshot);
254254
// snapshot = '2.0' parseInt(snapshot) = 3
255255
// 2-1 =
256256
// data.barStack[] // 0: 1.0 snapshot 1: 2.0 snapshot 2: 3.0 snapshot
257257
// data.barStack[{123123},{123123},12312,12312]
258258
// && data.barStack[parseInt(snapshot, 10) - 1]
259259
if (snapshot !== 'All Snapshots') {
260-
console.log(data.barStack, '<---------data.barstack', snapshot, '<-----snapshot');
260+
// console.log(data.barStack, '<---------data.barstack', snapshot, '<-----snapshot');
261261
// const checkData = [];
262262
// for (let i = 0; i < data.barStack.length; i++) {
263263
// if (data.barStack[i].snapshotId === snapshot) {
@@ -275,7 +275,7 @@ const PerformanceVisx = (props: BarStackProps) => {
275275
// });
276276
const checkData = [data.barStack.find(comp => comp.snapshotId === snapshot)];
277277
// checkData = checkData.filter(element => { return element !== undefined; })
278-
console.log(checkData, '<-- checkData');
278+
// console.log(checkData, '<-- checkData');
279279
if (checkData) data.barStack = checkData;
280280
}
281281
// data.barStack = [

0 commit comments

Comments
 (0)