feat(line): Ability to hide points for linecharts only

Adds a config option to not draw points on linecharts without affecting other chart types. Fix #520 Close #521
naver · Aug 6, 2018 · 3d217cc · 3d217cc
1 parent b2848c2
commit 3d217cc
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 4 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -2413,6 +2413,24 @@ d3.select(".chart_area")
 					show: false
 				}
 			}
+		},
+		LinePoint: {
+			options: {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 50, 20, 10, 40, 15, 25],
+						["data3", 170, 250, 210, 190, 175, 225],
+						["data4", 283, 170, 275, 143, 220, 255]
+					],
+					types: {
+						data2: "scatter"
+					}
+				},
+				line: {
+					point: ["data1", "data3"]
+				}
+			}
 		}
 	},
 	PieChartOptions: {

diff --git a/spec/internals/data-spec.js b/spec/internals/data-spec.js
@@ -1287,6 +1287,72 @@ describe("DATA", () => {
 				expect(texts.size()).to.be.equal(data.length);
 			});
 		});
+
+		describe("on scatter + line type", () => {
+			before(() => {
+				args = {
+					data: {
+						columns: [
+							["data1", 30, 200, 100, 500],
+							["data2", 10, 100, 200, 400]
+						],
+						types: {
+							data1: "scatter",
+							data2: "line"
+						}
+					},
+					line: {
+						point: false
+					}
+				}
+			});
+
+			it("should draw points for the scatterplot", () => {
+				const id = "data1";
+				const data = chart.data.values(id);
+				const points = chart.internal.main.selectAll(`.${CLASS.shapes}-${id} circle`);
+
+				expect(points.size()).to.be.equal(data.length);
+			});
+
+			it("should not draw points for the linechart", () => {
+				const id = "data2";
+				const points = chart.internal.main.selectAll(`.${CLASS.shapes}-${id} circle`);
+
+				expect(points.size()).to.be.equal(0);
+			});
+		});
+
+		describe("on line with array points option", () => {
+			before(() => {
+				args = {
+					data: {
+						columns: [
+							["data1", 30, 200, 100, 500],
+							["data2", 10, 100, 200, 400]
+						]
+					},
+					line: {
+						point: ["data1"]
+					}
+				}
+			});
+
+			it("should draw points for the first line", () => {
+				const id = "data1";
+				const data = chart.data.values(id);
+				const points = chart.internal.main.selectAll(`.${CLASS.shapes}-${id} circle`);
+
+				expect(points.size()).to.be.equal(data.length);
+			});
+
+			it("should not draw points for the second line", () => {
+				const id = "data2";
+				const points = chart.internal.main.selectAll(`.${CLASS.shapes}-${id} circle`);
+
+				expect(points.size()).to.be.equal(0);
+			});
+		});
 	});
 
 	describe("inner functions", () => {

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -2365,6 +2365,7 @@ export default class Options {
 			 * - step
 			 * - step-before
 			 * - step-after
+			 * @property {Boolean|Array} [line.point=true] Set to false to not draw points on linecharts. Or pass an array of line ids to draw points for.
 			 * @example
 			 *  line: {
 			 *      connectNull: true,
@@ -2374,12 +2375,21 @@ export default class Options {
 			 *      ],
 			 *      step: {
 			 *          type: "step-after"
-			 *      }
+			 *      },
+			 *
+			 *      // hide all data points ('point.show=false' also has similar effect)
+			 *      point: false,
+			 *
+			 *      // show data points for only indicated datas
+			 *      point: [
+			 *          "data1", "data3"
+			 *      ]
 			 *  }
 			 */
 			line_connectNull: false,
 			line_step_type: "step",
 			line_classes: undefined,
+			line_point: true,
 
 			/**
 			 * Set bar options

diff --git a/src/shape/line.js b/src/shape/line.js
@@ -12,7 +12,7 @@ import {
 } from "d3-selection";
 import CLASS from "../config/classes";
 import ChartInternal from "../internals/ChartInternal";
-import {extend, isDefined, isFunction, isUndefined, isValue} from "../internals/util";
+import {extend, isArray, isDefined, isFunction, isUndefined, isValue} from "../internals/util";
 
 extend(ChartInternal.prototype, {
 	initLine() {
@@ -492,7 +492,8 @@ extend(ChartInternal.prototype, {
 		}
 
 		$$.mainCircle = $$.main.selectAll(`.${CLASS.circles}`).selectAll(`.${CLASS.circle}`)
-			.data(d => !$$.isBarType(d) && $$.labelishData(d));
+			.data(d => !$$.isBarType(d) && (!$$.isLineType(d) || $$.shouldDrawPointsForLine(d)) &&
+				$$.labelishData(d));
 
 		$$.mainCircle.exit().remove();
 
@@ -662,5 +663,12 @@ extend(ChartInternal.prototype, {
 
 	isWithinStep(that, y) {
 		return Math.abs(y - d3Mouse(that)[1]) < 30;
-	}
+	},
+
+	shouldDrawPointsForLine(d) {
+		const linePoint = this.config.line_point;
+
+		return linePoint === true ||
+			(isArray(linePoint) && linePoint.indexOf(d.id) !== -1);
+	},
 });