Add padAngle option for pie/donut (#2669)

* add pie.padAngle and donut.padAngle options * add API to get/set padAngle for both pie and donut * add pie.padAngle and donut.padAngle in reference doc * add padAngle option in donut sample * bind getPadAngle method to self * use chart main instead of global D3 to select chart's elements
c3js · Aug 9, 2019 · 20dff29 · 20dff29
1 parent 9ae4457
commit 20dff29
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 2 deletions.
diff --git a/docs/reference.html.haml b/docs/reference.html.haml
@@ -187,12 +187,14 @@
           = partial :reference_menu_item, locals: { id: 'pie.label.format' }
           = partial :reference_menu_item, locals: { id: 'pie.label.threshold' }
           = partial :reference_menu_item, locals: { id: 'pie.expand' }
+          = partial :reference_menu_item, locals: { id: 'pie.padAngle' }
 
           %li Donut
           = partial :reference_menu_item, locals: { id: 'donut.label.show' }
           = partial :reference_menu_item, locals: { id: 'donut.label.format' }
           = partial :reference_menu_item, locals: { id: 'donut.label.threshold' }
           = partial :reference_menu_item, locals: { id: 'donut.expand' }
+          = partial :reference_menu_item, locals: { id: 'donut.padAngle' }
           = partial :reference_menu_item, locals: { id: 'donut.width' }
           = partial :reference_menu_item, locals: { id: 'donut.title' }
 
@@ -3335,6 +3337,21 @@
               }
       %hr
 
+      %section
+        %h3
+          = partial :reference_item_link, locals: { id: 'pie.padAngle' }
+        %p Sets the angular separation between each adjacent arc.
+        %h5 Default:
+        <code>0</code>
+        %h5 Format:
+        %div.sourcecode
+          %pre
+            %code.html.javascript
+              pie: {
+              &nbsp;&nbsp;padAngle: .1
+              }
+      %hr
+
       %section
         %h3
           = partial :reference_item_link, locals: { id: 'donut.label.show' }
@@ -3403,6 +3420,21 @@
               }
       %hr
 
+      %section
+        %h3
+          = partial :reference_item_link, locals: { id: 'donut.padAngle' }
+        %p Sets the angular separation between each adjacent arc.
+        %h5 Default:
+        <code>0</code>
+        %h5 Format:
+        %div.sourcecode
+          %pre
+            %code.html.javascript
+              donut: {
+              &nbsp;&nbsp;padAngle: .1
+              }
+      %hr
+
       %section
         %h3
           = partial :reference_item_link, locals: { id: 'donut.width' }

diff --git a/htdocs/samples/chart_donut.html b/htdocs/samples/chart_donut.html
@@ -37,7 +37,8 @@
 //            format: function (d, ratio) { return ""; }
           },
           title: "Iris Petal Width",
-          width: 70
+          width: 70,
+          padAngle: .1
         }
       });
 

diff --git a/spec/api.donut-spec.js b/spec/api.donut-spec.js
@@ -0,0 +1,37 @@
+describe('c3 api donut', function () {
+    'use strict';
+
+    var chart, args;
+
+    args = {
+        data: {
+            columns: [
+                ['data1', 60],
+                ['data2', 40]
+            ],
+            type: 'donut'
+        },
+        donut: {
+            padAngle: 0.5
+        }
+    };
+
+    beforeAll(function (done) {
+        chart = window.initChart(chart, args, done);
+    });
+
+    it('can configure padAngle', function (done) {
+        expect(chart.donut.padAngle()).toBe(0.5);
+
+        const path = chart.internal.main.select('.c3-arc-data1').attr('d');
+
+        chart.donut.padAngle(0.2);
+
+        setTimeout(function () {
+            expect(chart.donut.padAngle()).toBe(0.2);
+            expect(chart.internal.main.select('.c3-arc-data1').attr('d')).not.toBe(path);
+            done();
+        }, 500);
+    });
+
+});
diff --git a/spec/api.pie-spec.js b/spec/api.pie-spec.js
@@ -0,0 +1,37 @@
+describe('c3 api pie', function () {
+    'use strict';
+
+    var chart, args;
+
+    args = {
+        data: {
+            columns: [
+                ['data1', 60],
+                ['data2', 40]
+            ],
+            type: 'pie'
+        },
+        pie: {
+            padAngle: 0.5
+        }
+    };
+
+    beforeAll(function (done) {
+        chart = window.initChart(chart, args, done);
+    });
+
+    it('can configure padAngle', function (done) {
+        expect(chart.pie.padAngle()).toBe(0.5);
+
+        const path = chart.internal.main.select('.c3-arc-data1').attr('d');
+
+        chart.pie.padAngle(0.2);
+
+        setTimeout(function () {
+            expect(chart.pie.padAngle()).toBe(0.2);
+            expect(chart.internal.main.select('.c3-arc-data1').attr('d')).not.toBe(path);
+            done();
+        }, 500);
+    });
+
+});
diff --git a/spec/arc-spec.js b/spec/arc-spec.js
@@ -173,6 +173,50 @@ describe('c3 chart arc', function () {
         });
     });
 
+    describe('config donut chart', function() {
+        beforeAll(function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30],
+                        ['data2', 150],
+                        ['data3', 120]
+                    ],
+                    type: 'donut'
+                },
+                donut: {
+                    padAngle: 0.05
+                }
+            };
+        });
+
+        it('can configure padAngle', function () {
+            expect(chart.internal.pie.padAngle()()).toBe(0.05);
+        });
+    });
+
+    describe('config pie chart', function() {
+        beforeAll(function () {
+            args = {
+                data: {
+                    columns: [
+                        ['data1', 30],
+                        ['data2', 150],
+                        ['data3', 120]
+                    ],
+                    type: 'pie'
+                },
+                pie: {
+                    padAngle: 0.05
+                }
+            };
+        });
+
+        it('can configure padAngle', function () {
+            expect(chart.internal.pie.padAngle()()).toBe(0.05);
+        });
+    });
+
     describe('show gauge', function () {
 
         describe('with a 180 degree gauge', function(){

diff --git a/src/api.donut.js b/src/api.donut.js
@@ -0,0 +1,11 @@
+import { Chart } from './core';
+
+Chart.prototype.donut = function() {};
+
+Chart.prototype.donut.padAngle = function (padAngle) {
+    if (padAngle === undefined) {
+        return this.internal.config.donut_padAngle;
+    }
+    this.internal.config.donut_padAngle = padAngle;
+    this.flush();
+};
diff --git a/src/api.pie.js b/src/api.pie.js
@@ -0,0 +1,11 @@
+import { Chart } from './core';
+
+Chart.prototype.pie = function() {};
+
+Chart.prototype.pie.padAngle = function (padAngle) {
+    if (padAngle === undefined) {
+        return this.internal.config.pie_padAngle;
+    }
+    this.internal.config.pie_padAngle = padAngle;
+    this.flush();
+};
diff --git a/src/arc.js b/src/arc.js
@@ -4,7 +4,7 @@ import { isFunction } from './util';
 
 ChartInternal.prototype.initPie = function () {
     var $$ = this, d3 = $$.d3;
-    $$.pie = d3.pie().value(function (d) {
+    $$.pie = d3.pie().padAngle(this.getPadAngle.bind(this)).value(function (d) {
         return d.values.reduce(function (a, b) { return a + b.value; }, 0);
     });
 
@@ -30,6 +30,16 @@ ChartInternal.prototype.updateRadius = function () {
     $$.gaugeArcWidth = w ? w : (gaugeArcWidth <= $$.radius - $$.innerRadius ? $$.radius - $$.innerRadius : (gaugeArcWidth <= $$.radius ? gaugeArcWidth : $$.radius));
 };
 
+ChartInternal.prototype.getPadAngle = function() {
+    if (this.hasType('pie')) {
+        return this.config.pie_padAngle || 0;
+    } else if (this.hasType('donut')) {
+        return this.config.donut_padAngle || 0;
+    } else {
+        return 0;
+    }
+};
+
 ChartInternal.prototype.updateArc = function () {
     var $$ = this;
     $$.svgArc = $$.getSvgArc();

diff --git a/src/config.js b/src/config.js
@@ -186,6 +186,7 @@ ChartInternal.prototype.getDefaultConfig = function () {
         pie_label_ratio: undefined,
         pie_expand: {},
         pie_expand_duration: 50,
+        pie_padAngle: 0,
         // gauge
         gauge_fullCircle: false,
         gauge_label_show: true,
@@ -209,6 +210,7 @@ ChartInternal.prototype.getDefaultConfig = function () {
         donut_title: "",
         donut_expand: {},
         donut_expand_duration: 50,
+        donut_padAngle: 0,
         // spline
         spline_interpolation_type: 'cardinal',
         // stanford

diff --git a/src/index.js b/src/index.js
@@ -6,12 +6,14 @@ import './api.category';
 import './api.chart';
 import './api.color';
 import './api.data';
+import './api.donut';
 import './api.flow';
 import './api.focus';
 import './api.grid';
 import './api.group';
 import './api.legend';
 import './api.load';
+import './api.pie';
 import './api.region';
 import './api.selection';
 import './api.show';