Skip to main content
Module

x/billboardjs/Chart/api/subchart.ts

📊 Re-usable, easy interface JavaScript chart library based on D3.js
Go to Latest
File
/** * 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"](); } }};