Skip to content

Commit 5498111

Browse files
ctstamperctstamper
authored
Merge pull request #43 from oslabs-beta/ctstamper/Fixing-WebMetrics
Ctstamper/fixing web metrics
2 parents bdb588c + a1dc57b commit 5498111

File tree

3 files changed

+97
-48
lines changed

3 files changed

+97
-48
lines changed

‎src/app/components/StateRoute/StateRoute.tsx

Lines changed: 59 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -94,73 +94,105 @@ const StateRoute = (props: StateRouteProps) => {
9494
let CLSColor: String;
9595
let INPColor: String;
9696

97-
// adjust the strings that represent colors of the webmetrics performance bar for 'Largest Contentful Paint (LCP)', 'First Input Delay (FID)', 'First Contentfuly Paint (FCP)', and 'Time to First Byte (TTFB)' based on webMetrics outputs.
98-
if (webMetrics.LCP <= 2000) LCPColor = '#0bce6b';
99-
if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = '#E56543';
97+
// adjust the strings that represent colors of the webmetrics performance bar for 'Largest Contentful Paint (LCP)', 'First Input Delay (FID)', 'First Contentfuly Paint (FCP)', 'Time to First Byte (TTFB)', 'Cumulative Layout Shift (CLS)', and 'Interaction to Next Paint (INP)' based on webMetrics outputs.
98+
if (webMetrics.LCP <= 2500) LCPColor = '#0bce6b';
99+
if (webMetrics.LCP > 2500 && webMetrics.LCP <= 4000) LCPColor = '#fc5a03';
100100
if (webMetrics.LCP > 4000) LCPColor = '#fc2000';
101+
101102
if (webMetrics.FID <= 100) FIDColor = '#0bce6b';
102103
if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = '#fc5a03';
103104
if (webMetrics.FID > 300) FIDColor = '#fc2000';
104-
if (webMetrics.FCP <= 900) FCPColor = '#0bce6b';
105-
if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100) FCPColor = '#fc5a03';
106-
if (webMetrics.FCP > 1100) FCPColor = '#fc2000';
107-
if (webMetrics.TTFB <= 600) TTFBColor = '#0bce6b';
108-
if (webMetrics.TTFB > 600) TTFBColor = '#fc2000';
105+
106+
if (webMetrics.FCP <= 1800) FCPColor = '#0bce6b';
107+
if (webMetrics.FCP > 1800 && webMetrics.FCP <= 3000) FCPColor = '#fc5a03';
108+
if (webMetrics.FCP > 3000) FCPColor = '#fc2000';
109+
110+
if (webMetrics.TTFB <= 800) TTFBColor = '#0bce6b';
111+
if (webMetrics.TTFB > 800 && webMetrics.TTFB <= 1800) TTFBColor = '#fc5a03';
112+
if (webMetrics.TTFB > 1800) TTFBColor = '#fc2000';
113+
109114
if (webMetrics.CLS <= 0.1) CLSColor = '#0bce6b';
110-
if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) CLSColor = '#E56543';
115+
if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) CLSColor = '#fc5a03';
111116
if (webMetrics.CLS > 0.25) CLSColor = '#fc2000';
117+
112118
if (webMetrics.INP <= 200) INPColor = '#0bce6b';
113-
if (webMetrics.INP <= 500) INPColor = '#E56543';
119+
if (webMetrics.INP > 200 && webMetrics.INP <= 500) INPColor = '#fc5a03';
114120
if (webMetrics.INP > 500) INPColor = '#fc2000';
115121

116122
return (
117123
<div className='web-metrics-container'>
118124
<WebMetrics
119125
color={LCPColor}
120-
series={(webMetrics.LCP / 2500) * 100}
121-
formatted={(val) =>
122-
Number.isNaN(val) ? '- ms' : `${((val / 100) * 2500).toFixed(2)} ms`
126+
series={webMetrics.LCP ? [webMetrics.LCP / 70 < 100 ? webMetrics.LCP / 70 : 100] : 0}
127+
formatted={(_) =>
128+
typeof webMetrics.LCP !== 'number' ? '- ms' : `${webMetrics.LCP.toFixed(2)} ms`
123129
}
130+
score={['2500 ms', '4000 ms']}
131+
overLimit={webMetrics.LCP > 7000}
124132
label='Largest Contentful Paint'
125133
name='Largest Contentful Paint'
126-
description='Measures loading performance. The benchmark is less than 2500 ms.'
134+
description='Measures loading performance.'
127135
/>
128136
<WebMetrics
129137
color={FIDColor}
130-
series={webMetrics.FID * 25}
131-
formatted={(val) => (Number.isNaN(val) ? '- ms' : `${(val / 25).toFixed(2)} ms`)}
138+
series={webMetrics.FID ? [webMetrics.FID / 5 < 100 ? webMetrics.FID / 5 : 100] : 0}
139+
formatted={(_) =>
140+
typeof webMetrics.FID !== 'number' ? '- ms' : `${webMetrics.FID.toFixed(2)} ms`
141+
}
142+
score={['100 ms', '300 ms']}
143+
overLimit={webMetrics.FID > 500}
132144
label='First Input Delay'
133145
name='First Input Delay'
134-
description='Measures interactivity. The benchmark is less than 100 ms.'
146+
description='Measures interactivity.'
135147
/>
136148
<WebMetrics
137149
color={FCPColor}
138-
series={(webMetrics.FCP / 1000) * 100}
139-
formatted={(val) => `${((val / 100) * 1000).toFixed(2)} ms`}
150+
series={webMetrics.FCP ? [webMetrics.FCP / 50 < 100 ? webMetrics.FCP / 50 : 100] : 0}
151+
formatted={(_) =>
152+
typeof webMetrics.FCP !== 'number' ? '- ms' : `${webMetrics.FCP.toFixed(2)} ms`
153+
}
154+
score={['1800 ms', '3000 ms']}
155+
overLimit={webMetrics.FCP > 5000}
140156
label='First Contentful Paint'
141157
name='First Contentful Paint'
142-
description='Measures the time it takes the browser to render the first piece of DOM content. No benchmark.'
158+
description='Measures the time it takes the browser to render the first piece of DOM content.'
143159
/>
144160
<WebMetrics
145161
color={TTFBColor}
146-
series={(webMetrics.TTFB / 10) * 100}
147-
formatted={(val) => `${((val / 100) * 10).toFixed(2)} ms`}
162+
series={webMetrics.TTFB ? [webMetrics.TTFB / 30 < 100 ? webMetrics.TTFB / 30 : 100] : 0}
163+
formatted={(_) =>
164+
typeof webMetrics.TTFB !== 'number' ? '- ms' : `${webMetrics.TTFB.toFixed(2)} ms`
165+
}
166+
score={['800 ms', '1800 ms']}
167+
overLimit={webMetrics.TTFB > 3000}
148168
label='Time To First Byte'
149169
name='Time to First Byte'
150-
description='Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms.'
170+
description='Measures the time it takes for a browser to receive the first byte of page content.'
151171
/>
152172
<WebMetrics
153173
color={CLSColor}
154-
series={webMetrics.CLS * 10}
155-
formatted={(val) => `CLS Score: ${(Number.isNaN(val) ? 'N/A' : `${val / 10 < 0.01 ? 0 : (val / 10).toFixed(2)}`)}`}
174+
series={webMetrics.CLS ? [webMetrics.CLS * 200 < 100 ? webMetrics.CLS * 200 : 100] : 0}
175+
formatted={(_) =>
176+
`CLS Score: ${
177+
typeof webMetrics.CLS !== 'number'
178+
? 'N/A'
179+
: `${webMetrics.CLS < 0.01 ? '~0' : webMetrics.CLS.toFixed(2)}`
180+
}`
181+
}
182+
score={['0.1', '0.25']}
183+
overLimit={webMetrics.CLS > 0.5}
156184
label='Cumulative Layout Shift'
157185
name='Cumulative Layout Shift'
158186
description={`Quantifies the visual stability of a web page by measuring layout shifts during the application's loading and interaction.`}
159187
/>
160188
<WebMetrics
161189
color={INPColor}
162-
series={(webMetrics.INP / 10) * 100}
163-
formatted={(val) => `INP Value: ${(Number.isNaN(val) ? 'N/A' : `${val / 10}`)}`}
190+
series={webMetrics.INP ? [webMetrics.INP / 7 < 100 ? webMetrics.INP / 7 : 100] : 0}
191+
formatted={(_) =>
192+
typeof webMetrics.INP !== 'number' ? '- ms' : `${webMetrics.INP.toFixed(2)} ms`
193+
}
194+
score={['200 ms', '500 ms']}
195+
overLimit={webMetrics.LCP > 700}
164196
label='Interaction to Next Paint'
165197
name='Interaction to Next Paint'
166198
description={`Assesses a page's overall responsiveness to user interactions by observing the latency of all click, tap, and keyboard interactions that occur throughout the lifespan of a user's visit to a page`}

‎src/app/components/WebMetrics.tsx

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
22
import Charts from 'react-apexcharts';
33
import ReactHover, { Trigger, Hover } from 'react-hover';
44
import { OptionsCursorTrueWithMargin } from '../FrontendTypes';
5-
import { setCurrentTabInApp } from '../slices/mainSlice'
5+
import { setCurrentTabInApp } from '../slices/mainSlice';
66
import { useDispatch } from 'react-redux';
77
/*
88
Used to render a single radial graph on the 'Web Metrics' tab
@@ -29,10 +29,16 @@ const radialGraph = (props) => {
2929
hollow: {
3030
margin: 0,
3131
size: '75%',
32-
background: '#242529',
33-
image: undefined,
32+
background: 'transparent',
33+
// background: '#242529',
34+
image: props.overLimit
35+
? 'https://static.vecteezy.com/system/resources/thumbnails/012/042/301/small/warning-sign-icon-transparent-background-free-png.png'
36+
: undefined,
37+
imageWidth: 32,
38+
imageHeight: 32,
3439
imageOffsetX: 0,
35-
imageOffsetY: 0,
40+
imageOffsetY: -64,
41+
imageClipped: false,
3642
position: 'front',
3743
dropShadow: {
3844
enabled: false,
@@ -78,7 +84,6 @@ const radialGraph = (props) => {
7884
shade: 'dark',
7985
type: 'horizontal',
8086
shadeIntensity: 0.1,
81-
gradientToColors: [props.color],
8287
inverseColors: false,
8388
opacityFrom: 1,
8489
opacityTo: 1,
@@ -92,8 +97,7 @@ const radialGraph = (props) => {
9297
},
9398
};
9499

95-
96-
useEffect(() => {
100+
useEffect(() => {
97101
dispatch(setCurrentTabInApp('webmetrics')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
98102
}, []);
99103

@@ -104,8 +108,8 @@ const radialGraph = (props) => {
104108
};
105109

106110
return (
107-
<div className='metric'>
108-
<ReactHover options={optionsCursorTrueWithMargin}>
111+
<div className='metric'>
112+
<ReactHover options={optionsCursorTrueWithMargin}>
109113
<Trigger type='trigger'>
110114
<div id='chart'>
111115
<Charts
@@ -118,9 +122,23 @@ const radialGraph = (props) => {
118122
</div>
119123
</Trigger>
120124
<Hover type='hover'>
121-
<div style={{zIndex: 1, position: 'relative', padding: '0.5rem 1rem'}} id='hover-box'>
122-
<p><strong>{props.name}</strong></p>
125+
<div style={{ zIndex: 1, position: 'relative', padding: '0.5rem 1rem' }} id='hover-box'>
126+
<p>
127+
<strong>{props.name}</strong>
128+
</p>
123129
<p>{props.description}</p>
130+
<p>
131+
<span style={{ color: '#0bce6b' }}>Good: </span>
132+
{`< ${props.score[0]}`}
133+
</p>
134+
<p>
135+
<span style={{ color: '#fc5a03' }}>Needs Improvement: </span>
136+
{`< ${props.score[1]}`}
137+
</p>
138+
<p>
139+
<span style={{ color: '#fc2000' }}>Poor: </span>
140+
{`> ${props.score[1]}`}
141+
</p>
124142
</div>
125143
</Hover>
126144
</ReactHover>

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

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
margin: 6px;
4040
}
4141

42-
.state-container .componentMapContainer{
42+
.state-container .componentMapContainer {
4343
height: 95% !important;
4444
}
4545

@@ -206,7 +206,7 @@
206206
}
207207

208208
#hover-box {
209-
max-width: 150px;
209+
max-width: 230px;
210210
background-color: #51565e;
211211
border-radius: 5px;
212212
color: white;
@@ -218,17 +218,17 @@
218218

219219
// tool tip styles
220220

221-
.visx-tooltip{
221+
.visx-tooltip {
222222
overflow-y: auto;
223223
overflow-wrap: break-word;
224-
pointer-events:all !important;
224+
pointer-events: all !important;
225225
}
226226

227227
.tooltipKey {
228228
margin-bottom: -1px;
229229
}
230230

231-
.historyToolTip{
231+
.historyToolTip {
232232
z-index: 2;
233233
}
234234

@@ -253,14 +253,13 @@
253253
padding: 0px;
254254
overflow-y: auto;
255255
max-height: 30vh;
256-
scrollbar-color:#919499 #51565e;
256+
scrollbar-color: #919499 #51565e;
257257
}
258258

259259
.tooltipData-JSONTree::-webkit-scrollbar-thumb {
260-
background:#919499;
261-
260+
background: #919499;
262261
}
263262

264-
.tooltipData-JSONTree::-webkit-scrollbar-track{
265-
background:#51565e;
263+
.tooltipData-JSONTree::-webkit-scrollbar-track {
264+
background: #51565e;
266265
}

0 commit comments

Comments
 (0)