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,43 +3414,41 @@
             .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
-            ygridLine = $$.ygridLines.enter().append('g')
-                .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
-            ygridLine.append('line')
-                .style("opacity", 0);
-            ygridLine.append('text')
-                .attr("text-anchor", "end")
-                .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
-                .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
-                .attr('dy', -5)
-                .style("opacity", 0);
-            // update
-            yv = $$.yv.bind($$);
-            $$.ygridLines.select('line')
-              .transition().duration(duration)
-                .attr("x1", config.axis_rotated ? yv : 0)
-                .attr("x2", config.axis_rotated ? yv : $$.width)
-                .attr("y1", config.axis_rotated ? 0 : yv)
-                .attr("y2", config.axis_rotated ? $$.height : yv)
-                .style("opacity", 1);
-            $$.ygridLines.select('text')
-              .transition().duration(duration)
-                .attr("x", config.axis_rotated ? 0 : $$.width)
-                .attr("y", yv)
-                .text(function (d) { return d.text; })
-                .style("opacity", 1);
-            // exit
-            $$.ygridLines.exit().transition().duration(duration)
-                .style("opacity", 0)
-                .remove();
-        }
+        $$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
+            .data(config.grid_y_lines);
+        // enter
+        ygridLine = $$.ygridLines.enter().append('g')
+            .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
+        ygridLine.append('line')
+            .style("opacity", 0);
+        ygridLine.append('text')
+            .attr("text-anchor", "end")
+            .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
+            .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
+            .attr('dy', -5)
+            .style("opacity", 0);
+        // update
+        yv = $$.yv.bind($$);
+        $$.ygridLines.select('line')
+          .transition().duration(duration)
+            .attr("x1", config.axis_rotated ? yv : 0)
+            .attr("x2", config.axis_rotated ? yv : $$.width)
+            .attr("y1", config.axis_rotated ? 0 : yv)
+            .attr("y2", config.axis_rotated ? $$.height : yv)
+            .style("opacity", 1);
+        $$.ygridLines.select('text')
+          .transition().duration(duration)
+            .attr("x", config.axis_rotated ? 0 : $$.width)
+            .attr("y", yv)
+            .text(function (d) { return d.text; })
+            .style("opacity", 1);
+        // exit
+        $$.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 () {
-            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];
-            expect(yDomain[0]).toBe(expectedYDomain[0]);
-            expect(yDomain[1]).toBe(expectedYDomain[1]);
-            expect(subYDomain[0]).toBe(expectedSubYDomain[0]);
-            expect(subYDomain[1]).toBe(expectedSubYDomain[1]);
-            expect(brushExtent[0]).toBe(expectedBrushExtent[0]);
-            expect(brushExtent[1]).toBe(expectedBrushExtent[1]);
+        describe('main chart domain', function () {
+
+            it('should have original y domain', function () {
+                var yDomain = chart.internal.y.domain(),
+                    expectedYDomain = [-591.5, 6626.5];
+                expect(yDomain[0]).toBe(expectedYDomain[0]);
+                expect(yDomain[1]).toBe(expectedYDomain[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,43 +102,41 @@ 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
-        ygridLine = $$.ygridLines.enter().append('g')
-            .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
-        ygridLine.append('line')
-            .style("opacity", 0);
-        ygridLine.append('text')
-            .attr("text-anchor", "end")
-            .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
-            .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
-            .attr('dy', -5)
-            .style("opacity", 0);
-        // update
-        yv = $$.yv.bind($$);
-        $$.ygridLines.select('line')
-          .transition().duration(duration)
-            .attr("x1", config.axis_rotated ? yv : 0)
-            .attr("x2", config.axis_rotated ? yv : $$.width)
-            .attr("y1", config.axis_rotated ? 0 : yv)
-            .attr("y2", config.axis_rotated ? $$.height : yv)
-            .style("opacity", 1);
-        $$.ygridLines.select('text')
-          .transition().duration(duration)
-            .attr("x", config.axis_rotated ? 0 : $$.width)
-            .attr("y", yv)
-            .text(function (d) { return d.text; })
-            .style("opacity", 1);
-        // exit
-        $$.ygridLines.exit().transition().duration(duration)
-            .style("opacity", 0)
-            .remove();
-    }
+    $$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
+        .data(config.grid_y_lines);
+    // enter
+    ygridLine = $$.ygridLines.enter().append('g')
+        .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
+    ygridLine.append('line')
+        .style("opacity", 0);
+    ygridLine.append('text')
+        .attr("text-anchor", "end")
+        .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
+        .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
+        .attr('dy', -5)
+        .style("opacity", 0);
+    // update
+    yv = $$.yv.bind($$);
+    $$.ygridLines.select('line')
+      .transition().duration(duration)
+        .attr("x1", config.axis_rotated ? yv : 0)
+        .attr("x2", config.axis_rotated ? yv : $$.width)
+        .attr("y1", config.axis_rotated ? 0 : yv)
+        .attr("y2", config.axis_rotated ? $$.height : yv)
+        .style("opacity", 1);
+    $$.ygridLines.select('text')
+      .transition().duration(duration)
+        .attr("x", config.axis_rotated ? 0 : $$.width)
+        .attr("y", yv)
+        .text(function (d) { return d.text; })
+        .style("opacity", 1);
+    // exit
+    $$.ygridLines.exit().transition().duration(duration)
+        .style("opacity", 0)
+        .remove();
 };
 c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
     var $$ = this, config = $$.config, xv = $$.xv.bind($$);