|
1
|
|
|
<?php require __DIR__ . '/_header.php'; ?> |
|
2
|
|
|
|
|
3
|
|
|
|
|
4
|
|
|
<?php |
|
5
|
|
|
|
|
6
|
|
|
// 1. build an associative array |
|
7
|
|
|
$array = []; |
|
8
|
|
|
foreach ($classes as $class) { |
|
9
|
|
|
if (isset($class['lloc'])) { |
|
10
|
|
|
array_push($array, $class['lloc']); |
|
11
|
|
|
} |
|
12
|
|
|
} |
|
13
|
|
|
|
|
14
|
|
|
// 2. percentile map |
|
15
|
|
|
$json = []; |
|
16
|
|
|
if(count($array) > 1) { |
|
17
|
|
|
$range = range(0.5, 1, .05); |
|
18
|
|
|
foreach ($range as $percentile) { |
|
19
|
|
|
$json[] = (object)[ |
|
20
|
|
|
'lloc' => percentile($array, $percentile), |
|
21
|
|
|
'percentile' => round($percentile * 100), |
|
22
|
|
|
]; |
|
23
|
|
|
} |
|
24
|
|
|
} |
|
25
|
|
|
|
|
26
|
|
|
?> |
|
27
|
|
|
|
|
28
|
|
|
|
|
29
|
|
|
<div class="row"> |
|
30
|
|
|
<div class="column"> |
|
31
|
|
|
<div class="bloc"> |
|
32
|
|
|
<h4>Percentile distribution of logical lines of code by class</h4> |
|
33
|
|
|
<div id="lloc-repartition" style="height: 200px"></div> |
|
34
|
|
|
<div class="help" style="text-align: center">Percentile</div> |
|
35
|
|
|
</div> |
|
36
|
|
|
</div> |
|
37
|
|
|
</div> |
|
38
|
|
|
|
|
39
|
|
|
<div class="row"> |
|
40
|
|
|
<div class="column"> |
|
41
|
|
|
<div class="bloc"> |
|
42
|
|
|
<h4>Explore</h4> |
|
43
|
|
|
<table class="js-sort-table" id="table-length"> |
|
44
|
|
|
<thead> |
|
45
|
|
|
<tr> |
|
46
|
|
|
<th>Class</th> |
|
47
|
|
|
<th class="js-sort-number">LLOC</th> |
|
48
|
|
|
<th class="js-sort-number">CLOC</th> |
|
49
|
|
|
<th class="js-sort-number">Volume</th> |
|
50
|
|
|
<th class="js-sort-number">Intelligent content</th> |
|
51
|
|
|
<th class="js-sort-number">Comment Weight</th> |
|
52
|
|
|
</tr> |
|
53
|
|
|
</thead> |
|
54
|
|
|
<?php |
|
55
|
|
View Code Duplication |
foreach ($classes as $class) { ?> |
|
|
|
|
|
|
56
|
|
|
<tr> |
|
57
|
|
|
<td><span class="path"><?php echo $class['name']; ?></span></td> |
|
58
|
|
|
<?php foreach (['lloc', 'cloc', 'volume', 'intelligentContent', 'commentWeight'] as $attribute) {?> |
|
59
|
|
|
<td> |
|
60
|
|
|
<span class="badge" <?php echo gradientStyleFor($classes, $attribute, $class[$attribute]);?>);"> |
|
61
|
|
|
<?php echo isset($class[$attribute]) ? $class[$attribute] : ''; ?> |
|
62
|
|
|
</span> |
|
63
|
|
|
</td> |
|
64
|
|
|
<?php } ?> |
|
65
|
|
|
</tr> |
|
66
|
|
|
<?php } ?> |
|
67
|
|
|
</table> |
|
68
|
|
|
</div> |
|
69
|
|
|
</div> |
|
70
|
|
|
</div> |
|
71
|
|
|
|
|
72
|
|
|
|
|
73
|
|
|
<?php require __DIR__ . '/_footer.php'; ?> |
|
74
|
|
|
|
|
75
|
|
|
|
|
76
|
|
|
<script> |
|
77
|
|
|
|
|
78
|
|
|
// table |
|
79
|
|
|
sortTable(document.getElementById('table-length'), 1, -1); |
|
80
|
|
|
|
|
81
|
|
|
|
|
82
|
|
|
var margin = {top: 20, right: 20, bottom: 30, left: 40}, |
|
83
|
|
|
width = document.getElementById('lloc-repartition').offsetWidth - margin.left - margin.right, |
|
84
|
|
|
height = document.getElementById('lloc-repartition').offsetHeight - margin.top - margin.bottom; |
|
85
|
|
|
|
|
86
|
|
|
var x = d3.scale.ordinal() |
|
87
|
|
|
.rangeRoundBands([0, width], .1); |
|
88
|
|
|
|
|
89
|
|
|
var y = d3.scale.linear() |
|
90
|
|
|
.range([height, 0]); |
|
91
|
|
|
|
|
92
|
|
|
var xAxis = d3.svg.axis() |
|
93
|
|
|
.scale(x) |
|
94
|
|
|
.orient("bottom"); |
|
95
|
|
|
|
|
96
|
|
|
var yAxis = d3.svg.axis() |
|
97
|
|
|
.scale(y) |
|
98
|
|
|
.orient("left") |
|
99
|
|
|
; |
|
100
|
|
|
|
|
101
|
|
|
var svg = d3.select("#lloc-repartition").append("svg") |
|
102
|
|
|
.attr("width", width + margin.left + margin.right) |
|
103
|
|
|
.attr("height", height + margin.top + margin.bottom) |
|
104
|
|
|
.append("g") |
|
105
|
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
106
|
|
|
|
|
107
|
|
|
data = <?php echo json_encode($json, JSON_PRETTY_PRINT); ?>; |
|
108
|
|
|
|
|
109
|
|
|
x.domain(data.map(function (d) { |
|
110
|
|
|
return d.percentile; |
|
111
|
|
|
})); |
|
112
|
|
|
y.domain([0, d3.max(data, function (d) { |
|
113
|
|
|
return d.lloc; |
|
114
|
|
|
})]); |
|
115
|
|
|
|
|
116
|
|
|
svg.append("g") |
|
117
|
|
|
.attr("class", "x axis") |
|
118
|
|
|
.attr("transform", "translate(0," + height + ")") |
|
119
|
|
|
.call(xAxis) |
|
120
|
|
|
.append("text") |
|
121
|
|
|
.style("text-anchor", "end") |
|
122
|
|
|
|
|
123
|
|
|
svg.append("g") |
|
124
|
|
|
.attr("class", "y axis") |
|
125
|
|
|
.call(yAxis) |
|
126
|
|
|
.append("text") |
|
127
|
|
|
.attr("transform", "rotate(-90)") |
|
128
|
|
|
.attr("y", 6) |
|
129
|
|
|
.attr("dy", ".71em") |
|
130
|
|
|
.style("text-anchor", "end") |
|
131
|
|
|
.text("Logical lines of code"); |
|
132
|
|
|
|
|
133
|
|
|
svg.selectAll(".bar") |
|
134
|
|
|
.data(data) |
|
135
|
|
|
.enter().append("rect") |
|
136
|
|
|
.attr("class", "bar") |
|
137
|
|
|
.attr("x", function (d) { |
|
138
|
|
|
return x(d.percentile); |
|
139
|
|
|
}) |
|
140
|
|
|
.attr("width", x.rangeBand()) |
|
141
|
|
|
.attr("y", function (d) { |
|
142
|
|
|
return y(d.lloc); |
|
143
|
|
|
}) |
|
144
|
|
|
.attr("height", function (d) { |
|
145
|
|
|
return height - y(d.lloc); |
|
146
|
|
|
}); |
|
147
|
|
|
|
|
148
|
|
|
function type(d) { |
|
149
|
|
|
d.lloc = +d.lloc; |
|
150
|
|
|
return d; |
|
151
|
|
|
} |
|
152
|
|
|
|
|
153
|
|
|
</script> |
|
154
|
|
|
|
Duplicated code is one of the most pungent code smells. If you need to duplicate the same code in three or more different places, we strongly encourage you to look into extracting the code into a single class or operation.
You can also find more detailed suggestions in the “Code” section of your repository.