fix(api): fix zoom for timesries axis

Correct passing parsed domain value for withinRange() Fix #1868
naver · Jan 14, 2021 · 0421a50 · 0421a50
1 parent efa5174
commit 0421a50
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 29 deletions.
diff --git a/src/Chart/api/zoom.ts b/src/Chart/api/zoom.ts
@@ -13,7 +13,7 @@ import {callFn, extend, getMinMax, isDefined, isObject, parseDate} from "../../m
  * @returns {boolean}
  * @private
  */
-function withinRange(domain: number[], range: number[]): boolean {
+function withinRange(domain: (number | string)[], range: number[]): boolean {
 	const [min, max] = range;
 
 	return domain.every((v, i) => (
@@ -38,45 +38,43 @@ function withinRange(domain: number[], range: number[]): boolean {
  *  // Get the current zoomed domain
  *  chart.zoom();
  */
-const zoom = function(domainValue?: number[]): number[] {
+const zoom = function(domainValue?: (number | string)[]): (Date | number)[] {
 	const $$ = this.internal;
 	const {config, scale} = $$;
 	let domain = domainValue;
 	let resultDomain;
 
-	if (config.zoom_enabled && domain && withinRange(domain, $$.getZoomDomain())) {
-		const isTimeSeries = $$.axis.isTimeSeries();
+	if (config.zoom_enabled && domain) {
+		if ($$.axis.isTimeSeries()) {
+			domain = domain.map(x => parseDate.bind($$)(x));
+		}
 
-		// hide any possible tooltip show before the zoom
-		$$.api.tooltip.hide();
+		if (withinRange(domain, $$.getZoomDomain())) {
+			// hide any possible tooltip show before the zoom
+			$$.api.tooltip.hide();
 
-		if (isTimeSeries) {
-			const fn = parseDate.bind($$);
+			if (config.subchart_show) {
+				const xScale = scale.zoom || scale.x;
 
-			domain = domain.map(x => fn(x));
-		}
+				$$.brush.getSelection().call($$.brush.move, [xScale(domain[0]), xScale(domain[1])]);
+				resultDomain = domain;
+			} else {
+				scale.x.domain(domain);
+				scale.zoom = scale.x;
+				$$.axis.x.scale(scale.zoom);
 
-		if (config.subchart_show) {
-			const xScale = scale.zoom || scale.x;
+				resultDomain = scale.zoom.orgDomain();
+			}
 
-			$$.brush.getSelection().call($$.brush.move, [xScale(domain[0]), xScale(domain[1])]);
-			resultDomain = domain;
-		} else {
-			scale.x.domain(domain);
-			scale.zoom = scale.x;
-			$$.axis.x.scale(scale.zoom);
+			$$.redraw({
+				withTransition: true,
+				withY: config.zoom_rescale,
+				withDimension: false
+			});
 
-			resultDomain = scale.zoom.orgDomain();
+			$$.setZoomResetButton();
+			callFn(config.zoom_onzoom, $$.api, resultDomain);
 		}
-
-		$$.redraw({
-			withTransition: true,
-			withY: config.zoom_rescale,
-			withDimension: false
-		});
-
-		$$.setZoomResetButton();
-		callFn(config.zoom_onzoom, $$.api, resultDomain);
 	} else {
 		resultDomain = scale.zoom ?
 			scale.zoom.domain() : scale.x.orgDomain();

diff --git a/test/api/zoom-spec.ts b/test/api/zoom-spec.ts
@@ -5,7 +5,6 @@
 /* eslint-disable */
 import {expect} from "chai";
 import sinon from "sinon";
-import {select as d3Select} from "d3-selection";
 import {parseDate} from "../../src/module/util";
 import util from "../assets/util";
 import CLASS from "../../src/config/classes";
@@ -430,4 +429,45 @@ describe("API zoom", function() {
 			});
 		});
 	});
+
+	describe("zoom for timeseries axis type", () => {
+		before(() => {
+			chart = util.generate({
+				data: {
+					rows: [
+						["x", "A"],
+						["2021-01-01", 1],
+						["2021-01-02", 2],
+						["2021-01-03", 4]
+					],
+					x: "x",
+					xFormat: "%Y-%m-%d",
+					type: "line"
+				},
+				axis: {
+					x: {
+						type: "timeseries"
+					}
+				},
+				zoom: {
+					enabled: true
+				}
+			});
+		});
+
+		it("should zoomed", done => {
+			const range = ["2021-01-01", "2021-01-02"];
+
+			// when
+			const domain = chart.zoom(range);
+
+			setTimeout(() => {
+				domain.forEach((v, i) => {
+					expect(v).to.be.deep.equal(parseDate.call(chart.internal, range[i]));
+				});
+
+				done();
+			}, 500);
+		});
+	});
 });