diff --git a/src/components/Widgets/CryptoWatchList.vue b/src/components/Widgets/CryptoWatchList.vue
index 891721e9..2bf3c635 100644
--- a/src/components/Widgets/CryptoWatchList.vue
+++ b/src/components/Widgets/CryptoWatchList.vue
@@ -9,9 +9,9 @@
>
{{ asset.name }}
- {{ asset.price | currency }}
+ {{ asset.price | formatPrice }}
- {{ asset.percentChange | percentage }}
+ {{ asset.percentChange | formatPercentage }}
@@ -22,7 +22,7 @@
import axios from 'axios';
import WidgetMixin from '@/mixins/WidgetMixin';
import { widgetApiEndpoints } from '@/utils/defaults';
-import { findCurrencySymbol, timestampToDate } from '@/utils/MiscHelpers';
+import { findCurrencySymbol, timestampToDate, roundPrice } from '@/utils/MiscHelpers';
export default {
mixins: [WidgetMixin],
@@ -68,11 +68,11 @@ export default {
},
filters: {
/* Append currency symbol to price */
- currency(price) {
- return `${findCurrencySymbol('usd')}${price}`;
+ formatPrice(price) {
+ return `${findCurrencySymbol('usd')}${roundPrice(price)}`;
},
/* Append percentage symbol, and up/ down arrow */
- percentage(change) {
+ formatPercentage(change) {
if (!change) return '';
const symbol = change > 0 ? '↑' : '↓';
return `${symbol} ${change.toFixed(2)}%`;
@@ -118,7 +118,7 @@ export default {
tooltip(info) {
const maxSupply = info.maxSupply ? ` out of max supply of ${info.maxSupply}` : '';
const content = `Rank: ${info.rank} with market cap of `
- + `${this.$options.filters.currency(info.marketCap)}`
+ + `${this.$options.filters.formatPrice(info.marketCap)}`
+ `
Circulating Supply: ${info.supply} ${info.symbol.toUpperCase()}${maxSupply}`
+ `
All-time-high of ${info.allTimeHigh} `
+ `at ${timestampToDate(info.allTimeHighDate)}`;
@@ -137,6 +137,7 @@ export default {
align-items: center;
justify-content: space-between;
color: var(--widget-text-color);
+ font-size: 0.9rem;
.icon {
width: 2rem;
height: 2rem;
@@ -151,7 +152,7 @@ export default {
&.down { color: var(--danger); }
}
p {
- width: 25%;
+ width: 28%;
}
&:not(:last-child) {
border-bottom: 1px dashed var(--widget-text-color);
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index 37d07849..9d604cde 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -70,6 +70,7 @@ export const timestampToTime = (timestamp) => {
return time;
};
+/* Given a timestamp, returns both human Date and Time */
export const timestampToDateTime = (timestamp) => {
return `${timestampToDate(timestamp)} at ${timestampToTime(timestamp)}`;
};
@@ -125,6 +126,19 @@ export const showNumAsThousand = (bigNum) => {
return `${Math.round(bigNum / 1000)}k`;
};
+/* Capitalizes the first letter of each word within a string */
export const capitalize = (str) => {
return str.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
};
+
+/* Round price to appropriate number of decimals */
+export const roundPrice = (price) => {
+ if (Number.isNaN(price)) return price;
+ let decimals = 2;
+ if (price > 1000) decimals = 0;
+ else if (price > 1) decimals = 2;
+ else if (price > 0.1) decimals = 3;
+ else if (price > 0.01) decimals = 4;
+ else if (price <= 0.01) decimals = 5;
+ return price.toFixed(decimals);
+};