blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add format y-axis function

This commit is contained in:
saml33 2023-01-19 21:42:39 +11:00
parent 7e9ef8e1bd
commit 53cb435393
4 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/account/AccountChart.tsx
View File

@ -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}

6
components/stats/TotalDepositBorrowCharts.tsx
View File

@ -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'}

10
components/token/ChartTabs.tsx
View File

@ -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'}

7
utils/formatting.ts
View File

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