Make grid thing out more flexible

c3.js

@@ -3864,10 +3864,11 @@
             xgridData = $$.generateGridData(config.grid_x_type, $$.x),
             tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0;
 
+        var thinOutCoef = $$.getXThinOutCoef;
 
-        if($$.shouldThinOutXGrid()){
+        if(thinOutCoef > 1){
             xgridData = xgridData.filter(function(v, i){
-                return i % 2 == 0;
+                return i % thinOutCoef == 0;
             });
         }
 
@@ -3897,9 +3898,11 @@
         var $$ = this, config = $$.config,
             gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks);
 
-        if($$.shouldThinOutYGrid()){
+        var thinOutCoef = $$.getYThinOutCoef()
+
+        if(thinOutCoef > 1){
             gridValues = gridValues.filter(function(v, i){
-                return i%2 == 0;
+                return i%thinOutCoef == 0;
             });
         }
 
@@ -4074,24 +4077,46 @@
         }
     }
 
-    c3_chart_internal_fn.shouldThinOutXGrid = function(){
+    c3_chart_internal_fn.getXThinOutCoef = function(){
         var $$ = this, config = $$.config;
 
+        var cv;
+
         if(config.axis_rotated){
-            return $$.getCurrentHeight() <= 300;
+            cv = $$.getCurrentHeight();
         } else {
-            return $$.getCurrentWidth() <= 300;
+            cv = $$.getCurrentWidth();
        }
+
+        if(cv <= 150){
+            return 3;
+        } else if(cv <= 300){
+            return 2;
+        } else {
+            return 1;
+        }
+         
     };;
 
-    c3_chart_internal_fn.shouldThinOutYGrid = function(){
+    c3_chart_internal_fn.getYThinOutCoef = function(){
         var $$ = this, config = $$.config;
 
+        var cv;
+
         if(config.axis_rotated){
-            return $$.getCurrentWidth() <= 300;
+            cv = $$.getCurrentWidth();
         } else {
-            return $$.getCurrentHeight() <= 300;
+            cv = $$.getCurrentHeight();
        }
+
+        if(cv <= 150){
+            return 3;
+        } else if(cv <= 300){
+            return 2;
+        } else {
+            return 1;
+        }
+
     };
 
     c3_chart_internal_fn.initTooltip = function () {
@@ -8254,16 +8279,20 @@
                 switch(orient){
                 case "bottom":
                 case "top":
-                    if($$.shouldThinOutXGrid()){
+                    if($$.config.grid_x_show){
+                        var coef = $$.getXThinOutCoef();
+
                         line.style('display', function(d, i){
-                            return i%2 == 0 ? 'block' : 'none';
+                            return i%coef == 0 ? 'block' : 'none';
                         });
                     }
                 case "left":
                 case "right":
-                    if($$.shouldThinOutYGrid()){
+                    if($$.config.grid_y_show){
+                        var coef = $$.getYThinOutCoef();
+
                         line.style('display', function(d, i){
-                            return i%2 == 0 ? 'block' : 'none';
+                            return i%coef == 0 ? 'block' : 'none';
                         });
                     }
                 }

src/c3.axis.js

@@ -222,16 +222,20 @@ function c3_axis(d3, params, $$) {
             switch(orient){
             case "bottom":
             case "top":
-                if($$.shouldThinOutXGrid()){
+                if($$.config.grid_x_show){
+                    var coef = $$.getXThinOutCoef();
+
                     line.style('display', function(d, i){
-                        return i%2 == 0 ? 'block' : 'none';
+                        return i%coef == 0 ? 'block' : 'none';
                     });
                 }
             case "left":
             case "right":
-                if($$.shouldThinOutYGrid()){
+                if($$.config.grid_y_show){
+                    var coef = $$.getYThinOutCoef();
+
                     line.style('display', function(d, i){
-                        return i%2 == 0 ? 'block' : 'none';
+                        return i%coef == 0 ? 'block' : 'none';
                     });
                 }
             }

src/grid.js

@@ -32,10 +32,11 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
         xgridData = $$.generateGridData(config.grid_x_type, $$.x),
         tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0;
 
+    var thinOutCoef = $$.getXThinOutCoef;
 
-    if($$.shouldThinOutXGrid()){
+    if(thinOutCoef > 1){
         xgridData = xgridData.filter(function(v, i){
-            return i % 2 == 0;
+            return i % thinOutCoef == 0;
         });
     }
 
@@ -65,9 +66,11 @@ c3_chart_internal_fn.updateYGrid = function () {
     var $$ = this, config = $$.config,
         gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks);
 
-    if($$.shouldThinOutYGrid()){
+    var thinOutCoef = $$.getYThinOutCoef()
+
+    if(thinOutCoef > 1){
         gridValues = gridValues.filter(function(v, i){
-            return i%2 == 0;
+            return i%thinOutCoef == 0;
         });
     }
 
@@ -242,22 +245,44 @@ c3_chart_internal_fn.removeGridLines = function (params, forX) {
     }
 }
 
-c3_chart_internal_fn.shouldThinOutXGrid = function(){
+c3_chart_internal_fn.getXThinOutCoef = function(){
     var $$ = this, config = $$.config;
 
+    var cv;
+
     if(config.axis_rotated){
-        return $$.getCurrentHeight() <= 300;
+        cv = $$.getCurrentHeight();
+    } else {
+        cv = $$.getCurrentWidth();
+   }
+
+    if(cv <= 150){
+        return 3;
+    } else if(cv <= 300){
+        return 2;
     } else {
-        return $$.getCurrentWidth() <= 300;
+        return 1;
     }
+     
 };;
 
-c3_chart_internal_fn.shouldThinOutYGrid = function(){
+c3_chart_internal_fn.getYThinOutCoef = function(){
     var $$ = this, config = $$.config;
 
+    var cv;
+
     if(config.axis_rotated){
-        return $$.getCurrentWidth() <= 300;
+        cv = $$.getCurrentWidth();
     } else {
-        return $$.getCurrentHeight() <= 300;
+        cv = $$.getCurrentHeight();
    }
+
+    if(cv <= 150){
+        return 3;
+    } else if(cv <= 300){
+        return 2;
+    } else {
+        return 1;
+    }
+
 };