diff --git a/spec/interactions/subchart-spec.js b/spec/interactions/subchart-spec.js index 2ed1c712e..0db54926a 100644 --- a/spec/interactions/subchart-spec.js +++ b/spec/interactions/subchart-spec.js @@ -6,6 +6,7 @@ /* global describe, beforeEach, it, expect */ import util from "../assets/util"; import CLASS from "../../src/config/classes"; +import { doesNotReject } from "assert"; describe("SUBCHART", () => { let chart; @@ -132,4 +133,54 @@ describe("SUBCHART", () => { expect(chart.internal.clipSubchart).to.be.undefined; }) }); + + describe("generate sbuchart", () => { + before(() => { + args = { + data: { + columns: [ + ["sample", 30, 200, 100, 400, 150, 250] + ] + }, + subchart: { + show: true + } + }; + }); + + + it("should be select subchart area", done => { + const selection = chart.$.svg.select(".selection"); + const overlay = chart.$.svg.select(".overlay").node(); + const baseWidth = 100; + + // do mouse selection + util.fireEvent(overlay, "mousedown", { + clientX: 50, + clientY: 50 + }, chart); + + util.fireEvent(overlay, "mousemove", { + clientX: 150, + clientY: 150 + }, chart); + + util.fireEvent(overlay, "mouseup", { + clientX: 150, + clientY: 150 + }, chart); + + expect(+selection.attr("width")).to.be.equal(baseWidth); + + // when + chart.resize({width:400}); + + // should be maintain zoom area after resize + setTimeout(() => { + expect(+selection.attr("width")).to.be.below(baseWidth); + expect(chart.internal.x.domain()).to.not.deep.equal(chart.internal.orgXDomain); + done(); + }, 300); + }) + }); }); diff --git a/src/api/api.chart.js b/src/api/api.chart.js index a349429d5..49c0328df 100644 --- a/src/api/api.chart.js +++ b/src/api/api.chart.js @@ -26,7 +26,7 @@ extend(Chart.prototype, { config.size_width = size ? size.width : null; config.size_height = size ? size.height : null; - this.flush(); + this.flush(false, true); }, /** @@ -35,16 +35,21 @@ extend(Chart.prototype, { * @instance * @memberof Chart * @param {Boolean} [soft] For soft redraw. + * @param {Boolean} [isFromResize] For soft redraw. * @example * chart.flush(); * * // for soft redraw * chart.flush(true); */ - flush(soft) { + flush(soft, isFromResize) { const $$ = this.internal; // reset possible zoom scale + if (isFromResize) { + $$.brush && $$.brush.updateResize(); + } + $$.zoomScale = null; soft ? $$.redraw({ diff --git a/src/interactions/subchart.js b/src/interactions/subchart.js index eb5266e15..0d5ca8203 100644 --- a/src/interactions/subchart.js +++ b/src/interactions/subchart.js @@ -8,7 +8,8 @@ import { } from "d3-selection"; import { brushX as d3BrushX, - brushY as d3BrushY + brushY as d3BrushY, + brushSelection as d3BrushSelection } from "d3-brush"; import ChartInternal from "../internals/ChartInternal"; import CLASS from "../config/classes"; @@ -32,12 +33,28 @@ extend(ChartInternal.prototype, { $$.redrawForBrush(); }; + let lastDomain; + let timeout; + $$.brush .on("start", () => { $$.inputType === "touch" && $$.hideTooltip(); brushHandler(); }) - .on("brush", brushHandler); + .on("brush", brushHandler) + .on("end", () => { + lastDomain = $$.x.domain(); + }); + + $$.brush.updateResize = function() { + timeout && clearTimeout(timeout); + timeout = setTimeout(() => { + const selection = this.getSelection(); + + lastDomain && d3BrushSelection(selection.node()) && + this.move(selection, lastDomain.map($$.subX)); + }, 0); + }; $$.brush.update = function() { const extent = this.extent()(); diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js index 8a229f298..a0bddc3eb 100644 --- a/src/internals/ChartInternal.js +++ b/src/internals/ChartInternal.js @@ -231,7 +231,7 @@ export default class ChartInternal { // Init sizes and scales $$.updateSizes(); - $$.updateScales(); + $$.updateScales(true); // Set domains for each scale if ($$.x) { @@ -1212,7 +1212,9 @@ export default class ChartInternal { $$.resizeTimeout = null; } - $$.resizeTimeout = window.setTimeout($$.api.flush, 100); + $$.resizeTimeout = window.setTimeout(() => { + $$.api.flush(false, true); + }, 200); }); } diff --git a/src/internals/legend.js b/src/internals/legend.js index b94df3f3a..c59b3b48f 100644 --- a/src/internals/legend.js +++ b/src/internals/legend.js @@ -67,7 +67,7 @@ extend(ChartInternal.prototype, { // Update size and scale $$.updateSizes(); - $$.updateScales(!optionz.withTransition); + $$.updateScales(); $$.updateSvgSize(); // Update g positions