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
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {select as d3Select} from "d3-selection";import {$FOCUS, $GAUGE} from "../../config/classes";
type FocusParam = string | string[];
export default {	/**	 * This API highlights specified targets and fade out the others.<br><br>	 * You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be highlighted.	 * @function focus	 * @instance	 * @memberof Chart	 * @param {string|Array} targetIdsValue Target ids to be highlighted.	 * @example	 *  // data1 will be highlighted and the others will be faded out	 *  chart.focus("data1");	 *	 * // data1 and data2 will be highlighted and the others will be faded out	 * chart.focus(["data1", "data2"]);	 *	 * // all targets will be highlighted	 * chart.focus();	 */	focus(targetIdsValue?: FocusParam): void {		const $$ = this.internal;		const {state} = $$;		const targetIds = $$.mapToTargetIds(targetIdsValue);		const candidates = $$.$el.svg.selectAll(			$$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))		);
		this.revert();		this.defocus();
		candidates.classed($FOCUS.focused, true).classed($FOCUS.defocused, false);
		if ($$.hasArcType() && !state.hasRadar) {			$$.expandArc(targetIds);
			$$.hasType("gauge") &&				$$.markOverlapped(targetIdsValue, $$, `.${$GAUGE.gaugeValue}`);		}
		$$.toggleFocusLegend(targetIds, true);
		state.focusedTargetIds = targetIds;		state.defocusedTargetIds = state.defocusedTargetIds.filter(id => targetIds.indexOf(id) < 0);	},
	/**	 * This API fades out specified targets and reverts the others.<br><br>	 * You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be faded out.	 * @function defocus	 * @instance	 * @memberof Chart	 * @param {string|Array} targetIdsValue Target ids to be faded out.	 * @example	 * // data1 will be faded out and the others will be reverted.	 * chart.defocus("data1");	 *	 * // data1 and data2 will be faded out and the others will be reverted.	 * chart.defocus(["data1", "data2"]);	 *	 * // all targets will be faded out.	 * chart.defocus();	 */	defocus(targetIdsValue?: FocusParam): void {		const $$ = this.internal;		const {state} = $$;		const targetIds = $$.mapToTargetIds(targetIdsValue);		const candidates = $$.$el.svg.selectAll(			$$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))		);
		candidates.classed($FOCUS.focused, false).classed($FOCUS.defocused, true);
		if ($$.hasArcType(null, ["polar"])) {			$$.unexpandArc(targetIds);
			$$.hasType("gauge") &&				$$.undoMarkOverlapped($$, `.${$GAUGE.gaugeValue}`);		}
		$$.toggleFocusLegend(targetIds, false);
		state.focusedTargetIds = state.focusedTargetIds.filter(id => targetIds.indexOf(id) < 0);		state.defocusedTargetIds = targetIds;	},
	/**	 * This API reverts specified targets.<br><br>	 * You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be reverted.	 * @function revert	 * @instance	 * @memberof Chart	 * @param {string|Array} targetIdsValue Target ids to be reverted	 * @example	 * // data1 will be reverted.	 * chart.revert("data1");	 *	 * // data1 and data2 will be reverted.	 * chart.revert(["data1", "data2"]);	 *	 * // all targets will be reverted.	 * chart.revert();	 */	revert(targetIdsValue?: FocusParam): void {		const $$ = this.internal;		const {config, state, $el} = $$;		const targetIds = $$.mapToTargetIds(targetIdsValue);		const candidates = $el.svg.selectAll($$.selectorTargets(targetIds)); // should be for all targets
		candidates.classed($FOCUS.focused, false).classed($FOCUS.defocused, false);
		$$.hasArcType(null, ["polar"]) && $$.unexpandArc(targetIds);
		if (config.legend_show) {			$$.showLegend(targetIds.filter($$.isLegendToShow.bind($$)));			$el.legend.selectAll($$.selectorLegends(targetIds))				.filter(function() {					return d3Select(this).classed($FOCUS.legendItemFocused);				})				.classed($FOCUS.legendItemFocused, false);		}
		state.focusedTargetIds = [];		state.defocusedTargetIds = [];	}};