123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {easeLinear as d3EaseLinear} from "d3-ease";import {generateWait} from "../../module/generator";import {diffDomain} from "../../module/util";import CLASS from "../../config/classes";
export default {	/**	 * Generate flow	 * @param {object} args option object	 * @returns {Function}	 * @private	 */	generateFlow(args): Function {		const $$ = this;		const {data, state, $el} = $$;
		return function() {			const flowLength = args.flow.length;
			// set flag			state.flowing = true;
			// remove head data after rendered			data.targets.forEach(d => {				d.values.splice(0, flowLength);			});
			// update elements related to x scale			if ($$.updateXGrid) {				$$.updateXGrid(true);			}
			// target elements			const elements = {};
			["axis.x", "grid.x", "gridLines.x", "region.list", "text", "bar", "line", "area", "circle"]				.forEach(v => {					const name = v.split(".");					let node = $el[name[0]];
					if (node && name.length > 1) {						node = node[name[1]];					}
					if (node?.size()) {						elements[v] = node;					}				});
			$$.hideGridFocus();			$$.setFlowList(elements, args);		};	},
	/**	 * Set flow list	 * @param {object} elements Target elements	 * @param {object} args option object	 * @private	 */	setFlowList(elements, args): void {		const $$ = this;		const {flow, targets} = args;		const {			duration = args.duration,			index: flowIndex,			length: flowLength,			orgDataCount,		} = flow;
		const transform = $$.getFlowTransform(targets, orgDataCount, flowIndex, flowLength);		const wait = generateWait();		let n;
		wait.add(Object.keys(elements).map(v => {			n = elements[v]				.transition()				.ease(d3EaseLinear)				.duration(duration);
			if (v === "axis.x") {				n = n.call(g => {					$$.axis.x.setTransition(g).create(g);				});			} else if (v === "region.list") {				n = n.filter($$.isRegionOnX)					.attr("transform", transform);			} else {				n = n.attr("transform", transform);			}
			return n;		}));
		n.call(wait, () => {			$$.cleanUpFlow(elements, args);		});	},
	/**	 * Clean up flow	 * @param {object} elements Target elements	 * @param {object} args option object	 * @private	 */	cleanUpFlow(elements, args): void {		const $$ = this;		const {config, state, $el: {svg}} = $$;		const isRotated = config.axis_rotated;
		const {flow, shape, xv} = args;		const {cx, cy, xForText, yForText} = shape.pos;		const {			done = () => {},			length: flowLength		} = flow;
		// Remove flowed elements		if (flowLength) {			["circle", "text", "shape", "eventRect"].forEach(v => {				const target: string[] = [];
				for (let i = 0; i < flowLength; i++) {					target.push(`.${CLASS[v]}-${i}`);				}
				svg.selectAll(`.${CLASS[`${v}s`]}`) // circles, shapes, texts, eventRects					.selectAll(target)					.remove();			});
			svg.select(`.${CLASS.xgrid}`)				.remove();		}
		// draw again for removing flowed elements and reverting attr		Object.keys(elements).forEach(v => {			const n = elements[v];
			if (v !== "axis.x") {				n.attr("transform", null);			}
			if (v === "grid.x") {				n.attr(state.xgridAttr);			} else if (v === "gridLines.x") {				n.attr("x1", isRotated ? 0 : xv)					.attr("x2", isRotated ? state.width : xv);			} else if (v === "gridLines.x") {				n.select("line").attr("x1", isRotated ? 0 : xv)					.attr("x2", isRotated ? state.width : xv);
				n.select("text")					.attr("x", isRotated ? state.width : 0)					.attr("y", xv);			} else if (/^(area|bar|line)$/.test(v)) {				n.attr("d", shape.type[v]);			} else if (v === "text") {				n.attr("x", xForText)					.attr("y", yForText)					.style("fill-opacity", $$.opacityForText.bind($$));			} else if (v === "circle") {				if ($$.isCirclePoint()) {					n.attr("cx", cx).attr("cy", cy);				} else {					const xFunc = d => cx(d) - config.point_r;					const yFunc = d => cy(d) - config.point_r;
					n.attr("x", xFunc)						.attr("y", yFunc)						.attr("cx", cx) // when pattern is used, it possibly contain 'circle' also.						.attr("cy", cy);				}			} else if (v === "region.list") {				n.select("rect").filter($$.isRegionOnX)					.attr("x", $$.regionX.bind($$))					.attr("width", $$.regionWidth.bind($$));			}		});
		config.interaction_enabled && $$.redrawEventRect();
		// callback for end of flow		done.call($$.api);
		state.flowing = false;	},
	/**	 * Get flow transform value	 * @param {object} targets target	 * @param {number} orgDataCount original data count	 * @param {number} flowIndex flow index	 * @param {number} flowLength flow length	 * @returns {string}	 * @private	 */	getFlowTransform(targets, orgDataCount, flowIndex, flowLength): string {		const $$ = this;		const {data, scale: {x}} = $$;		const dataValues = data.targets[0].values;
		let flowStart = $$.getValueOnIndex(dataValues, flowIndex);		let flowEnd = $$.getValueOnIndex(dataValues, flowIndex + flowLength);		let translateX;
		// update x domain to generate axis elements for flow		const orgDomain = x.domain();		const domain = $$.updateXDomain(targets, true, true);
		// generate transform to flow		if (!orgDataCount) { // if empty			if (dataValues.length !== 1) {				translateX = x(orgDomain[0]) - x(domain[0]);			} else {				if ($$.axis.isTimeSeries()) {					flowStart = $$.getValueOnIndex(dataValues, 0);					flowEnd = $$.getValueOnIndex(dataValues, dataValues.length - 1);					translateX = x(flowStart.x) - x(flowEnd.x);				} else {					translateX = diffDomain(domain) / 2;				}			}		} else if (orgDataCount === 1 || flowStart?.x === flowEnd?.x) {			translateX = x(orgDomain[0]) - x(domain[0]);		} else {			translateX = $$.axis.isTimeSeries() ?				x(orgDomain[0]) - x(domain[0]) :				x(flowStart?.x || 0) - x(flowEnd.x);		}
		const scaleX = (diffDomain(orgDomain) / diffDomain(domain));
		return `translate(${translateX},0) scale(${scaleX},1)`;	}};