Convert bar chart to use nested config. Noticed that the segmentShowStroke option...

diff --git a/src/Chart.Doughnut.js b/src/Chart.Doughnut.js
index b25f48f47b65a9aa1e64fe2efa1afba705e2a6f3..fdc4f12e950f0c5062d0ee95cf446ef3e10b6a0b 100644 (file)
--- a/src/Chart.Doughnut.js
+++ b/src/Chart.Doughnut.js
@@ -7,30 +7,33 @@
         helpers = Chart.helpers;
 
     var defaultConfig = {
-        //Boolean - Whether we should show a stroke on each segment
-        segmentShowStroke: true,
+        segments: {
+            //Boolean - Whether we should show a stroke on each segment
+            showStroke: true,
 
-        //String - The colour of each segment stroke
-        segmentStrokeColor: "#fff",
+            //String - The colour of each segment stroke
+            strokeColor: "#fff",
 
-        //Number - The width of each segment stroke
-        borderWidth: 2,
-
-        //The percentage of the chart that we cut out of the middle.
-        cutoutPercentage: 50,
-
-        // The duration of animations triggered by hover events
-        hoverAnimationDuration: 400,
+            //Number - The width of each segment stroke
+            borderWidth: 2,
+        },
 
-        //String - Animation easing effect
-        animationEasing: "easeOutQuart",
+        hover: {
+             // The duration of animations triggered by hover events
+            animationDuration: 400,
+        },
 
-        //Boolean - Whether we animate the rotation of the Doughnut
-        animateRotate: true,
+        animation: {
+            //Boolean - Whether we animate the rotation of the Doughnut
+            animateRotate: true,
 
-        //Boolean - Whether we animate scaling the Doughnut from the centre
-        animateScale: false,
+            //Boolean - Whether we animate scaling the Doughnut from the centre
+            animateScale: false,
+        },
 
+        //The percentage of the chart that we cut out of the middle.
+        cutoutPercentage: 50,
+        
         //String - A legend template
         legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].backgroundColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
 
@@ -69,9 +72,9 @@
                 }
                 helpers.extend(metaSlice, {
                     startAngle: Math.PI * 1.5,
-                    circumference: (this.options.animateRotate) ? 0 : this.calculateCircumference(metaSlice.value),
-                    outerRadius: (this.options.animateScale) ? 0 : this.outerRadius,
-                    innerRadius: (this.options.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout,
+                    circumference: (this.options.animation.animateRotate) ? 0 : this.calculateCircumference(metaSlice.value),
+                    outerRadius: (this.options.animation.animateScale) ? 0 : this.outerRadius,
+                    innerRadius: (this.options.animation.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout,
                 });
                 if (!metaSlice.backgroundColor) {
                     slice.backgroundColor = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';
@@ -157,7 +160,7 @@
                     (this.lastActive.length && this.active.length && changed)) {
 
                     this.stop();
-                    this.render(this.options.hoverAnimationDuration);
+                    this.render(this.options.hover.animationDuration);
                 }
             }
 
@@ -191,7 +194,7 @@
                 this.total += Math.abs(slice.value);
             }, this);
 
-            this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.borderWidth / 2) / 2;
+            this.outerRadius = (helpers.min([this.chart.width, this.chart.height]) - this.options.segments.borderWidth / 2) / 2;
 
             // Map new data to data points
             helpers.each(this.data.metaData, function(slice, index) {
@@ -210,8 +213,8 @@
 
                     backgroundColor: datapoint.backgroundColor,
                     hoverBackgroundColor: datapoint.hoverBackgroundColor || datapoint.backgroundColor,
-                    borderWidth: this.options.borderWidth,
-                    borderColor: this.options.segmentStrokeColor,
+                    borderWidth: this.options.segments.borderWidth,
+                    borderColor: this.options.segments.strokeColor,
                 });
 
                 helpers.extend(slice, {