5806521797

Build Type

push

github

Committed by netil

Commit Message

refactor(grid): Refactor grid update (#3330)

- Merge separated updateXGridLines & updateYGridLines to single updateGridLines
- Do not generate text node when has no text value

Run Details

5706 of 6614 branches covered (86.27%)

Branch coverage included in aggregate %.

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

5 existing lines in 1 file now uncovered.

7514 of 7936 relevant lines covered (94.68%)

20478.56 hits per line

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

95.64

/src/ChartInternal/internals/grid.ts

/**
 * Copyright (c) 2017 ~ present NAVER Corp.
 * billboard.js project is licensed under the MIT license
 */
import {
        select as d3Select,
        selectAll as d3SelectAll
} from "d3-selection";
import {$AXIS, $COMMON, $FOCUS, $GRID} from "../../config/classes";
import {isArray, isValue} from "../../module/util";

// Grid position and text anchor helpers
const getGridTextAnchor = d => isValue(d.position) || "end";
const getGridTextDx = d => (d.position === "start" ? 4 : (d.position === "middle" ? 0 : -4));

/**
 * Get grid text x value getter function
 * @param {boolean} isX Is x Axis
 * @param {number} width Width value
 * @param {number} height Height value
 * @returns {Function}
 * @private
 */
function getGridTextX(isX, width, height): Function {
        return d => {
                let x = isX ? 0 : width;

                if (d.position === "start") {
                        x = isX ? -height : 0;
                } else if (d.position === "middle") {
                        x = (isX ? -height : width) / 2;
                }

                return x;
        };
}

/**
 * Update coordinate attributes value
 * @param {d3.selection} el Target node
 * @param {string} type Type
 * @private
 */
function smoothLines(el, type: string): void {
        if (type === "grid") {
                el.each(function() {
                        const g = d3Select(this);

                        ["x1", "x2", "y1", "y2"]
                                .forEach(v => g.attr(v, Math.ceil(+g.attr(v))));
                });
        }
}

export default {
        hasGrid(): boolean {
                const {config} = this;

                return ["x", "y"]
                        .some(v => config[`grid_${v}_show`] || config[`grid_${v}_lines`].length);
        },

        initGrid() {
                const $$ = this;

                $$.hasGrid() && $$.initGridLines();
                $$.initFocusGrid();
        },

        initGridLines(): void {
                const $$ = this;
                const {config, state: {clip}, $el} = $$;

                if (config.grid_x_lines.length || config.grid_y_lines.length) {
                        $el.gridLines.main = $el.main.insert("g", `.${$COMMON.chart}${config.grid_lines_front ? " + *" : ""}`)
                                .attr("clip-path", clip.pathGrid)
                                .attr("class", `${$GRID.grid} ${$GRID.gridLines}`);

                        $el.gridLines.main.append("g").attr("class", $GRID.xgridLines);
                        $el.gridLines.main.append("g").attr("class", $GRID.ygridLines);

                        $el.gridLines.x = d3SelectAll([]);
                }
        },

        updateXGrid(withoutUpdate): void {
                const $$ = this;
                const {config, scale, state, $el: {main, grid}} = $$;
                const isRotated = config.axis_rotated;
                const xgridData = $$.generateGridData(config.grid_x_type, scale.x);
                const tickOffset = $$.axis.isCategorized() ? $$.axis.x.tickOffset() : 0;
                const pos = d => (scale.zoom || scale.x)(d) + (
                        tickOffset * (isRotated ? -1 : 1)
                );

                state.xgridAttr = isRotated ? {
                        "x1": 0,
                        "x2": state.width,
                        "y1": pos,
                        "y2": pos,
                } : {
                        "x1": pos,
                        "x2": pos,
                        "y1": 0,
                        "y2": state.height,
                };

                grid.x = main.select(`.${$GRID.xgrids}`)
                        .selectAll(`.${$GRID.xgrid}`)
                        .data(xgridData);

                grid.x.exit().remove();

                grid.x = grid.x.enter()
                        .append("line")
                        .attr("class", $GRID.xgrid)
                        .merge(grid.x);

                if (!withoutUpdate) {
                        grid.x.each(function() {
                                const grid = d3Select(this);

                                Object.keys(state.xgridAttr).forEach(id => {
                                        grid.attr(id, state.xgridAttr[id])
                                                .style("opacity", () => (
                                                        grid.attr(isRotated ? "y1" : "x1") === (isRotated ? state.height : 0) ?
                                                                "0" : null
                                                ));
                                });
                        });
                }
        },

        updateYGrid(): void {
                const $$ = this;
                const {axis, config, scale, state, $el: {grid, main}} = $$;
                const isRotated = config.axis_rotated;
                const pos = d => Math.ceil(scale.y(d));
                const gridValues =
                        axis.y.getGeneratedTicks(config.grid_y_ticks) || $$.scale.y.ticks(config.grid_y_ticks);

                grid.y = main.select(`.${$GRID.ygrids}`)
                        .selectAll(`.${$GRID.ygrid}`)
                        .data(gridValues);

                grid.y.exit().remove();

                grid.y = grid.y
                        .enter()
                        .append("line")
                        .attr("class", $GRID.ygrid)
                        .merge(grid.y);

                grid.y.attr("x1", isRotated ? pos : 0)
                        .attr("x2", isRotated ? pos : state.width)
                        .attr("y1", isRotated ? 0 : pos)
                        .attr("y2", isRotated ? state.height : pos);

                smoothLines(grid.y, "grid");
        },

        updateGrid() {
                const $$ = this;
                const {$el: {grid, gridLines}} = $$;

                !gridLines.main && $$.initGridLines();

                // hide if arc type
                grid.main.style("visibility", $$.hasArcType() ? "hidden" : null);

                $$.hideGridFocus();
                $$.updateGridLines("x");
                $$.updateGridLines("y");
        },

        /**
         * Update Grid lines
         * @param {string} type x | y
         * @private
         */
        updateGridLines(type: "x" | "y"): void {
                const $$ = this;
                const {config, $el: {gridLines, main}, $T} = $$;
                const isRotated = config.axis_rotated;
                const isX = type === "x";

                config[`grid_${type}_show`] && $$[`update${type.toUpperCase()}Grid`]();

                let lines = main.select(`.${$GRID[`${type}gridLines`]}`)
                        .selectAll(`.${$GRID[`${type}gridLine`]}`)
                        .data(config[`grid_${type}_lines`]);

                // exit
                $T(lines.exit())
                        .style("opacity", "0")
                        .remove();

                // enter
                const gridLine = lines.enter().append("g");

                gridLine.append("line")
                        .style("opacity", "0");

                lines = gridLine.merge(lines);

                lines.each(function(d) {
                        const g = d3Select(this);

                        if (g.select("text").empty() && d.text) {
                                g.append("text")
                                        .style("opacity", "0");
                        }
                });

                $T(lines
                        .attr("class", d => `${$GRID[`${type}gridLine`]} ${d.class || ""}`.trim())
                        .select("text")
                        .attr("text-anchor", getGridTextAnchor)
                        .attr("transform", () => (isX ?
                                (isRotated ? null : "rotate(-90)") :
                                (isRotated ? "rotate(-90)" : null)
                        ))
                        .attr("dx", getGridTextDx)
                        .attr("dy", -5)
                )
                        .text(function(d) {
                                return d.text ?? this.remove();
                        });

                gridLines[type] = lines;
        },

        redrawGrid(withTransition: boolean): any[] {
                const $$ = this;
                const {
                        config: {axis_rotated: isRotated},
                        state: {width, height},
                        $el: {gridLines},
                        $T
                } = $$;
                const xv = $$.xv.bind($$);
                const yv = $$.yv.bind($$);

                let xLines = gridLines.x.select("line");
                let xTexts = gridLines.x.select("text");

                let yLines = gridLines.y.select("line");
                let yTexts = gridLines.y.select("text");

                xLines = $T(xLines, withTransition)
                        .attr("x1", isRotated ? 0 : xv)
                        .attr("x2", isRotated ? width : xv)
                        .attr("y1", isRotated ? xv : 0)
                        .attr("y2", isRotated ? xv : height);

                xTexts = $T(xTexts, withTransition)
                        .attr("x", getGridTextX(!isRotated, width, height))
                        .attr("y", xv);

                yLines = $T(yLines, withTransition)
                        .attr("x1", isRotated ? yv : 0)
                        .attr("x2", isRotated ? yv : width)
                        .attr("y1", isRotated ? 0 : yv)
                        .attr("y2", isRotated ? height : yv);

                yTexts = $T(yTexts, withTransition)
                        .attr("x", getGridTextX(isRotated, width, height))
                        .attr("y", yv);

                return [
                        xLines.style("opacity", null),
                        xTexts.style("opacity", null),
                        yLines.style("opacity", null),
                        yTexts.style("opacity", null)
                ];
        },

        initFocusGrid(): void {
                const $$ = this;
                const {config, state: {clip}, $el} = $$;
                const isFront = config.grid_front;
                const className = `.${isFront && $el.gridLines.main ? $GRID.gridLines : $COMMON.chart}${isFront ? " + *" : ""}`;

                const grid = $el.main.insert("g", className)
                        .attr("clip-path", clip.pathGrid)
                        .attr("class", $GRID.grid);

                $el.grid.main = grid;

                config.grid_x_show &&
                        grid.append("g").attr("class", $GRID.xgrids);

                config.grid_y_show &&
                        grid.append("g").attr("class", $GRID.ygrids);

                if (config.interaction_enabled && config.grid_focus_show) {
                        grid.append("g")
                                .attr("class", $FOCUS.xgridFocus)
                                .append("line")
                                .attr("class", $FOCUS.xgridFocus);

                        // to show xy focus grid line, should be 'tooltip.grouped=false'
                        if (config.grid_focus_y && !config.tooltip_grouped) {
                                grid.append("g")
                                        .attr("class", $FOCUS.ygridFocus)
                                        .append("line")
                                        .attr("class", $FOCUS.ygridFocus);
                        }
                }
        },

        /**
         * Show grid focus line
         * @param {Array} data Selected data
         * @private
         */
        showGridFocus(data?): void {
                const $$ = this;
                const {config, state: {width, height}} = $$;
                const isRotated = config.axis_rotated;
                const focusEl = $$.$el.main.selectAll(`line.${$FOCUS.xgridFocus}, line.${$FOCUS.ygridFocus}`);

                const dataToShow = (data || [focusEl.datum()]).filter(d => d && isValue($$.getBaseValue(d)));

                // Hide when bubble/scatter/stanford plot exists
                if (!config.tooltip_show || dataToShow.length === 0 || $$.hasType("bubble") || $$.hasArcType()) {
                        return;
                }

                const isEdge = config.grid_focus_edge && !config.tooltip_grouped;
                const xx = $$.xx.bind($$);

                focusEl
                        .style("visibility", null)
                        .data(dataToShow.concat(dataToShow))
                        .each(function(d) {
                                const el = d3Select(this);
                                const pos = {
                                        x: xx(d),
                                        y: $$.getYScaleById(d.id)(d.value)
                                };
                                let xy;

                                if (el.classed($FOCUS.xgridFocus)) {
                                        // will contain 'x1, y1, x2, y2' order
                                        xy = isRotated ?
                                                [
                                                        null, // x1
                                                        pos.x, // y1
                                                        isEdge ? pos.y : width, // x2
                                                        pos.x // y2
                                                ] : [
                                                        pos.x,
                                                        isEdge ? pos.y : null,
                                                        pos.x,
                                                        height
                                                ];
                                } else {
                                        const isY2 = $$.axis.getId(d.id) === "y2";

                                        xy = isRotated ?
                                                [
                                                        pos.y, // x1
                                                        isEdge && !isY2 ? pos.x : null, // y1
                                                        pos.y, // x2
                                                        isEdge && isY2 ? pos.x : height // y2
                                                ] : [
                                                        isEdge && isY2 ? pos.x : null,
                                                        pos.y,
                                                        isEdge && !isY2 ? pos.x : width,
                                                        pos.y
                                                ];
                                }

                                ["x1", "y1", "x2", "y2"]
                                        .forEach((v, i) => el.attr(v, xy[i]));
                        });

                smoothLines(focusEl, "grid");
                $$.showCircleFocus?.(data);
        },

        hideGridFocus(): void {
                const $$ = this;
                const {state: {inputType, resizing}, $el: {main}} = $$;

                if (inputType === "mouse" || !resizing) {
                        main.selectAll(`line.${$FOCUS.xgridFocus}, line.${$FOCUS.ygridFocus}`)
                                .style("visibility", "hidden");

                        $$.hideCircleFocus?.();
                }
        },

        updateGridFocus(): boolean {
                const $$ = this;
                const {state: {inputType, width, height, resizing}, $el: {grid}} = $$;
                const xgridFocus = grid.main.select(`line.${$FOCUS.xgridFocus}`);

                if (inputType === "touch") {
                        if (xgridFocus.empty()) {
                                resizing && $$.showCircleFocus?.();
                        } else {
                                $$.showGridFocus();
                        }
                } else {
                        const isRotated = $$.config.axis_rotated;

                        xgridFocus
                                .attr("x1", isRotated ? 0 : -10)
                                .attr("x2", isRotated ? width : -10)
                                .attr("y1", isRotated ? -10 : 0)
                                .attr("y2", isRotated ? -10 : height);
                }

                // need to return 'true' as of being pushed to the redraw list
                // ref: getRedrawList()
                return true;
        },

        generateGridData(type: string, scale) {
                const $$ = this;
                const tickNum = $$.$el.main.select(`.${$AXIS.axisX}`)
                        .selectAll(".tick")
                        .size();
                let gridData: Date[] = [];

                if (type === "year") {
                        const xDomain = $$.getXDomain();
                        const [firstYear, lastYear] = xDomain.map(v => v.getFullYear());

                        for (let i = firstYear; i <= lastYear; i++) {
                                gridData.push(new Date(`${i}-01-01 00:00:00`));
                        }
                } else {
                        gridData = scale.ticks(10);

                        if (gridData.length > tickNum) { // use only int
                                gridData = gridData.filter(d => String(d).indexOf(".") < 0);
                        }
                }

                return gridData;
        },

        getGridFilterToRemove(params): Function {
                return params ? line => {
                        let found = false;

                        (isArray(params) ? params.concat() : [params]).forEach(param => {
                                if ((("value" in param && line.value === param.value) || ("class" in param && line.class === param.class))) {
                                        found = true;
                                }
                        });

                        return found;
                } : () => true;
        },

        removeGridLines(params, forX?: boolean): void {
                const $$ = this;
                const {config, $T} = $$;
                const toRemove = $$.getGridFilterToRemove(params);
                const toShow = line => !toRemove(line);
                const classLines = forX ? $GRID.xgridLines : $GRID.ygridLines;
                const classLine = forX ? $GRID.xgridLine : $GRID.ygridLine;

                $T($$.$el.main.select(`.${classLines}`)
                        .selectAll(`.${classLine}`)
                        .filter(toRemove))
                        .style("opacity", "0")
                        .remove();

                const gridLines = `grid_${forX ? "x" : "y"}_lines`;

                config[gridLines] = config[gridLines].filter(toShow);
        }
};

1	/**
2	* Copyright (c) 2017 ~ present NAVER Corp.
3	* billboard.js project is licensed under the MIT license
4	*/
5	import {
6	select as d3Select,
7	selectAll as d3SelectAll
8	} from "d3-selection";
9	import {$AXIS, $COMMON, $FOCUS, $GRID} from "../../config/classes";
10	import {isArray, isValue} from "../../module/util";
11
12	// Grid position and text anchor helpers
13	const getGridTextAnchor = d => isValue(d.position) \|\| "end";	297✔
14	const getGridTextDx = d => (d.position === "start" ? 4 : (d.position === "middle" ? 0 : -4));	297✔
15
16	/**
17	* Get grid text x value getter function
18	* @param {boolean} isX Is x Axis
19	* @param {number} width Width value
20	* @param {number} height Height value
21	* @returns {Function}
22	* @private
23	*/
24	function getGridTextX(isX, width, height): Function {	318✔
25	return d => {	318✔
26	let x = isX ? 0 : width;	297✔
27
28	if (d.position === "start") {	297✔
29	x = isX ? -height : 0;	57✔
30	} else if (d.position === "middle") {	240✔
31	x = (isX ? -height : width) / 2;	57✔
32	}
33
34	return x;	297✔
35	};
36	}
37
38	/**
39	* Update coordinate attributes value
40	* @param {d3.selection} el Target node
41	* @param {string} type Type
42	* @private
43	*/
44	function smoothLines(el, type: string): void {
45	if (type === "grid") {	1,281!
46	el.each(function() {	1,686✔
47	const g = d3Select(this);	1,686✔
48
49	["x1", "x2", "y1", "y2"]	1,686✔
50	.forEach(v => g.attr(v, Math.ceil(+g.attr(v))));	6,744✔
51	});
52	}
53	}
54
55	export default {
56	hasGrid(): boolean {	10,071✔
57	const {config} = this;	10,071✔
58
59	return ["x", "y"]	10,071✔
60	.some(v => config[`grid_${v}_show`] \|\| config[`grid_${v}_lines`].length);	20,001✔
61	},
62
63	initGrid() {
64	const $$ = this;	3,993✔
65
66	$$.hasGrid() && $$.initGridLines();	3,993✔
67	$$.initFocusGrid();	3,993✔
68	},
69
70	initGridLines(): void {
71	const $$ = this;	198✔
72	const {config, state: {clip}, $el} = $$;	198✔
73
74	if (config.grid_x_lines.length \|\| config.grid_y_lines.length) {	198✔
75	$el.gridLines.main = $el.main.insert("g", `.${$COMMON.chart}${config.grid_lines_front ? " + *" : ""}`)	129✔
76	.attr("clip-path", clip.pathGrid)
77	.attr("class", `${$GRID.grid} ${$GRID.gridLines}`);
78
79	$el.gridLines.main.append("g").attr("class", $GRID.xgridLines);	129✔
80	$el.gridLines.main.append("g").attr("class", $GRID.ygridLines);	129✔
81
82	$el.gridLines.x = d3SelectAll([]);	129✔
83	}
84	},
85
86	updateXGrid(withoutUpdate): void {	57✔
87	const $$ = this;	57✔
88	const {config, scale, state, $el: {main, grid}} = $$;	57✔
89	const isRotated = config.axis_rotated;	57✔
90	const xgridData = $$.generateGridData(config.grid_x_type, scale.x);	57✔
91	const tickOffset = $$.axis.isCategorized() ? $$.axis.x.tickOffset() : 0;	57✔
92	const pos = d => (scale.zoom \|\| scale.x)(d) + (	348✔
93	tickOffset * (isRotated ? -1 : 1)	348✔
94	);
95
96	state.xgridAttr = isRotated ? {	57✔
97	"x1": 0,
98	"x2": state.width,
99	"y1": pos,
100	"y2": pos,
101	} : {
102	"x1": pos,
103	"x2": pos,
104	"y1": 0,
105	"y2": state.height,
106	};
107
108	grid.x = main.select(`.${$GRID.xgrids}`)	57✔
109	.selectAll(`.${$GRID.xgrid}`)
110	.data(xgridData);
111
112	grid.x.exit().remove();	57✔
113
114	grid.x = grid.x.enter()	57✔
115	.append("line")
116	.attr("class", $GRID.xgrid)
117	.merge(grid.x);
118
119	if (!withoutUpdate) {	57✔
120	grid.x.each(function() {	174✔
121	const grid = d3Select(this);	174✔
122
123	Object.keys(state.xgridAttr).forEach(id => {	1,392✔
124	grid.attr(id, state.xgridAttr[id])	696✔
125	.style("opacity", () => (	696✔
126	grid.attr(isRotated ? "y1" : "x1") === (isRotated ? state.height : 0) ?	1,392✔
127	"0" : null	696!
128	));
129	});
130	});
131	}
132	},
133
134	updateYGrid(): void {	72✔
135	const $$ = this;	72✔
136	const {axis, config, scale, state, $el: {grid, main}} = $$;	72✔
137	const isRotated = config.axis_rotated;	72✔
138	const pos = d => Math.ceil(scale.y(d));	912✔
139	const gridValues =
140	axis.y.getGeneratedTicks(config.grid_y_ticks) \|\| $$.scale.y.ticks(config.grid_y_ticks);	72✔
141
142	grid.y = main.select(`.${$GRID.ygrids}`)	72✔
143	.selectAll(`.${$GRID.ygrid}`)
144	.data(gridValues);
145
146	grid.y.exit().remove();	72✔
147
148	grid.y = grid.y	72✔
149	.enter()
150	.append("line")
151	.attr("class", $GRID.ygrid)
152	.merge(grid.y);
153
154	grid.y.attr("x1", isRotated ? pos : 0)	72✔
155	.attr("x2", isRotated ? pos : state.width)	72✔
156	.attr("y1", isRotated ? 0 : pos)	72✔
157	.attr("y2", isRotated ? state.height : pos);	72✔
158
159	smoothLines(grid.y, "grid");	72✔
160	},
161
162	updateGrid() {
163	const $$ = this;	195✔
164	const {$el: {grid, gridLines}} = $$;	195✔
165
166	!gridLines.main && $$.initGridLines();	195✔
167
168	// hide if arc type
169	grid.main.style("visibility", $$.hasArcType() ? "hidden" : null);	195!
170
171	$$.hideGridFocus();	195✔
172	$$.updateGridLines("x");	195✔
173	$$.updateGridLines("y");	195✔
174	},
175
176	/**
177	* Update Grid lines
178	* @param {string} type x \| y
179	* @private
180	*/
181	updateGridLines(type: "x" \| "y"): void {	390✔
182	const $$ = this;	390✔
183	const {config, $el: {gridLines, main}, $T} = $$;	390✔
184	const isRotated = config.axis_rotated;	390✔
185	const isX = type === "x";
186
187	config[`grid_${type}_show`] && $$[`update${type.toUpperCase()}Grid`]();	390✔
188
189	let lines = main.select(`.${$GRID[`${type}gridLines`]}`)	390✔
190	.selectAll(`.${$GRID[`${type}gridLine`]}`)
191	.data(config[`grid_${type}_lines`]);
192
193	// exit
194	$T(lines.exit())	390✔
195	.style("opacity", "0")
196	.remove();
197
198	// enter
199	const gridLine = lines.enter().append("g");	390✔
200
201	gridLine.append("line")	390✔
202	.style("opacity", "0");
203
204	lines = gridLine.merge(lines);	390✔
205
206	lines.each(function(d) {	390✔
207	const g = d3Select(this);	309✔
208
209	if (g.select("text").empty() && d.text) {	309✔
210	g.append("text")	264✔
211	.style("opacity", "0");
212	}
213	});
214
215	$T(lines	390✔
216	.attr("class", d => `${$GRID[`${type}gridLine`]} ${d.class \|\| ""}`.trim())	309✔
217	.select("text")
218	.attr("text-anchor", getGridTextAnchor)
219	.attr("transform", () => (isX ?	297✔
220	(isRotated ? null : "rotate(-90)") :	435✔
221	(isRotated ? "rotate(-90)" : null)	159✔
222	))
223	.attr("dx", getGridTextDx)
224	.attr("dy", -5)
225	)
226	.text(function(d) {
227	return d.text ?? this.remove();	297!
228	});
229
230	gridLines[type] = lines;	390✔
231	},
232
233	redrawGrid(withTransition: boolean): any[] {
234	const $$ = this;	159✔
235	const {
236	config: {axis_rotated: isRotated},
237	state: {width, height},	159✔
238	$el: {gridLines},
239	$T
240	} = $$;	159✔
241	const xv = $$.xv.bind($$);	159✔
242	const yv = $$.yv.bind($$);	159✔
243
244	let xLines = gridLines.x.select("line");	159✔
245	let xTexts = gridLines.x.select("text");	159✔
246
247	let yLines = gridLines.y.select("line");	159✔
248	let yTexts = gridLines.y.select("text");	159✔
249
250	xLines = $T(xLines, withTransition)	159✔
251	.attr("x1", isRotated ? 0 : xv)	159✔
252	.attr("x2", isRotated ? width : xv)	159✔
253	.attr("y1", isRotated ? xv : 0)	159✔
254	.attr("y2", isRotated ? xv : height);	159✔
255
256	xTexts = $T(xTexts, withTransition)	159✔
257	.attr("x", getGridTextX(!isRotated, width, height))
258	.attr("y", xv);
259
260	yLines = $T(yLines, withTransition)	159✔
261	.attr("x1", isRotated ? yv : 0)	159✔
262	.attr("x2", isRotated ? yv : width)	159✔
263	.attr("y1", isRotated ? 0 : yv)	159✔
264	.attr("y2", isRotated ? height : yv);	159✔
265
266	yTexts = $T(yTexts, withTransition)	159✔
267	.attr("x", getGridTextX(isRotated, width, height))
268	.attr("y", yv);
269
270	return [	159✔
271	xLines.style("opacity", null),
272	xTexts.style("opacity", null),
273	yLines.style("opacity", null),
274	yTexts.style("opacity", null)
275	];
276	},
277
278	initFocusGrid(): void {
279	const $$ = this;	3,993✔
280	const {config, state: {clip}, $el} = $$;	3,993✔
281	const isFront = config.grid_front;	3,993✔
282	const className = `.${isFront && $el.gridLines.main ? $GRID.gridLines : $COMMON.chart}${isFront ? " + *" : ""}`;	3,993✔
283
284	const grid = $el.main.insert("g", className)	3,993✔
285	.attr("clip-path", clip.pathGrid)
286	.attr("class", $GRID.grid);
287
288	$el.grid.main = grid;	3,993✔
289
290	config.grid_x_show &&	3,993✔
291	grid.append("g").attr("class", $GRID.xgrids);
292
293	config.grid_y_show &&	3,993✔
294	grid.append("g").attr("class", $GRID.ygrids);
295
296	if (config.interaction_enabled && config.grid_focus_show) {	3,993✔
297	grid.append("g")	3,975✔
298	.attr("class", $FOCUS.xgridFocus)
299	.append("line")
300	.attr("class", $FOCUS.xgridFocus);
301
302	// to show xy focus grid line, should be 'tooltip.grouped=false'
303	if (config.grid_focus_y && !config.tooltip_grouped) {	3,975✔
304	grid.append("g")	33✔
305	.attr("class", $FOCUS.ygridFocus)
306	.append("line")
307	.attr("class", $FOCUS.ygridFocus);
308	}
309	}
310	},
311
312	/**
313	* Show grid focus line
314	* @param {Array} data Selected data
315	* @private
316	*/
317	showGridFocus(data?): void {	1,329✔
318	const $$ = this;	1,329✔
319	const {config, state: {width, height}} = $$;	1,329✔
320	const isRotated = config.axis_rotated;	1,329✔
321	const focusEl = $$.$el.main.selectAll(`line.${$FOCUS.xgridFocus}, line.${$FOCUS.ygridFocus}`);	1,329✔
322
323	const dataToShow = (data \|\| [focusEl.datum()]).filter(d => d && isValue($$.getBaseValue(d)));	2,370✔
324
325	// Hide when bubble/scatter/stanford plot exists
326	if (!config.tooltip_show \|\| dataToShow.length === 0 \|\| $$.hasType("bubble") \|\| $$.hasArcType()) {	1,329✔
327	return;	120✔
328	}
329
330	const isEdge = config.grid_focus_edge && !config.tooltip_grouped;	1,209✔
331	const xx = $$.xx.bind($$);	1,209✔
332
333	focusEl	1,209✔
334	.style("visibility", null)
335	.data(dataToShow.concat(dataToShow))
336	.each(function(d) {	1,230✔
337	const el = d3Select(this);	1,230✔
338	const pos = {	1,230✔
339	x: xx(d),
340	y: $$.getYScaleById(d.id)(d.value)
341	};
342	let xy;
343
344	if (el.classed($FOCUS.xgridFocus)) {	1,230✔
345	// will contain 'x1, y1, x2, y2' order
346	xy = isRotated ?	1,206✔
347	[	1,206✔
348	null, // x1
349	pos.x, // y1
350	isEdge ? pos.y : width, // x2	21✔
351	pos.x // y2
352	] : [
353	pos.x,
354	isEdge ? pos.y : null,	1,185✔
355	pos.x,
356	height
357	];
358	} else {
359	const isY2 = $$.axis.getId(d.id) === "y2";	24✔
360
361	xy = isRotated ?	24✔
362	[	24✔
363	pos.y, // x1
364	isEdge && !isY2 ? pos.x : null, // y1	30✔
365	pos.y, // x2
366	isEdge && isY2 ? pos.x : height // y2	30✔
367	] : [
368	isEdge && isY2 ? pos.x : null,	30✔
369	pos.y,
370	isEdge && !isY2 ? pos.x : width,	30✔
371	pos.y
372	];
373	}
374
375	["x1", "y1", "x2", "y2"]	1,230✔
376	.forEach((v, i) => el.attr(v, xy[i]));	4,920✔
377	});
378
379	smoothLines(focusEl, "grid");	1,209✔
380	$$.showCircleFocus?.(data);	1,209!
381	},
382
383	hideGridFocus(): void {
384	const $$ = this;	513✔
385	const {state: {inputType, resizing}, $el: {main}} = $$;	513✔
386
387	if (inputType === "mouse" \|\| !resizing) {	513!
388	main.selectAll(`line.${$FOCUS.xgridFocus}, line.${$FOCUS.ygridFocus}`)	513✔
389	.style("visibility", "hidden");
390
391	$$.hideCircleFocus?.();	513!
392	}
393	},
394
395	updateGridFocus(): boolean {
396	const $$ = this;	6,057✔
397	const {state: {inputType, width, height, resizing}, $el: {grid}} = $$;	6,057✔
398	const xgridFocus = grid.main.select(`line.${$FOCUS.xgridFocus}`);	6,057✔
399
400	if (inputType === "touch") {	6,057✔
401	if (xgridFocus.empty()) {	99✔
402	resizing && $$.showCircleFocus?.();	24✔
403	} else {
404	$$.showGridFocus();	75✔
405	}
406	} else {
407	const isRotated = $$.config.axis_rotated;	5,958✔
408
409	xgridFocus	5,958✔
410	.attr("x1", isRotated ? 0 : -10)	5,958✔
411	.attr("x2", isRotated ? width : -10)	5,958✔
412	.attr("y1", isRotated ? -10 : 0)	5,958✔
413	.attr("y2", isRotated ? -10 : height);	5,958✔
414	}
415
416	// need to return 'true' as of being pushed to the redraw list
417	// ref: getRedrawList()
418	return true;	6,057✔
419	},
420
421	generateGridData(type: string, scale) {	57✔
422	const $$ = this;	57✔
423	const tickNum = $$.$el.main.select(`.${$AXIS.axisX}`)	57✔
424	.selectAll(".tick")
425	.size();
426	let gridData: Date[] = [];	57✔
427
428	if (type === "year") {	57!
UNCOV 429	const xDomain = $$.getXDomain();	×
UNCOV 430	const [firstYear, lastYear] = xDomain.map(v => v.getFullYear());	×
431
UNCOV 432	for (let i = firstYear; i <= lastYear; i++) {	×
UNCOV 433	gridData.push(new Date(`${i}-01-01 00:00:00`));	×
434	}
435	} else {
436	gridData = scale.ticks(10);	57✔
437
438	if (gridData.length > tickNum) { // use only int	57✔
439	gridData = gridData.filter(d => String(d).indexOf(".") < 0);	645✔
440	}
441	}
442
443	return gridData;	57✔
444	},
445
446	getGridFilterToRemove(params): Function {	6✔
447	return params ? line => {	48!
448	let found = false;	24✔
449
450	(isArray(params) ? params.concat() : [params]).forEach(param => {	48!
451	if ((("value" in param && line.value === param.value) \|\| ("class" in param && line.class === param.class))) {	48!
452	found = true;	24✔
453	}
454	});
455
456	return found;	24✔
UNCOV 457	} : () => true;	×
458	},
459
460	removeGridLines(params, forX?: boolean): void {	6✔
461	const $$ = this;	6✔
462	const {config, $T} = $$;	6✔
463	const toRemove = $$.getGridFilterToRemove(params);	6✔
464	const toShow = line => !toRemove(line);	12✔
465	const classLines = forX ? $GRID.xgridLines : $GRID.ygridLines;	6✔
466	const classLine = forX ? $GRID.xgridLine : $GRID.ygridLine;	6✔
467
468	$T($$.$el.main.select(`.${classLines}`)	6✔
469	.selectAll(`.${classLine}`)
470	.filter(toRemove))
471	.style("opacity", "0")
472	.remove();
473
474	const gridLines = `grid_${forX ? "x" : "y"}_lines`;	6✔
475
476	config[gridLines] = config[gridLines].filter(toShow);	6✔
477	}
478	};

naver / billboard.js / 5806521797

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