123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {select as d3Select} from "d3-selection";import {document} from "../../module/browser";import {$ARC, $TOOLTIP} from "../../config/classes";import type {IDataRow} from "../data/IData";import {getPointer, isFunction, isObject, isString, isValue, callFn, sanitise, tplProcess, isUndefined, parseDate} from "../../module/util";
export default {	/**	 * Initializes the tooltip	 * @private	 */	initTooltip(): void {		const $$ = this;		const {config, $el} = $$;
		$el.tooltip = d3Select(config.tooltip_contents.bindto);
		if ($el.tooltip.empty()) {			$el.tooltip = $el.chart				.append("div")				.attr("class", $TOOLTIP.tooltipContainer)				.style("position", "absolute")				.style("pointer-events", "none")				.style("display", "none");		}
		$$.bindTooltipResizePos();	},
	initShowTooltip(): void {		const $$ = this;		const {config, $el, state: {hasAxis, hasRadar}} = $$;
		// Show tooltip if needed		if (config.tooltip_init_show) {			const isArc = !(hasAxis && hasRadar);
			if ($$.axis?.isTimeSeries() && isString(config.tooltip_init_x)) {				const targets = $$.data.targets[0];				let i;				let val;
				config.tooltip_init_x = parseDate.call($$, config.tooltip_init_x);
				for (i = 0; (val = targets.values[i]); i++) {					if ((val.x - config.tooltip_init_x) === 0) {						break;					}				}
				config.tooltip_init_x = i;			}
			let data = $$.data.targets.map(d => {				const x = isArc ? 0 : config.tooltip_init_x;
				return $$.addName(d.values[x]);			});
			if (isArc) {				data = [data[config.tooltip_init_x]];			}
			$el.tooltip.html($$.getTooltipHTML(				data,				$$.axis?.getXAxisTickFormat(),				$$.getDefaultValueFormat(),				$$.color			));
			if (!config.tooltip_contents.bindto) {				$el.tooltip.style("top", config.tooltip_init_position.top)					.style("left", config.tooltip_init_position.left)					.style("display", null);			}		}	},
	/**	 * Get the tooltip HTML string	 * @param  {Array} args Arguments	 * @returns {string} Formatted HTML string	 * @private	 */	getTooltipHTML(...args): string {		const $$ = this;		const {api, config} = $$;
		return isFunction(config.tooltip_contents) ?			config.tooltip_contents.bind(api)(...args) : $$.getTooltipContent(...args);	},
	/**	 * Returns the tooltip content(HTML string)	 * @param {object} d data	 * @param {Function} defaultTitleFormat Default title format	 * @param {Function} defaultValueFormat Default format for each data value in the tooltip.	 * @param {Function} color Color function	 * @returns {string} html	 * @private	 */	getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color): string {		const $$ = this;		const {api, config, state} = $$;
		let [titleFormat, nameFormat, valueFormat] = ["title", "name", "value"].map(v => {			const fn = config[`tooltip_format_${v}`];
			return isFunction(fn) ? fn.bind(api) : fn;		});
		titleFormat = titleFormat || defaultTitleFormat;		nameFormat = nameFormat || (name => name);		valueFormat = valueFormat || (			$$.isStackNormalized() ? (v, ratio) => `${(ratio * 100).toFixed(2)}%` : defaultValueFormat		);
		const order = config.tooltip_order;		const getRowValue = row => ($$.axis && $$.isBubbleZType(row) ? $$.getBubbleZData(row.value, "z") : $$.getBaseValue(row));		const getBgColor = $$.levelColor ? row => $$.levelColor(row.value) : row => color(row);		const contents = config.tooltip_contents;		const tplStr = contents.template;		const targetIds = $$.mapToTargetIds();
		if (order === null && config.data_groups.length) {			// for stacked data, order should aligned with the visually displayed data			const ids = $$.orderTargets($$.data.targets)				.map(i2 => i2.id)				.reverse();
			d.sort((a, b) => {				let v1 = a ? a.value : null;				let v2 = b ? b.value : null;
				if (v1 > 0 && v2 > 0) {					v1 = a.id ? ids.indexOf(a.id) : null;					v2 = b.id ? ids.indexOf(b.id) : null;				}
				return v1 - v2;			});		} else if (/^(asc|desc)$/.test(order)) {			const isAscending = order === "asc";
			d.sort((a, b) => {				const v1 = a ? getRowValue(a) : null;				const v2 = b ? getRowValue(b) : null;
				return isAscending ? v1 - v2 : v2 - v1;			});		} else if (isFunction(order)) {			d.sort(order.bind(api));		}
		const tpl = $$.getTooltipContentTemplate(tplStr);		const len = d.length;		let text;		let row;		let param;		let value;		let i;
		for (i = 0; i < len; i++) {			row = d[i];
			if (!row || !(getRowValue(row) || getRowValue(row) === 0)) {				continue;			}
			if (isUndefined(text)) {				const title = (state.hasAxis || state.hasRadar) &&					sanitise(titleFormat ? titleFormat(row.x) : row.x);
				text = tplProcess(tpl[0], {					CLASS_TOOLTIP: $TOOLTIP.tooltip,					TITLE: isValue(title) ? (						tplStr ? title : `<tr><th colspan="2">${title}</th></tr>`					) : ""				});			}
			if (!row.ratio && $$.$el.arcs) {				row.ratio = $$.getRatio("arc", $$.$el.arcs.select(`path.${$ARC.arc}-${row.id}`).data()[0]);			}
			param = [row.ratio, row.id, row.index, d];			value = sanitise(valueFormat(getRowValue(row), ...param));
			if ($$.isAreaRangeType(row)) {				const [high, low] = ["high", "low"].map(v => sanitise(					valueFormat($$.getRangedData(row, v), ...param)				));
				value = `<b>Mid:</b> ${value} <b>High:</b> ${high} <b>Low:</b> ${low}`;			} else if ($$.isCandlestickType(row)) {				const [open, high, low, close, volume] = ["open", "high", "low", "close", "volume"].map(v => sanitise(					valueFormat($$.getRangedData(row, v, "candlestick"), ...param)				));
				value = `<b>Open:</b> ${open} <b>High:</b> ${high} <b>Low:</b> ${low} <b>Close:</b> ${close}${volume ? ` <b>Volume:</b> ${volume}` : ""}`;			} else if ($$.isBarRangeType(row)) {				const [start, end] = row.value;
				value = `${valueFormat(start)} ~ ${valueFormat(end)}`;			}
			if (value !== undefined) {				// Skip elements when their name is set to null				if (row.name === null) {					continue;				}
				const name = sanitise(nameFormat(row.name, ...param));				const color = getBgColor(row);				const contentValue = {					CLASS_TOOLTIP_NAME: $TOOLTIP.tooltipName + $$.getTargetSelectorSuffix(row.id),					COLOR: (tplStr || !$$.patterns) ? color : `<svg><rect style="fill:${color}" width="10" height="10"></rect></svg>`,					NAME: name,					VALUE: value				};
				if (tplStr && isObject(contents.text)) {					const index = targetIds.indexOf(row.id);
					Object.keys(contents.text).forEach(key => {						contentValue[key] = contents.text[key][index];					});				}
				text += tplProcess(tpl[1], contentValue);			}		}
		return `${text}</table>`;	},
	/**	 * Get the content template string	 * @param {string} tplStr Tempalte string	 * @returns {Array} Template string	 * @private	 */	getTooltipContentTemplate(tplStr?: string): string[] {		return (tplStr || `<table class="{=CLASS_TOOLTIP}"><tbody>				{=TITLE}				{{<tr class="{=CLASS_TOOLTIP_NAME}">					<td class="name">${this.patterns ? `{=COLOR}` : `<span style="background-color:{=COLOR}"></span>`}{=NAME}</td>					<td class="value">{=VALUE}</td>				</tr>}}			</tbody></table>`)			.replace(/(\r?\n|\t)/g, "")			.split(/{{(.*)}}/);	},
	/**	 * Returns the position of the tooltip	 * @param {object} dataToShow data	 * @param {string} tWidth Width value of tooltip element	 * @param {string} tHeight Height value of tooltip element	 * @param {HTMLElement} element Tooltip element	 * @returns {object} top, left value	 * @private	 */	tooltipPosition(dataToShow, tWidth: number, tHeight: number, element):		{top: number, left: number} {		const $$ = this;		const {config, scale, state} = $$;		const {width, height, current, isLegendRight, inputType, event} = state;		const hasGauge = $$.hasType("gauge") && !config.gauge_fullCircle;		const svgLeft = $$.getSvgLeft(true);		let chartRight = svgLeft + current.width - $$.getCurrentPaddingRight();		const chartLeft = $$.getCurrentPaddingLeft(true);		const size = 20;		let [x, y] = getPointer(event, element);
		// Determine tooltip position		if ($$.hasArcType()) {			const raw = inputType === "touch" || $$.hasType("radar");
			if (!raw) {				y += hasGauge ? height : height / 2;				x += (width - (isLegendRight ? $$.getLegendWidth() : 0)) / 2;			}		} else {			const dataScale = scale.x(dataToShow[0].x);
			if (config.axis_rotated) {				y = dataScale + size;				x += svgLeft + 100;				chartRight -= svgLeft;			} else {				y -= 5;				x = svgLeft + chartLeft + size + ($$.scale.zoom ? x : dataScale);			}		}
		// when tooltip left + tWidth > chart's width		if ((x + tWidth + 15) > chartRight) {			x -= tWidth + chartLeft;		}
		if (y + tHeight > current.height) {			y -= hasGauge ? tHeight * 3 : tHeight + 30;		}
		const pos = {top: y, left: x};
		// make sure to not be positioned out of viewport		Object.keys(pos).forEach(v => {			if (pos[v] < 0) {				pos[v] = 0;			}		});
		return pos;	},
	/**	 * Show the tooltip	 * @param {object} selectedData Data object	 * @param {SVGElement} eventRect Event <rect> element	 * @private	 */	showTooltip(selectedData: IDataRow[], eventRect: SVGElement): void {		const $$ = this;		const {config, scale, state, $el: {tooltip}} = $$;		const {bindto} = config.tooltip_contents;		const dataToShow = selectedData.filter(d => d && isValue($$.getBaseValue(d)));
		if (!tooltip || dataToShow.length === 0 || !config.tooltip_show) {			return;		}
		let datum = tooltip.datum();		let {width = 0, height = 0} = datum || {};		const dataStr = JSON.stringify(selectedData);
		if (!datum || datum.current !== dataStr) {			const index = selectedData.concat().sort()[0].index;
			callFn(config.tooltip_onshow, $$.api, selectedData);
			// set tooltip content			tooltip				.html($$.getTooltipHTML(					selectedData, // data					$$.axis ? $$.axis.getXAxisTickFormat() : $$.categoryName.bind($$), // defaultTitleFormat					$$.getDefaultValueFormat(), // defaultValueFormat					$$.color // color				))				.style("display", null)				.style("visibility", null) // for IE9				.datum(datum = {					index,					current: dataStr,					width: width = tooltip.property("offsetWidth"),					height: height = tooltip.property("offsetHeight")				});
			callFn(config.tooltip_onshown, $$.api, selectedData);			$$._handleLinkedCharts(true, index);		}
		if (!bindto) {			const fnPos = config.tooltip_position?.bind($$.api) || $$.tooltipPosition.bind($$);			const [x, y] = getPointer(state.event, eventRect); // get mouse event position			const currPos: any = {x, y};			const data = selectedData.filter(Boolean)?.shift();
			if (scale.x && data && "x" in data) {				currPos.xAxis = scale.x(data.x);			}
			// Get tooltip dimensions			const pos = fnPos(dataToShow, width, height, eventRect, currPos);
			["top", "left"].forEach(v => {				const value = pos[v];
				tooltip.style(v, `${value}px`);
				// Remember left pos in percentage to be used on resize call				if (v === "left" && !datum.xPosInPercent) {					datum.xPosInPercent = value / state.current.width * 100;				}			});		}	},
	/**	 * Adjust tooltip position on resize event	 * @private	 */	bindTooltipResizePos(): void {		const $$ = this;		const {resizeFunction, state, $el: {tooltip}} = $$;
		resizeFunction.add(() => {			if (tooltip.style("display") === "block") {				const {current} = state;				const {width, xPosInPercent} = tooltip.datum();				let value = current.width / 100 * xPosInPercent;				const diff = current.width - (value + width);
				// if tooltip size overs current viewport size				if (diff < 0) {					value += diff;				}
				tooltip.style("left", `${value}px`);			}		});	},
	/**	 * Hide the tooltip	 * @param {boolean} force Force to hide	 * @private	 */	hideTooltip(force?: boolean): void {		const $$ = this;		const {api, config, $el: {tooltip}} = $$;
		if (tooltip && tooltip.style("display") !== "none" && (!config.tooltip_doNotHide || force)) {			const selectedData = JSON.parse(tooltip.datum().current);
			callFn(config.tooltip_onhide, api, selectedData);
			// hide tooltip			tooltip				.style("display", "none")				.style("visibility", "hidden") // for IE9				.datum(null);
			callFn(config.tooltip_onhidden, api, selectedData);		}	},
	/**	 * Toggle display for linked chart instances	 * @param {boolean} show true: show, false: hide	 * @param {number} index x Axis index	 * @private	 */	_handleLinkedCharts(show: boolean, index: number): void {		const $$ = this;		const {charts, config, state: {event}} = $$;
		// Prevent propagation among instances if isn't instantiated from the user's event		// https://github.com/naver/billboard.js/issues/1979		if (event?.isTrusted && config.tooltip_linked && charts.length > 1) {			const linkedName = config.tooltip_linked_name;
			charts				.filter(c => c !== $$.api)				.forEach(c => {					const {config, $el} = c.internal;					const isLinked = config.tooltip_linked;					const name = config.tooltip_linked_name;					const isInDom = document.body.contains($el.chart.node());
					if (isLinked && linkedName === name && isInDom) {						const data = $el.tooltip.data()[0];						const isNotSameIndex = index !== data?.index;
						try {							c.tooltip[								show && isNotSameIndex ? "show" : "hide"							]({index});						} catch (e) {}					}				});		}	}};