feat(shape.line): Make requested changes

- Update doc comments - Simplify `create` and `update` point methods - Update `expandCircles` and `unexpandCircles` methods
naver · Nov 6, 2017 · ecde327 · ecde327
1 parent 0dfb8f0
commit ecde327
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/src/config/Options.js b/src/config/Options.js
@@ -2060,12 +2060,18 @@ export default class Options {
 			 *      select: {
 			 *          r: 3
 			 *      },
+			 *
+			 *      // "circle", "rectangle" or "custom" for custom shapes
 			 *      type: "custom",
-			 *      create(element, cssClassFn, sizeFn, fillStyleFn) {
 			 *
+			 *      // to create a custom type, set create & update functions as well
+			 *      create(element, cssClassFn, sizeFn, fillStyleFn) {
+			 *          // should create node element to be used as data point and must return a d3.selection
+			 *          return element;
 			 *      },
 			 *      update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn, withTransition, flow, selectedCircles) {
-			 *
+			 *          // adjust the position & styles to the given element and must return a d3.selection
+			 *          return element;
 			 *      }
 			 *  }
 			 */

diff --git a/src/internals/shape.line.js b/src/internals/shape.line.js
@@ -435,14 +435,12 @@ extend(ChartInternal.prototype, {
 
 		$$.mainCircle.exit().remove();
 
-		let createFn;
+		let createFn = $$.circle.create;
 
 		if ($$.hasValidPointType()) {
 			createFn = $$[$$.config.point_type].create;
 		} else if ($$.hasValidPointDrawMethods()) {
 			createFn = $$.config.point_create;
-		} else {
-			createFn = $$.circle.create;
 		}
 
 		$$.mainCircle = createFn($$.mainCircle, $$.classCircle.bind($$), $$.pointR.bind($$), $$.color)
@@ -457,14 +455,12 @@ extend(ChartInternal.prototype, {
 			return [];
 		}
 
-		let updateFn;
+		let updateFn = this.circle.update;
 
 		if (this.hasValidPointType()) {
 			updateFn = this[this.config.point_type].update;
 		} else if (this.hasValidPointDrawMethods()) {
 			updateFn = this.config.point_update;
-		} else {
-			updateFn = this.circle.update;
 		}
 
 		const mainCircles = updateFn(
@@ -526,19 +522,25 @@ extend(ChartInternal.prototype, {
 			$$.unexpandCircles();
 		}
 
-		$$.getCircles(i, id)
-			.classed(CLASS.EXPANDED, true)
-			.attr("r", r);
+		const circles = $$.getCircles(i, id)
+			.classed(CLASS.EXPANDED, true);
+
+		if ($$.config.point_type === "circle") {
+			circles.attr("r", r);
+		}
 	},
 
 	unexpandCircles(i) {
 		const $$ = this;
 		const r = $$.pointR.bind($$);
 
-		$$.getCircles(i)
+		const circles = $$.getCircles(i)
 			.filter(function() { return d3Select(this).classed(CLASS.EXPANDED); })
-			.classed(CLASS.EXPANDED, false)
-			.attr("r", r);
+			.classed(CLASS.EXPANDED, false);
+
+		if ($$.config.point_type === "circle") {
+			circles.attr("r", r);
+		}
 	},
 
 	pointR(d) {

diff --git a/src/internals/shape.point.js b/src/internals/shape.point.js
@@ -5,11 +5,9 @@
 import ChartInternal from "./ChartInternal";
 import {isFunction, extend} from "./util";
 
-const POINT_TYPES = ["circle", "rectangle"];
-
 extend(ChartInternal.prototype, {
 	hasValidPointType() {
-		return POINT_TYPES.includes(this.config.point_type);
+		return /^(circle|rectangle)$/i.test(this.config.point_type);
 	},
 
 	hasValidPointDrawMethods() {