mirror of https://github.com/MISP/misp-dashboard
Added ranking table
parent
1ae827d202
commit
cfd1818a33
|
@ -249,7 +249,7 @@ def getCategPerContrib():
|
|||
|
||||
@app.route("/_getAllOrg")
|
||||
def getAllOrg():
|
||||
data = ['CIRCL', 'CASES', 'SMILE' ,'ORG4' ,'ORG5']
|
||||
data = ['CIRCL', 'CASES', 'SMILE' ,'ORG4' ,'ORG5', 'SUPER HYPER LONG ORGINZATION NAME']
|
||||
return jsonify(data)
|
||||
|
||||
@app.route("/_getTopCoord")
|
||||
|
|
|
@ -3,6 +3,19 @@
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
padding: 3px
|
||||
}
|
||||
|
||||
.popOverBtn {
|
||||
float: left;
|
||||
padding: 0px;
|
||||
padding-right: 8px;
|
||||
height: 46px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.table > tbody > tr > td.centerCell {
|
||||
text-align: center;
|
||||
min-width: 45px;
|
||||
|
|
|
@ -1,7 +1,17 @@
|
|||
/* CONFIG */
|
||||
/* GLOB VAR */
|
||||
var allOrg = [];
|
||||
var datatableTop;
|
||||
var datatableFame;
|
||||
|
||||
/* CONFIG */
|
||||
var maxRank = 16;
|
||||
var popOverOption = {
|
||||
trigger: "hover",
|
||||
title: "Ranking icons",
|
||||
html: true,
|
||||
placement: 'bottom',
|
||||
content: generateRankingSheet()
|
||||
}
|
||||
var optionsLineChart = {
|
||||
series: {
|
||||
shadowSize: 0 ,
|
||||
|
@ -65,11 +75,12 @@ var typeaheadOption = {
|
|||
},
|
||||
updater: function(item) {
|
||||
$('#orgText').text(item);
|
||||
$('#btnCurrRank').show();
|
||||
}
|
||||
}
|
||||
|
||||
/* FUNCTIONS */
|
||||
function getRankIcon(rank, size) {
|
||||
function getRankIcon(rank, size, header) {
|
||||
rankLogoPath = url_baseRankLogo+rank+'.png';
|
||||
var img = document.createElement('img');
|
||||
img.src = rankLogoPath;
|
||||
|
@ -77,11 +88,53 @@ function getRankIcon(rank, size) {
|
|||
img.height = 26;
|
||||
img.width = 26;
|
||||
} else {
|
||||
img.height = size;
|
||||
img.width = size;
|
||||
if (header) {
|
||||
img.height = size;
|
||||
img.width = size;
|
||||
img.style.position = 'absolute';
|
||||
img.style.top = '0';
|
||||
img.style.bottom = '0';
|
||||
img.style.margin = 'auto';
|
||||
img.style.left = '0px';
|
||||
} else {
|
||||
img.height = size;
|
||||
img.width = size;
|
||||
}
|
||||
}
|
||||
return img.outerHTML;
|
||||
}
|
||||
function generateRankingSheet() {
|
||||
var table = document.createElement('table');
|
||||
table.classList.add('table', 'table-striped');
|
||||
table.style.marginBottom = '0px';
|
||||
//head
|
||||
var thead = document.createElement('thead');
|
||||
var tr = document.createElement('tr');
|
||||
var th = document.createElement('th');
|
||||
th.innerHTML = "Ranking";
|
||||
tr.appendChild(th);
|
||||
var th = document.createElement('th');
|
||||
th.innerHTML = "Requirement";
|
||||
tr.appendChild(th);
|
||||
thead.appendChild(tr);
|
||||
//body
|
||||
var tbody = document.createElement('tbody');
|
||||
for (var i=1; i<=maxRank; i++) {
|
||||
var tr = document.createElement('tr');
|
||||
var td = document.createElement('td');
|
||||
td.innerHTML = getRankIcon(i, 20);
|
||||
td.style.padding = "2px";
|
||||
tr.appendChild(td);
|
||||
var td = document.createElement('td');
|
||||
td.innerHTML = i+" pnts";
|
||||
td.style.padding = "2px";
|
||||
tr.appendChild(td);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
table.appendChild(thead);
|
||||
table.appendChild(tbody);
|
||||
return table.outerHTML;
|
||||
}
|
||||
|
||||
function addToTableFromJson(datatable, url) {
|
||||
$.getJSON( url, function( data ) {
|
||||
|
@ -105,60 +158,23 @@ function addToTableFromJson(datatable, url) {
|
|||
|
||||
$(document).ready(function() {
|
||||
$('#orgName').typeahead(typeaheadOption);
|
||||
$('#orgRankDiv').html(getRankIcon(8, 50));
|
||||
$('#orgNextRankDiv').html(getRankIcon(9, 50));
|
||||
$('#orgRankDiv').html(getRankIcon(8, 40, true));
|
||||
$('#orgNextRankDiv').html(getRankIcon(9, 40, true));
|
||||
$('#orgText').text(currOrg);
|
||||
if(currOrg != "") // currOrg selected
|
||||
$('#btnCurrRank').show();
|
||||
$('[data-toggle="popover"]').popover(popOverOption);
|
||||
datatableTop = $('#topContribTable').DataTable(optionDatatable_top);
|
||||
datatableFame = $('#fameTable').DataTable(optionDatatable_fame);
|
||||
datatableCateg = $('#categTable').DataTable(optionDatatable_Categ);
|
||||
datatableLast = $('#lastTable').DataTable(optionDatatable_last);
|
||||
// top contributors
|
||||
$.getJSON(url_getTopContributor , function( data ) {
|
||||
for (i in data) {
|
||||
var row = data[i];
|
||||
i = parseInt(i);
|
||||
var to_add = [
|
||||
i+1,
|
||||
getRankIcon(row.rank),
|
||||
row.logo_path,
|
||||
row.org
|
||||
];
|
||||
datatableTop.row.add(to_add);
|
||||
}
|
||||
datatableTop.draw();
|
||||
});
|
||||
|
||||
addToTableFromJson(datatableTop, url_getTopContributor);
|
||||
// hall of fame
|
||||
$.getJSON( url_getTopContributor, function( data ) {
|
||||
for (i in data) {
|
||||
var row = data[i];
|
||||
i = parseInt(i);
|
||||
var to_add = [
|
||||
i+1,
|
||||
getRankIcon(row.rank),
|
||||
row.logo_path,
|
||||
row.org
|
||||
];
|
||||
datatableFame.row.add(to_add);
|
||||
}
|
||||
datatableFame.draw();
|
||||
});
|
||||
|
||||
$.getJSON( url_getTopContributor, function( data ) {
|
||||
for (i in data) {
|
||||
var row = data[i];
|
||||
i = parseInt(i);
|
||||
var to_add = [
|
||||
i+1,
|
||||
getRankIcon(row.rank),
|
||||
row.logo_path,
|
||||
row.org
|
||||
];
|
||||
datatableLast.row.add(to_add);
|
||||
}
|
||||
datatableLast.draw();
|
||||
});
|
||||
|
||||
addToTableFromJson(datatableFame, url_getTopContributor);
|
||||
// last contributors
|
||||
addToTableFromJson(datatableLast, url_getTopContributor);
|
||||
// category per contributors
|
||||
$.getJSON( url_getCategPerContrib, function( data ) {
|
||||
for (i in data) {
|
||||
var row = data[i];
|
||||
|
|
|
@ -67,16 +67,16 @@
|
|||
<div class='leftSepa textTopHeader' style="min-width: 100px;">
|
||||
<strong id="orgText"></strong>
|
||||
</div>
|
||||
<div id="orgRankDiv" class='textTopHeader' style="padding-top: 0px;">
|
||||
</div>
|
||||
<div class='textTopHeader'>
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
|
||||
</div>
|
||||
<button id="btnCurrRank" class='btn btn-default popOverBtn' data-container='body' data-toggle='popover' style="display: none;">
|
||||
<div id="orgRankDiv" class='textTopHeader' style="padding-top: 0px; position: relative; width: 40px;"></div>
|
||||
<div class='textTopHeader'>
|
||||
<div class="progress" style=''>
|
||||
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="orgNextRankDiv" class='textTopHeader' style="padding-top: 0px;">
|
||||
</div>
|
||||
<div id="orgNextRankDiv" class='textTopHeader' style="padding-top: 0px; position: relative; width: 40px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.navbar-header -->
|
||||
|
|
Loading…
Reference in New Issue