billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
143 lines (142 loc) • 4.79 kB
JavaScript
/*!
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*
* billboard.js, JavaScript chart library
* https://naver.github.io/billboard.js/
*
* @version 4.1.1
*/
import { callFn } from "../../module/util/object.js";
import { $SELECT, $SHAPE } from "../../config/classes.js";
import drag_default from "../interactions/drag.js";
import { select } from "d3-selection";
//#region src/ChartInternal/internals/selection.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
var selection_default = {
...drag_default,
/**
* Select a point
* @param {object} target Target point
* @param {object} d Data object
* @param {number} i Index number
* @private
*/
selectPoint(target, d, i) {
const $$ = this;
const { config, $el: { main }, $T } = $$;
const isRotated = config.axis_rotated;
const cx = (isRotated ? $$.circleY : $$.circleX).bind($$);
const cy = (isRotated ? $$.circleX : $$.circleY).bind($$);
const r = $$.pointSelectR.bind($$);
callFn(config.data_onselected, $$.api, d, target?.node());
$T(main.select(`.${$SELECT.selectedCircles}${$$.getTargetSelectorSuffix(d.id)}`).selectAll(`.${$SELECT.selectedCircle}-${i}`).data([d]).enter().append("circle").attr("class", () => $$.generateClass($SELECT.selectedCircle, i)).attr("cx", cx).attr("cy", cy).attr("stroke", $$.color).attr("r", (d2) => $$.pointSelectR(d2) * 1.4)).attr("r", r);
},
/**
* Unelect a point
* @param {object} target Target point
* @param {object} d Data object
* @param {number} i Index number
* @private
*/
unselectPoint(target, d, i) {
const $$ = this;
const { config, $el: { main }, $T } = $$;
callFn(config.data_onunselected, $$.api, d, target?.node());
$T(main.select(`.${$SELECT.selectedCircles}${$$.getTargetSelectorSuffix(d.id)}`).selectAll(`.${$SELECT.selectedCircle}-${i}`)).attr("r", 0).remove();
},
/**
* Toggles the selection of points
* @param {boolean} selected whether or not to select.
* @param {object} target Target object
* @param {object} d Data object
* @param {number} i Index number
* @private
*/
togglePoint(selected, target, d, i) {
const method = `${selected ? "" : "un"}selectPoint`;
this[method](target, d, i);
},
/**
* Select a path
* @param {object} target Target path
* @param {object} d Data object
* @private
*/
selectPath(target, d) {
const $$ = this;
const { config } = $$;
callFn(config.data_onselected, $$.api, d, target.node());
if (config.interaction_brighten) target.style("filter", "brightness(1.25)");
},
/**
* Unelect a path
* @private
* @param {object} target Target path
* @param {object} d Data object
*/
unselectPath(target, d) {
const $$ = this;
const { config } = $$;
callFn(config.data_onunselected, $$.api, d, target.node());
if (config.interaction_brighten) target.style("filter", null);
},
/**
* Toggles the selection of lines
* @param {boolean} selected whether or not to select.
* @param {object} target Target object
* @param {object} d Data object
* @param {number} i Index number
* @private
*/
togglePath(selected, target, d, i) {
this[`${selected ? "" : "un"}selectPath`](target, d, i);
},
/**
* Returns the toggle method of the target
* @param {object} that shape
* @param {object} d Data object
* @returns {function} toggle method
* @private
*/
getToggle(that, d) {
const $$ = this;
return that.nodeName === "path" ? $$.togglePath : $$.isStepType(d) ? () => {} : $$.togglePoint;
},
/**
* Toggles the selection of shapes
* @param {object} that shape
* @param {object} d Data object
* @param {number} i Index number
* @private
*/
toggleShape(that, d, i) {
const $$ = this;
const { config, $el: { main } } = $$;
if (config.data_selection_enabled && config.data_selection_isselectable.bind($$.api)(d)) {
const shape = select(that);
const isSelected = shape.classed($SELECT.SELECTED);
const toggle = $$.getToggle(that, d).bind($$);
let toggledShape;
if (!config.data_selection_multiple) {
const focusOnly = $$.isPointFocusOnly?.();
let selector = `.${focusOnly ? $SELECT.selectedCircles : $SHAPE.shapes}`;
if (config.data_selection_grouped) selector += $$.getTargetSelectorSuffix(d.id);
main.selectAll(selector).selectAll(focusOnly ? `.${$SELECT.selectedCircle}` : `.${$SHAPE.shape}.${$SELECT.SELECTED}`).classed($SELECT.SELECTED, false).each(function(d) {
const shape = select(this);
toggledShape = shape;
toggle(false, shape, d, d.index);
});
}
if (!toggledShape || toggledShape.node() !== shape.node()) {
shape.classed($SELECT.SELECTED, !isSelected);
toggle(!isSelected, shape, d, i);
}
}
}
};
//#endregion
export { selection_default as default };