30443109728

Committed 29 Jul 2026 10:17AM UTC coverage: 93.712% (-0.1%) from 93.823%

Build # 30443109728

Build Type

push

github

Committed by

web-flow

Commit Message

feat(subchart): support configurable subchart rendering

Add subchart.type and subchart.types for independent overview series rendering.
Support subchart x/y/y2 axis ticks, formats, culling, outer ticks, and text visibility.
Add brush.enabled=false hover behavior and continuous focus grid across main/subchart.
Project candlestick values for subchart bars, line, and area using stock chart semantics.
Align SVG/canvas subchart axis, grid, and interaction behavior with demos/tests.

Ref #4175

Coverage Stats

11530 of 12842 branches covered (89.78%)

Branch coverage included in aggregate %.

553 of 584 new or added lines in 20 files covered. (94.69%)

108 existing lines in 12 files now uncovered.

14417 of 14846 relevant lines covered (97.11%)

29561.24 hits per line

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

93.18

/src/ChartInternal/data/data.ts

/**
 * Copyright (c) 2017 ~ present NAVER Corp.
 * billboard.js project is licensed under the MIT license
 */
import {select as d3Select} from "d3-selection";
import {$BAR, $CANDLESTICK, $COMMON} from "../../config/classes";
import {TYPE} from "../../config/const";
import {KEY} from "../../module/Cache";
import {
        findIndex,
        getScrollPosition,
        getTransformCTM,
        getUnique,
        hasValue,
        hasViewBox,
        isArray,
        isBoolean,
        isDefined,
        isFunction,
        isNumber,
        isObject,
        isObjectType,
        isString,
        isUndefined,
        isValue,
        mergeArray,
        notEmpty,
        parseDate,
        sortValue
} from "../../module/util";
import type {IData, IDataPoint, IDataRow} from "./IData";

// ranged data key-to-index lookup, used by getRangedData()
const rangedDataKeyIndex: Record<string, Record<string, number>> = {
        areaRange: {high: 0, mid: 1, low: 2},
        candlestick: {open: 0, high: 1, low: 2, close: 3, volume: 4}
};

/**
 * Normalize target ids to an array
 * @param {Array|string} targetIds Target ids
 * @returns {Array} Target ids array
 * @private
 */
function normalizeTargetIds(targetIds: string[] | string): string[] {
        return (isArray(targetIds) ? targetIds : [targetIds]) as string[];
}

export default {
        isX(key) {
                const $$ = this;
                const {config} = $$;
                const dataKey = config.data_x && key === config.data_x;
                const existValue = notEmpty(config.data_xs) && hasValue(config.data_xs, key);

                return dataKey || existValue;
        },

        isStackNormalized(): boolean {
                const {config} = this;

                return !!(
                        (config.data_stack_normalize === true ||
                                isObjectType(config.data_stack_normalize)) &&
                        config.data_groups.length
                );
        },

        /**
         * Check if stack normalization should be applied per group
         * @returns {boolean}
         * @private
         */
        isStackNormalizedPerGroup(): boolean {
                const {config} = this;

                return !!(
                        isObjectType(config.data_stack_normalize) &&
                        config.data_stack_normalize?.perGroup &&
                        config.data_groups.length
                );
        },

        /**
         * Check if given id is grouped data or has grouped data
         * @param {string} id Data id value
         * @returns {boolean} is grouped data or has grouped data
         * @private
         */
        isGrouped(id?: string): boolean {
                const groups = this.config.data_groups;

                return id ? groups.some(v => v.indexOf(id) >= 0 && v.length > 1) : groups.length > 0;
        },

        /**
         * Check if the given axis has any grouped data
         * @param {string} axisId Axis ID (e.g., "y", "y2")
         * @returns {boolean} true if axis has grouped data
         * @private
         */
        hasAxisGroupedData(axisId: "y" | "y2"): boolean {
                const $$ = this;
                const {axis} = $$;
                const targets = $$.data.targets;

                // Get all data IDs that belong to this axis
                const axisDataIds = targets
                        .filter(t => axis.getId(t.id) === axisId)
                        .map(t => t.id);

                // Check if any of the axis data IDs are in groups
                return axisDataIds.some(id => $$.isGrouped(id));
        },

        getXKey(id) {
                const $$ = this;
                const {config} = $$;

                return config.data_x ?
                        config.data_x :
                        (notEmpty(config.data_xs) ? config.data_xs[id] : null);
        },

        getXValuesOfXKey(key, targets) {
                const $$ = this;
                const ids = targets && notEmpty(targets) ? $$.mapToIds(targets) : [];
                let xValues;

                ids.forEach(id => {
                        if ($$.getXKey(id) === key) {
                                xValues = $$.data.xs[id];
                        }
                });

                return xValues;
        },

        /**
         * Get index number based on given x Axis value
         * @param {Date|number|string} x x Axis to be compared
         * @param {Array} basedX x Axis list to be based on
         * @returns {number} index number
         * @private
         */
        getIndexByX(x: Date | number | string, basedX: (Date | number | string)[]): number {
                const $$ = this;

                return basedX ?
                        basedX.indexOf(isString(x) ? x : +x) :
                        ($$.filterByX($$.data.targets, x)[0] || {index: null}).index;
        },

        getXValue(id: string, i: number): number {
                const $$ = this;

                return id in $$.data.xs &&
                                $$.data.xs[id] &&
                                isValue($$.data.xs[id][i]) ?
                        $$.data.xs[id][i] :
                        i;
        },

        getOtherTargetXs(): string | null {
                const $$ = this;
                const idsForX = Object.keys($$.data.xs);

                return idsForX.length ? $$.data.xs[idsForX[0]] : null;
        },

        getOtherTargetX(index: number): string | null {
                const xs = this.getOtherTargetXs();

                return xs && index < xs.length ? xs[index] : null;
        },

        addXs(xs): void {
                const $$ = this;
                const {config} = $$;

                Object.keys(xs).forEach(id => {
                        config.data_xs[id] = xs[id];
                });
        },

        /**
         * Determine if x axis is multiple
         * @returns {boolean} true: multiple, false: single
         * @private
         */
        isMultipleX(): boolean {
                return !this.config.axis_x_forceAsSingle && (
                        notEmpty(this.config.data_xs) ||
                        this.hasType("bubble") ||
                        this.hasType("scatter")
                );
        },

        addName(data) {
                const $$ = this;
                const {config} = $$;
                let name;

                if (data) {
                        name = config.data_names[data.id];
                        data.name = name !== undefined ? name : data.id;
                }

                return data;
        },

        /**
         * Get all values on given index
         * @param {number} index Index
         * @param {boolean} filterNull Filter nullish value
         * @returns {Array}
         * @private
         */
        getAllValuesOnIndex(index: number, filterNull = false) {
                const $$ = this;

                let value = $$.filterTargetsToShow($$.data.targets)
                        .map(t => $$.addName($$.getValueOnIndex(t.values, index)));

                if (filterNull) {
                        value = value.filter(v => v && "value" in v && isValue(v.value));
                }

                return value;
        },

        getValueOnIndex(values, index: number) {
                // Fast path: values are sorted by index from convertDataToTargets
                if (values[index]?.index === index) {
                        return values[index];
                }

                // Fallback for sparse/reordered data
                const valueOnIndex = values.filter(v => v.index === index);

                return valueOnIndex.length ? valueOnIndex[0] : null;
        },

        updateTargetX(targets, x) {
                const $$ = this;

                targets.forEach(t => {
                        t.values.forEach((v, i) => {
                                v.x = $$.generateTargetX(x[i], t.id, i);
                        });

                        $$.data.xs[t.id] = x;
                });
        },

        updateTargetXs(targets, xs) {
                const $$ = this;

                targets.forEach(t => {
                        xs[t.id] && $$.updateTargetX([t], xs[t.id]);
                });
        },

        generateTargetX(rawX, id: string, index: number) {
                const $$ = this;
                const {axis} = $$;
                let x = axis?.isCategorized() ? index : (rawX || index);

                if (axis?.isTimeSeries()) {
                        const fn = parseDate.bind($$);

                        x = rawX ? fn(rawX) : fn($$.getXValue(id, index));
                } else if (axis?.isCustomX() && !axis?.isCategorized()) {
                        x = isValue(rawX) ? +rawX : $$.getXValue(id, index);
                }

                return x;
        },

        updateXs(values): void {
                if (values.length) {
                        this.axis.xs = values.map(v => v.x);
                }
        },

        getPrevX(i: number): number[] | null {
                const x = this.axis.xs[i - 1];

                return isDefined(x) ? x : null;
        },

        getNextX(i: number): number[] | null {
                const x = this.axis.xs[i + 1];

                return isDefined(x) ? x : null;
        },

        /**
         * Get base value isAreaRangeType
         * @param {object} data Data object
         * @returns {number}
         * @private
         */
        getBaseValue(data): number {
                const $$ = this;
                const {hasAxis} = $$.state;
                let {value} = data;

                // In case of area-range, data is given as: [low, mid, high] or {low, mid, high}
                // will take the 'mid' as the base value
                if (value && hasAxis) {
                        if ($$.isAreaRangeType(data)) {
                                value = $$.getRangedData(data, "mid");
                        } else if ($$.isBubbleZType(data)) {
                                value = $$.getBubbleZData(value, "y");
                        }
                }

                return value;
        },

        /**
         * Get min/max value from the data
         * @private
         * @param {Array} data array data to be evaluated
         * @returns {{min: {number}, max: {number}}}
         */
        getMinMaxValue(data): {min: number, max: number} {
                const getBaseValue = this.getBaseValue.bind(this);
                let min = Infinity;
                let max = -Infinity;

                const targets = data || this.data.targets.map(t => t.values);

                for (let i = 0; i < targets.length; i++) {
                        const v = targets[i];

                        for (let j = 0; j < v.length; j++) {
                                const val = getBaseValue(v[j]);

                                if (isNumber(val)) {
                                        if (val < min) min = val;
                                        if (val > max) max = val;
                                }
                        }
                }

                return {min, max};
        },

        /**
         * Get the min/max data
         * @private
         * @returns {{min: Array, max: Array}}
         */
        getMinMaxData(): {min: IDataRow[], max: IDataRow[]} {
                const $$ = this;
                const cacheKey = KEY.dataMinMax;
                let minMaxData = $$.cache.get(cacheKey);

                if (!minMaxData) {
                        const data = $$.data.targets.map(t => t.values);
                        const minMax = $$.getMinMaxValue(data);

                        const min: IDataRow[] = [];
                        const max: IDataRow[] = [];

                        // Cache the getFilteredDataByValue function calls
                        const {min: minVal, max: maxVal} = minMax;

                        data.forEach(v => {
                                const minData = $$.getFilteredDataByValue(v, minVal);
                                const maxData = $$.getFilteredDataByValue(v, maxVal);

                                if (minData.length) {
                                        for (let i = 0; i < minData.length; i++) {
                                                min.push(minData[i]);
                                        }
                                }

                                if (maxData.length) {
                                        for (let i = 0; i < maxData.length; i++) {
                                                max.push(maxData[i]);
                                        }
                                }
                        });

                        // update the cached data
                        $$.cache.add(cacheKey, minMaxData = {min, max});
                }

                return minMaxData;
        },

        /**
         * Get sum of data per index
         * @param {string} targetId Target ID to get total for (only for normalized stack per group)
         * @private
         * @returns {Array}
         */
        getTotalPerIndex(targetId?: string) {
                const $$ = this;
                const {config} = $$;
                const cacheKey = targetId ? `${KEY.dataTotalPerIndex}-${targetId}` : KEY.dataTotalPerIndex;
                let sum = $$.cache.get(cacheKey);

                if (($$.config.data_groups.length || $$.isStackNormalized()) && !sum) {
                        sum = [];

                        // When normalize per group is enabled and targetId is provided,
                        // only sum data within the same group
                        let {targets} = $$.data;

                        if ($$.isStackNormalizedPerGroup() && targetId) {
                                // Find which group the target belongs to
                                const group = config.data_groups.find(g => g.indexOf(targetId) >= 0);

                                if (group) {
                                        // Only sum targets in the same group
                                        targets = targets.filter(t => group.indexOf(t.id) >= 0);
                                } else {
                                        // If target is not in any group, return null to indicate no normalization
                                        return null;
                                }
                        }

                        targets.forEach(row => {
                                row.values.forEach((v, i) => {
                                        if (!sum[i]) {
                                                sum[i] = 0;
                                        }

                                        sum[i] += isNumber(v.value) ? v.value : 0;
                                });
                        });

                        $$.cache.add(cacheKey, sum);
                }

                return sum;
        },

        /**
         * Get total data sum
         * @param {boolean} subtractHidden Subtract hidden data from total
         * @returns {number}
         * @private
         */
        getTotalDataSum(subtractHidden) {
                const $$ = this;
                const cacheKey = KEY.dataTotalSum;
                let total = $$.cache.get(cacheKey);

                if (!isNumber(total)) {
                        total = $$.data.targets.reduce((acc, t) => {
                                return acc + t.values.reduce((sum, v) => sum + (v.value ?? 0), 0);
                        }, 0);

                        $$.cache.add(cacheKey, total);
                }

                if (subtractHidden) {
                        total -= $$.getHiddenTotalDataSum();
                }

                return total;
        },

        /**
         * Get total hidden data sum
         * @returns {number}
         * @private
         */
        getHiddenTotalDataSum() {
                const $$ = this;
                const {api, state: {hiddenTargetIds}} = $$;
                let total = 0;

                if (hiddenTargetIds.size) {
                        total = api.data.values.bind(api)([...hiddenTargetIds])
                                .reduce((p, c) => p + c, 0);
                }

                return total;
        },

        /**
         * Get filtered data by value
         * @param {object} data Data
         * @param {number} value Value to be filtered
         * @returns {Array} filtered array data
         * @private
         */
        getFilteredDataByValue(data, value) {
                return data.filter(t => this.getBaseValue(t) === value);
        },

        /**
         * Return the max length of the data
         * @returns {number} max data length
         * @private
         */
        getMaxDataCount(): number {
                const {targets} = this.data;
                let max = 0;

                for (let i = 0; i < targets.length; i++) {
                        if (targets[i].values.length > max) {
                                max = targets[i].values.length;
                        }
                }

                return max;
        },

        getMaxDataCountTarget() {
                const $$ = this;
                const {cache, state} = $$;
                const cached = cache.get(KEY.maxDataCountTarget);

                if (cached && cached.generation === state.dataGeneration) {
                        return cached.value;
                }

                let target = $$.filterTargetsToShow() || [];
                const length = target.length;
                const isInverted = $$.config.axis_x_inverted;

                if (length > 1) {
                        const allX: any[] = [];

                        for (let i = 0; i < target.length; i++) {
                                const values = target[i].values;

                                for (let j = 0; j < values.length; j++) {
                                        allX.push(values[j].x);
                                }
                        }

                        target = allX;

                        target = sortValue(getUnique(target))
                                .map((x, index, array) => ({
                                        x,
                                        index: isInverted ? array.length - index - 1 : index
                                }));
                } else if (length) {
                        target = target[0].values.concat();
                }

                cache.add(KEY.maxDataCountTarget, {value: target, generation: state.dataGeneration});

                return target;
        },

        mapToIds(targets): string[] {
                return targets.map(d => d.id);
        },

        mapToTargetIds(ids?: string[] | string): string[] {
                const $$ = this;

                return ids ? (isArray(ids) ? ids.concat() : [ids]) : $$.mapToIds($$.data.targets);
        },

        hasTarget(targets, id): boolean {
                const ids = this.mapToIds(targets);

                for (let i = 0, val; (val = ids[i]); i++) {
                        if (val === id) {
                                return true;
                        }
                }

                return false;
        },

        isTargetToShow(targetId): boolean {
                return !this.state.hiddenTargetIds.has(targetId);
        },

        isLegendToShow(targetId): boolean {
                return !this.state.hiddenLegendIds.has(targetId);
        },

        getTargetsToShow(): any[] {
                const {state} = this;

                return state._targetsToShow ?? this.filterTargetsToShow();
        },

        filterTargetsToShow(targets?) {
                const $$ = this;

                // When called without arguments, use caching
                if (!targets) {
                        const {cache, data, state} = $$;
                        const cacheKey = KEY.filteredTargets;
                        const cached = cache.get(cacheKey);

                        // Return cached result if generation matches
                        if (cached && cached.generation === state.dataGeneration) {
                                return cached.value;
                        }

                        // Compute and cache result
                        const filtered = data.targets.filter(t => $$.isTargetToShow(t.id));

                        cache.add(cacheKey, {value: filtered, generation: state.dataGeneration});

                        return filtered;
                }

                // When called with custom targets, don't cache
                return targets.filter(t => $$.isTargetToShow(t.id));
        },

        mapTargetsToUniqueXs(targets) {
                const $$ = this;
                const {axis} = $$;
                let xs: any[] = [];

                if (targets?.length) {
                        xs = getUnique(
                                mergeArray(targets.map(t => t.values.map(v => +v.x)))
                        );

                        xs = axis?.isTimeSeries() ? xs.map(x => new Date(+x)) : xs.map(Number);
                }

                return sortValue(xs);
        },

        /**
         * Add to thetarget Ids
         * @param {string} type State's prop name
         * @param {Array|string} targetIds Target ids array
         * @private
         */
        addTargetIds(type: string, targetIds: string[] | string): void {
                const {state} = this;

                normalizeTargetIds(targetIds).forEach(v => state[type].add(v));
        },

        /**
         * Remove from the state target Ids
         * @param {string} type State's prop name
         * @param {Array|string} targetIds Target ids array
         * @private
         */
        removeTargetIds(type: string, targetIds: string[] | string): void {
                const {state} = this;

                normalizeTargetIds(targetIds).forEach(v => state[type].delete(v));
        },

        addHiddenTargetIds(targetIds: string[]): void {
                this.addTargetIds("hiddenTargetIds", targetIds);
        },

        removeHiddenTargetIds(targetIds: string[]): void {
                this.removeTargetIds("hiddenTargetIds", targetIds);
        },

        addHiddenLegendIds(targetIds: string[]): void {
                this.addTargetIds("hiddenLegendIds", targetIds);
        },

        removeHiddenLegendIds(targetIds: string[]): void {
                this.removeTargetIds("hiddenLegendIds", targetIds);
        },

        getValuesAsIdKeyed(targets) {
                const $$ = this;
                const {hasAxis} = $$.state;
                const ys = {};
                const isMultipleX = $$.isMultipleX();

                let xIndexMap: Map<any, number> | null = null;

                if (isMultipleX) {
                        const cached = $$.cache.get(KEY.valuesXIndexMap);

                        if (cached && cached.generation === $$.state.dataGeneration) {
                                xIndexMap = cached.value;
                        } else {
                                const xs = $$.mapTargetsToUniqueXs($$.data.targets)
                                        .map(v => (isString(v) ? v : +v));

                                xIndexMap = new Map(xs.map((x, i) => [x, i]));
                                $$.cache.add(KEY.valuesXIndexMap, {
                                        value: xIndexMap,
                                        generation: $$.state.dataGeneration
                                });
                        }
                }

                targets.forEach(t => {
                        const data: any[] = [];

                        t.values
                                .filter(({value}) => isValue(value) || value === null)
                                .forEach(v => {
                                        let {value} = v;

                                        // exclude 'volume' value to correct mis domain calculation
                                        if (value !== null && $$.isCandlestickType(v)) {
                                                value = isArray(value) ?
                                                        value.slice(0, 4) :
                                                        [value.open, value.high, value.low, value.close];
                                        }

                                        if (isArray(value)) {
                                                data.push(...value);
                                        } else if (isObject(value) && "high" in value) {
                                                data.push(...Object.values(value));
                                        } else if ($$.isBubbleZType(v)) {
                                                data.push(hasAxis && $$.getBubbleZData(value, "y"));
                                        } else {
                                                if (isMultipleX && xIndexMap) {
                                                        // Use Map for O(1) lookup instead of getIndexByX which uses indexOf
                                                        const xKey = isString(v.x) ? v.x : +v.x;
                                                        const index = xIndexMap.get(xKey);

                                                        if (index !== undefined) {
                                                                data[index as number] = value;
                                                        }
                                                } else {
                                                        data.push(value);
                                                }
                                        }
                                });

                        ys[t.id] = data;
                });

                return ys;
        },

        hasMultiTargets(): boolean {
                return this.filterTargetsToShow().length > 1;
        },

        /**
         * Sort targets data
         * Note: For stacked bar, will sort from the total sum of data series, not for each stacked bar
         * @param {Array} targetsValue Target value
         * @returns {Array}
         * @private
         */
        orderTargets(targetsValue: IData[]): IData[] {
                const $$ = this;
                const targets = targetsValue.slice();
                const fn = $$.getSortCompareFn();

                fn && targets.sort(fn);

                return targets;
        },

        /**
         * Get data.order compare function
         * @param {boolean} isReversed for Arc & Treemap type sort order needs to be reversed
         * @returns {function} compare function
         * @private
         */
        getSortCompareFn(isReversed = false): Function | null {
                const $$ = this;
                const {config} = $$;
                const order = config.data_order;
                const orderAsc = /asc/i.test(order);
                const orderDesc = /desc/i.test(order);
                let fn;

                if (orderAsc || orderDesc) {
                        const reducer = (p, c) => p + Math.abs(c.value);
                        const sum = v => (isNumber(v) ? v : (
                                "values" in v ? v.values.reduce(reducer, 0) : v.value
                        ));

                        fn = (t1: IData | IDataRow, t2: IData | IDataRow) => {
                                const t1Sum = sum(t1);
                                const t2Sum = sum(t2);

                                return isReversed ?
                                        (orderAsc ? t1Sum - t2Sum : t2Sum - t1Sum) :
                                        (orderAsc ? t2Sum - t1Sum : t1Sum - t2Sum);
                        };
                } else if (isFunction(order)) {
                        fn = order.bind($$.api);
                }

                return fn || null;
        },

        filterByX(targets, x) {
                return this.getValuesByX(targets).get(this.getXCacheKey(x)) || [];
        },

        filterNullish(data) {
                const filter = v => isValue(v.value);

                return data ?
                        data.filter(
                                v => "value" in v ? filter(v) : v.values.some(filter)
                        ) :
                        data;
        },

        filterRemoveNull(data) {
                return data.filter(d => isValue(this.getBaseValue(d)));
        },

        filterByXDomain(targets, xDomain) {
                return targets.map(t => ({
                        id: t.id,
                        id_org: t.id_org,
                        values: t.values.filter(v => xDomain[0] <= v.x && v.x <= xDomain[1])
                }));
        },

        hasDataLabel() {
                const dataLabels = this.config.data_labels;

                return (isBoolean(dataLabels) && dataLabels) ||
                        (isObjectType(dataLabels) && notEmpty(dataLabels));
        },

        /**
         * Determine if has null value
         * @param {Array} targets Data array to be evaluated
         * @returns {boolean}
         * @private
         */
        hasNullDataValue(targets: IDataRow[]): boolean {
                return targets.some(({value}) => value === null);
        },

        /**
         * Get data index from the event coodinates
         * @param {Event} event Event object
         * @returns {number}
         * @private
         */
        getDataIndexFromEvent(event): number {
                const $$ = this;
                const {
                        $el,
                        config,
                        state: {hasRadar, inputType, eventReceiver: {coords, rect}}
                } = $$;
                let index;

                if (hasRadar) {
                        let target = event.target;

                        // in case of multilined axis text
                        if (/tspan/i.test(target.tagName)) {
                                target = target.parentNode;
                        }

                        const d: any = d3Select(target).datum();

                        index = d && Object.keys(d).length === 1 ? d.index : undefined;
                } else {
                        const isRotated = config.axis_rotated;
                        const scrollPos = getScrollPosition($el.chart.node());

                        // get data based on the mouse coords
                        const e = inputType === "touch" && event.changedTouches ?
                                event.changedTouches[0] :
                                event;

                        let point = isRotated ? e.clientY + scrollPos.y : e.clientX + scrollPos.x;

                        if (hasViewBox($el.svg)) {
                                const pos = [point, 0];

                                isRotated && pos.reverse();
                                point = getTransformCTM($el.eventRect.node(), ...pos)[isRotated ? "y" : "x"];
                        } else {
                                point -= isRotated ? rect.top : rect.left;
                        }

                        index = findIndex(
                                coords,
                                point,
                                0,
                                coords.length - 1,
                                isRotated
                        );
                }

                return index;
        },

        getDataLabelLength(min: number, max: number, key: "width" | "height"): number[] {
                const $$ = this;
                const paddingCoef = 1.3;
                const values = [min, max].map(v => $$.dataLabelFormat()(v));

                if ($$.config.render_mode === "canvas" && !$$.$el.svg) {
                        const chart = $$.$el.chart?.node?.();
                        const doc = chart?.ownerDocument;
                        const svg = doc?.createElementNS("http://www.w3.org/2000/svg", "svg");

                        if (chart && svg) {
                                const texts = values.map(value => {
                                        const text = doc.createElementNS("http://www.w3.org/2000/svg", "text");

                                        text.textContent = value;
                                        svg.appendChild(text);

                                        return text;
                                });

                                svg.style.cssText =
                                        "position:absolute;visibility:hidden;left:-10000px;top:-10000px;";
                                chart.appendChild(svg);

                                const lengths = texts.map(text => text.getBoundingClientRect()[key] * paddingCoef);

                                svg.remove();

                                return lengths;
                        }
                }

                return $$.getTextRect(
                        values
                )?.map((rect: DOMRect) => rect[key] * paddingCoef) || [0, 0];
        },

        isNoneArc(d) {
                return this.hasTarget(this.data.targets, d.id);
        },

        isArc(d) {
                return "data" in d && this.hasTarget(this.data.targets, d.data.id);
        },

        findSameXOfValues(values, index) {
                const targetX = values[index].x;
                const sames: any[] = [];
                let i;

                for (i = index - 1; i >= 0; i--) {
                        if (targetX !== values[i].x) {
                                break;
                        }

                        sames.push(values[i]);
                }

                for (i = index; i < values.length; i++) {
                        if (targetX !== values[i].x) {
                                break;
                        }

                        sames.push(values[i]);
                }

                return sames;
        },

        /**
         * Get normalized x value cache key.
         * @param {Date|number|string} x X value
         * @returns {number|string} Cache key value
         * @private
         */
        getXCacheKey(x: Date | number | string): number | string {
                return isString(x) ? x : +x;
        },

        /**
         * Get data rows grouped by x value.
         * @param {Array} targets Data targets
         * @returns {Map} X-value keyed data rows
         * @private
         */
        getValuesByX(targets): Map<number | string, IDataRow[]> {
                const $$ = this;
                const {cache, state} = $$;
                const targetKey = targets.map(t => {
                        const {values} = t;
                        const first = values[0];
                        const last = values[values.length - 1];

                        return `${t.id}:${values.length}:${first ? $$.getXCacheKey(first.x) : ""}:${
                                last ? $$.getXCacheKey(last.x) : ""
                        }`;
                }).join("|");
                const cached = cache.get(KEY.valuesByX);

                if (
                        cached &&
                        cached.generation === state.dataGeneration &&
                        cached.targetKey === targetKey
                ) {
                        return cached.value;
                }

                const valueMap = new Map<number | string, IDataRow[]>();

                for (let i = 0; i < targets.length; i++) {
                        const values = targets[i].values;

                        for (let j = 0; j < values.length; j++) {
                                const v = values[j];
                                const x = $$.getXCacheKey(v.x);
                                const rows = valueMap.get(x);

                                rows ? rows.push(v) : valueMap.set(x, [v]);
                        }
                }

                cache.add(KEY.valuesByX, {
                        generation: state.dataGeneration,
                        targetKey,
                        value: valueMap
                });

                return valueMap;
        },

        /**
         * Get candidate values near the current pointer position.
         * @param {Array} values Data values
         * @param {Array} pos Pointer position
         * @param {boolean} useSortedIndex Whether values are sorted target values
         * @returns {Array} Candidate values
         * @private
         */
        getClosestCandidates(values, pos: [number, number], useSortedIndex = true): IDataRow[] {
                const $$ = this;
                const {config, scale} = $$;
                const len = values.length;
                const first = values[0];

                if (!useSortedIndex || len < 200 || !first || !config.data_xSort) {
                        return values;
                }

                const isBar = $$.isBarType(first.id);
                const isCandle = $$.isCandlestickType(first.id);
                const sensitivity = config.point_sensitivity;

                if (!(isBar || isCandle) && !isNumber(sensitivity)) {
                        return values;
                }

                const xScale = scale.zoom || scale.x;
                const pointerX = pos[+config.axis_rotated];
                const isAscending = xScale(values[0].x) <= xScale(values[len - 1].x);
                let start = 0;
                let end = len - 1;

                while (start < end) {
                        const mid = (start + end) >> 1;
                        const x = xScale(values[mid].x);

                        if (isAscending ? x < pointerX : x > pointerX) {
                                start = mid + 1;
                        } else {
                                end = mid;
                        }
                }

                const candidates: IDataRow[] = [];
                const visited = new Set<number>();
                const add = (index: number) => {
                        if (index >= 0 && index < len && !visited.has(index)) {
                                visited.add(index);
                                candidates.push(values[index]);
                        }
                };
                const addSameX = (index: number) => {
                        if (index < 0 || index >= len) {
                                return;
                        }

                        const x = $$.getXCacheKey(values[index].x);
                        let i = index;

                        while (i >= 0 && $$.getXCacheKey(values[i].x) === x) {
                                add(i--);
                        }

                        i = index + 1;
                        while (i < len && $$.getXCacheKey(values[i].x) === x) {
                                add(i++);
                        }
                };

                if (isBar || isCandle) {
                        for (let i = start - 2; i <= start + 2; i++) {
                                addSameX(i);
                        }
                } else {
                        const maxDx = sensitivity as number;
                        const scan = (index: number, direction: number) => {
                                for (let i = index; i >= 0 && i < len; i += direction) {
                                        const v = values[i];

                                        if (Math.abs(xScale(v.x) - pointerX) > maxDx) {
                                                break;
                                        }

                                        add(i);
                                }
                        };

                        scan(start, 1);
                        scan(start - 1, -1);
                }

                return candidates;
        },

        findClosestFromTargets(targets, pos: [number, number]): IDataRow | undefined {
                const $$ = this;
                const candidates: IDataRow[] = [];

                for (let i = 0; i < targets.length; i++) {
                        const closest = $$.findClosest(targets[i].values, pos);

                        closest && candidates.push(closest);
                }

                // decide closest point and return
                return $$.findClosest(candidates, pos, false);
        },

        findClosest(values, pos: [number, number], useSortedIndex = true): IDataRow | undefined {
                const $$ = this;
                const {$el: {main}} = $$;
                const data = $$.getClosestCandidates(values, pos, useSortedIndex);

                let minDist;
                let closest;

                // find mouseovering bar/candlestick and closest point in a single pass
                // https://github.com/naver/billboard.js/issues/2434
                for (let i = 0; i < data.length; i++) {
                        const v = data[i];

                        if (!v || !isValue(v.value)) {
                                continue;
                        }

                        const isBar = $$.isBarType(v.id);
                        const isCandle = $$.isCandlestickType(v.id);

                        if (isBar || isCandle) {
                                const selector = isBar ?
                                        `.${$BAR.chartBar}.${$COMMON.target}${
                                                $$.getTargetSelectorSuffix(v.id)
                                        } .${$BAR.bar}-${v.index}` :
                                        `.${$CANDLESTICK.chartCandlestick}.${$COMMON.target}${
                                                $$.getTargetSelectorSuffix(v.id)
                                        } .${$CANDLESTICK.candlestick}-${v.index} path`;

                                if (!closest && $$.isWithinBar(main.select(selector).node())) {
                                        closest = v;
                                }
                        } else {
                                const d = $$.dist(v as IDataPoint, pos);
                                const sensitivity = $$.getPointSensitivity(v);

                                if (d < sensitivity && (minDist === undefined || d < minDist)) {
                                        minDist = d;
                                        closest = v;
                                }
                        }
                }

                return closest;
        },

        dist(data: IDataPoint, pos: [number, number]) {
                const $$ = this;
                const {config: {axis_rotated: isRotated}, scale} = $$;
                const xIndex = +isRotated; // true: 1, false: 0
                const yIndex = +!isRotated; // true: 0, false: 1
                const y = $$.circleY(data, data.index);
                const x = (scale.zoom || scale.x)(data.x);
                const dx = x - pos[xIndex];
                const dy = y - pos[yIndex];

                return Math.sqrt(dx * dx + dy * dy);
        },

        /**
         * Convert data for step type
         * @param {Array} values Object data values
         * @returns {Array}
         * @private
         */
        convertValuesToStep(values) {
                const $$ = this;
                const {axis, config} = $$;
                const stepType = config.line_step_type;
                const isCategorized = axis ? axis.isCategorized() : false;
                const converted = isArray(values) ? values.concat() : [values];

                if (!(isCategorized || /step\-(after|before)/.test(stepType))) {
                        return values;
                }

                // when all data are null, return empty array
                // https://github.com/naver/billboard.js/issues/3124
                if (converted.length) {
                        // insert & append cloning first/last value to be fully rendered covering on each gap sides
                        const head = converted[0];
                        const tail = converted[converted.length - 1];
                        const {id} = head;
                        let {x} = head;

                        // insert head
                        converted.unshift({x: --x, value: head.value, id});

                        isCategorized && stepType === "step-after" &&
                                converted.unshift({x: x - 1, value: head.value, id});

                        // append tail
                        x = tail.x;
                        converted.push({x: ++x, value: tail.value, id});

                        isCategorized && stepType === "step-before" &&
                                converted.push({x: x + 1, value: tail.value, id});
                }

                return converted;
        },

        convertValuesToRange(values) {
                const converted = isArray(values) ? values.concat() : [values];
                const ranges: {x: string | number, id: string, value: number}[] = [];

                converted.forEach(range => {
                        const {x, id} = range;

                        ranges.push({
                                x,
                                id,
                                value: range.value[0]
                        });

                        ranges.push({
                                x,
                                id,
                                value: range.value[2]
                        });
                });

                return ranges;
        },

        updateDataAttributes(name, attrs) {
                const $$ = this;
                const {config} = $$;
                const current = config[`data_${name}`];

                if (isUndefined(attrs)) {
                        return current;
                }

                Object.keys(attrs).forEach(id => {
                        current[id] = attrs[id];
                });

                $$.redraw({withLegend: true});

                return current;
        },

        getRangedData(d, key = "", type = "areaRange"): number | undefined {
                const value = d?.value;

                if (isArray(value)) {
                        if (type === "bar") {
                                return value.reduce((a, c) => c - a);
                        } else {
                                const index = rangedDataKeyIndex[type]?.[key as string] ?? -1;

                                return index >= 0 ? value[index] : undefined;
                        }
                } else if (value && key) {
                        return value[key];
                }

                return value;
        },

        /**
         * Set ratio for grouped data
         * @param {Array} data Data array
         * @private
         */
        setRatioForGroupedData(data: (IDataRow | IData)[]): void {
                const $$ = this;
                const {config} = $$;

                // calculate ratio if grouped data exists
                if (config.data_groups.length && data.some(d => $$.isGrouped(d.id))) {
                        const setter = (d: IDataRow) => $$.getRatio("index", d, true);

                        data.forEach(v => {
                                "values" in v ? v.values.forEach(setter) : setter(v);
                        });
                }
        },

        /**
         * Get ratio value
         * @param {string} type Ratio for given type
         * @param {object} d Data value object
         * @param {boolean} asPercent Convert the return as percent or not
         * @returns {number} Ratio value
         * @private
         */
        getRatio(type: "arc" | "index" | "radar" | "bar" | "treemap", d, asPercent = false): number {
                const $$ = this;
                const {config, state} = $$;
                const api = $$.api;
                let ratio = 0;

                if (d && api.data.shown().length) {
                        ratio = d.ratio || d.value;

                        if (type === "arc") {
                                // if has padAngle set, calculate rate based on value
                                if ($$.pie.padAngle()()) {
                                        ratio = d.value / $$.getTotalDataSum(true);

                                        // otherwise, based on the rendered angle value
                                } else {
                                        const gaugeArcLength = config.gauge_fullCircle ?
                                                $$.getArcLength() :
                                                $$.getStartingAngle() * -2;
                                        const arcLength = $$.hasType("gauge") ? gaugeArcLength : Math.PI * 2;

                                        ratio = (d.endAngle - d.startAngle) / arcLength;
                                }
                        } else if (type === "index") {
                                const dataValues = api.data.values.bind(api);
                                const {hiddenTargetIds} = state;

                                // For normalized stack per group, get total per group
                                let total = this.getTotalPerIndex(
                                        $$.isStackNormalizedPerGroup() ? d.id : undefined
                                );

                                // If total is null, the data is not in any group - don't normalize
                                if (total === null) {
                                        return ratio;
                                }

                                if (hiddenTargetIds.size) {
                                        // When normalized per group, only subtract hidden data from the same group
                                        let hiddenIds: string[] = [...hiddenTargetIds];

                                        if ($$.isStackNormalizedPerGroup() && d.id) {
                                                const group = config.data_groups.find(g => g.indexOf(d.id) >= 0);
                                                if (group) {
                                                        // Only consider hidden IDs in the same group
                                                        hiddenIds = hiddenIds.filter(id => group.indexOf(id) >= 0);
                                                }
                                        }

                                        if (hiddenIds.length) {
                                                let hiddenSum = dataValues(hiddenIds, false);

                                                if (hiddenSum.length) {
                                                        hiddenSum = hiddenSum
                                                                .reduce((acc, curr) =>
                                                                        acc.map((v, i) => (isNumber(v) ? v : 0) + curr[i])
                                                                );

                                                        total = total.map((v, i) => v - hiddenSum[i]);
                                                }
                                        }
                                }

                                const divisor = total[d.index];

                                d.ratio = isNumber(d.value) && total && divisor ? d.value / divisor : 0;

                                ratio = d.ratio;
                        } else if (type === "radar") {
                                ratio = (
                                        parseFloat(String(Math.max(d.value, 0))) / state.current.dataMax
                                ) * config.radar_size_ratio;
                        } else if (type === "bar") {
                                const yScale = $$.getYScaleById.bind($$)(d.id);
                                const max = yScale.domain().reduce((a, c) => c - a);

                                // when all data are 0, return 0
                                ratio = max === 0 ? 0 : Math.abs(
                                        $$.getRangedData(d, null, type) / max
                                );
                        } else if (type === "treemap") {
                                ratio /= $$.getTotalDataSum(true);
                        }
                }

                return asPercent && ratio ? ratio * 100 : ratio;
        },

        /**
         * Sort data index to be aligned with x axis.
         * @param {Array} tickValues Tick array values
         * @private
         */
        updateDataIndexByX(tickValues) {
                const $$ = this;

                const tickValueMap = tickValues.reduce((out, tick, index) => {
                        out[Number(tick.x)] = index;
                        return out;
                }, {});

                $$.data.targets.forEach(t => {
                        t.values.forEach((value, valueIndex) => {
                                let index = tickValueMap[Number(value.x)];

                                if (index === undefined) {
                                        index = valueIndex;
                                }
                                value.index = index;
                        });
                });
        },

        /**
         * Determine if bubble has dimension data
         * @param {object|Array} d data value
         * @returns {boolean}
         * @private
         */
        isBubbleZType(d): boolean {
                const $$ = this;

                return $$.isBubbleType(d) && (
                        (isObject(d.value) && ("z" in d.value || "y" in d.value)) ||
                        (isArray(d.value) && d.value.length >= 2)
                );
        },

        /**
         * Determine if bar has ranged data
         * @param {Array} d data value
         * @returns {boolean}
         * @private
         */
        isBarRangeType(d): boolean {
                const $$ = this;
                const {value} = d;

                return $$.isBarType(d) &&
                        !$$.isSubchartSourceTypeOf?.(d, TYPE.CANDLESTICK) &&
                        isArray(value) && value.length >= 2 &&
                        value.every(isNumber);
        },

        /**
         * Get data object by id
         * @param {string} id data id
         * @returns {object}
         * @private
         */
        getDataById(id: string) {
                const d = this.cache.get(id) || this.api.data(id);

                return d?.[0] ?? d;
        }
};

naver / billboard.js / 30443109728

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