feat(point): Intent to ship point.opacity

Implement point.opacity option

Fix #1867

src/ChartInternal/shape/point.ts

@@ -26,20 +26,31 @@ export default {
 			isFunction(pointType.create) && isFunction(pointType.update);
 	},
 
-	initialOpacityForCircle(d): "1" | "0" {
-		const {withoutFadeIn} = this.state;
+	initialOpacityForCircle(d): string | number | null {
+		const {config, state: {withoutFadeIn}} = this;
+		let opacity = config.point_opacity;
 
-		return this.getBaseValue(d) !== null &&
-			withoutFadeIn[d.id] ? this.opacityForCircle(d) : "0";
+		if (isUndefined(opacity)) {
+			opacity = this.getBaseValue(d) !== null &&
+				withoutFadeIn[d.id] ? this.opacityForCircle(d) : "0";
+		}
+
+		return opacity;
 	},
 
-	opacityForCircle(d): "0.5" | "1" | "0" {
+	opacityForCircle(d): string | number | null {
 		const {config} = this;
-		const opacity = config.point_show && !config.point_focus_only ? "1" : "0";
+		let opacity = config.point_opacity;
+
+		if (isUndefined(opacity)) {
+			opacity = config.point_show && !config.point_focus_only ? "1" : "0";
+
+			opacity = isValue(this.getBaseValue(d)) ?
+				(this.isBubbleType(d) || this.isScatterType(d) ?
+					"0.5" : opacity) : "0";
+		}
 
-		return isValue(this.getBaseValue(d)) ?
-			(this.isBubbleType(d) || this.isScatterType(d) ?
-				"0.5" : opacity) : "0";
+		return opacity;
 	},
 
 	initCircle(): void {

src/config/Options/common/point.ts

@@ -19,6 +19,10 @@ export default {
 	 * @property {number} [point.focus.expand.r=point.r*1.75] The radius size of each point on focus.
 	 *  - **NOTE:** For 'bubble' type, the default is `bubbleSize*1.15`
 	 * @property {boolean} [point.focus.only=false] Show point only when is focused.
+	 * @property {number|null} [point.opacity=undefined] Set point opacity value.
+	 * - **NOTE:**
+	 *	- `null` will make to not set inline 'opacity' css prop.
+	 *	- when no value(or undefined) is set, it defaults to set opacity value according its chart types.
 	 * @property {number} [point.sensitivity=10] The senstivity value for interaction boundary.
 	 * @property {number} [point.select.r=point.r*4] The radius size of each point on selected.
 	 * @property {string} [point.type="circle"] The type of point to be drawn
@@ -58,6 +62,13 @@ export default {
 	 *          },
 	 *          only: true
 	 *      },
+	 *
+	 *      // do not set inline 'opacity' css prop setting
+	 *      opacity: null,
+	 *
+	 *      // set every data point's opacity value
+	 *      opacity: 0.7,
+	 *
 	 *      select: {
 	 *          r: 3
 	 *      },
@@ -82,6 +93,7 @@ export default {
 	point_focus_expand_enabled: true,
 	point_focus_expand_r: <number|undefined> undefined,
 	point_focus_only: false,
+	point_opacity: <number|null|undefined> undefined,
 	point_pattern: <string[]> [],
 	point_select_r: <number|undefined> undefined,
 	point_type: "circle"

test/shape/point-spec.ts

@@ -359,4 +359,42 @@ describe("SHAPE POINT", () => {
 			});
 		});
 	});
+
+	describe("point.opacity", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 300, 350, 300],
+						["data2", 130, 100, 140],
+						["data3", 200, 150, 50]
+					],
+					types: {
+					  data1: "bubble",
+					  data2: "scatter",
+					  data3: "line"
+					}
+				  },
+				  point: {
+					  opacity: null
+				  }
+			};
+		});
+
+		it("inline opacity css prop shouldn't be set", () => {
+			chart.$.circles.each(function() {
+				expect(this.style.cssText.indexOf("opacity")).to.be.equal(-1);
+			});
+		});
+
+		it("set option point.opacity=0.75", () => {
+			args.point.opacity = 0.75;
+		});
+
+		it("check for point opacity value", () => {
+			chart.$.circles.each(function() {
+				expect(+this.style.opacity).to.be.equal(args.point.opacity);
+			});
+		});
+	});
 });

types/options.d.ts

@@ -1176,6 +1176,11 @@ export interface PointOptions {
 		only?: boolean;
 	};
 
+	/**
+	 * Set point opacity value.
+	 */
+	opacity?: number | null;
+
 	select?: {
 		/**
 		 * The radius size of each point on selected.