Skip to content

Commit 18b0574

Browse files
garrettlchowgarrettlchow
committed
fixed invalid color in web metrics
1 parent f73612e commit 18b0574

File tree

2 files changed

+63
-53
lines changed

2 files changed

+63
-53
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { useEffect } from 'react';
22
import Charts from 'react-apexcharts';
33
import ReactHover, { Trigger, Hover } from 'react-hover';
4-
import { OptionsCursorTrueWithMargin } from '../../../FrontendTypes';
54
import { setCurrentTabInApp } from '../../../slices/mainSlice';
65
import { useDispatch } from 'react-redux';
76

8-
const radialGraph = (props) => {
7+
const WebMetrics = (props) => {
98
const dispatch = useDispatch();
9+
1010
const state = {
11-
series: [props.series],
11+
series: props.series,
1212
options: {
1313
colors: [props.color],
1414
chart: {
@@ -90,7 +90,7 @@ const radialGraph = (props) => {
9090
dispatch(setCurrentTabInApp('webmetrics'));
9191
}, []);
9292

93-
const getThresholdColor = (type) => {
93+
const getThresholdColor = (type: string): string => {
9494
switch (type) {
9595
case 'good':
9696
return '#0bce6b';
@@ -148,4 +148,4 @@ const radialGraph = (props) => {
148148
);
149149
};
150150

151-
export default radialGraph;
151+
export default WebMetrics;

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

Lines changed: 58 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,129 @@
11
import React from 'react';
22
import WebMetrics from './WebMetrics';
33

4-
/*
5-
Used to render a container for all of the 'Web Metrics' tab
6-
*/
7-
84
const WebMetricsContainer = (props) => {
95
const { webMetrics } = props;
6+
// Add default values for all color variables
7+
let LCPColor = '#fc2000'; // Default to poor/red
8+
let FIDColor = '#fc2000';
9+
let FCPColor = '#fc2000';
10+
let TTFBColor = '#fc2000';
11+
let CLSColor = '#fc2000';
12+
let INPColor = '#fc2000';
1013

11-
let LCPColor: String;
12-
let FIDColor: String;
13-
let FCPColor: String;
14-
let TTFBColor: String;
15-
let CLSColor: String;
16-
let INPColor: String;
17-
18-
// 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.
19-
if (webMetrics.LCP <= 2500) LCPColor = '#0bce6b';
20-
if (webMetrics.LCP > 2500 && webMetrics.LCP <= 4000) LCPColor = '#fc5a03';
21-
if (webMetrics.LCP > 4000) LCPColor = '#fc2000';
14+
// Ensure webMetrics exists and has valid values
15+
if (webMetrics) {
16+
// LCP color logic
17+
if (typeof webMetrics.LCP === 'number') {
18+
if (webMetrics.LCP <= 2500) LCPColor = '#0bce6b';
19+
else if (webMetrics.LCP <= 4000) LCPColor = '#fc5a03';
20+
}
2221

23-
if (webMetrics.FID <= 100) FIDColor = '#0bce6b';
24-
if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = '#fc5a03';
25-
if (webMetrics.FID > 300) FIDColor = '#fc2000';
22+
// FID color logic
23+
if (typeof webMetrics.FID === 'number') {
24+
if (webMetrics.FID <= 100) FIDColor = '#0bce6b';
25+
else if (webMetrics.FID <= 300) FIDColor = '#fc5a03';
26+
}
2627

27-
if (webMetrics.FCP <= 1800) FCPColor = '#0bce6b';
28-
if (webMetrics.FCP > 1800 && webMetrics.FCP <= 3000) FCPColor = '#fc5a03';
29-
if (webMetrics.FCP > 3000) FCPColor = '#fc2000';
28+
// FCP color logic
29+
if (typeof webMetrics.FCP === 'number') {
30+
if (webMetrics.FCP <= 1800) FCPColor = '#0bce6b';
31+
else if (webMetrics.FCP <= 3000) FCPColor = '#fc5a03';
32+
}
3033

31-
if (webMetrics.TTFB <= 800) TTFBColor = '#0bce6b';
32-
if (webMetrics.TTFB > 800 && webMetrics.TTFB <= 1800) TTFBColor = '#fc5a03';
33-
if (webMetrics.TTFB > 1800) TTFBColor = '#fc2000';
34+
// TTFB color logic
35+
if (typeof webMetrics.TTFB === 'number') {
36+
if (webMetrics.TTFB <= 800) TTFBColor = '#0bce6b';
37+
else if (webMetrics.TTFB <= 1800) TTFBColor = '#fc5a03';
38+
}
3439

35-
if (webMetrics.CLS <= 0.1) CLSColor = '#0bce6b';
36-
if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25) CLSColor = '#fc5a03';
37-
if (webMetrics.CLS > 0.25) CLSColor = '#fc2000';
40+
// CLS color logic
41+
if (typeof webMetrics.CLS === 'number') {
42+
if (webMetrics.CLS <= 0.1) CLSColor = '#0bce6b';
43+
else if (webMetrics.CLS <= 0.25) CLSColor = '#fc5a03';
44+
}
3845

39-
if (webMetrics.INP <= 200) INPColor = '#0bce6b';
40-
if (webMetrics.INP > 200 && webMetrics.INP <= 500) INPColor = '#fc5a03';
41-
if (webMetrics.INP > 500) INPColor = '#fc2000';
46+
// INP color logic
47+
if (typeof webMetrics.INP === 'number') {
48+
if (webMetrics.INP <= 200) INPColor = '#0bce6b';
49+
else if (webMetrics.INP <= 500) INPColor = '#fc5a03';
50+
}
51+
}
4252

4353
return (
4454
<div className='web-metrics-container'>
4555
<WebMetrics
4656
color={LCPColor}
47-
series={webMetrics.LCP ? [webMetrics.LCP / 70 < 100 ? webMetrics.LCP / 70 : 100] : 0}
48-
formatted={(_) =>
57+
series={webMetrics.LCP ? [webMetrics.LCP / 70 < 100 ? webMetrics.LCP / 70 : 100] : [0]}
58+
formatted={(value) =>
4959
typeof webMetrics.LCP !== 'number' ? '- ms' : `${webMetrics.LCP.toFixed(2)} ms`
5060
}
5161
score={['2500 ms', '4000 ms']}
52-
overLimit={webMetrics.LCP > 7000}
62+
overLimit={webMetrics.LCP ? webMetrics.LCP > 7000 : false}
5363
label='Largest Contentful Paint'
5464
name='Largest Contentful Paint'
5565
description='Measures loading performance.'
5666
/>
5767
<WebMetrics
5868
color={FIDColor}
59-
series={webMetrics.FID ? [webMetrics.FID / 5 < 100 ? webMetrics.FID / 5 : 100] : 0}
60-
formatted={(_) =>
69+
series={webMetrics.FID ? [webMetrics.FID / 5 < 100 ? webMetrics.FID / 5 : 100] : [0]}
70+
formatted={(value) =>
6171
typeof webMetrics.FID !== 'number' ? '- ms' : `${webMetrics.FID.toFixed(2)} ms`
6272
}
6373
score={['100 ms', '300 ms']}
64-
overLimit={webMetrics.FID > 500}
74+
overLimit={webMetrics.FID ? webMetrics.FID > 500 : false}
6575
label='First Input Delay'
6676
name='First Input Delay'
6777
description='Measures interactivity.'
6878
/>
6979
<WebMetrics
7080
color={FCPColor}
71-
series={webMetrics.FCP ? [webMetrics.FCP / 50 < 100 ? webMetrics.FCP / 50 : 100] : 0}
72-
formatted={(_) =>
81+
series={webMetrics.FCP ? [webMetrics.FCP / 50 < 100 ? webMetrics.FCP / 50 : 100] : [0]}
82+
formatted={(value) =>
7383
typeof webMetrics.FCP !== 'number' ? '- ms' : `${webMetrics.FCP.toFixed(2)} ms`
7484
}
7585
score={['1800 ms', '3000 ms']}
76-
overLimit={webMetrics.FCP > 5000}
86+
overLimit={webMetrics.FCP ? webMetrics.FCP > 5000 : false}
7787
label='First Contentful Paint'
7888
name='First Contentful Paint'
7989
description='Measures the time it takes the browser to render the first piece of DOM content.'
8090
/>
8191
<WebMetrics
8292
color={TTFBColor}
83-
series={webMetrics.TTFB ? [webMetrics.TTFB / 30 < 100 ? webMetrics.TTFB / 30 : 100] : 0}
84-
formatted={(_) =>
93+
series={webMetrics.TTFB ? [webMetrics.TTFB / 30 < 100 ? webMetrics.TTFB / 30 : 100] : [0]}
94+
formatted={(value) =>
8595
typeof webMetrics.TTFB !== 'number' ? '- ms' : `${webMetrics.TTFB.toFixed(2)} ms`
8696
}
8797
score={['800 ms', '1800 ms']}
88-
overLimit={webMetrics.TTFB > 3000}
98+
overLimit={webMetrics.TTFB ? webMetrics.TTFB > 3000 : false}
8999
label='Time To First Byte'
90100
name='Time to First Byte'
91101
description='Measures the time it takes for a browser to receive the first byte of page content.'
92102
/>
93103
<WebMetrics
94104
color={CLSColor}
95-
series={webMetrics.CLS ? [webMetrics.CLS * 200 < 100 ? webMetrics.CLS * 200 : 100] : 0}
96-
formatted={(_) =>
105+
series={webMetrics.CLS ? [webMetrics.CLS * 200 < 100 ? webMetrics.CLS * 200 : 100] : [0]}
106+
formatted={(value) =>
97107
`CLS Score: ${
98108
typeof webMetrics.CLS !== 'number'
99109
? 'N/A'
100110
: `${webMetrics.CLS < 0.01 ? '~0' : webMetrics.CLS.toFixed(2)}`
101111
}`
102112
}
103113
score={['0.1', '0.25']}
104-
overLimit={webMetrics.CLS > 0.5}
114+
overLimit={webMetrics.CLS ? webMetrics.CLS > 0.5 : false}
105115
label='Cumulative Layout Shift'
106116
name='Cumulative Layout Shift'
107117
description={`Quantifies the visual stability of a web page by measuring layout shifts during the application's loading and interaction.`}
108118
/>
109119
<WebMetrics
110120
color={INPColor}
111-
series={webMetrics.INP ? [webMetrics.INP / 7 < 100 ? webMetrics.INP / 7 : 100] : 0}
112-
formatted={(_) =>
121+
series={webMetrics.INP ? [webMetrics.INP / 7 < 100 ? webMetrics.INP / 7 : 100] : [0]}
122+
formatted={(value) =>
113123
typeof webMetrics.INP !== 'number' ? '- ms' : `${webMetrics.INP.toFixed(2)} ms`
114124
}
115125
score={['200 ms', '500 ms']}
116-
overLimit={webMetrics.INP > 700}
126+
overLimit={webMetrics.INP ? webMetrics.INP > 700 : false}
117127
label='Interaction to Next Paint'
118128
name='Interaction to Next Paint'
119129
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`}

0 commit comments

Comments
 (0)