Skip to content

Commit 6bbf248

Browse files
DennisLpzDennisLpz
committed
Added Hovering Feature
1 parent 2254ec8 commit 6bbf248

File tree

4 files changed

+125
-75
lines changed

4 files changed

+125
-75
lines changed

‎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 <= 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';
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='Time website loads largest content on screen'
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='Time from when a user first interacts with your site'
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='How long it takes browser to render first piece of DOM content'
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 = 'Time at which your server sends a response'
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: 27 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,33 @@ 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 id='hover-box'>
108+
<p> Metric : {props.name}</p>
109+
<p> Tracks : {props.description}</p>
110+
</div>
111+
</Hover>
112+
</ReactHover>
99113
</div>
100114
);
101115
};

‎src/app/styles/layout/_stateContainer.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,3 +203,9 @@
203203
position: relative;
204204
margin-top: 1rem;
205205
}
206+
207+
#hover-box {
208+
max-width: 150px;
209+
background-color: #51565e;
210+
border-radius: 5px;
211+
}

0 commit comments

Comments
 (0)