feat(axis): Intent to ship axis.x.forceAsSingle

Implement multiple xs interact as single x

Close #3764

demo/demo.js

@@ -1229,6 +1229,47 @@ var demos = {
 				}
 			}		
 		],
+		ForceAsSingle: [
+			{
+				description: "Force the x axis to interact as single rather than multiple x axes.",
+				options: {
+					data: {
+						columns: [
+							["data1", 300, 350, 300, 120, 220, 250],
+							["data2", 130, 100, 140, 200, 150, 50]
+						],
+						type: "scatter"
+					},
+					axis: {
+						x: {
+							forceAsSingle: true
+						}
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["x1", 1, 3, 6, 7, 9],
+							["x2", 2, 4, 6, 8, 10],
+							["data1", 300, 350, 300, 120, 220, 250],
+							["data2", 130, 100, 140, 200, 150, 50]
+						],
+						type: "line",
+						xs: {
+							data1: "x1",
+							data2: "x2"
+						}
+					},
+					axis: {
+						x: {
+							forceAsSingle: true
+						}
+					}
+				}
+			},
+		],
 		CategoryAxis: {
 			options: {
 				data: {

src/ChartInternal/data/data.ts

@@ -129,10 +129,17 @@ export default {
 		});
 	},
 
+	/**
+	 * Determine if x axis is multiple
+	 * @returns {boolean} true: multiple, false: single
+	 * @private
+	 */
 	isMultipleX(): boolean {
-		return notEmpty(this.config.data_xs) ||
+		return !this.config.axis_x_forceAsSingle && (
+			notEmpty(this.config.data_xs) ||
 			this.hasType("bubble") ||
-			this.hasType("scatter");
+			this.hasType("scatter")
+		);
 	},
 
 	addName(data) {

src/ChartInternal/internals/grid.ts

@@ -397,8 +397,9 @@ export default {
 
 		// Hide when bubble/scatter/stanford plot exists
 		if (
-			!config.tooltip_show || dataToShow.length === 0 || $$.hasType("bubble") ||
-			$$.hasArcType()
+			!config.tooltip_show || dataToShow.length === 0 || (
+				!config.axis_x_forceAsSingle && $$.hasType("bubble")
+			) || $$.hasArcType()
 		) {
 			return;
 		}

src/config/Options/axis/x.ts

@@ -34,6 +34,28 @@ export default {
 	 */
 	axis_x_show: true,
 
+	/**
+	 * Force the x axis to interact as single rather than multiple x axes.
+	 * - **NOTE:** The tooltip event will be triggered nearing each data points(for multiple xs) rather than x axis based(as single x does) in below condition:
+	 *   - for `bubble` & `scatter` type
+	 *   - when `data.xs` is set
+	 *   - when `tooltip.grouped=false` is set
+	 *     - `tooltip.grouped` options will take precedence over `axis.forceSingleX` option.
+	 * @name axis․x․forceAsSingle
+	 * @memberof Options
+	 * @type {boolean}
+	 * @default false
+	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.ForceAsSingle)
+	 * @example
+	 * axis: {
+	 *   x: {
+	 *      // will work as single x axis
+	 *      forceAsSingle: true
+	 *   } 
+	 * }
+	 */
+	axis_x_forceAsSingle: false,
+
 	/**
 	 * Set type of x axis.<br><br>
 	 * **Available Values:**
@@ -47,7 +69,6 @@ export default {
 	 *   - the x values specified by [`data.x`](#.data%25E2%2580%25A4x)(or by any equivalent option), must be exclusively-positive.
 	 *   - x axis min value should be >= 0.
 	 *   - for 'category' type, `data.xs` option isn't supported.
-	 *
 	 * @name axis․x․type
 	 * @memberof Options
 	 * @type {string}

test/internals/axis-x-spec.ts

@@ -19,7 +19,7 @@ describe("X AXIS", function() {
 		},
 		axis: {
 			x: {
-				inverted: true,
+				inverted: true
 			}
 		}
 	};
@@ -358,4 +358,87 @@ describe("X AXIS", function() {
 			});
 		});
 	});
+
+	describe("axis.x.forceAsSingle", () => {
+		before(() => {
+			args = {
+				data: {
+				  columns: [
+					  ["data1", 30, 350, 200, 380, 150]
+				  ],
+				  type: "scatter"
+				},
+				tooltip: {
+				  grouped: true
+				},
+				axis: {
+				  x: {
+					forceAsSingle: true
+				  }
+				}
+			};
+		});
+
+		function checkSingleX(ctx, x = 2) {
+			const {grid, tooltip} = ctx.$;
+
+			// when
+			ctx.tooltip.show({x});
+
+			expect(+tooltip.select("th").text()).to.be.equal(x);
+			expect(+grid.main.select("line.bb-xgrid-focus").attr("x1") > 0).to.be.ok;
+		}
+
+		it("scatter: should interact as single x", () => {
+			checkSingleX(chart);
+		});
+
+		it("set options: data.type='bubble'", () => {
+			args.data.type = "bubble";
+		});
+
+		it("bubble: should interact as single x", () => {
+			checkSingleX(chart);
+		});
+
+		it("set options: tooltop.grouped=false", () => {
+			args.tooltip.grouped = false;
+		});
+
+		it("shouldn't work as single x, when tooltip.grouped=false is set", () => {
+			chart.tooltip.show({x: 2});
+
+			expect(chart.$.tooltip.html()).to.be.empty;
+		});
+
+		it("set options: data.type='line'", () => {
+			args = {
+				data: {
+					columns: [
+						["x1", 1, 3, 5, 7, 9],
+						["x2", 2, 4, 6, 8, 10],
+						["data1", 30, 350, 200, 380, 150],
+						["data2", 130, 120, 330, 280, 230]
+					],
+					type: "line",
+					xs: {
+						data1: "x1",
+						data2: "x2"
+					}
+				},
+				tooltip: {
+					grouped: true
+				},
+				axis: {
+					x: {
+						forceAsSingle: true
+					}
+				}
+			};
+		});
+
+		it("line data.xs: should interact as single x", () => {
+			checkSingleX(chart, 5);
+		});
+	});
 });

types/axis.d.ts

@@ -50,6 +50,16 @@ export interface xAxisConfiguration extends AxisConfigurationBase {
 	 */
 	type?: "category" | "indexed" | "log" | "timeseries";
 
+	/**
+	 * Force the x axis to interact as single rather than multiple x axes.
+	 * - NOTE: The tooltip event will be triggered nearing each data points(for multiple xs) rather than x axis based(as single x does) in below condition:
+	 *   - for `bubble` & `scatter` type
+	 *   - when `data.xs` is set
+	 *   - when `tooltip.grouped=false` is set
+	 *     - `tooltip.grouped` options will take precedence over `axis.forceSingleX` option.
+	 */
+	forceAsSingle?: boolean;
+
 	/**
 	 * Set how to treat the timezone of x values.
 	 * If true, treat x value as localtime. If false, convert to UTC internally.