Skip to content

Commit c1790b8

Browse files
pombredannepombredanne
committed
Fix for #152 
1 parent d252ee3 commit c1790b8

File tree

1 file changed

+136
-23
lines changed

1 file changed

+136
-23
lines changed

‎src/scancode/templates/html-app/template.html‎

Lines changed: 136 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,24 @@
6666
border: 1px solid #CCC;
6767
border-radius: 4px;
6868
}
69+
.chart rect {
70+
fill: #337ab7;
71+
}
72+
73+
.chart text {
74+
fill: black;
75+
font: 12px sans-serif;
76+
text-anchor: end;
77+
}
78+
79+
.axis path,
80+
.axis line {
81+
fill: none;
82+
stroke: #000;
83+
shape-rendering: crispEdges;
84+
}
85+
.chart {width: 100%;}
86+
6987
</style>
7088
</head>
7189
<body>
@@ -74,7 +92,7 @@
7492
<nav class="navbar navbar-default">
7593
<div class="container-fluid">
7694
<div class="navbar-header">
77-
<span class="navbar-brand icon-primary"><a href="https://github.com/nexB/scancode-toolkit/">ScanCode</a> scan results for: scancode-toolkit2/scancode-toolkit/samples/</span>
95+
<span class="navbar-brand icon-primary"><a href="https://github.com/nexB/scancode-toolkit/">ScanCode</a> scan results for: {{ scanned_path }}</span>
7896
</div>
7997
<ul class="nav navbar-nav navbar-right">
8098
<li><a href="http://www.nexb.com">Made by nexB</a></li>
@@ -94,15 +112,19 @@
94112
<div id="tree" style="overflow-x:scroll; overflow-y:auto;"></div>
95113
</div>
96114

97-
<div class="col-md-8">
98-
<ul class="nav nav-tabs">
99-
<li id="tab1" class="active"><a data-toggle="tab" href="#">License & Copyright Information</a></li>
100-
<li id="tab2"><a data-toggle="tab" href="#">File Information</a></li>
101-
<li id="tab3"><a data-toggle="tab" href="#">Package Information</a></li>
102-
</ul>
103-
104-
<table id="data_table" class="data_table display table-wrap" cellspacing="0" width="100%">
105-
</table>
115+
<div id="tabbar" class="col-md-8">
116+
<ul class="nav nav-tabs">
117+
<li id="tab4" class="active"><a data-toggle="tab" href="#chart">License Summary</a></li>
118+
<li id="tab1"><a data-toggle="tab" href="#">License & Copyright Information</a></li>
119+
<li id="tab2"><a data-toggle="tab" href="#">File Information</a></li>
120+
<li id="tab3"><a data-toggle="tab" href="#">Package Information</a></li>
121+
</ul>
122+
<div id="summary">
123+
<svg class="chart"></svg>
124+
</div>
125+
<div id="details">
126+
<table id="data_table" class="data_table display table-wrap" cellspacing="0" width="100%"></table>
127+
</div>
106128
</div>
107129
</div>
108130
</div>
@@ -119,6 +141,8 @@
119141
<script src="{{ assets_dir }}/bootstrap.min.js"></script>
120142
<script src="{{ assets_dir }}/jstree.min.js"></script>
121143
<script src="{{ assets_dir }}/jquery.dataTables.min.js"></script>
144+
<script src="{{ assets_dir }}/d3.min.js" charset="utf-8"></script>
145+
<script src="{{ assets_dir }}/chart.js"></script>
122146
<script type="text/javascript" src="{{ assets_dir }}/data.json"></script>
123147
<script type="text/javascript">
124148
var icon_file = "glyphicon glyphicon-file";
@@ -128,6 +152,7 @@
128152
var file_color_empty = "icon-empty";
129153
var dir_color = "icon-primary";
130154
var dir_color_empty = "icon-empty";
155+
var currNodeData;
131156

132157
genIconClass = function(isLeaf, isOpen, isEmpty){
133158
icon = isLeaf ? icon_file : (isOpen ? icon_dir_open : icon_dir_close);
@@ -146,46 +171,51 @@
146171
renderTable(dtData);
147172

148173
$( "#tab1" ).click(function() {
174+
$('#details').show();
175+
$('#summary').hide();
149176
table = $('#data_table').DataTable();
150177
table.clear();
151178
table.columns( '.tab1' ).visible( true );
152179
table.columns( '.tab2' ).visible( false );
153180
table.columns( '.tab3' ).visible( false );
181+
table.columns( '.tab4' ).visible( false );
154182
table.rows.add(dtData);
155183
table.draw();
156184
});
157185
$( "#tab2" ).click(function() {
186+
$('#details').show();
187+
$('#summary').hide();
158188
table = $('#data_table').DataTable();
159189
table.clear();
160190
table.columns( '.tab1' ).visible( false );
161191
table.columns( '.tab2' ).visible( true );
162192
table.columns( '.tab3' ).visible( false );
193+
table.columns( '.tab4' ).visible( false );
163194
table.rows.add(dtData2);
164195
table.draw();
165196
});
166197
$( "#tab3" ).click(function() {
198+
$('#details').show();
199+
$('#summary').hide();
167200
table = $('#data_table').DataTable();
168201
table.clear();
169202
table.columns( '.tab1' ).visible( false );
170203
table.columns( '.tab2' ).visible( false );
171204
table.columns( '.tab3' ).visible( true );
205+
table.columns( '.tab4' ).visible( false );
172206
table.rows.add(dtData3);
173207
table.draw();
174208
});
209+
$( "#tab4" ).click(function() {
210+
$('#details').hide();
211+
$('#summary').show();
212+
resetChart(currNodeData);
213+
});
175214

176-
// TODO: Optimize way to get table to redraw with correct widths
177-
table = $('#data_table').DataTable();
178-
table.columns( '.tab1' ).visible( false );
179-
table.columns( '.tab2' ).visible( false );
180-
table.columns( '.tab3' ).visible( false );
181-
table.clear();
182-
table.columns( '.tab1' ).visible( true );
183-
table.rows.add(dtData);
184-
table.draw();
215+
$("#details").hide();
185216
});
186-
187217
// Returns a row in the format expected by jstree
188-
getJSTreeData = function(parent, id, text, icon_class){
218+
function getJSTreeData(parent, id, text, icon_class){
189219
return {
190220
"id": id,
191221
"parent": parent == "" ? '#' : parent,
@@ -197,7 +227,7 @@
197227
};
198228

199229
// Return license and copyright data in table format
200-
toDataTableFormat = function(jsonData){
230+
function toDataTableFormat(jsonData){
201231
return $.map(jsonData, function(x){
202232
// Add all license columns here
203233
licenseData = [];
@@ -351,6 +381,10 @@
351381

352382
// Renders json data to jsTree format
353383
toJSTreeFormat = function(jsonData){
384+
// Sort data by location to ensure files are seen before directories
385+
jsonData.sort(function (a, b) {
386+
return a.location.localeCompare( b.location );
387+
}).reverse();
354388
// Keeps track of IDs
355389
var uniqueIDs = {};
356390

@@ -413,11 +447,12 @@
413447
}
414448
}
415449
})
416-
.on("select_node.jstree", function(e, data) {
450+
.on("select_node.jstree", function(e, nodeData) {
417451
// Redraw data table (forces custom filter to rerun)
418452
// TODO: Figure out the tab and only update that table instead of all
419453
table = $('#data_table').DataTable();
420454
table.draw();
455+
onNodeSelected(nodeData);
421456
})
422457
.on('open_node.jstree', function(e, data) {
423458
data.instance.set_icon(data.node, genIconClass(false, true, ""));
@@ -427,6 +462,32 @@
427462
});
428463
};
429464

465+
function onNodeSelected(nodeData){
466+
currNodeData = nodeData;
467+
resetChart(currNodeData);
468+
}
469+
470+
function resetChart(nodeData) {
471+
barChart.remove();
472+
barChart = new BarChart(filteredData(nodeData), chartOptions, '.chart');
473+
}
474+
475+
// filter the data
476+
function filteredData(nodeData){
477+
if (typeof nodeData == 'undefined') {
478+
return formatChartData(data);
479+
}
480+
return formatChartData($.map(data, function(item){
481+
var pattern = '^' + nodeData.selected[0];
482+
pattern += nodeData.node.children.length > 0 ? '/' : '';
483+
if (item.location.match(pattern)){
484+
return item;
485+
} else {
486+
return;
487+
}
488+
}));
489+
}
490+
430491
// Render the DataTable by specifying Copyright and License
431492
renderTable = function(data) {
432493
return $('#data_table').DataTable( {
@@ -518,5 +579,57 @@
518579

519580
$('#button').click(function(){ $('#data_table').toggleClass('ellipsis'); })
520581
</script>
582+
<script>
583+
function formatChartData(data) {
584+
585+
var NO_LICENSES = [{short_name: 'No License Found'}]
586+
// Get license short name and if no license set it to No License Found
587+
var shortNames = $.map(data, function(item){
588+
licenses = item.licenses.length > 0 ? item.licenses : NO_LICENSES;
589+
return $.map(licenses, function(license) {
590+
return license.short_name;
591+
});
592+
});
593+
594+
// Sum the total number of times the license appears
595+
var count = {};
596+
$.each(shortNames, function(i, name){
597+
count[name] = count[name] + 1 || 1;
598+
});
599+
600+
// Transform license count into array of objects with license name & count
601+
var chartData = $.map(count, function(val, key) {
602+
return {
603+
name: key,
604+
val: val
605+
};
606+
});
607+
608+
// Sorts the data highest value to lowest value
609+
chartData.sort(function(a,b){
610+
if (a.val == b.val) {
611+
return a.name.localeCompare(b.name);
612+
} else {
613+
return a.val > b.val ? -1 : 1;
614+
}
615+
});
616+
return chartData;
617+
}
618+
var chartData = formatChartData(data);
619+
620+
// Options for the bar chart
621+
var chartOptions = {
622+
name: "License Summary",
623+
margin: 30,
624+
barHeight: 25,
625+
xAxisName: "License Count",
626+
yAxisName: "License Name"
627+
};
628+
629+
// Create and display the bar chart
630+
barChart = new BarChart(chartData, chartOptions, '.chart');
631+
632+
$(window).on('resize', barChart.draw);
633+
</script>
521634
</body>
522635
</html>

0 commit comments

Comments
 (0)