feat(area): Intent to ship area.front

- Implement area.front option
- Split area's test codes as separate file from line's test.

Fix #1543

src/ChartInternal/shape/area.ts

@@ -10,9 +10,10 @@ import {getRandom, isFunction} from "../../module/util";
 export default {
 	initArea(mainLine): void {
 		const $$ = this;
+		const {config} = $$;
 
 		mainLine
-			.insert("g", `.${CLASS.circles}`)
+			.insert("g", `.${CLASS[config.area_front ? "circles" : "lines"]}`)
 			.attr("class", $$.classAreas.bind($$));
 	},
 

src/config/Options/shape/area.ts

@@ -12,21 +12,25 @@ export default {
 	 * @memberof Options
 	 * @type {object}
 	 * @property {object} area Area object
-	 * @property {boolean} [area.zerobased=true] Set if min or max value will be 0 on area chart.
 	 * @property {boolean} [area.above=false] Set background area above the data chart line.
+	 * @property {boolean} [area.front=true] Set area node to be positioned over line node.
 	 * @property {boolean|object} [area.linearGradient=false] Set the linear gradient on area.<br><br>
 	 * Or customize by giving below object value:
 	 *  - x {Array}: `x1`, `x2` value
 	 *  - y {Array}: `y1`, `y2` value
 	 *  - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values.
+	 * @property {boolean} [area.zerobased=true] Set if min or max value will be 0 on area chart.
 	 * @see [MDN's &lt;linearGradient>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient), [&lt;stop>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop)
 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.AreaChart)
 	 * @see [Demo: above](https://naver.github.io/billboard.js/demo/#AreaChartOptions.Above)
 	 * @see [Demo: linearGradient](https://naver.github.io/billboard.js/demo/#AreaChartOptions.LinearGradient)
 	 * @example
 	 *  area: {
-	 *      zerobased: false,
 	 *      above: true,
+	 *      zerobased: false,
+	 *
+	 *      // <g class='bb-areas'> will be positioned behind the line <g class='bb-lines'> in stacking order
+	 *      front: false,
 	 *
 	 *      // will generate follwing linearGradient:
 	 *      // <linearGradient x1="0" x2="0" y1="0" y2="1">
@@ -53,9 +57,10 @@ export default {
 	 *      }
 	 *  }
 	 */
-	area_zerobased: true,
 	area_above: false,
+	area_front: true,
 	area_linearGradient: <
-			boolean|{x?: number[]; y?: number[]; stops?: [number, string|Function|null, number]}
-		> false
+	boolean|{x?: number[]; y?: number[]; stops?: [number, string|Function|null, number]}
+	> false,
+	area_zerobased: true
 };