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

Implement to add additional text content within template syntax Fix #826
naver · Apr 8, 2019 · c16ab48 · c16ab48
1 parent 7273a74
commit c16ab48
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 8 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -2481,9 +2481,12 @@ d3.select(".chart_area")
 					doNotHide: true,
 					contents: {
 						bindto: "#tooltip",
+						text: {
+							VAR: ["A", "B", "TextA"]
+						},
 						template: "<ul><li>Index<br>{=TITLE}</li>" +
 								"{{<li class={=CLASS_TOOLTIP_NAME}>" +
-								"<span>{=VALUE}</span><br>" +
+								"<span>{=VALUE}:{=VAR}</span><br>" +
 								"<span style=color:{=COLOR}>{=NAME}</span></li>}}</ul>"
 					}
 				}

diff --git a/spec/internals/tooltip-spec.js b/spec/internals/tooltip-spec.js
@@ -744,15 +744,18 @@ describe("TOOLTIP", function() {
 		it("set options tooltip.contents", () => {
 			args.tooltip.contents = {
 				bindto: "#tooltip",
+				text: {
+					VAR: ["!!comment", "test!!"]
+				},
 				template: `<ul><li>Index<br>{=TITLE}</li>
 					{{<li class={=CLASS_TOOLTIP_NAME}>
-					<span>{=VALUE}</span><br>
+					<span>{=VALUE}</span><br>{=VAR}
 					<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>`;
+			const html = `<ul><li>Index<br>2</li><li class="bb-tooltip-name-data1"><span>100</span><br>!!comment<span style="color:#00c73c">data1</span></li><li class="bb-tooltip-name-data2"><span>140</span><br>test!!<span style="color:#fa7171">data2</span></li></ul>`;
 
 			util.hoverChart(chart, "mousemove", {clientX: 185, clientY: 107});
 			util.hoverChart(chart, "mouseout", {clientX: -100, clientY: -100});

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -3223,6 +3223,10 @@ export default class Options {
 			 *    - {=TITLE}: title value
 			 *    - {=COLOR}: data color
 			 *    - {=VALUE}: data value
+			 * @property {Object} [tooltip.contents.text=undefined] Set additional text content within data loop, using template syntax.
+			 *  - **NOTE:** It should contain `{ key: Array, ... }` value
+			 *    - 'key' name is used as substitution within template as '{=KEY}'
+			 *    - The value array length should match with the data length
 			 * @property {Boolean} [tooltip.init.show=false] Show tooltip at the initialization.
 			 * @property {Number} [tooltip.init.x=0] Set x Axis index to be shown at the initialization.
 			 * @property {Object} [tooltip.init.position={top: "0px",left: "50px"}] Set the position of tooltip at the initialization.
@@ -3274,6 +3278,26 @@ export default class Options {
 			 *      			'<span style=color:{=COLOR}>{=NAME}</span></li>' +
 			 *      		'}}</ul>'
 			 *      }
+			 *
+			 *       // with additional text value
+			 *       // - example of HTML returned:
+			 *       // <ul class="bb-tooltip">
+			 *       //   <li class="bb-tooltip-name-data1"><span>250</span><br>comment1<span style="color:#00c73c">data1</span>text1</li>
+			 *       //   <li class="bb-tooltip-name-data2"><span>50</span><br>comment2<span style="color:#fa7171">data2</span>text2</li>
+			 *       // </ul>
+			 *       contents: {
+			 *      	bindto: "#tooltip",
+			 *      	text: {
+			 *      		// a) 'key' name is used as substitution within template as '{=KEY}'
+			 *      		// b) the length should match with the data length
+			 *      		VAR1: ["text1", "text2"],
+			 *      		VAR2: ["comment1", "comment2"],
+			 *      	},
+			 *      	template: '<ul class={=CLASS_TOOLTIP}>{{' +
+			 *      			'<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span>{=VAR2}<br>' +
+			 *      			'<span style=color:{=COLOR}>{=NAME}</span>{=VAR1}</li>' +
+			 *      		'}}</ul>'
+			 *      }
     		 *
     		 *      // sort tooltip data value display in ascending order
     		 *      order: "asc",

diff --git a/src/internals/tooltip.js b/src/internals/tooltip.js
@@ -8,7 +8,7 @@ import {
 } from "d3-selection";
 import ChartInternal from "./ChartInternal";
 import CLASS from "../config/classes";
-import {extend, isFunction, isString, isValue, callFn, sanitise, tplProcess} from "./util";
+import {extend, isFunction, isObject, isString, isValue, callFn, sanitise, tplProcess} from "./util";
 
 extend(ChartInternal.prototype, {
 	/**
@@ -97,7 +97,8 @@ extend(ChartInternal.prototype, {
 		const order = config.tooltip_order;
 		const getRowValue = row => $$.getBaseValue(row);
 		const getBgColor = $$.levelColor ? row => $$.levelColor(row.value) : row => color(row.id);
-		const tplStr = config.tooltip_contents.template;
+		const contents = config.tooltip_contents;
+		const tplStr = contents.template;
 
 		if (order === null && config.data_groups.length) {
 			// for stacked data, order should aligned with the visually displayed data
@@ -170,15 +171,22 @@ extend(ChartInternal.prototype, {
 
 				const name = sanitise(nameFormat(row.name, ...param));
 				const color = getBgColor(row);
-
-				text += tplProcess(tpl[1], {
+				const contentValue = {
 					CLASS_TOOLTIP_NAME: CLASS.tooltipName + $$.getTargetSelectorSuffix(row.id),
 					COLOR: tplStr ? color : (
 						$$.patterns ? `<svg><rect style="fill:${color}" width="10" height="10"></rect></svg>` :
 							`<span style="background-color:${color}"></span>`),
 					"NAME": name,
 					VALUE: value
-				});
+				};
+
+				if (tplStr && isObject(contents.text)) {
+					Object.keys(contents.text).forEach(key => {
+						contentValue[key] = contents.text[key][i];
+					});
+				}
+
+				text += tplProcess(tpl[1], contentValue);
 			}
 		}
 

diff --git a/types/options.d.ts b/types/options.d.ts
@@ -750,6 +750,14 @@ export interface TooltipOptions {
 			 *  - {=VALUE}: data value
 			 */
 			template?: string;
+
+			/**
+			 * Set additional text content within data loop, using template syntax.
+			 *  - NOTE: It should contain `{ key: Array, ... }` value
+			 *    - 'key' name is used as substitution within template as '{=KEY}'
+			 *    - The value array length should match with the data length
+			 */
+			text?: { [key: string]: string[]|number[] }
 		};
 
 	init?: {