Skip to content

Commit e1c9e6e

Browse files
NkmaiNkmai
authored
Merge pull request #19 from Nkmai/renderTab
Render tab
2 parents 78ba6fa + 4b78ff0 commit e1c9e6e

File tree

8 files changed

+92
-25
lines changed

8 files changed

+92
-25
lines changed

‎archive/pre-v4-demo.gif

-2.29 MB
Binary file not shown.

‎assets/extension-console.gif

-2.47 MB
Binary file not shown.

‎assets/reactime-console.gif

-6.16 MB
Binary file not shown.

‎src/app/components/PerformanceVisx.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,12 @@ const PerformanceVisx = (props: BarStackProps) => {
9898
}
9999
// filter and structure incoming data for VISX
100100
const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
101-
101+
const colorSlider = "#ff6569"
102+
// style={{ position: 'relative' }}
102103
// if performance tab is too small it will not return VISX component
103104
return (
104-
<div style={{ position: 'relative' }}>
105-
<FormControlLabel
105+
<div className='renderTab'>
106+
<FormControlLabel style={{"margin-left":"30px", "margin-top": "20px"}}
106107
control={
107108
<Switch
108109
onChange={toggleView}
@@ -113,9 +114,9 @@ const PerformanceVisx = (props: BarStackProps) => {
113114
label="Renders"
114115
/>
115116
{/* <button onClick={toggleView}>Toggle Button</button> */}
116-
<div>
117+
<div style={{"display": "flex", "justify-content": "center"}}>
117118
{isToggled === 'frequencyCards'
118-
? <RenderingFrequency data={data.componentData}/>
119+
? <RenderingFrequency data={data.componentData}/>
119120
: <BarGraph data={data} width={width} height={height}/>
120121
}
121122
</div>

‎src/app/components/RenderingFrequency.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import React from 'react'
1+
2+
import React from 'react';
3+
24

35
const RenderingFrequency = (props) => {
46
const perfData = props.data
@@ -9,13 +11,24 @@ const RenderingFrequency = (props) => {
911
Object.keys(perfData).map( componentName => {
1012
const currentComponent = perfData[componentName]
1113
return (
12-
<div>
13-
<h2>{componentName} </h2>
14-
<p>{currentComponent.stateType}</p>
15-
<div>Render Count: {currentComponent.renderFrequency} </div>
16-
<p>Average Time: {(currentComponent.totalRenderTime/currentComponent.renderFrequency).toFixed(3) } ms</p>
17-
</div>
18-
)
14+
<div className="StyledGridElement">
15+
<div className="RenderLeft">
16+
<h3>{componentName} </h3>
17+
<h4>{currentComponent.stateType}</h4>
18+
<h4>
19+
average time:{' '}
20+
{(
21+
currentComponent.totalRenderTime /
22+
currentComponent.renderFrequency
23+
).toFixed(3)}{' '}
24+
ms
25+
</h4>
26+
</div>
27+
<div className="RenderRight">
28+
<p>{currentComponent.renderFrequency}</p>
29+
</div>
30+
</div>
31+
);
1932
})
2033
}
2134
</div>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#RenderContainer {
2+
display: flex;
3+
justify-content: center;
4+
}

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.StyledGridElement {
2+
display: flex;
3+
// align-content: center;
4+
align-items: center;
5+
justify-content: space-between;
6+
background: #242529;
7+
padding: 20px;
8+
width: 40vh;
9+
height: 5vh;
10+
margin: 20px 10px;
11+
font-family: 'Roboto', sans-serif;
12+
border-radius: 5px;
13+
border: 1px solid rgba(184, 196, 194, 0.25);
14+
box-shadow: 2px 3px 4px 2px rgba(0, 0, 0, 0.2);
15+
16+
h3 {
17+
color: $text-color;
18+
margin-bottom: 5px;
19+
margin-top: 5px;
20+
text-transform: uppercase;
21+
font-size: 14px;
22+
font-weight: 500;
23+
}
24+
25+
h4 {
26+
color: $text-color;
27+
margin-bottom: 5px;
28+
margin-top: 5px;
29+
font-weight: 300;
30+
}
31+
32+
p {
33+
color: $brand-color;
34+
line-height: 20px;
35+
text-align: center;
36+
font-size: 18px;
37+
line-height: 18px;
38+
}
39+
}
40+
.RenderLeft {
41+
// padding: 10px;
42+
}
43+
.RenderRight {
44+
border-radius: 5px;
45+
background: $blue-color-gradient;
46+
width: 10%;
47+
padding: 0 0.5em;
48+
}

‎src/app/styles/main.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
11
@charset 'UTF-8';
22
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
33
* {
4-
font-family: 'Roboto', sans-serif;
4+
font-family: 'Roboto', sans-serif;
55
}
66

7-
87
/* width */
98
::-webkit-scrollbar {
10-
width: 5px;
11-
height: 8px;
9+
width: 5px;
10+
height: 8px;
1211
}
1312

14-
/* Track */
13+
/* Track */
1514
::-webkit-scrollbar-track {
16-
background: rgb(20, 20, 20);
15+
background: rgb(20, 20, 20);
1716
}
18-
17+
1918
/* Handle */
2019
::-webkit-scrollbar-thumb {
21-
background: rgb(67, 67, 71);
20+
background: rgb(67, 67, 71);
2221
}
2322

2423
/* Handle on hover */
2524
::-webkit-scrollbar-thumb:hover {
26-
background: rgb(97, 97, 97);
25+
background: rgb(97, 97, 97);
2726
}
2827

2928
// 1. Configuration and helpers
@@ -34,11 +33,13 @@
3433

3534
// 4. Layout-related sections
3635
@import 'layout/mainContainer', 'layout/bodyContainer', 'layout/actionContainer',
37-
'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
38-
'layout/buttonsContainer', 'layout/headContainer.scss';
36+
'layout/errorContainer', 'layout/stateContainer', 'layout/travelContainer',
37+
'layout/buttonsContainer', 'layout/headContainer.scss';
3938

4039
// 5. Components
41-
@import 'components/buttons', 'components/actionComponent', 'components/jsonTree';
40+
@import 'components/buttons', 'components/actionComponent',
41+
'components/jsonTree', 'components/RenderingFrequency',
42+
'components/PerformanceVisx';
4243

4344
// slider component
4445
@import './components/rc-slider', './components/sliderHandle';

0 commit comments

Comments
 (0)