fix(subchart): Correct subchart extent option

- Correct extent to work properly
- Improved to be called once during init & window resizing

Fix #142
Close #805

spec/interactions/subchart-spec.js

@@ -16,6 +16,15 @@ describe("SUBCHART", () => {
 		chart = util.generate(args);
 	});
 
+	// do mouse drag selection
+	const doDrag = (from = {clientX: 100, clientY: 100}, to = {clientX: 200, clientY: 200}) => {
+		const overlay = chart.$.svg.select(".overlay").node();
+
+		util.fireEvent(overlay, "mousedown", from, chart);
+		util.fireEvent(overlay, "mousemove", to, chart);
+		util.fireEvent(overlay, "mouseup", from, chart);
+	};
+
 	describe("generate subchart", () => {
 		before(() => {
 			args = {
@@ -150,24 +159,10 @@ describe("SUBCHART", () => {
 
 		const checkSelection = 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: 100,
-				clientY: 100
-			}, chart);
-
-			util.fireEvent(overlay, "mousemove", {
-				clientX: 200,
-				clientY: 200
-			}, chart);
-
-			util.fireEvent(overlay, "mouseup", {
-				clientX: 200,
-				clientY: 200
-			}, chart);
+			// mouse drag selection on subchart
+			doDrag();
 
 			expect(+selection.attr("width")).to.be.equal(baseWidth);
 
@@ -195,4 +190,71 @@ describe("SUBCHART", () => {
 
 		it("should be select subchart area for category type x axis", checkSelection);
 	});
+
+	describe("the extent", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						['x', '2019-01-01', '2019-01-02', '2019-01-03', '2019-01-04', '2019-01-05'],
+						["data1", 10, 5, 3, 8, 7]
+					]
+				},
+				subchart: {
+					show: true
+				},
+				axis: {
+					x: {
+						type: "timeseries",
+						tick: {
+							format: "%Y-%m-%d"
+						},
+						extent: [0, 100]
+					}
+				}
+			};
+		});
+
+		it("should be limiting selection area", () => {
+			const selection = chart.$.svg.select(".selection");
+
+			// mouse drag selection on subchart
+			doDrag( {clientX: 0, clientY: 0}, {clientX: 300, clientY: 300});
+
+			// selection shouldn't over pass
+			expect(Math.floor(selection.attr("width"))).to.be.equal(args.axis.x.extent[1]);
+		});
+
+		it("set options axis.x.extent=datetime", () => {
+			args.axis.x.extent = ["2019-01-01", "2019-01-02"];
+		});
+
+		it("should be limiting selection area for datetime extent", () => {
+			const selection = chart.$.svg.select(".selection");			
+			const range = args.axis.x.extent
+				.map(v => chart.internal.subX(new Date(v)))
+				.reduce((a, c) => Math.abs(a - c));
+
+			// mouse drag selection on subchart
+			doDrag( {clientX: 0, clientY: 0}, {clientX: 300, clientY: 300});
+
+			// selection shouldn't over pass
+			expect(+selection.attr("width")).to.be.closeTo(range, 10);
+		});
+
+		it("set options axis.x.extent=[0, 100]", () => {
+			args.axis.x.extent = (domain, scale) => [0, 100];
+		});
+
+		it("should be limiting selection area", () => {
+			const selection = chart.$.svg.select(".selection");
+
+			// mouse drag selection on subchart
+			doDrag( {clientX: 0, clientY: 0}, {clientX: 300, clientY: 300});
+
+			// selection shouldn't over pass
+			expect(Math.floor(selection.attr("width"))).to.be.equal(args.axis.x.extent()[1]);
+		});
+	});
 });

src/api/api.flow.js

@@ -184,15 +184,13 @@ extend(Chart.prototype, {
 			}
 
 			domain = [baseValue.x - diff, baseValue.x];
-			$$.updateXDomain(null, true, true, false, domain);
-		} else if (orgDataCount === 1) {
-			if ($$.isTimeSeries()) {
-				diff = (baseTarget.values[baseTarget.values.length - 1].x - baseValue.x) / 2;
-				domain = [new Date(+baseValue.x - diff), new Date(+baseValue.x + diff)];
-				$$.updateXDomain(null, true, true, false, domain);
-			}
+		} else if (orgDataCount === 1 && $$.isTimeSeries()) {
+			diff = (baseTarget.values[baseTarget.values.length - 1].x - baseValue.x) / 2;
+			domain = [new Date(+baseValue.x - diff), new Date(+baseValue.x + diff)];
 		}
 
+		domain && $$.updateXDomain(null, true, true, false, domain);
+
 		// Set targets
 		$$.updateTargets($$.data.targets);
 

src/config/Options.js

@@ -1815,16 +1815,27 @@ export default class Options {
 			 * Set default extent for subchart and zoom. This can be an array or function that returns an array.
 			 * @name axis․x․extent
 			 * @memberof Options
-			 * @type {Array}
+			 * @type {Array|Function}
 			 * @default undefined
 			 * @example
 			 * axis: {
 			 *   x: {
-			 *     // [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner
-			 *     // https://github.com/d3/d3-brush/blob/master/src/brush.js#L521
-			 *     extent: [
-			 *         [0, 0], [200, 60]
-			 *     ]
+			 *     // extent range as a pixel value
+			 *     extent: [0, 200],
+			 *
+			 *     // when axis is 'timeseries', parsable datetime string
+			 *     extent: ["2019-03-01", "2019-03-05"],
+			 *
+			 *     // return extent value
+			 *     extent: function(domain, scale) {
+			 *    	 var extent = domain.map(function(v) {
+			 *     	    return scale(v);
+			 *     	 });
+			 *
+			 *   	 // it should return a format of array
+			 *   	 // ex) [0, 584]
+			 *     	 return extent;
+			 *     }
 			 *   }
 			 * }
 			 */

src/interactions/subchart.js

@@ -13,7 +13,7 @@ import {
 } from "d3-brush";
 import ChartInternal from "../internals/ChartInternal";
 import CLASS from "../config/classes";
-import {extend, brushEmpty, capitalize, isFunction, getRandom} from "../internals/util";
+import {extend, brushEmpty, capitalize, isArray, isFunction, getRandom} from "../internals/util";
 
 extend(ChartInternal.prototype, {
 	/**
@@ -32,6 +32,17 @@ extend(ChartInternal.prototype, {
 		const brushHandler = () => {
 			$$.redrawForBrush();
 		};
+		const getBrushSize = () => {
+			const brush = $$.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"];
+		};
 
 		let lastDomain;
 		let timeout;
@@ -67,21 +78,19 @@ extend(ChartInternal.prototype, {
 		};
 
 		// set the brush extent
-		$$.brush.scale = function(scale, height) {
-			const extent = [[0, 0]];
-
-			if (scale.range) {
-				extent.push([
-					scale.range()[1],
-					height || config.subchart_size_height
-				]);
-			} else if (scale.constructor === Array) {
-				extent.push(scale);
+		$$.brush.scale = function(scale) {
+			const h = config.subchart_size_height || getBrushSize();
+			let extent = $$.getExtent();
+
+			if (!extent && scale.range) {
+				extent = [[0, 0], [scale.range()[1], h]];
+			} else if (isArray(extent)) {
+				extent = extent.map((v, i) => [v, i > 0 ? h : i]);
 			}
 
 			// [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner
 			isRotated && extent[1].reverse();
-			this.extent(config.axis_x_extent || extent);
+			this.extent(extent);
 
 			// when extent updates, brush selection also be re-applied
 			// https://github.com/d3/d3/issues/2918
@@ -411,18 +420,20 @@ extend(ChartInternal.prototype, {
 	},
 
 	/**
-	 * Get default extent
+	 * Get extent value
 	 * @private
 	 * @returns {Array} default extent
 	 */
-	getDefaultExtent() {
+	getExtent() {
 		const $$ = this;
-		const config = $$.config;
-		let extent = isFunction(config.axis_x_extent) ?
-			config.axis_x_extent($$.getXDomain($$.data.targets)) : config.axis_x_extent;
+		let extent = $$.config.axis_x_extent;
 
-		if ($$.isTimeSeries()) {
-			extent = [$$.parseDate(extent[0]), $$.parseDate(extent[1])];
+		if (extent) {
+			if (isFunction(extent)) {
+				extent = extent($$.getXDomain($$.data.targets), $$.subX);
+			} else if ($$.isTimeSeries() && extent.every(isNaN)) {
+				extent = extent.map(v => $$.subX($$.parseDate(v)));
+			}
 		}
 
 		return extent;

src/internals/ChartInternal.js

@@ -295,10 +295,6 @@ export default class ChartInternal {
 			.style("opacity", "0")
 			.on("dblclick.zoom", null);
 
-		// Set default extent if defined
-		config.axis_x_extent &&
-			$$.brush.scale($$.getDefaultExtent());
-
 		// Add Axis here, when clipPath is 'true'
 		config.clipPath && $$.axis.init();
 
@@ -1095,7 +1091,6 @@ export default class ChartInternal {
 
 	updateSvgSize() {
 		const $$ = this;
-		const isRotated = $$.config.axis_rotated;
 		const brush = $$.svg.select(`.${CLASS.brush} .overlay`);
 		const brushSize = {width: 0, height: 0};
 
@@ -1135,8 +1130,6 @@ export default class ChartInternal {
 		$$.svg.select(`.${CLASS.zoomRect}`)
 			.attr("width", $$.width)
 			.attr("height", $$.height);
-
-		$$.brush && $$.brush.scale($$.subX, brushSize[isRotated ? "width" : "height"]);
 	}
 
 	updateDimension(withoutAxis) {

types/axis.d.ts

@@ -69,7 +69,12 @@ export interface XAxisConfiguration {
 	 * Set default extent for subchart and zoom.
 	 * This can be an array or function that returns an array.
 	 */
-	extent?: number[] | (() => number[]);
+	extent?: number[] | string[] | (
+		(
+			domain: Date|string|number[],
+			scale: (value: any) => number
+		) => number[]
+	);
 
 	/**
 	 * Set label on x axis.