From d6318f2c057ce984c815f0975810c6263b18ae91 Mon Sep 17 00:00:00 2001
From: Benoit Chevalier <benoit.chevalier@ge.com>
Date: Mon, 25 Jul 2016 09:51:11 -0700
Subject: [PATCH 1/2] smooth radius transition

---
 px-vis-pie.html | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/px-vis-pie.html b/px-vis-pie.html
index 30e2d071..33ed56e6 100644
--- a/px-vis-pie.html
+++ b/px-vis-pie.html
@@ -107,6 +107,13 @@
         type: Number,
         value: 0
       },
+      /**
+       * The actual inner radius value in pixels which will be used internally to draw the chart
+       */
+      _innerRadiusPx: {
+        type: Number,
+        value: 0
+      },
       /**
        * Whether the chart should be disaplyed as a donut rather than a pie.
        * If displayed as a donut it will by default use 30px as the ring size.
@@ -262,15 +269,11 @@
       }
 
       // declare an arc generator function
-      this._arcGenerator = Px.d3.arc().outerRadius(this._radius);
-      if(this.donut) {
-        var innerRadiusPx = this.innerRadius === 0 ? (this._radius - 30) : this.innerRadius * this._radius;
-        this._arcGenerator.innerRadius(innerRadiusPx);
-      } else {
-        this._arcGenerator.innerRadius(0);
-      }
+      var prevInnerRadiusPx = this._innerRadiusPx;
+      this._calcInnerRadiusPx();
+      this._arcGenerator = Px.d3.arc().outerRadius(this._radius).innerRadius(this._innerRadiusPx);
 
-        if(!this._arcs) {
+      if(!this._arcs) {
         // select paths, use arc generator to draw
         this._arcs = this.pieGroup.selectAll('pie-slice')
                                 .data(pie)
@@ -293,11 +296,19 @@
         this._positionChart(1250);
       } else {
 
+      /*  var arcTween = function arcTween(a) {
+          var i = d3.interpolate(this._current, a);
+          this._current = i(0);
+          return function(t) {
+          return _arcGenerator(i(t));
+        };
+      }*/
+
         //update slices
         this._arcs.selectAll('path')
           .transition()
           .duration(750)
-          .attr('d', function (d) {
+          .attrTween('d', function (d) {
             return this._arcGenerator(d);
         }.bind(this));
 
@@ -433,6 +444,15 @@
     },
     _computeInternalUnits: function(completeSeriesConfig, seriesId, usePercentage) {
       return usePercentage ? '%' : this._getUnit(completeSeriesConfig, seriesId);
+    },
+    _calcInnerRadiusPx: function() {
+      if(this.donut) {
+        //if no inner radius defined used 30px by default
+        this.set('_innerRadiusPx', this.innerRadius === 0 ? (this._radius - 30) : this.innerRadius * this._radius);
+      } else {
+        //no donut
+        this.set('_innerRadiusPx', 0);
+      }
     }
   });
 </script>

From 8ca96e6ff4bbc3fd7cf57e3aaa208d1a33ac46c0 Mon Sep 17 00:00:00 2001
From: Benoit Chevalier <benoit.chevalier@ge.com>
Date: Mon, 25 Jul 2016 11:20:50 -0700
Subject: [PATCH 2/2] Donut transition

---
 px-vis-pie.html | 56 +++++++++++++++++++++++++++++++++----------------
 1 file changed, 38 insertions(+), 18 deletions(-)

diff --git a/px-vis-pie.html b/px-vis-pie.html
index 33ed56e6..62860997 100644
--- a/px-vis-pie.html
+++ b/px-vis-pie.html
@@ -112,7 +112,7 @@
        */
       _innerRadiusPx: {
         type: Number,
-        value: 0
+        computed: '_calcInnerRadiusPx(innerRadius, _radius, donut)'
       },
       /**
        * Whether the chart should be disaplyed as a donut rather than a pie.
@@ -257,7 +257,8 @@
     drawElement: function() {
       //calculate data and radius
       var data = this.chartData,
-          pie = Px.d3.pie().value(function(d){return d['x'];})(data);
+          xKey = this.completeSeriesConfig[this.seriesId].x;
+          pie = Px.d3.pie().value(function(d){return d[xKey];})(data);
 
       // checks to see if the group already exists. If not, create; if so, update
       if(this._isObjEmpty(this.pieGroup)){
@@ -268,13 +269,21 @@
           .attr('transform', this._translationString);
       }
 
-      // declare an arc generator function
-      var prevInnerRadiusPx = this._innerRadiusPx;
-      this._calcInnerRadiusPx();
-      this._arcGenerator = Px.d3.arc().outerRadius(this._radius).innerRadius(this._innerRadiusPx);
+
 
       if(!this._arcs) {
+
+        //store current inner and outer radius
+        for(var i=0; i<pie.length; i++) {
+          pie[i].innerRadius = this._innerRadiusPx,
+          pie[i].outerRadius = this._radius;
+        }
+
+        // declare an arc generator function
+        this._arcGenerator = Px.d3.arc();
+
         // select paths, use arc generator to draw
+        //TODO: merge and exit
         this._arcs = this.pieGroup.selectAll('pie-slice')
                                 .data(pie)
                                 .enter()
@@ -296,21 +305,30 @@
         this._positionChart(1250);
       } else {
 
-      /*  var arcTween = function arcTween(a) {
-          var i = d3.interpolate(this._current, a);
-          this._current = i(0);
-          return function(t) {
-          return _arcGenerator(i(t));
+        var _this = this;
+        var tweenArc = function tweenArc(b) {
+          return function(a, i) {
+            var d = b.call(this, a, i), i = d3.interpolateObject(d, a);
+            for (var k in d) a[k] = d[k]; // update data
+            return function(t) {
+              return _this._arcGenerator(i(1 - t));
+            };
+          };
         };
-      }*/
 
         //update slices
+        //TODO: this only deals with radius changes. We need to add
+        //angle changes (equivalent to data changed). Need to store previous angle.
         this._arcs.selectAll('path')
           .transition()
           .duration(750)
-          .attrTween('d', function (d) {
-            return this._arcGenerator(d);
-        }.bind(this));
+          .attrTween('d', tweenArc(function(d, i) {
+
+            return {
+              innerRadius: _this._innerRadiusPx,
+              outerRadius: _this._radius
+            };
+          }));
 
         //make sure we're in the right pos
         this._positionChart(150);
@@ -342,7 +360,9 @@
       //center tooltip
       var rotatedDatum = {
         startAngle: datum.startAngle + this._currentRotationAngle,
-        endAngle: datum.endAngle + this._currentRotationAngle
+        endAngle: datum.endAngle + this._currentRotationAngle,
+        innerRadius: datum.innerRadius,
+        outerRadius: datum.outerRadius
       },
           center = this._arcGenerator.centroid(rotatedDatum);
 
@@ -448,10 +468,10 @@
     _calcInnerRadiusPx: function() {
       if(this.donut) {
         //if no inner radius defined used 30px by default
-        this.set('_innerRadiusPx', this.innerRadius === 0 ? (this._radius - 30) : this.innerRadius * this._radius);
+        return this.innerRadius === 0 ? (this._radius - 30) : this.innerRadius * this._radius;
       } else {
         //no donut
-        this.set('_innerRadiusPx', 0);
+        return 0;
       }
     }
   });