MISP
/
MISP
mirror of https://github.com/MISP/MISP
2
2
Fork 0
Code Issues Releases Wiki Activity

fix: [UI] Tag statistics

pull/8398/head
Jakub Onderka 2022-05-22 20:08:42 +02:00
parent 073bc4f74c
commit 46b423aaef
2 changed files with 87 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/View/Users/ajax/tag_statistics_graph.ctp
View File

@ -25,5 +25,5 @@
var root = <?php echo json_encode($treemap); ?>;
var flatData = <?php echo json_encode($flatData); ?>;
var taxonomies = <?php echo json_encode($taxonomies); ?>;
var hiddenTaxonomies = [];
tagStatisticGraph(root, flatData, taxonomies);
</script>

146
app/webroot/js/treemap.js
View File

@ -1,53 +1,78 @@
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
function tagStatisticGraph(root, flatData, taxonomies) {
var hiddenTaxonomies = [];
var color = d3.scale.category20c();
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.size; });
var color = d3.scale.category20c();
var div = d3.select("#treemapGraph").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function (d) {
return d.size;
});
var node = div.datum(root).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.attr("title", function(d) {return d.name + ': ' + d.size})
.attr("id", function(d) { return d.name + '-node'})
.call(position)
.style("background", function(d) { return d.children ? color(d.name) : null; })
.text(function(d) { return d.children ? null : d.name; });
var div = d3.select("#treemapGraph").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
taxonomies.forEach(function(taxonomy) {
$("#" + taxonomy + "-colour").css("background-color", $("#" + taxonomy + "-node").css('background-color'));
});
d3.selectAll("input").on("change", function change() {
var value = this.value === "count" ? function() { return 1; } : function(d) { return d.size; };
node
.data(treemap.value(value).nodes)
.transition()
.duration(1500)
.call(position);
});
var node = div.datum(root).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.attr("title", function (d) {
return d.name + ': ' + d.size
})
.attr("id", function (d) {
return d.name + '-node'
})
.call(position)
.style("background", function (d) {
return d.children ? color(d.name) : null;
})
.text(function (d) {
return d.children ? null : d.name;
});
function position() {
this.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
taxonomies.forEach(function (taxonomy) {
$("#" + taxonomy + "-colour").css("background-color", $("#" + taxonomy + "-node").css('background-color'));
});
function updateTaxonomies() {
var value = function(d) {
d3.selectAll("input").on("change", function change() {
var value = this.value === "count" ? function () {
return 1;
} : function (d) {
return d.size;
};
node
.data(treemap.value(value).nodes)
.transition()
.duration(1500)
.call(position);
});
function position() {
this.style("left", function (d) {
return d.x + "px";
})
.style("top", function (d) {
return d.y + "px";
})
.style("width", function (d) {
return Math.max(0, d.dx - 1) + "px";
})
.style("height", function (d) {
return Math.max(0, d.dy - 1) + "px";
});
}
function updateTaxonomies() {
var value = function (d) {
tagTaxonomy = d.name.split(':')[0];
if (taxonomies.indexOf(tagTaxonomy) == -1) {
tagTaxonomy = 'custom';
@ -63,21 +88,22 @@ function updateTaxonomies() {
.transition()
.duration(1500)
.call(position);
}
$('.treemap-selector').click(function() {
var taxonomy = $( this ).data("treemap-selector");
var index = hiddenTaxonomies.indexOf(taxonomy);
if ($( this ).hasClass("bold")) {
$( this ).removeClass("bold");
if (index < 0) {
hiddenTaxonomies.push(taxonomy);
}
} else {
$( this ).addClass("bold");
if (index > -1) {
hiddenTaxonomies.splice(index, 1);
}
}
updateTaxonomies();
});
$('.treemap-selector').click(function () {
var taxonomy = $(this).data("treemap-selector");
var index = hiddenTaxonomies.indexOf(taxonomy);
if ($(this).hasClass("bold")) {
$(this).removeClass("bold");
if (index < 0) {
hiddenTaxonomies.push(taxonomy);
}
} else {
$(this).addClass("bold");
if (index > -1) {
hiddenTaxonomies.splice(index, 1);
}
}
updateTaxonomies();
});
}