Skip to content

Commit ee9b6ce

Browse files
author
Kevin Ngo
committed
Merge branch 'main' of github.com:oslabs-beta/reactime into dlo
2 parents a6bc96c + f186970 commit ee9b6ce

File tree

18 files changed

+636
-222
lines changed

18 files changed

+636
-222
lines changed

‎package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@
9999
"jest-diff": "^26.1.0",
100100
"jest-puppeteer": "^4.4.0",
101101
"jest-runner-eslint": "^0.7.7",
102+
"jscharting-react": "^1.2.1",
102103
"puppeteer": "^5.1.0",
103104
"sass": "^1.26.10",
104105
"sass-loader": "^7.3.1",
@@ -138,25 +139,29 @@
138139
"@visx/zoom": "^1.0.0",
139140
"acorn": "^7.3.1",
140141
"acorn-jsx": "^5.2.0",
142+
"apexcharts": "^3.23.1",
141143
"cookie": "^0.4.1",
142144
"d3": "^5.16.0",
143145
"d3-scale-chromatic": "^2.0.0",
144146
"d3-shape": "^2.0.0",
145147
"d3-zoom": "^1.8.3",
146148
"immer": "^3.3.0",
147149
"jest-runner": "^26.1.0",
150+
"jscharting": "^3.0.2",
148151
"jsondiffpatch": "^0.3.11",
149152
"mixpanel": "^0.11.0",
150153
"mixpanel-browser": "^2.39.0",
151154
"prop-types": "^15.7.2",
152155
"rc-slider": "^8.7.1",
153156
"rc-tooltip": "^3.7.3",
154157
"react": "^16.13.1",
158+
"react-apexcharts": "^1.3.7",
155159
"react-dom": "^16.13.1",
156160
"react-html-parser": "^2.0.2",
157161
"react-json-tree": "^0.11.2",
158162
"react-router-dom": "^5.2.0",
159163
"react-select": "^3.1.0",
160-
"recoil": "0.0.10"
164+
"recoil": "0.0.10",
165+
"web-vitals": "^1.1.0"
161166
}
162167
}

‎src/app/actions/actions.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ export const save = (tabsObj) => ({
55
type: types.SAVE,
66
payload: tabsObj,
77
});
8-
8+
export const deleteSeries = () =>({
9+
type: types.DELETE_SERIES,
10+
})
911
export const toggleMode = (mode) => ({
1012
type: types.TOGGLE_MODE,
1113
payload: mode,

‎src/app/components/BarGraph.tsx

Lines changed: 31 additions & 0 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 {
@@ -102,8 +103,36 @@ const BarGraph = (props) => {
102103
const yMax = height - margin.top - 150;
103104
snapshotIdScale.rangeRound([0, xMax]);
104105
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+
}
105126
return (
106127
<div>
128+
<button
129+
className='save-series-button'
130+
onClick={(e) => {
131+
dispatch(save(toStorage));
132+
}}
133+
>
134+
Save Series
135+
</button>
107136
<svg ref={containerRef} width={width} height={height}>
108137
{}
109138
<rect
@@ -137,6 +166,8 @@ const BarGraph = (props) => {
137166
{(barStacks) =>
138167
barStacks.map((barStack) =>
139168
barStack.bars.map((bar, idx) => {
169+
console.log('barstacks >>>', barStack);
170+
console.log('bars >>>', bar);
140171
// hides new components if components don't exist in previous snapshots
141172
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
142173
bar.height = 0;

‎src/app/components/BarGraphComparison.tsx

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useEffect } from 'react';
2+
import React, { useEffect, useForceUpdate } from 'react';
33
import { BarStack } from '@visx/shape';
44
import { SeriesPoint } from '@visx/shape/lib/types';
55
import { Group } from '@visx/group';
@@ -19,7 +19,8 @@ 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 { deleteSeries } from '../actions/actions';
23+
2324
/* TYPESCRIPT */
2425
interface data {
2526
snapshotId?: string;
@@ -178,12 +179,6 @@ const BarGraphComparison = (props) => {
178179
setXpoints();
179180
};
180181

181-
const toStorage = {
182-
currentTab,
183-
title: tabs[currentTab]['title'],
184-
data,
185-
};
186-
187182
//manually assignin X -axis points with tab ID.
188183
function setXpointsComparison() {
189184
comparison[series].data.barStack.forEach((elem) => {
@@ -198,6 +193,19 @@ const BarGraphComparison = (props) => {
198193
});
199194
return data.barStack;
200195
}
196+
const animateButton = function (e) {
197+
e.preventDefault;
198+
e.target.classList.add('animate');
199+
e.target.innerHTML = 'Deleted!';
200+
setTimeout(function () {
201+
e.target.innerHTML = 'Clear Series';
202+
e.target.classList.remove('animate');
203+
}, 1000);
204+
};
205+
const classname = document.getElementsByClassName('delete-button');
206+
for (let i = 0; i < classname.length; i++) {
207+
classname[i].addEventListener('click', animateButton, false);
208+
}
201209
//console.log('set x on current bar', setXpointsCurrentTab());
202210
return (
203211
<div>
@@ -207,7 +215,15 @@ const BarGraphComparison = (props) => {
207215
Snapshot ID: {currentIndex + 1}{' '}
208216
</div>
209217

210-
<div className='dropdown-and-save-series-container'>
218+
<div className='dropdown-and-delete-series-container'>
219+
<button
220+
className='delete-button'
221+
onClick={(e) => {
222+
dispatch(deleteSeries());
223+
}}
224+
>
225+
Clear All Series
226+
</button>
211227
<FormControl variant='outlined' className={classes.formControl}>
212228
<Select
213229
style={{ color: 'white' }}
@@ -231,13 +247,6 @@ const BarGraphComparison = (props) => {
231247
)}
232248
</Select>
233249
</FormControl>
234-
235-
<button
236-
className='save-series-button'
237-
onClick={() => dispatch(save(toStorage))}
238-
>
239-
Save Series
240-
</button>
241250
</div>
242251
</div>
243252

@@ -275,6 +284,9 @@ const BarGraphComparison = (props) => {
275284
{(barStacks) =>
276285
barStacks.map((barStack, idx) => {
277286
const bar = barStack.bars[currentIndex];
287+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
288+
bar.height = 0;
289+
}
278290
return (
279291
<rect
280292
key={`bar-stack-${idx}-NewView`}
@@ -325,6 +337,9 @@ const BarGraphComparison = (props) => {
325337
return <h1>No Comparison</h1>;
326338
}
327339
const bar = barStack.bars[currentIndex];
340+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
341+
bar.height = 0;
342+
}
328343
return (
329344
<rect
330345
key={`bar-stack-${idx}-${bar.index}`}

‎src/app/components/StateRoute.tsx

Lines changed: 67 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { useStoreContext } from '../store';
2020
import PerformanceVisx from './PerformanceVisx';
2121
import Legend from './AtomsRelationshipLegend';
2222
import AtomsRelationship from './AtomsRelationship';
23+
import WebMetrics from './WebMetrics';
2324

2425
const History = require('./History').default;
2526
const ErrorHandler = require('./ErrorHandler').default;
@@ -41,21 +42,23 @@ export interface StateRouteProps {
4142
hierarchy: any;
4243
snapshots: [];
4344
viewIndex: number;
45+
webMetrics: object;
4446
}
4547

4648
const StateRoute = (props: StateRouteProps) => {
47-
const { snapshot, hierarchy, snapshots, viewIndex } = props;
49+
const { snapshot, hierarchy, snapshots, viewIndex, webMetrics } = props;
4850
const [{ tabs, currentTab }, dispatch] = useStoreContext();
4951
const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
5052
const isRecoil = snapshot.atomsComponents ? true : false;
53+
5154
const [noRenderData, setNoRenderData] = useState(false);
5255
// component map zoom state
5356
const [{ x, y, k }, setZoomState]: any = useState({
5457
x: 150,
5558
y: 250,
5659
k: 1,
5760
});
58-
61+
console.log('webMetrics in StateRoute Props >>>>', webMetrics);
5962
// Map
6063
const renderComponentMap = () => {
6164
if (hierarchy) {
@@ -67,7 +70,7 @@ const StateRoute = (props: StateRouteProps) => {
6770
</ParentSize>
6871
);
6972
}
70-
return <div className="noState">{NO_STATE_MSG}</div>;
73+
return <div className='noState'>{NO_STATE_MSG}</div>;
7174
};
7275

7376
// the hierarchy gets set upon the first click on the page
@@ -86,7 +89,7 @@ const StateRoute = (props: StateRouteProps) => {
8689
/>
8790
);
8891
}
89-
return <div className="noState">{NO_STATE_MSG}</div>;
92+
return <div className='noState'>{NO_STATE_MSG}</div>;
9093
};
9194

9295
const renderAtomsRelationship = () => (
@@ -110,7 +113,37 @@ const StateRoute = (props: StateRouteProps) => {
110113
if (hierarchy) {
111114
return <Tree snapshot={snapshot} />;
112115
}
113-
return <div className="noState">{NO_STATE_MSG}</div>;
116+
return <div className='noState'>{NO_STATE_MSG}</div>;
117+
};
118+
const renderWebMetrics = () => {
119+
let LCPColor, FIDColor, CLSColor, FCPColor, TTFBColor;
120+
121+
if (webMetrics.LCP <= 2000) LCPColor = "#0bce6b";
122+
if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = "#E56543";
123+
if (webMetrics.LCP > 4000 ) LCPColor = "#fc2000";
124+
if (webMetrics.FID <= 100) FIDColor = "#0bce6b";
125+
if (webMetrics.FID > 100 && webMetrics.FID <= 300 ) FIDColor = "#fc5a03";
126+
if (webMetrics.FID > 300 ) FIDColor = "#fc2000";
127+
if (webMetrics.CLS <= 0.1) FIDColor = "#0bce6b";
128+
if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25 ) CLSColor = "#fc5a03";
129+
if (webMetrics.CLS > 0.25 ) CLSColor = "#fc2000";
130+
if (webMetrics.FCP <= 9000) FCPColor = "#0bce6b";
131+
if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100 ) FCPColor = "#fc5a03";
132+
if (webMetrics.FCP > 1100 ) FCPColor = "#fc2000";
133+
if (webMetrics.TTFB <= 600) TTFBColor = "#0bce6b";
134+
if (webMetrics.TTFB > 600 ) TTFBColor = "#fc2000";
135+
136+
137+
138+
return (
139+
<div className="web-metrics-container">
140+
<WebMetrics color={LCPColor} series={(webMetrics.LCP / 2500) * 100} formatted={(val) => ((val / 100) * 2500).toFixed(2) + ' ms'} label="LCP"/>
141+
<WebMetrics color={FIDColor} series={(webMetrics.FID) * 25} formatted={(val) => ((val / 25)).toFixed(2) + ' ms'} label="FID"/>
142+
{/* <WebMetrics color={CLSColor} series={(webMetrics.CLS * 50) * 100} formatted={(val) => ((val / 100) / 50).toFixed(2)} label="CLS"/> */}
143+
<WebMetrics color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
144+
<WebMetrics color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'} label="TTFB"/>
145+
</div>
146+
);
114147
};
115148

116149
const renderPerfView = () => {
@@ -130,54 +163,61 @@ const StateRoute = (props: StateRouteProps) => {
130163
</ParentSize>
131164
);
132165
}
133-
return <div className="noState">{NO_STATE_MSG}</div>;
166+
return <div className='noState'>{NO_STATE_MSG}</div>;
134167
};
135168

136169
return (
137170
<Router>
138-
<div className="navbar">
139-
<NavLink className="router-link"
140-
activeClassName="is-active"
141-
exact to="/">
171+
<div className='navbar'>
172+
<NavLink
173+
className='router-link'
174+
activeClassName='is-active'
175+
exact
176+
to='/'
177+
>
142178
Map
143179
</NavLink>
144180
<NavLink
145-
className="router-link"
146-
activeClassName="is-active"
147-
to="/performance"
181+
className='router-link'
182+
activeClassName='is-active'
183+
to='/performance'
148184
>
149185
Performance
150186
</NavLink>
151187
<NavLink
152-
className="router-link"
153-
activeClassName="is-active"
154-
to="/history"
188+
className='router-link'
189+
activeClassName='is-active'
190+
to='/history'
155191
>
156192
History
157193
</NavLink>
158194
<NavLink
159-
className="router-link"
160-
activeClassName="is-active"
161-
to="/tree"
195+
className='router-link'
196+
activeClassName='is-active'
197+
to='/webMetrics'
162198
>
199+
Web Metrics
200+
</NavLink>
201+
<NavLink className='router-link' activeClassName='is-active' to='/tree'>
163202
Tree
164203
</NavLink>
165204
{isRecoil && (
166205
<NavLink
167-
className="router-link"
168-
activeClassName="is-active"
169-
to="/relationship"
206+
className='router-link'
207+
activeClassName='is-active'
208+
to='/relationship'
170209
>
171210
AtomsRecoil
172211
</NavLink>
173212
)}
174213
</div>
175214
<Switch>
176-
<Route path="/performance" render={renderPerfView} />
177-
<Route path="/history" render={renderHistory} />
178-
<Route path="/relationship" render={renderAtomsRelationship} />
179-
<Route path="/tree" render={renderTree} />
180-
<Route path="/" render={renderComponentMap} />
215+
<Route path='/performance' render={renderPerfView} />
216+
<Route path='/history' render={renderHistory} />
217+
<Route path='/relationship' render={renderAtomsRelationship} />
218+
<Route path='/webMetrics' render={renderWebMetrics} />
219+
<Route path='/tree' render={renderTree} />
220+
<Route path='/' render={renderComponentMap} />
181221
</Switch>
182222
</Router>
183223
);

0 commit comments

Comments
 (0)