fix(step): Fix rendering nullish data

Fix on converting data for step type where the issue caused by adding incorrect 'x' value to the head/tail for category axis type. Fix #1637
naver · Aug 26, 2020 · dbe7b9b · dbe7b9b
1 parent f12b847
commit dbe7b9b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 21 deletions.
diff --git a/src/ChartInternal/data/data.ts b/src/ChartInternal/data/data.ts
@@ -719,37 +719,33 @@ export default {
 	convertValuesToStep(values) {
 		const $$ = this;
 		const {axis, config} = $$;
-
-		const isRotated = config.axis_rotated;
 		const stepType = config.line_step_type;
 		const isCategorized = axis ? axis.isCategorized() : false;
 
 		const converted = isArray(values) ? values.concat() : [values];
 
-		if (!isRotated && !isCategorized) {
+		if (!(isCategorized || /step\-(after|before)/.test(stepType))) {
 			return values;
 		}
 
 		// insert & append cloning first/last value to be fully rendered covering on each gap sides
-		const id = converted[0].id;
-
-		// insert
-		let x = converted[0].x - 1;
-		let value = converted[0].value;
-
-		isCategorized && converted.unshift({x, value, id});
+		const head = converted[0];
+		const tail = converted[converted.length - 1];
+		const {id} = head;
+		let {x} = head;
 
-		stepType === "step-after" &&
-			converted.unshift({x: x - 1, value, id});
+		// insert head
+		converted.unshift({x: --x, value: head.value, id});
 
-		// append
-		x = converted.length - 1;
-		value = converted[x].value;
+		isCategorized && stepType === "step-after" &&
+			converted.unshift({x: --x, value: head.value, id});
 
-		isCategorized && converted.push({x, value, id});
+		// append tail
+		x = tail.x;
+		converted.push({x: ++x, value: tail.value, id});
 
-		stepType === "step-before" &&
-			converted.push({x: x + 1, value, id});
+		isCategorized && stepType === "step-before" &&
+			converted.push({x: ++x, value: tail.value, id});
 
 		return converted;
 	},

diff --git a/src/ChartInternal/shape/line.ts b/src/ChartInternal/shape/line.ts
@@ -155,6 +155,7 @@ export default {
 		return d => {
 			const y = yScale(d.id, isSub);
 			let values = lineConnectNull ? $$.filterRemoveNull(d.values) : d.values;
+
 			let x0 = 0;
 			let y0 = 0;
 			let path;

diff --git a/test/shape/area-spec.ts b/test/shape/area-spec.ts
@@ -271,10 +271,10 @@ describe("SHAPE AREA", () => {
 			args.line.step.type = "step-after";
 		});
 
-		it("check the correct path generation - step-before", () => {
+		it("check the correct path generation - step-after", () => {
 			checkPath({
-				line: "M64.36363636363636,-104L64.36363636363636,-33L64.36363636363636,-33L64.36363636363636,37L64.36363636363636,37L64.36363636363636,108L429.0909090909091,108L429.0909090909091,179L214.54545454545456,179L214.54545454545456,249L364.7272727272727,249L364.7272727272727,320L321.8181818181818,320L321.8181818181818,391L536.3636363636364,391L536.3636363636364,532L536.3636363636364,532",
-				area: "M64.36363636363636,-104L64.36363636363636,-33L64.36363636363636,-33L64.36363636363636,37L64.36363636363636,37L64.36363636363636,108L429.0909090909091,108L429.0909090909091,179L214.54545454545456,179L214.54545454545456,249L364.7272727272727,249L364.7272727272727,320L321.8181818181818,320L321.8181818181818,391L536.3636363636364,391L536.3636363636364,532L536.3636363636364,532L0,532L0,532L0,532L0,391L0,391L0,320L0,320L0,249L0,249L0,179L0,179L0,108L0,108L0,37L0,37L0,-33L0,-33Z"
+				line: "M64.36363636363636,-104L64.36363636363636,-33L64.36363636363636,-33L64.36363636363636,37L64.36363636363636,37L64.36363636363636,108L429.0909090909091,108L429.0909090909091,179L214.54545454545456,179L214.54545454545456,249L364.7272727272727,249L364.7272727272727,320L321.8181818181818,320L321.8181818181818,391L536.3636363636364,391L536.3636363636364,461L536.3636363636364,461",
+				area: "M64.36363636363636,-104L64.36363636363636,-33L64.36363636363636,-33L64.36363636363636,37L64.36363636363636,37L64.36363636363636,108L429.0909090909091,108L429.0909090909091,179L214.54545454545456,179L214.54545454545456,249L364.7272727272727,249L364.7272727272727,320L321.8181818181818,320L321.8181818181818,391L536.3636363636364,391L536.3636363636364,461L536.3636363636364,461L0,461L0,461L0,461L0,391L0,391L0,320L0,320L0,249L0,249L0,179L0,179L0,108L0,108L0,37L0,37L0,-33L0,-33Z"
 			});
 		});
 	});

diff --git a/test/shape/line-spec.ts b/test/shape/line-spec.ts
@@ -259,6 +259,41 @@ describe("SHAPE LINE", () => {
 		});
 	});
 
+	describe("step type: catetegory axis & line.ConnectNull", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "1", "2", "3", "4", "5", "6", "7"],
+						["column1", 1000, null, 1000, 1200, null, null, -1700],
+						["column2", 4000, null, 2000, 2200, null, 2400, -2400]
+					],
+					type: "step",
+				},
+				line: {
+					connectNull: true
+				},
+				axis: {
+					x: {
+						type: "category"
+					}
+				}
+			}
+		});
+
+		it("should be generated correctly", () => {
+			const path = {
+				column1: "M-42,202.43229166666669L0,202.43229166666669L0,202.43229166666669L126,202.43229166666669L126,202.43229166666669L252,202.43229166666669L252,191.36458333333331L420,191.36458333333331L420,351.8463541666667L588,351.8463541666667L588,351.8463541666667L630,351.8463541666667",
+				column2: "M-42,36.41666666666668L0,36.41666666666668L0,36.41666666666668L126,36.41666666666668L126,147.09375L252,147.09375L252,136.02604166666669L378,136.02604166666669L378,124.95833333333331L504,124.95833333333331L504,390.5833333333333L588,390.5833333333333L588,390.5833333333333L630,390.5833333333333"
+			}
+
+			chart.$.line.lines.each(function(d) {
+				expect(this.getAttribute("d")).to.be.equal(path[d.id]);
+			})
+		});
+	});
+
 	describe("line options", () => {
 		before(() => {
 			args = {