feat(resize): Intent to ship resize.timer (#2712)

Implement resize.timer option, where to give alternative option
for controlling timer trigger delay and use requestIdleCallback()
instead.

Ref #2650

src/ChartInternal/ChartInternal.ts

@@ -715,7 +715,7 @@ export default class ChartInternal {
 	bindResize(): void {
 		const $$ = <any> this;
 		const {config, state} = $$;
-		const resizeFunction = generateResize();
+		const resizeFunction = generateResize(config.resize_timer);
 		const list: Function[] = [];
 
 		list.push(() => callFn(config.onresize, $$, $$.api));

src/config/Options/common/main.ts

@@ -144,12 +144,24 @@ export default {
 	 * @type {object}
 	 * @property {object} [resize] resize object
 	 * @property {boolean} [resize.auto=true] Set chart resize automatically on viewport changes.
+	 * @property {boolean|number} [resize.timer=true] Set resize timer option.
+	 * - **NOTE:** The resize function will be called using: true - `setTimeout()`, false - `requestIdleCallback()`.
 	 * @example
 	 *  resize: {
-	 *      auto: false
+	 *      auto: false,
+	 *
+	 *      // set resize function will be triggered using `setTimer()`
+	 *      timer: true,
+	 *
+	 *      // set resize function will be triggered using `requestIdleCallback()`
+	 *      timer: false,
+	 *
+	 *      // set resize function will be triggered using `setTimer()` with a delay of `100ms`.
+	 *      timer: 100
 	 *  }
 	 */
 	resize_auto: true,
+	resize_timer: true,
 
 	/**
 	 * Set a callback to execute when the chart is clicked.

src/module/generator.ts

@@ -4,26 +4,33 @@
  */
 import {d3Transition} from "../../types/types";
 import {window} from "./browser";
-import {isArray, isTabVisible} from "./util";
+import {isArray, isNumber, isTabVisible} from "./util";
 
 const {setTimeout, clearTimeout} = window;
 
 /**
  * Generate resize queue function
+ * @param {boolean|number} option Resize option
  * @returns {Fucntion}
  * @private
  */
-export function generateResize() {
+export function generateResize(option: boolean|number) {
 	const fn: any[] = [];
 	let timeout;
 
 	const callResizeFn = function() {
 		// Delay all resize functions call, to prevent unintended excessive call from resize event
 		callResizeFn.clear();
 
-		timeout = setTimeout(() => {
-			fn.forEach((f: Function) => f());
-		}, 200);
+		if (option === false && window.requestIdleCallback) {
+			requestIdleCallback(() => {
+				fn.forEach((f: Function) => f());
+			}, {timeout: 200});
+		} else {
+			timeout = setTimeout(() => {
+				fn.forEach((f: Function) => f());
+			}, isNumber(option) ? option : 200);
+		}
 	};
 
 	callResizeFn.clear = () => {

test/internals/bb-spec.ts

@@ -140,14 +140,15 @@ describe("Interface & initialization", () => {
 	});
 
 	describe("auto resize", () => {
+		const containerName = "container";
 		let container;
 
 		beforeEach(() => {
-			container = document.getElementById("container");
+			container = document.getElementById(containerName);
 
 			if (!container) {
 				container = document.createElement("div");
-				container.id = "container";
+				container.id = containerName;
 				document.body.appendChild(container);
 			}
 		});
@@ -620,4 +621,50 @@ describe("Interface & initialization", () => {
 			expect(element.node().nextSibling.getAttribute("class")).to.be.equal($COMMON.chart);
 		});
 	});
+
+	describe("resize options", () => {
+		const containerName = "container2";
+		let container;
+
+		beforeEach(() => {
+			container = document.getElementById(containerName);
+
+			if (!container) {
+				container = document.createElement("div");
+				container.id = containerName;
+				document.body.appendChild(container);
+			}
+		});
+
+		it("check for the resize timer using requestIdleCallback()", done => {			
+			container.innerHTML = `<div id="chartTimerResize1" style="width:640px"></div>`;
+
+			let start = 0;
+			const chart = util.generate({
+				bindto: "#chartTimerResize1",
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400],
+						["data2", 500, 800, 500, 2000]
+					]
+				},
+				resize: {
+					timer: false
+				},
+				onresized: function() {
+					expect(Date.now() - start).to.be.below(100);
+					done();
+				}
+			});
+
+			const width = 300;
+
+			// resize chart holder
+			chart.$.chart.style("width", `${width}px`);
+
+			// trigger resize eventize 
+			start = Date.now();
+			window.dispatchEvent(new Event("resize"));
+		});
+	});
 });