fix(candlestick): Fix rendering on rotated axis

Fix rendering with negative values on rotated axis Fix #3387
naver · Sep 5, 2023 · fe4c04b · fe4c04b
1 parent 4450634
commit fe4c04b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/src/ChartInternal/shape/candlestick.ts b/src/ChartInternal/shape/candlestick.ts
@@ -78,10 +78,6 @@ export default {
 		candlestickEnter.append("line");
 		candlestickEnter.append("path");
 
-		if (!$root.candlestick) {
-			$root.candlestick = {};
-		}
-
 		$root.candlestick = candlestick.merge(candlestickEnter)
 			.style("opacity", initialOpacity);
 	},
@@ -155,8 +151,6 @@ export default {
 	 */
 	generateGetCandlestickPoints(indices, isSub = false): (d, i) => number[][] {
 		const $$ = this;
-		const {config} = $$;
-
 		const axis = isSub ? $$.axis.subX : $$.axis.x;
 		const targetsNum = $$.getIndicesMax(indices) + 1;
 		const barW: IOffset = $$.getBarW("candlestick", axis, targetsNum);
@@ -190,13 +184,6 @@ export default {
 					low: y(value.low)
 				};
 
-				// fix posY not to overflow opposite quadrant
-				if (config.axis_rotated && (
-					(d.value > 0 && posY.start < y0) || (d.value < 0 && y0 < posY.start)
-				)) {
-					posY.start = y0;
-				}
-
 				posY.start -= (y0 - offset);
 
 				points = [

diff --git a/test/shape/candelstick-spec.ts b/test/shape/candelstick-spec.ts
@@ -8,6 +8,8 @@ import {expect} from "chai";
 import util from "../assets/util";
 import {isArray} from "../../src/module/util";
 import {$CANDLESTICK, $COMMON} from "../../src/config/classes";
+import { line } from "d3-shape";
+import { brushY } from "d3-brush";
 
 describe("SHAPE CANDLESTICK", () => {
 	let chart;
@@ -153,6 +155,49 @@ describe("SHAPE CANDLESTICK", () => {
 		});
 	});
 
+	describe("rotated axis", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1",
+							{open: 100, high: 140, low: -40, close: -20}
+						]
+					],
+					type: "candlestick",
+					labels: true
+				},
+				axis: {
+					rotated: true,
+					x: {
+						type: "category"
+					}
+				},
+				grid: {
+					y: {
+						show: true
+					}
+				}
+			};
+		});
+
+		it("should rendered correctly.", () => {
+			const {$el: {candlestick}, scale: {y}} = chart.internal;
+			const data = chart.data("data1")[0].values[0].value;
+
+			const line = candlestick.select("line");
+			const path = candlestick.select("path").attr("d");
+
+			// check line position
+			expect(+line.attr("x1")).to.be.equal(y(data.low));
+			expect(+line.attr("x2")).to.be.equal(y(data.high));
+
+			// check path position
+			expect(path.indexOf(y(data.close)) > -1).to.be.true;
+			expect(path.indexOf(y(data.open)) > -1).to.be.true;
+		});
+	});
+
 	describe("candlestick + combination", () => {
 		before(() => {
 			args = {