gadientColorFromPercentage.ts

export const greenToRed = [
	{
		pct: 0,
		color: {
			r: 0,
			g: 0x40,
			b: 0,
		},
	},
	{
		pct: 1,
		color: {
			r: 0,
			g: 0x90,
			b: 0,
		},
	},
	{
		pct: 50,
		color: {
			r: 0xff,
			g: 0xff,
			b: 0,
		},
	},
	{
		pct: 100,
		color: {
			r: 0xff,
			g: 0x00,
			b: 0,
		},
	},
];

export const redToGreen = [
	{
		pct: 0,
		color: {
			r: 0xcc,
			g: 0,
			b: 0,
		},
	},
	{
		pct: 50,
		color: {
			r: 0xee,
			g: 0xee,
			b: 0,
		},
	},
	{
		pct: 99,
		color: {
			r: 0,
			g: 0x90,
			b: 0,
		},
	},
	{
		pct: 100,
		color: {
			r: 0,
			g: 0x40,
			b: 0,
		},
	},
];

const getColorFromPercent = (pct: number, scheme = greenToRed) => {
	let i: number;
	for (i = 1; i < scheme.length - 1; i++) {
		if (pct < scheme[i].pct) {
			break;
		}
	}
	const lower = scheme[i - 1];
	const upper = scheme[i];
	const range = upper.pct - lower.pct;
	const rangePct = (pct - lower.pct) / range;
	const pctLower = 1 - rangePct;
	const pctUpper = rangePct;
	const color = {
		r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
		g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
		b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper),
	};
	return `rgb(${[color.r, color.g, color.b].join(',')})`;
};