|
|
@@ -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>
|