tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-21 12:45:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Adds method to round price data to apprpriate decimal

Browse Source
This commit is contained in:
Alicia Sykes 2021-12-25 22:15:42 +00:00 committed by Alicia Sykes
parent c591a03f66
commit e55c51abd7
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Widgets/CryptoWatchList.vue
View File

@ -9,9 +9,9 @@
> >
<img class="icon" :src="asset.image" /> <img class="icon" :src="asset.image" />
<p class="name">{{ asset.name }}</p> <p class="name">{{ asset.name }}</p>
<p class="price">{{ asset.price | currency }}</p> <p class="price">{{ asset.price | formatPrice }}</p>
<p :class="`percent ${asset.percentChange > 0 ? 'up' : 'down'}`"> <p :class="`percent ${asset.percentChange > 0 ? 'up' : 'down'}`">
{{ asset.percentChange | percentage }} {{ asset.percentChange | formatPercentage }}
</p> </p>
</div> </div>
</template> </template>
@ -22,7 +22,7 @@
import axios from 'axios'; import axios from 'axios';
import WidgetMixin from '@/mixins/WidgetMixin'; import WidgetMixin from '@/mixins/WidgetMixin';
import { widgetApiEndpoints } from '@/utils/defaults'; import { widgetApiEndpoints } from '@/utils/defaults';
import { findCurrencySymbol, timestampToDate } from '@/utils/MiscHelpers'; import { findCurrencySymbol, timestampToDate, roundPrice } from '@/utils/MiscHelpers';
export default { export default {
mixins: [WidgetMixin], mixins: [WidgetMixin],
@ -68,11 +68,11 @@ export default {
}, },
filters: { filters: {
/* Append currency symbol to price */ /* Append currency symbol to price */
currency(price) { formatPrice(price) {
return `${findCurrencySymbol('usd')}${price}`; return `${findCurrencySymbol('usd')}${roundPrice(price)}`;
}, },
/* Append percentage symbol, and up/ down arrow */ /* Append percentage symbol, and up/ down arrow */
percentage(change) { formatPercentage(change) {
if (!change) return ''; if (!change) return '';
const symbol = change > 0 ? '↑' : '↓'; const symbol = change > 0 ? '↑' : '↓';
return `${symbol} ${change.toFixed(2)}%`; return `${symbol} ${change.toFixed(2)}%`;
@ -118,7 +118,7 @@ export default {
tooltip(info) { tooltip(info) {
const maxSupply = info.maxSupply ? ` out of max supply of <b>${info.maxSupply}</b>` : ''; const maxSupply = info.maxSupply ? ` out of max supply of <b>${info.maxSupply}</b>` : '';
const content = `Rank: <b>${info.rank}</b> with market cap of ` const content = `Rank: <b>${info.rank}</b> with market cap of `
+ `<b>${this.$options.filters.currency(info.marketCap)}</b>` + `<b>${this.$options.filters.formatPrice(info.marketCap)}</b>`
+ `<br>Circulating Supply: <b>${info.supply} ${info.symbol.toUpperCase()}</b>${maxSupply}` + `<br>Circulating Supply: <b>${info.supply} ${info.symbol.toUpperCase()}</b>${maxSupply}`
+ `<br>All-time-high of <b>${info.allTimeHigh}</b> ` + `<br>All-time-high of <b>${info.allTimeHigh}</b> `
+ `at <b>${timestampToDate(info.allTimeHighDate)}</b>`; + `at <b>${timestampToDate(info.allTimeHighDate)}</b>`;
@ -137,6 +137,7 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
color: var(--widget-text-color); color: var(--widget-text-color);
font-size: 0.9rem;
.icon { .icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -151,7 +152,7 @@ export default {
&.down { color: var(--danger); } &.down { color: var(--danger); }
} }
p { p {
width: 25%; width: 28%;
} }
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px dashed var(--widget-text-color); border-bottom: 1px dashed var(--widget-text-color);

14
src/utils/MiscHelpers.js
View File

@ -70,6 +70,7 @@ export const timestampToTime = (timestamp) => {
return time; return time;
}; };
/* Given a timestamp, returns both human Date and Time */
export const timestampToDateTime = (timestamp) => { export const timestampToDateTime = (timestamp) => {
return `${timestampToDate(timestamp)} at ${timestampToTime(timestamp)}`; return `${timestampToDate(timestamp)} at ${timestampToTime(timestamp)}`;
}; };
@ -125,6 +126,19 @@ export const showNumAsThousand = (bigNum) => {
return `${Math.round(bigNum / 1000)}k`; return `${Math.round(bigNum / 1000)}k`;
}; };
/* Capitalizes the first letter of each word within a string */
export const capitalize = (str) => { export const capitalize = (str) => {
return str.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase()))); 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);
};