vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Make sure all sections of the sec scan donut chart are visible

Browse source 
Sets a minimum chart % for all entries
This commit is contained in:
Joseph Schorr 2017-03-16 13:05:53 -04:00
parent ce7a9d550d
commit 85ce944189
2 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/directives/repo-view/repo-panel-tags.html
View file

@ -186,7 +186,7 @@
data-title="This tag has {{ getTagVulnerabilities(tag).vulnerabilities.length }} vulnerabilities across {{ getTagVulnerabilities(tag).featuresInfo.brokenFeaturesCount }} packages"
bs-tooltip>
<!-- Donut -->
<span class="donut-chart" width="22" data="getTagVulnerabilities(tag).vulnerabilitiesInfo.severityBreakdown"></span>
<span class="donut-chart" min-percent="10" width="22" data="getTagVulnerabilities(tag).vulnerabilitiesInfo.severityBreakdown"></span>
<!-- Messaging -->
<span class="highest-vuln">

27
static/js/directives/ui/donut-chart.js
View file

@ -10,6 +10,7 @@ angular.module('quay').directive('donutChart', function () {
restrict: 'C',
scope: {
'width': '@width',
'minPercent': '@minPercent',
'data': '=data',
},
controller: function($scope, $element) {
@ -23,6 +24,28 @@ angular.module('quay').directive('donutChart', function () {
return;
}
// Adjust the data to make sure each non-zero entry is at minimum. While technically
// not accurate, it will make the section visible to the user.
var adjustedData = []
var total = 0;
$scope.data.map(function(entry) {
total += entry.value;
});
adjustedData = $scope.data.map(function(entry) {
var value = entry.value;
if ($scope.minPercent) {
if (value / total < $scope.minPercent / 100) {
value = total * $scope.minPercent / 100;
}
}
var copy = $.extend({}, entry);
copy.value = value;
return copy;
});
var $chart = $element.find('.donut-chart-element');
$chart.empty();
@ -42,7 +65,7 @@ angular.module('quay').directive('donutChart', function () {
var arc = d3.svg.arc()
.innerRadius(chart_r * 0.6)
.outerRadius(function(d, i) {
return i == $scope.data.length - 1 ? chart_r * 1.2 : chart_r * 1;
return i == adjustedData.length - 1 ? chart_r * 1.2 : chart_r * 1;
});
var pie = d3.layout.pie()
@ -51,7 +74,7 @@ angular.module('quay').directive('donutChart', function () {
return d.value;
});
var reversed = $scope.data.slice(0).reverse();
var reversed = adjustedData.reverse();
var g = topG.selectAll(".arc")
.data(pie(reversed))
.enter().append("g")