feat(gauge): Intent to ship gauge.background

Implement gauge.background Fix #1804
naver · Dec 8, 2020 · 632c600 · 632c600
1 parent 2e561e7
commit 632c600
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 4 deletions.
diff --git a/config/webpack/development.js b/config/webpack/development.js
@@ -1,6 +1,6 @@
 const {merge, mergeWithCustomize, customizeObject} = require("webpack-merge");
 const WriteFilePlugin = require("write-file-webpack-plugin");
-const plugin = require("./plugin")();
+const plugin = require("./plugin")({});
 
 const config = {
 	devtool: "inline-source-map",

diff --git a/src/ChartInternal/shape/arc.ts b/src/ChartInternal/shape/arc.ts
@@ -742,6 +742,7 @@ export default {
 				backgroundArc.enter()
 					.append("path")
 					.attr("class", (d, i) => `${CLASS.chartArcsBackground} ${CLASS.chartArcsBackground}-${i}`)
+					.style("fill", (config.gauge_background) || null)
 					.merge(backgroundArc)
 					.attr("d", d1 => {
 						if (state.hiddenTargetIds.indexOf(d1.id) >= 0) {

diff --git a/src/ChartInternal/shape/gauge.ts b/src/ChartInternal/shape/gauge.ts
@@ -18,8 +18,11 @@ export default {
 		};
 
 		if ($$.hasType("gauge")) {
-			arcs.append($$.hasMultiArcGauge() ? "g" : "path")
-				.attr("class", CLASS.chartArcsBackground);
+			const hasMulti = $$.hasMultiArcGauge();
+
+			arcs.append(hasMulti ? "g" : "path")
+				.attr("class", CLASS.chartArcsBackground)
+				.style("fill", (!hasMulti && config.gauge_background) || null);
 
 			config.gauge_units && appendText(CLASS.chartArcsGaugeUnit);
 

diff --git a/src/config/Options/shape/gauge.ts b/src/config/Options/shape/gauge.ts
@@ -12,6 +12,7 @@ export default {
 	 * @memberof Options
 	 * @type {object}
 	 * @property {object} gauge Gauge object
+	 * @property {boolean} [gauge.background=""] Set background color. (The `.bb-chart-arcs-background` element)
 	 * @property {boolean} [gauge.fullCircle=false] Show full circle as donut. When set to 'true', the max label will not be showed due to start and end points are same location.
 	 * @property {boolean} [gauge.label.show=true] Show or hide label on gauge.
 	 * @property {Function} [gauge.label.format] Set formatter for the label on gauge. Label text can be multilined with `\n` character.
@@ -33,6 +34,7 @@ export default {
 	 * @property {string} [gauge.arcs.minWidth=5] Set minimal width of gauge arcs until the innerRadius disappears.
 	 * @example
 	 *  gauge: {
+	 *      background: "#eee", // will set 'fill' css prop for '.bb-chart-arcs-background' classed element.
 	 *      fullCircle: false,
 	 *      label: {
 	 *          show: false,
@@ -74,6 +76,7 @@ export default {
 	 *      }
 	 *  }
 	 */
+	gauge_background: "",
 	gauge_fullCircle: false,
 	gauge_label_show: true,
 	gauge_label_format: <(() => string)|undefined> undefined,

diff --git a/test/shape/gauge-spec.ts b/test/shape/gauge-spec.ts
@@ -23,7 +23,8 @@ describe("SHAPE GAUGE", () => {
 				gauge: {
 					width: 10,
 					max: 10,
-					expand: true
+					expand: true,
+					background: "red"
 				},
 				data: {
 					columns: [
@@ -38,6 +39,11 @@ describe("SHAPE GAUGE", () => {
 					.select(`${selector.shapes}-data`)
 					.select(`${selector.shape}-data`);
 
+			// check guage's background color
+			expect(
+				chart.$.arc.select(`path.${CLASS.chartArcsBackground}`).style("fill")
+			).to.be.equal(chart.internal.config.gauge_background);
+
 			setTimeout(() => {
 				expect(data.attr("d"))
 					.to.be.equal("M-304,-3.7229262694079536e-14A304,304,0,0,1,245.94116628998404,-178.68671669691184L237.85099634623455,-172.8088641739871A294,294,0,0,0,-294,-3.6004615894932184e-14Z");
@@ -383,6 +389,7 @@ describe("SHAPE GAUGE", () => {
 				}
 			},
 			gauge: {
+				background: "",
 				type: "multi",
 				label: {
 					format: function(value) {
@@ -552,6 +559,20 @@ describe("SHAPE GAUGE", () => {
 				color && expect(this.style.fill).to.be.equal(color);
 			});
 		});
+
+		it("set options gauge.background='red'", () => {
+			args.gauge.background = "red";
+		});
+
+		it("check gauge's background color", () => {
+			const arc = chart.$.arc;
+			const backgroundColor = chart.internal.config.gauge_background;
+			const gaugeBackground = arc.selectAll(`path.${CLASS.chartArcsBackground}`);
+
+			gaugeBackground.each(function(d, i) {
+				expect(this.style.fill).to.be.equal(backgroundColor);
+			});
+		})
     });
 
     describe("Positioning", () => {

diff --git a/types/options.d.ts b/types/options.d.ts
@@ -537,6 +537,11 @@ export interface ChartOptions {
 	};
 
 	gauge?: {
+		/**
+		 * Set background color. (The `.bb-chart-arcs-background` element)
+		 */
+		background?: string;
+
 		/**
 		 * Whether this should be displayed
 		 * as a full circle instead of a