same spacing between pie slieces

Author: danielgindi

src/controllers/controller.doughnut.js

@@ -279,7 +279,8 @@ export default class DoughnutController extends DatasetController {
         endAngle: startAngle + circumference,
         circumference,
         outerRadius,
-        innerRadius
+        innerRadius,
+        circular: false
       };
       if (includeOptions) {
         properties.options = sharedOptions || this.resolveDataElementOptions(i, arc.active ? 'active' : mode);

src/controllers/controller.polarArea.js

@@ -196,6 +196,7 @@ export default class PolarAreaController extends DatasetController {
         outerRadius,
         startAngle,
         endAngle,
+        circular: true,
         options: this.resolveDataElementOptions(i, arc.active ? 'active' : mode)
       };
 

src/elements/element.arc.ts

@@ -135,9 +135,13 @@ function pathArc(
     // the distance is the same as it would be without the spacing
     const noSpacingInnerRadius = innerR > 0 ? innerR - spacing : 0;
     const noSpacingOuterRadius = outerRadius > 0 ? outerRadius - spacing : 0;
-    const avNogSpacingRadius = (noSpacingInnerRadius + noSpacingOuterRadius) / 2;
-    const adjustedAngle = avNogSpacingRadius !== 0 ? (alpha * avNogSpacingRadius) / (avNogSpacingRadius + spacing) : alpha;
-    spacingOffset = (alpha - adjustedAngle) / 2;
+    const avgNoSpacingRadius = (noSpacingInnerRadius + noSpacingOuterRadius) / 2;
+    if (circular && avgNoSpacingRadius > 0) {
+      spacingOffset = Math.asin(Math.min(1, spacing / avgNoSpacingRadius));
+    } else {
+      const adjustedAngle = avgNoSpacingRadius !== 0 ? (alpha * avgNoSpacingRadius) / (avgNoSpacingRadius + spacing) : alpha;
+      spacingOffset = (alpha - adjustedAngle) / 2;
+    }
   }
 
   const beta = Math.max(0.001, alpha * outerRadius - offset / PI) / outerRadius;
@@ -332,6 +336,7 @@ export default class ArcElement extends Element<ArcProps, ArcOptions> {
   outerRadius: number;
   pixelMargin: number;
   startAngle: number;
+  circular: boolean;
 
   constructor(cfg) {
     super();
@@ -344,6 +349,7 @@ export default class ArcElement extends Element<ArcProps, ArcOptions> {
     this.outerRadius = undefined;
     this.pixelMargin = 0;
     this.fullCircles = 0;
+    this.circular = false;
 
     if (cfg) {
       Object.assign(this, cfg);

test/specs/controller.doughnut.tests.js

@@ -46,6 +46,22 @@ describe('Chart.controllers.doughnut', function() {
     expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true);
   });
 
+  it('should mark arcs as non-circular', function() {
+    var chart = window.acquireChart({
+      type: 'doughnut',
+      data: {
+        datasets: [{
+          data: [10, 20]
+        }],
+        labels: ['a', 'b']
+      }
+    });
+
+    var meta = chart.getDatasetMeta(0);
+    expect(meta.data[0].circular).toBe(false);
+    expect(meta.data[1].circular).toBe(false);
+  });
+
   it ('should reset and update elements', function() {
     var chart = window.acquireChart({
       type: 'doughnut',

test/specs/controller.polarArea.tests.js

@@ -66,6 +66,22 @@ describe('Chart.controllers.polarArea', function() {
     expect(meta.data[3] instanceof Chart.elements.ArcElement).toBe(true);
   });
 
+  it('should mark arcs as circular', function() {
+    var chart = window.acquireChart({
+      type: 'polarArea',
+      data: {
+        datasets: [{
+          data: [10, 20]
+        }],
+        labels: ['a', 'b']
+      }
+    });
+
+    var meta = chart.getDatasetMeta(0);
+    expect(meta.data[0].circular).toBe(true);
+    expect(meta.data[1].circular).toBe(true);
+  });
+
   it('should draw all elements', function() {
     var chart = window.acquireChart({
       type: 'polarArea',

test/specs/element.arc.tests.js

@@ -303,4 +303,56 @@ describe('Arc element tests', function() {
 
     expect(arc.inRange(center.x, 1)).toBe(false);
   });
+
+  it('should use circular spacing only for circular arcs', function() {
+    function createArc(circular) {
+      return new Chart.elements.ArcElement({
+        startAngle: 0,
+        endAngle: Math.PI / 2,
+        x: 0,
+        y: 0,
+        innerRadius: 0,
+        outerRadius: 100,
+        options: {
+          circular: circular,
+          spacing: 20,
+          offset: 0,
+          borderWidth: 0,
+          borderRadius: 0,
+          backgroundColor: 'red',
+          borderColor: 'black'
+        }
+      });
+    }
+
+    function firstOuterArcStartAngle(arc) {
+      var ctx = window.createMockContext();
+      arc.draw(ctx);
+
+      var arcCall = ctx.getCalls().filter(function(x) {
+        return x.name === 'arc';
+      })[0];
+      if (arcCall) {
+        return arcCall.args[3];
+      }
+
+      var lineToCall = ctx.getCalls().filter(function(x) {
+        return x.name === 'lineTo';
+      })[0];
+      var dx = lineToCall.args[0] - arc.x;
+      var dy = lineToCall.args[1] - arc.y;
+      return Math.atan2(dy, dx);
+    }
+
+    var nonCircularStart = firstOuterArcStartAngle(createArc(false));
+    var circularStart = firstOuterArcStartAngle(createArc(true));
+    var alpha = Math.PI / 2;
+    var spacing = 10; // draw() passes spacing / 2 to pathArc
+    var avgNoSpacingRadius = 50;
+    var adjustedAngle = (alpha * avgNoSpacingRadius) / (avgNoSpacingRadius + spacing);
+    var linearSpacingOffset = (alpha - adjustedAngle) / 2;
+    var circularSpacingOffset = Math.asin(Math.min(1, spacing / avgNoSpacingRadius));
+
+    expect(circularStart - nonCircularStart).toBeCloseTo(circularSpacingOffset - linearSpacingOffset, 6);
+  });
 });