123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
/** * Copyright (c) 2017 ~ present NAVER Corp. * billboard.js project is licensed under the MIT license */import {select as d3Select} from "d3-selection";import {scaleOrdinal as d3ScaleOrdinal} from "d3-scale";import ChartInternal from "./ChartInternal";import {document, window} from "./browser";import CLASS from "../config/classes";import {notEmpty, extend, isFunction, isObject, isString} from "./util";
/** * Set pattern's background color * (it adds a <rect> element to simulate bg-color) * @param {SVGPatternElement} pattern SVG pattern element * @param {String} color Color string * @param {String} id ID to be set * @return {{id: string, node: SVGPatternElement}} * @private */const colorizePattern = (pattern, color, id) => {	const node = d3Select(pattern.cloneNode(true));
	node		.attr("id", id)		.insert("rect", ":first-child")		.attr("width", node.attr("width"))		.attr("height", node.attr("height"))		.style("fill", color);
	return {		id,		node: node.node()	};};
// Replacement of d3.schemeCategory10.// Contained differently depend on d3 version: v4(d3-scale), v5(d3-scale-chromatic)const schemeCategory10 = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
extend(ChartInternal.prototype, {	/**	 * Get color pattern from CSS file	 * CSS should be defined as: background-image: url("#00c73c;#fa7171; ...");	 * @return {Array}	 * @private	 */	getColorFromCss() {		const cacheKey = "__colorPattern__";		const body = document.body;		let pattern = body[cacheKey];
		if (!pattern) {			const delimiter = ";";			const span = document.createElement("span");
			span.className = CLASS.colorPattern;			span.style.display = "none";			body.appendChild(span);
			const content = window.getComputedStyle(span).backgroundImage;
			span.parentNode.removeChild(span);
			if (content.indexOf(delimiter) > -1) {				pattern = content					.replace(/url[^#]*|["'()]|(\s|%20)/g, "")					.split(delimiter)					.map(v => v.trim().replace(/[\"'\s]/g, ""))					.filter(Boolean);
				body[cacheKey] = pattern;			}		}
		return pattern;	},
	generateColor() {		const $$ = this;		const config = $$.config;		const colors = config.data_colors;		const callback = config.data_color;		const ids = [];
		let pattern = notEmpty(config.color_pattern) ? config.color_pattern :			d3ScaleOrdinal($$.getColorFromCss() || schemeCategory10).range();
		const originalColorPattern = pattern;
		if (isFunction(config.color_tiles)) {			const tiles = config.color_tiles();
			// Add background color to patterns			const colorizedPatterns = pattern.map((p, index) => {				const color = p.replace(/[#\(\)\s,]/g, "");				const id = `${$$.datetimeId}-pattern-${color}-${index}`;
				return colorizePattern(tiles[index % tiles.length], p, id);			});
			pattern = colorizedPatterns.map(p => `url(#${p.id})`);			$$.patterns = colorizedPatterns;		}
		return function(d) {			const id = d.id || (d.data && d.data.id) || d;			const isLine = $$.isTypeOf(id, ["line", "spline", "step"]) || !$$.config.data_types[id];			let color;
			// if callback function is provided			if (isFunction(colors[id])) {				color = colors[id](d);
			// if specified, choose that color			} else if (colors[id]) {				color = colors[id];
			// if not specified, choose from pattern			} else {				if (ids.indexOf(id) < 0) {					ids.push(id);				}
				color = isLine ? originalColorPattern[ids.indexOf(id) % originalColorPattern.length] :					pattern[ids.indexOf(id) % pattern.length];
				colors[id] = color;			}
			return isFunction(callback) ?				callback(color, d) : color;		};	},
	generateLevelColor() {		const $$ = this;		const config = $$.config;		const colors = config.color_pattern;		const threshold = config.color_threshold;		const asValue = threshold.unit === "value";		const max = threshold.max || 100;		const values = threshold.values &&			threshold.values.length ? threshold.values : [];
		return notEmpty(threshold) ? function(value) {			const v = asValue ? value : (value * 100 / max);			let color = colors[colors.length - 1];
			for (let i = 0, l = values.length; i < l; i++) {				if (v <= values[i]) {					color = colors[i];					break;				}			}
			return color;		} : null;	},
	/**	 * Set the data over color.	 * When is out, will restore in its previous color value	 * @param {Boolean} isOver true: set overed color, false: restore	 * @param {Number|Object} d target index or data object for Arc type	 * @private	 */	setOverColor(isOver, d) {		const $$ = this;		const config = $$.config;		const onover = config.color_onover;		let color = isOver ? onover : $$.color;
		if (isObject(color)) {			color = ({id}) => (id in onover ? onover[id] : $$.color(id));		} else if (isString(color)) {			color = () => onover;		}
		// when is Arc type		if (isObject(d)) {			$$.main.selectAll(`.${CLASS.arc}${$$.getTargetSelectorSuffix(d.id)}`)				.style("fill", color(d));		} else {			$$.main.selectAll(`.${CLASS.shape}-${d}`)				.style("fill", color);		}	}});