1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {isValue, isDefined} from "../../module/util";
/** * Define tooltip * @ignore */const tooltip = {	/**	 * Show tooltip	 * @function tooltip․show	 * @instance	 * @memberof Chart	 * @param {object} args The object can consist with following members:<br>	 *	 *    | Key | Type | Description |	 *    | --- | --- | --- |	 *    | index | Number | Determine focus by index |	 *    | x | Number &vert; Date | Determine focus by x Axis index |	 *    | mouse | Array | Determine x and y coordinate value relative the targeted '.bb-event-rect' x Axis.<br>It should be used along with `data`, `index` or `x` value. The default value is set as `[0,0]` |	 *    | data | Object | When [data.xs](Options.html#.data%25E2%2580%25A4xs) option is used or [tooltip.grouped](Options.html#.tooltip) set to 'false', `should be used giving this param`.<br><br>**Key:**<br>- x {number &verbar; Date}: x Axis value<br>- index {number}: x Axis index (useless for data.xs)<br>- id {string}: data id<br>- value {number}: The corresponding value for tooltip. |	 *	 * @example	 *  // show the 2nd x Axis coordinate tooltip	 *  // for Arc(gauge, donut & pie) and radar type, approch showing tooltip by using "index" number.	 *  chart.tooltip.show({	 *    index: 1	 *  });	 *	 *  // show tooltip for the 3rd x Axis in x:50 and y:100 coordinate of '.bb-event-rect' of the x Axis.	 *  chart.tooltip.show({	 *    x: 2,	 *    mouse: [50, 100]	 *  });	 *	 *  // show tooltip for timeseries x axis	 *  chart.tooltip.show({	 *    x: new Date("2018-01-02 00:00")	 *  });	 *	 *  // when data.xs is used	 *  chart.tooltip.show({	 *    data: {	 *        x: 3,  // x Axis value	 *        id: "data1",  // data id	 *        value: 500  // data value	 *    }	 *  });	 *	 *  // when data.xs isn't used, but tooltip.grouped=false is set	 *  chart.tooltip.show({	 *    data: {	 *        index: 3,  // or 'x' key value	 *        id: "data1",  // data id	 *        value: 500  // data value	 *    }	 *  });	 */	show: function(args): void {		const $$ = this.internal;		const {config, state: {inputType}} = $$;		let index;		let mouse;
		// determine mouse position on the chart		if (args.mouse) {			mouse = args.mouse;		}
		// determine focus data		if (args.data) {			const {data} = args;			const y = $$.getYScaleById(data.id)(data.value);
			if ($$.isMultipleX()) {				// if multiple xs, target point will be determined by mouse				mouse = [$$.scale.x(data.x), y];			} else {				if (!config.tooltip_grouped) {					mouse = [0, y];				}
				index = isValue(data.index) ? data.index : $$.getIndexByX(data.x);			}		} else if (isDefined(args.x)) {			index = $$.getIndexByX(args.x);		} else if (isDefined(args.index)) {			index = args.index;		}
		(inputType === "mouse" ?			["mouseover", "mousemove"] : ["touchstart"]		).forEach(eventName => {			$$.dispatchEvent(eventName, index, mouse);		});	},
	/**	 * Hide tooltip	 * @function tooltip․hide	 * @instance	 * @memberof Chart	 */	hide: function(): void {		const $$ = this.internal;		const {state: {inputType}, $el: {tooltip}} = $$;		const data = tooltip?.datum();
		if (data) {			const {index} = JSON.parse(data.current)[0];
			// make to finalize, possible pending event flow set from '.tooltip.show()' call			(inputType === "mouse" ?				["mouseout"] : ["touchend"]			).forEach(eventName => {				$$.dispatchEvent(eventName, index);			});		}
		// reset last touch point index		inputType === "touch" && $$.callOverOutForTouch();
		$$.hideTooltip(true);		$$.hideGridFocus();
		$$.unexpandCircles?.();		$$.expandBarTypeShapes(false);	}};
export default {tooltip};