Skip to content

Commit fe06db2

Browse files
CfrancCyrilleCfrancCyrille
authored
Merge pull request #4 from AT-NicolasMetivier/dev
Dev
2 parents 9da154c + 4ee3031 commit fe06db2

File tree

6 files changed

+255
-180
lines changed

6 files changed

+255
-180
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: 75 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ class MetricsSummaryTab extends React.Component {
88
state = {
99
data: []
1010
};
11-
11+
1212
componentDidMount() {
1313

1414
this.setState({
@@ -19,34 +19,84 @@ class MetricsSummaryTab extends React.Component {
1919
{ name: 'Line Of Code', total: 601, min: 101, mean: 110.2, max: 182 }
2020
]
2121
});
22+
2223
}
2324

2425
render() {
2526
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-
);
27+
<div className="App">
28+
29+
<input type="radio" name="radio-tab-chart" className="radio-tab" id="radio-tab-f77" value="f77" checked />
30+
<label role="tab-pane" className="tab-pane" id="tab-pane-f77" htmlFor="radio-tab-f77">F77</label>
31+
<input type="radio" name="radio-tab-chart" className="radio-tab" id="radio-tab-f90" value="f90" />
32+
<label role="tab-pane" className="tab-pane" id="tab-pane-f90" htmlFor="radio-tab-f90">F90</label>
33+
<input type="radio" name="radio-tab-chart" className="radio-tab" id="radio-tab-sh" value="sh" />
34+
<label role="tab-pane" className="tab-pane" id="tab-pane-sh" htmlFor="radio-tab-sh">SH</label>
35+
36+
<div data-reactroot="" role="main-content" className="main-content" id="main-content">
37+
<div role="panel" className="panel" id="panel-f77">
38+
<h3>F77</h3>
39+
<table>
40+
<tr>
41+
<th id="empty-cell"></th>
42+
<th>Total</th>
43+
<th>Min</th>
44+
<th>Mean</th>
45+
<th>Max</th>
46+
</tr>
47+
{this.state.data.map(
48+
(item) =>
49+
<MetricsSummary
50+
item={item}
51+
/>
52+
)
53+
}
54+
</table>
55+
<MetricsBulletChart/>
56+
</div>
57+
<div role="panel" className="panel" id="panel-f90">
58+
<h3>F90</h3>
59+
<table>
60+
<tr>
61+
<th id="empty-cell"></th>
62+
<th>Total</th>
63+
<th>Min</th>
64+
<th>Mean</th>
65+
<th>Max</th>
66+
</tr>
67+
{this.state.data.map(
68+
(item) =>
69+
<MetricsSummary
70+
item={item}
71+
/>
72+
)
73+
}
74+
</table>
75+
<MetricsBulletChart/>
76+
</div>
77+
<div role="panel" className="panel" id="panel-sh">
78+
<h3>SHELL</h3>
79+
<table>
80+
<tr>
81+
<th id="empty-cell"></th>
82+
<th>Total</th>
83+
<th>Min</th>
84+
<th>Mean</th>
85+
<th>Max</th>
86+
</tr>
87+
{this.state.data.map(
88+
(item) =>
89+
<MetricsSummary
90+
item={item}
91+
/>
92+
)
93+
}
94+
</table>
95+
<MetricsBulletChart/>
96+
</div>
97+
</div>
98+
</div>
99+
);
50100
}
51101
}
52102

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

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,9 @@ import MetricsBulletChart from '../MetricsBulletChart';
55
import React from "react";
66

77
function template() {
8-
return (
9-
<div className="App">
10-
<script src="https://code.highcharts.com/highcharts.js"></script>
11-
<script src="https://code.highcharts.com/modules/bullet.js"></script>
12-
13-
14-
<table>
15-
<tr>
16-
<th></th>
17-
<th>Total</th>
18-
<th>Min</th>
19-
<th>Mean</th>
20-
<th>Max</th>
21-
</tr>
22-
<tbody>
23-
{this.state.data.map(
24-
(item) =>
25-
<MetricsSummary
26-
item={item}
27-
/>
28-
)
29-
}
30-
</tbody>
31-
</table>
32-
<MetricsBulletChart/>
33-
</div>
34-
);
8+
9+
10+
return ( );
3511
};
3612

3713
export default template;

0 commit comments

Comments
 (0)