Merge branch 'staging' of https://github.com/oslabs-beta/reactime into webmetric_feature

Mergin WebMetrics Feature and Sidebar Feature to Application
Add a "View Time Travel" button to collapse/expand actions container
- [x] New feature (change which adds functionality)
- [x] Bug fix
- Adding WebMetrics and Sidebar Animation
- Fix bug for sidebar
- Fix Comparison Bargraph bug
Co-authored-by: kev-ngo <[email protected]>
Co-authored-by: CourageWolf <[email protected]>
Co-authored-by: C-STYR <[email protected]>
Co-authored-by: demircaner <[email protected]>

Author: 5 people

src/app/components/BarGraphComparison.tsx

@@ -222,7 +222,7 @@ const BarGraphComparison = (props) => {
               dispatch(deleteSeries());
             }}
           >
-            Clear Series
+            Clear All Series
           </button>
           <FormControl variant='outlined' className={classes.formControl}>
             <Select

src/app/components/StateRoute.tsx

@@ -116,11 +116,32 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className='noState'>{NO_STATE_MSG}</div>;
   };
   const renderWebMetrics = () => {
+    let LCPColor, FIDColor, CLSColor, FCPColor, TTFBColor;
+
+    if (webMetrics.LCP <= 2000) LCPColor = "#0bce6b";
+    if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = "#E56543";
+    if (webMetrics.LCP > 4000 ) LCPColor = "#fc2000";
+    if (webMetrics.FID <= 100) FIDColor = "#0bce6b";
+    if (webMetrics.FID > 100 && webMetrics.FID <= 300 ) FIDColor = "#fc5a03";
+    if (webMetrics.FID > 300 ) FIDColor = "#fc2000";
+    if (webMetrics.CLS <= 0.1) FIDColor = "#0bce6b";
+    if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25 ) CLSColor = "#fc5a03";
+    if (webMetrics.CLS > 0.25 ) CLSColor = "#fc2000";
+    if (webMetrics.FCP <= 9000) FCPColor = "#0bce6b";
+    if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100 ) FCPColor = "#fc5a03";
+    if (webMetrics.FCP > 1100 ) FCPColor = "#fc2000";
+    if (webMetrics.TTFB <= 600) TTFBColor = "#0bce6b";
+    if (webMetrics.TTFB > 600 ) TTFBColor = "#fc2000";
+
+
+    
     return (
-      <div>
-        <WebMetrics webMetrics={webMetrics} />
-        <WebMetrics webMetrics={webMetrics} />
-        <WebMetrics webMetrics={webMetrics} />
+      <div className="web-metrics-container">
+        <WebMetrics color={LCPColor} series={(webMetrics.LCP / 2500) * 100} formatted={(val) => ((val / 100) * 2500).toFixed(2) + ' ms'} label="LCP"/>
+        <WebMetrics color={FIDColor} series={(webMetrics.FID) * 25} formatted={(val) => ((val / 25)).toFixed(2) + ' ms'} label="FID"/>
+        {/* <WebMetrics color={CLSColor} series={(webMetrics.CLS * 50) * 100} formatted={(val) => ((val / 100) / 50).toFixed(2)} label="CLS"/> */}
+        <WebMetrics color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
+        <WebMetrics color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'} label="TTFB"/>
       </div>
     );
   };

src/app/components/WebMetrics.tsx

@@ -1,32 +1,36 @@
-import React, { useState } from 'react';
-import Charts from 'react-apexcharts'
+import React, { useState, useEffect, Component } from 'react';
+import Charts from 'react-apexcharts';
+import useForceUpdate from './useForceUpdate';
+
+const radialGraph = (props) => {
 
-const radialGraph = ({webMetrics}) => {
 		const state = {
 
-			series: [(webMetrics.FCP / 1000) * 100],
+			series: [props.series],
 			options: {
+				colors: [props.color],
 				chart: {
-					height: 350,
+					height: 100,
+					width: 100,
 					type: 'radialBar',
 					toolbar: {
-						show: true
+						show: false,
 					}
 				},
 				plotOptions: {
 					radialBar: {
 						startAngle: -135,
-						endAngle: 225,
+						endAngle: 135,
 						 hollow: {
 							margin: 0,
-							size: '90%',
+							size: '75%',
 							background: '#242529',
 							image: undefined,
 							imageOffsetX: 0,
 							imageOffsetY: 0,
 							position: 'front',
 							dropShadow: {
-								enabled: true,
+								enabled: false,
 								top: 3,
 								left: 0,
 								blur: 4,
@@ -35,7 +39,7 @@ const radialGraph = ({webMetrics}) => {
 						},
 						track: {
 							background: '#fff',
-							strokeWidth: '10%',
+							strokeWidth: '3%',
 							margin: 0, // margin is in pixels
 							dropShadow: {
 								enabled: true,
@@ -52,52 +56,49 @@ const radialGraph = ({webMetrics}) => {
 								offsetY: -10,
 								show: true,
 								color: '#fff',
-								fontSize: '17px'
+								fontSize: '24px'
 							},
 							value: {
-								formatter: function(val) {
-									return parseInt(webMetrics.FCP);
-								},
+								formatter: props.formatted,
 								color: '#fff',
-								fontSize: '25px',
+								fontSize: '16px',
 								show: true,
 							}
 						}
 					}
 				},
 				fill: {
-					type: 'gradient',
+					type: 'solid',
 					gradient: {
 						shade: 'dark',
 						type: 'horizontal',
-						shadeIntensity: 0.5,
-						gradientToColors: ['#ABE5A1'],
-						inverseColors: true,
+						shadeIntensity: 0.1,
+						gradientToColors: [props.color],
+						inverseColors: false,
 						opacityFrom: 1,
 						opacityTo: 1,
 						stops: [0, 100]
 					}
 				},
 				stroke: {
-					lineCap: 'round'
+					lineCap: 'flat'
 				},
-				labels: ['FCP'],
-			},
-		
-		
+				labels: [props.label],
+			},		
     };
-   
+
 
 		return (
 
 
 <div id="card">
 	<div id="chart">
-		<Charts options={state.options} series={state.series} type="radialBar" height={350} />
+		<Charts options={state.options} series={state.series} type="radialBar" height={250} width={250}/>
 	</div>
 </div>
 
 		)
 }
 
+
 export default radialGraph;

src/app/styles/layout/_stateContainer.scss

@@ -193,3 +193,17 @@
 .router-link-performance.is-active {
   font-weight: 600;
 }
+
+// Web Metrics Container
+.web-metrics-container {
+
+  // padding: 3rem;
+  // display: grid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 3rem;
+  // grid-template-columns: repeat(2, 1fr);
+  // grid-template-rows: repeat(2, 1fr);
+}