123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {select as d3Select} from "d3-selection";import {	brushX as d3BrushX,	brushY as d3BrushY,	brushSelection as d3BrushSelection} from "d3-brush";import CLASS from "../../config/classes";import {brushEmpty, capitalize, isArray, isFunction, parseDate} from "../../module/util";
export default {	/**	 * Initialize the brush.	 * @private	 */	initBrush(): void {		const $$ = this;		const {config, scale, $el: {subchart}} = $$;		const isRotated = config.axis_rotated;		let lastDomain;		let timeout;
		// set the brush		$$.brush = (			isRotated ? d3BrushY() : d3BrushX()		).handleSize(5);
		const getBrushSize = () => {			const brush = $$.$el.svg.select(`.${CLASS.brush} .overlay`);			const brushSize = {width: 0, height: 0};
			if (brush.size()) {				brushSize.width = +brush.attr("width");				brushSize.height = +brush.attr("height");			}
			return brushSize[isRotated ? "width" : "height"];		};
		// bind brush event		$$.brush.on("start brush end", event => {			const {selection, target, type} = event;
			if (type === "start") {				$$.state.inputType === "touch" && $$.hideTooltip();			}
			if (/(start|brush)/.test(type)) {				$$.redrawForBrush();			}
			if (type === "end") {				lastDomain = scale.x.orgDomain();			}
			// handle brush's handle position & visibility			if (target?.handle) {				if (selection === null) {					$$.brush.handle.attr("display", "none");				} else {					$$.brush.handle.attr("display", null)						.attr("transform", (d, i) => {							const pos = isRotated ?								[33, selection[i] - (i === 0 ? 30 : 24)] : [selection[i], 3];
							return `translate(${pos})`;						});				}			}		});
		$$.brush.updateResize = function() {			timeout && clearTimeout(timeout);			timeout = setTimeout(() => {				const selection = this.getSelection();
				lastDomain && d3BrushSelection(selection.node()) &&					this.move(selection, lastDomain.map(scale.subX.orgScale()));			}, 0);		};
		$$.brush.update = function() {			const extent = this.extent()();
			if (extent[1].filter(v => isNaN(v)).length === 0) {				subchart.main?.select(`.${CLASS.brush}`).call(this);			}
			return this;		};
		// set the brush extent		$$.brush.scale = function(scale) {			const h = config.subchart_size_height || getBrushSize();			let extent = $$.getExtent();
			if (!extent && scale.range) {				extent = [[0, 0], [scale.range()[1], h]];			} else if (isArray(extent)) {				extent = extent.map((v, i) => [v, i > 0 ? h : i]);			}
			// [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner			isRotated && extent[1].reverse();			this.extent(extent);
			// when extent updates, brush selection also be re-applied			// https://github.com/d3/d3/issues/2918			this.update();		};
		$$.brush.getSelection = () => (			// @ts-ignore			subchart.main ? subchart.main.select(`.${CLASS.brush}`) : d3Select([])		);	},
	/**	 * Initialize the subchart.	 * @private	 */	initSubchart(): void {		const $$ = this;		const {config, state: {clip, hasAxis}, $el: {defs, svg, subchart, axis}} = $$;
		if (!hasAxis) {			return;		}
		const visibility = config.subchart_show ? null : "hidden";		const clipId = `${clip.id}-subchart`;		const clipPath = $$.getClipPath(clipId);
		clip.idSubchart = clipId;		$$.appendClip(defs, clipId);		$$.initBrush();
		subchart.main = svg.append("g")			.classed(CLASS.subchart, true)			.attr("transform", $$.getTranslate("context"));
		const {main} = subchart;
		main.style("visibility", visibility);
		// Define g for chart area		main.append("g")			.attr("clip-path", clipPath)			.attr("class", CLASS.chart);
		// Define g for chart types area		["bar", "line", "bubble", "candlestick", "scatter"].forEach(v => {			const type = capitalize(/^(bubble|scatter)$/.test(v) ? "circle" : v);
			if ($$.hasType(v) || $$.hasTypeOf(type)) {				const chart = main.select(`.${CLASS.chart}`);				const chartClassName = CLASS[`chart${type}s`];
				if (chart.select(`.${chartClassName}`).empty()) {					chart						.append("g")						.attr("class", chartClassName);				}			}		});
		// Add extent rect for Brush		const brush = main.append("g")			.attr("clip-path", clipPath)			.attr("class", CLASS.brush)			.call($$.brush);
		config.subchart_showHandle && $$.addBrushHandle(brush);
		// ATTENTION: This must be called AFTER chart added		// Add Axis		axis.subX = main.append("g")			.attr("class", CLASS.axisX)			.attr("transform", $$.getTranslate("subX"))			.attr("clip-path", config.axis_rotated ? "" : clip.pathXAxis)			.style("visibility", config.subchart_axis_x_show ? visibility : "hidden");	},
	/**	 * Add brush handle	 * Enabled when: subchart.showHandle=true	 * @param {d3Selection} brush Brush selection	 * @private	 */	addBrushHandle(brush): void {		const $$ = this;		const {config} = $$;		const isRotated = config.axis_rotated;		const initRange = config.subchart_init_range;		const customHandleClass = "handle--custom";
		// brush handle shape's path		const path = isRotated ? [			"M 5.2491724,29.749209 a 6,6 0 0 0 -5.50000003,-6.5 H -5.7508276 a 6,6 0 0 0 -6.0000004,6.5 z m -5.00000003,-2 H -6.7508276 m 6.99999997,-2 H -6.7508276Z",			"M 5.2491724,23.249172 a 6,-6 0 0 1 -5.50000003,6.5 H -5.7508276 a 6,-6 0 0 1 -6.0000004,-6.5 z m -5.00000003,2 H -6.7508276 m 6.99999997,2 H -6.7508276Z"		] : [			"M 0 18 A 6 6 0 0 0 -6.5 23.5 V 29 A 6 6 0 0 0 0 35 Z M -2 23 V 30 M -4 23 V 30Z",			"M 0 18 A 6 6 0 0 1 6.5 23.5 V 29 A 6 6 0 0 1 0 35 Z M 2 23 V 30 M 4 23 V 30Z"		];

		$$.brush.handle = brush.selectAll(`.${customHandleClass}`)			.data(isRotated ?				[{type: "n"}, {type: "s"}] :				[{type: "w"}, {type: "e"}]			)			.enter()			.append("path")			.attr("class", customHandleClass)			.attr("cursor", `${isRotated ? "ns" : "ew"}-resize`)			.attr("d", d => path[+/[se]/.test(d.type)])			.attr("display", initRange ? null : "none");	},
	/**	 * Update sub chart	 * @param {object} targets $$.data.targets	 * @private	 */	updateTargetsForSubchart(targets): void {		const $$ = this;		const {config, state, $el: {subchart: {main}}} = $$;
		if (config.subchart_show) {			["bar", "line", "bubble", "candlestick", "scatter"]				.filter(v => $$.hasType(v) || $$.hasTypeOf(capitalize(v)))				.forEach(v => {					const isPointType = /^(bubble|scatter)$/.test(v);					const name = capitalize(isPointType ? "circle" : v);					const chartClass = $$.getChartClass(name, true);					const shapeClass = $$.getClass(isPointType ? "circles" : `${v}s`, true);
					const shapeChart = main.select(`.${CLASS[`chart${`${name}s`}`]}`);
					if (isPointType) {						const circle = shapeChart							.selectAll(`.${CLASS.circles}`)							.data(targets.filter($$[`is${capitalize(v)}Type`].bind($$)))							.attr("class", shapeClass);
						circle.exit().remove();						circle.enter().append("g")							.attr("class", shapeClass);					} else {						const shapeUpdate = shapeChart							.selectAll(`.${CLASS[`chart${name}`]}`)							.attr("class", chartClass)							.data(targets.filter($$[`is${name}Type`].bind($$)));
						const shapeEnter = shapeUpdate.enter()							.append("g")							.style("opacity", "0")							.attr("class", chartClass)							.append("g")							.attr("class", shapeClass);
						shapeUpdate.exit().remove();
						// Area						v === "line" && $$.hasTypeOf("Area") &&							shapeEnter.append("g").attr("class", $$.getClass("areas", true));					}				});
			// -- Brush --//			main.selectAll(`.${CLASS.brush} rect`)				.attr(config.axis_rotated ? "width" : "height", config.axis_rotated ? state.width2 : state.height2);		}	},
	/**	 * Redraw subchart.	 * @private	 * @param {boolean} withSubchart whether or not to show subchart	 * @param {number} duration duration	 * @param {object} shape Shape's info	 */	redrawSubchart(withSubchart: boolean, duration: number, shape): void {		const $$ = this;		const {config, $el: {subchart: {main}}, state} = $$;		const withTransition = !!duration;
		main.style("visibility", config.subchart_show ? null : "hidden");
		// subchart		if (config.subchart_show) {			// reflect main chart to extent on subchart if zoomed			if (state.event?.type === "zoom") {				$$.brush.update();			}
			// update subchart elements if needed			if (withSubchart) {				const initRange = config.subchart_init_range;
				// extent rect				!brushEmpty($$) && $$.brush.update();
				Object.keys(shape.type).forEach(v => {					const name = capitalize(v);					const drawFn = $$[`generateDraw${name}`](shape.indices[v], true);
					// call shape's update & redraw method					$$[`update${name}`](withTransition, true);					$$[`redraw${name}`](drawFn, withTransition, true);				});
				if ($$.hasType("bubble") || $$.hasType("scatter")) {					const {cx} = shape.pos;					const cy = $$.updateCircleY(true);
					$$.updateCircle(true);					$$.redrawCircle(cx, cy, withTransition, undefined, true);				}
				!state.rendered && initRange && $$.brush.move(					$$.brush.getSelection(),					initRange.map($$.scale.x)				);			}		}	},
	/**	 * Redraw the brush.	 * @private	 */	redrawForBrush() {		const $$ = this;		const {config: {subchart_onbrush: onBrush, zoom_rescale: withY}, scale} = $$;
		$$.redraw({			withTransition: false,			withY,			withSubchart: false,			withUpdateXDomain: true,			withDimension: false		});
		onBrush.bind($$.api)(scale.x.orgDomain());	},
	/**	 * Transform context	 * @param {boolean} withTransition indicates transition is enabled	 * @param {object} transitions The return value of the generateTransitions method of Axis.	 * @private	 */	transformContext(withTransition, transitions): void {		const $$ = this;		const {$el: {subchart}, $T} = $$;
		const subXAxis = transitions?.axisSubX ?			transitions.axisSubX :			$T(subchart.main.select(`.${CLASS.axisX}`), withTransition);
		subchart.main.attr("transform", $$.getTranslate("context"));		subXAxis.attr("transform", $$.getTranslate("subX"));	},
	/**	 * Get extent value	 * @returns {Array} default extent	 * @private	 */	getExtent(): number[] {		const $$ = this;		const {config, scale} = $$;		let extent = config.axis_x_extent;
		if (extent) {			if (isFunction(extent)) {				extent = extent.bind($$.api)($$.getXDomain($$.data.targets), scale.subX);			} else if ($$.axis.isTimeSeries() && extent.every(isNaN)) {				const fn = parseDate.bind($$);
				extent = extent.map(v => scale.subX(fn(v)));			}		}
		return extent;	}};