Skip to content

Commit 3ef3429

Browse files
CourageWolfCourageWolf
committed
beta version
1 parent b4cd119 commit 3ef3429

File tree

5 files changed

+134
-117
lines changed

5 files changed

+134
-117
lines changed

‎src/app/components/StateRoute.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,6 @@ const StateRoute = (props: StateRouteProps) => {
124124
if (webMetrics.FID <= 100) FIDColor = "#0bce6b";
125125
if (webMetrics.FID > 100 && webMetrics.FID <= 300 ) FIDColor = "#fc5a03";
126126
if (webMetrics.FID > 300 ) FIDColor = "#fc2000";
127-
if (webMetrics.CLS <= 0.1) FIDColor = "#0bce6b";
128-
if (webMetrics.CLS > 0.1 && webMetrics.CLS <= 0.25 ) CLSColor = "#fc5a03";
129-
if (webMetrics.CLS > 0.25 ) CLSColor = "#fc2000";
130127
if (webMetrics.FCP <= 9000) FCPColor = "#0bce6b";
131128
if (webMetrics.FCP > 900 && webMetrics.FCP <= 1100 ) FCPColor = "#fc5a03";
132129
if (webMetrics.FCP > 1100 ) FCPColor = "#fc2000";
@@ -139,12 +136,11 @@ const StateRoute = (props: StateRouteProps) => {
139136
<div className="web-metrics-container">
140137
<WebMetrics color={LCPColor} series={(webMetrics.LCP / 2500) * 100} formatted={(val) => ((val / 100) * 2500).toFixed(2) + ' ms'} label="LCP"/>
141138
<WebMetrics color={FIDColor} series={(webMetrics.FID) * 25} formatted={(val) => ((val / 25)).toFixed(2) + ' ms'} label="FID"/>
142-
{/* <WebMetrics color={CLSColor} series={(webMetrics.CLS * 50) * 100} formatted={(val) => ((val / 100) / 50).toFixed(2)} label="CLS"/> */}
143139
<WebMetrics color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
144140
<WebMetrics color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'} label="TTFB"/>
141+
<div id = 'hoverText'>Testing</div>
145142
</div>
146-
);
147-
};
143+
)};
148144

149145
const renderPerfView = () => {
150146
if (hierarchy) {

‎src/app/components/WebMetrics.tsx

Lines changed: 115 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,120 @@
1-
import React, { useState, useEffect, Component } from 'react';
2-
import Charts from 'react-apexcharts';
3-
import useForceUpdate from './useForceUpdate';
1+
import React, { useState, useEffect, Component } from "react";
2+
import Charts from "react-apexcharts";
3+
import useForceUpdate from "./useForceUpdate";
44

55
const radialGraph = (props) => {
6+
const [hoverView, setHoverView] = useState(false);
7+
const state = {
8+
series: [props.series],
9+
options: {
10+
colors: [props.color],
11+
chart: {
12+
height: 100,
13+
width: 100,
14+
type: "radialBar",
15+
toolbar: {
16+
show: false,
17+
},
18+
},
19+
plotOptions: {
20+
radialBar: {
21+
startAngle: -135,
22+
endAngle: 135,
23+
hollow: {
24+
margin: 0,
25+
size: "75%",
26+
background: "#242529",
27+
image: undefined,
28+
imageOffsetX: 0,
29+
imageOffsetY: 0,
30+
position: "front",
31+
dropShadow: {
32+
enabled: false,
33+
top: 3,
34+
left: 0,
35+
blur: 4,
36+
opacity: 0.24,
37+
},
38+
},
39+
track: {
40+
background: "#fff",
41+
strokeWidth: "3%",
42+
margin: 0, // margin is in pixels
43+
dropShadow: {
44+
enabled: true,
45+
top: -3,
46+
left: 0,
47+
blur: 4,
48+
opacity: 0.35,
49+
},
50+
},
651

7-
const state = {
8-
9-
series: [props.series],
10-
options: {
11-
colors: [props.color],
12-
chart: {
13-
height: 100,
14-
width: 100,
15-
type: 'radialBar',
16-
toolbar: {
17-
show: false,
18-
}
19-
},
20-
plotOptions: {
21-
radialBar: {
22-
startAngle: -135,
23-
endAngle: 135,
24-
hollow: {
25-
margin: 0,
26-
size: '75%',
27-
background: '#242529',
28-
image: undefined,
29-
imageOffsetX: 0,
30-
imageOffsetY: 0,
31-
position: 'front',
32-
dropShadow: {
33-
enabled: false,
34-
top: 3,
35-
left: 0,
36-
blur: 4,
37-
opacity: 0.24
38-
}
39-
},
40-
track: {
41-
background: '#fff',
42-
strokeWidth: '3%',
43-
margin: 0, // margin is in pixels
44-
dropShadow: {
45-
enabled: true,
46-
top: -3,
47-
left: 0,
48-
blur: 4,
49-
opacity: 0.35
50-
}
51-
},
52-
53-
dataLabels: {
54-
show: true,
55-
name: {
56-
offsetY: -10,
57-
show: true,
58-
color: '#fff',
59-
fontSize: '24px'
60-
},
61-
value: {
62-
formatter: props.formatted,
63-
color: '#fff',
64-
fontSize: '16px',
65-
show: true,
66-
}
67-
}
68-
}
69-
},
70-
fill: {
71-
type: 'solid',
72-
gradient: {
73-
shade: 'dark',
74-
type: 'horizontal',
75-
shadeIntensity: 0.1,
76-
gradientToColors: [props.color],
77-
inverseColors: false,
78-
opacityFrom: 1,
79-
opacityTo: 1,
80-
stops: [0, 100]
81-
}
82-
},
83-
stroke: {
84-
lineCap: 'flat'
85-
},
86-
labels: [props.label],
87-
},
88-
};
52+
dataLabels: {
53+
show: true,
54+
name: {
55+
offsetY: -10,
56+
show: true,
57+
color: "#fff",
58+
fontSize: "24px",
59+
},
60+
value: {
61+
formatter: props.formatted,
62+
color: "#fff",
63+
fontSize: "16px",
64+
show: true,
65+
},
66+
},
67+
},
68+
},
69+
fill: {
70+
type: "solid",
71+
gradient: {
72+
shade: "dark",
73+
type: "horizontal",
74+
shadeIntensity: 0.1,
75+
gradientToColors: [props.color],
76+
inverseColors: false,
77+
opacityFrom: 1,
78+
opacityTo: 1,
79+
stops: [0, 100],
80+
},
81+
},
82+
stroke: {
83+
lineCap: "flat",
84+
},
85+
labels: [props.label],
86+
},
87+
};
88+
// const changeHoverText = () => {
89+
// setHoverView(true);
90+
// // const hoverBoxElem = document.getElementById("hoverText");
91+
// // hoverBoxElem.innerHTML = `${state.series}`;
92+
// };
8993

94+
return (
95+
<div className="metric">
96+
<div
97+
id="chart"
98+
onMouseEnter={() => setHoverView(true)}
99+
onMouseLeave={() => setHoverView(false)}
100+
>
101+
<Charts
102+
options={state.options}
103+
series={state.series}
104+
type="radialBar"
105+
height={200}
106+
width={200}
107+
/>
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}
115+
</div>
116+
</div>
117+
);
118+
};
90119

91-
return (
92-
93-
94-
<div id="card" className="metric">
95-
<div id="chart">
96-
<Charts options={state.options} series={state.series} type="radialBar" height={200} width={200}/>
97-
</div>
98-
</div>
99-
100-
)
101-
}
102-
103-
104-
export default radialGraph;
120+
export default radialGraph;

‎src/app/styles/components/_buttons.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -309,8 +309,8 @@ aside {
309309
width: 30px;
310310
}
311311
.toggle {
312-
width: 40px;
313-
height: 40px;
312+
// width: 40px;
313+
// height: 10px;
314314
display: block;
315315
position: relative;
316316
margin-top: 1rem;
@@ -324,14 +324,14 @@ aside {
324324
height: 4px;
325325
border-radius: 4px;
326326
transition: transform 0.15s;
327-
background-color: #00dffc;
327+
background-color:$blue-brand;
328328
}
329329

330330
.toggle i {
331331
top: 46%;
332-
left: 18%;
332+
left: 4%;
333333
display: block;
334-
background: #00dffc;
334+
background:$blue-brand;
335335
}
336336

337337
.toggle i::before {
@@ -361,7 +361,7 @@ aside {
361361
transform: none;
362362
}
363363
#arrow {
364-
height: 20px !important;
364+
// height: 10px !important;
365365
margin-bottom: 40px;
366-
margin-right: 20px;
366+
// margin-right: 20px;
367367
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
grid-template-rows: 8fr 1fr;
77
grid-template-areas:
88
'actions states'
9-
'actions travel'
10-
'actions buttons';
9+
'travel travel'
10+
'buttons buttons';
1111
}
1212

1313

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,20 +201,25 @@
201201
grid-template-columns: auto auto;
202202
align-items: center;
203203
justify-content: center;
204+
margin-top: 1rem;
204205
// padding: 3rem;
205206
// display: flex;
206207
// flex-wrap: wrap;
207-
// margin-top: 0.1rem;
208208
// position: absolute;
209209
// grid-template-columns: repeat(2, 1fr);
210210
// grid-template-rows: repeat(2, 1fr);
211211
}
212212

213213
.metric {
214+
// background-color: black;
214215
min-height: 200px;
215216
min-width: 200px;
216-
max-height: 200px;
217-
max-width: 200px;
217+
}
218+
219+
#hoverText {
220+
background-color: blue;
221+
position: absolute;
222+
bottom: 100px;
218223
}
219224

220225
.bargraph {

0 commit comments

Comments
 (0)