Skip to content

Commit cbdc296

Browse files
Christopher StamperChristopher Stamper
Christopher Stamper
authored and
Christopher Stamper
committed
Improved web metrics for a better UX, fixed formatting
1 parent 4c809f0 commit cbdc296

File tree

2 files changed

+52
-52
lines changed

2 files changed

+52
-52
lines changed

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

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -94,51 +94,38 @@ 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 <= 2500) LCPColor = ['#0bce6b'];
99-
if (webMetrics.LCP > 2500 && webMetrics.LCP < 4000) LCPColor = ['#fc5a03'];
100-
if (webMetrics.LCP > 4000 && webMetrics.LCP <= 7000) LCPColor = ['#fc2000'];
101-
if (webMetrics.LCP > 7000) LCPColor = ['#fc2000', '#000000'];
102-
103-
if (webMetrics.FID <= 100) FIDColor = ['#0bce6b'];
104-
if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = ['#fc5a03'];
105-
if (webMetrics.FID > 300 && webMetrics.FID <= 500) FIDColor = ['#fc2000'];
106-
if (webMetrics.FID > 500) FIDColor = ['#fc2000', '#000000'];
107-
108-
if (webMetrics.FCP <= 1800) FCPColor = ['#0bce6b'];
109-
if (webMetrics.FCP > 1800 && webMetrics.FCP <= 3000) FCPColor = ['#fc5a03'];
110-
if (webMetrics.FCP > 3000 && webMetrics.FCP <= 5000) FCPColor = ['#fc2000'];
111-
if (webMetrics.FCP > 5000) FCPColor = ['#fc2000', '#000000'];
112-
113-
if (webMetrics.TTFB <= 800) TTFBColor = ['#0bce6b'];
114-
if (webMetrics.TTFB > 800 && webMetrics.TTFB <= 1800) TTFBColor = ['#fc5a03'];
115-
if (webMetrics.TTFB > 1800 && webMetrics.TTFB <= 3000) TTFBColor = ['#fc2000'];
116-
if (webMetrics.TTFB > 3000) TTFBColor = ['#fc2000', '#000000'];
117-
118-
if (webMetrics.CLS <= 0.1) CLSColor = ['#0bce6b'];
119-
if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) CLSColor = ['#fc5a03'];
120-
if (webMetrics.CLS > 0.25 && webMetrics.CLS <= 0.5) CLSColor = ['#fc2000'];
121-
if (webMetrics.CLS > 0.5) CLSColor = ['#fc2000', '#000000'];
122-
123-
if (webMetrics.INP <= 200) INPColor = ['#0bce6b'];
124-
if (webMetrics.INP > 200 && webMetrics.INP <= 500) INPColor = ['#fc5a03'];
125-
if (webMetrics.INP > 500 && webMetrics.INP <= 700) INPColor = ['#fc2000'];
126-
if (webMetrics.INP > 700) INPColor = ['#fc2000', '#000000'];
127-
128-
const fakeLCP = 7500;
129-
130-
if (fakeLCP <= 2500) LCPColor = ['#0bce6b'];
131-
if (fakeLCP > 2500 && fakeLCP < 4000) LCPColor = ['#fc5a03'];
132-
if (fakeLCP > 4000 && fakeLCP <= 7000) LCPColor = ['#fc2000'];
133-
if (fakeLCP > 7000) LCPColor = ['#fc2000', '#000000'];
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';
100+
if (webMetrics.LCP > 4000) LCPColor = '#fc2000';
101+
102+
if (webMetrics.FID <= 100) FIDColor = '#0bce6b';
103+
if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = '#fc5a03';
104+
if (webMetrics.FID > 300) FIDColor = '#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+
114+
if (webMetrics.CLS <= 0.1) CLSColor = '#0bce6b';
115+
if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) CLSColor = '#fc5a03';
116+
if (webMetrics.CLS > 0.25) CLSColor = '#fc2000';
117+
118+
if (webMetrics.INP <= 200) INPColor = '#0bce6b';
119+
if (webMetrics.INP > 200 && webMetrics.INP <= 500) INPColor = '#fc5a03';
120+
if (webMetrics.INP > 500) INPColor = '#fc2000';
134121

135122
return (
136123
<div className='web-metrics-container'>
137124
<WebMetrics
138125
color={LCPColor}
139126
series={webMetrics.LCP ? [webMetrics.LCP / 70 < 100 ? webMetrics.LCP / 70 : 100] : 0}
140127
formatted={(_) =>
141-
typeof webMetrics.LCP !== 'number' ? '- ms' : `${(webMetrics.LCP).toFixed(2)} ms`
128+
typeof webMetrics.LCP !== 'number' ? '- ms' : `${webMetrics.LCP.toFixed(2)} ms`
142129
}
143130
label='Largest Contentful Paint'
144131
name='Largest Contentful Paint'
@@ -147,39 +134,53 @@ const StateRoute = (props: StateRouteProps) => {
147134
<WebMetrics
148135
color={FIDColor}
149136
series={webMetrics.FID ? [webMetrics.FID / 5 < 100 ? webMetrics.FID / 5 : 100] : 0}
150-
formatted={(_) => typeof webMetrics.FID !== 'number' ? '- ms' : `${(webMetrics.FID).toFixed(2)} ms`}
137+
formatted={(_) =>
138+
typeof webMetrics.FID !== 'number' ? '- ms' : `${webMetrics.FID.toFixed(2)} ms`
139+
}
151140
label='First Input Delay'
152141
name='First Input Delay'
153142
description='Measures interactivity. The benchmark is less than 100 ms.'
154143
/>
155144
<WebMetrics
156145
color={FCPColor}
157146
series={webMetrics.FCP ? [webMetrics.FCP / 50 < 100 ? webMetrics.FCP / 50 : 100] : 0}
158-
formatted={(_) => typeof webMetrics.FCP !== 'number' ? '- ms' : `${(webMetrics.FCP).toFixed(2)} ms`}
147+
formatted={(_) =>
148+
typeof webMetrics.FCP !== 'number' ? '- ms' : `${webMetrics.FCP.toFixed(2)} ms`
149+
}
159150
label='First Contentful Paint'
160151
name='First Contentful Paint'
161152
description='Measures the time it takes the browser to render the first piece of DOM content. No benchmark.'
162153
/>
163154
<WebMetrics
164155
color={TTFBColor}
165156
series={webMetrics.TTFB ? [webMetrics.TTFB / 30 < 100 ? webMetrics.TTFB / 30 : 100] : 0}
166-
formatted={(_) => typeof webMetrics.TTFB !== 'number' ? '- ms' : `${(webMetrics.TTFB).toFixed(2)} ms`}
157+
formatted={(_) =>
158+
typeof webMetrics.TTFB !== 'number' ? '- ms' : `${webMetrics.TTFB.toFixed(2)} ms`
159+
}
167160
label='Time To First Byte'
168161
name='Time to First Byte'
169162
description='Measures the time it takes for a browser to receive the first byte of page content. The benchmark is 600 ms.'
170163
/>
171164
<WebMetrics
172165
color={CLSColor}
173166
series={webMetrics.CLS ? [webMetrics.CLS * 200 < 100 ? webMetrics.CLS * 200 : 100] : 0}
174-
formatted={(_) => `CLS Score: ${typeof webMetrics.CLS !== 'number' ? 'N/A' : `${webMetrics.CLS < .01 ? '~0' : (webMetrics.CLS).toFixed(2)}`}`}
167+
formatted={(_) =>
168+
`CLS Score: ${
169+
typeof webMetrics.CLS !== 'number'
170+
? 'N/A'
171+
: `${webMetrics.CLS < 0.01 ? '~0' : webMetrics.CLS.toFixed(2)}`
172+
}`
173+
}
175174
label='Cumulative Layout Shift'
176175
name='Cumulative Layout Shift'
177176
description={`Quantifies the visual stability of a web page by measuring layout shifts during the application's loading and interaction.`}
178177
/>
179178
<WebMetrics
180179
color={INPColor}
181180
series={webMetrics.INP ? [webMetrics.INP / 7 < 100 ? webMetrics.INP / 7 : 100] : 0}
182-
formatted={(_) => typeof webMetrics.INP !== 'number' ? '- ms' : `${(webMetrics.INP).toFixed(2)} ms`}
181+
formatted={(_) =>
182+
typeof webMetrics.INP !== 'number' ? '- ms' : `${webMetrics.INP.toFixed(2)} ms`
183+
}
183184
label='Interaction to Next Paint'
184185
name='Interaction to Next Paint'
185186
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: 8 additions & 9 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
@@ -78,8 +78,6 @@ const radialGraph = (props) => {
7878
shade: 'dark',
7979
type: 'horizontal',
8080
shadeIntensity: 0.1,
81-
gradientToColors: props.color,
82-
// gradientToColors: ['#fc2000', '#000000'],
8381
inverseColors: false,
8482
opacityFrom: 1,
8583
opacityTo: 1,
@@ -93,8 +91,7 @@ const radialGraph = (props) => {
9391
},
9492
};
9593

96-
97-
useEffect(() => {
94+
useEffect(() => {
9895
dispatch(setCurrentTabInApp('webmetrics')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
9996
}, []);
10097

@@ -105,8 +102,8 @@ const radialGraph = (props) => {
105102
};
106103

107104
return (
108-
<div className='metric'>
109-
<ReactHover options={optionsCursorTrueWithMargin}>
105+
<div className='metric'>
106+
<ReactHover options={optionsCursorTrueWithMargin}>
110107
<Trigger type='trigger'>
111108
<div id='chart'>
112109
<Charts
@@ -119,8 +116,10 @@ const radialGraph = (props) => {
119116
</div>
120117
</Trigger>
121118
<Hover type='hover'>
122-
<div style={{zIndex: 1, position: 'relative', padding: '0.5rem 1rem'}} id='hover-box'>
123-
<p><strong>{props.name}</strong></p>
119+
<div style={{ zIndex: 1, position: 'relative', padding: '0.5rem 1rem' }} id='hover-box'>
120+
<p>
121+
<strong>{props.name}</strong>
122+
</p>
124123
<p>{props.description}</p>
125124
</div>
126125
</Hover>

0 commit comments

Comments
 (0)