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..0b2af56181f 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, 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 9a2cf2fdff6..687c380b79f 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, fiatFixed: number = 2, btcFixed: number = 7, ethFixed: number = 6, ): string => { + const parsedData: number = parseFloat(data.toString()) + switch(currency.toLowerCase()) { + case CurrencyTypes.BTC: + return parsedData.toFixed(btcFixed) + case CurrencyTypes.ETH: + return parsedData.toFixed(ethFixed) + default: + 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 b5c4c95219e..1dfb9fc6e7b 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, undefined, undefined, 5)} inlineStyle={$selectedAccount && 'height: calc(50vh - 150px);'} />