feat(tooltip): Intent to ship tooltip.contents.template

- Implementation of tooltip.contents.template
- Update legend template processing with util's .tplProcess()
- Update dependencies to the latest

Fix #813

demo/chart.js

@@ -157,13 +157,19 @@ var billboardDemo = {
 		return false;
 	},
 
+	getLowerFirstCase(str) {
+		return str.charAt(0).toLowerCase() + str.slice(1);
+	},
+
 	_addChartInstance: function(type, key, index, code) {
+		key = this.getLowerFirstCase(key);
+
 		if (index) {
 			key += "_"+ index;
 		}
 
 		var $el = document.getElementById(key);
-		var legend;
+		var template;
 
 		if (!$el) {
 			$el = document.createElement("div");
@@ -175,13 +181,14 @@ var billboardDemo = {
 
 			this.$chartArea.appendChild($el);
 
-			if (key.indexOf("LegendTemplate") > -1) {
-				legend = document.createElement("div");
-				legend.id = "legend";
-				legend.style.textAlign = "center";
+			if (/^(legend|tooltip)Template/.test(key)) {
+				template = document.createElement("div");
+				template.id = this.getLowerFirstCase(RegExp.$1);
+				console.log(template.id)
+				template.style.textAlign = "center";
 
-				this.$chartArea.appendChild(legend);
-				legend = "<div id=\"legend\"></div>";
+				this.$chartArea.appendChild(template);
+				template = "<div id=\""+ template.id +"\"></div>";
 			}
 		}
 
@@ -232,9 +239,9 @@ var billboardDemo = {
 
 		// markup
 		if ((index && index === 1) || !index) {
-			code.markup.push("<!-- Markup -->\r\n<div id=\"" + key + "\"></div>\r\n" + (legend ? legend + "\r\n" : "") + "\r\n");
+			code.markup.push("<!-- Markup -->\r\n<div id=\"" + key + "\"></div>\r\n" + (template ? template + "\r\n" : "") + "\r\n");
 		} else if (index && index > 1) {
-			code.markup.push("<div id=\"" + key + "\"></div>\r\n" + (legend ? legend + "\r\n" : "") + "\r\n");
+			code.markup.push("<div id=\"" + key + "\"></div>\r\n" + (template ? template + "\r\n" : "") + "\r\n");
 		}
 
 		if (index && index > 1) {

demo/demo.js

@@ -2465,6 +2465,35 @@ d3.select(".chart_area")
 				}
 			}
 		},
+		TooltipTemplate: {
+			options: {
+				data: {
+					columns: [
+						["data1", 120, 200, 300, 100, 150, 250],
+						["data2", 250, 129, 217, 240, 315, 225],
+						["data3", 100, 320, 210, 340, 215, 125]
+					]
+				},
+				tooltip: {
+					init: {
+						show: true
+					},
+					doNotHide: true,
+					contents: {
+						bindto: "#tooltip",
+						template: "<ul><li>Index<br>{=TITLE}</li>" +
+								"{{<li class={=CLASS_TOOLTIP_NAME}>" +
+								"<span>{=VALUE}</span><br>" +
+								"<span style=color:{=COLOR}>{=NAME}</span></li>}}</ul>"
+					}
+				}
+			},
+			style: [
+				"#tooltip { font-size: 13px;padding: 0;margin-bottom: 80px; }",
+				"#tooltip li { list-style: none;float: left; padding: 0 10px; }",
+				"#tooltip li span:first-child { font-size: 16px; }"
+			]
+		},
 		LinkedTooltips: [
 			{
 				options: {

demo/simple-sidebar.css

@@ -233,4 +233,8 @@ div.row {
 
 #MultilinedTitle .bb-title tspan:first-child { font-size: 17px; font-weight: bold; }
 
-#RotatedAxisGroupedBar .base-line line { stroke-width: 3px; stroke: #000; }
+#RotatedAxisGroupedBar .base-line line { stroke-width: 3px; stroke: #000; }
+
+#tooltip {font-size: 13px;padding: 0;margin-bottom: 80px;}
+#tooltip li {list-style: none;float: left; padding: 0 10px;}
+#tooltip li span:first-child {font-size: 16px;}

package.json

@@ -18,7 +18,6 @@
     "deploy": "bash ./config/deploy.sh",
     "deploy:nightly": "cross-env DEPLOY_NIGHTLY=true node ./config/nightly.js",
     "lint": "eslint src",
-    "lint:dts": "dtslint types",
     "test": "node --max-old-space-size=2048 ./node_modules/karma/bin/karma start",
     "test:chrome": "npm test -- --chrome",
     "coverage": "npm test -- --coverage",

spec/internals/tooltip-spec.js

@@ -711,12 +711,18 @@ describe("TOOLTIP", function() {
 
 	describe("tooltip display", () => {
 		before(() => {
+			sandbox("tooltip-wrapper").innerHTML = "<div id='tooltip'></div>";
+
 			args = {
 				data: {
 					columns: [
 						["data1", 30, 200, 100],
 						["data2", 130, 100, 140]
-					]
+					],
+					colors: {
+						data1: "#00c73c",
+						data2: "#fa7171"
+					}
 				},
 				tooltip: {
 					doNotHide: true
@@ -734,5 +740,24 @@ describe("TOOLTIP", function() {
 			chart.tooltip.hide();
 			expect(chart.$.tooltip.style("display")).to.be.equal("none");
 		});
+
+		it("set options tooltip.contents", () => {
+			args.tooltip.contents = {
+				bindto: "#tooltip",
+				template: `<ul><li>Index<br>{=TITLE}</li>
+					{{<li class={=CLASS_TOOLTIP_NAME}>
+					<span>{=VALUE}</span><br>
+					<span style=color:{=COLOR}>{=NAME}</span></li>}}</ul>`
+			};
+		});
+
+		it("check for tooltip contents template", () => {
+			const html = `<ul><li>Index<br>2</li><li class="bb-tooltip-name-data1"><span>100</span><br><span style="color:#00c73c">data1</span></li><li class="bb-tooltip-name-data2"><span>140</span><br><span style="color:#fa7171">data2</span></li></ul>`;
+
+			util.hoverChart(chart, "mousemove", {clientX: 185, clientY: 107});
+			util.hoverChart(chart, "mouseout", {clientX: -100, clientY: -100});
+
+			expect(d3.select("#tooltip").html()).to.be.equal(html);
+		});
 	});
 });