Added possibility to use padding object with individual properties, f…

…ixes chartist-js#195

src/scripts/charts/bar.js

@@ -57,7 +57,7 @@
     high: undefined,
     // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
     low: undefined,
-    // Padding of the chart drawing area to the container element and labels
+    // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
     chartPadding: 5,
     // Specify the distance in pixel of bars in a group
     seriesBarDistance: 15,
@@ -88,6 +88,7 @@
   function createChart(options) {
     var seriesGroups = [],
       normalizedData = Chartist.normalizeDataArray(Chartist.getDataArray(this.data, options.reverseData), this.data.labels.length),
+      normalizedPadding = Chartist.normalizePadding(options.chartPadding, defaultOptions.padding),
       highLow;
 
     // Create new svg element
@@ -107,7 +108,7 @@
     highLow.high = +options.high || (options.high === 0 ? 0 : highLow.high);
     highLow.low = +options.low || (options.low === 0 ? 0 : highLow.low);
 
-    var chartRect = Chartist.createChartRect(this.svg, options);
+    var chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
 
     var valueAxis,
       labelAxis;
@@ -121,7 +122,7 @@
           return projectedValue;
         },
         {
-          x: options.chartPadding + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
+          x: normalizedPadding.left + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
           y: options.axisY.labelOffset.y - chartRect.height() / this.data.labels.length
         },
         {
@@ -172,7 +173,7 @@
           return projectedValue;
         },
         {
-          x: options.chartPadding + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
+          x: normalizedPadding.left + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
           y: options.axisY.labelOffset.y + (this.supportsForeignObject ? -15 : 0)
         },
         {

src/scripts/charts/line.js

@@ -67,7 +67,7 @@
     low: undefined,
     // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
     high: undefined,
-    // Padding of the chart drawing area to the container element and labels
+    // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
     chartPadding: 5,
     // When set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. For the last label to be drawn correctly you might need to add chart padding or offset the last label with a draw event handler.
     fullWidth: false,
@@ -95,12 +95,13 @@
    */
   function createChart(options) {
     var seriesGroups = [],
-      normalizedData = Chartist.normalizeDataArray(Chartist.getDataArray(this.data, options.reverseData), this.data.labels.length);
+      normalizedData = Chartist.normalizeDataArray(Chartist.getDataArray(this.data, options.reverseData), this.data.labels.length),
+      normalizedPadding = Chartist.normalizePadding(options.chartPadding, defaultOptions.padding);
 
     // Create new svg object
     this.svg = Chartist.createSvg(this.container, options.width, options.height, options.classNames.chart);
 
-    var chartRect = Chartist.createChartRect(this.svg, options);
+    var chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
 
     var highLow = Chartist.getHighLow(normalizedData);
     // Overrides of high / low from settings
@@ -132,7 +133,7 @@
         return projectedValue;
       },
       {
-        x: options.chartPadding + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
+        x: normalizedPadding.left + options.axisY.labelOffset.x + (this.supportsForeignObject ? -10 : 0),
         y: options.axisY.labelOffset.y + (this.supportsForeignObject ? -15 : 0)
       },
       {

src/scripts/charts/pie.js

@@ -17,7 +17,7 @@
     width: undefined,
     // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
     height: undefined,
-    // Padding of the chart drawing area to the container element and labels
+    // Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
     chartPadding: 5,
     // Override the class names that get used to generate the SVG structure of the chart
     classNames: {
@@ -86,7 +86,7 @@
     // Create SVG.js draw
     this.svg = Chartist.createSvg(this.container, options.width, options.height, options.classNames.chart);
     // Calculate charting rect
-    chartRect = Chartist.createChartRect(this.svg, options, 0, 0);
+    chartRect = Chartist.createChartRect(this.svg, options, defaultOptions.padding);
     // Get biggest circle radius possible within chartRect
     radius = Math.min(chartRect.width() / 2, chartRect.height() / 2);
     // Calculate total of all series to get reference value or use total reference from optional options

src/scripts/core.js

@@ -343,6 +343,30 @@ var Chartist = {
     return array;
   };
 
+  /**
+   * Converts a number into a padding object.
+   *
+   * @memberof Chartist.Core
+   * @param {Object|Number} padding
+   * @param {Number} [fallback] This value is used to fill missing values if a incomplete padding object was passed
+   * @returns {Object} Returns a padding object containing top, right, bottom, left properties filled with the padding number passed in as argument. If the argument is something else than a number (presumably already a correct padding object) then this argument is directly returned.
+   */
+  Chartist.normalizePadding = function(padding, fallback) {
+    fallback = fallback || 0;
+
+    return typeof padding === 'number' ? {
+      top: padding,
+      right: padding,
+      bottom: padding,
+      left: padding
+    } : {
+      top: typeof padding.top === 'number' ? padding.top : fallback,
+      right: typeof padding.right === 'number' ? padding.right : fallback,
+      bottom: typeof padding.bottom === 'number' ? padding.bottom : fallback,
+      left: typeof padding.left === 'number' ? padding.left : fallback
+    };
+  };
+
   /**
    * Adds missing values at the end of the array. This array contains the data, that will be visualized in the chart
    *
@@ -403,7 +427,7 @@ var Chartist = {
    * @return {Number} The height of the area in the chart for the data series
    */
   Chartist.getAvailableHeight = function (svg, options) {
-    return Math.max((Chartist.stripUnit(options.height) || svg.height()) - (options.chartPadding * 2) - options.axisX.offset, 0);
+    return Math.max((Chartist.stripUnit(options.height) || svg.height()) - (options.chartPadding.top +  options.chartPadding.bottom) - options.axisX.offset, 0);
   };
 
   /**
@@ -550,19 +574,21 @@ var Chartist = {
    * @memberof Chartist.Core
    * @param {Object} svg The svg element for the chart
    * @param {Object} options The Object that contains all the optional values for the chart
+   * @param {Number} [fallbackPadding] The fallback padding if partial padding objects are used
    * @return {Object} The chart rectangles coordinates inside the svg element plus the rectangles measurements
    */
-  Chartist.createChartRect = function (svg, options) {
+  Chartist.createChartRect = function (svg, options, fallbackPadding) {
     var yOffset = options.axisY ? options.axisY.offset || 0 : 0,
       xOffset = options.axisX ? options.axisX.offset || 0 : 0,
       w = Chartist.stripUnit(options.width) || svg.width(),
-      h = Chartist.stripUnit(options.height) || svg.height();
+      h = Chartist.stripUnit(options.height) || svg.height(),
+      normalizedPadding = Chartist.normalizePadding(options.chartPadding, fallbackPadding);
 
     return {
-      x1: options.chartPadding + yOffset,
-      y1: Math.max(h - options.chartPadding - xOffset, options.chartPadding),
-      x2: Math.max(w - options.chartPadding, options.chartPadding + yOffset),
-      y2: options.chartPadding,
+      x1: normalizedPadding.left + yOffset,
+      y1: Math.max(h - normalizedPadding.bottom - xOffset, normalizedPadding.bottom),
+      x2: Math.max(w - normalizedPadding.right, normalizedPadding.right + yOffset),
+      y2: normalizedPadding.top,
       width: function () {
         return this.x2 - this.x1;
       },

test/spec/spec-core.js

@@ -142,4 +142,68 @@ describe('Chartist core', function() {
       );
     });
   });
+
+  describe('padding normalization tests', function () {
+    it('should normalize number padding', function() {
+      expect(Chartist.normalizePadding(10)).toEqual({
+        top: 10,
+        right: 10,
+        bottom: 10,
+        left: 10
+      });
+    });
+
+    it('should normalize number padding when 0 is passed', function() {
+      expect(Chartist.normalizePadding(0)).toEqual({
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      });
+    });
+
+    it('should normalize empty padding object with default fallback', function() {
+      expect(Chartist.normalizePadding({})).toEqual({
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      });
+    });
+
+    it('should normalize empty padding object with specified fallback', function() {
+      expect(Chartist.normalizePadding({}, 10)).toEqual({
+        top: 10,
+        right: 10,
+        bottom: 10,
+        left: 10
+      });
+    });
+
+    it('should normalize partial padding object with specified fallback', function() {
+      expect(Chartist.normalizePadding({
+        top: 5,
+        left: 5
+      }, 10)).toEqual({
+        top: 5,
+        right: 10,
+        bottom: 10,
+        left: 5
+      });
+    });
+
+    it('should not modify complete padding object', function() {
+      expect(Chartist.normalizePadding({
+        top: 5,
+        right: 5,
+        bottom: 5,
+        left: 5
+      }, 10)).toEqual({
+        top: 5,
+        right: 5,
+        bottom: 5,
+        left: 5
+      });
+    });
+  });
 });