Skip to content

Commit f186970

Browse files
demircanerdemircaner
authored
Merge pull request #21 from oslabs-beta/staging
Merging Sidebar Animation and Webmetric feature
2 parents a92da3d + 957db15 commit f186970

File tree

17 files changed

+534
-173
lines changed

17 files changed

+534
-173
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: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ const BarGraph = (props) => {
104104
snapshotIdScale.rangeRound([0, xMax]);
105105
renderingScale.range([yMax, 0]);
106106

107-
const toStorage = {
107+
const toStorage = {
108108
currentTab,
109109
title: tabs[currentTab]['title'],
110110
data,
111-
};
112-
111+
};
112+
113113
const animateButton = function (e) {
114114
e.preventDefault;
115115
e.target.classList.add('animate');
@@ -126,11 +126,12 @@ const BarGraph = (props) => {
126126
return (
127127
<div>
128128
<button
129-
className='save-series-button'
130-
onClick={(e) => {
131-
dispatch(save(toStorage))
132-
}}>
133-
Save Series
129+
className='save-series-button'
130+
onClick={(e) => {
131+
dispatch(save(toStorage));
132+
}}
133+
>
134+
Save Series
134135
</button>
135136
<svg ref={containerRef} width={width} height={height}>
136137
{}
@@ -165,6 +166,8 @@ const BarGraph = (props) => {
165166
{(barStacks) =>
166167
barStacks.map((barStack) =>
167168
barStack.bars.map((bar, idx) => {
169+
console.log('barstacks >>>', barStack);
170+
console.log('bars >>>', bar);
168171
// hides new components if components don't exist in previous snapshots
169172
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
170173
bar.height = 0;
@@ -205,8 +208,6 @@ const BarGraph = (props) => {
205208
)
206209
}
207210
</BarStack>
208-
209-
210211
</Group>
211212
<AxisLeft
212213
top={margin.top}

‎src/app/components/BarGraphComparison.tsx

Lines changed: 31 additions & 3 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;
@@ -192,6 +193,19 @@ const BarGraphComparison = (props) => {
192193
});
193194
return data.barStack;
194195
}
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+
}
195209
//console.log('set x on current bar', setXpointsCurrentTab());
196210
return (
197211
<div>
@@ -201,7 +215,15 @@ const BarGraphComparison = (props) => {
201215
Snapshot ID: {currentIndex + 1}{' '}
202216
</div>
203217

204-
<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>
205227
<FormControl variant='outlined' className={classes.formControl}>
206228
<Select
207229
style={{ color: 'white' }}
@@ -262,6 +284,9 @@ const BarGraphComparison = (props) => {
262284
{(barStacks) =>
263285
barStacks.map((barStack, idx) => {
264286
const bar = barStack.bars[currentIndex];
287+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
288+
bar.height = 0;
289+
}
265290
return (
266291
<rect
267292
key={`bar-stack-${idx}-NewView`}
@@ -312,6 +337,9 @@ const BarGraphComparison = (props) => {
312337
return <h1>No Comparison</h1>;
313338
}
314339
const bar = barStack.bars[currentIndex];
340+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
341+
bar.height = 0;
342+
}
315343
return (
316344
<rect
317345
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)