From 85ce9441897300384556f8fa5d69e3680bae2876 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Thu, 16 Mar 2017 13:05:53 -0400
Subject: [PATCH] Make sure all sections of the sec scan donut chart are
 visible

Sets a minimum chart % for all entries
---
 .../directives/repo-view/repo-panel-tags.html |  2 +-
 static/js/directives/ui/donut-chart.js        | 27 +++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/static/directives/repo-view/repo-panel-tags.html b/static/directives/repo-view/repo-panel-tags.html
index 491314149..bca89d331 100644
--- a/static/directives/repo-view/repo-panel-tags.html
+++ b/static/directives/repo-view/repo-panel-tags.html
@@ -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">
diff --git a/static/js/directives/ui/donut-chart.js b/static/js/directives/ui/donut-chart.js
index 9e6ae2542..e452d3dfd 100644
--- a/static/js/directives/ui/donut-chart.js
+++ b/static/js/directives/ui/donut-chart.js
@@ -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")