feat(point): Implement alternate markers

Julien Castelain · netil · commit 8f1b56f1bd29 · 2017-12-15T12:59:08.000+09:00
Implementation to allow use a customized data points Fix #209 Close #219
diff --git a/demo/demo.js b/demo/demo.js
@@ -1606,79 +1606,59 @@ var demos = {
 					]
 				},
 				point: {
-					type: {
-						create: function(element, cssClassFn, sizeFn, fillStyleFn) {
-							return element.enter().append("polygon")
-								.attr("class", cssClassFn)
-								.style("fill", fillStyleFn);
-						},
-						update: function(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn,
-						                 withTransition, flow, selectedCircles) {
-							var size = this.pointR(element) * 3.0;
-							var halfSize = size * 0.5;
-
-							function getPoints(d) {
-								var x1 = xPosFn(d);
-								var y1 = yPosFn(d) - halfSize;
-								var x2 = x1 - halfSize;
-								var y2 = y1 + size;
-								var x3 = x1 + halfSize;
-								var y3 = y2;
-
-								return [x1, y1, x2, y2, x3, y3].join(" ");
-							}
-
-							return element
-								.attr("points", getPoints)
-								.style("opacity", opacityStyleFn)
-								.style("fill", fillStyleFn);
-						}
-					}
+					pattern: [
+						"<polygon points='2.5 0 0 5 5 5'></polygon>"
+					]
 				}
 			}
 		},
-		CustomPointsDiamond: {
+		CustomPointsDiamonds: {
 			options: {
 				data: {
 					columns: [
-						['data1', 100, 200, 1000, 900, 500],
+						['data1', 100, 400, 1000, 900, 500],
 						['data2', 20, 40, 500, 300, 200]
 					]
 				},
 				point: {
-					type: {
-						create: function(element, cssClassFn, sizeFn, fillStyle) {
-							// create custom an element node
-							return element.enter().append("polygon")
-								.attr("class", cssClassFn)
-								.style("fill", fillStyle);
-						},
-
-						update: function(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn,
-						                 withTransition, flow, selectedCircles) {
-							var size = this.pointR(element) * 3.0;
-							var halfSize = size * 0.5;
-
-							function getPoints(d) {
-								var x1 = xPosFn(d);
-								var y1 = yPosFn(d) - halfSize;
-								var x2 = x1 - halfSize;
-								var y2 = y1 + halfSize;
-								var x3 = x1;
-								var y3 = y2 + halfSize;
-								var x4 = x1 + halfSize;
-								var y4 = y2;
-
-								return [x1, y1, x2, y2, x3, y3, x4, y4].join(" ");
-							}
-
-							// style the custom element added
-							return element
-								.attr("points", getPoints)
-								.style("opacity", opacityStyleFn)
-								.style("fill", fillStyleFn);
-						}
-					}
+					pattern: [
+						"<polygon points='2.5 0 0 2.5 2.5 5 5 2.5 2.5 0'></polygon>"
+					]
+				}
+			}
+		},
+		CustomPointsHearts: {
+			options: {
+				data: {
+					columns: [
+						['data1', 100, 400, 1000, 900, 500],
+						['data2', 20, 40, 500, 300, 200]
+					]
+				},
+				point: {
+					pattern: [
+						"<path d='m3.937502,2.348755c1.314192,-3.618047 6.463238,0 0,4.651779c-6.463238,-4.651779 -1.314192,-8.269826 0,-4.651779z' />"
+					]
+				}
+			}
+		},
+		CombinationPoints: {
+			options: {
+				data: {
+					columns: [
+						['data1', 100, 400, 1000, 900, 500],
+						['data2', 20, 40, 500, 300, 200],
+						['data3', 80, 350, 800, 450, 500],
+						['data4', 150, 240, 300, 700, 300]
+					]
+				},
+				point: {
+					pattern: [
+						"circle",
+						"rectangle",
+						"<polygon points='2.5 0 0 2.5 2.5 5 5 2.5 2.5 0'></polygon>",
+						"<polygon points='2.5 0 0 5 5 5'></polygon>"
+					]
 				}
 			}
 		}
diff --git a/spec/interaction-spec.js b/spec/interaction-spec.js
@@ -163,7 +163,7 @@ describe("INTERACTION", () => {
 			});
 
 			it("set option point.type='rectangle'", () => {
-				args.point.type = "rectangle";
+				args.point.pattern = ["rectangle"];
 				clicked = false;
 				data = null;
 			});
@@ -183,34 +183,9 @@ describe("INTERACTION", () => {
 			});
 
 			it("set option point.type=polygon(custom triangle)", () => {
-				args.point.type = {
-					create: function(element, cssClassFn, sizeFn, fillStyleFn) {
-						return element.enter().append("polygon")
-							.attr("class", cssClassFn)
-							.style("fill", fillStyleFn);
-					},
-					update: function(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn,
-					                 withTransition, flow, selectedCircles) {
-						var size = this.pointR(element) * 3.0;
-						var halfSize = size * 0.5;
-
-						function getPoints(d) {
-							var x1 = xPosFn(d);
-							var y1 = yPosFn(d) - halfSize;
-							var x2 = x1 - halfSize;
-							var y2 = y1 + size;
-							var x3 = x1 + halfSize;
-							var y3 = y2;
-
-							return [x1, y1, x2, y2, x3, y3].join(" ");
-						}
-
-						return element
-							.attr("points", getPoints)
-							.style("opacity", opacityStyleFn)
-							.style("fill", fillStyleFn);
-					}
-				};
+				args.point.pattern = 	[
+					"<polygon points='5 2.5 2.5 5 7.5 5'></polygon>"
+				];
 
 				clicked = false;
 				data = null;
@@ -219,20 +194,20 @@ describe("INTERACTION", () => {
 			it("check for data click for polygon data point", () => {
 				const main = chart.internal.main;
 				const rect = main.select(`.${CLASS.eventRect}.${CLASS.eventRect}`).node();
-				const circle = main.select(`.${CLASS.circles}-data2 polygon`).node().getBBox();
+				const circle = main.select(`.${CLASS.circles}-data2 use`).node().getBBox();
 
 				util.fireEvent(rect, "click", {
 					clientX: circle.x,
 					clientY: circle.y
 				}, chart);
 
-				expect(clicked).to.be.true;
-				expect(data.value).to.be.equal(20);
+				expect(clicked).to.be.false;
+				expect(data).to.be.equal(null);
 			});
 
 			it("set option data.type='area'", () => {
 				args.data.type = "area";
-				args.point.type = "circle";
+				args.point.pattern = ["circle"];
 
 				clicked = false;
 				data = null;
diff --git a/spec/shape.point-spec.js b/spec/shape.point-spec.js
@@ -51,7 +51,7 @@ describe("SHAPE POINT", () => {
 					]
 				},
 				point: {
-					type: "rectangle"
+					pattern: ["rectangle"]
 				}
 			};
 		});
@@ -76,46 +76,17 @@ describe("SHAPE POINT", () => {
 					]
 				},
 				point: {
-					type: {
-						create(element, cssClassFn, sizeFn, fillStyle) {
-							return element.enter().append("polygon")
-								.attr("class", cssClassFn)
-								.style("fill", fillStyle);
-						},
-
-						update(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn,
-									withTransition, flow, selectedCircles) {
-							let mainCircles;
-							const triangleSize = 10;
-
-							function getPoints(d) {
-								const x1 = xPosFn(d);
-								const y1 = yPosFn(d) - (triangleSize * 0.5);
-								const x2 = x1 - (triangleSize * 0.5);
-								const y2 = y1 + (triangleSize * 0.5);
-								const x3 = x1;
-								const y3 = y2 + (triangleSize * 0.5);
-								const x4 = x1 + (triangleSize * 0.5);
-								const y4 = y2;
-								return `${x1} ${y1} ${x2} ${y2} ${x3} ${y3} ${x4} ${y4}`;
-							}
-
-							mainCircles = element
-								.attr("points", getPoints)
-								.style("opacity", opacityStyleFn)
-								.style("fill", fillStyleFn);
-
-							return mainCircles;
-						}
-					}
+					pattern: [
+						"<polygon points='5 2.5 2.5 5 7.5 5'></polygon>"
+					]
 				}
 			};
 		});
 
-		it("Should render svg polygon elements", () => {
+		it("Should render svg \"use\" elements", () => {
 			const target = chart.internal.svg.select(".bb-chart-line.bb-target-data1");
 			const circlesEl = target.select(".bb-circles-data1").node();
-			const polygons = circlesEl.getElementsByTagName("polygon");
+			const polygons = circlesEl.getElementsByTagName("use");
 
 			expect(polygons.length).to.be.equal(6);
 		});
diff --git a/src/api/api.flow.js b/src/api/api.flow.js
@@ -406,7 +406,9 @@ extend(ChartInternal.prototype, {
 
 					mainCircle
 						.attr("x", xFunc)
-						.attr("y", yFunc);
+						.attr("y", yFunc)
+						.attr("cx", cx) // when pattern is used, it possibly contain 'circle' also.
+						.attr("cy", cy);
 				}
 
 				mainText
diff --git a/src/config/Options.js b/src/config/Options.js
@@ -2087,14 +2087,23 @@ export default class Options {
 			 * @property {Boolean} [point.focus.expand.r=point.r*1.75] The radius size of each point on focus.<br>
 			 *  - **Note:** For 'bubble' type, the default is `bubbleSize*1.15`
 			 * @property {Number} [point.select.r=point.r*4] The radius size of each point on selected.
-			 * @property {String|Object} [point.type="circle"] The type of point to be drawn<br>
-			 * - **Note:** If chart has 'bubble' type, only circle can be used.<br>
+			 * @property {String} [point.type="circle"] The type of point to be drawn<br>
+			 * - **Note:**
+			 *  - If chart has 'bubble' type, only circle can be used.
+			 *  - For IE, non circle point expansions are not supported due to lack of transform support.
 			 * - **Available Values:**
 			 *  - circle
 			 *  - rectangle
-			 *
-			 * @property {Function} [point.type.create] If specified will be invoked to create data points, this function must return a d3 selection.
-			 * @property {Function} [point.type.update] If specified will be invoked to update data points, this function must return a d3 selection.
+			 * @property {Array} [point.pattern=[]] The type of point or svg shape as string, to be drawn for each line<br>
+ 			 * - **Note:**
+			 *  - This is an `experimental` feature and can have some unexpected behaviors.
+			 *  - If chart has 'bubble' type, only circle can be used.
+			 *  - For IE, non circle point expansions are not supported due to lack of transform support.
+			 * - **Available Values:**
+			 *  - circle
+ 			 *  - rectangle
+			 *  - svg shape tag interpreted as string<br>
+			 *    (ex. `<polygon points='2.5 0 0 5 5 5'></polygon>`)
 			 * @example
 			 *  point: {
 			 *      show: false,
@@ -2116,29 +2125,23 @@ export default class Options {
 			 *          r: 3
 			 *      },
 			 *
+			 *      // valid values are "circle" or "rectangle"
 			 *      type: "rectangle",
 			 *
-			 *      // or for custom shapes you can use an object with a "create" and "update" functions
-			 *      type: {
-			 *          // to create a custom type, set create & update functions as well
-			 *          create: function(element, cssClassFn, sizeFn, fillStyleFn) {
-			 *              // should create node element to be used as data point and must return a d3.selection
-			 *              ...
-			 *              return element;
-			 *          },
-			 *          update: function(element, xPosFn, yPosFn, opacityStyleFn, fillStyleFn, withTransition, flow, selectedCircles) {
-			 *              // adjust the position & styles to the given element and must return a d3.selection
-			 *              ...
-			 *              return element;
-			 *          }
-			 *      }
+			 *      // or indicate as pattern
+ 			 *      pattern: [
+ 			 *        "circle",
+ 			 *        "rectangle",
+ 			 *        "<polygon points='0 6 4 0 -4 0'></polygon>"
+ 			 *     ],
 			 *  }
 			 */
 			point_show: true,
 			point_r: 2.5,
 			point_sensitivity: 10,
 			point_focus_expand_enabled: true,
 			point_focus_expand_r: undefined,
+			point_pattern: [],
 			point_select_r: undefined,
 			point_type: "circle",
 
diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js
@@ -82,7 +82,8 @@ export default class ChartInternal {
 		const config = $$.config;
 
 		// MEMO: clipId needs to be unique because it conflicts when multiple charts exist
-		$$.clipId = `bb-${+new Date()}-clip`;
+		$$.datetimeId = `bb-${+new Date()}`;
+		$$.clipId = `${$$.datetimeId}-clip`;
 		$$.clipIdForXAxis = `${$$.clipId}-xaxis`;
 		$$.clipIdForYAxis = `${$$.clipId}-yaxis`;
 		$$.clipIdForGrid = `${$$.clipId}-grid`;
@@ -101,6 +102,7 @@ export default class ChartInternal {
 
 		$$.color = $$.generateColor();
 		$$.levelColor = $$.generateLevelColor();
+		$$.point = $$.generatePoint();
 
 		$$.extraLineClasses = $$.generateExtraLineClass();
 
@@ -257,17 +259,17 @@ export default class ChartInternal {
 			$$.svg.attr("class", config.svg_classname);
 
 		// Define defs
-		const defs = $$.svg.append("defs");
+		$$.defs = $$.svg.append("defs");
 
-		$$.clipChart = $$.appendClip(defs, $$.clipId);
-		$$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis);
-		$$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis);
-		$$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid);
-		$$.clipSubchart = $$.appendClip(defs, $$.clipIdForSubchart);
+		$$.clipChart = $$.appendClip($$.defs, $$.clipId);
+		$$.clipXAxis = $$.appendClip($$.defs, $$.clipIdForXAxis);
+		$$.clipYAxis = $$.appendClip($$.defs, $$.clipIdForYAxis);
+		$$.clipGrid = $$.appendClip($$.defs, $$.clipIdForGrid);
+		$$.clipSubchart = $$.appendClip($$.defs, $$.clipIdForSubchart);
 
 		// set color patterns
 		if (isFunction(config.color_tiles) && $$.patterns) {
-			$$.patterns.forEach(p => defs.append(() => p.node));
+			$$.patterns.forEach(p => $$.defs.append(() => p.node));
 		}
 
 		$$.updateSvgSize();
diff --git a/src/internals/type.js b/src/internals/type.js
@@ -112,7 +112,11 @@ extend(ChartInternal.prototype, {
 
 	// determine if is 'circle' data point
 	isCirclePoint() {
-		return this.config.point_type === "circle";
+		const config = this.config;
+		const pattern = config.point_pattern;
+
+		return config.point_type === "circle" &&
+			(!pattern || (isArray(pattern) && pattern.length === 0));
 	},
 
 	lineData(d) {
diff --git a/src/internals/util.js b/src/internals/util.js
diff --git a/src/shape/line.js b/src/shape/line.js
diff --git a/src/shape/point.js b/src/shape/point.js

Original file line number	Diff line number	Diff line change
`@@ -406,7 +406,9 @@ extend(ChartInternal.prototype, {`
`406`	`406`
`407`	`407`	`mainCircle`
`408`	`408`	`.attr("x", xFunc)`
`409`		`- .attr("y", yFunc);`
	`409`	`+ .attr("y", yFunc)`
	`410`	`+ .attr("cx", cx) // when pattern is used, it possibly contain 'circle' also.`
	`411`	`+ .attr("cy", cy);`
`410`	`412`	`}`
`411`	`413`
`412`	`414`	`mainText`