6070936337

Committed 04 Sep 2023 08:21AM UTC coverage: 94.261% (-0.09%) from 94.353%

Build # 6070936337

Build Type

push

github

Committed by

web-flow

Commit Message

fix(shape): Fix circleY() undefined error

- Make .circleY() visible and included as part of common
- Move .circleY() to shape.ts file

Fix #3388

Run Details

5982 of 6625 branches covered (0.0%)

Branch coverage included in aggregate %.

10 of 12 new or added lines in 2 files covered. (83.33%)

6 existing lines in 1 file now uncovered.

7732 of 7924 relevant lines covered (97.58%)

21305.79 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.07

/src/ChartInternal/shape/point.ts

/**
 * Copyright (c) 2017 ~ present NAVER Corp.
 * billboard.js project is licensed under the MIT license
 */
import {
        namespaces as d3Namespaces,
        select as d3Select
} from "d3-selection";
import type {d3Selection} from "../../../types/types";
import {$CIRCLE, $COMMON, $SELECT} from "../../config/classes";
import {document} from "../../module/browser";
import type {IDataPoint, IDataRow} from "../data/IData";
import {getBoundingRect, getPointer, getRandom, isFunction, isObject, isObjectType, isUndefined, isValue, toArray, notEmpty} from "../../module/util";

const getTransitionName = () => getRandom();

export default {
        hasValidPointType(type?: string): boolean {
                return /^(circle|rect(angle)?|polygon|ellipse|use)$/i.test(type || this.config.point_type);
        },

        hasValidPointDrawMethods(type?: string): boolean {
                const pointType = type || this.config.point_type;

                return isObjectType(pointType) &&
                        isFunction(pointType.create) && isFunction(pointType.update);
        },

        initialOpacityForCircle(d): string | number | null {
                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): string | number | null {
                const {config} = this;
                let opacity = config.point_opacity;

                if (isUndefined(opacity)) {
                        opacity = config.point_show && !config.point_focus_only ? null : "0";

                        opacity = isValue(this.getBaseValue(d)) ?
                                (this.isBubbleType(d) || this.isScatterType(d) ?
                                        "0.5" : opacity) : "0";
                }

                return opacity;
        },

        initCircle(): void {
                const $$ = this;
                const {$el: {main}} = $$;

                $$.point = $$.generatePoint();

                if (($$.hasType("bubble") || $$.hasType("scatter")) && main.select(`.${$CIRCLE.chartCircles}`).empty()) {
                        main.select(`.${$COMMON.chart}`)
                                .append("g")
                                .attr("class", $CIRCLE.chartCircles);
                }
        },

        updateTargetForCircle(targetsValue, enterNodeValue): void {
                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;
                }

                !$el.circle && $$.initCircle();

                let targets = targetsValue;
                let enterNode = enterNodeValue;

                // only for scatter & bubble type should generate seprate <g> node
                if (!targets) {
                        targets = (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 = d3Select(this.parentNode);

                                // if the parent node is .bb-chart-circles (bubble, scatter), initialize <g bb-circles> with opacity "0"
                                return parent.attr("class").indexOf($CIRCLE.chartCircles) > -1 ? "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): void {
                const $$ = this;
                const {config, state, $el} = $$;
                const focusOnly = config.point_focus_only;
                const $root = isSub ? $el.subchart : $el;

                if (config.point_show && !state.toggling) {
                        const circles = $root.main.selectAll(`.${$CIRCLE.circles}`)
                                .selectAll(`.${$CIRCLE.circle}`)
                                .data(d => (
                                        ($$.isLineType(d) && $$.shouldDrawPointsForLine(d)) ||
                                                $$.isBubbleType(d) || $$.isRadarType(d) || $$.isScatterType(d) ?
                                                (focusOnly ? [d.values[0]] : d.values) : [])
                                );

                        circles.exit().remove();

                        circles.enter()
                                .filter(Boolean)
                                .append($$.point("create", this, $$.pointR.bind($$), $$.getStylePropValue($$.color)));

                        $root.circle = $root.main.selectAll(`.${$CIRCLE.circles} .${$CIRCLE.circle}`)
                                .style("stroke", $$.getStylePropValue($$.color))
                                .style("opacity", $$.initialOpacityForCircle.bind($$));
                }
        },

        redrawCircle(cx: Function, cy: Function, withTransition: boolean, 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 fn = $$.point("update", $$, cx, cy, $$.getStylePropValue($$.color), withTransition, flow, selectedCircles);
                const posAttr = $$.isCirclePoint() ? "c" : "";

                const t = getRandom();
                const opacityStyleFn = $$.opacityForCircle.bind($$);
                const mainCircles: any[] = [];

                $root.circle.each(function(d) {
                        let result: d3Selection | any = 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?: IDataRow[]): void {
                const $$ = this;
                const {config, state: {hasRadar, resizing, toggling, transiting}, $el} = $$;
                let {circle} = $el;

                if (transiting === false && config.point_focus_only && circle) {
                        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 ?
                                                        d3Select(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(): void {
                const $$ = this;
                const {config, $el: {circle}} = $$;

                if (config.point_focus_only && circle) {
                        $$.unexpandCircles();
                        circle.style("visibility", "hidden");
                }
        },

        circleX(d): number | null {
                return this.xx(d);
        },

        updateCircleY(isSub = false): Function {
                const $$ = this;
                const getPoints = $$.generateGetLinePoints($$.getShapeIndices($$.isLineType), isSub);

                return (d, i) => {
                        const id = d.id;

                        return $$.isGrouped(id) ?
                                getPoints(d, i)[0][1] :
                                $$.getYScaleById(id, isSub)($$.getBaseValue(d));
                };
        },

        expandCircles(i: number, id: string, reset?: boolean): void {
                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 = d3Select(this);

                                if (this.tagName === "circle") {
                                        point.attr("r", r);
                                } else {
                                        const {width, height} = this.getBBox();
                                        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): void {
                const $$ = this;
                const r = $$.pointR.bind($$);

                const circles = $$.getShapeByIndex("circle", i)
                        .filter(function() {
                                return d3Select(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);
                }
        },

        pointR(d): number {
                const $$ = this;
                const {config} = $$;
                const pointR = config.point_r;
                let r = pointR;

                if ($$.isBubbleType(d)) {
                        r = $$.getBubbleR(d);
                } else if (isFunction(pointR)) {
                        r = pointR.bind($$.api)(d);
                }

                d.r = r;

                return r;
        },

        pointExpandedR(d): number {
                const $$ = this;
                const {config} = $$;
                const scale = $$.isBubbleType(d) ? 1.15 : 1.75;

                return config.point_focus_expand_enabled ?
                        (config.point_focus_expand_r || $$.pointR(d) * scale) : $$.pointR(d);
        },

        pointSelectR(d): number {
                const $$ = this;
                const selectR = $$.config.point_select_r;

                return isFunction(selectR) ?
                        selectR(d) : (selectR || $$.pointR(d) * 4);
        },

        isWithinCircle(node: SVGElement, r?: number): boolean {
                const mouse = getPointer(this.state.event, node);
                const element = d3Select(node);
                const prefix = this.isCirclePoint(node) ? "c" : "";
                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 || this.config.point_sensitivity);
        },

        /**
         * Get data point sensitivity radius
         * @param {object} d Data point object
         * @returns {number} return the sensitivity value
         */
        getPointSensitivity(d: IDataPoint) {
                const $$ = this;
                let sensitivity = $$.config.point_sensitivity;

                if (isFunction(sensitivity)) {
                        sensitivity = sensitivity.call($$.api, d);
                } else if (sensitivity === "radius") {
                        sensitivity = d.r;
                }

                return sensitivity;
        },

        insertPointInfoDefs(point, id: string): void {
                const $$ = this;
                const copyAttr = (from, target) => {
                        const attribs = from.attributes;

                        for (let i = 0, name; (name = attribs[i]); i++) {
                                name = name.name;
                                target.setAttribute(name, from.getAttribute(name));
                        }
                };

                const doc = new DOMParser().parseFromString(point, "image/svg+xml");
                const node = doc.documentElement;
                const clone = document.createElementNS(d3Namespaces.svg, node.nodeName.toLowerCase());

                clone.id = id;
                clone.style.fill = "inherit";
                clone.style.stroke = "inherit";

                copyAttr(node, clone);

                if (node.childNodes?.length) {
                        const parent = d3Select(clone);

                        if ("innerHTML" in clone) {
                                parent.html(node.innerHTML);
                        } else {
                                toArray(node.childNodes).forEach(v => {
                                        copyAttr(v, parent.append(v.tagName).node());
                                });
                        }
                }

                $$.$el.defs.node().appendChild(clone);
        },

        pointFromDefs(id: string) {
                return this.$el.defs.select(`#${id}`);
        },

        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;
        },

        generateGetLinePoints(lineIndices, isSub?: boolean):Function { // partial duplication of generateGetBarPoints
                const $$ = this;
                const {config} = $$;
                const x = $$.getShapeX(0, lineIndices, isSub);
                const y = $$.getShapeY(isSub);
                const lineOffset = $$.getShapeOffset($$.isLineType, lineIndices, isSub);
                const yScale = $$.getYScaleById.bind($$);

                return (d, i) => {
                        const y0 = yScale.call($$, d.id, isSub)($$.getShapeYMin(d.id));
                        const offset = lineOffset(d, i) || y0; // offset is for stacked area chart
                        const posX = x(d);
                        let posY = y(d);

                        // fix posY not to overflow opposite quadrant
                        if (config.axis_rotated && (
                                (d.value > 0 && posY < y0) || (d.value < 0 && y0 < posY)
                        )) {
                                posY = y0;
                        }

                        // 1 point that marks the line position
                        const point = [posX, posY - (y0 - offset)];

                        return [
                                point,
                                point, // from here and below, needed for compatibility
                                point,
                                point
                        ];
                };
        },

        generatePoint(): Function {
                const $$ = this;
                const {config, state: {datetimeId}} = $$;
                const ids: string[] = [];
                const pattern = notEmpty(config.point_pattern) ? config.point_pattern : [config.point_type];

                return function(method, context, ...args) {
                        return function(d) {
                                const id: string = $$.getTargetSelectorSuffix(d.id || d.data?.id || d);
                                const element = d3Select(this);

                                ids.indexOf(id) < 0 && ids.push(id);

                                let point = pattern[ids.indexOf(id) % pattern.length];

                                if ($$.hasValidPointType(point)) {
                                        point = $$[point];
                                } else if (!$$.hasValidPointDrawMethods(point)) {
                                        const pointId = `${datetimeId}-point${id}`;
                                        const pointFromDefs = $$.pointFromDefs(pointId);

                                        if (pointFromDefs.size() < 1) {
                                                $$.insertPointInfoDefs(point, pointId);
                                        }

                                        if (method === "create") {
                                                return $$.custom.create.bind(context)(element, pointId, ...args);
                                        } else if (method === "update") {
                                                return $$.custom.update.bind(context)(element, ...args);
                                        }
                                }

                                return point[method].bind(context)(element, ...args);
                        };
                };
        },

        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} = element.node().getBBox();

                        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(mainCircles, 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);
                }
        }
};

1	/**
2	* Copyright (c) 2017 ~ present NAVER Corp.
3	* billboard.js project is licensed under the MIT license
4	*/
5	import {
6	namespaces as d3Namespaces,
7	select as d3Select
8	} from "d3-selection";
9	import type {d3Selection} from "../../../types/types";
10	import {$CIRCLE, $COMMON, $SELECT} from "../../config/classes";
11	import {document} from "../../module/browser";
12	import type {IDataPoint, IDataRow} from "../data/IData";
13	import {getBoundingRect, getPointer, getRandom, isFunction, isObject, isObjectType, isUndefined, isValue, toArray, notEmpty} from "../../module/util";
14
15	const getTransitionName = () => getRandom();	8,640✔
16
17	export default {
18	hasValidPointType(type?: string): boolean {
19	return /^(circle\|rect(angle)?\|polygon\|ellipse\|use)$/i.test(type \|\| this.config.point_type);	85,857!
20	},
21
22	hasValidPointDrawMethods(type?: string): boolean {
23	const pointType = type \|\| this.config.point_type;	750!
24
25	return isObjectType(pointType) &&	750!
26	isFunction(pointType.create) && isFunction(pointType.update);
27	},
28
29	initialOpacityForCircle(d): string \| number \| null {
30	const {config, state: {withoutFadeIn}} = this;	39,405✔
31	let opacity = config.point_opacity;	39,405✔
32
33	if (isUndefined(opacity)) {	39,405✔
34	opacity = this.getBaseValue(d) !== null &&	39,324✔
35	withoutFadeIn[d.id] ? this.opacityForCircle(d) : "0";	39,324✔
36	}
37
38	return opacity;	39,405✔
39	},
40
41	opacityForCircle(d): string \| number \| null {
42	const {config} = this;	58,722✔
43	let opacity = config.point_opacity;	58,722✔
44
45	if (isUndefined(opacity)) {	58,722✔
46	opacity = config.point_show && !config.point_focus_only ? null : "0";	58,641✔
47
48	opacity = isValue(this.getBaseValue(d)) ?	58,641✔
49	(this.isBubbleType(d) \|\| this.isScatterType(d) ?	174,276✔
50	"0.5" : opacity) : "0";	58,239✔
51	}
52
53	return opacity;	58,722✔
54	},
55
56	initCircle(): void {
57	const $$ = this;	3,210✔
58	const {$el: {main}} = $$;	3,210✔
59
60	$$.point = $$.generatePoint();	3,210✔
61
62	if (($$.hasType("bubble") \|\| $$.hasType("scatter")) && main.select(`.${$CIRCLE.chartCircles}`).empty()) {	3,210✔
63	main.select(`.${$COMMON.chart}`)	207✔
64	.append("g")
65	.attr("class", $CIRCLE.chartCircles);
66	}
67	},
68
69	updateTargetForCircle(targetsValue, enterNodeValue): void {	3,414✔
70	const $$ = this;	3,414✔
71	const {config, data, $el} = $$;	3,414✔
72	const selectionEnabled = config.interaction_enabled && config.data_selection_enabled;	3,414✔
73	const isSelectable = selectionEnabled && config.data_selection_isselectable;	3,414✔
74	const classCircles = $$.getClass("circles", true);	3,414✔
75
76	if (!config.point_show) {	3,414✔
77	return;	12✔
78	}
79
80	!$el.circle && $$.initCircle();	3,402✔
81
82	let targets = targetsValue;	3,402✔
83	let enterNode = enterNodeValue;	3,402✔
84
85	// only for scatter & bubble type should generate seprate <g> node
86	if (!targets) {	3,402✔
87	targets = (data.targets)	210✔
88	.filter(d => this.isScatterType(d) \|\| this.isBubbleType(d));	399✔
89
90	const mainCircle = $el.main.select(`.${$CIRCLE.chartCircles}`)	210✔
91	.style("pointer-events", "none")
92	.selectAll(`.${$CIRCLE.circles}`)
93	.data(targets);
94
95	mainCircle.exit().remove();	210✔
96	enterNode = mainCircle.enter();	210✔
97	}
98
99	// Circles for each data point on lines
100	selectionEnabled && enterNode.append("g")	3,402✔
101	.attr("class", d => $$.generateClass($SELECT.selectedCircles, d.id));	87✔
102
103	enterNode.append("g")	3,402✔
104	.attr("class", classCircles)
105	.call(selection => {	3,402✔
106	$$.setCssRule(true, `.${$CIRCLE.circles}`, ["cursor:pointer"], isSelectable)(selection);	3,402✔
107	$$.setCssRule(true, ` .${$CIRCLE.circle}`, ["fill", "stroke"], $$.color)(selection);	3,402✔
108	})
109	.style("opacity", function() {
110	const parent = d3Select(this.parentNode);	6,009✔
111
112	// if the parent node is .bb-chart-circles (bubble, scatter), initialize <g bb-circles> with opacity "0"
113	return parent.attr("class").indexOf($CIRCLE.chartCircles) > -1 ? "0" : null;	6,009✔
114	});
115
116	// Update date for selected circles
117	selectionEnabled && targets.forEach(t => {	3,402✔
118	$el.main.selectAll(`.${$SELECT.selectedCircles}${$$.getTargetSelectorSuffix(t.id)}`)	87✔
119	.selectAll(`${$SELECT.selectedCircle}`)
120	.each(d => {	×
121	d.value = t.values[d.index].value;	×
122	});
123	});
124	},
125
126	updateCircle(isSub = false): void {	4,092!
127	const $$ = this;	4,092✔
128	const {config, state, $el} = $$;	4,092✔
129	const focusOnly = config.point_focus_only;	4,092✔
130	const $root = isSub ? $el.subchart : $el;	4,092!
131
132	if (config.point_show && !state.toggling) {	4,092✔
133	const circles = $root.main.selectAll(`.${$CIRCLE.circles}`)	3,909✔
134	.selectAll(`.${$CIRCLE.circle}`)
135	.data(d => (	7,140✔
136	($$.isLineType(d) && $$.shouldDrawPointsForLine(d)) \|\|	14,733✔
137	$$.isBubbleType(d) \|\| $$.isRadarType(d) \|\| $$.isScatterType(d) ?
138	(focusOnly ? [d.values[0]] : d.values) : [])	14,265✔
139	);
140
141	circles.exit().remove();	3,909✔
142
143	circles.enter()	3,909✔
144	.filter(Boolean)
145	.append($$.point("create", this, $$.pointR.bind($$), $$.getStylePropValue($$.color)));
146
147	$root.circle = $root.main.selectAll(`.${$CIRCLE.circles} .${$CIRCLE.circle}`)	3,909✔
148	.style("stroke", $$.getStylePropValue($$.color))
149	.style("opacity", $$.initialOpacityForCircle.bind($$));
150	}
151	},
152
153	redrawCircle(cx: Function, cy: Function, withTransition: boolean, flow, isSub = false) {	4,902!
154	const $$ = this;	4,902✔
155	const {state: {rendered}, $el, $T} = $$;	4,902✔
156	const $root = isSub ? $el.subchart : $el;	4,902!
157	const selectedCircles = $root.main.selectAll(`.${$SELECT.selectedCircle}`);	4,902✔
158
159	if (!$$.config.point_show) {	4,902✔
160	return [];	15✔
161	}
162
163	const fn = $$.point("update", $$, cx, cy, $$.getStylePropValue($$.color), withTransition, flow, selectedCircles);	4,887✔
164	const posAttr = $$.isCirclePoint() ? "c" : "";	4,887✔
165
166	const t = getRandom();	4,887✔
167	const opacityStyleFn = $$.opacityForCircle.bind($$);	4,887✔
168	const mainCircles: any[] = [];	4,887✔
169
170	$root.circle.each(function(d) {	4,887✔
171	let result: d3Selection \| any = fn.bind(this)(d);	52,356✔
172
173	result = $T(result, withTransition \|\| !rendered, t)	52,356✔
174	.style("opacity", opacityStyleFn);
175
176	mainCircles.push(result);	52,356✔
177	});
178
179	return [	4,887✔
180	mainCircles,
181	$T(selectedCircles, withTransition)
182	.attr(`${posAttr}x`, cx)
183	.attr(`${posAttr}y`, cy)
184	];
185	},
186
187	/**
188	* Show focused data point circle
189	* @param {object} d Selected data
190	* @private
191	*/
192	showCircleFocus(d?: IDataRow[]): void {
193	const $$ = this;	1,272✔
194	const {config, state: {hasRadar, resizing, toggling, transiting}, $el} = $$;	1,272✔
195	let {circle} = $el;	1,272✔
196
197	if (transiting === false && config.point_focus_only && circle) {	1,272✔
198	const cx = (hasRadar ? $$.radarCircleX : $$.circleX).bind($$);	45✔
199	const cy = (hasRadar ? $$.radarCircleY : $$.circleY).bind($$);	45✔
200	const withTransition = toggling \|\| isUndefined(d);	45✔
201	const fn = $$.point("update", $$, cx, cy, $$.getStylePropValue($$.color), resizing ? false : withTransition);	45!
202
203	if (d) {	45!
204	circle = circle	45✔
205	.filter(function(t) {	102✔
206	const data = d.filter?.(v => v.id === t.id);	192!
207
208	return data.length ?	102✔
209	d3Select(this).datum(data[0]) : false;	102✔
210	});
211	}
212
213	circle	45✔
214	.attr("class", this.updatePointClass.bind(this))
215	.style("opacity", null)
216	.each(function(d) {
217	const {id, index, value} = d;	78✔
218	let visibility = "hidden";	78✔
219
220	if (isValue(value)) {	78✔
221	fn.bind(this)(d);	75✔
222	$$.expandCircles(index, id);	75✔
223	visibility = "";	75✔
224	}
225
226	this.style.visibility = visibility;	78✔
227	});
228	}
229	},
230
231	/**
232	* Hide focused data point circle
233	* @private
234	*/
235	hideCircleFocus(): void {
236	const $$ = this;	558✔
237	const {config, $el: {circle}} = $$;	558✔
238
239	if (config.point_focus_only && circle) {	558✔
240	$$.unexpandCircles();	12✔
241	circle.style("visibility", "hidden");	12✔
242	}
243	},
244
245	circleX(d): number \| null {
246	return this.xx(d);	52,542✔
247	},
248
UNCOV 249	updateCircleY(isSub = false): Function {	×
UNCOV 250	const $$ = this;	×
UNCOV 251	const getPoints = $$.generateGetLinePoints($$.getShapeIndices($$.isLineType), isSub);	×
252
UNCOV 253	return (d, i) => {	×
UNCOV 254	const id = d.id;	×
255
UNCOV 256	return $$.isGrouped(id) ?	×
257	getPoints(d, i)[0][1] :	×
258	$$.getYScaleById(id, isSub)($$.getBaseValue(d));
259	};
260	},
261
262	expandCircles(i: number, id: string, reset?: boolean): void {
263	const $$ = this;	585✔
264	const r = $$.pointExpandedR.bind($$);	585✔
265
266	reset && $$.unexpandCircles();	585✔
267
268	const circles = $$.getShapeByIndex("circle", i, id).classed($COMMON.EXPANDED, true);	585✔
269	const scale = r(circles) / $$.config.point_r;	585✔
270	const ratio = 1 - scale;	585✔
271
272	if ($$.isCirclePoint()) {	585✔
273	circles.attr("r", r);	570✔
274	} else {
275	// transform must be applied to each node individually
276	circles.each(function() {	15✔
277	const point = d3Select(this);	21✔
278
279	if (this.tagName === "circle") {	21✔
280	point.attr("r", r);	6✔
281	} else {
282	const {width, height} = this.getBBox();	15✔
283	const x = ratio * (+point.attr("x") + width / 2);	15✔
284	const y = ratio * (+point.attr("y") + height / 2);	15✔
285
286	point.attr("transform", `translate(${x} ${y}) scale(${scale})`);	15✔
287	}
288	});
289	}
290	},
291
292	unexpandCircles(i): void {
293	const $$ = this;	822✔
294	const r = $$.pointR.bind($$);	822✔
295
296	const circles = $$.getShapeByIndex("circle", i)	822✔
297	.filter(function() {
298	return d3Select(this).classed($COMMON.EXPANDED);	7,476✔
299	})
300	.classed($COMMON.EXPANDED, false);
301
302	circles.attr("r", r);	822✔
303
304	if (!$$.isCirclePoint()) {	822✔
305	const scale = r(circles) / $$.config.point_r;	9✔
306
307	circles.attr("transform", scale !== 1 ? `scale(${scale})` : null);	9!
308	}
309	},
310
311	pointR(d): number {
312	const $$ = this;	36,519✔
313	const {config} = $$;	36,519✔
314	const pointR = config.point_r;	36,519✔
315	let r = pointR;	36,519✔
316
317	if ($$.isBubbleType(d)) {	36,519✔
318	r = $$.getBubbleR(d);	1,680✔
319	} else if (isFunction(pointR)) {	34,839!
320	r = pointR.bind($$.api)(d);	×
321	}
322
323	d.r = r;	36,519✔
324
325	return r;	36,519✔
326	},
327
328	pointExpandedR(d): number {
329	const $$ = this;	1,515✔
330	const {config} = $$;	1,515✔
331	const scale = $$.isBubbleType(d) ? 1.15 : 1.75;	1,515✔
332
333	return config.point_focus_expand_enabled ?	1,515✔
334	(config.point_focus_expand_r \|\| $$.pointR(d) * scale) : $$.pointR(d);	4,527!
335	},
336
337	pointSelectR(d): number {
338	const $$ = this;	201✔
339	const selectR = $$.config.point_select_r;	201✔
340
341	return isFunction(selectR) ?	201✔
342	selectR(d) : (selectR \|\| $$.pointR(d) * 4);	603!
343	},
344
345	isWithinCircle(node: SVGElement, r?: number): boolean {
346	const mouse = getPointer(this.state.event, node);	414✔
347	const element = d3Select(node);	414✔
348	const prefix = this.isCirclePoint(node) ? "c" : "";	414✔
349	let cx = +element.attr(`${prefix}x`);	414✔
350	let cy = +element.attr(`${prefix}y`);	414✔
351
352	// if node don't have cx/y or x/y attribute value
353	if (!(cx \|\| cy) && node.nodeType === 1) {	414!
354	const {x, y} = getBoundingRect(node);	×
355
356	cx = x;	×
357	cy = y;	×
358	}
359
360	return Math.sqrt(	414✔
361	Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)
362	) < (r \|\| this.config.point_sensitivity);	825✔
363	},
364
365	/**
366	* Get data point sensitivity radius
367	* @param {object} d Data point object
368	* @returns {number} return the sensitivity value
369	*/
370	getPointSensitivity(d: IDataPoint) {
371	const $$ = this;	843✔
372	let sensitivity = $$.config.point_sensitivity;	843✔
373
374	if (isFunction(sensitivity)) {	843✔
375	sensitivity = sensitivity.call($$.api, d);	45✔
376	} else if (sensitivity === "radius") {	798✔
377	sensitivity = d.r;	45✔
378	}
379
380	return sensitivity;	843✔
381	},
382
383	insertPointInfoDefs(point, id: string): void {	81✔
384	const $$ = this;	81✔
385	const copyAttr = (from, target) => {	81✔
386	const attribs = from.attributes;	81✔
387
388	for (let i = 0, name; (name = attribs[i]); i++) {	81✔
389	name = name.name;	54✔
390	target.setAttribute(name, from.getAttribute(name));	54✔
391	}
392	};
393
394	const doc = new DOMParser().parseFromString(point, "image/svg+xml");	81✔
395	const node = doc.documentElement;	81✔
396	const clone = document.createElementNS(d3Namespaces.svg, node.nodeName.toLowerCase());	81✔
397
398	clone.id = id;	81✔
399	clone.style.fill = "inherit";	81✔
400	clone.style.stroke = "inherit";	81✔
401
402	copyAttr(node, clone);	81✔
403
404	if (node.childNodes?.length) {	81✔
405	const parent = d3Select(clone);	33✔
406
407	if ("innerHTML" in clone) {	33!
408	parent.html(node.innerHTML);	33✔
409	} else {
410	toArray(node.childNodes).forEach(v => {	×
411	copyAttr(v, parent.append(v.tagName).node());	×
412	});
413	}
414	}
415
416	$$.$el.defs.node().appendChild(clone);	81✔
417	},
418
419	pointFromDefs(id: string) {
420	return this.$el.defs.select(`#${id}`);	750✔
421	},
422
423	updatePointClass(d) {
424	const $$ = this;	38,979✔
425	const {circle} = $$.$el;	38,979✔
426	let pointClass = false;	38,979✔
427
428	if (isObject(d) \|\| circle) {	38,979✔
429	pointClass = d === true ?	34,605✔
430	circle.each(function(d) {	34,605✔
431	let className = $$.getClass("circle", true)(d);	19,905✔
432
433	if (this.getAttribute("class").indexOf($COMMON.EXPANDED) > -1) {	19,905✔
434	className += ` ${$COMMON.EXPANDED}`;	63✔
435	}
436
437	this.setAttribute("class", className);	19,905✔
438	}) : $$.getClass("circle", true)(d);
439	}
440
441	return pointClass;	38,979✔
442	},
443
444	generateGetLinePoints(lineIndices, isSub?: boolean):Function { // partial duplication of generateGetBarPoints	16,437✔
445	const $$ = this;	16,437✔
446	const {config} = $$;	16,437✔
447	const x = $$.getShapeX(0, lineIndices, isSub);	16,437✔
448	const y = $$.getShapeY(isSub);	16,437✔
449	const lineOffset = $$.getShapeOffset($$.isLineType, lineIndices, isSub);	16,437✔
450	const yScale = $$.getYScaleById.bind($$);	16,437✔
451
452	return (d, i) => {	16,437✔
453	const y0 = yScale.call($$, d.id, isSub)($$.getShapeYMin(d.id));	7,884✔
454	const offset = lineOffset(d, i) \|\| y0; // offset is for stacked area chart	7,884✔
455	const posX = x(d);	7,884✔
456	let posY = y(d);	7,884✔
457
458	// fix posY not to overflow opposite quadrant
459	if (config.axis_rotated && (	7,884!
460	(d.value > 0 && posY < y0) \|\| (d.value < 0 && y0 < posY)
461	)) {
462	posY = y0;	×
463	}
464
465	// 1 point that marks the line position
466	const point = [posX, posY - (y0 - offset)];	7,884✔
467
468	return [	7,884✔
469	point,
470	point, // from here and below, needed for compatibility
471	point,
472	point
473	];
474	};
475	},
476
477	generatePoint(): Function {
478	const $$ = this;	4,497✔
479	const {config, state: {datetimeId}} = $$;	4,497✔
480	const ids: string[] = [];	4,497✔
481	const pattern = notEmpty(config.point_pattern) ? config.point_pattern : [config.point_type];	4,497✔
482
483	return function(method, context, ...args) {	37,320✔
484	return function(d) {	8,841✔
485	const id: string = $$.getTargetSelectorSuffix(d.id \|\| d.data?.id \|\| d);	85,209!
486	const element = d3Select(this);	85,209✔
487
488	ids.indexOf(id) < 0 && ids.push(id);	85,209✔
489
490	let point = pattern[ids.indexOf(id) % pattern.length];	85,209✔
491
492	if ($$.hasValidPointType(point)) {	85,209✔
493	point = $$[point];	84,459✔
494	} else if (!$$.hasValidPointDrawMethods(point)) {	750!
495	const pointId = `${datetimeId}-point${id}`;	750✔
496	const pointFromDefs = $$.pointFromDefs(pointId);	750✔
497
498	if (pointFromDefs.size() < 1) {	750✔
499	$$.insertPointInfoDefs(point, pointId);	81✔
500	}
501
502	if (method === "create") {	750✔
503	return $$.custom.create.bind(context)(element, pointId, ...args);	375✔
504	} else if (method === "update") {	375!
505	return $$.custom.update.bind(context)(element, ...args);	375✔
506	}
507	}
508
509	return point[method].bind(context)(element, ...args);	84,459✔
510	};
511	};
512	},
513
514	custom: {
515	create(element, id, fillStyleFn) {
516	return element.append("use")	375✔
517	.attr("xlink:href", `#${id}`)
518	.attr("class", this.updatePointClass.bind(this))
519	.style("fill", fillStyleFn)
520	.node();
521	},
522
523	update(element, xPosFn, yPosFn, fillStyleFn,
524	withTransition, flow, selectedCircles) {	375✔
525	const $$ = this;	375✔
526	const {width, height} = element.node().getBBox();	375✔
527
528	const xPosFn2 = d => (isValue(d.value) ? xPosFn(d) - width / 2 : 0);	375✔
529	const yPosFn2 = d => (isValue(d.value) ? yPosFn(d) - height / 2 : 0);	375✔
530	let mainCircles = element;	375✔
531
532	if (withTransition) {	375!
533	flow && mainCircles.attr("x", xPosFn2);	×
534
535	mainCircles = $$.$T(mainCircles, withTransition, getTransitionName());	×
536	selectedCircles && $$.$T(selectedCircles, withTransition, getTransitionName());	×
537	}
538
539	return mainCircles	375✔
540	.attr("x", xPosFn2)
541	.attr("y", yPosFn2)
542	.style("fill", fillStyleFn);
543	}
544	},
545
546	// 'circle' data point
547	circle: {
548	create(element, sizeFn, fillStyleFn) {
549	return element.append("circle")	32,244✔
550	.attr("class", this.updatePointClass.bind(this))
551	.attr("r", sizeFn)
552	.style("fill", fillStyleFn)
553	.node();
554	},
555
556	update(element, xPosFn, yPosFn, fillStyleFn,
557	withTransition, flow, selectedCircles) {
558	const $$ = this;	51,888✔
559	let mainCircles = element;	51,888✔
560
561	// when '.load()' called, bubble size should be updated
562	if ($$.hasType("bubble")) {	51,888✔
563	mainCircles.attr("r", $$.pointR.bind($$));	1,281✔
564	}
565
566	if (withTransition) {	51,888✔
567	flow && mainCircles.attr("cx", xPosFn);	4,677✔
568
569	if (mainCircles.attr("cx")) {	4,677✔
570	mainCircles = $$.$T(mainCircles, withTransition, getTransitionName());	3,936✔
571	}
572
573	selectedCircles && $$.$T(mainCircles, withTransition, getTransitionName());	4,677✔
574	}
575
576	return mainCircles	51,888✔
577	.attr("cx", xPosFn)
578	.attr("cy", yPosFn)
579	.style("fill", fillStyleFn);
580	}
581	},
582
583	// 'rectangle' data point
584	rectangle: {
585	create(element, sizeFn, fillStyleFn) {	159✔
586	const rectSizeFn = d => sizeFn(d) * 2.0;	318✔
587
588	return element.append("rect")	159✔
589	.attr("class", this.updatePointClass.bind(this))
590	.attr("width", rectSizeFn)
591	.attr("height", rectSizeFn)
592	.style("fill", fillStyleFn)
593	.node();
594	},
595
596	update(element, xPosFn, yPosFn, fillStyleFn,
597	withTransition, flow, selectedCircles) {	168✔
598	const $$ = this;	168✔
599	const r = $$.config.point_r;	168✔
600	const rectXPosFn = d => xPosFn(d) - r;	180✔
601	const rectYPosFn = d => yPosFn(d) - r;	168✔
602
603	let mainCircles = element;	168✔
604
605	if (withTransition) {	168✔
606	flow && mainCircles.attr("x", rectXPosFn);	12✔
607
608	mainCircles = $$.$T(mainCircles, withTransition, getTransitionName());	12✔
609	selectedCircles && $$.$T(selectedCircles, withTransition, getTransitionName());	12✔
610	}
611
612	return mainCircles	168✔
613	.attr("x", rectXPosFn)
614	.attr("y", rectYPosFn)
615	.style("fill", fillStyleFn);
616	}
617	}
618	};

naver / billboard.js / 6070936337

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous