fix(gauge): Fix incorrect rendering when gauge.min is given

Fix calculating the gauge representation when gauge.min is given. Fix #2123
naver · Jun 9, 2021 · 31fc981 · 31fc981
1 parent e0b2fed
commit 31fc981
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/ChartInternal/shape/arc.ts b/src/ChartInternal/shape/arc.ts
@@ -147,9 +147,12 @@ export default {
 		const radius = config.gauge_fullCircle ? $$.getArcLength() : gStart * -2;
 
 		if (d.data && $$.isGaugeType(d.data) && !$$.hasMultiArcGauge()) {
+			const {gauge_min: min, gauge_max: max} = config;
+
 			// to prevent excluding total data sum during the init(when data.hide option is used), use $$.rendered state value
 			const totalSum = $$.getTotalDataSum(state.rendered);
-			const gEnd = radius * (totalSum / (config.gauge_max - config.gauge_min));
+			// https://github.com/naver/billboard.js/issues/2123
+			const gEnd = radius * ((totalSum - min) / (max - min));
 
 			pie = pie
 				.startAngle(gStart)

diff --git a/src/ChartInternal/shape/gauge.ts b/src/ChartInternal/shape/gauge.ts
@@ -43,8 +43,8 @@ export default {
 			$$.getMinMaxData().max[0].value : $$.getTotalDataSum(state.rendered);
 
 		// if gauge_max less than max, make max to max value
-		if (max > config.gauge_max) {
-			config.gauge_max = max;
+		if (max + config.gauge_min * (config.gauge_min > 0 ? -1 : 1) > config.gauge_max) {
+			config.gauge_max = max - config.gauge_min;
 		}
 	},
 

diff --git a/test/shape/gauge-spec.ts b/test/shape/gauge-spec.ts
@@ -108,6 +108,27 @@ describe("SHAPE GAUGE", () => {
 			}, 500);
 		});
 
+		it("should render correctly based when min value is specified", () => {
+			const chart = util.generate({
+				data: {
+					columns: [
+					  ["data", 50]
+					],
+					type: "gauge"
+				  },
+				  gauge: {
+					min: 40,
+					max: 60
+				  }
+			});
+
+			expect(chart.$.arc.select("path").attr("d"))
+				.to.be
+				.equal("M-304,-3.7229262694079536e-14A304,304,0,1,1,304,0L182.4,0A182.4,182.4,0,1,0,-182.4,-2.2337557616447722e-14Z");
+
+			expect(chart.$.text.texts.text()).to.be.equal("50.0%");
+		});
+
 		it("should show custom gauge labels", () => {
 			const chart = util.generate({
 				gauge: {
@@ -297,16 +318,16 @@ describe("SHAPE GAUGE", () => {
 					order: "desc"
 				},
 				gauge: {
-					min: 50,
-					max: 550,
+					min: 0,
+					max: 50,
 					title: "TitleText"
 				}
 			};
 			const chart = util.generate(args);
 
 			const expected = [
-				"M-93.941166289984,-289.1211809537267A304,304,0,0,1,1.8614631347039768e-14,-304L1.1168778808223861e-14,-182.4A182.4,182.4,0,0,0,-56.364699773990395,-173.47270857223603Z",
-				"M-304,-3.7229262694079536e-14A304,304,0,0,1,-93.941166289984,-289.1211809537267L-56.364699773990395,-173.47270857223603A182.4,182.4,0,0,0,-182.4,-2.2337557616447722e-14Z"
+				"M245.94116628998404,-178.68671669691184A304,304,0,0,1,304,0L182.4,0A182.4,182.4,0,0,0,147.5646997739904,-107.2120300181471Z",
+				"M-304,-3.7229262694079536e-14A304,304,0,0,1,245.94116628998404,-178.68671669691184L147.5646997739904,-107.2120300181471A182.4,182.4,0,0,0,-182.4,-2.2337557616447722e-14Z"
 			];
 
 			setTimeout(() => {