billboard.js/src/Chart/api/subchart.ts

Re-usable easy interface JavaScript chart library, based on D3 v4+

/**
 * Copyright (c) 2017 ~ present NAVER Corp.
 * billboard.js project is licensed under the MIT license
 */
import {$COMMON} from "../../config/classes";

export default {
	subchart: {
		/**
		 * Show subchart
		 * - **NOTE:** for ESM imports, needs to import 'subchart' exports and instantiate it by calling `subchart()`.
		 * @function subchart․show
		 * @instance
		 * @memberof Chart
		 * @example
		 * // for ESM imports, needs to import 'subchart' and must be instantiated first to enable subchart's API.
		 * import {subchart} from "billboard.js";
		 *
		 * const chart = bb.generate({
		 *   ...
		 *   subchart: {
		 *     // need to be instantiated by calling 'subchart()'
		 *     enabled: subchart()
		 *
		 *     // in case don't want subchart to be shown at initialization, instantiate with '!subchart()'
		 *     enabled: !subchart()
		 *     }
		 * });
		 *
		 * chart.subchart.show();
		 */
		show(): void {
			const $$ = this.internal;
			const {$el: {subchart}, config} = $$;
			const show = config.subchart_show;

			if (!show) {
				// unbind zoom event bound to chart rect area
				$$.unbindZoomEvent();

				config.subchart_show = !show;
				!subchart.main && $$.initSubchart();

				let $target = subchart.main.selectAll(`.${$COMMON.target}`);

				// need to cover when new data has been loaded
				if ($$.data.targets.length !== $target.size()) {
					$$.updateSizes();
					$$.updateTargetsForSubchart($$.data.targets);

					$target = subchart.main?.selectAll(`.${$COMMON.target}`);
				}

				$target?.style("opacity", null);
				subchart.main?.style("display", null);

				this.resize();
			}
		},

		/**
		 * Hide generated subchart
		 * - **NOTE:** for ESM imports, needs to import 'subchart' exports and instantiate it by calling `subchart()`.
		 * @function subchart․hide
		 * @instance
		 * @memberof Chart
		 * @example
		 *  chart.subchart.hide();
		 */
		hide(): void {
			const $$ = this.internal;
			const {$el: {subchart: {main}}, config} = $$;

			if (config.subchart_show && main?.style("display") !== "none") {
				config.subchart_show = false;
				main.style("display", "none");

				this.resize();
			}
		},

		/**
		 * Toggle the visiblity of subchart
		 * - **NOTE:** for ESM imports, needs to import 'subchart' exports and instantiate it by calling `subchart()`.
		 * @function subchart․toggle
		 * @instance
		 * @memberof Chart
		 * @example
		 * // When subchart is hidden, will be shown
		 * // When subchart is shown, will be hidden
		 * chart.subchart.toggle();
		 */
		toggle(): void {
			const $$ = this.internal;
			const {config} = $$;

			this.subchart[config.subchart_show ? "hide" : "show"]();
		}
	}
};