Skip to content

Commit 235c707

Browse files
CourageWolfCourageWolf
committed
first commit
1 parent 3ef3429 commit 235c707

File tree

3 files changed

+76
-87
lines changed

3 files changed

+76
-87
lines changed

‎src/app/components/StateRoute.tsx

Lines changed: 75 additions & 57 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 {
@@ -50,15 +50,15 @@ const StateRoute = (props: StateRouteProps) => {
5050
const [{ tabs, currentTab }, dispatch] = useStoreContext();
5151
const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
5252
const isRecoil = snapshot.atomsComponents ? true : false;
53-
53+
5454
const [noRenderData, setNoRenderData] = useState(false);
5555
// component map zoom state
5656
const [{ x, y, k }, setZoomState]: any = useState({
5757
x: 150,
5858
y: 250,
5959
k: 1,
6060
});
61-
console.log('webMetrics in StateRoute Props >>>>', webMetrics);
61+
console.log("webMetrics in StateRoute Props >>>>", webMetrics);
6262
// Map
6363
const renderComponentMap = () => {
6464
if (hierarchy) {
@@ -70,7 +70,7 @@ const StateRoute = (props: StateRouteProps) => {
7070
</ParentSize>
7171
);
7272
}
73-
return <div className='noState'>{NO_STATE_MSG}</div>;
73+
return <div className="noState">{NO_STATE_MSG}</div>;
7474
};
7575

7676
// the hierarchy gets set upon the first click on the page
@@ -89,7 +89,7 @@ const StateRoute = (props: StateRouteProps) => {
8989
/>
9090
);
9191
}
92-
return <div className='noState'>{NO_STATE_MSG}</div>;
92+
return <div className="noState">{NO_STATE_MSG}</div>;
9393
};
9494

9595
const renderAtomsRelationship = () => (
@@ -113,34 +113,52 @@ const StateRoute = (props: StateRouteProps) => {
113113
if (hierarchy) {
114114
return <Tree snapshot={snapshot} />;
115115
}
116-
return <div className='noState'>{NO_STATE_MSG}</div>;
116+
return <div className="noState">{NO_STATE_MSG}</div>;
117117
};
118118
const renderWebMetrics = () => {
119119
let LCPColor, FIDColor, CLSColor, FCPColor, TTFBColor;
120120

121121
if (webMetrics.LCP <= 2000) LCPColor = "#0bce6b";
122122
if (webMetrics.LCP > 2000 && webMetrics.LCP < 4000) LCPColor = "#E56543";
123-
if (webMetrics.LCP > 4000 ) LCPColor = "#fc2000";
123+
if (webMetrics.LCP > 4000) LCPColor = "#fc2000";
124124
if (webMetrics.FID <= 100) FIDColor = "#0bce6b";
125-
if (webMetrics.FID > 100 && webMetrics.FID <= 300 ) FIDColor = "#fc5a03";
126-
if (webMetrics.FID > 300 ) FIDColor = "#fc2000";
125+
if (webMetrics.FID > 100 && webMetrics.FID <= 300) FIDColor = "#fc5a03";
126+
if (webMetrics.FID > 300) FIDColor = "#fc2000";
127127
if (webMetrics.FCP <= 9000) FCPColor = "#0bce6b";
128-
if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100 ) FCPColor = "#fc5a03";
129-
if (webMetrics.FCP > 1100 ) FCPColor = "#fc2000";
128+
if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100) FCPColor = "#fc5a03";
129+
if (webMetrics.FCP > 1100) FCPColor = "#fc2000";
130130
if (webMetrics.TTFB <= 600) TTFBColor = "#0bce6b";
131-
if (webMetrics.TTFB > 600 ) TTFBColor = "#fc2000";
132-
131+
if (webMetrics.TTFB > 600) TTFBColor = "#fc2000";
133132

134-
135133
return (
136134
<div className="web-metrics-container">
137-
<WebMetrics color={LCPColor} series={(webMetrics.LCP / 2500) * 100} formatted={(val) => ((val / 100) * 2500).toFixed(2) + ' ms'} label="LCP"/>
138-
<WebMetrics color={FIDColor} series={(webMetrics.FID) * 25} formatted={(val) => ((val / 25)).toFixed(2) + ' ms'} label="FID"/>
139-
<WebMetrics color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
140-
<WebMetrics color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'} label="TTFB"/>
141-
<div id = 'hoverText'>Testing</div>
135+
<WebMetrics
136+
color={LCPColor}
137+
series={(webMetrics.LCP / 2500) * 100}
138+
formatted={(val) => ((val / 100) * 2500).toFixed(2) + " ms"}
139+
label="LCP"
140+
/>
141+
<WebMetrics
142+
color={FIDColor}
143+
series={webMetrics.FID * 25}
144+
formatted={(val) => (val / 25).toFixed(2) + " ms"}
145+
label="FID"
146+
/>
147+
<WebMetrics
148+
color={FCPColor}
149+
series={(webMetrics.FCP / 1000) * 100}
150+
formatted={(val) => ((val / 100) * 1000).toFixed(2) + " ms"}
151+
label="FCP"
152+
/>
153+
<WebMetrics
154+
color={TTFBColor}
155+
series={(webMetrics.TTFB / 10) * 100}
156+
formatted={(val) => ((val / 100) * 10).toFixed(2) + " ms"}
157+
label="TTFB"
158+
/>
142159
</div>
143-
)};
160+
);
161+
};
144162

145163
const renderPerfView = () => {
146164
if (hierarchy) {
@@ -159,61 +177,61 @@ const StateRoute = (props: StateRouteProps) => {
159177
</ParentSize>
160178
);
161179
}
162-
return <div className='noState'>{NO_STATE_MSG}</div>;
180+
return <div className="noState">{NO_STATE_MSG}</div>;
163181
};
164182

165183
return (
166184
<Router>
167-
<div className='navbar'>
185+
<div className="navbar">
168186
<NavLink
169-
className='router-link'
170-
activeClassName='is-active'
187+
className="router-link"
188+
activeClassName="is-active"
171189
exact
172-
to='/'
190+
to="/"
173191
>
174192
Map
175193
</NavLink>
176194
<NavLink
177-
className='router-link'
178-
activeClassName='is-active'
179-
to='/performance'
195+
className="router-link"
196+
activeClassName="is-active"
197+
to="/performance"
180198
>
181199
Performance
182200
</NavLink>
183201
<NavLink
184-
className='router-link'
185-
activeClassName='is-active'
186-
to='/history'
202+
className="router-link"
203+
activeClassName="is-active"
204+
to="/history"
187205
>
188206
History
189207
</NavLink>
190208
<NavLink
191-
className='router-link'
192-
activeClassName='is-active'
193-
to='/webMetrics'
209+
className="router-link"
210+
activeClassName="is-active"
211+
to="/webMetrics"
194212
>
195213
Web Metrics
196214
</NavLink>
197-
<NavLink className='router-link' activeClassName='is-active' to='/tree'>
215+
<NavLink className="router-link" activeClassName="is-active" to="/tree">
198216
Tree
199217
</NavLink>
200218
{isRecoil && (
201219
<NavLink
202-
className='router-link'
203-
activeClassName='is-active'
204-
to='/relationship'
220+
className="router-link"
221+
activeClassName="is-active"
222+
to="/relationship"
205223
>
206224
AtomsRecoil
207225
</NavLink>
208226
)}
209227
</div>
210228
<Switch>
211-
<Route path='/performance' render={renderPerfView} />
212-
<Route path='/history' render={renderHistory} />
213-
<Route path='/relationship' render={renderAtomsRelationship} />
214-
<Route path='/webMetrics' render={renderWebMetrics} />
215-
<Route path='/tree' render={renderTree} />
216-
<Route path='/' render={renderComponentMap} />
229+
<Route path="/performance" render={renderPerfView} />
230+
<Route path="/history" render={renderHistory} />
231+
<Route path="/relationship" render={renderAtomsRelationship} />
232+
<Route path="/webMetrics" render={renderWebMetrics} />
233+
<Route path="/tree" render={renderTree} />
234+
<Route path="/" render={renderComponentMap} />
217235
</Switch>
218236
</Router>
219237
);

‎src/app/components/WebMetrics.tsx

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -85,33 +85,17 @@ const radialGraph = (props) => {
8585
labels: [props.label],
8686
},
8787
};
88-
// const changeHoverText = () => {
89-
// setHoverView(true);
90-
// // const hoverBoxElem = document.getElementById("hoverText");
91-
// // hoverBoxElem.innerHTML = `${state.series}`;
92-
// };
9388

9489
return (
9590
<div className="metric">
96-
<div
97-
id="chart"
98-
onMouseEnter={() => setHoverView(true)}
99-
onMouseLeave={() => setHoverView(false)}
100-
>
91+
<div id="chart">
10192
<Charts
10293
options={state.options}
10394
series={state.series}
10495
type="radialBar"
10596
height={200}
10697
width={200}
10798
/>
108-
{hoverView ? (
109-
<p>
110-
{state.series} "Lorem ipsum dolor sit amet, consectetur adipiscing
111-
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
112-
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
113-
</p>
114-
) : null}
11599
</div>
116100
</div>
117101
);

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

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -202,26 +202,13 @@
202202
align-items: center;
203203
justify-content: center;
204204
margin-top: 1rem;
205-
// padding: 3rem;
206-
// display: flex;
207-
// flex-wrap: wrap;
208-
// position: absolute;
209-
// grid-template-columns: repeat(2, 1fr);
210-
// grid-template-rows: repeat(2, 1fr);
211205
}
212206

213207
.metric {
214-
// background-color: black;
215208
min-height: 200px;
216209
min-width: 200px;
217210
}
218211

219-
#hoverText {
220-
background-color: blue;
221-
position: absolute;
222-
bottom: 100px;
223-
}
224-
225212
.bargraph {
226213
position: relative;
227214
margin-top: 1rem;

0 commit comments

Comments
 (0)