fix(gauge): Fix to not align background startingAngle from option

- Make background startingAngle to be independent from option. - Add missing gauge option definition Fix #1073
naver · Sep 11, 2019 · 862156f · 862156f
1 parent 8478dd9
commit 862156f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/spec/shape/shape.arc-spec.js b/spec/shape/shape.arc-spec.js
@@ -6,6 +6,7 @@
 import {selectAll as d3SelectAll} from "d3-selection";
 import CLASS from "../../src/config/classes";
 import util from "../assets/util";
+import {getBoundingRect} from "../../src/internals/util";
 
 describe("SHAPE ARC", () => {
 	const selector = {
@@ -456,6 +457,33 @@ describe("SHAPE ARC", () => {
 				done();
 			}, 100);
 		});
+
+		it("check for startingAngle option", () => {
+			const chart = util.generate({
+				data: {
+				  columns: [
+					  ["data", 50]
+					],
+				  type: "gauge"
+				},
+				gauge: {
+				  startingAngle: 0
+				}
+			});
+
+			const arc = chart.$.arc;
+
+			// gauge backgound shouldn't be aligned with the 'startingAngle' option
+			expect(
+				getBoundingRect(arc.select(`.${CLASS.chartArcsBackground}`).node()).width
+			).to.be.above(600);
+
+			expect(
+				arc.select(`.${CLASS.arc}-data`).datum().startAngle
+			).to.be.equal(
+				chart.config("gauge.startingAngle")
+			);
+		});
 	});
 
 	describe("check for interaction", () => {

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -3189,7 +3189,7 @@ export default class Options {
 			 * @property {Number} [gauge.expand.duration=50] Set the expand transition time in milliseconds.
 			 * @property {Number} [gauge.min=0] Set min value of the gauge.
 			 * @property {Number} [gauge.max=100] Set max value of the gauge.
-			 * @property {Number} [gauge.startingAngle=-1 * Math.PI / 2]
+			 * @property {Number} [gauge.startingAngle=-1 * Math.PI / 2] Set starting angle where data draws.
 			 * @property {String} [gauge.title=""] Set title of gauge chart. Use `\n` character to enter line break.
 			 * @property {String} [gauge.units] Set units of the gauge.
 			 * @property {Number} [gauge.width] Set width of gauge chart.

diff --git a/src/shape/arc.js b/src/shape/arc.js
@@ -630,16 +630,17 @@ extend(ChartInternal.prototype, {
 
 		if (hasGauge) {
 			const isFullCircle = config.gauge_fullCircle;
-			const endAngle = (isFullCircle ? -4 : -1) * config.gauge_startingAngle;
+			const startAngle = -1 * Math.PI / 2;
+			const endAngle = (isFullCircle ? -4 : -1) * startAngle;
 
 			isFullCircle && text.attr("dy", `${Math.round($$.radius / 14)}`);
 
 			$$.arcs.select(`.${CLASS.chartArcsBackground}`)
 				.attr("d", () => {
 					const d = {
 						data: [{value: config.gauge_max}],
-						startAngle: config.gauge_startingAngle,
-						endAngle: endAngle
+						startAngle,
+						endAngle
 					};
 
 					return $$.getArc(d, true, true);
@@ -651,7 +652,7 @@ extend(ChartInternal.prototype, {
 
 			if (config.gauge_label_show) {
 				$$.arcs.select(`.${CLASS.chartArcsGaugeMin}`)
-					.attr("dx", `${-1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / (config.gauge_fullCircle ? 1 : 2)))}px`)
+					.attr("dx", `${-1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / (isFullCircle ? 1 : 2)))}px`)
 					.attr("dy", "1.2em")
 					.text($$.textForGaugeMinMax(config.gauge_min, false));
 

diff --git a/types/options.d.ts b/types/options.d.ts
@@ -448,6 +448,13 @@ export interface ChartOptions {
 	};
 
 	gauge?: {
+		/**
+		 * Whether this should be displayed
+		 * as a full circle instead of a
+		 * half circle.
+		 */
+		fullCircle?: boolean;
+
 		label?: {
 			/**
 			 * Show or hide label on gauge.
@@ -458,12 +465,22 @@ export interface ChartOptions {
 			 * Set formatter for the label on gauge.
 			 */
 			format?(value: any, ratio: number): string;
+
+			/**
+			 * Set customized min/max label text.
+			 */
+			extents?(value: number, isMax: boolean): string | number;
 		};
 
 		/**
 		 * Enable or disable expanding gauge.
 		 */
-		expand?: boolean;
+		expand?: boolean | {
+			/**
+			 * Set the expand transition time in milliseconds.
+			 */
+			duration?: number
+		};
 
 		/**
 		 * Set min value of the gauge.
@@ -475,6 +492,11 @@ export interface ChartOptions {
 		 */
 		max?: number;
 
+		/**
+		 * Set starting angle where data draws.
+		 */
+		startingAngle?: number;
+
 		/**
 		 * Set title of gauge chart. Use `\n` character to enter line break.
 		 */
@@ -489,13 +511,6 @@ export interface ChartOptions {
 		 * Set width of gauge chart.
 		 */
 		width?: number;
-
-		/**
-		 * Whether this should be displayed
-		 * as a full circle instead of a
-		 * half circle.
-		 */
-		fullCircle?: boolean;
 	};
 
 	spline?: {