fix(gauge): fix to be consistent max label value

Max label text should reflect data value, regardless the max option value set. Fix #1759
naver · Nov 6, 2020 · 0c2006f · 0c2006f
1 parent d56ff52
commit 0c2006f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/src/ChartInternal/shape/arc.ts b/src/ChartInternal/shape/arc.ts
@@ -101,12 +101,6 @@ export default {
 		if (d.data && $$.isGaugeType(d.data) && !$$.hasMultiArcGauge()) {
 			// to prevent excluding total data sum during the init(when data.hide option is used), use $$.rendered state value
 			const totalSum = $$.getTotalDataSum(state.rendered);
-
-			// if gauge_max less than totalSum, make totalSum to max value
-			if (totalSum > config.gauge_max) {
-				config.gauge_max = totalSum;
-			}
-
 			const gEnd = radius * (totalSum / (config.gauge_max - config.gauge_min));
 
 			pie = pie
@@ -132,13 +126,6 @@ export default {
 		}
 
 		if (d.data && $$.hasMultiArcGauge()) {
-			const maxValue = $$.getMinMaxData().max[0].value;
-
-			// if gauge_max less than maxValue, make maxValue to max value
-			if (maxValue > config.gauge_max) {
-				config.gauge_max = maxValue;
-			}
-
 			const gMin = config.gauge_min;
 			const gMax = config.gauge_max;
 			const gTic = radius / (gMax - gMin);
@@ -525,7 +512,10 @@ export default {
 			})
 			.merge(mainArc);
 
-		$$.hasMultiArcGauge() && $$.redrawMultiArcGauge();
+		if ($$.hasType("gauge")) {
+			$$.updateGaugeMax();
+			$$.hasMultiArcGauge() && $$.redrawMultiArcGauge();
+		}
 
 		mainArc
 			.attr("transform", d => (!$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""))

diff --git a/src/ChartInternal/shape/gauge.ts b/src/ChartInternal/shape/gauge.ts
@@ -30,6 +30,21 @@ export default {
 		}
 	},
 
+	updateGaugeMax(): void {
+		const $$ = this;
+		const {config, state} = $$;
+		const hasMultiGauge = $$.hasMultiArcGauge();
+
+		// to prevent excluding total data sum during the init(when data.hide option is used), use $$.rendered state value
+		const max = hasMultiGauge ?
+			$$.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;
+		}
+	},
+
 	redrawMultiArcGauge(): void {
 		const $$ = this;
 		const {config, state, $el} = $$;
@@ -78,7 +93,6 @@ export default {
 			});
 	},
 
-
 	textForGaugeMinMax(value: number, isMax?: boolean): number | string {
 		const $$ = this;
 		const {config} = $$;

diff --git a/test/shape/gauge-spec.ts b/test/shape/gauge-spec.ts
@@ -566,12 +566,35 @@ describe("SHAPE GAUGE", () => {
                 size: {
                     height: 180
                 }
-                });
+			});
 
             const svgRect = chart.$.svg.node().getBoundingClientRect();
             const legendRect = chart.$.svg.select(".bb-legend").node().getBoundingClientRect();
 
             expect(legendRect.bottom).to.be.below(svgRect.bottom - 5);
         });
+	});
+
+	describe("Max text value", () => {
+        it("max ", () => {
+			const args = {
+                data: {
+					columns: [
+						["data", 500]
+					],
+					type: "gauge"
+				},
+				gauge: {
+					min: 0,
+					max: 100
+				}
+            };
+            const chart = util.generate(args);
+			const maxValue = +chart.$.main.select(`.${CLASS.chartArcsGaugeMax}`).text();
+
+			expect(args.gauge.max).to.be.below(maxValue);
+			expect(maxValue).to.be.equal(args.data.columns[0][1]);
+			expect(chart.config("gauge.max")).to.be.equal(maxValue);
+        });
     });
 });