feat(bar): Intent to ship bar.front

- Implement bar.front option - Make eventRect element to stay at the top of shape elements Ref naver#2965
netil · Jun 16, 2023 · 80079bc · 80079bc
1 parent 9ce900d
commit 80079bc
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 18 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -4191,6 +4191,42 @@ d3.select(".chart_area")
 		]
 	},
 	BarChartOptions: {
+		BarFront: [
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 230, 180, 250, 270, 220],
+							["data2", 200, 190, 290, 140, 130]
+						],
+						types: {
+							data1: "bar",
+							data2: "area"
+						}
+					},
+					bar: {
+						front: true
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 230, 180, 250, 270, 220],
+							["data2", 200, 190, 290, 140, 130]
+						],
+						types: {
+							data1: "bar",
+							data2: "area"
+						}
+					},
+					bar: {
+						front: false
+					}
+				}
+			}
+		],
 		BarIndices: [
 			{
 				options: {

diff --git a/src/ChartInternal/ChartInternal.ts b/src/ChartInternal/ChartInternal.ts
@@ -479,6 +479,8 @@ export default class ChartInternal {
 
 		$$.callPluginHook("$init");
 
+		$$.initChartElements();
+
 		if (hasAxis) {
 			// Cover whole with rects for events
 			hasInteraction && $$.initEventRect?.();
@@ -490,8 +492,6 @@ export default class ChartInternal {
 			config.clipPath && $$.axis?.init();
 		}
 
-		$$.initChartElements();
-
 		// Set targets
 		$$.updateTargets($$.data.targets);
 
@@ -535,7 +535,13 @@ export default class ChartInternal {
 		const types: string[] = [];
 
 		if (hasAxis) {
-			["bar", "bubble", "candlestick", "line"].forEach(v => {
+			const shapes = ["bar", "bubble", "candlestick", "line"];
+
+			if ($$.config.bar_front) {
+				shapes.push(shapes.shift() as string);
+			}
+
+			shapes.forEach(v => {
 				const name = capitalize(v);
 
 				if ((v === "line" && $$.hasTypeOf(name)) || $$.hasType(v)) {

diff --git a/src/ChartInternal/shape/bar.ts b/src/ChartInternal/shape/bar.ts
@@ -14,9 +14,13 @@ export default {
 	initBar(): void {
 		const {$el, config, state: {clip}} = this;
 
-		$el.bar = $el.main.select(`.${$COMMON.chart}`)
-			// should positioned at the beginning of the shape node to not overlap others
-			.insert("g", ":first-child")
+		$el.bar = $el.main.select(`.${$COMMON.chart}`);
+
+		$el.bar = config.bar_front ?
+			$el.bar.append("g") :
+			$el.bar.insert("g", ":first-child");
+
+		$el.bar
 			.attr("class", $BAR.chartBars)
 			.call(this.setCssRule(false, `.${$BAR.chartBars}`, ["pointer-events:none"]));
 

diff --git a/src/config/Options/shape/bar.ts b/src/config/Options/shape/bar.ts
@@ -12,6 +12,7 @@ export default {
 	 * @memberof Options
 	 * @type {object}
 	 * @property {object} bar Bar object
+	 * @property {boolean} [bar.front=false] Set 'bar' to be positioned over(on the top) other shapes elements.
 	 * @property {number} [bar.indices.removeNull=false] Remove nullish data on bar indices positions.
 	 * @property {number} [bar.label.threshold=0] Set threshold ratio to show/hide labels.
 	 * @property {boolean|object} [bar.linearGradient=false] Set the linear gradient on bar.<br><br>
@@ -34,6 +35,7 @@ export default {
 	 * @property {number} [bar.width.dataname.ratio=0.6] Change the width of bar chart by ratio.
 	 * @property {number} [bar.width.dataname.max] The maximum width value for ratio.
 	 * @property {boolean} [bar.zerobased=true] Set if min or max value will be 0 on bar chart.
+	 * @see [Demo: bar front](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarFront)
 	 * @see [Demo: bar indices](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarIndices)
 	 * @see [Demo: bar overlap](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarOverlap)
 	 * @see [Demo: bar padding](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarPadding)
@@ -42,6 +44,9 @@ export default {
 	 * @see [Demo: bar width variant](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidthVariant)
 	 * @example
 	 *  bar: {
+	 *      // make bar shape to be positioned over the other shape elements
+	 *      front: true,
+	 *
 	 *      // remove nullish data on bar indices postions
 	 *      indices: {
 	 *          removeNull: true
@@ -112,11 +117,12 @@ export default {
 	 *      zerobased: false
 	 *  }
 	 */
+	bar_front: false,
+	bar_indices_removeNull: false,
 	bar_label_threshold: 0,
 	bar_linearGradient: <
 	boolean|{x?: number[]; y?: number[]; stops?: [number, string|Function|null, number]}
 	> false,
-	bar_indices_removeNull: false,
 	bar_overlap: false,
 	bar_padding: 0,
 	bar_radius: <number|{ratio: number}|undefined> undefined,

diff --git a/test/api/export-spec.ts b/test/api/export-spec.ts
@@ -204,16 +204,16 @@ describe("API export", () => {
 
 			// pattern for CI
 			[
-				"LK8KS5EACZAACZAACfiBAAWgB71YLAC11tnTH8uqY2dn5PWVkaY3jBC8wrz",
-				"XIn7akz9quVQcDAW9d9BgONwWgqycjBaCr3eMv47RG",
-				"REQAREQAREQAT+PxFHMN6p9sQ/AAAAAElFTkSuQmCC"
+				"daDPbWsKoO5XK5nbkCmMKBwZBTRYACMFXp",
+				"hnPiDAjDxKWaA0xDQof4fQ4NroPhVUwKwio0wx1wmw",
+				"wSmZI62cSue7pG2e4HFtdu18VLgwMyjYGeG3aP"
 			],
 
 			// pattern for CI: preserveFontStyle=true
 			[
-				"r4wAeAVAdoq6ZwHsMIkAfCT496nqdxwTl13tm6jUE08NuNg0KQQoAJOSacZZDQFeD9VQYhs",
-				"XnDi2tmGVc9BHg91EONfUjAbQIUgI7lpyUCsLQIaG6Aj32lv",
-				"DNnaQDLesyYucYI0ADaISgNoB06mChoAEvXggawdHYl5dz01LvS"
+				"YiAZcJUAC6nB361jECvOF1DD0HdpA",
+				"S6iAoAFtNmParEdAFM18H03Uf1P9ktbatrndeA",
+				"ZczoCtPNG8bDXXwJxMJ+4mpIHPBqrpwHz9sXAb"
 			]
 		];
 

diff --git a/test/shape/bar-spec.ts b/test/shape/bar-spec.ts
@@ -7,7 +7,7 @@
 import {expect} from "chai";
 import {select as d3Select} from "d3-selection";
 import util from "../assets/util";
-import {$AXIS, $BAR, $COMMON, $EVENT, $SHAPE} from "../../src/config/classes";
+import {$AXIS, $BAR, $COMMON, $EVENT, $LINE, $SHAPE} from "../../src/config/classes";
 
 describe("SHAPE BAR", () => {
 	let chart;
@@ -720,6 +720,32 @@ describe("SHAPE BAR", () => {
 				expect(this.style.opacity).to.be.equal("");
 			});
 		});
+
+		it("set options: bar.front=true", () => {
+			args = {
+				data: {
+					columns: [
+						["data1", 230, 180, 250, 270, 220],
+						["data2", 200, 190, 290, 140, 130]
+					],
+					types: {
+						data1: "bar",
+						data2: "area"
+					}
+				},
+				bar: {
+					front: true
+				}
+			};
+		});
+
+		it("check bar element position on DOM hierarchy.", () => {
+			const bars = chart.$.main.select(`.${$COMMON.chart} .${$BAR.chartBars}`).node();
+
+			// check the bar element position
+			expect(bars.previousSibling.classList.contains($LINE.chartLines)).to.be.true;
+			expect(bars.nextSibling.classList.contains($EVENT.eventRects)).to.be.true;
+		});
 	});
 
 	describe("bar indices", () => {

diff --git a/types/options.shape.d.ts b/types/options.shape.d.ts
@@ -122,11 +122,9 @@ export interface AreaOptions {
 
 export interface BarOptions {
 	/**
-	 * Set threshold ratio to show/hide labels.
+	 * Set 'bar' to be positioned over(on the top) other shapes elements.
 	 */
-	label?: {
-		threshold?: number;
-	};
+	front?: boolean;
 
 	/**
 	 * Remove nullish data on bar indices positions.
@@ -135,6 +133,13 @@ export interface BarOptions {
 		removeNull?: boolean;
 	};
 
+	/**
+	 * Set threshold ratio to show/hide labels.
+	 */
+	label?: {
+		threshold?: number;
+	};
+
 	/**
 	 * Set the linear gradient on bar.<br><br>
 	 * Or customize by giving below object value: