feat: canvas to echarts (#5)

Co-authored-by: terraputix <terraputix@mailbox.org>
Reviewed-on: useweb/ombrella#5

src/routes/weather/utils/colors.ts

@@ -1,11 +1,11 @@
 import colorScaleHex from './color-scale-hex';
 
-function componentFromStr(numStr: string, percent: number) {
+const componentFromStr = (numStr: string, percent: number) => {
 	const num = Math.max(0, parseInt(numStr, 10));
 	return percent ? Math.floor((255 * Math.min(100, num)) / 100) : Math.min(255, num);
-}
+};
 
-export function rgbToHex(rgb: string) {
+export const rgbToHex = (rgb: string): string => {
 	const rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
 	let result,
 		r,
@@ -23,29 +23,58 @@ export function rgbToHex(rgb: string) {
 		return '355522';
 	}
 	return hex;
-}
+};
+
+export const hexToRgb = (hex: string): [number, number, number] => {
+	const h = hex.replace('#', '');
+	return [
+		parseInt(h.substring(0, 2), 16),
+		parseInt(h.substring(2, 4), 16),
+		parseInt(h.substring(4, 6), 16)
+	];
+};
+
+export const getColor = (temperature: number, unit = 'celsius'): string => {
+	if (unit !== 'celsius') {
+		temperature = Math.round(((temperature - 32) * 5) / 9);
+	}
 
-export const getColor = (tempString: string, unit = 'celsius'): string => {
 	let index = 0;
-	const temp = Number(tempString);
-	if (unit === 'celsius') {
-		if (temp <= -40) {
-			index = 0;
-		} else if (temp >= 60) {
-			index = colorScaleHex.length - 1;
-		} else {
-			index = temp + 40;
-		}
+	if (temperature <= -40) {
+		index = 0;
+	} else if (temperature >= 60) {
+		index = colorScaleHex.length - 1;
 	} else {
-		const tempInCelsius = Math.round(((temp - 32) * 5) / 9);
-		if (tempInCelsius <= -40) {
-			index = 0;
-		} else if (tempInCelsius >= 60) {
-			index = colorScaleHex.length - 1;
-		} else {
-			index = tempInCelsius + 40;
-		}
+		index = Math.round(temperature) + 45;
 	}
 
 	return colorScaleHex[index];
 };
+
+export interface TempStyle {
+	bg: string;
+	fg: 'white' | 'black';
+}
+
+export const getTempStyle = (temp: number, unit: string): TempStyle => {
+	const bg = getColor(temp, unit);
+	const fg = textWhite(hexToRgb(bg)) ? 'white' : 'black';
+	return { bg, fg };
+};
+
+export const textWhite = (
+	[r, g, b, a]: [number, number, number, number] | [number, number, number],
+	dark?: boolean,
+	globalOpacity?: number
+): boolean => {
+	const alpha = ((a || 1) * (globalOpacity || 100)) / 100;
+	if (alpha < 0.65) {
+		if (dark) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+	// check luminance
+	return r * 0.299 + g * 0.587 + b * 0.114 <= 150;
+};