feat(cart): Pie chart clicks change state.

- Clicking on portions of a pie chart will cause state changes to the provided state. Closes #700
NCI-GDC · Apr 27, 2015 · 6d1790f · 6d1790f
1 parent 075180d
commit 6d1790f
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 79 deletions.
diff --git a/app/scripts/cart/cart.directives.ts b/app/scripts/cart/cart.directives.ts
@@ -358,57 +358,96 @@ module ngApp.cart.directives {
 
 
   /** Directive which can be placed anywhere, that displays a pie chart of the contents of the cart **/
-  function CartDisplayingPieChart() {
+  function CartDisplayingPieChart($filter: ng.IFilterService) {
     return {
       restrict:"AE",
       template:'<div pie-chart ng-if=chartData data-data=chartData data-config=chartConfig> </div>',
       controller:function(CartService,UserService,$scope){
         $scope.$watch(function () {
-        return {
-          l:CartService.getFiles().length,
-          u:UserService.currentUser
+          return {
+            l: CartService.getFiles().length,
+            u: UserService.currentUser
           };
         }, function () {
           updateChartData();
         }, true);
 
-      function updateChartData() {
-
-        var accessCount = _.countBy(CartService.getFiles(), function (f) {
-          return UserService.userCanDownloadFiles([f])
-        });
-        var data = [
-          {
-            access: 'open',
-            count: accessCount['true'] || 0,
-          },
-          {
-            access: 'protected',
-            count: accessCount['false'] || 0,
-          }
-        ]
+        function updateChartData() {
+          var files = CartService.getFiles();
+          var accessCount = _.countBy(files, function (f) {
+            return UserService.userCanDownloadFiles([f]);
+          });
 
-        $scope.chartConfig = {
-          legend: {
-            open: '%!% file(s) you are authorized to download',
-            protected: '%!% file(s) you are not authorized to download'
-          }
-        }
+          var data = [
+            {
+              access: 'open',
+              count: accessCount['true'] || 0,
+              state: {
+                name: "search.files",
+                params: {
+                  filters: $filter("makeFilter")([
+                    {
+                      name: "files.file_id",
+                      value: _.pluck(_.filter(files, (file) => {
+                        return file.access === "open";
+                      }), "file_id")
+                    },
+                    {
+                      name: "files.access",
+                      value: "open"
+                    }
+                  ], true)
+                }
+              }
+            },
+            {
+              access: 'protected',
+              count: accessCount['false'] || 0,
+              state: {
+                name: "search.files",
+                params: {
+                  filters: $filter("makeFilter")([
+                    {
+                      name: "files.file_id",
+                      value: _.pluck(_.filter(files, (file) => {
+                        return file.access === "protected";
+                      }), "file_id")
+                    },
+                    {
+                      name: "files.access",
+                      value: "protected"
+                    }
+                  ], true)
+                }
+              }
+            }
+          ];
 
-        if (_.find(data, function (a) {
-              return a.count > 0;
-            })) {
-          $scope.chartData = data.map(function (a) {
-            return {
-              key: a.access,
-              value: a.count
+          $scope.chartConfig = {
+            legend: {
+              open: '%!% ' + $filter("translate")("file(s) you are authorized to download"),
+              protected: '%!% ' + $filter("translate")("file(s) you are not authorized to download")
             }
-          })
-        } else {
-          $scope.chartData = undefined;
-        }
-      }
+          };
 
+          if (_.find(data, function (a) {
+                return a.count > 0;
+              })) {
+            $scope.chartData = data.map(function (a) {
+              var ret = {
+                key: a.access,
+                value: a.count
+              };
+
+              if (a.state) {
+                ret.state = a.state;
+              }
+              return ret;
+            });
+          } else {
+            $scope.chartData = undefined;
+          }
+        }
       }
     }
   }

diff --git a/app/scripts/components/charts/chart.directives.ts b/app/scripts/components/charts/chart.directives.ts
@@ -24,73 +24,85 @@ module ngApp.components.charts {
   }
 
   /* @ngInject */
-  function PieChart($window: IGDCWindowService, $filter: ng.IFilterService): ng.IDirective {
+  function PieChart($window: IGDCWindowService, $filter: ng.IFilterService,
+                    $state: ng.ui.IStateService): ng.IDirective {
     return {
       restrict: "EA",
       scope: {
         data: "=",
         config:'='
       },
       link: function($scope: IPieChartScope, element: ng.IAugmentedJQuery) {
+        $scope.$watch('data',function(a){
+          updateChart();
+        });
+
         var color = d3.scale.category20();
 
         var data = $scope.data;
         var config = $scope.config;
 
         var width = 450,
-          height = 175,
-          radius = Math.min(width, height) / 2;
+            height = 175,
+            radius = Math.min(width, height) / 2;
 
-       var pie = d3.layout.pie()
+        var pie = d3.layout.pie()
           .sort(null)
-          .value(function(d) { return d.value; });
-
-
-        $scope.$watch('data',function(a){
-          updateChart();
-        })
+          .value(function(d) {
+            return d.value;
+          });        
 
-        function updateChart(){
-            var data = $scope.data;
-            d3.select('svg').remove();
-
+        function updateChart() {
+          var data = $scope.data;
+          d3.select('svg').remove();
 
-           var svg = d3.select(element[0]).append("svg")
+          var svg = d3.select(element[0]).append("svg")
             .attr("width", width)
             .attr("height", height)
             .append("g")
             .attr("transform", "translate(" + width / 3.5 + "," + height / 2 + ")");
-
-
-            var arc = d3.svg.arc()
-              .outerRadius(radius - 10)
-              .innerRadius(0);
-
-            var g = svg.selectAll(".arc")
-              .data(pie(data))
-              .enter().append("g")
-              .attr("class", "arc");
-
-            g.append("path")
-              .attr("d", arc)
-              .style("fill", function(d,i) { return color(i); });
-
-
-
+
+          var arc = d3.svg.arc()
+            .outerRadius(radius - 10)
+            .innerRadius(0);
+
+          var g = svg.selectAll(".arc")
+            .data(pie(data))
+            .enter().append("g")
+            .attr("class", "arc");
+
           var legendX = 125;
           var legendStartY = -5;
           var legendSpaceEach = 55;
 
+          g.append("path")
+            .attr("d", arc)
+            .attr("state", function(d) {
+              return d.data.state ? "true" : "false";
+            })
+            .style("fill", function(d,i) {
+              return color(i);
+            })
+            .on("click", function(d) {
+              if (d.data.state) {
+                $state.go(d.data.state.name, d.data.state.params, {inherit: false});
+              }
+            });
+
           var legendSquares = svg.selectAll('rect')
             .data(data,function(a){
               return a.key;
             })
             .enter()
               .append('rect')
-              .attr('width',25)
-              .attr('height',25)
-              .attr("transform", function(d,i) { return "translate(" + legendX +","+ (legendStartY + legendSpaceEach * (i - 1)) + ")"; })
-              .style("fill",function(d,i){return color(i)})
+              .attr('width', 25)
+              .attr('height', 25)
+              .attr("transform", function(d, i) {
+                return "translate(" + legendX +","+ (legendStartY + legendSpaceEach * (i - 1)) + ")";
+              })
+              .style("fill", function(d, i) {
+                return color(i);
+              });
 
           var legendText = svg.selectAll('text')
             .data(data)
@@ -104,15 +116,12 @@ module ngApp.components.charts {
               .attr('dy',0)
               .call(wrap, 150)
               .attr('class','pie-legend-text');
-          }
+        }
 
         data.forEach(function(d) {
-            d.value = +d.value;
+          d.value = +d.value;
         });
 
-
-
-
         function wrap(text, width) {
 
           text.each(function() {
@@ -138,7 +147,6 @@ module ngApp.components.charts {
             }
           });
         }
-
       }
     };
   }

diff --git a/app/scripts/components/charts/styles/charts.less b/app/scripts/components/charts/styles/charts.less
@@ -9,4 +9,8 @@
 .pie-legend-text {
   font-size: 12px;
   font-family: Open Sans;
+}
+
+g.arc > path[state="true"] {
+  cursor: pointer;
 }