Skip to content

Commit 0176dd8

Browse files
DennisLpzDennisLpz
authored
Merge pull request #25 from oslabs-beta/staging
Final merge
2 parents 2254ec8 + 26d5f1b commit 0176dd8

File tree

7 files changed

+148
-85
lines changed

7 files changed

+148
-85
lines changed

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,17 @@
3838
},
3939
"contributors": [
4040
"Abaas Khorrami",
41+
"Ali Rahman",
4142
"Andy Wong",
4243
"Bryan Lee",
4344
"Becca Viner",
4445
"Caitlin Chan",
46+
"Caner Demir",
4547
"Carlos Perez",
48+
"Cole Styron",
4649
"Chris Flannery",
4750
"David Chai",
51+
"Dennis Lopez",
4852
"Edwin Menendez",
4953
"Ergi Shehu",
5054
"Gabriela Jardim Aquino",
@@ -55,6 +59,7 @@
5559
"Josh Kim",
5660
"Joshua Howard",
5761
"Kevin Fey",
62+
"Kevin Ngo",
5863
"Kim Mai Nguyen",
5964
"Nathanael Wa Mwenze",
6065
"Prasanna Malla",
@@ -161,6 +166,7 @@
161166
"react": "^16.13.1",
162167
"react-apexcharts": "^1.3.7",
163168
"react-dom": "^16.13.1",
169+
"react-hover": "^2.0.0",
164170
"react-html-parser": "^2.0.2",
165171
"react-json-tree": "^0.11.2",
166172
"react-router-dom": "^5.2.0",

‎src/app/components/BarGraph.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,9 @@ const BarGraph = (props) => {
123123
classname[i].addEventListener('click', animateButton, false);
124124
}
125125
return (
126-
<div>
126+
<div className='bargraph-position'>
127127
<button
128-
className="save-series-button"
128+
className='save-series-button'
129129
onClick={(e) => {
130130
dispatch(save(toStorage));
131131
}}
@@ -149,7 +149,7 @@ const BarGraph = (props) => {
149149
yScale={renderingScale}
150150
width={xMax}
151151
height={yMax}
152-
stroke="black"
152+
stroke='black'
153153
strokeOpacity={0.1}
154154
xOffset={snapshotIdScale.bandwidth() / 2}
155155
/>
@@ -235,15 +235,15 @@ const BarGraph = (props) => {
235235
/>
236236
<Text
237237
x={-xMax / 2}
238-
y="15"
239-
transform="rotate(-90)"
238+
y='15'
239+
transform='rotate(-90)'
240240
fontSize={12}
241-
fill="#FFFFFF"
241+
fill='#FFFFFF'
242242
>
243243
Rendering Time (ms)
244244
</Text>
245245
<br />
246-
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
246+
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
247247
Snapshot ID
248248
</Text>
249249
</svg>

‎src/app/components/BarGraphComparison.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ const BarGraphComparison = (props) => {
131131
domain: [0, Math.max(calculateMaxTotalRender(series), data.maxTotalRender)],
132132
nice: true,
133133
});
134-
// the domain array will assign each key(component on test app) a different color
134+
// the domain array will assign each key a different color to make rectangle boxes
135135
// and use range to set the color scheme each bar
136136
const colorScale = scaleOrdinal<string>({
137137
domain: keys,

‎src/app/components/StateRoute.tsx‎

Lines changed: 91 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,28 @@
55
/* eslint-disable @typescript-eslint/no-var-requires */
66
/* eslint-disable max-len */
77
/* eslint-disable object-curly-newline */
8-
import React, { useState } from "react";
8+
import React, { useState } from 'react';
99
import {
1010
MemoryRouter as Router,
1111
Route,
1212
NavLink,
1313
Switch,
14-
} from "react-router-dom";
15-
import { ParentSize } from "@visx/responsive";
16-
import Tree from "./Tree";
17-
import ComponentMap from "./ComponentMap";
18-
import { changeView, changeSlider } from "../actions/actions";
19-
import { useStoreContext } from "../store";
20-
import PerformanceVisx from "./PerformanceVisx";
21-
import Legend from "./AtomsRelationshipLegend";
22-
import AtomsRelationship from "./AtomsRelationship";
23-
import WebMetrics from "./WebMetrics";
14+
} from 'react-router-dom';
15+
import { ParentSize } from '@visx/responsive';
16+
import Tree from './Tree';
17+
import ComponentMap from './ComponentMap';
18+
import { changeView, changeSlider } from '../actions/actions';
19+
import { useStoreContext } from '../store';
20+
import PerformanceVisx from './PerformanceVisx';
21+
import Legend from './AtomsRelationshipLegend';
22+
import AtomsRelationship from './AtomsRelationship';
23+
import WebMetrics from './WebMetrics';
2424

25-
const History = require("./History").default;
26-
const ErrorHandler = require("./ErrorHandler").default;
25+
const History = require('./History').default;
26+
const ErrorHandler = require('./ErrorHandler').default;
2727

2828
const NO_STATE_MSG =
29-
"No state change detected. Trigger an event to change state";
29+
'No state change detected. Trigger an event to change state';
3030
// eslint-disable-next-line react/prop-types
3131

3232
export interface StateRouteProps {
@@ -69,7 +69,7 @@ const StateRoute = (props: StateRouteProps) => {
6969
</ParentSize>
7070
);
7171
}
72-
return <div className="noState">{NO_STATE_MSG}</div>;
72+
return <div className='noState'>{NO_STATE_MSG}</div>;
7373
};
7474

7575
// the hierarchy gets set upon the first click on the page
@@ -88,7 +88,7 @@ const StateRoute = (props: StateRouteProps) => {
8888
/>
8989
);
9090
}
91-
return <div className="noState">{NO_STATE_MSG}</div>;
91+
return <div className='noState'>{NO_STATE_MSG}</div>;
9292
};
9393

9494
const renderAtomsRelationship = () => (
@@ -112,33 +112,63 @@ const StateRoute = (props: StateRouteProps) => {
112112
if (hierarchy) {
113113
return <Tree snapshot={snapshot} />;
114114
}
115-
return <div className="noState">{NO_STATE_MSG}</div>;
115+
return <div className='noState'>{NO_STATE_MSG}</div>;
116116
};
117117
const renderWebMetrics = () => {
118118
let LCPColor, FIDColor, FCPColor, TTFBColor;
119119

120-
if (webMetrics.LCP <= 2000) LCPColor = "#0bce6b";
121-
if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = "#E56543";
122-
if (webMetrics.LCP > 4000) LCPColor = "#fc2000";
123-
if (webMetrics.FID <= 100) FIDColor = "#0bce6b";
124-
if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = "#fc5a03";
125-
if (webMetrics.FID > 300) FIDColor = "#fc2000";
126-
if (webMetrics.FCP <= 9000) FCPColor = "#0bce6b";
127-
if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100) FCPColor = "#fc5a03";
128-
if (webMetrics.FCP > 1100) FCPColor = "#fc2000";
129-
if (webMetrics.TTFB <= 600) TTFBColor = "#0bce6b";
130-
if (webMetrics.TTFB > 600) TTFBColor = "#fc2000";
120+
if (webMetrics.LCP <= 2000) LCPColor = '#0bce6b';
121+
if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = '#E56543';
122+
if (webMetrics.LCP > 4000) LCPColor = '#fc2000';
123+
if (webMetrics.FID <= 100) FIDColor = '#0bce6b';
124+
if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = '#fc5a03';
125+
if (webMetrics.FID > 300) FIDColor = '#fc2000';
126+
if (webMetrics.FCP <= 900) FCPColor = '#0bce6b';
127+
if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100) FCPColor = '#fc5a03';
128+
if (webMetrics.FCP > 1100) FCPColor = '#fc2000';
129+
if (webMetrics.TTFB <= 600) TTFBColor = '#0bce6b';
130+
if (webMetrics.TTFB > 600) TTFBColor = '#fc2000';
131131

132132
return (
133-
<div className="web-metrics-container">
134-
<WebMetrics color={LCPColor} series={(webMetrics.LCP / 2500) * 100}
135-
formatted={(val) => { return (Number.isNaN(val)) ? '- ms' : (((val / 100) * 2500).toFixed(2) + ' ms')}}
136-
label="LCP" />
137-
<WebMetrics color={FIDColor} series={(webMetrics.FID) * 25}
138-
formatted={(val) => { return (Number.isNaN(val)) ? '- ms' : ((val / 25).toFixed(2) + ' ms')}}
139-
label="FID" />
140-
<WebMetrics color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
141-
<WebMetrics color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'} label="TTFB"/>
133+
<div className='web-metrics-container'>
134+
<WebMetrics
135+
color={LCPColor}
136+
series={(webMetrics.LCP / 2500) * 100}
137+
formatted={(val) => {
138+
return Number.isNaN(val)
139+
? '- ms'
140+
: ((val / 100) * 2500).toFixed(2) + ' ms';
141+
}}
142+
label='LCP'
143+
name='Largest Contentful Paint'
144+
description='Measures loading performance. The benchmark is less than 2500 ms.'
145+
/>
146+
<WebMetrics
147+
color={FIDColor}
148+
series={webMetrics.FID * 25}
149+
formatted={(val) => {
150+
return Number.isNaN(val) ? '- ms' : (val / 25).toFixed(2) + ' ms';
151+
}}
152+
label='FID'
153+
name='First Input Delay'
154+
description='Measures interactivity. The benchmark is less than 100 ms.'
155+
/>
156+
<WebMetrics
157+
color={FCPColor}
158+
series={(webMetrics.FCP / 1000) * 100}
159+
formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'}
160+
label='FCP'
161+
name='First Contentful Paint'
162+
description='Measures the time it takes the browser to render the first piece of DOM content. No benchmark.'
163+
/>
164+
<WebMetrics
165+
color={TTFBColor}
166+
series={(webMetrics.TTFB / 10) * 100}
167+
formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'}
168+
label='TTFB'
169+
name='Time to First Byte'
170+
description='Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms.'
171+
/>
142172
</div>
143173
);
144174
};
@@ -160,61 +190,61 @@ const StateRoute = (props: StateRouteProps) => {
160190
</ParentSize>
161191
);
162192
}
163-
return <div className="noState">{NO_STATE_MSG}</div>;
193+
return <div className='noState'>{NO_STATE_MSG}</div>;
164194
};
165195

166196
return (
167197
<Router>
168-
<div className="navbar">
198+
<div className='navbar'>
169199
<NavLink
170-
className="router-link"
171-
activeClassName="is-active"
200+
className='router-link'
201+
activeClassName='is-active'
172202
exact
173-
to="/"
203+
to='/'
174204
>
175205
Map
176206
</NavLink>
177207
<NavLink
178-
className="router-link"
179-
activeClassName="is-active"
180-
to="/performance"
208+
className='router-link'
209+
activeClassName='is-active'
210+
to='/performance'
181211
>
182212
Performance
183213
</NavLink>
184214
<NavLink
185-
className="router-link"
186-
activeClassName="is-active"
187-
to="/history"
215+
className='router-link'
216+
activeClassName='is-active'
217+
to='/history'
188218
>
189219
History
190220
</NavLink>
191221
<NavLink
192-
className="router-link"
193-
activeClassName="is-active"
194-
to="/webMetrics"
222+
className='router-link'
223+
activeClassName='is-active'
224+
to='/webMetrics'
195225
>
196226
Web Metrics
197227
</NavLink>
198-
<NavLink className="router-link" activeClassName="is-active" to="/tree">
228+
<NavLink className='router-link' activeClassName='is-active' to='/tree'>
199229
Tree
200230
</NavLink>
201231
{isRecoil && (
202232
<NavLink
203-
className="router-link"
204-
activeClassName="is-active"
205-
to="/relationship"
233+
className='router-link'
234+
activeClassName='is-active'
235+
to='/relationship'
206236
>
207237
AtomsRecoil
208238
</NavLink>
209239
)}
210240
</div>
211241
<Switch>
212-
<Route path="/performance" render={renderPerfView} />
213-
<Route path="/history" render={renderHistory} />
214-
<Route path="/relationship" render={renderAtomsRelationship} />
215-
<Route path="/webMetrics" render={renderWebMetrics} />
216-
<Route path="/tree" render={renderTree} />
217-
<Route path="/" render={renderComponentMap} />
242+
<Route path='/performance' render={renderPerfView} />
243+
<Route path='/history' render={renderHistory} />
244+
<Route path='/relationship' render={renderAtomsRelationship} />
245+
<Route path='/webMetrics' render={renderWebMetrics} />
246+
<Route path='/tree' render={renderTree} />
247+
<Route path='/' render={renderComponentMap} />
218248
</Switch>
219249
</Router>
220250
);

‎src/app/components/WebMetrics.tsx‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import Charts from 'react-apexcharts';
3-
4-
3+
import ReactHover, { Trigger, Hover } from 'react-hover';
54
const radialGraph = (props) => {
65
const state = {
76
series: [props.series],
@@ -10,7 +9,7 @@ const radialGraph = (props) => {
109
chart: {
1110
height: 100,
1211
width: 100,
13-
type: "radialBar",
12+
type: 'radialBar',
1413
toolbar: {
1514
show: false,
1615
},
@@ -84,18 +83,35 @@ const radialGraph = (props) => {
8483
labels: [props.label],
8584
},
8685
};
86+
const optionsCursorTrueWithMargin = {
87+
followCursor: true,
88+
shiftX: 20,
89+
shiftY: 0,
90+
};
8791

8892
return (
89-
<div className="metric">
90-
<div id="chart">
91-
<Charts
92-
options={state.options}
93-
series={state.series}
94-
type="radialBar"
95-
height={200}
96-
width={200}
97-
/>
98-
</div>
93+
<div className='metric'>
94+
<ReactHover options={optionsCursorTrueWithMargin}>
95+
<Trigger type='trigger'>
96+
<div id='chart'>
97+
<Charts
98+
options={state.options}
99+
series={state.series}
100+
type='radialBar'
101+
height={200}
102+
width={200}
103+
/>
104+
</div>
105+
</Trigger>
106+
<Hover type='hover'>
107+
<div style={{ padding: '0.5rem 1rem' }} id='hover-box'>
108+
<p>
109+
<strong>{props.name}</strong>
110+
</p>
111+
<p>{props.description}</p>
112+
</div>
113+
</Hover>
114+
</ReactHover>
99115
</div>
100116
);
101117
};

0 commit comments

Comments
 (0)