fix: adds configurable chart precision

packages/shared/components/charts/Index.svelte

@@ -16,10 +16,11 @@
     export let yPrecision
     export let beginAtZero
     export let inlineStyle
+    export let formatYAxis
 </script>
 
 {#if type === ChartType.Line}
-    <LineChart {datasets} {labels} {tooltips} {xMaxTicks} {yMaxTicks} {yPrecision} {beginAtZero} {color} {inlineStyle} />
+    <LineChart {formatYAxis} {datasets} {labels} {tooltips} {xMaxTicks} {yMaxTicks} {yPrecision} {beginAtZero} {color} {inlineStyle} />
 {:else if type === ChartType.Bar}
     <BarChart {datasets} {labels} {tooltips} {inlineStyle} />
 {/if}

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)
                                 },
                             },
                         },

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',

packages/shared/lib/currency.ts

@@ -147,3 +147,25 @@ export const currencies = writable<Currencies>({} 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)
+    }
+}

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);'} />
 </div>