Fix rescale when grids API called - #721

c3.js

@@ -484,7 +484,7 @@
             $$.subXAxis.tickValues([]);
         }
 
-        if (withY && !options.flow) {
+        if (config.zoom_rescale && !options.flow) {
             xDomainForZoom = $$.x.orgDomain();
         }
 
@@ -552,7 +552,7 @@
             .style('opacity', targetsToShow.length ? 0 : 1);
 
         // grid
-        $$.redrawGrid(duration, withY);
+        $$.redrawGrid(duration);
 
         // rect for regions
         $$.redrawRegion(duration);
@@ -664,6 +664,14 @@
         // Draw with new sizes & scales
         $$.redraw(options, transitions);
     };
+    c3_chart_internal_fn.redrawWithoutRescale = function () {
+        this.redraw({
+            withY: false,
+            withSubchart: false,
+            withEventRect: false,
+            withTransitionForAxis: false
+        });
+    };
 
     c3_chart_internal_fn.isTimeSeries = function () {
         return this.config.axis_x_type === 'timeseries';
@@ -3374,7 +3382,7 @@
     };
 
 
-    c3_chart_internal_fn.redrawGrid = function (duration, withY) {
+    c3_chart_internal_fn.redrawGrid = function (duration) {
         var $$ = this, main = $$.main, config = $$.config,
             xgridLine, ygridLine, yv;
 
@@ -3406,10 +3414,9 @@
             .remove();
 
         // Y-Grid
-        if (withY && config.grid_y_show) {
+        if (config.grid_y_show) {
             $$.updateYGrid();
         }
-        if (withY) {
         $$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
             .data(config.grid_y_lines);
         // enter
@@ -3442,7 +3449,6 @@
         $$.ygridLines.exit().transition().duration(duration)
             .style("opacity", 0)
             .remove();
-        }
     };
     c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
         var $$ = this, config = $$.config, xv = $$.xv.bind($$);
@@ -5703,7 +5709,8 @@
                 domain = domain.map(function (x) { return $$.parseDate(x); });
             }
             $$.brush.extent(domain);
-            $$.redraw({withUpdateXDomain: true});
+            $$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
+            $$.config.zoom_onzoom.call(this, $$.x.orgDomain());
         }
         return $$.brush.extent();
     };
@@ -6147,7 +6154,7 @@
         var $$ = this.internal, config = $$.config;
         if (! grids) { return config.grid_x_lines; }
         config.grid_x_lines = grids;
-        $$.redraw();
+        $$.redrawWithoutRescale();
         return config.grid_x_lines;
     };
     c3_chart_fn.xgrids.add = function (grids) {
@@ -6163,7 +6170,7 @@
         var $$ = this.internal, config = $$.config;
         if (! grids) { return config.grid_y_lines; }
         config.grid_y_lines = grids;
-        $$.redraw();
+        $$.redrawWithoutRescale();
         return config.grid_y_lines;
     };
     c3_chart_fn.ygrids.add = function (grids) {
@@ -6179,14 +6186,14 @@
         var $$ = this.internal, config = $$.config;
         if (!regions) { return config.regions; }
         config.regions = regions;
-        $$.redraw();
+        $$.redrawWithoutRescale();
         return config.regions;
     };
     c3_chart_fn.regions.add = function (regions) {
         var $$ = this.internal, config = $$.config;
         if (!regions) { return config.regions; }
         config.regions = config.regions.concat(regions);
-        $$.redraw();
+        $$.redrawWithoutRescale();
         return config.regions;
     };
     c3_chart_fn.regions.remove = function (options) {

spec/api.grid-spec.js

@@ -60,12 +60,63 @@ describe('c3 api grid', function () {
 
             }, 500);
 
-
             setTimeout(function () {
                 done();
             }, 1200);
         });
 
+        it("should update x ygrids even if it's zoomed", function (done) {
+            var main = chart.internal.main,
+                expectedGrids = [
+                    {
+                        value: 0,
+                        text: 'Pressure Low'
+                    },
+                    {
+                        value: 1,
+                        text: 'Pressure High'
+                    }
+                ],
+                grids, domain;
+
+            chart.zoom([0, 2]);
+            setTimeout(function () {
+
+                // Call xgrids
+                chart.xgrids(expectedGrids);
+                setTimeout(function () {
+                    grids = main.selectAll('.c3-xgrid-line');
+                    expect(grids.size()).toBe(expectedGrids.length);
+                    grids.each(function (d, i) {
+                        var x = +d3.select(this).select('line').attr('x1'),
+                            text = d3.select(this).select('text').text(),
+                            expectedX = Math.round(chart.internal.x(expectedGrids[i].value)),
+                            expectedText = expectedGrids[i].text;
+                        expect(x).toBe(expectedX);
+                        expect(text).toBe(expectedText);
+                    });
+
+                    // check if it was not rescaled
+                    domain = chart.internal.y.domain();
+                    expect(domain[0]).toBeLessThan(0);
+                    expect(domain[1]).toBeGreaterThan(400);
+
+                    // Call xgrids.remove
+                    chart.xgrids.remove(expectedGrids);
+                    setTimeout(function () {
+                        grids = main.selectAll('.c3-xgrid-line');
+                        expect(grids.size()).toBe(0);
+                    }, 500); // for xgrids.remove()
+
+                }, 500); // for xgrids()
+
+            }, 500); // for zoom
+
+            setTimeout(function () {
+                done();
+            }, 1700);
+        });
+
     });
 
 });

spec/zoom-spec.js

@@ -35,21 +35,39 @@ describe('c3 chart zoom', function () {
 
     describe('default extent', function () {
 
-        it('should have default extent', function () {
+        describe('main chart domain', function () {
+
+            it('should have original y domain', function () {
                 var yDomain = chart.internal.y.domain(),
-                subYDomain = chart.internal.subY.domain(),
-                brushExtent = chart.internal.brush.extent(),
-                expectedYDomain = [-9, 219],
-                expectedSubYDomain = [-591.5, 6626.5],
-                expectedBrushExtent = [1, 2];
+                    expectedYDomain = [-591.5, 6626.5];
                 expect(yDomain[0]).toBe(expectedYDomain[0]);
                 expect(yDomain[1]).toBe(expectedYDomain[1]);
-            expect(subYDomain[0]).toBe(expectedSubYDomain[0]);
-            expect(subYDomain[1]).toBe(expectedSubYDomain[1]);
+            });
+
+        });
+
+        describe('main chart domain', function () {
+
+            it('should have original y domain in subchart', function () {
+                var yDomain = chart.internal.y.domain(),
+                    subYDomain = chart.internal.subY.domain();
+                expect(subYDomain[0]).toBe(yDomain[0]);
+                expect(subYDomain[1]).toBe(yDomain[1]);
+            });
+
+        });
+
+        describe('main chart domain', function () {
+
+            it('should have specified brush extent', function () {
+                var brushExtent = chart.internal.brush.extent(),
+                    expectedBrushExtent = [1, 2];
                 expect(brushExtent[0]).toBe(expectedBrushExtent[0]);
                 expect(brushExtent[1]).toBe(expectedBrushExtent[1]);
             });
 
         });
 
+    });
+
 });

src/api.grid.js

@@ -2,7 +2,7 @@ c3_chart_fn.xgrids = function (grids) {
     var $$ = this.internal, config = $$.config;
     if (! grids) { return config.grid_x_lines; }
     config.grid_x_lines = grids;
-    $$.redraw();
+    $$.redrawWithoutRescale();
     return config.grid_x_lines;
 };
 c3_chart_fn.xgrids.add = function (grids) {
@@ -18,7 +18,7 @@ c3_chart_fn.ygrids = function (grids) {
     var $$ = this.internal, config = $$.config;
     if (! grids) { return config.grid_y_lines; }
     config.grid_y_lines = grids;
-    $$.redraw();
+    $$.redrawWithoutRescale();
     return config.grid_y_lines;
 };
 c3_chart_fn.ygrids.add = function (grids) {

src/api.region.js

@@ -2,14 +2,14 @@ c3_chart_fn.regions = function (regions) {
     var $$ = this.internal, config = $$.config;
     if (!regions) { return config.regions; }
     config.regions = regions;
-    $$.redraw();
+    $$.redrawWithoutRescale();
     return config.regions;
 };
 c3_chart_fn.regions.add = function (regions) {
     var $$ = this.internal, config = $$.config;
     if (!regions) { return config.regions; }
     config.regions = config.regions.concat(regions);
-    $$.redraw();
+    $$.redrawWithoutRescale();
     return config.regions;
 };
 c3_chart_fn.regions.remove = function (options) {

src/api.zoom.js

@@ -5,7 +5,8 @@ c3_chart_fn.zoom = function (domain) {
             domain = domain.map(function (x) { return $$.parseDate(x); });
         }
         $$.brush.extent(domain);
-        $$.redraw({withUpdateXDomain: true});
+        $$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
+        $$.config.zoom_onzoom.call(this, $$.x.orgDomain());
     }
     return $$.brush.extent();
 };

src/core.js

@@ -479,7 +479,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         $$.subXAxis.tickValues([]);
     }
 
-    if (withY && !options.flow) {
+    if (config.zoom_rescale && !options.flow) {
         xDomainForZoom = $$.x.orgDomain();
     }
 
@@ -547,7 +547,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         .style('opacity', targetsToShow.length ? 0 : 1);
 
     // grid
-    $$.redrawGrid(duration, withY);
+    $$.redrawGrid(duration);
 
     // rect for regions
     $$.redrawRegion(duration);
@@ -659,6 +659,14 @@ c3_chart_internal_fn.updateAndRedraw = function (options) {
     // Draw with new sizes & scales
     $$.redraw(options, transitions);
 };
+c3_chart_internal_fn.redrawWithoutRescale = function () {
+    this.redraw({
+        withY: false,
+        withSubchart: false,
+        withEventRect: false,
+        withTransitionForAxis: false
+    });
+};
 
 c3_chart_internal_fn.isTimeSeries = function () {
     return this.config.axis_x_type === 'timeseries';

src/grid.js

@@ -70,7 +70,7 @@ c3_chart_internal_fn.updateYGrid = function () {
 };
 
 
-c3_chart_internal_fn.redrawGrid = function (duration, withY) {
+c3_chart_internal_fn.redrawGrid = function (duration) {
     var $$ = this, main = $$.main, config = $$.config,
         xgridLine, ygridLine, yv;
 
@@ -102,10 +102,9 @@ c3_chart_internal_fn.redrawGrid = function (duration, withY) {
         .remove();
 
     // Y-Grid
-    if (withY && config.grid_y_show) {
+    if (config.grid_y_show) {
         $$.updateYGrid();
     }
-    if (withY) {
     $$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
         .data(config.grid_y_lines);
     // enter
@@ -138,7 +137,6 @@ c3_chart_internal_fn.redrawGrid = function (duration, withY) {
     $$.ygridLines.exit().transition().duration(duration)
         .style("opacity", 0)
         .remove();
-    }
 };
 c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
     var $$ = this, config = $$.config, xv = $$.xv.bind($$);