5962438354

Committed 24 Aug 2023 10:17AM UTC coverage: 92.898% (+0.2%) from 92.66%

Build # 5962438354

Build Type

push

github

Committed by

web-flow

Commit Message

fix(tooltip): Fix tootip display on tooltip.init

Fix tooltip initial call to call .tooltip.show() api
to follow internal flow process

Fix #3369

Run Details

5857 of 6626 branches covered (88.39%)

Branch coverage included in aggregate %.

7 of 7 new or added lines in 2 files covered. (100.0%)

2 existing lines in 1 file now uncovered.

7656 of 7920 relevant lines covered (96.67%)

21116.74 hits per line

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

85.96

/src/ChartInternal/internals/tooltip.ts

/**
 * Copyright (c) 2017 ~ present NAVER Corp.
 * billboard.js project is licensed under the MIT license
 */
import {select as d3Select} from "d3-selection";
import {document} from "../../module/browser";
import {$ARC, $TOOLTIP} from "../../config/classes";
import type {IArcData, IDataRow} from "../data/IData";
import {getPointer, isEmpty, isFunction, isObject, isString, isValue, callFn, sanitize, tplProcess, isUndefined, parseDate} from "../../module/util";

export default {
        /**
         * Initializes the tooltip
         * @private
         */
        initTooltip(): void {
                const $$ = this;
                const {config, $el} = $$;

                $el.tooltip = d3Select(config.tooltip_contents.bindto);

                if ($el.tooltip.empty()) {
                        $el.tooltip = $el.chart
                                .append("div")
                                .attr("class", $TOOLTIP.tooltipContainer)
                                .style("position", "absolute")
                                .style("pointer-events", "none")
                                .style("display", "none");
                }

                $$.bindTooltipResizePos();
        },

        /**
         * Show tooltip at initialization.
         * Is called only when tooltip.init.show=true option is set
         * @private
         */
        initShowTooltip(): void {
                const $$ = this;
                const {config, $el, state: {hasAxis, hasRadar}} = $$;

                // Show tooltip if needed
                if (config.tooltip_init_show) {
                        const isArc = !(hasAxis || hasRadar);

                        if ($$.axis?.isTimeSeries() && isString(config.tooltip_init_x)) {
                                config.tooltip_init_x = parseDate.call($$, config.tooltip_init_x);
                        }

                        $$.api.tooltip.show({
                                data: {
                                        [isArc ? "index" : "x"]: config.tooltip_init_x
                                }
                        });

                        const position = config.tooltip_init_position;

                        if (!config.tooltip_contents.bindto && !isEmpty(position)) {
                                const {top = 0, left = 50} = position;

                                $el.tooltip.style("top", isString(top) ? top : `${top}px`)
                                        .style("left", isString(left) ? left : `${left}px`)
                                        .style("display", null);
                        }
                }
        },

        /**
         * Get the tooltip HTML string
         * @param  {Array} args Arguments
         * @returns {string} Formatted HTML string
         * @private
         */
        getTooltipHTML(...args): string {
                const $$ = this;
                const {api, config} = $$;

                return isFunction(config.tooltip_contents) ?
                        config.tooltip_contents.bind(api)(...args) : $$.getTooltipContent(...args);
        },

        /**
         * Returns the tooltip content(HTML string)
         * @param {object} d data
         * @param {Function} defaultTitleFormat Default title format
         * @param {Function} defaultValueFormat Default format for each data value in the tooltip.
         * @param {Function} color Color function
         * @returns {string} html
         * @private
         */
        getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color): string {
                const $$ = this;
                const {api, config, state, $el} = $$;

                let [titleFormat, nameFormat, valueFormat] = ["title", "name", "value"].map(v => {
                        const fn = config[`tooltip_format_${v}`];

                        return isFunction(fn) ? fn.bind(api) : fn;
                });

                titleFormat = titleFormat || defaultTitleFormat;
                nameFormat = nameFormat || (name => name);
                valueFormat = valueFormat || (
                        state.hasTreemap || $$.isStackNormalized() ? (v, ratio) => `${(ratio * 100).toFixed(2)}%` : defaultValueFormat
                );

                const order = config.tooltip_order;
                const getRowValue = row => ($$.axis && $$.isBubbleZType(row) ? $$.getBubbleZData(row.value, "z") : $$.getBaseValue(row));
                const getBgColor = $$.levelColor ? row => $$.levelColor(row.value) : row => color(row);
                const contents = config.tooltip_contents;
                const tplStr = contents.template;
                const targetIds = $$.mapToTargetIds();

                if (order === null && config.data_groups.length) {
                        // for stacked data, order should aligned with the visually displayed data
                        const ids = $$.orderTargets($$.data.targets)
                                .map(i2 => i2.id)
                                .reverse();

                        d.sort((a, b) => {
                                let v1 = a ? a.value : null;
                                let v2 = b ? b.value : null;

                                if (v1 > 0 && v2 > 0) {
                                        v1 = a.id ? ids.indexOf(a.id) : null;
                                        v2 = b.id ? ids.indexOf(b.id) : null;
                                }

                                return v1 - v2;
                        });
                } else if (/^(asc|desc)$/.test(order)) {
                        const isAscending = order === "asc";

                        d.sort((a, b) => {
                                const v1 = a ? getRowValue(a) : null;
                                const v2 = b ? getRowValue(b) : null;

                                return isAscending ? v1 - v2 : v2 - v1;
                        });
                } else if (isFunction(order)) {
                        d.sort(order.bind(api));
                }

                const tpl = $$.getTooltipContentTemplate(tplStr);
                const len = d.length;
                let text;
                let row;
                let param;
                let value;
                let i;

                for (i = 0; i < len; i++) {
                        row = d[i];

                        if (!row || !(getRowValue(row) || getRowValue(row) === 0)) {
                                continue;
                        }

                        if (isUndefined(text)) {
                                const title = (state.hasAxis || state.hasRadar) &&
                                        sanitize(titleFormat ? titleFormat(row.x) : row.x);

                                text = tplProcess(tpl[0], {
                                        CLASS_TOOLTIP: $TOOLTIP.tooltip,
                                        TITLE: isValue(title) ? (
                                                tplStr ? title : `<tr><th colspan="2">${title}</th></tr>`
                                        ) : ""
                                });
                        }

                        if (!row.ratio && $el.arcs) {
                                param = ["arc", $$.$el.arcs.select(`path.${$ARC.arc}-${row.id}`).data()[0]];
                                row.ratio = $$.getRatio(...param);
                        }

                        param = [row.ratio, row.id, row.index, d];
                        value = sanitize(valueFormat(getRowValue(row), ...param));

                        if ($$.isAreaRangeType(row)) {
                                const [high, low] = ["high", "low"].map(v => sanitize(
                                        valueFormat($$.getRangedData(row, v), ...param)
                                ));

                                value = `<b>Mid:</b> ${value} <b>High:</b> ${high} <b>Low:</b> ${low}`;
                        } else if ($$.isCandlestickType(row)) {
                                const [open, high, low, close, volume] = ["open", "high", "low", "close", "volume"].map(v => sanitize(
                                        valueFormat($$.getRangedData(row, v, "candlestick"), ...param)
                                ));

                                value = `<b>Open:</b> ${open} <b>High:</b> ${high} <b>Low:</b> ${low} <b>Close:</b> ${close}${volume ? ` <b>Volume:</b> ${volume}` : ""}`;
                        } else if ($$.isBarRangeType(row)) {
                                const [start, end] = row.value;

                                value = `${valueFormat(start)} ~ ${valueFormat(end)}`;
                        }

                        if (value !== undefined) {
                                // Skip elements when their name is set to null
                                if (row.name === null) {
                                        continue;
                                }

                                const name = sanitize(nameFormat(row.name, ...param));
                                const color = getBgColor(row);
                                const contentValue = {
                                        CLASS_TOOLTIP_NAME: $TOOLTIP.tooltipName + $$.getTargetSelectorSuffix(row.id),
                                        COLOR: (tplStr || !$$.patterns) ? color : `<svg><rect style="fill:${color}" width="10" height="10"></rect></svg>`,
                                        NAME: name,
                                        VALUE: value
                                };

                                if (tplStr && isObject(contents.text)) {
                                        const index = targetIds.indexOf(row.id);

                                        Object.keys(contents.text).forEach(key => {
                                                contentValue[key] = contents.text[key][index];
                                        });
                                }

                                text += tplProcess(tpl[1], contentValue);
                        }
                }

                return `${text}</table>`;
        },

        /**
         * Get the content template string
         * @param {string} tplStr Tempalte string
         * @returns {Array} Template string
         * @private
         */
        getTooltipContentTemplate(tplStr?: string): string[] {
                return (tplStr || `<table class="{=CLASS_TOOLTIP}"><tbody>
                                {=TITLE}
                                {{<tr class="{=CLASS_TOOLTIP_NAME}">
                                        <td class="name">${this.patterns ? `{=COLOR}` : `<span style="background-color:{=COLOR}"></span>`}{=NAME}</td>
                                        <td class="value">{=VALUE}</td>
                                </tr>}}
                        </tbody></table>`)
                        .replace(/(\r?\n|\t)/g, "")
                        .split(/{{(.*)}}/);
        },

        /**
         * Update tooltip position coordinate
         * @param {object} dataToShow Data object
         * @param {SVGElement} eventTarget Event element
         * @private
         */
        setTooltipPosition(dataToShow: IDataRow, eventTarget: SVGElement): void {
                const $$ = this;
                const {config, scale, state, $el: {eventRect, tooltip}} = $$;
                const {bindto} = config.tooltip_contents;
                const datum = tooltip.datum();

                if (!bindto && datum) {
                        const [x, y] = getPointer(state.event, eventTarget ?? eventRect?.node()); // get mouse event position
                        const currPos: {x: number, y: number, xAxis?: number} = {x, y};

                        if (scale.x && datum && "x" in datum) {
                                currPos.xAxis = scale.x(datum.x);
                        }

                        const {width = 0, height = 0} = datum;

                        // Get tooltip position
                        const pos = config.tooltip_position?.bind($$.api)(
                                dataToShow ?? JSON.parse(datum.current),
                                width, height, eventRect?.node(), currPos
                        ) ?? $$.getTooltipPosition.bind($$)(width, height, currPos);

                        ["top", "left"].forEach(v => {
                                const value = pos[v];

                                tooltip.style(v, `${value}px`);

                                // Remember left pos in percentage to be used on resize call
                                if (v === "left" && !datum.xPosInPercent) {
                                        datum.xPosInPercent = value / state.current.width * 100;
                                }
                        });
                }
        },

        /**
         * Returns the position of the tooltip
         * @param {string} tWidth Width value of tooltip element
         * @param {string} tHeight Height value of tooltip element
         * @param {object} currPos Current mouse position
         * @returns {object} top, left value
         * @private
         */
        getTooltipPosition(tWidth: number, tHeight: number, currPos: {[key:string]: number}):
                {top: number, left: number} {
                const $$ = this;
                const {config, scale, state} = $$;
                const {width, height, current, isLegendRight, inputType} = state;
                const hasGauge = $$.hasType("gauge") && !config.gauge_fullCircle;
                const hasTreemap = state.hasTreemap;
                const isRotated = config.axis_rotated;
                const svgLeft = $$.getSvgLeft(true);
                let chartRight = svgLeft + current.width - $$.getCurrentPaddingRight();
                const chartLeft = $$.getCurrentPaddingLeft(true);
                const size = 20;
                let {x, y} = currPos;

                // Determine tooltip position
                if ($$.hasArcType()) {
                        const raw = inputType === "touch" || $$.hasType("radar");

                        if (!raw) {
                                y += hasGauge ? height : height / 2;
                                x += (width - (isLegendRight ? $$.getLegendWidth() : 0)) / 2;
                        }
                } else if (!hasTreemap) {
                        if (isRotated) {
                                y = currPos.xAxis + size;
                                x += svgLeft;
                                chartRight -= svgLeft;
                        } else {
                                y -= 5;
                                x = svgLeft + chartLeft + size + (scale.zoom ? x : currPos.xAxis);
                        }
                }

                // when tooltip left + tWidth > chart's width
                if ((x + tWidth + 15) > chartRight) {
                        x -= isRotated ? tWidth - chartLeft : tWidth + (hasTreemap ? 0 : chartLeft);
                }

                if (y + tHeight > current.height) {
                        const gap = hasTreemap ? 0 : 30;

                        y -= hasGauge ? tHeight * 3 : tHeight + gap;
                }

                const pos = {top: y, left: x};

                // make sure to not be positioned out of viewport
                Object.keys(pos).forEach(v => {
                        if (pos[v] < 0) {
                                pos[v] = 0;
                        }
                });

                return pos;
        },

        /**
         * Show the tooltip
         * @param {object} selectedData Data object
         * @param {SVGElement} eventTarget Event element
         * @private
         */
        showTooltip(selectedData: IDataRow[], eventTarget: SVGElement): void {
                const $$ = this;
                const {config, $el: {tooltip}} = $$;
                const dataToShow = selectedData.filter(d => d && isValue($$.getBaseValue(d)));

                if (!tooltip || dataToShow.length === 0 || !config.tooltip_show) {
                        return;
                }

                let datum = tooltip.datum();
                const dataStr = JSON.stringify(selectedData);

                if (!datum || datum.current !== dataStr) {
                        const {index, x} = selectedData.concat().sort()[0];

                        callFn(config.tooltip_onshow, $$.api, selectedData);

                        // set tooltip content
                        tooltip
                                .html($$.getTooltipHTML(
                                        selectedData, // data
                                        $$.axis ? $$.axis.getXAxisTickFormat() : $$.categoryName.bind($$), // defaultTitleFormat
                                        $$.getDefaultValueFormat(), // defaultValueFormat
                                        $$.color // color
                                ))
                                .style("display", null)
                                .style("visibility", null) // for IE9
                                .datum(datum = {
                                        index,
                                        x,
                                        current: dataStr,
                                        width: tooltip.property("offsetWidth"),
                                        height: tooltip.property("offsetHeight")
                                });

                        callFn(config.tooltip_onshown, $$.api, selectedData);
                        $$._handleLinkedCharts(true, index);
                }

                $$.setTooltipPosition(dataToShow, eventTarget);
        },

        /**
         * Adjust tooltip position on resize event
         * @private
         */
        bindTooltipResizePos(): void {
                const $$ = this;
                const {resizeFunction, state, $el: {tooltip}} = $$;

                resizeFunction.add(() => {
                        if (tooltip.style("display") === "block") {
                                const {current} = state;
                                const {width, xPosInPercent} = tooltip.datum();
                                let value = current.width / 100 * xPosInPercent;
                                const diff = current.width - (value + width);

                                // if tooltip size overs current viewport size
                                if (diff < 0) {
                                        value += diff;
                                }

                                tooltip.style("left", `${value}px`);
                        }
                });
        },

        /**
         * Hide the tooltip
         * @param {boolean} force Force to hide
         * @private
         */
        hideTooltip(force?: boolean): void {
                const $$ = this;
                const {api, config, $el: {tooltip}} = $$;

                if (tooltip && tooltip.style("display") !== "none" && (!config.tooltip_doNotHide || force)) {
                        const selectedData = JSON.parse(tooltip.datum().current);

                        callFn(config.tooltip_onhide, api, selectedData);

                        // hide tooltip
                        tooltip
                                .style("display", "none")
                                .style("visibility", "hidden") // for IE9
                                .datum(null);

                        callFn(config.tooltip_onhidden, api, selectedData);
                }
        },

        /**
         * Toggle display for linked chart instances
         * @param {boolean} show true: show, false: hide
         * @param {number} index x Axis index
         * @private
         */
        _handleLinkedCharts(show: boolean, index: number): void {
                const $$ = this;
                const {charts, config, state: {event}} = $$;

                // Prevent propagation among instances if isn't instantiated from the user's event
                // https://github.com/naver/billboard.js/issues/1979
                if (event?.isTrusted && config.tooltip_linked && charts.length > 1) {
                        const linkedName = config.tooltip_linked_name;

                        charts
                                .filter(c => c !== $$.api)
                                .forEach(c => {
                                        const {config, $el} = c.internal;
                                        const isLinked = config.tooltip_linked;
                                        const name = config.tooltip_linked_name;
                                        const isInDom = document.body.contains($el.chart.node());

                                        if (isLinked && linkedName === name && isInDom) {
                                                const data = $el.tooltip.data()[0];
                                                const isNotSameIndex = index !== data?.index;

                                                try {
                                                        c.tooltip[
                                                                show && isNotSameIndex ? "show" : "hide"
                                                        ]({index});
                                                } catch (e) {}
                                        }
                                });
                }
        },

        /**
         * Update tooltip content on redraw
         * - In a situation where tooltip is displayed and data load happens, it should reflect loaded data to tooltip
         * @param {d3Selection} context Event rect element
         * @param {number} index Data index
         * @private
         */
        updateTooltipOnRedraw(context?: SVGRectElement, index?: number): void {
                const $$ = this;
                const {
                        config,
                        $el: {eventRect, svg, tooltip},
                        state: {event, hasAxis, hasRadar, hasTreemap}
                } = $$;

                // Update tooltip, when tooltip is in shown state
                if (tooltip?.style("display") === "block" && event) {
                        const rect = context ?? (hasRadar ? svg : eventRect)?.node();

                        // for Axis based & Radar
                        if (hasAxis || hasRadar) {
                                if ($$.isMultipleX()) {
                                        $$.selectRectForMultipleXs(rect, false);
                                } else {
                                        const idx = index ?? $$.getDataIndexFromEvent(event);

                                        if (index === -1) {
                                                $$.api.tooltip.hide();
                                        } else {
                                                $$.selectRectForSingle(rect, idx);
                                                $$.setExpand(idx, null, true);
                                        }
                                }

                        // for Arc & Treemap
                        } else {
                                const {clientX, clientY} = event;

                                setTimeout(() => {
                                        let target = document.elementFromPoint(clientX, clientY);
                                        const data = d3Select(target).datum() as IArcData;

                                        if (data) {
                                                const d = $$.hasArcType() ?
                                                        $$.convertToArcData($$.updateAngle(data)) : data?.data;

                                                hasTreemap && (target = svg.node());
                                                d && $$.showTooltip([d], target);
                                        } else {
                                                $$.api.tooltip.hide();
                                        }
                                }, config.transition_duration);
                        }
                }
        }
};

1	/**
2	* Copyright (c) 2017 ~ present NAVER Corp.
3	* billboard.js project is licensed under the MIT license
4	*/
5	import {select as d3Select} from "d3-selection";
6	import {document} from "../../module/browser";
7	import {$ARC, $TOOLTIP} from "../../config/classes";
8	import type {IArcData, IDataRow} from "../data/IData";
9	import {getPointer, isEmpty, isFunction, isObject, isString, isValue, callFn, sanitize, tplProcess, isUndefined, parseDate} from "../../module/util";
10
11	export default {
12	/**
13	* Initializes the tooltip
14	* @private
15	*/
16	initTooltip(): void {
17	const $$ = this;	4,812✔
18	const {config, $el} = $$;	4,812✔
19
20	$el.tooltip = d3Select(config.tooltip_contents.bindto);	4,812✔
21
22	if ($el.tooltip.empty()) {	4,812✔
23	$el.tooltip = $el.chart	4,800✔
24	.append("div")
25	.attr("class", $TOOLTIP.tooltipContainer)
26	.style("position", "absolute")
27	.style("pointer-events", "none")
28	.style("display", "none");
29	}
30
31	$$.bindTooltipResizePos();	4,812✔
32	},
33
34	/**
35	* Show tooltip at initialization.
36	* Is called only when tooltip.init.show=true option is set
37	* @private
38	*/
39	initShowTooltip(): void {
40	const $$ = this;	4,812✔
41	const {config, $el, state: {hasAxis, hasRadar}} = $$;	4,812✔
42
43	// Show tooltip if needed
44	if (config.tooltip_init_show) {	4,812✔
45	const isArc = !(hasAxis \|\| hasRadar);	27✔
46
47	if ($$.axis?.isTimeSeries() && isString(config.tooltip_init_x)) {	18✔
48	config.tooltip_init_x = parseDate.call($$, config.tooltip_init_x);	3✔
49	}
50
51	$$.api.tooltip.show({	18✔
52	data: {
53	[isArc ? "index" : "x"]: config.tooltip_init_x	18✔
54	}
55	});
56
57	const position = config.tooltip_init_position;	18✔
58
59	if (!config.tooltip_contents.bindto && !isEmpty(position)) {	18✔
60	const {top = 0, left = 50} = position;	12!
61
62	$el.tooltip.style("top", isString(top) ? top : `${top}px`)	12!
63	.style("left", isString(left) ? left : `${left}px`)	12!
64	.style("display", null);
65	}
66	}
67	},
68
69	/**
70	* Get the tooltip HTML string
71	* @param {Array} args Arguments
72	* @returns {string} Formatted HTML string
73	* @private
74	*/
75	getTooltipHTML(...args): string {
76	const $$ = this;	606✔
77	const {api, config} = $$;	606✔
78
79	return isFunction(config.tooltip_contents) ?	606✔
80	config.tooltip_contents.bind(api)(...args) : $$.getTooltipContent(...args);	606✔
81	},
82
83	/**
84	* Returns the tooltip content(HTML string)
85	* @param {object} d data
86	* @param {Function} defaultTitleFormat Default title format
87	* @param {Function} defaultValueFormat Default format for each data value in the tooltip.
88	* @param {Function} color Color function
89	* @returns {string} html
90	* @private
91	*/
92	getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color): string {	585✔
93	const $$ = this;	585✔
94	const {api, config, state, $el} = $$;	585✔
95
96	let [titleFormat, nameFormat, valueFormat] = ["title", "name", "value"].map(v => {	1,755✔
97	const fn = config[`tooltip_format_${v}`];	1,755✔
98
99	return isFunction(fn) ? fn.bind(api) : fn;	1,755✔
100	});
101
102	titleFormat = titleFormat \|\| defaultTitleFormat;	585✔
103	nameFormat = nameFormat \|\| (name => name);	1,077✔
104	valueFormat = valueFormat \|\| (	585✔
105	state.hasTreemap \|\| $$.isStackNormalized() ? (v, ratio) => `${(ratio * 100).toFixed(2)}%` : defaultValueFormat	15✔
106	);
107
108	const order = config.tooltip_order;	585✔
109	const getRowValue = row => ($$.axis && $$.isBubbleZType(row) ? $$.getBubbleZData(row.value, "z") : $$.getBaseValue(row));	2,433✔
110	const getBgColor = $$.levelColor ? row => $$.levelColor(row.value) : row => color(row);	1,077!
111	const contents = config.tooltip_contents;	585✔
112	const tplStr = contents.template;	585✔
113	const targetIds = $$.mapToTargetIds();	585✔
114
115	if (order === null && config.data_groups.length) {	585✔
116	// for stacked data, order should aligned with the visually displayed data
117	const ids = $$.orderTargets($$.data.targets)	72✔
118	.map(i2 => i2.id)	183✔
119	.reverse();
120
121	d.sort((a, b) => {	105✔
122	let v1 = a ? a.value : null;	105!
123	let v2 = b ? b.value : null;	105!
124
125	if (v1 > 0 && v2 > 0) {	105✔
126	v1 = a.id ? ids.indexOf(a.id) : null;	75!
127	v2 = b.id ? ids.indexOf(b.id) : null;	75!
128	}
129
130	return v1 - v2;	105✔
131	});
132	} else if (/^(asc\|desc)$/.test(order)) {	513✔
133	const isAscending = order === "asc";
134
135	d.sort((a, b) => {	126✔
136	const v1 = a ? getRowValue(a) : null;	126!
137	const v2 = b ? getRowValue(b) : null;	126!
138
139	return isAscending ? v1 - v2 : v2 - v1;	126✔
140	});
141	} else if (isFunction(order)) {	477✔
142	d.sort(order.bind(api));	18✔
143	}
144
145	const tpl = $$.getTooltipContentTemplate(tplStr);	585✔
146	const len = d.length;	585✔
147	let text;
148	let row;
149	let param;
150	let value;
151	let i;
152
153	for (i = 0; i < len; i++) {	585✔
154	row = d[i];	1,104✔
155
156	if (!row \|\| !(getRowValue(row) \|\| getRowValue(row) === 0)) {	1,104✔
157	continue;	27✔
158	}
159
160	if (isUndefined(text)) {	1,077✔
161	const title = (state.hasAxis \|\| state.hasRadar) &&	585✔
162	sanitize(titleFormat ? titleFormat(row.x) : row.x);	543!
163
164	text = tplProcess(tpl[0], {	585✔
165	CLASS_TOOLTIP: $TOOLTIP.tooltip,
166	TITLE: isValue(title) ? (
167	tplStr ? title : `<tr><th colspan="2">${title}</th></tr>`	1,128✔
168	) : ""
169	});
170	}
171
172	if (!row.ratio && $el.arcs) {	1,077!
UNCOV 173	param = ["arc", $$.$el.arcs.select(`path.${$ARC.arc}-${row.id}`).data()[0]];	×
UNCOV 174	row.ratio = $$.getRatio(...param);	×
175	}
176
177	param = [row.ratio, row.id, row.index, d];	1,077✔
178	value = sanitize(valueFormat(getRowValue(row), ...param));	1,077✔
179
180	if ($$.isAreaRangeType(row)) {	1,077✔
181	const [high, low] = ["high", "low"].map(v => sanitize(	6✔
182	valueFormat($$.getRangedData(row, v), ...param)
183	));
184
185	value = `<b>Mid:</b> ${value} <b>High:</b> ${high} <b>Low:</b> ${low}`;	3✔
186	} else if ($$.isCandlestickType(row)) {	1,074✔
187	const [open, high, low, close, volume] = ["open", "high", "low", "close", "volume"].map(v => sanitize(	30✔
188	valueFormat($$.getRangedData(row, v, "candlestick"), ...param)
189	));
190
191	value = `<b>Open:</b> ${open} <b>High:</b> ${high} <b>Low:</b> ${low} <b>Close:</b> ${close}${volume ? ` <b>Volume:</b> ${volume}` : ""}`;	6✔
192	} else if ($$.isBarRangeType(row)) {	1,068✔
193	const [start, end] = row.value;	3✔
194
195	value = `${valueFormat(start)} ~ ${valueFormat(end)}`;	3✔
196	}
197
198	if (value !== undefined) {	1,077!
199	// Skip elements when their name is set to null
200	if (row.name === null) {	1,077!
201	continue;	×
202	}
203
204	const name = sanitize(nameFormat(row.name, ...param));	1,077✔
205	const color = getBgColor(row);	1,077✔
206	const contentValue = {	1,077✔
207	CLASS_TOOLTIP_NAME: $TOOLTIP.tooltipName + $$.getTargetSelectorSuffix(row.id),
208	COLOR: (tplStr \|\| !$$.patterns) ? color : `<svg><rect style="fill:${color}" width="10" height="10"></rect></svg>`,	3,219!
209	NAME: name,
210	VALUE: value
211	};
212
213	if (tplStr && isObject(contents.text)) {	1,077✔
214	const index = targetIds.indexOf(row.id);	12✔
215
216	Object.keys(contents.text).forEach(key => {	12✔
217	contentValue[key] = contents.text[key][index];	12✔
218	});
219	}
220
221	text += tplProcess(tpl[1], contentValue);	1,077✔
222	}
223	}
224
225	return `${text}</table>`;	585✔
226	},
227
228	/**
229	* Get the content template string
230	* @param {string} tplStr Tempalte string
231	* @returns {Array} Template string
232	* @private
233	*/
234	getTooltipContentTemplate(tplStr?: string): string[] {
235	return (tplStr \|\| `<table class="{=CLASS_TOOLTIP}"><tbody>	585✔
236	{=TITLE}
237	{{<tr class="{=CLASS_TOOLTIP_NAME}">
238	<td class="name">${this.patterns ? `{=COLOR}` : `<span style="background-color:{=COLOR}"></span>`}{=NAME}</td>	576!
239	<td class="value">{=VALUE}</td>
240	</tr>}}
241	</tbody></table>`)
242	.replace(/(\r?\n\|\t)/g, "")
243	.split(/{{(.*)}}/);
244	},
245
246	/**
247	* Update tooltip position coordinate
248	* @param {object} dataToShow Data object
249	* @param {SVGElement} eventTarget Event element
250	* @private
251	*/
252	setTooltipPosition(dataToShow: IDataRow, eventTarget: SVGElement): void {	1,335✔
253	const $$ = this;	1,335✔
254	const {config, scale, state, $el: {eventRect, tooltip}} = $$;	1,335✔
255	const {bindto} = config.tooltip_contents;	1,335✔
256	const datum = tooltip.datum();	1,335✔
257
258	if (!bindto && datum) {	1,335✔
259	const [x, y] = getPointer(state.event, eventTarget ?? eventRect?.node()); // get mouse event position	1,326!
260	const currPos: {x: number, y: number, xAxis?: number} = {x, y};	1,326✔
261
262	if (scale.x && datum && "x" in datum) {	1,326✔
263	currPos.xAxis = scale.x(datum.x);	1,266✔
264	}
265
266	const {width = 0, height = 0} = datum;	1,326!
267
268	// Get tooltip position
269	const pos = config.tooltip_position?.bind($$.api)(	1,326✔
270	dataToShow ?? JSON.parse(datum.current),	30!
271	width, height, eventRect?.node(), currPos	30!
272	) ?? $$.getTooltipPosition.bind($$)(width, height, currPos);	1,326✔
273
274	["top", "left"].forEach(v => {	2,652✔
275	const value = pos[v];	2,652✔
276
277	tooltip.style(v, `${value}px`);	2,652✔
278
279	// Remember left pos in percentage to be used on resize call
280	if (v === "left" && !datum.xPosInPercent) {	2,652✔
281	datum.xPosInPercent = value / state.current.width * 100;	600✔
282	}
283	});
284	}
285	},
286
287	/**
288	* Returns the position of the tooltip
289	* @param {string} tWidth Width value of tooltip element
290	* @param {string} tHeight Height value of tooltip element
291	* @param {object} currPos Current mouse position
292	* @returns {object} top, left value
293	* @private
294	*/
295	getTooltipPosition(tWidth: number, tHeight: number, currPos: {[key:string]: number}):
296	{top: number, left: number} {	1,296✔
297	const $$ = this;	1,296✔
298	const {config, scale, state} = $$;	1,296✔
299	const {width, height, current, isLegendRight, inputType} = state;	1,296✔
300	const hasGauge = $$.hasType("gauge") && !config.gauge_fullCircle;	1,296!
301	const hasTreemap = state.hasTreemap;	1,296✔
302	const isRotated = config.axis_rotated;	1,296✔
303	const svgLeft = $$.getSvgLeft(true);	1,296✔
304	let chartRight = svgLeft + current.width - $$.getCurrentPaddingRight();	1,296✔
305	const chartLeft = $$.getCurrentPaddingLeft(true);	1,296✔
306	const size = 20;	1,296✔
307	let {x, y} = currPos;	1,296✔
308
309	// Determine tooltip position
310	if ($$.hasArcType()) {	1,296✔
311	const raw = inputType === "touch" \|\| $$.hasType("radar");	60✔
312
313	if (!raw) {	60✔
314	y += hasGauge ? height : height / 2;	45!
315	x += (width - (isLegendRight ? $$.getLegendWidth() : 0)) / 2;	45!
316	}
317	} else if (!hasTreemap) {	1,236✔
318	if (isRotated) {	1,227✔
319	y = currPos.xAxis + size;	21✔
320	x += svgLeft;	21✔
321	chartRight -= svgLeft;	21✔
322	} else {
323	y -= 5;	1,206✔
324	x = svgLeft + chartLeft + size + (scale.zoom ? x : currPos.xAxis);	1,206✔
325	}
326	}
327
328	// when tooltip left + tWidth > chart's width
329	if ((x + tWidth + 15) > chartRight) {	1,296✔
330	x -= isRotated ? tWidth - chartLeft : tWidth + (hasTreemap ? 0 : chartLeft);	444!
331	}
332
333	if (y + tHeight > current.height) {	1,296✔
334	const gap = hasTreemap ? 0 : 30;	12!
335
336	y -= hasGauge ? tHeight * 3 : tHeight + gap;	12!
337	}
338
339	const pos = {top: y, left: x};	1,296✔
340
341	// make sure to not be positioned out of viewport
342	Object.keys(pos).forEach(v => {	2,592✔
343	if (pos[v] < 0) {	2,592✔
344	pos[v] = 0;	231✔
345	}
346	});
347
348	return pos;	1,296✔
349	},
350
351	/**
352	* Show the tooltip
353	* @param {object} selectedData Data object
354	* @param {SVGElement} eventTarget Event element
355	* @private
356	*/
357	showTooltip(selectedData: IDataRow[], eventTarget: SVGElement): void {	1,338✔
358	const $$ = this;	1,338✔
359	const {config, $el: {tooltip}} = $$;	1,338✔
360	const dataToShow = selectedData.filter(d => d && isValue($$.getBaseValue(d)));	2,400✔
361
362	if (!tooltip \|\| dataToShow.length === 0 \|\| !config.tooltip_show) {	1,338✔
363	return;	27✔
364	}
365
366	let datum = tooltip.datum();	1,311✔
367	const dataStr = JSON.stringify(selectedData);	1,311✔
368
369	if (!datum \|\| datum.current !== dataStr) {	1,311✔
370	const {index, x} = selectedData.concat().sort()[0];	606✔
371
372	callFn(config.tooltip_onshow, $$.api, selectedData);	606✔
373
374	// set tooltip content
375	tooltip	606✔
376	.html($$.getTooltipHTML(
377	selectedData, // data
378	$$.axis ? $$.axis.getXAxisTickFormat() : $$.categoryName.bind($$), // defaultTitleFormat	606✔
379	$$.getDefaultValueFormat(), // defaultValueFormat
380	$$.color // color
381	))
382	.style("display", null)
383	.style("visibility", null) // for IE9
384	.datum(datum = {
385	index,
386	x,
387	current: dataStr,
388	width: tooltip.property("offsetWidth"),
389	height: tooltip.property("offsetHeight")
390	});
391
392	callFn(config.tooltip_onshown, $$.api, selectedData);	606✔
393	$$._handleLinkedCharts(true, index);	606✔
394	}
395
396	$$.setTooltipPosition(dataToShow, eventTarget);	1,311✔
397	},
398
399	/**
400	* Adjust tooltip position on resize event
401	* @private
402	*/
403	bindTooltipResizePos(): void {	4,812✔
404	const $$ = this;	4,812✔
405	const {resizeFunction, state, $el: {tooltip}} = $$;	4,812✔
406
407	resizeFunction.add(() => {	4,812✔
408	if (tooltip.style("display") === "block") {	1,203✔
409	const {current} = state;	12✔
410	const {width, xPosInPercent} = tooltip.datum();	12✔
411	let value = current.width / 100 * xPosInPercent;	12✔
412	const diff = current.width - (value + width);	12✔
413
414	// if tooltip size overs current viewport size
415	if (diff < 0) {	12✔
416	value += diff;	3✔
417	}
418
419	tooltip.style("left", `${value}px`);	12✔
420	}
421	});
422	},
423
424	/**
425	* Hide the tooltip
426	* @param {boolean} force Force to hide
427	* @private
428	*/
429	hideTooltip(force?: boolean): void {
430	const $$ = this;	327✔
431	const {api, config, $el: {tooltip}} = $$;	327✔
432
433	if (tooltip && tooltip.style("display") !== "none" && (!config.tooltip_doNotHide \|\| force)) {	327✔
434	const selectedData = JSON.parse(tooltip.datum().current);	84✔
435
436	callFn(config.tooltip_onhide, api, selectedData);	84✔
437
438	// hide tooltip
439	tooltip	84✔
440	.style("display", "none")
441	.style("visibility", "hidden") // for IE9
442	.datum(null);
443
444	callFn(config.tooltip_onhidden, api, selectedData);	84✔
445	}
446	},
447
448	/**
449	* Toggle display for linked chart instances
450	* @param {boolean} show true: show, false: hide
451	* @param {number} index x Axis index
452	* @private
453	*/
454	_handleLinkedCharts(show: boolean, index: number): void {	696✔
455	const $$ = this;	696✔
456	const {charts, config, state: {event}} = $$;	696✔
457
458	// Prevent propagation among instances if isn't instantiated from the user's event
459	// https://github.com/naver/billboard.js/issues/1979
460	if (event?.isTrusted && config.tooltip_linked && charts.length > 1) {	696!
461	const linkedName = config.tooltip_linked_name;	×
462
463	charts	×
464	.filter(c => c !== $$.api)	×
465	.forEach(c => {	×
466	const {config, $el} = c.internal;	×
467	const isLinked = config.tooltip_linked;	×
468	const name = config.tooltip_linked_name;	×
469	const isInDom = document.body.contains($el.chart.node());	×
470
471	if (isLinked && linkedName === name && isInDom) {	×
472	const data = $el.tooltip.data()[0];	×
473	const isNotSameIndex = index !== data?.index;	×
474
475	try {	×
476	c.tooltip[	×
477	show && isNotSameIndex ? "show" : "hide"	×
478	]({index});
479	} catch (e) {}
480	}
481	});
482	}
483	},
484
485	/**
486	* Update tooltip content on redraw
487	* - In a situation where tooltip is displayed and data load happens, it should reflect loaded data to tooltip
488	* @param {d3Selection} context Event rect element
489	* @param {number} index Data index
490	* @private
491	*/
492	updateTooltipOnRedraw(context?: SVGRectElement, index?: number): void {	7,170✔
493	const $$ = this;	7,170✔
494	const {
495	config,
496	$el: {eventRect, svg, tooltip},	7,170✔
497	state: {event, hasAxis, hasRadar, hasTreemap}	7,170✔
498	} = $$;	7,170✔
499
500	// Update tooltip, when tooltip is in shown state
501	if (tooltip?.style("display") === "block" && event) {	7,170✔
502	const rect = context ?? (hasRadar ? svg : eventRect)?.node();	51!
503
504	// for Axis based & Radar
505	if (hasAxis \|\| hasRadar) {	51✔
506	if ($$.isMultipleX()) {	45✔
507	$$.selectRectForMultipleXs(rect, false);	3✔
508	} else {
509	const idx = index ?? $$.getDataIndexFromEvent(event);	42!
510
511	if (index === -1) {	42!
512	$$.api.tooltip.hide();	×
513	} else {
514	$$.selectRectForSingle(rect, idx);	42✔
515	$$.setExpand(idx, null, true);	42✔
516	}
517	}
518
519	// for Arc & Treemap
520	} else {
521	const {clientX, clientY} = event;	6✔
522
523	setTimeout(() => {	6✔
524	let target = document.elementFromPoint(clientX, clientY);	6✔
525	const data = d3Select(target).datum() as IArcData;	6✔
526
527	if (data) {	6!
528	const d = $$.hasArcType() ?	6✔
529	$$.convertToArcData($$.updateAngle(data)) : data?.data;	9!
530
531	hasTreemap && (target = svg.node());	6✔
532	d && $$.showTooltip([d], target);	6✔
533	} else {
534	$$.api.tooltip.hide();	×
535	}
536	}, config.transition_duration);
537	}
538	}
539	}
540	};

naver / billboard.js / 5962438354

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