Skip to content

Commit 9382c4d

Browse files
DennisLpzDennisLpz
committed
Merge branch 'main' of https://github.com/oslabs-beta/reactime into main
2 parents a90eead + a92da3d commit 9382c4d

File tree

7 files changed

+202
-134
lines changed

7 files changed

+202
-134
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { schemeSet3 } from 'd3-scale-chromatic';
1212
import snapshots from './snapshots';
1313
import { onHover, onHoverExit } from '../actions/actions';
1414
import { useStoreContext } from '../store';
15+
import { save } from '../actions/actions';
1516

1617
/* TYPESCRIPT */
1718
interface data {
@@ -74,7 +75,6 @@ const BarGraph = (props) => {
7475
detectBounds: true,
7576
scroll: true,
7677
});
77-
7878
const keys = Object.keys(data.componentData);
7979

8080
// data accessor (used to generate scales) and formatter (add units for on hover box)
@@ -103,8 +103,35 @@ const BarGraph = (props) => {
103103
const yMax = height - margin.top - 150;
104104
snapshotIdScale.rangeRound([0, xMax]);
105105
renderingScale.range([yMax, 0]);
106+
107+
const toStorage = {
108+
currentTab,
109+
title: tabs[currentTab]['title'],
110+
data,
111+
};
112+
113+
const animateButton = function (e) {
114+
e.preventDefault;
115+
e.target.classList.add('animate');
116+
e.target.innerHTML = 'Saved!';
117+
setTimeout(function () {
118+
e.target.innerHTML = 'Save Series';
119+
e.target.classList.remove('animate');
120+
}, 1000);
121+
};
122+
const classname = document.getElementsByClassName('save-series-button');
123+
for (let i = 0; i < classname.length; i++) {
124+
classname[i].addEventListener('click', animateButton, false);
125+
}
106126
return (
107127
<div>
128+
<button
129+
className='save-series-button'
130+
onClick={(e) => {
131+
dispatch(save(toStorage))
132+
}}>
133+
Save Series
134+
</button>
108135
<svg ref={containerRef} width={width} height={height}>
109136
{}
110137
<rect
@@ -122,7 +149,7 @@ const BarGraph = (props) => {
122149
yScale={renderingScale}
123150
width={xMax}
124151
height={yMax}
125-
stroke="black"
152+
stroke='black'
126153
strokeOpacity={0.1}
127154
xOffset={snapshotIdScale.bandwidth() / 2}
128155
/>
@@ -178,6 +205,8 @@ const BarGraph = (props) => {
178205
)
179206
}
180207
</BarStack>
208+
209+
181210
</Group>
182211
<AxisLeft
183212
top={margin.top}
@@ -208,16 +237,16 @@ const BarGraph = (props) => {
208237
/>
209238
<Text
210239
x={-xMax / 2}
211-
y="15"
212-
transform="rotate(-90)"
240+
y='15'
241+
transform='rotate(-90)'
213242
fontSize={12}
214-
fill="#FFFFFF"
243+
fill='#FFFFFF'
215244
>
216-
Rendering Time (ms)
245+
Rendering Time (ms)
217246
</Text>
218-
<br/>
219-
<Text x={(xMax / 2) + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
220-
Snapshot ID
247+
<br />
248+
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
249+
Snapshot ID
221250
</Text>
222251
</svg>
223252
{/* FOR HOVER OVER DISPLAY */}

‎src/app/components/BarGraphComparison.tsx

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import FormHelperText from '@material-ui/core/FormHelperText';
1919
import snapshots from './snapshots';
2020
import { onHover, onHoverExit } from '../actions/actions';
2121
import { useStoreContext } from '../store';
22-
import { save } from '../actions/actions';
22+
// import { save } from '../actions/actions';
2323
/* TYPESCRIPT */
2424
interface data {
2525
snapshotId?: string;
@@ -102,14 +102,14 @@ const BarGraphComparison = (props) => {
102102
const getSnapshotId = (d: snapshot) => d.snapshotId;
103103
const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
104104
const formatRenderTime = (time) => `${time} ms `;
105-
105+
const getCurrentTab = (storedSeries) => storedSeries.currentTab;
106106
// create visualization SCALES with cleaned data
107+
//const xAxisPoints = [...titleFilter(comparison).map(getTabID), currentTab];
107108
//the domain array elements will place the bars along the x-axis
109+
const xAxisPoints = ['currentTab', 'comparison']; //[1.0.,2.0]
110+
//{ currentTab : 1 }, {currentTab : 2 }
108111
const snapshotIdScale = scaleBand<string>({
109-
domain: [
110-
`Current Tab Series`,
111-
`Series ${!comparison[series] ? null : series + 1}`,
112-
],
112+
domain: xAxisPoints,
113113
padding: 0.2,
114114
});
115115
// calculateMax
@@ -165,36 +165,48 @@ const BarGraphComparison = (props) => {
165165

166166
const handleChange = (event) => {
167167
setSeries(event.target.value);
168+
setXpoints();
168169
};
169170

170171
const handleClose = () => {
171172
setOpen(false);
173+
setXpoints();
172174
};
173175

174176
const handleOpen = () => {
175177
setOpen(true);
178+
setXpoints();
176179
};
177180

178-
const toStorage = {
179-
currentTab,
180-
title: tabs[currentTab]['title'],
181-
data,
182-
};
183-
181+
//manually assignin X -axis points with tab ID.
182+
function setXpointsComparison() {
183+
comparison[series].data.barStack.forEach((elem) => {
184+
elem.currentTab = 'comparison';
185+
});
186+
//comparison[series].data.barStack.currentTab = currentTab;
187+
return comparison[series].data.barStack;
188+
}
189+
function setXpointsCurrentTab() {
190+
data.barStack.forEach((element) => {
191+
element.currentTab = 'currentTab';
192+
});
193+
return data.barStack;
194+
}
195+
//console.log('set x on current bar', setXpointsCurrentTab());
184196
return (
185197
<div>
186-
<div className="series-options-container">
187-
<div className="snapshotId-header">
198+
<div className='series-options-container'>
199+
<div className='snapshotId-header'>
188200
{' '}
189201
Snapshot ID: {currentIndex + 1}{' '}
190202
</div>
191203

192-
<div className="dropdown-and-save-series-container">
193-
<FormControl variant="outlined" className={classes.formControl}>
204+
<div className='dropdown-and-save-series-container'>
205+
<FormControl variant='outlined' className={classes.formControl}>
194206
<Select
195207
style={{ color: 'white' }}
196-
labelId="simple-select-outlined-label"
197-
id="simple-select-outlined"
208+
labelId='simple-select-outlined-label'
209+
id='simple-select-outlined'
198210
className={classes.select}
199211
open={open}
200212
onClose={handleClose}
@@ -213,13 +225,6 @@ const BarGraphComparison = (props) => {
213225
)}
214226
</Select>
215227
</FormControl>
216-
217-
<button
218-
className="save-series-button"
219-
onClick={() => dispatch(save(toStorage))}
220-
>
221-
Save Series
222-
</button>
223228
</div>
224229
</div>
225230

@@ -240,28 +245,27 @@ const BarGraphComparison = (props) => {
240245
yScale={renderingScale}
241246
width={xMax}
242247
height={yMax}
243-
stroke="black"
248+
stroke='black'
244249
strokeOpacity={0.1}
245250
xOffset={snapshotIdScale.bandwidth() / 2}
246251
/>
247252
<Group top={margin.top} left={margin.left}>
248253
<BarStack
249254
// OG Barstack
250-
data={data.barStack}
255+
data={setXpointsCurrentTab()}
251256
keys={keys}
252-
x={getSnapshotId}
257+
x={getCurrentTab}
253258
xScale={snapshotIdScale}
254259
yScale={renderingScale}
255260
color={colorScale}
256261
>
257262
{(barStacks) =>
258263
barStacks.map((barStack, idx) => {
259264
const bar = barStack.bars[currentIndex];
260-
261265
return (
262266
<rect
263267
key={`bar-stack-${idx}-NewView`}
264-
x={bar.x + 30}
268+
x={bar.x}
265269
y={bar.y}
266270
height={bar.height === 0 ? null : bar.height}
267271
width={bar.width}
@@ -295,9 +299,9 @@ const BarGraphComparison = (props) => {
295299
</BarStack>
296300
<BarStack
297301
// Comparison Barstack
298-
data={!comparison[series] ? [] : comparison[series].data.barStack}
302+
data={!comparison[series] ? [] : setXpointsComparison()}
299303
keys={keys}
300-
x={getSnapshotId}
304+
x={getCurrentTab}
301305
xScale={snapshotIdScale}
302306
yScale={renderingScale}
303307
color={colorScale}
@@ -308,11 +312,10 @@ const BarGraphComparison = (props) => {
308312
return <h1>No Comparison</h1>;
309313
}
310314
const bar = barStack.bars[currentIndex];
311-
312315
return (
313316
<rect
314317
key={`bar-stack-${idx}-${bar.index}`}
315-
x={225}
318+
x={bar.x}
316319
y={bar.y}
317320
height={bar.height === 0 ? null : bar.height}
318321
width={bar.width}
@@ -374,14 +377,14 @@ const BarGraphComparison = (props) => {
374377
/>
375378
<Text
376379
x={-xMax / 2}
377-
y="15"
378-
transform="rotate(-90)"
380+
y='15'
381+
transform='rotate(-90)'
379382
fontSize={12}
380-
fill="#FFFFFF"
383+
fill='#FFFFFF'
381384
>
382385
Rendering Time (ms)
383386
</Text>
384-
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
387+
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill='#FFFFFF'>
385388
Series ID
386389
</Text>
387390
</svg>

‎src/app/components/PerformanceVisx.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const allStorage = () => {
8989
return values;
9090
};
9191

92-
// Get snapshot Ids for the regular bar graph view.
92+
// Gets snapshot Ids for the regular bar graph view.
9393
const getSnapshotIds = (obj, snapshotIds = []): string[] => {
9494
snapshotIds.push(`${obj.name}.${obj.branch}`);
9595
if (obj.children) {
@@ -149,43 +149,43 @@ const PerformanceVisx = (props: BarStackProps) => {
149149
if (hierarchy) {
150150
return <RenderingFrequency data={data.componentData} />;
151151
}
152-
return <div className="noState">{NO_STATE_MSG}</div>;
152+
return <div className='noState'>{NO_STATE_MSG}</div>;
153153
};
154154

155155
return (
156156
<Router>
157-
<div className="performance-nav-bar-container">
157+
<div className='performance-nav-bar-container'>
158158
<NavLink
159-
className="router-link-performance"
159+
className='router-link-performance'
160160
// className="router-link"
161-
activeClassName="is-active"
161+
activeClassName='is-active'
162162
exact
163-
to="/"
163+
to='/'
164164
>
165165
Snapshots View
166166
</NavLink>
167167
<NavLink
168-
className="router-link-performance"
168+
className='router-link-performance'
169169
// className="router-link"
170-
activeClassName="is-active"
171-
to="/comparison"
170+
activeClassName='is-active'
171+
to='/comparison'
172172
>
173173
Comparison View
174174
</NavLink>
175175
<NavLink
176-
className="router-link-performance"
176+
className='router-link-performance'
177177
// className="router-link"
178-
activeClassName="is-active"
179-
to="/componentdetails"
178+
activeClassName='is-active'
179+
to='/componentdetails'
180180
>
181181
Component Details
182182
</NavLink>
183183
</div>
184184

185185
<Switch>
186-
<Route path="/comparison" render={renderComparisonBargraph} />
187-
<Route path="/componentdetails" render={renderComponentDetailsView} />
188-
<Route path="/" render={renderBargraph} />
186+
<Route path='/comparison' render={renderComparisonBargraph} />
187+
<Route path='/componentdetails' render={renderComponentDetailsView} />
188+
<Route path='/' render={renderBargraph} />
189189
</Switch>
190190
</Router>
191191
);

0 commit comments

Comments
 (0)