fix(subchart): Fix handlebar position

- Update handlebar path coordinate to ease control of the position
- Fix horizontal/vertical align based on the subchart height

Fix #3358

src/ChartInternal/interactions/subchart.ts

@@ -20,6 +20,7 @@ export default {
 		const $$ = this;
 		const {config, scale, $el: {subchart}, state} = $$;
 		const isRotated = config.axis_rotated;
+		const height = config.subchart_size_height;
 		let lastDomain;
 		let lastSelection;
 		let timeout;
@@ -29,18 +30,6 @@ export default {
 			isRotated ? d3BrushY() : d3BrushX()
 		).handleSize(5);
 
-		const getBrushSize = () => {
-			const brush = $$.$el.svg.select(`.${CLASS.brush} .overlay`);
-			const brushSize = {width: 0, height: 0};
-
-			if (brush.size()) {
-				brushSize.width = +brush.attr("width");
-				brushSize.height = +brush.attr("height");
-			}
-
-			return brushSize[isRotated ? "width" : "height"];
-		};
-
 		// bind brush event
 		$$.brush.on("start brush end", event => {
 			const {selection, sourceEvent, target, type} = event;
@@ -75,10 +64,9 @@ export default {
 				} else {
 					$$.brush.handle.attr("display", null)
 						.attr("transform", (d, i) => {
-							const pos = isRotated ?
-								[33, selection[i] - (i === 0 ? 30 : 24)] : [selection[i], 3];
+							const pos = [selection[i], height / 2];
 
-							return `translate(${pos})`;
+							return `translate(${isRotated ? pos.reverse() : pos})`;
 						});
 				}
 			}
@@ -106,7 +94,7 @@ export default {
 
 		// set the brush extent
 		$$.brush.scale = function(scale) {
-			const h = config.subchart_size_height || getBrushSize();
+			const h = config.subchart_size_height;
 			let extent = $$.getExtent();
 
 			if (!extent && scale.range) {
@@ -211,11 +199,11 @@ export default {
 
 		// brush handle shape's path
 		const path = isRotated ? [
-			"M 5.2491724,29.749209 a 6,6 0 0 0 -5.50000003,-6.5 H -5.7508276 a 6,6 0 0 0 -6.0000004,6.5 z m -5.00000003,-2 H -6.7508276 m 6.99999997,-2 H -6.7508276Z",
-			"M 5.2491724,23.249172 a 6,-6 0 0 1 -5.50000003,6.5 H -5.7508276 a 6,-6 0 0 1 -6.0000004,-6.5 z m -5.00000003,2 H -6.7508276 m 6.99999997,2 H -6.7508276Z"
+			"M8.5 0 a6 6 0 0 0 -6 -6.5 H-2.5 a 6 6 0 0 0 -6 6.5 z m-5 -2 H-3.5 m7 -2 H-3.5z",
+			"M8.5 0 a6 -6 0 0 1 -6 6.5 H-2.5 a 6 -6 0 0 1 -6 -6.5z m-5 2 H-3.5 m7 2 H-3.5z"
 		] : [
-			"M 0 18 A 6 6 0 0 0 -6.5 23.5 V 29 A 6 6 0 0 0 0 35 Z M -2 23 V 30 M -4 23 V 30Z",
-			"M 0 18 A 6 6 0 0 1 6.5 23.5 V 29 A 6 6 0 0 1 0 35 Z M 2 23 V 30 M 4 23 V 30Z"
+			"M0 -8.5 A6 6 0 0 0 -6.5 -3.5 V2.5 A6 6 0 0 0 0 8.5 Z M-2 -3.5 V3.5 M-4 -3.5 V3.5z",
+			"M0 -8.5 A6 6 0 0 1 6.5 -3.5 V2.5 A6 6 0 0 1 0 8.5 Z M2 -3.5 V3.5 M4 -3.5 V3.5z"
 		];
 
 		$$.brush.handle = brush.selectAll(`.${customHandleClass}`)

test/interactions/subchart-spec.ts

@@ -16,6 +16,10 @@ describe("SUBCHART", () => {
 		chart = util.generate(args);
 	});
 
+	afterEach(() => {
+		chart.destroy();
+	});
+
 	describe("generate subchart", () => {
 		before(() => {
 			args = {
@@ -641,6 +645,26 @@ describe("SUBCHART", () => {
 			expect(chart.internal.scale.x.domain()).to.be.not.deep.equal(currDomain);
 		});
 
+		it("set options: subchart.size.height", () => {
+			args.subchart.size = {
+				height: 100
+			};
+		});
+
+		it("handlebar should be positioned at the verrical center?", () => {
+			const handlebar = chart.internal.brush.getSelection()
+				.selectAll(".handle--custom");
+
+			// when
+			util.doDrag(handlebar.filter(":last-child").node(), undefined, {clientX: 400, clientY: 100}, chart);
+
+			handlebar.each(function(d, i) {
+				const y = +this.getAttribute("transform").replace(/[^,]*,(\d+)\)/g, "$1");
+
+				expect(y).to.be.equal(args.subchart.size.height / 2);
+			});
+		});
+
 		it("set options axis.rotated=true", () => {
 			args.axis = {
 				rotated: true
@@ -661,5 +685,19 @@ describe("SUBCHART", () => {
 
 			expect(chart.internal.scale.x.domain()).to.be.not.deep.equal(currDomain);
 		});
+
+		it("handlebar should be positioned at the horizontal center?", () => {
+			const handlebar = chart.internal.brush.getSelection()
+				.selectAll(".handle--custom");
+
+			// when
+			util.doDrag(handlebar.filter(":last-child").node(), undefined, {clientX: 100, clientY: 0}, chart);
+
+			handlebar.each(function(d, i) {
+				const y = +this.getAttribute("transform").replace(/[^()]*\((\d+).*/g, "$1");
+
+				expect(y).to.be.equal(args.subchart.size.height / 2);
+			});
+		});
 	});
 });

test/internals/data-spec.ts

@@ -1129,9 +1129,11 @@ describe("DATA", () => {
 		afterEach(() => {
 			spyHidden.resetHistory();
 			spyShown.resetHistory();
+
+			chart.destroy();
 		});
 
-		it("check on continuous .hide()/.show() APIs.", done => {
+		it("check on continuous .hide()/.show() APIs.", function(done) {
 			new Promise((resolve, reject) => {
 				// hide
 				chart.hide();