Merge branch 'pie_transition'

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,
+        computed: '_calcInnerRadiusPx(innerRadius, _radius, donut)'
+      },
       /**
        * 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.
@@ -250,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)){
@@ -261,17 +269,21 @@
           .attr('transform', this._translationString);
       }
 
-      // 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);
-      }
 
-        if(!this._arcs) {
+
+      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()
@@ -293,13 +305,30 @@
         this._positionChart(1250);
       } else {
 
+        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)
-          .attr('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);
@@ -331,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);
 
@@ -433,6 +464,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
+        return this.innerRadius === 0 ? (this._radius - 30) : this.innerRadius * this._radius;
+      } else {
+        //no donut
+        return 0;
+      }
     }
   });
 </script>