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

change to bar chart and add averaging intervals

This commit is contained in:
saml33 2023-05-15 13:08:48 +10:00
parent d88ebb909b
commit b708d838d7
14 changed files with 402 additions and 198 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 { useMemo, useState } from 'react'
import { formatYAxis } from 'utils/formatting'
import { HourlyFundingChartData, PerformanceDataItem } from 'types'
import { ContentType } from 'recharts/types/component/Tooltip'
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
import { ChartToShow } from './AccountPage'
import { IconButton } from '@components/shared/Button'
import { ArrowLeftIcon } from '@heroicons/react/20/solid'
@ -73,7 +73,7 @@ const AccountChart = ({
</div>
</div>
<div className="px-6 pt-4">
<DetailedAreaChart
<DetailedAreaOrBarChart
customTooltip={customTooltip}
data={chartData}
daysToShow={daysToShow}

2
components/account/FundingDetails.tsx
View File

@ -23,7 +23,7 @@ import {
} from 'recharts'
import { useTheme } from 'next-themes'
import { COLORS } from 'styles/colors'
import { formatDateAxis } from '@components/shared/DetailedAreaChart'
import { formatDateAxis } from '@components/shared/DetailedAreaOrBarChart'
import { formatYAxis } from 'utils/formatting'
import ChartRangeButtons from '@components/shared/ChartRangeButtons'
import { useTranslation } from 'next-i18next'

338
components/shared/DetailedAreaChart.tsx → components/shared/DetailedAreaOrBarChart.tsx
View File

@ -10,10 +10,13 @@ import {
Tooltip as RechartsTooltip,
ResponsiveContainer,
ReferenceLine,
BarChart,
Bar,
Cell,
} from 'recharts'
import FlipNumbers from 'react-flip-numbers'
import ContentBox from '../shared/ContentBox'
import SheenLoader from '../shared/SheenLoader'
import ContentBox from './ContentBox'
import SheenLoader from './SheenLoader'
import { COLORS } from '../../styles/colors'
import { useTheme } from 'next-themes'
import { IconButton } from './Button'
@ -33,7 +36,8 @@ import Tooltip from './Tooltip'
dayjs.extend(relativeTime)
interface DetailedAreaChartProps {
interface DetailedAreaOrBarChartProps {
chartType?: 'area' | 'bar'
customTooltip?: ContentType<number, string>
data: any[]
daysToShow?: string
@ -64,7 +68,10 @@ export const formatDateAxis = (date: string, days: number) => {
}
}
const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
const DetailedAreaOrBarChart: FunctionComponent<
DetailedAreaOrBarChartProps
> = ({
chartType = 'area',
customTooltip,
data,
daysToShow = '1',
@ -308,116 +315,219 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
>
<div className="-mx-6 mt-6 h-full">
<ResponsiveContainer width="100%" height="100%">
<AreaChart
data={filteredData}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>
<RechartsTooltip
cursor={{
strokeOpacity: 0.09,
}}
content={customTooltip ? customTooltip : <></>}
/>
<defs>
<linearGradient
id={`gradientArea-${title?.replace(/[^a-zA-Z]/g, '')}`}
x1="0"
y1={flipGradientCoords ? '1' : '0'}
x2="0"
y2={flipGradientCoords ? '0' : '1'}
>
<stop
offset="0%"
stopColor={
calculateChartChange() >= 0
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
stopOpacity={0.15}
/>
<stop
offset="99%"
stopColor={
calculateChartChange() >= 0
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
stopOpacity={0}
/>
</linearGradient>
</defs>
<Area
isAnimationActive={false}
type="monotone"
dataKey={yKey}
stroke={
calculateChartChange() >= 0
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
strokeWidth={1.5}
fill={`url(#gradientArea-${title?.replace(
/[^a-zA-Z]/g,
''
)})`}
/>
<XAxis
axisLine={false}
dataKey={xKey}
minTickGap={20}
padding={{ left: 20, right: 20 }}
tick={{
fill: 'var(--fgd-4)',
fontSize: 10,
}}
tickLine={false}
tickFormatter={(d) =>
formatDateAxis(d, parseInt(daysToShow))
}
/>
<YAxis
axisLine={false}
dataKey={yKey}
minTickGap={20}
type="number"
domain={
domain
? domain
: ([dataMin, dataMax]) => {
const difference = dataMax - dataMin
if (difference < 0.01) {
return [dataMin - 0.001, dataMax + 0.001]
} else if (difference < 0.1) {
return [dataMin - 0.01, dataMax + 0.01]
} else if (difference < 1) {
return [dataMin - 0.1, dataMax + 0.11]
} else if (difference < 10) {
return [dataMin - 1, dataMax + 1]
} else {
return [dataMin, dataMax]
}
}
}
padding={{ top: 20, bottom: 20 }}
tick={{
fill: 'var(--fgd-4)',
fontSize: 10,
}}
tickFormatter={
tickFormat ? (v) => tickFormat(v) : undefined
}
tickLine={false}
/>
{showZeroLine ? (
<ReferenceLine
y={0}
stroke="var(--fgd-4)"
strokeDasharray="2 2"
{chartType === 'area' ? (
<AreaChart
data={filteredData}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>
<RechartsTooltip
cursor={{
strokeOpacity: 0.09,
}}
content={customTooltip ? customTooltip : <></>}
/>
) : null}
</AreaChart>
<defs>
<linearGradient
id={`gradientArea-${title?.replace(
/[^a-zA-Z]/g,
''
)}`}
x1="0"
y1={flipGradientCoords ? '1' : '0'}
x2="0"
y2={flipGradientCoords ? '0' : '1'}
>
<stop
offset="0%"
stopColor={
calculateChartChange() >= 0
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
stopOpacity={0.15}
/>
<stop
offset="99%"
stopColor={
calculateChartChange() >= 0
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
stopOpacity={0}
/>
</linearGradient>
</defs>
<Area
isAnimationActive={false}
type="monotone"
dataKey={yKey}
stroke={
calculateChartChange() >= 0
? COLORS.UP[theme]
: COLORS.DOWN[theme]
}
strokeWidth={1.5}
fill={`url(#gradientArea-${title?.replace(
/[^a-zA-Z]/g,
''
)})`}
/>
<XAxis
axisLine={false}
dataKey={xKey}
minTickGap={20}
padding={{ left: 20, right: 20 }}
tick={{
fill: 'var(--fgd-4)',
fontSize: 10,
}}
tickLine={false}
tickFormatter={(d) =>
formatDateAxis(d, parseInt(daysToShow))
}
/>
<YAxis
axisLine={false}
dataKey={yKey}
minTickGap={20}
type="number"
domain={
domain
? domain
: ([dataMin, dataMax]) => {
const difference = dataMax - dataMin
if (difference < 0.01) {
return [dataMin - 0.001, dataMax + 0.001]
} else if (difference < 0.1) {
return [dataMin - 0.01, dataMax + 0.01]
} else if (difference < 1) {
return [dataMin - 0.1, dataMax + 0.11]
} else if (difference < 10) {
return [dataMin - 1, dataMax + 1]
} else {
return [dataMin, dataMax]
}
}
}
padding={{ top: 20, bottom: 20 }}
tick={{
fill: 'var(--fgd-4)',
fontSize: 10,
}}
tickFormatter={
tickFormat ? (v) => tickFormat(v) : undefined
}
tickLine={false}
/>
{showZeroLine ? (
<ReferenceLine
y={0}
stroke="var(--fgd-4)"
strokeDasharray="2 2"
/>
) : null}
</AreaChart>
) : (
<BarChart
data={filteredData}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>
<RechartsTooltip
cursor={{
fill: 'var(--bkg-2)',
opacity: 0.5,
}}
content={customTooltip ? customTooltip : <></>}
/>
<defs>
<linearGradient
id="greenGradientBar"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop
offset="0%"
stopColor={COLORS.UP[theme]}
stopOpacity={1}
/>
<stop
offset="100%"
stopColor={COLORS.UP[theme]}
stopOpacity={0.7}
/>
</linearGradient>
<linearGradient
id="redGradientBar"
x1="0"
y1="1"
x2="0"
y2="0"
>
<stop
offset="0%"
stopColor={COLORS.DOWN[theme]}
stopOpacity={1}
/>
<stop
offset="100%"
stopColor={COLORS.DOWN[theme]}
stopOpacity={0.7}
/>
</linearGradient>
</defs>
<Bar dataKey={yKey}>
{filteredData.map((entry, index) => {
return (
<Cell
key={`cell-${index}`}
fill={
entry[yKey] > 0
? 'url(#greenGradientBar)'
: 'url(#redGradientBar)'
}
/>
)
})}
</Bar>
<XAxis
dataKey={xKey}
axisLine={false}
dy={10}
minTickGap={20}
padding={{ left: 20, right: 20 }}
tick={{
fill: 'var(--fgd-4)',
fontSize: 10,
}}
tickLine={false}
tickFormatter={(v) =>
formatDateAxis(v, parseInt(daysToShow))
}
/>
<YAxis
dataKey={yKey}
interval="preserveStartEnd"
axisLine={false}
dx={-10}
padding={{ top: 20, bottom: 20 }}
tick={{
fill: 'var(--fgd-4)',
fontSize: 10,
}}
tickLine={false}
tickFormatter={
tickFormat ? (v) => tickFormat(v) : undefined
}
type="number"
/>
<ReferenceLine y={0} stroke={COLORS.BKG4[theme]} />
</BarChart>
)}
</ResponsiveContainer>
</div>
</div>
@ -439,4 +549,4 @@ const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
)
}
export default DetailedAreaChart
export default DetailedAreaOrBarChart

84
components/stats/AverageFundingChart.tsx Normal file
View File

@ -0,0 +1,84 @@
import { useMemo, useState } from 'react'
import { PerpStatsItem } from 'types'
import { formatNumericValue } from 'utils/numbers'
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
import { useTranslation } from 'next-i18next'
interface GroupedDataItem extends PerpStatsItem {
intervalStartMillis: number
numHours: number
}
const AverageFundingChart = ({
loading,
marketStats,
}: {
loading: boolean
marketStats: PerpStatsItem[]
}) => {
const { t } = useTranslation('common')
const [daysToShow, setDaysToShow] = useState('30')
const groupByHourlyInterval = (
data: PerpStatsItem[],
intervalDurationHours: number
) => {
const intervalMillis = intervalDurationHours * 60 * 60 * 1000
const groupedData = []
let currentGroup: GroupedDataItem | null = null
for (let i = 0; i < data.length; i++) {
const obj = data[i]
const date = new Date(obj.date_hour)
const intervalStartMillis =
Math.floor(date.getTime() / intervalMillis) * intervalMillis
if (
!currentGroup ||
currentGroup.intervalStartMillis !== intervalStartMillis
) {
currentGroup = {
...obj,
numHours: 1,
intervalStartMillis: intervalStartMillis,
}
currentGroup.funding_rate_hourly = obj.funding_rate_hourly * 100
groupedData.push(currentGroup)
} else {
currentGroup.funding_rate_hourly += obj.funding_rate_hourly * 100
currentGroup.numHours++
}
}
for (let i = 0; i < groupedData.length; i++) {
const group = groupedData[i]
const avgFunding = group.funding_rate_hourly / group.numHours
group.funding_rate_hourly = avgFunding
}
return groupedData
}
const chartData = useMemo(() => {
if (!marketStats) return []
const interval = daysToShow === '30' ? 24 : daysToShow === '7' ? 6 : 1
const groupedData = groupByHourlyInterval(marketStats, interval)
return groupedData
}, [daysToShow, marketStats])
return (
<DetailedAreaOrBarChart
data={chartData}
daysToShow={daysToShow}
setDaysToShow={setDaysToShow}
heightClass="h-64"
loading={loading}
loaderHeightClass="h-[350px]"
suffix="%"
tickFormat={(x) => formatNumericValue(x, 4)}
title={t('trade:average-funding')}
xKey="date_hour"
yKey="funding_rate_hourly"
yDecimals={5}
chartType="bar"
/>
)
}
export default AverageFundingChart

6
components/stats/MangoPerpStatsCharts.tsx
View File

@ -2,7 +2,7 @@ import { useTranslation } from 'next-i18next'
import { useMemo, useState } from 'react'
import mangoStore from '@store/mangoStore'
import { PerpStatsItem } from 'types'
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
interface OiValueItem {
date: string
@ -73,7 +73,7 @@ const MangoPerpStatsCharts = () => {
<>
{totalFeeValues.length ? (
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:pl-6">
<DetailedAreaChart
<DetailedAreaOrBarChart
data={totalFeeValues}
daysToShow={feesDaysToShow}
setDaysToShow={setFeesDaysToShow}
@ -90,7 +90,7 @@ const MangoPerpStatsCharts = () => {
) : null}
{totalOpenInterestValues.length ? (
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r">
<DetailedAreaChart
<DetailedAreaOrBarChart
data={totalOpenInterestValues}
daysToShow={oiDaysToShow}
setDaysToShow={setOiDaysToShow}

136
components/stats/PerpMarketDetails.tsx
View File

@ -3,11 +3,14 @@ import dayjs from 'dayjs'
import { useTranslation } from 'next-i18next'
import { useMemo, useState } from 'react'
import { formatYAxis } from 'utils/formatting'
import { formatNumericValue } from 'utils/numbers'
import { usePerpFundingRate } from '@components/trade/PerpFundingRate'
// import { formatNumericValue } from 'utils/numbers'
// import { usePerpFundingRate } from '@components/trade/PerpFundingRate'
import { PerpStatsItem } from 'types'
import { PerpMarket } from '@blockworks-foundation/mango-v4'
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
import AverageFundingChart from './AverageFundingChart'
const CHART_WRAPPER_CLASSES = 'col-span-2 border-b border-th-bkg-3 py-4 px-6'
const PerpMarketDetails = ({
marketStats,
@ -20,76 +23,55 @@ const PerpMarketDetails = ({
const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
const [priceDaysToShow, setPriceDaysToShow] = useState('30')
const [oiDaysToShow, setOiDaysToShow] = useState('30')
const [hourlyFundingeDaysToShow, setHourlyFundingDaysToShow] = useState('30')
const [instantFundingDaysToShow, setInstantFundingDaysToShow] = useState('30')
const rate = usePerpFundingRate()
// const [hourlyFundingeDaysToShow, setHourlyFundingDaysToShow] = useState('30')
// const [instantFundingDaysToShow, setInstantFundingDaysToShow] = useState('30')
// const rate = usePerpFundingRate()
const lastStat = useMemo(() => {
if (!marketStats.length) return undefined
return marketStats[marketStats.length - 1]
}, [marketStats])
const fundingRate = useMemo(() => {
if (!lastStat) return 0
if (rate?.isSuccess) {
const marketRate = rate?.data?.find(
(r) => r.market_index === perpMarket?.perpMarketIndex
)
return marketRate?.funding_rate_hourly
}
return lastStat.instantaneous_funding_rate
}, [rate, lastStat])
// const fundingRate = useMemo(() => {
// if (!lastStat) return 0
// if (rate?.isSuccess) {
// const marketRate = rate?.data?.find(
// (r) => r.market_index === perpMarket?.perpMarketIndex
// )
// return marketRate?.funding_rate_hourly
// }
// return lastStat.instantaneous_funding_rate
// }, [rate, lastStat])
const perpHourlyStats = useMemo(() => {
const latestStat = { ...lastStat } as PerpStatsItem
latestStat.instantaneous_funding_rate = fundingRate ? fundingRate : 0
latestStat.date_hour = dayjs().toISOString()
if (marketStats) {
const perpHourly = marketStats.concat([latestStat])
return perpHourly.map((stat) => ({
...stat,
funding_rate_hourly: stat.funding_rate_hourly * 100,
}))
}
}, [marketStats, fundingRate])
// const perpHourlyStats = useMemo(() => {
// const latestStat = { ...lastStat } as PerpStatsItem
// latestStat.instantaneous_funding_rate = fundingRate ? fundingRate : 0
// latestStat.date_hour = dayjs().toISOString()
// if (marketStats) {
// const perpHourly = marketStats.concat([latestStat])
// return perpHourly.map((stat) => ({
// ...stat,
// funding_rate_hourly: stat.funding_rate_hourly * 100,
// }))
// }
// }, [marketStats, fundingRate])
const instantFundingRateStats = useMemo(() => {
if (marketStats) {
return marketStats.map((stat) => ({
...stat,
instantaneous_funding_rate: stat.instantaneous_funding_rate * 100,
}))
}
return []
}, [marketStats])
// const instantFundingRateStats = useMemo(() => {
// if (marketStats) {
// return marketStats.map((stat) => ({
// ...stat,
// instantaneous_funding_rate: stat.instantaneous_funding_rate * 100,
// }))
// }
// return []
// }, [marketStats])
return (
<div className="grid grid-cols-2">
{marketStats?.length && lastStat ? (
<>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
<DetailedAreaChart
data={marketStats.concat([
{
...lastStat,
date_hour: dayjs().toISOString(),
price: perpMarket?._uiPrice || lastStat.price,
},
])}
daysToShow={priceDaysToShow}
setDaysToShow={setPriceDaysToShow}
heightClass="h-64"
loading={loadingPerpStats}
loaderHeightClass="h-[350px]"
prefix="$"
tickFormat={(x) => formatYAxis(x)}
title={t('price')}
xKey="date_hour"
yKey={'price'}
/>
</div>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
<DetailedAreaChart
<div className={CHART_WRAPPER_CLASSES}>
<DetailedAreaOrBarChart
data={marketStats.concat([
{
...lastStat,
@ -110,8 +92,9 @@ const PerpMarketDetails = ({
yKey={'open_interest'}
/>
</div>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
<DetailedAreaChart
{/* old funding charts */}
{/* <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
<DetailedAreaOrBarChart
data={perpHourlyStats ? perpHourlyStats : []}
daysToShow={hourlyFundingeDaysToShow}
setDaysToShow={setHourlyFundingDaysToShow}
@ -128,7 +111,7 @@ const PerpMarketDetails = ({
/>
</div>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
<DetailedAreaChart
<DetailedAreaOrBarChart
data={instantFundingRateStats}
daysToShow={instantFundingDaysToShow}
setDaysToShow={setInstantFundingDaysToShow}
@ -143,6 +126,33 @@ const PerpMarketDetails = ({
yDecimals={5}
showZeroLine
/>
</div> */}
<div className={CHART_WRAPPER_CLASSES}>
<AverageFundingChart
loading={loadingPerpStats}
marketStats={marketStats}
/>
</div>
<div className={CHART_WRAPPER_CLASSES}>
<DetailedAreaOrBarChart
data={marketStats.concat([
{
...lastStat,
date_hour: dayjs().toISOString(),
price: perpMarket?._uiPrice || lastStat.price,
},
])}
daysToShow={priceDaysToShow}
setDaysToShow={setPriceDaysToShow}
heightClass="h-64"
loading={loadingPerpStats}
loaderHeightClass="h-[350px]"
prefix="$"
tickFormat={(x) => formatYAxis(x)}
title={t('price')}
xKey="date_hour"
yKey={'price'}
/>
</div>
</>
) : null}

8
components/stats/TokenStatsCharts.tsx
View File

@ -6,7 +6,7 @@ import { formatYAxis } from 'utils/formatting'
import useBanksWithBalances from 'hooks/useBanksWithBalances'
import useMangoGroup from 'hooks/useMangoGroup'
import { toUiDecimals } from '@blockworks-foundation/mango-v4'
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
const TokenStatsCharts = () => {
const { t } = useTranslation(['common', 'token', 'trade'])
@ -49,7 +49,7 @@ const TokenStatsCharts = () => {
return (
<>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r">
<DetailedAreaChart
<DetailedAreaOrBarChart
data={mangoStats.concat([
{
date: dayjs().toISOString(),
@ -71,7 +71,7 @@ const TokenStatsCharts = () => {
/>
</div>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:pl-6">
<DetailedAreaChart
<DetailedAreaOrBarChart
data={mangoStats.concat([
{
date: dayjs().toISOString(),
@ -93,7 +93,7 @@ const TokenStatsCharts = () => {
/>
</div>
<div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r md:pl-6">
<DetailedAreaChart
<DetailedAreaOrBarChart
data={mangoStats.concat([
{
date: dayjs().toISOString(),

10
components/token/ChartTabs.tsx
View File

@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next'
import { useEffect, useMemo, useState } from 'react'
import { TokenStatsItem } from 'types'
import { formatYAxis } from 'utils/formatting'
import DetailedAreaChart from '@components/shared/DetailedAreaChart'
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
const ChartTabs = ({ bank }: { bank: Bank }) => {
const { t } = useTranslation('token')
@ -59,7 +59,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
/>
<div className="h-96 border-t border-th-bkg-3 px-6 py-6">
{activeDepositsTab === 'token:deposits' ? (
<DetailedAreaChart
<DetailedAreaOrBarChart
data={statsHistory}
daysToShow={depositDaysToShow}
setDaysToShow={setDepositDaysToShow}
@ -74,7 +74,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
yKey={'total_deposits'}
/>
) : (
<DetailedAreaChart
<DetailedAreaOrBarChart
data={statsHistory}
daysToShow={depositRateDaysToShow}
setDaysToShow={setDepositRateDaysToShow}
@ -106,7 +106,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
/>
<div className="h-96 border-t border-th-bkg-3 px-6 py-6">
{activeBorrowsTab === 'token:borrows' ? (
<DetailedAreaChart
<DetailedAreaOrBarChart
data={statsHistory}
daysToShow={borrowDaysToShow}
setDaysToShow={setBorrowDaysToShow}
@ -121,7 +121,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
yKey={'total_borrows'}
/>
) : (
<DetailedAreaChart
<DetailedAreaOrBarChart
data={statsHistory}
daysToShow={borrowRateDaysToShow}
setDaysToShow={setBorrowRateDaysToShow}

2
components/token/PriceChart.tsx
View File

@ -1,4 +1,4 @@
import { formatDateAxis } from '@components/shared/DetailedAreaChart'
import { formatDateAxis } from '@components/shared/DetailedAreaOrBarChart'
import dayjs from 'dayjs'
import { BirdeyePriceResponse } from 'hooks/useBirdeyeMarketPrices'
import { useTheme } from 'next-themes'

2
public/locales/en/trade.json
View File

@ -1,6 +1,7 @@
{
"activate-volume-alert": "Activate Volume Alert",
"amount": "Amount",
"average-funding": "Average Funding",
"base": "Base",
"book": "Book",
"buys": "Buys",
@ -20,7 +21,6 @@
"grouping": "Grouping",
"hide-asks": "Hide Asks",
"hide-bids": "Hide Bids",
"hourly-funding": "Average Hourly Funding",
"in-orders": "In Orders",
"init-leverage": "Init Leverage",
"instantaneous-funding": "Instantaneous Funding Snapshot",

2
public/locales/es/trade.json
View File

@ -1,6 +1,7 @@
{
"activate-volume-alert": "Activate Volume Alert",
"amount": "Amount",
"average-funding": "Average Funding",
"base": "Base",
"book": "Book",
"buys": "Buys",
@ -20,7 +21,6 @@
"grouping": "Grouping",
"hide-asks": "Hide Asks",
"hide-bids": "Hide Bids",
"hourly-funding": "Average Hourly Funding",
"in-orders": "In Orders",
"init-leverage": "Init Leverage",
"instantaneous-funding": "Instantaneous Funding Snapshot",

2
public/locales/ru/trade.json
View File

@ -1,6 +1,7 @@
{
"activate-volume-alert": "Activate Volume Alert",
"amount": "Amount",
"average-funding": "Average Funding",
"base": "Base",
"book": "Book",
"buys": "Buys",
@ -20,7 +21,6 @@
"grouping": "Grouping",
"hide-asks": "Hide Asks",
"hide-bids": "Hide Bids",
"hourly-funding": "Average Hourly Funding",
"in-orders": "In Orders",
"init-leverage": "Init Leverage",
"instantaneous-funding": "Instantaneous Funding Snapshot",

2
public/locales/zh/trade.json
View File

@ -1,6 +1,7 @@
{
"activate-volume-alert": "开启交易量警报",
"amount": "数量",
"average-funding": "Average Funding",
"base": "基础",
"book": "挂单薄",
"buys": "买单",
@ -20,7 +21,6 @@
"grouping": "分组",
"hide-asks": "隐藏要价",
"hide-bids": "隐藏出价",
"hourly-funding": "1小时资金费",
"in-orders": "在挂单中",
"init-leverage": "初始杠杆",
"instantaneous-funding": "瞬时资金费率",

2
public/locales/zh_tw/trade.json
View File

@ -1,6 +1,7 @@
{
"activate-volume-alert": "開啟交易量警報",
"amount": "數量",
"average-funding": "Average Funding",
"base": "基礎",
"book": "掛單薄",
"buys": "買單",
@ -20,7 +21,6 @@
"grouping": "分組",
"hide-asks": "隱藏要價",
"hide-bids": "隱藏出價",
"hourly-funding": "1小時資金費",
"in-orders": "在掛單中",
"init-leverage": "初始槓桿",
"instantaneous-funding": "瞬時資金費率",