Bladeren bron

add price variation to stock history chart

Daniel Bohry 9 maanden geleden
bovenliggende
commit
6645cd1707
1 gewijzigde bestanden met toevoegingen van 14 en 2 verwijderingen
  1. 14 2
      src/components/StockPriceHistory.svelte

+ 14 - 2
src/components/StockPriceHistory.svelte

@@ -15,6 +15,7 @@
 	let isLoading = true;
 	let currentPrice = null;
 	let currentCurrency = '';
+	let priceChange = null;
 
 	const ranges = ['5d', '30d', '6m', '1y'];
 
@@ -104,8 +105,13 @@
 		isLoading = false;
 
 		if (history.length > 0) {
-			currentPrice = history[history.length - 1].price;
+			const first = history[0].price;
+			const last = history[history.length - 1].price;
+
+			currentPrice = last;
 			currentCurrency = history[history.length - 1].currency || '';
+			priceChange = first !== 0 ? ((last - first) / first) * 100 : null;
+
 			renderChart(history);
 		}
 	}
@@ -134,7 +140,13 @@
 			Price History
 			{#if currentPrice !== null}
 		<span class="ml-2 text-blue-500 dark:text-blue-300 text-lg font-medium">
-			({currentCurrency} {currentPrice.toFixed(2)})
+			({currentCurrency} {currentPrice.toFixed(2)}
+			{#if priceChange !== null}
+				<span class="{priceChange >= 0 ? 'text-green-500' : 'text-red-500'} text-sm font-semibold ml-1 align-middle">
+					{priceChange >= 0 ? '+' : ''}{priceChange.toFixed(2)}%
+				</span>
+			{/if}
+			)
 		</span>
 			{/if}
 		</h3>