Skip to content

Commit fdb04d0

Browse files
AT-NicolasMetivierAT-NicolasMetivier
committed
Update dashboard style.
1 parent 9da154c commit fdb04d0

File tree

6 files changed

+345
-175
lines changed

6 files changed

+345
-175
lines changed

‎.settings/org.eclipse.core.resources.prefs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
eclipse.preferences.version=1
22
encoding//src/main/java=UTF-8
33
encoding//src/main/resources=UTF-8
4+
encoding//src/test/java=UTF-8
45
encoding//src/test/resources=UTF-8
56
encoding/<project>=UTF-8

‎src/main/js/components/MetricsSummary/MetricsSummary.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
tr,td,th {
2+
border-collapse: collapse;
3+
text-align: center;
4+
}
5+
6+
th,td {
7+
border: solid 1px rgba(0,0,0,0.75);
8+
padding: 5px 10px;
9+
}
10+
11+
th {
12+
font-weight: bold;
13+
}
14+
15+
td {
16+
color: rgba(0,100,150,1);
17+
}
18+
19+
td:first-child {
20+
text-align: left;
21+
font-weight: 600;
22+
}

‎src/main/js/components/MetricsSummaryTab/MetricsSummaryTab.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
th#empty-cell {
2+
border: none;
3+
}
4+
5+
6+
.radio-tab {
7+
display: none;
8+
}
9+
10+
table {
11+
margin: 20px;
12+
}
13+
14+
table,
15+
.metrics-bullet-chart{
16+
display: inline-block;
17+
vertical-align: top;
18+
}
19+
20+
/* -- DIVS -- */
21+
22+
23+
input[type="radio"]#radio-tab-f77:checked ~ div#main-content > div#panel-f77 {
24+
display: block;
25+
}
26+
27+
input[type="radio"]#radio-tab-f90:checked ~ div#main-content > div#panel-f90 {
28+
display: block;
29+
}
30+
31+
input[type="radio"]#radio-tab-sh:checked ~ div#main-content > div#panel-sh {
32+
display: block;
33+
}
34+
35+
div.App {
36+
max-width: 1280px;
37+
margin: 50px auto;
38+
}
39+
40+
label#tab-pane-f77 {
41+
position: relative;
42+
left: 0px;
43+
z-index: 10;
44+
}
45+
label#tab-pane-f90 {
46+
position: relative;
47+
left: -20px;
48+
z-index: 9;
49+
}
50+
label#tab-pane-sh {
51+
position: relative;
52+
left: -40px;
53+
z-index: 8;
54+
}
55+
56+
input[type="radio"]:checked + label {
57+
background: rgba(100,200,200,1);
58+
}
59+
60+
61+
input[type="radio"] {
62+
display: none;
63+
}
64+
65+
table,
66+
.metrics-bullet-chart {
67+
display: inline-block;
68+
vertical-align: middle;
69+
}
70+
71+
/* -- DIVS -- */
72+
div[role="main-content"]#main-content {
73+
position: relative;
74+
border: solid 1px rgba(0,75,255,0.5);
75+
display: block;
76+
marggin: 20px 50px;
77+
}
78+
div.panel {
79+
display: none;
80+
}
81+
82+
83+
input[type="radio"]#radio-tab-f77:checked ~ div#main-content > div#panel-f77 {
84+
display: block;
85+
}
86+
87+
input[type="radio"]#radio-tab-f90:checked ~ div#main-content > div#panel-f90 {
88+
display: block;
89+
}
90+
91+
input[type="radio"]#radio-tab-sh:checked ~ div#main-content > div#panel-sh {
92+
display: block;
93+
}
94+
95+
/* -- LABELS -- */
96+
.tab-pane {
97+
display: inline-block;
98+
width: 50px;
99+
text-align: center;
100+
height: 20px;
101+
line-height: 20px;
102+
padding: 5px 50px;
103+
cursor: pointer;
104+
border: solid 1px rgba(0,75,255,1);
105+
margin: 0px;
106+
text-transform: uppercase;
107+
font-weight: 600;
108+
font-size: 15px;
109+
border-radius: 0px 30px 0px 0px;
110+
background: rgba(255,255,255,1);
111+
}
112+
#tab-pane-f77 {
113+
position: relative;
114+
left: 0px;
115+
z-index: 10;
116+
}
117+
#tab-pane-f90 {
118+
position: relative;
119+
left: -20px;
120+
z-index: 9;
121+
}
122+
#tab-pane-sh {
123+
position: relative;
124+
left: -40px;
125+
z-index: 8;
126+
}
127+
label[role="tab-pane"].tab-pane#tab-pane-f90 {
128+
position: relative;
129+
left: -20px;
130+
}
131+
input[type="radio"].radio-tab:checked + label[role="tab-pane"].tab-pane {
132+
background: rgba(75,160,200,1);
133+
}
134+
135+
136+

‎src/main/js/components/MetricsSummaryTab/MetricsSummaryTab.js‎

Lines changed: 96 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ class MetricsSummaryTab extends React.Component {
88
state = {
99
data: []
1010
};
11+
12+
labelF77 = document.createElement("Label");
13+
labelF90 = document.createElement("Label");
14+
labelSH = document.createElement("Label");
15+
1116

1217
componentDidMount() {
1318

@@ -19,34 +24,101 @@ class MetricsSummaryTab extends React.Component {
1924
{ name: 'Line Of Code', total: 601, min: 101, mean: 110.2, max: 182 }
2025
]
2126
});
27+
this.labelF77.setAttribute("for","radio-tab-f77");
28+
this.labelF77.setAttribute("role","tab-pane");
29+
this.labelF77.setAttribute("class","tab-pane");
30+
this.labelF77.setAttribute("id","tab-pane-f77");
31+
this.labelF77.innerHTML = "F77";
32+
33+
this.labelF90.setAttribute("for","radio-tab-f90");
34+
this.labelF90.setAttribute("role","tab-pane");
35+
this.labelF90.setAttribute("class","tab-pane");
36+
this.labelF90.setAttribute("id","tab-pane-f90");
37+
this.labelF90.innerHTML = "F90";
38+
39+
this.labelSH.setAttribute("for","radio-tab-sh");
40+
this.labelSH.setAttribute("role","tab-pane");
41+
this.labelSH.setAttribute("class","tab-pane");
42+
this.labelSH.setAttribute("id","tab-pane-sh");
43+
this.labelSH.innerHTML = "SH";
44+
2245
}
2346

2447
render() {
2548
return (
26-
<div className="App">
27-
28-
<table>
29-
<tr>
30-
<th></th>
31-
<th>Total</th>
32-
<th>Min</th>
33-
<th>Mean</th>
34-
<th>Max</th>
35-
</tr>
36-
<tbody>
37-
{this.state.data.map(
38-
(item) =>
39-
<MetricsSummary
40-
item={item}
41-
/>
42-
)
43-
}
44-
</tbody>
45-
</table>
46-
<MetricsBulletChart/>
47-
</div>
48-
49-
);
49+
<div className="App">
50+
51+
<input type="radio" name="radio-tab-chart" className="radio-tab" id="radio-tab-f77" value="f77" checked />
52+
<label role="tab-pane" className="tab-pane" id="tab-pane-f77" htmlFor="radio-tab-f77">F77</label>
53+
<input type="radio" name="radio-tab-chart" className="radio-tab" id="radio-tab-f90" value="f90" />
54+
<label role="tab-pane" className="tab-pane" id="tab-pane-f90" htmlFor="radio-tab-f90">F90</label>
55+
<input type="radio" name="radio-tab-chart" className="radio-tab" id="radio-tab-sh" value="sh" />
56+
<label role="tab-pane" className="tab-pane" id="tab-pane-sh" htmlFor="radio-tab-sh">SH</label>
57+
58+
<div data-reactroot="" role="main-content" className="main-content" id="main-content">
59+
<div role="panel" className="panel" id="panel-f77">
60+
<h3>F77</h3>
61+
<table>
62+
<tr>
63+
<th id="empty-cell"></th>
64+
<th>Total</th>
65+
<th>Min</th>
66+
<th>Mean</th>
67+
<th>Max</th>
68+
</tr>
69+
{this.state.data.map(
70+
(item) =>
71+
<MetricsSummary
72+
item={item}
73+
/>
74+
)
75+
}
76+
</table>
77+
<MetricsBulletChart/>
78+
</div>
79+
<div role="panel" className="panel" id="panel-f90">
80+
<h3>F90</h3>
81+
<table>
82+
<tr>
83+
<th id="empty-cell"></th>
84+
<th>Total</th>
85+
<th>Min</th>
86+
<th>Mean</th>
87+
<th>Max</th>
88+
</tr>
89+
{this.state.data.map(
90+
(item) =>
91+
<MetricsSummary
92+
item={item}
93+
/>
94+
)
95+
}
96+
</table>
97+
<MetricsBulletChart/>
98+
</div>
99+
<div role="panel" className="panel" id="panel-sh">
100+
<h3>SHELL</h3>
101+
<table>
102+
<tr>
103+
<th id="empty-cell"></th>
104+
<th>Total</th>
105+
<th>Min</th>
106+
<th>Mean</th>
107+
<th>Max</th>
108+
</tr>
109+
{this.state.data.map(
110+
(item) =>
111+
<MetricsSummary
112+
item={item}
113+
/>
114+
)
115+
}
116+
</table>
117+
<MetricsBulletChart/>
118+
</div>
119+
</div>
120+
</div>
121+
);
50122
}
51123
}
52124

0 commit comments

Comments
 (0)