Skip to content

Commit bb3edef

Browse files
CfrancCyrilleCfrancCyrille
authored
Full dashboard initialization
1 parent cf298f4 commit bb3edef

File tree

11 files changed

+226
-146
lines changed

11 files changed

+226
-146
lines changed

‎src/main/js/components/MetricsBulletChart/BulletGraph/HorizontalBulletGraph.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ class HorizontalBulletGraph extends React.Component {
133133
top: "-0px",
134134
width: tickWidth + "px"
135135
},
136-
value: i * tickIncrement + this.props.scaleMin
136+
value: (i * tickIncrement + this.props.scaleMin).toFixed(2)
137137
}
138138
});
139139

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.MetricsBulletChart {
2+
text-align: center;
3+
padding: 20px;
4+
}
5+
6+
.MetricsBulletChart-logo {
7+
animation: MetricsBulletChart-logo-spin infinite 20s linear;
8+
height: 80px;
9+
}
10+
11+
.MetricsBulletChart-header {
12+
background-color: #222;
13+
height: 150px;
14+
padding: 20px;
15+
color: white;
16+
}
17+
18+
.MetricsBulletChart-title {
19+
font-size: 1.5em;
20+
}
21+
22+
.MetricsBulletChart-intro {
23+
font-size: large;
24+
}
25+
26+
@keyframes MetricsBulletChart-logo-spin {
27+
from {
28+
transform: rotate(0deg);
29+
}
30+
to {
31+
transform: rotate(360deg);
32+
}
33+
}

‎src/main/js/components/MetricsBulletChart/MetricsBulletChart.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import BulletGraph from './BulletGraph/BulletGraph';
3+
import "./MetricsBulletChart.css";
34

45
// PropTypes is a separate package now:
56
import PropTypes from 'prop-types';
@@ -32,7 +33,7 @@ class MetricsBulletChart extends React.Component {
3233

3334
render() {
3435
return ( <
35-
div className = "App" >
36+
div className = "MetricsBulletChart" >
3637
<
3738
div className = "Container" >
3839

@@ -41,14 +42,14 @@ class MetricsBulletChart extends React.Component {
4142
return ( <
4243
BulletGraph className = "BulletGraph"
4344
key = { i }
44-
title = { graph.title }
45+
title = { this.props.item.name }
4546
textLabel = { graph.textLabel }
4647
scaleMin = { graph.scaleMin }
47-
scaleMax = { graph.scaleMax }
48-
performanceVal = { graph.performanceVal }
49-
symbolMarker = { graph.symbolMarker }
50-
badVal = { graph.badVal }
51-
satisfactoryVal = { graph.satisfactoryVal }
48+
scaleMax = { this.props.item.max }
49+
performanceVal = { this.props.item.mean }
50+
symbolMarker = { this.props.item.mean }
51+
badVal = { this.props.item.min }
52+
satisfactoryVal = { this.props.item.max }
5253
unitsSuffix = { graph.unitsSuffix }
5354
unitsPrefix = { graph.unitsPrefix }
5455
height = { graph.height }

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import "./MetricsSummary.css";
2-
import React from "react";
2+
import React from "react";
33

44
class MetricsSummary extends React.Component {
5-
render() {
6-
return (
7-
<tr>
8-
<td>{this.props.item.name}</td>
9-
<td>{this.props.item.total}</td>
10-
<td>{this.props.item.min}</td>
11-
<td>{this.props.item.mean}</td>
12-
<td>{this.props.item.max}</td>
13-
</tr>
14-
);
15-
}
5+
render() {
6+
return (
7+
<tr>
8+
<td>{this.props.item.name}</td>
9+
<td>{this.props.item.total}</td>
10+
<td>{this.props.item.min}</td>
11+
<td>{this.props.item.mean}</td>
12+
<td>{this.props.item.max}</td>
13+
</tr>
14+
);
15+
}
1616
}
1717

18-
export default MetricsSummary;
18+
export default MetricsSummary;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
th#empty-cell {
3+
border: none;
4+
}
5+
6+
table {
7+
margin: 20px;
8+
}

‎src/main/js/components/MetricsSummaryPanel/MetricsSummaryPanel.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from "react";
2+
import template from "./MetricsSummaryPanel.css";
3+
import MetricsSummary from '../MetricsSummary';
4+
import MetricsBulletChart from '../MetricsBulletChart';
5+
6+
class MetricsSummaryPanel extends React.Component {
7+
state = {
8+
data: []
9+
};
10+
11+
componentDidMount() {
12+
13+
this.setState({
14+
data: [
15+
{ name: 'Nesting', total: '-', min: 5, mean: 5.2, max: 6 },
16+
{ name: 'Ratio Comment', total: '-', min: 18.6, mean: 29.8, max: 38.9 },
17+
{ name: 'Complexity Simplified', total: '-', min: 26, mean: 33.6, max: 58 },
18+
{ name: 'Line Of Code', total: 601, min: 101, mean: 110.2, max: 182 }
19+
]
20+
});
21+
}
22+
23+
render() {
24+
return ( <div className = "MetricsSummaryPanel" >
25+
<h3>{ this.props.label }</h3>
26+
<table>
27+
<tr>
28+
<th id="empty-cell"></th>
29+
<th>Total</th>
30+
<th>Min</th>
31+
<th>Mean</th>
32+
<th>Max</th>
33+
</tr>
34+
<tbody>
35+
{
36+
this.props.data.map(
37+
(item) =>
38+
<MetricsSummary item = { item }/>
39+
)
40+
}
41+
</tbody>
42+
</table>
43+
{
44+
this.props.data.map(
45+
(item) =>
46+
<MetricsBulletChart item = { item } />
47+
)
48+
}
49+
</div>
50+
);
51+
};
52+
}
53+
54+
export default MetricsSummaryPanel;

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import "./MetricsSummaryPanel.css";
2+
import React from "react";
3+
4+
function template() {
5+
return (
6+
<div className="metrics-summary-panel">
7+
<h1>MetricsSummaryPanel</h1>
8+
</div>
9+
);
10+
};
11+
12+
export default template;

‎src/main/js/components/MetricsSummaryPanel/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import MetricsSummaryPanel from "./MetricsSummaryPanel";
2+
export default MetricsSummaryPanel;

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

Lines changed: 26 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,23 @@
1-
th#empty-cell {
2-
border: none;
3-
}
4-
5-
61
.radio-tab {
72
display: none;
83
}
94

10-
table {
11-
margin: 20px;
12-
}
13-
14-
table,
15-
.metrics-bullet-chart{
16-
display: inline-block;
17-
vertical-align: top;
18-
}
19-
205
/* -- DIVS -- */
216

22-
23-
input[type="radio"]#radio-tab-f77:checked ~ div#main-content > div#panel-f77 {
7+
input[type="radio"]#radio-tab-f77:checked~div#main-content>div#panel-f77 {
248
display: block;
259
}
2610

27-
input[type="radio"]#radio-tab-f90:checked ~ div#main-content > div#panel-f90 {
11+
input[type="radio"]#radio-tab-f90:checked~div#main-content>div#panel-f90 {
2812
display: block;
2913
}
3014

31-
input[type="radio"]#radio-tab-sh:checked ~ div#main-content > div#panel-sh {
15+
input[type="radio"]#radio-tab-sh:checked~div#main-content>div#panel-sh {
3216
display: block;
3317
}
3418

35-
div.App {
36-
max-width: 1280px;
19+
div.MetricsSummaryTab {
20+
max-width: 1280px;
3721
margin: 50px auto;
3822
}
3923

@@ -42,57 +26,56 @@ label#tab-pane-f77 {
4226
left: 0px;
4327
z-index: 10;
4428
}
29+
4530
label#tab-pane-f90 {
4631
position: relative;
4732
left: -20px;
4833
z-index: 9;
4934
}
35+
5036
label#tab-pane-sh {
5137
position: relative;
5238
left: -40px;
5339
z-index: 8;
5440
}
5541

56-
input[type="radio"]:checked + label {
57-
background: rgba(100,200,200,1);
42+
input[type="radio"]:checked+label {
43+
background: rgba(100, 200, 200, 1);
5844
}
5945

60-
6146
input[type="radio"] {
6247
display: none;
6348
}
6449

65-
table,
66-
.metrics-bullet-chart {
67-
display: inline-block;
68-
vertical-align: middle;
69-
}
7050

7151
/* -- DIVS -- */
52+
7253
div[role="main-content"]#main-content {
7354
position: relative;
74-
border: solid 1px rgba(0,75,255,0.5);
55+
border: solid 1px rgba(0, 75, 255, 0.5);
7556
display: block;
7657
marggin: 20px 50px;
7758
}
59+
7860
div.panel {
7961
display: none;
8062
}
8163

82-
83-
input[type="radio"]#radio-tab-f77:checked ~ div#main-content > div#panel-f77 {
64+
input[type="radio"]#radio-tab-f77:checked~div#main-content>div#panel-f77 {
8465
display: block;
8566
}
8667

87-
input[type="radio"]#radio-tab-f90:checked ~ div#main-content > div#panel-f90 {
68+
input[type="radio"]#radio-tab-f90:checked~div#main-content>div#panel-f90 {
8869
display: block;
8970
}
9071

91-
input[type="radio"]#radio-tab-sh:checked ~ div#main-content > div#panel-sh {
72+
input[type="radio"]#radio-tab-sh:checked~div#main-content>div#panel-sh {
9273
display: block;
9374
}
9475

76+
9577
/* -- LABELS -- */
78+
9679
.tab-pane {
9780
display: inline-block;
9881
width: 50px;
@@ -101,36 +84,38 @@ input[type="radio"]#radio-tab-sh:checked ~ div#main-content > div#panel-sh {
10184
line-height: 20px;
10285
padding: 5px 50px;
10386
cursor: pointer;
104-
border: solid 1px rgba(0,75,255,1);
87+
border: solid 1px rgba(0, 75, 255, 1);
10588
margin: 0px;
10689
text-transform: uppercase;
10790
font-weight: 600;
10891
font-size: 15px;
10992
border-radius: 0px 30px 0px 0px;
110-
background: rgba(255,255,255,1);
93+
background: rgba(255, 255, 255, 1);
11194
}
95+
11296
#tab-pane-f77 {
11397
position: relative;
11498
left: 0px;
11599
z-index: 10;
116100
}
101+
117102
#tab-pane-f90 {
118103
position: relative;
119104
left: -20px;
120105
z-index: 9;
121106
}
107+
122108
#tab-pane-sh {
123109
position: relative;
124110
left: -40px;
125111
z-index: 8;
126112
}
113+
127114
label[role="tab-pane"].tab-pane#tab-pane-f90 {
128115
position: relative;
129116
left: -20px;
130117
}
131-
input[type="radio"].radio-tab:checked + label[role="tab-pane"].tab-pane {
132-
background: rgba(75,160,200,1);
133-
}
134-
135-
136118

119+
input[type="radio"].radio-tab:checked+label[role="tab-pane"].tab-pane {
120+
background: rgba(75, 160, 200, 1);
121+
}

0 commit comments

Comments
 (0)