Chart/api/show.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. import {callFn, endall} from "../../module/util";
  7. /**
  8.  * Show/Hide data series
  9.  * @param {boolean} show Show or hide
  10.  * @param {Array} targetIdsValue Target id values
  11.  * @param {object} options Options
  12.  * @private
  13.  */
  14. function showHide(show: boolean, targetIdsValue: string[], options: any): void {
  15. 	const $$ = this.internal;
  16. 	const targetIds = $$.mapToTargetIds(targetIdsValue);
  17. 	const hiddenIds = $$.state.hiddenTargetIds
  18. 		.map(v => targetIds.indexOf(v) > -1 && v)
  19. 		.filter(Boolean);
  21. 	$$.state.toggling = true;
  23. 	$$[`${show ? "remove" : "add"}HiddenTargetIds`](targetIds);
  25. 	const targets = $$.$el.svg.selectAll($$.selectorTargets(targetIds));
  26. 	const opacity = show ? null : "0";
  28. 	if (show && hiddenIds.length) {
  29. 		targets.style("display", null);
  30. 		callFn($$.config.data_onshown, this, hiddenIds);
  31. 	}
  33. 	$$.$T(targets)
  34. 		.style("opacity", opacity, "important")
  35. 		.call(endall, () => {
  36. 			// https://github.com/naver/billboard.js/issues/1758
  37. 			if (!show && hiddenIds.length === 0) {
  38. 				targets.style("display", "none");
  39. 				callFn($$.config?.data_onhidden, this, targetIds);
  40. 			}
  42. 			targets.style("opacity", opacity);
  43. 		});
  45. 	options.withLegend && $$[`${show ? "show" : "hide"}Legend`](targetIds);
  47. 	$$.redraw({
  48. 		withUpdateOrgXDomain: true,
  49. 		withUpdateXDomain: true,
  50. 		withLegend: true
  51. 	});
  53. 	$$.state.toggling = false;
  54. }
  56. export default {
  57. 	/**
  58. 	 * Show data series on chart
  59. 	 * @function show
  60. 	 * @instance
  61. 	 * @memberof Chart
  62. 	 * @param {string|Array} [targetIdsValue] The target id value.
  63. 	 * @param {object} [options] The object can consist with following members:<br>
  64. 	 *
  65. 	 *    | Key | Type | default | Description |
  66. 	 *    | --- | --- | --- | --- |
  67. 	 *    | withLegend | boolean | false | whether or not display legend |
  68. 	 *
  69. 	 * @example
  70. 	 * // show 'data1'
  71. 	 * chart.show("data1");
  72. 	 *
  73. 	 * // show 'data1' and 'data3'
  74. 	 * chart.show(["data1", "data3"]);
  75. 	 */
  76. 	show(targetIdsValue?: string[] | string, options = {}): void {
  77. 		showHide.call(this, true, targetIdsValue, options);
  78. 	},
  80. 	/**
  81. 	 * Hide data series from chart
  82. 	 * @function hide
  83. 	 * @instance
  84. 	 * @memberof Chart
  85. 	 * @param {string|Array} [targetIdsValue] The target id value.
  86. 	 * @param {object} [options] The object can consist with following members:<br>
  87. 	 *
  88. 	 *    | Key | Type | default | Description |
  89. 	 *    | --- | --- | --- | --- |
  90. 	 *    | withLegend | boolean | false | whether or not display legend |
  91. 	 *
  92. 	 * @example
  93. 	 * // hide 'data1'
  94. 	 * chart.hide("data1");
  95. 	 *
  96. 	 * // hide 'data1' and 'data3'
  97. 	 * chart.hide(["data1", "data3"]);
  98. 	 */
  99. 	hide(targetIdsValue?: string[], options = {}): void {
  100. 		showHide.call(this, false, targetIdsValue, options);
  101. 	},
  103. 	/**
  104. 	 * Toggle data series on chart. When target data is hidden, it will show. If is shown, it will hide in vice versa.
  105. 	 * @function toggle
  106. 	 * @instance
  107. 	 * @memberof Chart
  108. 	 * @param {string|Array} [targetIds] The target id value.
  109. 	 * @param {object} [options] The object can consist with following members:<br>
  110. 	 *
  111. 	 *    | Key | Type | default | Description |
  112. 	 *    | --- | --- | --- | --- |
  113. 	 *    | withLegend | boolean | false | whether or not display legend |
  114. 	 *
  115. 	 * @example
  116. 	 * // toggle 'data1'
  117. 	 * chart.toggle("data1");
  118. 	 *
  119. 	 * // toggle 'data1' and 'data3'
  120. 	 * chart.toggle(["data1", "data3"]);
  121. 	 */
  122. 	toggle(targetIds: string | string[], options = {}): void {
  123. 		const $$ = this.internal;
  124. 		const targets = {show: <string[]>[], hide: <string[]>[]};
  126. 		// sort show & hide target ids
  127. 		$$.mapToTargetIds(targetIds)
  128. 			.forEach((id: string) => targets[$$.isTargetToShow(id) ? "hide" : "show"].push(id));
  130. 		// perform show & hide task separately
  131. 		// https://github.com/naver/billboard.js/issues/454
  132. 		targets.show.length && this.show(targets.show, options);
  133. 		targets.hide.length && setTimeout(() => this.hide(targets.hide, options), 0);
  134. 	}
  135. };