integrate confidence rating to data display

Author: yethranayeh

src/components/CalculationView/CalculationResults.tsx

@@ -40,15 +40,25 @@ function PinButton({ primary, secondary }: { primary: CurrencyKey; secondary: Cu
 
 type Props = {
 	primary: CurrencyKey;
-	results: Array<{ currency: CurrencyKey; calculation: number }>;
+	results: ConversionResults;
 };
 
 export const CalculationResults = ({ primary, results }: Props) => (
 	<div className='flex flex-col w-max self-start'>
-		{results.map((res) => (
-			<div key={res.currency} className='mt-[-4px] flex gap-2 w-full'>
+		{results.conversions.map((res) => (
+			<div key={res.currency} className='mt-[-4px] flex gap-2 w-full items-center relative'>
 				<PinButton primary={primary} secondary={res.currency} />
-				<AmountDisplay rate={res.calculation} currencyName={res.currency} />
+
+				<div
+					className='flex flex-row items-center gap-1'
+					title={`Based on the collected data, confidence rating for this calculation is: ${res.confidence}%`}>
+					<div
+						className='flex items-center justify-center min-w-[2px] max-w-[2px] min-h-[20px] overflow-hidden  text-transparent font-[FontinBold] text-nowrap text-xs select-none transition-all hover:min-w-[104px] hover:text-white hover:px-1'
+						style={{ backgroundColor: `hsl(${(res.confidence / results.highestConfidence) * 120}, 70%, 50%)` }}>
+						<span>Confidence: {res.confidence}%</span>
+					</div>
+					<AmountDisplay rate={res.calculation} currencyName={res.currency} />
+				</div>
 			</div>
 		))}
 	</div>

src/components/CalculationView/CalculationView.tsx

@@ -11,6 +11,7 @@ import { CurrencySelection } from "./CurrencySelection";
 import { CalculationResults } from "./CalculationResults";
 import { CurrencyInput } from "./CurrencyInput";
 import { HiddenDataInfo } from "./HiddenDataInfo";
+import ErrorBoundary from "../ErrorBoundary";
 
 import { currencies } from "../../constant";
 
@@ -20,26 +21,35 @@ export function CalculationView() {
 	const [value, setValue] = useState(preferences.starred ? "1" : "");
 	const currencyMap = useContext(CurrencyMapContext);
 
-	const convertedResults = useMemo(() => {
+	const results = useMemo(() => {
+		const values: ConversionResults = { conversions: [], highestConfidence: 0 };
 		if (!selected || !currencyMap) {
-			return [];
+			return values;
 		}
 
-		const conversions = [];
-		for (const currency of currencies.filter((c) => c !== selected)) {
-			const conversion = convert(selected, currency, currencyMap);
+		try {
+			for (const currency of currencies.filter((c) => c !== selected)) {
+				const conversion = convert(selected, currency, currencyMap);
 
-			if (conversion == null) {
-				continue;
-			}
+				if (conversion.rate == null) {
+					continue;
+				}
+
+				if (conversion.confidence && conversion.confidence > values.highestConfidence) {
+					values.highestConfidence = conversion.confidence;
+				}
 
-			conversions.push({
-				currency,
-				calculation: value ? parseFloat(value) * conversion : 0
-			});
+				values.conversions.push({
+					currency,
+					calculation: value ? parseFloat(value) * conversion.rate : 0,
+					confidence: conversion.confidence ?? 0
+				});
+			}
+		} catch (e) {
+			console.error(e);
 		}
 
-		return conversions;
+		return values;
 	}, [selected, value, currencyMap]);
 
 	if (currencyMap == null) {
@@ -52,25 +62,29 @@ export function CalculationView() {
 
 	return (
 		<div className='w-full flex flex-1 overflow-x-hidden justify-center px-4'>
-			<div className={clsx("flex flex-col gap-4", "lg:gap-6 lg:flex-row")}>
+			<div className={clsx("flex flex-col h-min gap-4", "lg:gap-6 lg:flex-row")}>
 				<CurrencySelection selected={selected} setSelected={setSelected} />
 
-				<div className='flex flex-col gap-4 min-w-[390px]'>
+				<div className='flex flex-col h-full gap-4 md:min-w-[410px]'>
 					{selected ? (
 						<CurrencyInput value={value} setValue={setValue} selected={selected} />
 					) : (
 						<p>Please select a currency</p>
 					)}
 
-					<div className='min-h-[230px] flex flex-col justify-between gap-2'>
-						{selected && <CalculationResults primary={selected} results={convertedResults} />}
+					<ErrorBoundary>
+						<div className='flex flex-col gap-2'>
+							{selected && <CalculationResults primary={selected} results={results} />}
 
-						{selected && convertedResults.length < currencies.length - 2 && <HiddenDataInfo />}
-						<p className='flex items-center gap-1 text-primary-darker italic text-xs'>
-							<DatabaseBackup className='w-4 h-4' /> Last Updated:{" "}
-							{new Date(currencyMap.meta.createdAt).toLocaleString()}
-						</p>
-					</div>
+							<div className='flex flex-col gap-2'>
+								{selected && results.conversions.length < currencies.length - 2 && <HiddenDataInfo />}
+								<p className='flex items-center gap-1 text-primary-darker italic text-xs'>
+									<DatabaseBackup className='w-4 h-4' /> Last Updated:{" "}
+									{new Date(currencyMap.meta.createdAt).toLocaleString()}
+								</p>
+							</div>
+						</div>
+					</ErrorBoundary>
 				</div>
 			</div>
 		</div>

src/components/CalculationView/CurrencyInput.tsx

@@ -35,8 +35,6 @@ export function CurrencyInput({ value, setValue, selected }: Props) {
 
 		const nextValue = e.target.value.replace(",", ".");
 
-		console.log({ nextValue, test: numberRegex.test(nextValue) });
-
 		const isValidValue = nextValue === "" || numberRegex.test(nextValue);
 		const hasMultiplePeriods = (nextValue.match(/\./g)?.length ?? 0) > 1;
 

src/components/CalculationView/CurrencySelection.tsx

@@ -26,7 +26,7 @@ export const Component = ({ selected, setSelected }: Props) => (
 				)}
 				onClick={() => setSelected(c)}>
 				<CurrencyIcon index={index} />
-				<span className='hidden text-sm md:block lg:text-md xl:text-lg'>{c}</span>
+				<span className='hidden text-sm md:block md:text-md lg:text-lg'>{c}</span>
 			</button>
 		))}
 	</section>

src/components/CalculationView/types.d.ts

@@ -0,0 +1,4 @@
+type ConversionResults = {
+	conversions: Array<{ currency: CurrencyKey; calculation: number; confidence: number }>;
+	highestConfidence: number;
+};

src/components/Header/PinnedConversion.tsx

@@ -20,7 +20,7 @@ export function PinnedConversion() {
 		return null;
 	}
 
-	const conversionRate = convert(pinned.primary, pinned.secondary, currencyMap);
+	const conversionRate = convert(pinned.primary, pinned.secondary, currencyMap).rate;
 
 	return (
 		<div className='flex select-none items-center text-primary-dark text-sm'>

src/types.d.ts

@@ -1,5 +1,7 @@
 type CurrencyKey = typeof import("./constant").currencies[number];
-type RateDefinitions = Record<CurrencyKey, Record<CurrencyKey, { mean: number | null; median: number | null }>> & {
+type CurrencyObj = { mean: number | null; median: number | null };
+type CurrencyData = CurrencyObj & { confidence: CurrencyObj };
+type RateDefinitions = Record<CurrencyKey, Record<CurrencyKey, CurrencyData>> & {
 	meta: { createdAt: string };
 };
 type SetStateFn<T> = import("react").Dispatch<import("react").SetStateAction<T>>;

src/utils/convert.ts

@@ -1,3 +1,23 @@
 export function convert(from: CurrencyKey, to: CurrencyKey, ratesData: RateDefinitions) {
-	return ratesData[from][to].median;
+	const { mean, median, confidence } = ratesData[from][to];
+	const result: { rate: number | null; confidence: number | null } = { rate: null, confidence: null };
+
+	// TODO: refactor to reduce complexity
+	if (confidence.mean != null && confidence.median != null) {
+		if (confidence.mean > confidence.median) {
+			result.rate = mean;
+			result.confidence = confidence.mean;
+		} else {
+			result.rate = median;
+			result.confidence = confidence.median;
+		}
+	} else if (confidence.mean != null) {
+		result.rate = mean;
+		result.confidence = confidence.mean;
+	} else if (confidence.median != null) {
+		result.rate = median;
+		result.confidence = confidence.median;
+	}
+
+	return result;
 }