skip: merge #1323 and fix tests on internals/data-spec.ts

- Rename test/shape/shape.*.ts, removing 'shape.' prefix
- Fix data label text rendering for null data value

src/ChartInternal/internals/text.ts

@@ -120,11 +120,7 @@ export default {
 				// do not apply transition for newly added text elements
 				(withTransition && text.attr("x") ? text.transition(t) : text)
 					.attr("x", x.bind(this)(d, i))
-					.attr("y", d => {
-						const r = y.bind(this)(d, i);
-console.log(d.id, r);
-						return r;
-					})
+					.attr("y", d => y.bind(this)(d, i))
 					.style("fill", $$.updateTextColor.bind($$))
 					.style("fill-opacity", opacityForText);
 			})
@@ -333,8 +329,8 @@ console.log(d.id, r);
 
 			if (yPos < boxHeight) {
 				yPos = boxHeight;
-			} else if (yPos > this.height) {
-				yPos = this.height - 4;
+			} else if (yPos > state.height) {
+				yPos = state.height - 4;
 			}
 		}
 

src/ChartInternal/shape/line.ts

@@ -199,9 +199,7 @@ export default {
 		const yScale = $$.getYScaleById.bind($$);
 
 		return (d, i) => {
-			//if (d.value === null) debugger;
-
-			const y0 = yScale(d.id, isSub)(0);
+			const y0 = yScale.call($$, d.id)($$.getShapeYMin(d.id));
 			const offset = lineOffset(d, i) || y0; // offset is for stacked area chart
 			const posX = x(d);
 			let posY = y(d);
@@ -215,7 +213,7 @@ export default {
 
 			// 1 point that marks the line position
 			const point = [posX, posY - (y0 - offset)];
-console.log(point)
+
 			return [
 				point,
 				point, // from here and below, needed for compatibility
@@ -501,7 +499,7 @@ console.log(point)
 		const yScale = $$.getYScaleById.bind($$);
 
 		return function(d, i) {
-			const y0 = yScale(d.id, isSub)(0);
+			const y0 = yScale.call($$, d.id)($$.getShapeYMin(d.id));
 			const offset = areaOffset(d, i) || y0; // offset is for stacked area chart
 			const posX = x(d);
 			let posY = y(d);

src/ChartInternal/shape/shape.ts

@@ -215,8 +215,9 @@ export default {
 	 */
 	getShapeYMin(id: string): number {
 		const $$ = this;
+		const [yMin] = $$.scale[$$.axis.getId(id)].domain();
 
-		return (!$$.isGrouped(id) && $$.config[`axis_${$$.axis.getId(id)}_min`]) || 0;
+		return !$$.isGrouped(id) && yMin > 0 ? yMin : 0;
 	},
 
 	/**

test/internals/class-spec.ts

@@ -6,7 +6,7 @@
 import {expect} from "chai";
 import util from "../assets/util";
 
-describe.only("CLASS", function() {
+describe("CLASS", function() {
 	const chart = util.generate({
 		data: {
 			columns: [

test/internals/data-spec.ts

@@ -982,12 +982,7 @@ describe.only("DATA", () => {
 					const expectedXs = [6, 202, 397, 593];
 
 					chart.$.main.selectAll(`.${CLASS.texts}-data1 text`)
-						.each(function() {
-							console.log(this)
-						})
-
-					debugger;
-						//.each(checkXY(expectedXs, expectedYs, "", 2));
+						.each(checkXY(expectedXs, expectedYs, "", 2));
 				});
 			});
 

test/shape/shape-spec.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2017 ~ present NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ */
+/* eslint-disable */
+/* global describe, beforeEach, it, expect */
+import util from "../assets/util";
+
+describe("SHAPE", () => {
+	let chart;
+	let args;
+
+	beforeEach(() => {
+		chart = util.generate(args);
+	});
+
+	describe("shapes rendering", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+					  ["data1", 100, 200, 300, 400, 500],
+					  ["data2", -100, -200, -300, -400, -500]
+					],
+					types: {
+					  data1: "area-step",
+					  data2: "bar"
+					},
+					axes: {
+					  data1: "y",
+					  data2: "y2"
+					},
+					labels: {
+					  show: true
+					}
+				  },
+				  area: {
+					linearGradient: true
+				  },
+				  axis: {
+					y: {
+					  show: true,
+					  min: -1000,
+					  max: 1000
+					},
+					y2: {
+					  show: true,
+					  min: -1000,
+					  max: 1000
+					}
+				  },
+				  legend: {
+					show: false
+				  }
+			};
+		});
+
+		it("area/bars combination with positive and negative values", () => {
+			const expectedY = 228;
+
+			// check area
+			let rect = chart.$.line.areas.node().getBoundingClientRect();
+
+			expect(rect.y + rect.height).to.be.equal(expectedY);
+
+			// check area data label text position
+			chart.$.text.texts.filter(d => d.id === "data1").each(function() {
+				expect(this.getBoundingClientRect().y).to.be.below(expectedY);
+			});
+
+			// check bars
+			let height = 0;
+
+			chart.$.bar.bars.each(function() {
+				rect = this.getBoundingClientRect();
+
+				expect(rect.y).to.be.equal(expectedY);
+				expect(rect.height).to.be.above(height);
+
+				height = rect.height;
+			});
+
+			// check bars data label text position
+			chart.$.text.texts.filter(d => d.id === "data2").each(function() {
+				expect(this.getBoundingClientRect().y).to.be.above(expectedY);
+			});
+		});
+	});
+});