api/api.show.js

/**
 * Copyright (c) 2017 ~ present NAVER Corp.
 * billboard.js project is licensed under the MIT license
 */
import Chart from "../internals/Chart";
import {extend} from "../internals/util";

extend(Chart.prototype, {
	/**
	 * Show/Hide data series
	 * @private
	 */
	_showHide(show, targetIdsValue, options) {
		const $$ = this.internal;
		const targetIds = $$.mapToTargetIds(targetIdsValue);

		$$[`${show ? "remove" : "add"}HiddenTargetIds`](targetIds);
		const targets = $$.svg.selectAll($$.selectorTargets(targetIds));
		const opacity = show ? "1" : "0";

		targets.transition()
			.style("opacity", opacity, "important")
			.call($$.endall, () => {
				targets.style("opacity", null).style("opacity", opacity);
			});

		options.withLegend && $$[`${show ? "show" : "hide"}Legend`](targetIds);

		$$.redraw({
			withUpdateOrgXDomain: true,
			withUpdateXDomain: true,
			withLegend: true
		});
	},

	/**
	 * Show data series on chart
	 * @method show
	 * @instance
	 * @memberof Chart
	 * @param {String|Array} [targetIdsValue=all] 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, options = {}) {
		this._showHide(true, targetIdsValue, options);
	},

	/**
	 * Hide data series from chart
	 * @method hide
	 * @instance
	 * @memberof Chart
	 * @param {String|Array} [targetIdsValue=all] 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, options = {}) {
		this._showHide(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.
	 * @method toggle
	 * @instance
	 * @memberof Chart
	 * @param {String|Array} [targetIdsValue=all] 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, options = {}) {
		const $$ = this.internal;
		const targets = {show: [], hide: []};

		// sort show & hide target ids
		$$.mapToTargetIds(targetIds)
			.forEach(id => 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);
	}
});