fix(bar): Bar's width resize according the zoom scale

- Fix .getBarW() to update width on zoom interaction - Make to hold event rect elements in $$.eventRect - Make to not bind zoom event when subchart is enabled - Make xx() to handle direct data value argument Fix #1185
naver · Jan 3, 2020 · 93184a2 · 93184a2
1 parent 2ab23b9
commit 93184a2
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 30 deletions.
diff --git a/spec/api/api.zoom-spec.js b/spec/api/api.zoom-spec.js
@@ -371,4 +371,57 @@ describe("API zoom", function() {
 			}, 300);
 		});
 	});
+
+	describe("bar's width based on ratio", () => {
+		before(() => {
+			chart = util.generate({
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250]
+					],
+					type: "bar"
+				},
+				bar: {
+					width: {
+						ratio: 0.8
+					}
+				},
+				zoom: {
+					enabled: true
+				}
+			});
+		});
+
+		it("check bar's width for zoom in/out API call", done => {
+			const len = [];
+
+			chart.$.bar.bars.each(function() {
+				len.push(this.getTotalLength());
+			});
+
+			// when
+			chart.zoom([1, 2]);
+
+			new Promise((resolve, reject) => {
+				setTimeout(() => {
+					chart.$.bar.bars.each(function(d, i) {
+						expect(this.getTotalLength()).to.be.greaterThan(len[i]);
+					});
+
+					resolve();
+				}, 300);
+			}).then(() => {
+				// when
+				chart.unzoom();
+			}).then(() => {
+				setTimeout(() => {
+					chart.$.bar.bars.each(function(d, i) {
+						expect(this.getTotalLength()).to.be.equal(len[i]);
+					});
+
+					done();
+				}, 300);
+			});
+		});
+	});
 });
diff --git a/spec/interactions/zoom-spec.js b/spec/interactions/zoom-spec.js
@@ -480,7 +480,7 @@ describe("ZOOM", function() {
 		});
 
 		it("region area should be resized on zoom", done => {
-				const main = chart.$.main;
+			const main = chart.$.main;
 			const regionRect = main.select(`.${CLASS.region}-0 rect`);
 			const lineWidth = chart.$.line.lines.node().getBBox().width;
 
@@ -734,8 +734,8 @@ describe("ZOOM", function() {
 					x: {
 						type: "category",
 						tick: {
-						rotate: 40,
-						multiline: false
+							rotate: 40,
+							multiline: false
 						}
 					}
 				},
@@ -766,11 +766,6 @@ describe("ZOOM", function() {
 				clientY: 137
 			});
 
-			const expected = {
-				x: [7.738255334651066, 84.52408366017097],
-				y: [0, 101.2]
-			};
-
 			["x", "y"].forEach(id => {
 				const domain = chart.internal[id].domain();
 				const org = orgDomain[id];
@@ -790,26 +785,26 @@ describe("ZOOM", function() {
 		it("set options", () => {
 			args = {
 				data: {
-				columns: [
-						["data1", 30, 350, 200],
-						["data2", 130, 100, 10],
-						["data3", 230, 153, 85]
-				],
-				types: {
-						data1: "scatter",
+					columns: [
+							["data1", 30, 350, 200],
+							["data2", 130, 100, 10],
+							["data3", 230, 153, 85]
+					],
+					types: {
+							data1: "scatter",
 					},
-				labels: true
+					labels: true
 				},
 				bubble: {
-				maxR: 50
+					maxR: 50
 				},
 				axis: {
-				x: {
-					type: "category"
-				},
-				y: {
-					max: 450
-				}
+					x: {
+						type: "category"
+					},
+					y: {
+						max: 450
+					}
 				},
 				zoom: {
 					enabled: true
@@ -914,4 +909,67 @@ describe("ZOOM", function() {
 			expect(tickTexts.size()).to.be.equal(args.axis.y.tick.culling.max);
 		});
 	});
+
+	describe("bar's width based on ratio", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],
+						["data1", 30, 200, 100, 400, 150, 250]
+					],
+					type: "bar"
+				},
+				bar: {
+					width: {
+						ratio: 0.8
+					}
+				},
+				axis: {
+					x: {
+						type: "timeseries"
+					}
+				},
+				zoom: {
+					enabled: {
+						type: "wheel"
+					}
+				}
+			}
+		});
+
+		it("check bar's width during wheel zoom in/out", () => {
+			const eventRect = chart.$.main.select(`.${CLASS.eventRect}-2`).node();
+			const len = [];
+
+			chart.$.bar.bars.each(function() {
+				len.push(this.getTotalLength());
+			});
+
+			// when zoom in
+			util.fireEvent(eventRect, "wheel", {
+				deltaX: 0,
+				deltaY: -100,
+				clientX: 159,
+				clientY: 137
+			});
+
+			chart.$.bar.bars.each(function(d, i) {
+				expect(this.getTotalLength()).to.be.greaterThan(len[i]);
+			});
+
+			// when zoom out
+			util.fireEvent(eventRect, "wheel", {
+				deltaX: 0,
+				deltaY: 100,
+				clientX: 159,
+				clientY: 137
+			});
+
+			chart.$.bar.bars.each(function(d, i) {
+				expect(this.getTotalLength()).to.be.equal(len[i]);
+			});
+		});
+	});
 });
diff --git a/src/interactions/interaction.js b/src/interactions/interaction.js
@@ -81,6 +81,7 @@ extend(ChartInternal.prototype, {
 				.merge(eventRectUpdate);
 		}
 
+		$$.eventRect = eventRectUpdate;
 		$$.updateEventRect(eventRectUpdate);
 
 		if ($$.inputType === "touch" && !$$.svg.on("touchstart.eventRect") && !$$.hasArcType()) {
@@ -193,7 +194,7 @@ extend(ChartInternal.prototype, {
 		const $$ = this;
 		const config = $$.config;
 		const xScale = $$.zoomScale || $$.x;
-		const eventRectData = eventRectUpdate || $$.eventRect.data();// set update selection if null
+		const eventRectData = eventRectUpdate || $$.eventRect.data(); // set update selection if null
 		const isRotated = config.axis_rotated;
 		let x;
 		let y;

diff --git a/src/interactions/zoom.js b/src/interactions/zoom.js
@@ -42,7 +42,9 @@ extend(ChartInternal.prototype, {
 		const eventRects = $$.main.select(`.${CLASS.eventRects}`);
 
 		if (zoomEnabled && bind) {
-			$$.bindZoomOnEventRect(eventRects, zoomEnabled.type);
+			// Do not bind zoom event when subchart is shown
+			!$$.config.subchart_show &&
+				$$.bindZoomOnEventRect(eventRects, zoomEnabled.type);
 		} else if (bind === false) {
 			$$.api.unzoom();
 

diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js
@@ -17,7 +17,7 @@ import {transition as d3Transition} from "d3-transition";
 import Axis from "../axis/Axis";
 import CLASS from "../config/classes";
 import {document, window} from "../internals/browser";
-import {notEmpty, asHalfPixel, getOption, isValue, isArray, isFunction, isString, isNumber, isObject, callFn, sortValue} from "./util";
+import {notEmpty, asHalfPixel, getOption, isArray, isFunction, isNumber, isObject, isString, isValue, callFn, sortValue} from "./util";
 
 /**
  * Internal chart class.
@@ -979,11 +979,17 @@ export default class ChartInternal {
 		return this.hasDataLabel() ? "1" : "0";
 	}
 
+	/**
+	 * Get the zoom or unzoomed scaled value
+	 * @param {Date|Number|Object} d Data value
+	 * @private
+	 */
 	xx(d) {
-		const fn = this.config.zoom_enabled && this.zoomScale ?
-			this.zoomScale : this.x;
+		const $$ = this;
+		const fn = $$.config.zoom_enabled && $$.zoomScale ?
+			$$.zoomScale : this.x;
 
-		return d ? fn(d.x) : null;
+		return d ? fn(isValue(d.x) ? d.x : d) : null;
 	}
 
 	xv(d) {

diff --git a/src/shape/bar.js b/src/shape/bar.js
@@ -69,8 +69,10 @@ extend(ChartInternal.prototype, {
 	getBarW(axis, barTargetsNum) {
 		const $$ = this;
 		const config = $$.config;
-		const tickInterval = axis.tickInterval($$.getMaxDataCount());
+		const maxDataCount = $$.getMaxDataCount();
 		const isGrouped = config.data_groups.length;
+		const tickInterval = ($$.zoomScale || $$) && !$$.isCategorized() ?
+			$$.xx($$.subX.domain()[1]) / maxDataCount : axis.tickInterval(maxDataCount);
 		let result;
 
 		const getWidth = id => {