billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
428 lines (425 loc) • 17.6 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.0.1
*/
import { select } from 'd3-selection';
import { $COMMON, $SELECT, $CIRCLE } from '../../config/classes.js';
import { isObject, isValue, isUndefined } from '../../module/util/type-checks.js';
import { getPointer, getBoundingRect, getBBox } from '../../module/util/dom.js';
import { getRandom } from '../../module/util/object.js';
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
const getTransitionName = () => getRandom();
const pointBBoxCache = new WeakMap();
/**
* Get cached dimensions for non-circle point elements.
* @param {SVGElement} node Point element
* @returns {object} Width/height pair
* @private
*/
function getPointBBox(node) {
const attrHeight = node.getAttribute("height");
const attrWidth = node.getAttribute("width");
const href = node.getAttribute("href") || node.getAttribute("xlink:href");
const cached = pointBBoxCache.get(node);
if (cached &&
cached.attrHeight === attrHeight &&
cached.attrWidth === attrWidth &&
cached.href === href) {
return cached;
}
const { width, height } = getBBox(node);
const bbox = { attrHeight, attrWidth, height, href, width };
pointBBoxCache.set(node, bbox);
return bbox;
}
var shapePoint = {
initialOpacityForCircle(d) {
const { config, state: { withoutFadeIn } } = this;
let opacity = config.point_opacity;
if (isUndefined(opacity)) {
opacity = this.getBaseValue(d) !== null &&
withoutFadeIn[d.id] ?
this.opacityForCircle(d) :
"0";
}
return opacity;
},
opacityForCircle(d) {
const { config } = this;
let opacity = config.point_opacity;
if (isUndefined(opacity)) {
opacity = config.point_show && !this.isPointFocusOnly?.() ? null : "0";
opacity = isValue(this.getBaseValue(d)) ?
(this.isBubbleType(d) || this.isScatterType(d) ? "0.5" : opacity) :
"0";
}
return opacity;
},
initCircle() {
const $$ = this;
const { $el: { main } } = $$;
!$$.point && ($$.point = $$.generatePoint());
if (($$.hasType("bubble") || $$.hasType("scatter")) &&
main.select(`.${$COMMON.chart} > .${$CIRCLE.chartCircles}`).empty()) {
main.select(`.${$COMMON.chart}`)
.append("g")
.attr("class", $CIRCLE.chartCircles);
}
},
updateTargetForCircle(targetsValue, enterNodeValue) {
const $$ = this;
const { config, data, $el } = $$;
const selectionEnabled = config.interaction_enabled && config.data_selection_enabled;
const isSelectable = selectionEnabled && config.data_selection_isselectable;
const classCircles = $$.getClass("circles", true);
if (!config.point_show) {
return;
}
$$.initCircle();
let targets = targetsValue;
let enterNode = enterNodeValue;
// only for scatter & bubble type should generate seprate <g> node
if (!targets) {
targets = $$.filterNullish(data.targets)
.filter(d => this.isScatterType(d) || this.isBubbleType(d));
const mainCircle = $el.main.select(`.${$CIRCLE.chartCircles}`)
.style("pointer-events", "none")
.selectAll(`.${$CIRCLE.circles}`)
.data(targets);
mainCircle.exit().remove();
enterNode = mainCircle.enter();
}
// Circles for each data point on lines
selectionEnabled && enterNode.append("g")
.attr("class", d => $$.generateClass($SELECT.selectedCircles, d.id));
enterNode.append("g")
.attr("class", classCircles)
.call(selection => {
$$.setCssRule(true, `.${$CIRCLE.circles}`, ["cursor:pointer"], isSelectable)(selection);
$$.setCssRule(true, ` .${$CIRCLE.circle}`, ["fill", "stroke"], $$.color)(selection);
})
.style("opacity", function () {
const parent = select(this.parentNode);
// if the parent node is .bb-chart-circles (bubble, scatter), initialize <g bb-circles> with opacity "0"
return parent.classed($CIRCLE.chartCircles) ? "0" : null;
});
// Update date for selected circles
selectionEnabled && targets.forEach(t => {
$el.main.selectAll(`.${$SELECT.selectedCircles}${$$.getTargetSelectorSuffix(t.id)}`)
.selectAll(`${$SELECT.selectedCircle}`)
.each(d => {
d.value = t.values[d.index].value;
});
});
},
updateCircle(isSub = false) {
const $$ = this;
const { config, state, $el } = $$;
const focusOnly = $$.isPointFocusOnly();
const $root = isSub ? $el.subchart : $el;
if (config.point_show && !state.toggling) {
config.point_radialGradient && $$.updateLinearGradient();
const circles = $root.main.selectAll(`.${$CIRCLE.circles}`)
.selectAll(`.${$CIRCLE.circle}`)
.data(d => {
const data = ($$.isLineType(d) && $$.shouldDrawPointsForLine(d)) ||
$$.isBubbleType(d) || $$.isRadarType(d) || $$.isScatterType(d) ?
(focusOnly ? [d.values[0]] : d.values) :
[];
// return data;
return $$.filterNullish(data);
});
circles.exit().remove();
const pointR = $$.pointR.bind($$);
const updateCircleColor = $$.updateCircleColor.bind($$);
const initialOpacityForCircle = $$.initialOpacityForCircle.bind($$);
circles.enter()
.filter(Boolean)
.append($$.point("create", this, pointR, updateCircleColor));
$root.circle = $root.main.selectAll(`.${$CIRCLE.circles} .${$CIRCLE.circle}`)
.style("stroke", $$.getStylePropValue($$.color))
.style("opacity", initialOpacityForCircle);
}
},
/**
* Update circle color
* @param {object} d Data object
* @returns {string} Color string
* @private
*/
updateCircleColor(d) {
const $$ = this;
const fn = $$.getStylePropValue($$.color);
return $$.config.point_radialGradient ? $$.getGradienColortUrl(d.id) : (fn ? fn(d) : null);
},
redrawCircle(cx, cy, withTransition, flow, isSub = false) {
const $$ = this;
const { state: { rendered }, $el, $T } = $$;
const $root = isSub ? $el.subchart : $el;
const selectedCircles = $root.main.selectAll(`.${$SELECT.selectedCircle}`);
if (!$$.config.point_show) {
return [];
}
const posAttr = $$.isCirclePoint() ? "c" : "";
const t = getRandom();
const opacityStyleFn = $$.opacityForCircle.bind($$);
// For standard circle type, batch the update across all circles in one pass
if ($$.isCirclePoint()) {
const sel = $root.circle;
if ($$.hasType("bubble")) {
sel.attr("r", $$.pointR.bind($$));
}
if (withTransition) {
flow && sel.attr("cx", cx);
// Only animate circles that already have a position; new circles jump directly
// to avoid them sliding in from the origin (cx=0).
// Use a distinct transition name from the opacity transition below —
// reusing the same name would interrupt the cx/cy transition before
// it can commit, leaving circles stranded at their old scale positions.
$T(sel.filter(function () {
return !!this.getAttribute("cx");
}), true, `${t}-pos`)
.attr("cx", cx).attr("cy", cy).style("fill", $$.updateCircleColor.bind($$));
sel.filter(function () {
return !this.getAttribute("cx");
})
.attr("cx", cx).attr("cy", cy).style("fill", $$.updateCircleColor.bind($$));
}
else {
sel.attr("cx", cx).attr("cy", cy).style("fill", $$.updateCircleColor.bind($$));
}
const result = $T(sel, withTransition || !rendered, t)
.style("opacity", opacityStyleFn);
return [
[result],
$T(selectedCircles, withTransition).attr("cx", cx).attr("cy", cy)
];
}
const fn = $$.point("update", $$, cx, cy, $$.updateCircleColor.bind($$), withTransition, flow, selectedCircles);
const mainCircles = [];
$root.circle.each(function (d) {
let result = fn.bind(this)(d);
result = $T(result, withTransition || !rendered, t)
.style("opacity", opacityStyleFn);
mainCircles.push(result);
});
return [
mainCircles,
$T(selectedCircles, withTransition)
.attr(`${posAttr}x`, cx)
.attr(`${posAttr}y`, cy)
];
},
/**
* Show focused data point circle
* @param {object} d Selected data
* @private
*/
showCircleFocus(d) {
const $$ = this;
const { state: { hasRadar, resizing, toggling, transiting }, $el } = $$;
let { circle } = $el;
if (transiting === false && circle && $$.isPointFocusOnly()) {
const cx = (hasRadar ? $$.radarCircleX : $$.circleX).bind($$);
const cy = (hasRadar ? $$.radarCircleY : $$.circleY).bind($$);
const withTransition = toggling || isUndefined(d);
const fn = $$.point("update", $$, cx, cy, $$.getStylePropValue($$.color), resizing ? false : withTransition);
if (d) {
circle = circle
.filter(function (t) {
const data = d.filter?.(v => v.id === t.id);
return data.length ? select(this).datum(data[0]) : false;
});
}
circle
.attr("class", this.updatePointClass.bind(this))
.style("opacity", null)
.each(function (d) {
const { id, index, value } = d;
let visibility = "hidden";
if (isValue(value)) {
fn.bind(this)(d);
$$.expandCircles(index, id);
visibility = "";
}
this.style.visibility = visibility;
});
}
},
/**
* Hide focused data point circle
* @private
*/
hideCircleFocus() {
const $$ = this;
const { $el: { circle } } = $$;
if ($$.isPointFocusOnly() && circle) {
$$.unexpandCircles();
circle.style("visibility", "hidden");
}
},
expandCircles(i, id, reset) {
const $$ = this;
const r = $$.pointExpandedR.bind($$);
reset && $$.unexpandCircles();
const circles = $$.getShapeByIndex("circle", i, id).classed($COMMON.EXPANDED, true);
const scale = r(circles) / $$.config.point_r;
const ratio = 1 - scale;
if ($$.isCirclePoint()) {
circles.attr("r", r);
}
else {
// transform must be applied to each node individually
circles.each(function () {
const point = select(this);
if (this.tagName === "circle") {
point.attr("r", r);
}
else {
const { width, height } = getPointBBox(this);
const x = ratio * (+point.attr("x") + width / 2);
const y = ratio * (+point.attr("y") + height / 2);
point.attr("transform", `translate(${x} ${y}) scale(${scale})`);
}
});
}
},
unexpandCircles(i) {
const $$ = this;
const r = $$.pointR.bind($$);
const circles = $$.getShapeByIndex("circle", i)
.filter(function () {
return select(this).classed($COMMON.EXPANDED);
})
.classed($COMMON.EXPANDED, false);
circles.attr("r", r);
if (!$$.isCirclePoint()) {
const scale = r(circles) / $$.config.point_r;
circles.attr("transform", scale !== 1 ? `scale(${scale})` : null);
}
},
isWithinCircle(node, r) {
const { state } = this;
const mouse = getPointer(state.event, node);
const element = select(node);
const prefix = this.isCirclePoint(node) ? "c" : "";
const pointSensitivity = this.getPointSensitivity(element?.datum());
let cx = +element.attr(`${prefix}x`);
let cy = +element.attr(`${prefix}y`);
// if node don't have cx/y or x/y attribute value
if (!(cx || cy) && node.nodeType === 1) {
const { x, y } = getBoundingRect(node);
cx = x;
cy = y;
}
return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < (r || pointSensitivity);
},
updatePointClass(d) {
const $$ = this;
const { circle } = $$.$el;
let pointClass = false;
if (isObject(d) || circle) {
pointClass = d === true ?
circle.each(function (d) {
let className = $$.getClass("circle", true)(d);
if (this.getAttribute("class").indexOf($COMMON.EXPANDED) > -1) {
className += ` ${$COMMON.EXPANDED}`;
}
this.setAttribute("class", className);
}) :
$$.getClass("circle", true)(d);
}
return pointClass;
},
custom: {
create(element, id, fillStyleFn) {
return element.append("use")
.attr("xlink:href", `#${id}`)
.attr("class", this.updatePointClass.bind(this))
.style("fill", fillStyleFn)
.node();
},
update(element, xPosFn, yPosFn, fillStyleFn, withTransition, flow, selectedCircles) {
const $$ = this;
const { width, height } = getPointBBox(element.node());
const xPosFn2 = d => (isValue(d.value) ? xPosFn(d) - width / 2 : 0);
const yPosFn2 = d => (isValue(d.value) ? yPosFn(d) - height / 2 : 0);
let mainCircles = element;
if (withTransition) {
flow && mainCircles.attr("x", xPosFn2);
mainCircles = $$.$T(mainCircles, withTransition, getTransitionName());
selectedCircles && $$.$T(selectedCircles, withTransition, getTransitionName());
}
return mainCircles
.attr("x", xPosFn2)
.attr("y", yPosFn2)
.style("fill", fillStyleFn);
}
},
// 'circle' data point
circle: {
create(element, sizeFn, fillStyleFn) {
return element.append("circle")
.attr("class", this.updatePointClass.bind(this))
.attr("r", sizeFn)
.style("fill", fillStyleFn)
.node();
},
update(element, xPosFn, yPosFn, fillStyleFn, withTransition, flow, selectedCircles) {
const $$ = this;
let mainCircles = element;
// when '.load()' called, bubble size should be updated
if ($$.hasType("bubble")) {
mainCircles.attr("r", $$.pointR.bind($$));
}
if (withTransition) {
flow && mainCircles.attr("cx", xPosFn);
if (mainCircles.attr("cx")) {
mainCircles = $$.$T(mainCircles, withTransition, getTransitionName());
}
selectedCircles && $$.$T(selectedCircles, withTransition, getTransitionName());
}
return mainCircles
.attr("cx", xPosFn)
.attr("cy", yPosFn)
.style("fill", fillStyleFn);
}
},
// 'rectangle' data point
rectangle: {
create(element, sizeFn, fillStyleFn) {
const rectSizeFn = d => sizeFn(d) * 2.0;
return element.append("rect")
.attr("class", this.updatePointClass.bind(this))
.attr("width", rectSizeFn)
.attr("height", rectSizeFn)
.style("fill", fillStyleFn)
.node();
},
update(element, xPosFn, yPosFn, fillStyleFn, withTransition, flow, selectedCircles) {
const $$ = this;
const r = $$.config.point_r;
const rectXPosFn = d => xPosFn(d) - r;
const rectYPosFn = d => yPosFn(d) - r;
let mainCircles = element;
if (withTransition) {
flow && mainCircles.attr("x", rectXPosFn);
mainCircles = $$.$T(mainCircles, withTransition, getTransitionName());
selectedCircles && $$.$T(selectedCircles, withTransition, getTransitionName());
}
return mainCircles
.attr("x", rectXPosFn)
.attr("y", rectYPosFn)
.style("fill", fillStyleFn);
}
}
};
export { shapePoint as default };