From edb2dd5556bfa62ee25260529b312c8c99853cbe Mon Sep 17 00:00:00 2001 From: Charlie Varley Date: Thu, 11 Mar 2021 17:34:05 +0000 Subject: [PATCH 1/2] fix: add currency value precision --- .../shared/components/charts/Index.svelte | 3 ++- packages/shared/components/charts/Line.svelte | 5 ++--- packages/shared/lib/chart.ts | 5 +++-- packages/shared/lib/currency.ts | 22 +++++++++++++++++++ .../dashboard/wallet/views/LineChart.svelte | 4 ++-- 5 files changed, 31 insertions(+), 8 deletions(-) diff --git a/packages/shared/components/charts/Index.svelte b/packages/shared/components/charts/Index.svelte index cd70ad58310..08b51b63c1b 100644 --- a/packages/shared/components/charts/Index.svelte +++ b/packages/shared/components/charts/Index.svelte @@ -16,10 +16,11 @@ export let yPrecision export let beginAtZero export let inlineStyle + export let formatYAxis {#if type === ChartType.Line} - + {:else if type === ChartType.Bar} {/if} diff --git a/packages/shared/components/charts/Line.svelte b/packages/shared/components/charts/Line.svelte index b33c1417ba6..99efe63c34e 100644 --- a/packages/shared/components/charts/Line.svelte +++ b/packages/shared/components/charts/Line.svelte @@ -9,7 +9,7 @@ export let datasets = [] export let xMaxTicks = 7 export let yMaxTicks = 6 - export let yPrecision = 3 + export let formatYAxis = (value) => Number(value.toString()) export let color = 'blue' // TODO: each profile has a different color export let beginAtZero = false export let inlineStyle = 'height: calc(50vh - 130px);' @@ -111,10 +111,9 @@ ticks: { autoSkip: true, maxTicksLimit: yMaxTicks, - precision: yPrecision, beginAtZero, callback: function (value, index, values) { - return Number(value.toString()) + return formatYAxis(value) }, }, }, diff --git a/packages/shared/lib/chart.ts b/packages/shared/lib/chart.ts index 4759f743a95..fbf4c7f7fef 100644 --- a/packages/shared/lib/chart.ts +++ b/packages/shared/lib/chart.ts @@ -3,7 +3,7 @@ import { _ } from 'shared/lib/i18n' import type { WalletAccount } from 'shared/lib/wallet' import { date as i18nDate } from 'svelte-i18n' import { derived, get, writable } from 'svelte/store' -import { CurrencyTypes } from './currency' +import { CurrencyTypes, formatCurrencyValue } from './currency' import { HistoryDataProps, priceData @@ -220,7 +220,8 @@ function formatLabel(timestamp: number): string { } function formatLineChartTooltip(data: (number | string), timestamp: number | string, showMiota: boolean = false): Tooltip { - const title: string = `${showMiota ? `1 ${Unit.Mi}: ` : ''}${data} ${get(chartCurrency).toUpperCase()}` + const currency = get(chartCurrency).toUpperCase() + const title: string = `${showMiota ? `1 ${Unit.Mi}: ` : ''}${formatCurrencyValue(data, currency)} ${currency}` const label: string = get(i18nDate)(new Date(timestamp), { year: 'numeric', month: 'short', diff --git a/packages/shared/lib/currency.ts b/packages/shared/lib/currency.ts index 9a2cf2fdff6..3141fc0f223 100644 --- a/packages/shared/lib/currency.ts +++ b/packages/shared/lib/currency.ts @@ -147,3 +147,25 @@ export const currencies = writable({} as Currencies) export const convertToFiat = (amount: number, usdPrice: number, conversionRate: number): number => { return +(((amount * usdPrice) / 1000000) * conversionRate).toFixed(2) } + +/** + * Converts to appropriate decimal places for a given currency + * + * @method formatCurrencyValue + * + * @param {number | string} data + * @param {string} currency + * + * @returns {string} + */ +export const formatCurrencyValue = (data: (number | string), currency: string, cryptoPrecision: number = 4): string => { + const parsedData: number = parseFloat(data.toString()) + switch(currency.toLowerCase()) { + case CurrencyTypes.BTC: + return parsedData.toPrecision(cryptoPrecision) + case CurrencyTypes.ETH: + return parsedData.toPrecision(cryptoPrecision) + default: + return parsedData.toFixed(2) + } +} diff --git a/packages/shared/routes/dashboard/wallet/views/LineChart.svelte b/packages/shared/routes/dashboard/wallet/views/LineChart.svelte index b5c4c95219e..829384432c9 100644 --- a/packages/shared/routes/dashboard/wallet/views/LineChart.svelte +++ b/packages/shared/routes/dashboard/wallet/views/LineChart.svelte @@ -11,7 +11,7 @@ getTokenData, selectedChart, } from 'shared/lib/chart' - import { CurrencyTypes } from 'shared/lib/currency' + import { CurrencyTypes, formatCurrencyValue } from 'shared/lib/currency' import { HistoryDataProps, TIMEFRAME_MAP } from 'shared/lib/marketData' import { activeProfile } from 'shared/lib/profile' import { getContext, onMount } from 'svelte' @@ -107,6 +107,6 @@ {labels} {color} {xMaxTicks} - yPrecision={7} + formatYAxis={(value) => formatCurrencyValue(value, $chartCurrency, 4)} inlineStyle={$selectedAccount && 'height: calc(50vh - 150px);'} /> From 3c3a5de966994231bafa6e12c4ae80ed2f3fa875 Mon Sep 17 00:00:00 2001 From: Charlie Varley Date: Thu, 11 Mar 2021 18:27:53 +0000 Subject: [PATCH 2/2] fix: adjust chart precision --- packages/shared/lib/chart.ts | 2 +- packages/shared/lib/currency.ts | 8 ++++---- .../shared/routes/dashboard/wallet/views/LineChart.svelte | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/shared/lib/chart.ts b/packages/shared/lib/chart.ts index fbf4c7f7fef..0b2af56181f 100644 --- a/packages/shared/lib/chart.ts +++ b/packages/shared/lib/chart.ts @@ -221,7 +221,7 @@ function formatLabel(timestamp: number): string { function formatLineChartTooltip(data: (number | string), timestamp: number | string, showMiota: boolean = false): Tooltip { const currency = get(chartCurrency).toUpperCase() - const title: string = `${showMiota ? `1 ${Unit.Mi}: ` : ''}${formatCurrencyValue(data, currency)} ${currency}` + const title: string = `${showMiota ? `1 ${Unit.Mi}: ` : ''}${formatCurrencyValue(data, currency, 3)} ${currency}` const label: string = get(i18nDate)(new Date(timestamp), { year: 'numeric', month: 'short', diff --git a/packages/shared/lib/currency.ts b/packages/shared/lib/currency.ts index 3141fc0f223..687c380b79f 100644 --- a/packages/shared/lib/currency.ts +++ b/packages/shared/lib/currency.ts @@ -158,14 +158,14 @@ export const convertToFiat = (amount: number, usdPrice: number, conversionRate: * * @returns {string} */ -export const formatCurrencyValue = (data: (number | string), currency: string, cryptoPrecision: number = 4): string => { +export const formatCurrencyValue = (data: (number | string), currency: string, fiatFixed: number = 2, btcFixed: number = 7, ethFixed: number = 6, ): string => { const parsedData: number = parseFloat(data.toString()) switch(currency.toLowerCase()) { case CurrencyTypes.BTC: - return parsedData.toPrecision(cryptoPrecision) + return parsedData.toFixed(btcFixed) case CurrencyTypes.ETH: - return parsedData.toPrecision(cryptoPrecision) + return parsedData.toFixed(ethFixed) default: - return parsedData.toFixed(2) + return parsedData.toFixed(fiatFixed) } } diff --git a/packages/shared/routes/dashboard/wallet/views/LineChart.svelte b/packages/shared/routes/dashboard/wallet/views/LineChart.svelte index 829384432c9..1dfb9fc6e7b 100644 --- a/packages/shared/routes/dashboard/wallet/views/LineChart.svelte +++ b/packages/shared/routes/dashboard/wallet/views/LineChart.svelte @@ -107,6 +107,6 @@ {labels} {color} {xMaxTicks} - formatYAxis={(value) => formatCurrencyValue(value, $chartCurrency, 4)} + formatYAxis={(value) => formatCurrencyValue(value, $chartCurrency, undefined, undefined, 5)} inlineStyle={$selectedAccount && 'height: calc(50vh - 150px);'} />