feat(axis): Intent to ship tick show options (#746)

Implementation of 'tick.show' and 'tick.text.show' options

- Do not generate unnecessary nodes when is not shown
- Correct the subchart extent size when subchart.size.height is set
- Fix incorrect sizing when subchart.axis.x.show=false
- Add subchart test cases

Fix #737
Close #746

demo/demo.js

@@ -764,6 +764,47 @@ var demos = {
 				}
 			}
 		},
+		HideTickLineText: {
+			options: {
+				data: {
+					columns: [
+						["data1", 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
+						["data2", 130, 40, 200, 310, 230, 325, 163, 230, 222, 240, 160, 310]
+					],
+					types: {
+						data1: "bar",
+						data2: "area-spline"
+					}
+				},
+				axis: {
+					x: {
+						tick: {
+							show: false,
+							text: {
+								show: false
+							}
+						}
+					},
+					y: {
+						tick: {
+							show: false,
+							text: {
+								show: false
+							}
+						}
+					},
+					y2: {
+						show: true,
+						tick: {
+							show: false,
+							text: {
+								show: false
+							}
+						}
+					}
+				}
+			}
+		},
 		MultiAxes: [
 			{
 				options: {

spec/interactions/subchart-spec.js

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2017 NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ */
+/* eslint-disable */
+/* global describe, beforeEach, it, expect */
+import util from "../assets/util";
+import CLASS from "../../src/config/classes";
+
+describe("SUBCHART", () => {
+	let chart;
+	let args;
+
+	beforeEach(() => {
+		chart = util.generate(args);
+	});
+
+	describe("generate sbuchart", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "www.somesitename1.com", "www.somesitename2.com", "www.somesitename3.com"],
+						["data1", 90, 100, 140],
+						["data2", 130, 40, 200]
+					],
+					types: {
+						data1: "bar",
+						data2: "area-spline"
+					}
+				},
+				axis: {
+					x: {
+					  type: "category"
+					}
+				},
+				subchart: {
+					show: true,
+					axis: {
+						x: {
+							show: true,
+							tick: {
+								show: true,
+								text: {
+									show: true
+								}
+							}
+						}
+					}
+				}
+			};
+		});
+
+		it("should subchart elements generated", () => {
+			const subchart = chart.$.svg.selectAll("[clip-path]").filter(function() {
+				return /subchart/.test(this.getAttribute("clip-path"))
+			}).node().parentNode;
+			const children = subchart.children;
+
+			expect(children.length).to.be.equal(3);
+
+			expect(children[0].querySelectorAll(`.${CLASS.chartBars}, .${CLASS.chartLines}`).length).to.be.equal(2);
+			expect(children[1].classList.contains(CLASS.brush)).to.be.true;
+			expect(children[2].classList.contains(CLASS.axisX)).to.be.true;
+		});
+
+		it("set options subchart.size={height:80}", () => {
+			args.subchart.size = {height: 80};
+		});
+
+		it("should be applied height value", () => {
+			const height = +chart.$.svg.select(".overlay").attr("height");
+
+			expect(height).to.be.equal(args.subchart.size.height);
+		});
+
+		it("should generate tick nodes", () => {
+			const axis = chart.$.svg.selectAll(`.${CLASS.axisX}`).nodes()[1];
+
+			expect(axis.querySelectorAll(".tick").length).to.be.equal(3);
+			expect(axis.querySelectorAll(".tick line").length).to.be.equal(3);
+			expect(axis.querySelectorAll(".tick text").length).to.be.equal(3);
+		});
+
+		it("set options subchart.axis.x.tick=false", () => {
+			args.subchart.axis.x.tick.show = false;
+		});
+
+		it("shouldn't be generating tick lines", () => {
+			const axis = chart.$.svg.selectAll(`.${CLASS.axisX}`).nodes()[1];
+
+			expect(axis.querySelectorAll(".tick line").length).to.be.equal(0);
+		});
+
+		it("set options subchart.axis.x.tick.text=false", () => {
+			args.subchart.axis.x.tick.show = true;
+			args.subchart.axis.x.tick.text.show = false;
+		});
+
+		it("shouldn't be generating tick text", () => {
+			const axis = chart.$.svg.selectAll(`.${CLASS.axisX}`).nodes()[1];
+
+			expect(axis.querySelectorAll(".tick line").length).to.be.equal(3);
+			expect(axis.querySelectorAll(".tick text").length).to.be.equal(0);
+		});
+
+		it("set options subchart.axis.x.show=false", () => {
+			args.subchart.axis.x.show = false;
+		});
+
+		it("shouldn't be generating tick nodes", () => {
+			const subchart = chart.$.svg.selectAll("[clip-path]").filter(function() {
+				return /subchart/.test(this.getAttribute("clip-path"))
+			}).node().parentNode;
+			const axis = subchart.querySelector(`.${CLASS.axisX}`).children;
+
+			expect(axis.length).to.be.equal(1);
+			expect(axis[0].classList.contains("domain")).to.be.true;
+		});
+	});
+});

spec/internals/axis-spec.js

@@ -1052,6 +1052,91 @@ describe("AXIS", function() {
 		});
 	});
 
+	describe("axis tick visiblity", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "www.somesitename1.com", "www.somesitename2.com", "www.somesitename3.com"],
+						["data1", 90, 100, 140],
+						["data2", 130, 40, 200]
+					],
+					types: {
+						data1: "bar",
+						data2: "area-spline"
+				}
+				},
+				axis: {
+					x: {
+						type: "category",
+						tick: {
+							rotate: 75,
+							multiline: false,
+							tooltip: true,
+							show: false,
+							text: {
+								show: false
+							}
+						}
+					},
+					y: {
+						tick: {
+							show: false,
+							text: {
+								show: false
+							}
+						}
+					},
+					y2: {
+						show: true,
+						tick: {
+							show: false,
+							text: {
+								show: false
+							}
+						}
+					}
+				}
+			};
+		});
+
+		it("axes tick shouldn't be shown", () => {
+			["x", "y", "y2"].forEach(id => {
+				const axis = chart.$.main.select(`.${CLASS.axis}-${id}`);
+
+				expect(axis.select(".tick").empty()).to.be.true;
+			});
+		});
+
+		it("set options tick.show=true", () => {
+			args.axis.x.tick.show = args.axis.y.tick.show = args.axis.y2.tick.show = true;
+		});
+
+		it("axes tick line should be shown", () => {
+			["x", "y", "y2"].forEach(id => {
+				const axis = chart.$.main.select(`.${CLASS.axis}-${id}`);
+
+				expect(axis.selectAll(".tick line").empty()).to.be.false;
+				expect(axis.selectAll(".tick text").size()).to.be.equal(0);
+			});
+		});
+
+		it("set options tick.text.show=true", () => {
+			args.axis.x.tick.show = args.axis.y.tick.show = args.axis.y2.tick.show = false;
+			args.axis.x.tick.text = args.axis.y.tick.text = args.axis.y2.tick.text = {show: true};
+		});
+
+		it("axes tick text should be shown", () => {
+			["x", "y", "y2"].forEach(id => {
+				const axis = chart.$.main.select(`.${CLASS.axis}-${id}`);
+
+				expect(axis.selectAll(".tick text").empty()).to.be.false;
+				expect(axis.selectAll(".tick line").size()).to.be.equal(0);
+			});
+		});
+	});
+
 	describe("axis text on 'binary floating point'", () => {
 		before(() => {
 			args = {