From 53cb435393b3bcfda99104b86ca98c049e54fc74 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 19 Jan 2023 21:42:39 +1100
Subject: [PATCH] add format y-axis function

---
 components/account/AccountChart.tsx           |  4 ++--
 components/stats/TotalDepositBorrowCharts.tsx |  6 +++---
 components/token/ChartTabs.tsx                | 10 +++++-----
 utils/formatting.ts                           |  7 +++++++
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/components/account/AccountChart.tsx b/components/account/AccountChart.tsx
index 1e370efc..6a78d175 100644
--- a/components/account/AccountChart.tsx
+++ b/components/account/AccountChart.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'next-i18next'
 import { useEffect, useMemo, useState } from 'react'
 import mangoStore from '@store/mangoStore'
 import dynamic from 'next/dynamic'
-import { numberCompacter } from 'utils/numbers'
+import { formatYAxis } from 'utils/formatting'
 const DetailedAreaChart = dynamic(
   () => import('@components/shared/DetailedAreaChart'),
   { ssr: false }
@@ -77,7 +77,7 @@ const AccountChart = ({
       loading={loading}
       prefix="$"
       setDaysToShow={handleDaysToShow}
-      tickFormat={(x) => `$${numberCompacter.format(x)}`}
+      tickFormat={(x) => `$${formatYAxis(x)}`}
       title={t(chartToShow)}
       xKey="time"
       yKey={yKey}
diff --git a/components/stats/TotalDepositBorrowCharts.tsx b/components/stats/TotalDepositBorrowCharts.tsx
index 04ab5ebf..7e542283 100644
--- a/components/stats/TotalDepositBorrowCharts.tsx
+++ b/components/stats/TotalDepositBorrowCharts.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { useMemo, useState } from 'react'
 import dayjs from 'dayjs'
-import { numberCompacter } from 'utils/numbers'
+import { formatYAxis } from 'utils/formatting'
 const DetailedAreaChart = dynamic(
   () => import('@components/shared/DetailedAreaChart'),
   { ssr: false }
@@ -138,7 +138,7 @@ const TotalDepositBorrowCharts = ({
           setDaysToShow={setDepositDaysToShow}
           heightClass="h-64"
           prefix="$"
-          tickFormat={(x) => `$${numberCompacter.format(x)}`}
+          tickFormat={(x) => `$${formatYAxis(x)}`}
           title={t('total-deposit-value')}
           xKey="date"
           yKey={'depositValue'}
@@ -157,7 +157,7 @@ const TotalDepositBorrowCharts = ({
           setDaysToShow={setBorrowDaysToShow}
           heightClass="h-64"
           prefix="$"
-          tickFormat={(x) => `$${numberCompacter.format(x)}`}
+          tickFormat={(x) => `$${formatYAxis(x)}`}
           title={t('total-borrow-value')}
           xKey="date"
           yKey={'borrowValue'}
diff --git a/components/token/ChartTabs.tsx b/components/token/ChartTabs.tsx
index e8a81912..fb4e50a3 100644
--- a/components/token/ChartTabs.tsx
+++ b/components/token/ChartTabs.tsx
@@ -4,7 +4,7 @@ import useMangoGroup from 'hooks/useMangoGroup'
 import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
 import { useEffect, useMemo, useState } from 'react'
-import { numberCompacter } from 'utils/numbers'
+import { formatYAxis } from 'utils/formatting'
 const DetailedAreaChart = dynamic(
   () => import('@components/shared/DetailedAreaChart'),
   { ssr: false }
@@ -55,7 +55,7 @@ const ChartTabs = ({ token }: { token: string }) => {
               ['token:deposit-rates', 0],
             ]}
           />
-          <div className="border-t border-th-bkg-3 px-6 py-4">
+          <div className="h-96 border-t border-th-bkg-3 px-6 py-6">
             {activeDepositsTab === 'token:deposits' ? (
               <DetailedAreaChart
                 data={statsHistory}
@@ -64,7 +64,7 @@ const ChartTabs = ({ token }: { token: string }) => {
                 // domain={[0, 'dataMax']}
                 loading={loadingTokenStats}
                 small
-                tickFormat={(x) => numberCompacter.format(x)}
+                tickFormat={(x) => formatYAxis(x)}
                 title={`${token} ${t('token:deposits')}`}
                 xKey="date_hour"
                 yKey={'total_deposits'}
@@ -99,7 +99,7 @@ const ChartTabs = ({ token }: { token: string }) => {
               ['token:borrow-rates', 0],
             ]}
           />
-          <div className="border-t border-th-bkg-3 px-6 py-4">
+          <div className="h-96 border-t border-th-bkg-3 px-6 py-6">
             {activeBorrowsTab === 'token:borrows' ? (
               <DetailedAreaChart
                 data={statsHistory}
@@ -108,7 +108,7 @@ const ChartTabs = ({ token }: { token: string }) => {
                 // domain={[0, 'dataMax']}
                 loading={loadingTokenStats}
                 small
-                tickFormat={(x) => numberCompacter.format(x)}
+                tickFormat={(x) => formatYAxis(x)}
                 title={`${token} ${t('token:borrows')}`}
                 xKey="date_hour"
                 yKey={'total_borrows'}
diff --git a/utils/formatting.ts b/utils/formatting.ts
index 078e6594..e592558a 100644
--- a/utils/formatting.ts
+++ b/utils/formatting.ts
@@ -1,6 +1,13 @@
 import { PublicKey } from '@solana/web3.js'
+import { formatDecimal, numberCompacter } from './numbers'
 
 export function abbreviateAddress(address: PublicKey, size = 5) {
   const base58 = address.toBase58()
   return base58.slice(0, size) + '…' + base58.slice(-size)
 }
+
+export const formatYAxis = (value: number) => {
+  return Math.abs(value) > 1
+    ? numberCompacter.format(value)
+    : formatDecimal(value, 2)
+}