feat(point): Allow grouped custom point (#565)

Allow grouped child nodes as custom point Fix #562 Close #565
naver · Aug 28, 2018 · ee12f96 · ee12f96
1 parent f157f6a
commit ee12f96
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 16 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -1824,22 +1824,39 @@ d3.select(".chart_area")
 				}
 			}
 		},
+		CustomPointsGrouped: {
+			options: {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, -150, 250],
+						["data2", 50, 20, 10, 40, 15, 25]
+					]
+				},
+				point: {
+					pattern: [
+						"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10'></rect></g>"
+					]
+				}
+			}
+		},
 		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]
+						["data4", 150, 240, 300, 700, 300],
+						["data5", 280, 720, 160, 210, 115]
 					]
 				},
 				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>"
+						"<polygon points='2.5 0 0 5 5 5'></polygon>",
+						"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10'></rect></g>"
 					]
 				}
 			}

diff --git a/spec/shape/shape.point-spec.js b/spec/shape/shape.point-spec.js
@@ -10,12 +10,8 @@ import CLASS from "../../src/config/classes";
 describe("SHAPE POINT", () => {
 	let chart;
 	let args;
-	let skipEach = false;
 
-	beforeEach(function(){
-		if(skipEach){
-			return ;
-		}
+	beforeEach(() => {
 		chart = util.generate(args);
 	});
 
@@ -33,7 +29,7 @@ describe("SHAPE POINT", () => {
 		});
 
 		it("Should render svg circle elements", () => {
-			const target = chart.internal.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
+			const target = chart.$.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
 			const circlesEl = target.select(`.${CLASS.circles}-data1`).node();
 			const circles = circlesEl.getElementsByTagName("circle");
 
@@ -58,7 +54,7 @@ describe("SHAPE POINT", () => {
 		});
 
 		it("Should render svg rect elements", () => {
-			const target = chart.internal.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
+			const target = chart.$.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
 			const circlesEl = target.select(`.${CLASS.circles}-data1`).node();
 			const rects = circlesEl.getElementsByTagName("rect");
 
@@ -85,11 +81,26 @@ describe("SHAPE POINT", () => {
 		});
 
 		it("Should render svg \"use\" elements", () => {
-			const target = chart.internal.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
+			const target = chart.$.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
 			const circlesEl = target.select(`.${CLASS.circles}-data1`).node();
 			const polygons = circlesEl.getElementsByTagName("use");
 
 			expect(polygons.length).to.be.equal(6);
 		});
+
+		it("set options point.pattern", () => {
+			args.point.pattern = [
+				"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10'></rect></g>"
+			];
+		});
+
+		it("should be allowing to set groping nodes", () => {
+			const innerHTML = chart.config("point.pattern")[0]
+				.replace(/<\/?g>/g, "").replace(/'/g, '"');
+
+			chart.$.defs.selectAll("g").each(function() {
+				expect(this.innerHTML).to.be.equal(innerHTML);
+			});
+		});
 	});
 });
diff --git a/src/shape/point.js b/src/shape/point.js
@@ -7,7 +7,7 @@ import {
 	select as d3Select
 } from "d3-selection";
 import ChartInternal from "../internals/ChartInternal";
-import {isFunction, isObjectType, extend, notEmpty} from "../internals/util";
+import {isFunction, isObjectType, toArray, extend, notEmpty} from "../internals/util";
 
 extend(ChartInternal.prototype, {
 	hasValidPointType(type) {
@@ -29,16 +29,22 @@ extend(ChartInternal.prototype, {
 		const clone = document.createElementNS(d3Namespaces.svg, node.nodeName.toLowerCase());
 		const attribs = node.attributes;
 
-		for (let i = 0, l = attribs.length; i < l; i++) {
-			const name = attribs[i].name;
-
+		for (let i = 0, name; (name = attribs[i]); i++) {
+			name = name.name;
 			clone.setAttribute(name, node.getAttribute(name));
 		}
 
 		clone.id = id;
 		clone.style.fill = "inherit";
 		clone.style.stroke = "inherit";
 
+		// when has child nodes
+		if (node.children.length) {
+			clone.innerHTML = toArray(node.children)
+				.map(v => v.outerHTML)
+				.join("");
+		}
+
 		$$.defs.node().appendChild(clone);
 	},
 
@@ -102,8 +108,12 @@ extend(ChartInternal.prototype, {
 			withTransition, flow, selectedCircles) {
 			const $$ = this;
 			const box = element.node().getBBox();
-			const xPosFn2 = d => xPosFn(d) - (box.width * 0.5);
-			const yPosFn2 = d => yPosFn(d) - (box.height * 0.5);
+
+			box.width /= 2;
+			box.height /= 2;
+
+			const xPosFn2 = d => xPosFn(d) - box.width;
+			const yPosFn2 = d => yPosFn(d) - box.height;
 			let mainCircles = element;
 
 			if (withTransition) {