-
Notifications
You must be signed in to change notification settings - Fork 346
/
show.ts
136 lines (120 loc) 路 3.82 KB
/
show.ts
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 {callFn, endall} from "../../module/util";
/**
* Show/Hide data series
* @param {boolean} show Show or hide
* @param {Array} targetIdsValue Target id values
* @param {object} options Options
* @private
*/
function showHide(show: boolean, targetIdsValue: string[], options: any): void {
const $$ = this.internal;
const targetIds = $$.mapToTargetIds(targetIdsValue);
const hiddenIds = $$.state.hiddenTargetIds
.map(v => targetIds.indexOf(v) > -1 && v)
.filter(Boolean);
$$.state.toggling = true;
$$[`${show ? "remove" : "add"}HiddenTargetIds`](targetIds);
const targets = $$.$el.svg.selectAll($$.selectorTargets(targetIds));
const opacity = show ? null : "0";
if (show && hiddenIds.length) {
targets.style("display", null);
callFn($$.config.data_onshown, this, hiddenIds);
}
$$.$T(targets)
.style("opacity", opacity, "important")
.call(endall, () => {
// https://github.com/naver/billboard.js/issues/1758
if (!show && hiddenIds.length === 0) {
targets.style("display", "none");
callFn($$.config.data_onhidden, this, targetIds);
}
targets.style("opacity", opacity);
});
options.withLegend && $$[`${show ? "show" : "hide"}Legend`](targetIds);
$$.redraw({
withUpdateOrgXDomain: true,
withUpdateXDomain: true,
withLegend: true
});
$$.state.toggling = false;
}
export default {
/**
* Show data series on chart
* @function show
* @instance
* @memberof Chart
* @param {string|Array} [targetIdsValue] The target id value.
* @param {object} [options] The object can consist with following members:<br>
*
* | Key | Type | default | Description |
* | --- | --- | --- | --- |
* | withLegend | boolean | false | whether or not display legend |
*
* @example
* // show 'data1'
* chart.show("data1");
*
* // show 'data1' and 'data3'
* chart.show(["data1", "data3"]);
*/
show(targetIdsValue?: string[] | string, options = {}): void {
showHide.call(this, true, targetIdsValue, options);
},
/**
* Hide data series from chart
* @function hide
* @instance
* @memberof Chart
* @param {string|Array} [targetIdsValue] The target id value.
* @param {object} [options] The object can consist with following members:<br>
*
* | Key | Type | default | Description |
* | --- | --- | --- | --- |
* | withLegend | boolean | false | whether or not display legend |
*
* @example
* // hide 'data1'
* chart.hide("data1");
*
* // hide 'data1' and 'data3'
* chart.hide(["data1", "data3"]);
*/
hide(targetIdsValue?: string[], options = {}): void {
showHide.call(this, false, targetIdsValue, options);
},
/**
* Toggle data series on chart. When target data is hidden, it will show. If is shown, it will hide in vice versa.
* @function toggle
* @instance
* @memberof Chart
* @param {string|Array} [targetIds] The target id value.
* @param {object} [options] The object can consist with following members:<br>
*
* | Key | Type | default | Description |
* | --- | --- | --- | --- |
* | withLegend | boolean | false | whether or not display legend |
*
* @example
* // toggle 'data1'
* chart.toggle("data1");
*
* // toggle 'data1' and 'data3'
* chart.toggle(["data1", "data3"]);
*/
toggle(targetIds: string|string[], options = {}): void {
const $$ = this.internal;
const targets = {show: <string[]> [], hide: <string[]> []};
// sort show & hide target ids
$$.mapToTargetIds(targetIds)
.forEach((id: string) => targets[$$.isTargetToShow(id) ? "hide" : "show"].push(id));
// perform show & hide task separately
// https://github.com/naver/billboard.js/issues/454
targets.show.length && this.show(targets.show, options);
targets.hide.length && setTimeout(() => this.hide(targets.hide, options), 0);
}
};