render.js

import fs from 'fs';
import path from 'path';
import cheerio from 'cheerio';
import TextToSVG from 'text-to-svg';
import Color from 'color';
import svgRoundCorners from 'svg-round-corners';
const { roundCommands } = svgRoundCorners;
import * as libs from './libs.js';

const textToSVGRegular = TextToSVG.loadSync(path.join(process.cwd(), '/assets/fonts/Comfortaa/Comfortaa-Regular.ttf'));
const textToSVGBold = TextToSVG.loadSync(path.join(process.cwd(), '/assets/fonts/Comfortaa/Comfortaa-Bold.ttf'));
const textToSVGCJK = TextToSVG.loadSync(path.join(process.cwd(), '/assets/fonts/SourceHanSansSC/SourceHanSansSC-Normal.otf'));

const clamp = (num, min, max) => Math.min(Math.max(num, min), max);

export const getSVGTemplete = (type, language) => {
	try {
		return fs.readFileSync(path.join(process.cwd(), `/assets/svg_template/${type}/template_${language}.svg`), 'utf8');
	} catch (e) {
		return fs.readFileSync(path.join(process.cwd(), `/assets/svg_template/${type}/template_cn.svg`), 'utf8');
	}
};
export const getSVGContent = (x) => {
	return fs.readFileSync(path.join(process.cwd(), x), 'utf8');
};

const getTransformedX = (x, w, anchor = 'center') => {
	switch (anchor) {
		case 'left':
			return x - 550 / 2 + w / 2;
		case 'right':
			return x - 550 / 2 + w;
		default:
			return x - 550 / 2;
	}
};
const getTransformedXMini = (x, w, anchor = 'center') => {
	switch (anchor) {
		case 'left':
			return x - 400 / 2 + w / 2;
		case 'right':
			return x - 400 / 2 + w;
		default:
			return x - 400 / 2;
	}
};
const getTransformedXSkillsOnly = getTransformedXMini;

export const getFlagSVG = (countryCode, x, y, h) => {
	let svg = libs.getFlagSVGByCountryCode(countryCode);
	let $ = cheerio.load(svg);
	$('svg').attr('x', getTransformedX(x, h * 0.72, 'left'));
	$('svg').attr('y', y);
	$('svg').attr('height', h);
	return $.html('svg');
};
export const getFlagSVGMini = (countryCode, x, y, h) => {
	let svg = libs.getFlagSVGByCountryCode(countryCode);
	let $ = cheerio.load(svg);
	$('svg').attr('x', getTransformedXMini(x, h * 0.72, 'left'));
	$('svg').attr('y', y);
	$('svg').attr('height', h);
	return $.html('svg');
};
const getFlagSVGSkillsOnly = getFlagSVGMini;
export const getPlaymodeSVG = (playmode, x, y, h) => {
	let svg = libs.getPlaymodeSVG(playmode);
	let $ = cheerio.load(svg);
	$('svg').attr('x', getTransformedX(x, h, 'left'));
	$('svg').attr('y', y);
	$('svg').attr('height', h);
	return $.html('svg');
};
export const getPlaymodeSVGMini = (playmode, x, y, h) => {
	let svg = libs.getPlaymodeSVG(playmode);
	let $ = cheerio.load(svg);
	$('svg').attr('x', getTransformedXMini(x, h, 'left'));
	$('svg').attr('y', y);
	$('svg').attr('height', h);
	return $.html('svg');
};
export const getSupporterSVG = (x, y, h, level = 1, transformationMethod = getTransformedX) => {
	let svg = fs.readFileSync(path.join(process.cwd(), `/assets/icons/supporter_${level}.svg`), 'utf8');
	let $ = cheerio.load(svg);
	let viewBoxW = parseFloat($(svg).attr('viewBox').split(' ')[2]);
	let viewBoxH = parseFloat($(svg).attr('viewBox').split(' ')[3]);
	let scale = h / viewBoxH;
	$('svg').attr('x', transformationMethod(x, viewBoxW * scale, 'left'));
	$('svg').attr('y', y);
	$('svg').attr('height', h);
	return $.html('svg');
};

export const getTextSVGPath = (TextToSVGObj, text, x, y, size, anchor = 'left top', fill = '#fff') => {
	let path = TextToSVGObj.getPath(text, {
		x: x,
		y: y,
		fontSize: size,
		anchor: anchor,
		fontFamily: 'Comfortaa',
		attributes: {
			fill: fill
		}
	});
	return path;
};
export const getTextSVGMetrics = (TextToSVGObj, text, x, y, size, anchor = 'left top', fill = '#fff') => {
	let metrics = TextToSVGObj.getMetrics(text, {
		x: x,
		y: y,
		fontSize: size,
		anchor: anchor,
		fontFamily: 'Comfortaa',
		attributes: {
			fill: fill
		}
	});
	return metrics;
};

const replaceCalcedColors = (data, svg) => {
	let baseHue = data.options.color_hue;

	svg = svg.replace(/\{\{hsl-b6\}\}/g, new Color(`hsl(${baseHue}, 10%, 10%)`).hex());
	svg = svg.replace(/\{\{hsl-b5\}\}/g, new Color(`hsl(${baseHue}, 10%, 15%)`).hex());
	svg = svg.replace(/\{\{hsl-b4\}\}/g, new Color(`hsl(${baseHue}, 10%, 20%)`).hex());
	svg = svg.replace(/\{\{hsl-h1\}\}/g, new Color(`hsl(${baseHue}, 100%, 70%)`).hex());
	svg = svg.replace(/\{\{hsl-f1\}\}/g, new Color(`hsl(${baseHue}, 10%, 60%)`).hex());

	return svg;
};
const setMargin = (data, svg) => {
	let margin = data.options.margin;
	if (margin.reduce((a, b) => a + b) == 0) {
		return svg;
	}
	if (margin.length > 4) {
		margin = margin.slice(0, 4);
	}
	if (margin.length == 3) {
		margin.push(0);
	}
	let $ = cheerio.load(svg);
	$('svg').attr('style', `margin: ${margin.join('px ')}px;`);
	return $.html('svg');
};

/**
 * @param {string} svg
 */
const minifySVG = (svg) => {
	return `<!-- Generated by osu-stats-signature -->\n<!-- https://github.com/solstice23/osu-stats-signature -->\n${svg
		.replace(/[\n\t\r]/g, '')
		.replace(/\s+/g, ' ')}`;
};

export const getRenderedSVGFull = (data, avatarBase64, userCoverImageBase64) => {
	let templete = getSVGTemplete('full', data.options.language);
	let user = data.user;

	//尺寸
	templete = templete.replace('{{width}}', data.options.size.width);
	templete = templete.replace('{{height}}', data.options.size.height);
	//外边距
	templete = setMargin(data, templete);

	//动画
	let extraClasses = data.options.animation ? 'animation-enabled' : '';
	if (data.options.includeSkills && data.options.cycleSkillsStats) {
		extraClasses += ' cycle-skills-stats';
	}
	templete = templete.replace('{{fg-extra-class}}', extraClasses);

	//圆头像
	if (data.options.round_avatar){
		templete = templete.replace(/<path id="avatar_clip"(.*?)\/>/, '<circle id="avatar_clip" class="cls-4" cx="62.5" cy="60.5" r="42.2"/>');
	}

	//名字
	templete = templete.replace('{{name}}', getTextSVGPath(textToSVGBold, user.username, 130, 20, 28));
	let nameWidth = getTextSVGMetrics(textToSVGBold, user.username, 130, 20, 28).width;

	//头像和封面
	templete = templete.replace('{{avatar-base64}}', avatarBase64);
	templete = templete.replace('{{user-cover-base64}}', userCoverImageBase64);

	//国旗和国家名
	templete = templete.replace('{{flag}}', getFlagSVG(user.country_code, 135, 56, 20));
	templete = templete.replace('{{country}}', getTextSVGPath(textToSVGRegular, user.country.name, 161, 59.5, 14));

	//模式
	templete = templete.replace('{{playmode-icon}}', getPlaymodeSVG(data.current_mode, 130, 88, 15));
	templete = templete.replace('{{playmode}}', getTextSVGPath(textToSVGRegular, libs.getPlaymodeFullName(data.current_mode), 150, 89, 12));

	//等级
	templete = templete.replace('{{level}}', getTextSVGPath(textToSVGBold, user.statistics.level.current.toString(), 290, 143, 12, 'center middle'));
	templete = templete.replace(
		'{{level-percent}}',
		getTextSVGPath(textToSVGRegular, user.statistics.level.progress + '%', 259.5, 145, 9, 'right top')
	);
	templete = templete.replace(
		'{{level-bar-fg}}',
		`<path class="cls-10" d="M20,135a2.5,2.5,0,0,0,2.5,2.5H${clamp(
			Math.round((user.statistics.level.progress / 100) * (256 - 21) + 21),
			21,
			256
		)}.833a2.5,2.5,0,0,0,0-5H22.5A2.5,2.5,0,0,0,20,135Z" transform="translate(0 2)" />`
	);

	//成绩计数
	const gradesName = ['ssh', 'ss', 'sh', 's', 'a'];
	let gradeTextX = 360.7;
	for (let grade of gradesName) {
		templete = templete.replace(
			`{{${grade}-count}}`,
			getTextSVGPath(textToSVGRegular, user.statistics.grade_counts[grade].toString(), gradeTextX, 153, 9, 'center middle')
		);
		gradeTextX += 38.62;
	}

	//pp
	templete = templete.replace('{{pp}}', getTextSVGPath(textToSVGRegular, libs.formatNumber(Math.round(user.statistics.pp)), 20, 202, 13));

	//奖章
	templete = templete.replace('{{medals}}', getTextSVGPath(textToSVGRegular, libs.formatNumber(user.user_achievements.length), 82, 202, 13));

	//游戏时间
	templete = templete.replace('{{playtime}}', getTextSVGPath(textToSVGRegular, libs.formatPlaytime(user.statistics.play_time), 126, 202, 13));

	//全球排名/区内排名
	let globalRanking = libs.formatNumber(user.statistics.global_rank, '#');
	templete = templete.replace('{{global-ranking}}', getTextSVGPath(textToSVGRegular, globalRanking, 268, 211, globalRanking.length < 10 ? 27 : 25));
	templete = templete.replace(
		'{{country-ranking}}',
		getTextSVGPath(textToSVGRegular, libs.formatNumber(user.statistics.country_rank, '#'), 269, 277, 17)
	);

	//其他统计信息
	const statsName = ['ranked_score', 'play_count', 'total_score', 'total_hits', 'replays_watched_by_others'];
	let statsTextY = 227;
	for (let stat of statsName) {
		templete = templete.replace(
			`{{${stat.replace(/_/g, '-')}}}`,
			getTextSVGPath(textToSVGRegular, libs.formatNumber(user.statistics[stat]), 218, statsTextY, 10, 'right top')
		);
		statsTextY += 16;
	}

	//acc
	templete = templete.replace('{{acc}}', getTextSVGPath(textToSVGRegular, user.statistics.hit_accuracy.toFixed(2).toString() + '%', 424, 202, 13));
	//最大连击
	templete = templete.replace(
		'{{max-combo}}',
		getTextSVGPath(textToSVGRegular, libs.formatNumber(user.statistics.maximum_combo) + 'x', 483, 202, 13)
	);
	//bp
	templete = templete.replace(
		'{{bp}}',
		getTextSVGPath(textToSVGRegular, libs.formatNumber(Math.round(data.top_ranks.best?.items[0]?.pp ?? 0)) + 'pp', 424, 249, 13)
	);
	//第一名
	templete = templete.replace('{{first-place}}', getTextSVGPath(textToSVGRegular, libs.formatNumber(data.top_ranks.firsts.count), 483, 249, 13));

	//osu! skills
	if (data.options.includeSkills) {
		if (!data.options.cycleSkillsStats) templete = templete.replace('id="count"', 'id="count" style="display: none;"');

		if (data.user.skills === null) {
			templete = templete.replace('{{no-skill-data-text}}', 
			`<g class="animated" style="animation-delay: 700ms;">
				${getTextSVGPath(textToSVGRegular, "No skills data", 118, 265, 15, 'center middle')}
			</g>`);
			templete = templete.replace('id="skills"', 'id="skills" style="display: none;"');
		}
		else {
			templete = templete.replace('{{no-skill-data-text}}', '');

			const origin = [118, 268];
			const names = ["stamina", "accuracy", "precision", "reaction", "agility", "tenacity", "memory"];
			if (data.options.skillsPlot.showMemory) {
				names[3] = "memory";
				templete = templete.replace('class="cls-46 skill-reaction"', 'class="cls-46 skill-reaction" style="display: none;"');
			} else {
				templete = templete.replace('class="cls-46 skill-memory"', 'class="cls-46 skill-memory" style="display: none;"');
			}
			let pathCommands = [];
			for (let i = 0; i <= 6; i++) {
				const angle = (-120 + i * 60) / 180 * Math.PI;
				const x = origin[0] + Math.cos(angle) * 45 * (data.user.skills.skills[names[i % 6]].percent / 100);
				const y = origin[1] + Math.sin(angle) * 45 * (data.user.skills.skills[names[i % 6]].percent / 100);
				pathCommands.push({
					marker: 'L',
					values: { x, y }
				});
			}
			pathCommands[0].marker = 'M';
			const roundedPath = roundCommands(pathCommands, 1);

			let path = `<path class="cls-48 animated-radar" d="${roundedPath.path}Z" style="animation-delay: 850ms;"/>`;

			path += `<g class="animated-radar" style="animation-delay: 600ms;">`
			path += `<path class="cls-47" d="${libs.getHexagonPath(origin[0], origin[1], 11.25, 3)}" style="opacity: 0.25;"/>`;
			path += `<path class="cls-47" d="${libs.getHexagonPath(origin[0], origin[1], 22.5, 3)}" style="opacity: 0.4;"/>`;
			path += `<path class="cls-47" d="${libs.getHexagonPath(origin[0], origin[1], 33.75, 3)}" style="opacity: 0.25;"/>`;
			path += `<path class="cls-47" d="${libs.getHexagonPath(origin[0], origin[1], 45, 3)}" style="opacity: 0.8;"/>`;
			path += `</g>`;

			path += `<g class="animated-fade" style="animation-delay: 850ms;">`
			for (let i = 0; i <= 5; i++) {
				const angle = (-120 + i * 60) / 180 * Math.PI;
				const x = origin[0] + Math.cos(angle) * 43;
				const y = origin[1] + Math.sin(angle) * 43;
				path += `<path class="cls-49" d="M${origin[0]},${origin[1]}L${x},${y}" style="opacity: 0.8;"/>`
			}
			path += `</g>`;

			if (data.options.skillsPlot.showFiguresForSkills){
				path += `<g class="animated-fade" style="animation-delay: 900ms;">`
				for (let i = 0; i <= 5; i++) {
					const angle = (-120 + i * 60) / 180 * Math.PI;
					let percent = data.user.skills.skills[names[i % 6]].percent;
					if (percent > 70) percent -= 20; else percent += 15;
					const x = origin[0] + Math.cos(angle) * 45 * (percent / 100);
					const y = origin[1] + Math.sin(angle) * 45 * (percent / 100);
					path += `
						<g style="opacity: 0.7;">
							${getTextSVGPath(textToSVGRegular, libs.formatNumber(data.user.skills.skills[names[i]].value), x, y, 7, 'center middle')}
						</g>
					`;
				}
				path += `</g>`;
			}

			//Skills rank (tags)
			if (data.options.skillsPlot.showSkillTags){
				let posX = 530, posY = 96, delay = 300 + data.user.skills.tags.length * 50;
				for (let tag of data.user.skills.tags) {
					path += `<g class="animated" style="animation-delay: ${delay}ms;">`
					let color = libs.getColorBySkillRankName(tag);
					let {width, height} = getTextSVGMetrics(textToSVGRegular, tag, posX, posY, 10, 'right middle');
					path += `<rect x="${posX - width - 5}" y="${posY - height / 2 - 5}" width="${width + 10}" height="${height + 10}" style="fill: {{hsl-b5}}; opacity: 0.4;" rx="5" />`;
					path += `<rect x="${posX - width - 3}" y="${posY - height / 2 - 3}" width="${width + 6}" height="${height + 6}" style="stroke: ${color}; fill: none;" rx="4" />` ;
					path += getTextSVGPath(textToSVGRegular, tag, posX, posY, 10, 'right middle');
					path += `</g>`;
					posX -= width + 12;
					delay -= 50;
				}
			}

			templete = templete.replace('{{skills-plot}}', path);
		}
	} else {
		if (!data.options.cycleSkillsStats) templete = templete.replace('id="skills"', 'id="skills" style="display: none;"');
	}

	//颜色
	templete = replaceCalcedColors(data, templete);

	return minifySVG(templete);
};

export const getRenderedSVGMini = (data, avatarBase64, userCoverImageBase64) => {
	let templete = getSVGTemplete('mini', data.options.language);
	let user = data.user;

	//尺寸
	templete = templete.replace('{{width}}', data.options.size.width);
	templete = templete.replace('{{height}}', data.options.size.height);
	//外边距
	templete = setMargin(data, templete);

	//动画
	templete = templete.replace('{{fg-extra-class}}', data.options.animation ? 'animation-enabled' : '');

	//颜色
	templete = replaceCalcedColors(data, templete);

	//圆头像
	if (data.options.round_avatar){
		templete = templete.replace(/<path id="avatar_clip"(.*?)\/>/, '<circle id="avatar_clip" class="cls-4" cx="62.5" cy="60.5" r="42.2"/>');
	}

	//名字
	templete = templete.replace('{{name}}', getTextSVGPath(textToSVGBold, user.username, 118, 14, 25));

	//头像和封面
	templete = templete.replace('{{avatar-base64}}', avatarBase64);
	templete = templete.replace('{{user-cover-base64}}', userCoverImageBase64);

	//国旗
	templete = templete.replace('{{flag}}', getFlagSVGMini(user.country_code, 368, 8, 18));

	//区内排名
	templete = templete.replace(
		'{{country-ranking}}',
		getTextSVGPath(textToSVGRegular, libs.formatNumber(user.statistics.country_rank, '#'), 360, 12, 10, 'right top')
	);

	//模式
	templete = templete.replace('{{playmode-icon}}', getPlaymodeSVGMini(data.current_mode, 372, 30, 12));

	//等级
	templete = templete.replace(
		'{{level}}',
		getTextSVGPath(textToSVGRegular, 'lv.' + user.statistics.level.current.toString(), 369, 31, 10, 'right top')
	);

	//全球排名
	let globalRanking = libs.formatNumber(user.statistics.global_rank, '#');
	templete = templete.replace('{{global-ranking}}', getTextSVGPath(textToSVGRegular, globalRanking, 120, 86, globalRanking.length < 10 ? 18 : 17));

	//pp
	templete = templete.replace('{{pp}}', getTextSVGPath(textToSVGRegular, libs.formatNumber(Math.round(user.statistics.pp)), 226, 81.5, 13));
	//acc
	templete = templete.replace('{{acc}}', getTextSVGPath(textToSVGRegular, user.statistics.hit_accuracy.toFixed(2).toString() + '%', 281, 81.5, 13));
	//游戏次数
	templete = templete.replace('{{play-count}}', getTextSVGPath(textToSVGRegular, libs.formatNumber(user.statistics.play_count), 336, 81.5, 13));

	return minifySVG(templete);
};

export const getRenderedSVGSkillOnly = (data, avatarBase64, userCoverImageBase64) => {
	let templete = getSVGTemplete('skill_only', data.options.language);
	let user = data.user;

	//尺寸
	templete = templete.replace('{{width}}', data.options.size.width);
	templete = templete.replace('{{height}}', data.options.size.height);
	//外边距
	templete = setMargin(data, templete);

	//动画
	let extraClasses = "";
	if (data.options.animation) extraClasses += 'animation-enabled';
	switch (data.options.rankingDisplay) {
		case 'global':
			extraClasses += ' ranking-display-global';
			break;
		case 'country':
			extraClasses += ' ranking-display-country';
			break;
		case 'cycle':
			extraClasses += ' ranking-display-cycle';
			break;
	}
	templete = templete.replace('{{fg-extra-class}}', extraClasses);

	//圆头像
	if (data.options.round_avatar){
		templete = templete.replace(/<path id="avatar_clip"(.*?)\/>/, '<circle id="avatar_clip" cx="40" cy="35" r="20"/>');
	}

	//名字
	templete = templete.replace('{{name}}', getTextSVGPath(textToSVGBold, user.username, 69, 11, 25));
	let nameWidth = getTextSVGMetrics(textToSVGBold, user.username, 69, 11, 15).width;
	//Support Tag
	if (user.is_supporter) {
		templete = templete.replace('{{supporter-tag}}', getSupporterSVG(100 + nameWidth + 10, 14, 18, user.support_level, getTransformedXSkillsOnly));
	} else {
		templete = templete.replace('{{supporter-tag}}', '');
	}

	//头像和封面
	templete = templete.replace('{{avatar-base64}}', avatarBase64);
	templete = templete.replace('{{user-cover-base64}}', userCoverImageBase64);

	//全球排名/区内排名
	let globalRanking = libs.formatNumber(user.statistics.global_rank, '#');
	let countryRanking = libs.formatNumber(user.statistics.country_rank, '#');
	templete = templete.replace('{{global-ranking}}', getTextSVGPath(textToSVGRegular, globalRanking, 384, 34, globalRanking.length < 10 ? 18 : 17, 'right top'));
	templete = templete.replace('{{country-ranking}}', getTextSVGPath(textToSVGRegular, countryRanking, 384, 34, countryRanking.length < 10 ? 18 : 17, 'right top'));
	
	let countryRankingWidth = getTextSVGMetrics(textToSVGRegular, countryRanking, 384, 34, countryRanking.length < 10 ? 18 : 17, 'right top').width;

	//国旗
	templete = templete.replace('{{flag}}', getFlagSVGSkillsOnly(user.country_code, 360 - countryRankingWidth, 33, 20));


	//Skill Tags
	let skillTags = "";
	let posX = 71, posY = 47, delay = 300;
	for (let tag of data.user.skills.tags) {
		skillTags += `<g class="animated" style="animation-delay: ${delay}ms;">`
		let color = libs.getColorBySkillRankName(tag);
		let {width, height} = getTextSVGMetrics(textToSVGRegular, tag, posX, posY, 9, 'left middle');
		skillTags += `<rect x="${posX - 4}" y="${posY - height / 2 - 4}" width="${width + 8}" height="${height + 8}" style="fill: {{hsl-b5}}; opacity: 0.5;" rx="5" />`;
		skillTags += `<rect x="${posX - 2}" y="${posY - height / 2 - 2}" width="${width + 4}" height="${height + 4}" style="stroke: ${color}; fill: none;" rx="4" />` ;
		skillTags += getTextSVGPath(textToSVGRegular, tag, posX, posY, 9, 'left middle');
		skillTags += `</g>`;
		posX += width + 12;
		delay += 50;
	}
	templete = templete.replace('{{skill-tags}}', skillTags);


	if (data.user.skills === null) {
		templete = templete.replace('{{no-skill-data-text}}', 
		`<g class="animated" style="animation-delay: 700ms;">
			${getTextSVGPath(textToSVGRegular, "No skills data", 200, 145, 15, 'center middle')}
		</g>`);
		templete = templete.replace('id="skills"', 'id="skills" style="display: none;"');
	}
	else {
		templete = templete.replace('{{no-skill-data-text}}', '');

		let posY = 87, barMaxWidth = 246, barHeight = 12, delay = 400;
		const names = ["stamina", "tenacity", "agility", "accuracy", "precision", "reaction", "memory"];
		if (data.options.skillsPlot.showMemory) {
			names[5] = "memory";
		}
		let path = ``;
		for (let i = 0; i <= 5; i++) {
			path += `<g class="animated" style="animation-delay: ${delay}ms;">`;
			//Text
			let name = libs.getSkillNameI18n(names[i], data.options.language);
			if (data.options.language == 'en') {
				path += getTextSVGPath(textToSVGRegular, name, 46, posY + barHeight / 2, 14, 'center middle');
			} else {
				path += getTextSVGPath(textToSVGCJK, name, 46, posY + barHeight / 2 - 1, 14, 'center middle');
			}
			//Bar slot
			path += `<rect class="skill-bar-bg" x="94" y="${posY}" width="${barMaxWidth}" height="${barHeight}" rx="${barHeight / 2}"/>`;
			//Bar
			let percent = data.user.skills.skills[names[i]].percent;
			let barWidth = barMaxWidth * percent / 100;
			barWidth = Math.max(barWidth, barHeight);
			path += `<rect class="skill-bar-fg" x="94" y="${posY}" width="${barWidth}" height="${barHeight}" rx="${barHeight / 2}" style="animation-delay: ${delay + 100}ms;"/>`;
			//Figure
			let number = libs.formatNumber(data.user.skills.skills[names[i]].value);
			let color = libs.calcWCAGColorContrast(new Color(`hsl(${data.options.color_hue}, 100%, 70%)`), new Color("white")) >= 2 ? "#fff" : new Color(`hsl(${data.options.color_hue}, 10%, 15%)`).hex();
			path += `<g class="animated-fade" style="animation-delay: ${delay + 800}ms;">`;
			if (percent > 15) {
				path += getTextSVGPath(textToSVGBold, number, 94 + barWidth - 4, posY + barHeight / 2 + 1, 10, 'right middle', color);
			} else {
				path += getTextSVGPath(textToSVGBold, number, 94 + barWidth + 4, posY + barHeight / 2 + 1, 10, 'left middle');
			}
			path += `</g>`;
			//Rankings
			let globalRank = data.user.skills.skills[names[i]].globalRank;
			let countryRank = data.user.skills.skills[names[i]].countryRank;
			path += '<g class="display-group-global-ranking">' + getTextSVGPath(textToSVGRegular, libs.formatNumber(globalRank, '#'), 368, posY + barHeight / 2, 12, 'center middle') + '</g>';
			path += '<g class="display-group-country-ranking">' + getTextSVGPath(textToSVGRegular, libs.formatNumber(countryRank, '#'), 368, posY + barHeight / 2, 12, 'center middle') + '</g>';
			
			path += `</g>`;
			posY += 26;
			delay += 80;
		}

		templete = templete.replace('{{skills-bar-chart}}', path);
	}

	//颜色
	templete = replaceCalcedColors(data, templete);

	return minifySVG(templete);
};


export const getErrorSVG = (err) => {
	return textToSVGRegular.getSVG(err, {
		x: 0,
		y: 0,
		fontSize: 30,
		anchor: 'left top',
		attributes: {
			fill: '#ff66ab'
		}
	});
};