feat(option): Intent to ship boost.useWorker

Implement boost.useWorker, which allows run tasks on WebWorker

demo/benchmark/benchmark.js

@@ -12,7 +12,7 @@ window.bench = {
     },
     init() {
         if (/^(127\.|localhost)/.test(location.host)) {
-            this.target.push("local");
+            this.target.unshift("local");
         }
 
        // append targeted version list
@@ -40,7 +40,8 @@ window.bench = {
 
             data.push(d);
         }
-    console.log(JSON.stringify(data));
+
+        //console.log(JSON.stringify(data));
         return data;
     },
     loadBillboard: function() {
@@ -72,6 +73,10 @@ window.bench = {
         }
 
         this.chart = bb.generate({
+            boost: {
+                useCssRule: document.getElementById("useCssRule").checked,
+                useWorker: document.getElementById("useWorker").checked
+            },
             data: {
                 columns: this.getData(),
                 type: this.$el.type.value

demo/benchmark/index.html

@@ -43,7 +43,12 @@ <h1>Benchmark</h1>
 	</select>
   </p>
   <p>
-	5) Run! - 
+	5) Boost options: (3.5.0+)<br>
+	<input type="checkbox" id="useCssRule" /> boost.useCssRule<br>
+	<input type="checkbox" id="useWorker" /> boost.useWorker
+  </p>
+  <p>
+	6) Run! - 
 	<button onclick="bench.generate()">Generate only</button> 
 	<button onclick="bench.generate('load')">Load Start</button> 
 	<button onclick="bench.generate('resize')">Resize Start</button> 

demo/demo.js

@@ -5087,17 +5087,34 @@ d3.select(".chart_area")
 				},
 				data: {
 					columns: [
-						["data1", 30,  31.8,  33,  33.8,  34.4,  34.8,  35,  35,  34.6,  34.4,  34.2,  33.8,  33.4,  33.4,  33.6,  33.6,  33.8,  34,  34.2,  34,  34,  34,  34,  34,  34,  33.6,  33,  32.4,  31.8,  31.2,  30.8,  30.8,  31,  31.2,  31.4,  31.8,  32,  32,  32.2,  32.4,  32.4,  32.2,  32,  31.6,  31.2,  31,  31,  31.4,  31.8,  32.2,  32.6,  33,  33, 31.2],
-						["data2", 32.8,  32.6,  32.4,  32.2,  31.8,  31.6,  31.4,  31.2,  31,  31,  31.2,  31.4,  31.6,  31.8,  32,  32,  32,  32.2,  32.2,  32.4,  32.4,  32.4,  32.2,  32.2,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32,  32.2,  32.4,  32.4,  32.4,  32.4,  32.2,  32,  32,  32,  32.2,  32.2,  32.2,  32,  31.8,  31.4,  31.2,  31,  31,  31.2,  31.4],
-						["data3", 31,  31,  30.8,  31,  31.6,  32.2,  32.6,  33,  32.8,  32.4,  32,  32,  31.8,  31.8,  31.8,  31.6,  31,  30.8,  30.8,  31,  31.6,  32.4,  33,  33.4,  33.8,  34,  34,  34,  33.8,  33.6,  33.4,  33.2,  33,  33,  33,  32.8,  32.6,  32.4,  32.2,  32,  32,  31.8,  31.6,  31.4,  31.2,  30.8,  30.6,  30.4,  30.2,  30,  30,  30,  30,  30],
-						["data4", 19,  19,  19,  19,  19,  19,  19,  19,  19,  19,  19,  19,  19,  19,  19,  19.1,  19.1,  19.1,  19.4,  19.6,  19.6,  19.8,  10,  10,  10,  10,  10,  10,  10,  10,  10,  10,  10,  10.1,  10.6,  11.1,  11,  11,  14,  14.8,  15.4,  15.8,  16,  16,  16,  16,  16,  16,  16,  16,  16,  16,  16,  16]
+						["data1", 30, 31.8, 33, 33.8, 34.4, 34.8, 35, 35, 34.6, 34.4, 34.2, 33.8, 33.4, 33.4, 33.6, 33.6, 33.8, 34, 34.2, 34, 34, 34, 34, 34, 34, 33.6, 33, 32.4, 31.8, 31.2, 30.8, 30.8, 31, 31.2, 31.4, 31.8, 32, 32, 32.2, 32.4, 32.4, 32.2, 32, 31.6, 31.2, 31, 31, 31.4, 31.8, 32.2, 32.6, 33, 33, 31.2],
+						["data2", 32.8, 32.6, 32.4, 32.2, 31.8, 31.6, 31.4, 31.2, 31, 31, 31.2, 31.4, 31.6, 31.8, 32, 32, 32, 32.2, 32.2, 32.4, 32.4, 32.4, 32.2, 32.2, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32.2, 32.4, 32.4, 32.4, 32.4, 32.2, 32, 32, 32, 32.2, 32.2, 32.2, 32, 31.8, 31.4, 31.2, 31, 31, 31.2, 31.4],
+						["data3", 31, 31, 30.8, 31, 31.6, 32.2, 32.6, 33, 32.8, 32.4, 32, 32, 31.8, 31.8, 31.8, 31.6, 31, 30.8, 30.8, 31, 31.6, 32.4, 33, 33.4, 33.8, 34, 34, 34, 33.8, 33.6, 33.4, 33.2, 33, 33, 33, 32.8, 32.6, 32.4, 32.2, 32, 32, 31.8, 31.6, 31.4, 31.2, 30.8, 30.6, 30.4, 30.2, 30, 30, 30, 30, 30],
+						["data4", 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19.1, 19.1, 19.1, 19.4, 19.6, 19.6, 19.8, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10.1, 10.6, 11.1, 11, 11, 14, 14.8, 15.4, 15.8, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16]
 					],
 					type: "line",
 					types: {
 						data4: "bar"
 					}
 				},
 			}
+		},
+		useWorker: {
+			description: "Given data will be formatted in Worker thread at the initial time.",
+			options: {
+				boost: {
+					useWorker: true
+				},
+				data: {
+					columns: [
+						["data1", 30, 31.8, 33, 33.8, 34.4, 34.8, 35, 35, 34.6, 34.4, 34.2, 33.8, 33.4, 33.4, 33.6, 33.6, 33.8, 34, 34.2, 34, 34, 34, 34, 34, 34, 33.6, 33, 32.4, 31.8, 31.2, 30.8, 30.8, 31, 31.2, 31.4, 31.8, 32, 32, 32.2, 32.4, 32.4, 32.2, 32, 31.6, 31.2, 31, 31, 31.4, 31.8, 32.2, 32.6, 33, 33, 31.2],
+						["data2", 32.8, 32.6, 32.4, 32.2, 31.8, 31.6, 31.4, 31.2, 31, 31, 31.2, 31.4, 31.6, 31.8, 32, 32, 32, 32.2, 32.2, 32.4, 32.4, 32.4, 32.2, 32.2, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32, 32.2, 32.4, 32.4, 32.4, 32.4, 32.2, 32, 32, 32, 32.2, 32.2, 32.2, 32, 31.8, 31.4, 31.2, 31, 31, 31.2, 31.4],
+						["data3", 31, 31, 30.8, 31, 31.6, 32.2, 32.6, 33, 32.8, 32.4, 32, 32, 31.8, 31.8, 31.8, 31.6, 31, 30.8, 30.8, 31, 31.6, 32.4, 33, 33.4, 33.8, 34, 34, 34, 33.8, 33.6, 33.4, 33.2, 33, 33, 33, 32.8, 32.6, 32.4, 32.2, 32, 32, 31.8, 31.6, 31.4, 31.2, 30.8, 30.6, 30.4, 30.2, 30, 30, 30, 30, 30],
+						["data4", 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30.1, 30.1, 30.1, 30.4, 30.6, 30.6, 30.8, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28.1, 28.6, 11.1, 11, 11, 14, 14.8, 15.4, 15.8, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16]
+					],
+					type: "scatter"
+				},
+			}
 		}
 	},
 	API: {

src/Chart/api/flow.ts

@@ -57,153 +57,163 @@ export default {
 	flow(args): void {
 		const $$ = this.internal;
 		let data;
-		let domain;
-		let length: number = 0;
-		let tail = 0;
-		let diff;
-		let to;
 
 		if (args.json || args.rows || args.columns) {
-			data = $$.convertData(args);
+			$$.convertData(args, res => {
+				data = res;
+				_();
+			});
 		}
 
-		if ($$.state.redrawing || !data || !isTabVisible()) {
-			return;
-		}
+		/**
+		 * Process flows
+		 * @private
+		 */
+		function _(): void {
+			let domain;
+			let length: number = 0;
+			let tail = 0;
+			let diff;
+			let to;
+
+			if ($$.state.redrawing || !data || !isTabVisible()) {
+				return;
+			}
 
-		const notfoundIds: string[] = [];
-		const orgDataCount = $$.getMaxDataCount();
-		const targets = $$.convertDataToTargets(data, true);
-		const isTimeSeries = $$.axis.isTimeSeries();
+			const notfoundIds: string[] = [];
+			const orgDataCount = $$.getMaxDataCount();
+			const targets = $$.convertDataToTargets(data, true);
+			const isTimeSeries = $$.axis.isTimeSeries();
 
-		// Update/Add data
-		$$.data.targets.forEach(t => {
-			let found = false;
+			// Update/Add data
+			$$.data.targets.forEach(t => {
+				let found = false;
 
-			for (let i = 0; i < targets.length; i++) {
-				if (t.id === targets[i].id) {
-					found = true;
+				for (let i = 0; i < targets.length; i++) {
+					if (t.id === targets[i].id) {
+						found = true;
 
-					if (t.values[t.values.length - 1]) {
-						tail = t.values[t.values.length - 1].index + 1;
-					}
+						if (t.values[t.values.length - 1]) {
+							tail = t.values[t.values.length - 1].index + 1;
+						}
 
-					length = targets[i].values.length;
+						length = targets[i].values.length;
 
-					for (let j = 0; j < length; j++) {
-						targets[i].values[j].index = tail + j;
+						for (let j = 0; j < length; j++) {
+							targets[i].values[j].index = tail + j;
 
-						if (!isTimeSeries) {
-							targets[i].values[j].x = tail + j;
+							if (!isTimeSeries) {
+								targets[i].values[j].x = tail + j;
+							}
 						}
-					}
 
-					t.values = t.values.concat(targets[i].values);
-					targets.splice(i, 1);
-					break;
+						t.values = t.values.concat(targets[i].values);
+						targets.splice(i, 1);
+						break;
+					}
 				}
-			}
 
-			!found && notfoundIds.push(t.id);
-		});
+				!found && notfoundIds.push(t.id);
+			});
 
-		// Append null for not found targets
-		$$.data.targets.forEach(t => {
-			for (let i = 0; i < notfoundIds.length; i++) {
-				if (t.id === notfoundIds[i]) {
-					tail = t.values[t.values.length - 1].index + 1;
+			// Append null for not found targets
+			$$.data.targets.forEach(t => {
+				for (let i = 0; i < notfoundIds.length; i++) {
+					if (t.id === notfoundIds[i]) {
+						tail = t.values[t.values.length - 1].index + 1;
 
-					for (let j = 0; j < length; j++) {
-						t.values.push({
+						for (let j = 0; j < length; j++) {
+							t.values.push({
+								id: t.id,
+								index: tail + j,
+								x: isTimeSeries ? $$.getOtherTargetX(tail + j) : tail + j,
+								value: null
+							});
+						}
+					}
+				}
+			});
+
+			// Generate null values for new target
+			if ($$.data.targets.length) {
+				targets.forEach(t => {
+					const missing: any[] = [];
+
+					for (let i = $$.data.targets[0].values[0].index; i < tail; i++) {
+						missing.push({
 							id: t.id,
-							index: tail + j,
-							x: isTimeSeries ? $$.getOtherTargetX(tail + j) : tail + j,
+							index: i,
+							x: isTimeSeries ? $$.getOtherTargetX(i) : i,
 							value: null
 						});
 					}
-				}
-			}
-		});
-
-		// Generate null values for new target
-		if ($$.data.targets.length) {
-			targets.forEach(t => {
-				const missing: any[] = [];
-
-				for (let i = $$.data.targets[0].values[0].index; i < tail; i++) {
-					missing.push({
-						id: t.id,
-						index: i,
-						x: isTimeSeries ? $$.getOtherTargetX(i) : i,
-						value: null
-					});
-				}
 
-				t.values.forEach(v => {
-					v.index += tail;
+					t.values.forEach(v => {
+						v.index += tail;
 
-					if (!isTimeSeries) {
-						v.x += tail;
-					}
+						if (!isTimeSeries) {
+							v.x += tail;
+						}
+					});
+
+					t.values = missing.concat(t.values);
 				});
+			}
 
-				t.values = missing.concat(t.values);
-			});
-		}
+			$$.data.targets = $$.data.targets.concat(targets); // add remained
 
-		$$.data.targets = $$.data.targets.concat(targets); // add remained
+			// check data count because behavior needs to change when it"s only one
+			// const dataCount = $$.getMaxDataCount();
+			const baseTarget = $$.data.targets[0];
+			const baseValue = baseTarget.values[0];
 
-		// check data count because behavior needs to change when it"s only one
-		// const dataCount = $$.getMaxDataCount();
-		const baseTarget = $$.data.targets[0];
-		const baseValue = baseTarget.values[0];
+			// Update length to flow if needed
+			if (isDefined(args.to)) {
+				length = 0;
+				to = isTimeSeries ? parseDate.call($$, args.to) : args.to;
 
-		// Update length to flow if needed
-		if (isDefined(args.to)) {
-			length = 0;
-			to = isTimeSeries ? parseDate.call($$, args.to) : args.to;
+				baseTarget.values.forEach(v => {
+					v.x < to && length++;
+				});
+			} else if (isDefined(args.length)) {
+				length = args.length;
+			}
 
-			baseTarget.values.forEach(v => {
-				v.x < to && length++;
-			});
-		} else if (isDefined(args.length)) {
-			length = args.length;
-		}
+			// If only one data, update the domain to flow from left edge of the chart
+			if (!orgDataCount) {
+				if (isTimeSeries) {
+					diff = baseTarget.values.length > 1 ?
+						baseTarget.values[baseTarget.values.length - 1].x - baseValue.x :
+						baseValue.x - $$.getXDomain($$.data.targets)[0];
+				} else {
+					diff = 1;
+				}
 
-		// If only one data, update the domain to flow from left edge of the chart
-		if (!orgDataCount) {
-			if (isTimeSeries) {
-				diff = baseTarget.values.length > 1 ?
-					baseTarget.values[baseTarget.values.length - 1].x - baseValue.x :
-					baseValue.x - $$.getXDomain($$.data.targets)[0];
-			} else {
-				diff = 1;
+				domain = [baseValue.x - diff, baseValue.x];
+			} 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 = [baseValue.x - diff, baseValue.x];
-		} 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);
+
+			// Redraw with new targets
+			$$.redraw({
+				flow: {
+					index: baseValue.index,
+					length: length,
+					duration: isValue(args.duration) ? args.duration : $$.config.transition_duration,
+					done: args.done,
+					orgDataCount: orgDataCount,
+				},
+				withLegend: true,
+				withTransition: orgDataCount > 1,
+				withTrimXDomain: false,
+				withUpdateXAxis: true
+			});
 		}
-
-		domain && $$.updateXDomain(null, true, true, false, domain);
-
-		// Set targets
-		$$.updateTargets($$.data.targets);
-
-		// Redraw with new targets
-		$$.redraw({
-			flow: {
-				index: baseValue.index,
-				length: length,
-				duration: isValue(args.duration) ? args.duration : $$.config.transition_duration,
-				done: args.done,
-				orgDataCount: orgDataCount,
-			},
-			withLegend: true,
-			withTransition: orgDataCount > 1,
-			withTrimXDomain: false,
-			withUpdateXAxis: true
-		});
 	}
 };

src/ChartInternal/ChartInternal.ts

@@ -255,10 +255,10 @@ export default class ChartInternal {
 		}
 
 		if (!isLazy || forced) {
-			const convertedData = $$.convertData(config, $$.initWithData);
-
-			convertedData && $$.initWithData(convertedData);
-			$$.afterInit();
+			$$.convertData(config, res => {
+				$$.initWithData(res);
+				$$.afterInit();
+			});
 		}
 	}
 

src/ChartInternal/data/IData.ts

@@ -4,7 +4,7 @@
  */
 export interface IDataRow {
     x: number;
-    value: number;
+    value: number | null;
     id: string;
     index: number;
     name?: string;
@@ -22,7 +22,7 @@ export interface IArcData {
     padAngle: number;
     startAngle: number;
     endAngle: number;
-    value: number;
+    value: number | null;
 }
 
 export interface IGridData {