feat(subchart): Intent to ship subchart.init.range option

Implement new option to specify subchart selection range at
the initialization.

Fix #2037

src/Chart/api/zoom.ts

@@ -22,20 +22,20 @@ function withinRange(domain: (number | string)[], range: number[]): boolean {
 }
 
 /**
- * Zoom by giving x domain.
+ * Zoom by giving x domain range.
  * - **NOTE:**
- *  - For `wheel` type zoom, the minimum zoom range will be set as the given domain. To get the initial state, [.unzoom()](#unzoom) should be called.
+ *  - For `wheel` type zoom, the minimum zoom range will be set as the given domain range. To get the initial state, [.unzoom()](#unzoom) should be called.
  *  - To be used [zoom.enabled](Options.html#.zoom) option should be set as `truthy`.
  * @function zoom
  * @instance
  * @memberof Chart
- * @param {Array} domainValue If domain is given, the chart will be zoomed to the given domain. If no argument is given, the current zoomed domain will be returned.
+ * @param {Array} domainValue If domain range is given, the chart will be zoomed to the given domain. If no argument is given, the current zoomed domain will be returned.
  * @returns {Array} domain value in array
  * @example
- *  // Zoom to specified domain
+ *  // Zoom to specified domain range
  *  chart.zoom([10, 20]);
  *
- *  // Get the current zoomed domain
+ *  // Get the current zoomed domain range
  *  chart.zoom();
  */
 const zoom = function(domainValue?: (number | string)[]): (Date | number)[] {

src/ChartInternal/interactions/subchart.ts

@@ -242,6 +242,8 @@ export default {
 
 			// update subchart elements if needed
 			if (withSubchart) {
+				const initRange = config.subchart_init_range;
+
 				// extent rect
 				!brushEmpty($$) && $$.brush.update();
 
@@ -261,6 +263,12 @@ export default {
 					$$.updateCircle(true);
 					$$.redrawCircle(cx, cy, withTransition, undefined, true);
 				}
+
+				!state.rendered && initRange && $$.brush.move(
+					$$.brush.getSelection(),
+					initRange.map($$.scale.x)
+				);
+				// .call($$.brush.move, initRange.map($$.scale.x));
 			}
 		}
 	},

src/config/Options/interaction/subchart.ts

@@ -19,6 +19,7 @@ export default {
 	 * @property {boolean} [subchart.axis.x.show=true] Show or hide x axis.
 	 * @property {boolean} [subchart.axis.x.tick.show=true] Show or hide x axis tick line.
 	 * @property {boolean} [subchart.axis.x.tick.text.show=true] Show or hide x axis tick text.
+	 * @property {Array} [subchart.init.range] Set initial selection domain range.
 	 * @property {number} [subchart.size.height] Change the height of the subchart.
 	 * @property {Function} [subchart.onbrush] Set callback for brush event.<br>
 	 *  Specified function receives the current zoomed x domain.
@@ -29,6 +30,10 @@ export default {
 	 *      size: {
 	 *          height: 20
 	 *      },
+	 *      init: {
+	 *          // specify initial range domain selection
+	 *          range: [1, 2]
+	 *      },
 	 *      axis: {
 	 *      	x: {
 	 *      	  show: true,
@@ -56,5 +61,6 @@ export default {
 	subchart_axis_x_show: true,
 	subchart_axis_x_tick_show: true,
 	subchart_axis_x_tick_text_show: true,
+	subchart_init_range: <undefined|[number, number]> undefined,
 	subchart_onbrush: () => {}
 };

test/interactions/subchart-spec.ts

@@ -131,7 +131,7 @@ describe("SUBCHART", () => {
 
 			expect(subchart.empty()).to.be.true;
 			expect(chart.internal.clipSubchart).to.be.undefined;
-		})
+		});
 	});
 
 	describe("subchart selection", () => {
@@ -143,7 +143,10 @@ describe("SUBCHART", () => {
 					]
 				},
 				subchart: {
-					show: true
+					show: true,
+					init: {
+						range: [2, 3]
+					}
 				}
 			};
 		});
@@ -168,6 +171,12 @@ describe("SUBCHART", () => {
 			}, 300);
 		};
 
+		it("check initial subchart range selection", () => {
+			const currRange = chart.internal.scale.x.domain().map(Math.round);
+
+			expect(currRange).to.be.deep.equal(args.subchart.init.range);
+		});
+
 		it("should be select subchart area", checkSelection);
 
 		it("set options axis.x.type='category'", () => {
@@ -180,6 +189,7 @@ describe("SUBCHART", () => {
 		});
 
 		it("should be select subchart area for category type x axis", checkSelection);
+
 	});
 
 	describe("the extent", () => {
@@ -528,4 +538,8 @@ describe("SUBCHART", () => {
 			});
 		});
 	});
+
+	describe("", () => {
+		it
+	})
 });

types/options.d.ts

@@ -1108,6 +1108,13 @@ export interface SubchartOptions {
 		};
 	};
 
+	init?: {
+		/**
+		 * Set initial selection domain range.
+		 */
+		range?: [number, number];
+	};
+
 	/**
 	 * Set callback for brush event.
 	 * Specified function receives the current zoomed x domain.