save mango stats chart settings
This commit is contained in:
parent
f54ee602d8
commit
b36e59e3f9
|
@ -1,16 +1,33 @@
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import { useState } from 'react'
|
||||
import { formatYAxis } from 'utils/formatting'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
import NetDepositsChart from './NetDepositsChart'
|
||||
import { useTokenStats } from 'hooks/useTokenStats'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { MANGO_STATS_CHART_SETTINGS_KEY } from 'utils/constants'
|
||||
import { DEFAULT_CHART_SETTINGS } from './MangoStats'
|
||||
|
||||
const DepositsAndBorrows = () => {
|
||||
const { t } = useTranslation(['common', 'token', 'trade'])
|
||||
|
||||
const [chartSettings, setChartSettings] = useLocalStorageState(
|
||||
MANGO_STATS_CHART_SETTINGS_KEY,
|
||||
DEFAULT_CHART_SETTINGS,
|
||||
)
|
||||
const { data: tokenStats, isLoading } = useTokenStats()
|
||||
const [borrowDaysToShow, setBorrowDaysToShow] = useState('30')
|
||||
const [depositDaysToShow, setDepositDaysToShow] = useState('30')
|
||||
|
||||
const handleDepositDaysToShow = (days: string) => {
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
depositValue: { ...chartSettings.depositValue, daysToShow: days },
|
||||
})
|
||||
}
|
||||
|
||||
const handleBorrowDaysToShow = (days: string) => {
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
borrowValue: { ...chartSettings.borrowValue, daysToShow: days },
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -18,8 +35,8 @@ const DepositsAndBorrows = () => {
|
|||
<DetailedAreaOrBarChart
|
||||
changeAsPercent
|
||||
data={tokenStats?.mangoStats}
|
||||
daysToShow={depositDaysToShow}
|
||||
setDaysToShow={setDepositDaysToShow}
|
||||
daysToShow={chartSettings.depositValue.daysToShow}
|
||||
setDaysToShow={handleDepositDaysToShow}
|
||||
loading={isLoading}
|
||||
heightClass="h-64"
|
||||
loaderHeightClass="h-[350px]"
|
||||
|
@ -34,8 +51,8 @@ const DepositsAndBorrows = () => {
|
|||
<DetailedAreaOrBarChart
|
||||
changeAsPercent
|
||||
data={tokenStats?.mangoStats}
|
||||
daysToShow={borrowDaysToShow}
|
||||
setDaysToShow={setBorrowDaysToShow}
|
||||
daysToShow={chartSettings.borrowValue.daysToShow}
|
||||
setDaysToShow={handleBorrowDaysToShow}
|
||||
heightClass="h-64"
|
||||
loaderHeightClass="h-[350px]"
|
||||
loading={isLoading}
|
||||
|
|
|
@ -2,12 +2,15 @@ import Switch from '@components/forms/Switch'
|
|||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import usePerpStatsChartData from 'hooks/usePerpStatsChartData'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { MangoTokenStatsItem } from 'types'
|
||||
import { formatYAxis } from 'utils/formatting'
|
||||
import { groupPerpByHourlyInterval } from './Volume'
|
||||
import { useTokenStats } from 'hooks/useTokenStats'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { MANGO_STATS_CHART_SETTINGS_KEY } from 'utils/constants'
|
||||
import { DEFAULT_CHART_SETTINGS } from './MangoStats'
|
||||
|
||||
interface GroupedTokenDataItem extends MangoTokenStatsItem {
|
||||
intervalStartMillis: number
|
||||
|
@ -46,15 +49,16 @@ const Fees = () => {
|
|||
const { data: tokenStats, isLoading } = useTokenStats()
|
||||
const mangoStats = tokenStats?.mangoStats
|
||||
const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
|
||||
const [feesDaysToShow, setFeesDaysToShow] = useState('30')
|
||||
const [showCumulativeFees, setShowCumulativeFees] = useState(true)
|
||||
const [feesPerpDaysToShow, setFeesPerpDaysToShow] = useState('30')
|
||||
const [showCumulativePerpFees, setShowCumulativePerpFees] = useState(true)
|
||||
const { feeValues: perpFeeChartData } = usePerpStatsChartData()
|
||||
const [chartSettings, setChartSettings] = useLocalStorageState(
|
||||
MANGO_STATS_CHART_SETTINGS_KEY,
|
||||
DEFAULT_CHART_SETTINGS,
|
||||
)
|
||||
|
||||
const tokenFeesChartData = useMemo(() => {
|
||||
if (!mangoStats?.length) return []
|
||||
if (showCumulativeFees) {
|
||||
const { daysToShow, showCumulative } = chartSettings.tokenFees
|
||||
if (showCumulative) {
|
||||
return mangoStats
|
||||
} else {
|
||||
const transformedData = []
|
||||
|
@ -70,19 +74,20 @@ const Fees = () => {
|
|||
}
|
||||
transformedData.unshift(mangoStats[0])
|
||||
|
||||
if (feesDaysToShow === '30') {
|
||||
if (daysToShow === '30') {
|
||||
return groupTokenByHourlyInterval(transformedData, 24)
|
||||
} else if (feesDaysToShow === '7') {
|
||||
} else if (daysToShow === '7') {
|
||||
return groupTokenByHourlyInterval(transformedData, 4)
|
||||
} else return transformedData
|
||||
}
|
||||
}, [mangoStats, feesDaysToShow, showCumulativeFees])
|
||||
}, [mangoStats, chartSettings])
|
||||
|
||||
const perpFeeValues = useMemo(() => {
|
||||
if (!perpFeeChartData || !perpFeeChartData.length) return []
|
||||
const { daysToShow, showCumulative } = chartSettings.perpFees
|
||||
|
||||
let feeChartData = perpFeeChartData
|
||||
if (!showCumulativePerpFees) {
|
||||
if (!showCumulative) {
|
||||
const transformedData = []
|
||||
for (let i = 1; i < perpFeeChartData.length; i++) {
|
||||
const currentInterval = { ...perpFeeChartData[i] }
|
||||
|
@ -95,15 +100,29 @@ const Fees = () => {
|
|||
}
|
||||
transformedData.unshift(perpFeeChartData[0])
|
||||
|
||||
if (feesPerpDaysToShow === '30') {
|
||||
if (daysToShow === '30') {
|
||||
feeChartData = groupPerpByHourlyInterval(transformedData, 24)
|
||||
} else if (feesPerpDaysToShow === '7') {
|
||||
} else if (daysToShow === '7') {
|
||||
feeChartData = groupPerpByHourlyInterval(transformedData, 4)
|
||||
} else feeChartData = transformedData
|
||||
}
|
||||
|
||||
return feeChartData
|
||||
}, [feesPerpDaysToShow, perpFeeChartData, showCumulativePerpFees])
|
||||
}, [chartSettings, perpFeeChartData])
|
||||
|
||||
const handleTokenFeesDaysToShow = (days: string) => {
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
tokenFees: { ...chartSettings.tokenFees, daysToShow: days },
|
||||
})
|
||||
}
|
||||
|
||||
const handlePerpFeesDaysToShow = (days: string) => {
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
perpFees: { ...chartSettings.perpFees, daysToShow: days },
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -112,8 +131,8 @@ const Fees = () => {
|
|||
<DetailedAreaOrBarChart
|
||||
changeAsPercent
|
||||
data={tokenFeesChartData}
|
||||
daysToShow={feesDaysToShow}
|
||||
setDaysToShow={setFeesDaysToShow}
|
||||
daysToShow={chartSettings.tokenFees.daysToShow}
|
||||
setDaysToShow={handleTokenFeesDaysToShow}
|
||||
heightClass="h-64"
|
||||
loaderHeightClass="h-[350px]"
|
||||
loading={isLoading}
|
||||
|
@ -123,13 +142,21 @@ const Fees = () => {
|
|||
tooltipContent={t('token:tooltip-token-fees-collected')}
|
||||
xKey="date"
|
||||
yKey={'feesCollected'}
|
||||
chartType={showCumulativeFees ? 'area' : 'bar'}
|
||||
chartType={chartSettings.tokenFees.showCumulative ? 'area' : 'bar'}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end px-4 pb-4 md:px-6">
|
||||
<Switch
|
||||
checked={showCumulativeFees}
|
||||
onChange={() => setShowCumulativeFees(!showCumulativeFees)}
|
||||
checked={chartSettings.tokenFees.showCumulative}
|
||||
onChange={() =>
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
tokenFees: {
|
||||
...chartSettings.tokenFees,
|
||||
showCumulative: !chartSettings.tokenFees.showCumulative,
|
||||
},
|
||||
})
|
||||
}
|
||||
small
|
||||
>
|
||||
{t('stats:show-cumulative')}
|
||||
|
@ -141,8 +168,8 @@ const Fees = () => {
|
|||
<DetailedAreaOrBarChart
|
||||
changeAsPercent
|
||||
data={perpFeeValues}
|
||||
daysToShow={feesPerpDaysToShow}
|
||||
setDaysToShow={setFeesPerpDaysToShow}
|
||||
daysToShow={chartSettings.perpFees.daysToShow}
|
||||
setDaysToShow={handlePerpFeesDaysToShow}
|
||||
heightClass="h-64"
|
||||
loading={loadingPerpStats}
|
||||
loaderHeightClass="h-[350px]"
|
||||
|
@ -151,13 +178,21 @@ const Fees = () => {
|
|||
title="Perp Fees"
|
||||
xKey="date"
|
||||
yKey="value"
|
||||
chartType={showCumulativePerpFees ? 'area' : 'bar'}
|
||||
chartType={chartSettings.perpFees.showCumulative ? 'area' : 'bar'}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end px-4 pb-4 md:px-6">
|
||||
<Switch
|
||||
checked={showCumulativePerpFees}
|
||||
onChange={() => setShowCumulativePerpFees(!showCumulativePerpFees)}
|
||||
checked={chartSettings.perpFees.showCumulative}
|
||||
onChange={() =>
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
perpFees: {
|
||||
...chartSettings.perpFees,
|
||||
showCumulative: !chartSettings.perpFees.showCumulative,
|
||||
},
|
||||
})
|
||||
}
|
||||
small
|
||||
>
|
||||
{t('stats:show-cumulative')}
|
||||
|
|
|
@ -4,6 +4,32 @@ import Fees from './Fees'
|
|||
import Volume from './Volume'
|
||||
import OpenInterest from './OpenInterest'
|
||||
|
||||
interface DaysToShowSetting {
|
||||
daysToShow: string
|
||||
}
|
||||
|
||||
interface CumulativeSetting extends DaysToShowSetting {
|
||||
showCumulative?: boolean
|
||||
}
|
||||
|
||||
export interface ChartSettings {
|
||||
depositValue: DaysToShowSetting
|
||||
borrowValue: DaysToShowSetting
|
||||
tokenFees: CumulativeSetting
|
||||
perpFees: CumulativeSetting
|
||||
perpVolume: CumulativeSetting
|
||||
openInterest: DaysToShowSetting
|
||||
}
|
||||
|
||||
export const DEFAULT_CHART_SETTINGS: ChartSettings = {
|
||||
depositValue: { daysToShow: '30' },
|
||||
borrowValue: { daysToShow: '30' },
|
||||
tokenFees: { daysToShow: '30', showCumulative: true },
|
||||
perpFees: { daysToShow: '30', showCumulative: true },
|
||||
perpVolume: { daysToShow: '30', showCumulative: true },
|
||||
openInterest: { daysToShow: '30' },
|
||||
}
|
||||
|
||||
const MangoStats = () => {
|
||||
return (
|
||||
<div className="grid grid-cols-2">
|
||||
|
|
|
@ -1,24 +1,37 @@
|
|||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import usePerpStatsChartData from 'hooks/usePerpStatsChartData'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { MANGO_STATS_CHART_SETTINGS_KEY } from 'utils/constants'
|
||||
import { formatYAxis } from 'utils/formatting'
|
||||
import { DEFAULT_CHART_SETTINGS } from './MangoStats'
|
||||
|
||||
const OpenInterest = () => {
|
||||
const { t } = useTranslation(['common', 'token', 'trade'])
|
||||
const [oiDaysToShow, setOiDaysToShow] = useState('30')
|
||||
const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
|
||||
const { openInterestValues } = usePerpStatsChartData()
|
||||
const [chartSettings, setChartSettings] = useLocalStorageState(
|
||||
MANGO_STATS_CHART_SETTINGS_KEY,
|
||||
DEFAULT_CHART_SETTINGS,
|
||||
)
|
||||
const { daysToShow } = chartSettings.openInterest
|
||||
|
||||
const handleDaysToShow = (days: string) => {
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
openInterest: { ...chartSettings.openInterest, daysToShow: days },
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="col-span-2 border-b border-th-bkg-3 px-4 py-4 md:col-span-1 md:px-6 lg:py-6">
|
||||
<div className="col-span-2 border-b border-th-bkg-3 p-4 md:col-span-1 md:px-6 lg:py-6">
|
||||
<DetailedAreaOrBarChart
|
||||
changeAsPercent
|
||||
data={openInterestValues}
|
||||
daysToShow={oiDaysToShow}
|
||||
setDaysToShow={setOiDaysToShow}
|
||||
daysToShow={daysToShow}
|
||||
setDaysToShow={handleDaysToShow}
|
||||
heightClass="h-64"
|
||||
loading={loadingPerpStats}
|
||||
loaderHeightClass="h-[350px]"
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
import { useTranslation } from 'next-i18next'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
|
||||
import { formatYAxis } from 'utils/formatting'
|
||||
import Switch from '@components/forms/Switch'
|
||||
import usePerpStatsChartData from 'hooks/usePerpStatsChartData'
|
||||
import useLocalStorageState from 'hooks/useLocalStorageState'
|
||||
import { MANGO_STATS_CHART_SETTINGS_KEY } from 'utils/constants'
|
||||
import { DEFAULT_CHART_SETTINGS } from './MangoStats'
|
||||
|
||||
export interface PerpValueItem {
|
||||
date: string
|
||||
|
@ -46,15 +49,18 @@ export const groupPerpByHourlyInterval = (
|
|||
const Volume = () => {
|
||||
const { t } = useTranslation(['common', 'stats', 'token', 'trade'])
|
||||
const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
|
||||
const [perpVolumeDaysToShow, setPerpPerpVolumeDaysToShow] = useState('30')
|
||||
const [showCumulativePerpVolume, setShowCumulativePerpVolume] = useState(true)
|
||||
const { volumeValues: perpVolumeChartData } = usePerpStatsChartData()
|
||||
const [chartSettings, setChartSettings] = useLocalStorageState(
|
||||
MANGO_STATS_CHART_SETTINGS_KEY,
|
||||
DEFAULT_CHART_SETTINGS,
|
||||
)
|
||||
const { daysToShow, showCumulative } = chartSettings.perpVolume
|
||||
|
||||
const perpVolumeValues = useMemo(() => {
|
||||
if (!perpVolumeChartData || !perpVolumeChartData.length) return []
|
||||
|
||||
let volumeChartData = perpVolumeChartData
|
||||
if (!showCumulativePerpVolume) {
|
||||
if (!showCumulative) {
|
||||
const transformedData = []
|
||||
for (let i = 1; i < perpVolumeChartData.length; i++) {
|
||||
const currentInterval = { ...perpVolumeChartData[i] }
|
||||
|
@ -67,15 +73,22 @@ const Volume = () => {
|
|||
}
|
||||
transformedData.unshift(perpVolumeChartData[0])
|
||||
|
||||
if (perpVolumeDaysToShow === '30') {
|
||||
if (daysToShow === '30') {
|
||||
volumeChartData = groupPerpByHourlyInterval(transformedData, 24)
|
||||
} else if (perpVolumeDaysToShow === '7') {
|
||||
} else if (daysToShow === '7') {
|
||||
volumeChartData = groupPerpByHourlyInterval(transformedData, 4)
|
||||
} else volumeChartData = transformedData
|
||||
}
|
||||
|
||||
return volumeChartData
|
||||
}, [perpVolumeDaysToShow, perpVolumeChartData, showCumulativePerpVolume])
|
||||
}, [daysToShow, perpVolumeChartData, showCumulative])
|
||||
|
||||
const handleDaysToShow = (days: string) => {
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
perpVolume: { ...chartSettings.perpVolume, daysToShow: days },
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -84,8 +97,8 @@ const Volume = () => {
|
|||
<DetailedAreaOrBarChart
|
||||
changeAsPercent
|
||||
data={perpVolumeValues}
|
||||
daysToShow={perpVolumeDaysToShow}
|
||||
setDaysToShow={setPerpPerpVolumeDaysToShow}
|
||||
daysToShow={daysToShow}
|
||||
setDaysToShow={handleDaysToShow}
|
||||
heightClass="h-64"
|
||||
loading={loadingPerpStats}
|
||||
loaderHeightClass="h-[350px]"
|
||||
|
@ -94,14 +107,20 @@ const Volume = () => {
|
|||
title={t('stats:perp-volume')}
|
||||
xKey="date"
|
||||
yKey="value"
|
||||
chartType={showCumulativePerpVolume ? 'area' : 'bar'}
|
||||
chartType={showCumulative ? 'area' : 'bar'}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end px-4 pb-4 md:px-6">
|
||||
<Switch
|
||||
checked={showCumulativePerpVolume}
|
||||
checked={showCumulative}
|
||||
onChange={() =>
|
||||
setShowCumulativePerpVolume(!showCumulativePerpVolume)
|
||||
setChartSettings({
|
||||
...chartSettings,
|
||||
perpVolume: {
|
||||
...chartSettings.perpVolume,
|
||||
showCumulative: !chartSettings.perpVolume.showCumulative,
|
||||
},
|
||||
})
|
||||
}
|
||||
small
|
||||
>
|
||||
|
|
|
@ -92,6 +92,8 @@ export const SHOW_ANNOUNCEMENTS_KEY = 'showAnnouncements-0.1'
|
|||
|
||||
export const TOKEN_WATCHLIST_KEY = 'watchlist-0.1'
|
||||
|
||||
export const MANGO_STATS_CHART_SETTINGS_KEY = 'mangoStatsCharts-0.1'
|
||||
|
||||
// Unused
|
||||
export const PROFILE_CATEGORIES = [
|
||||
'borrower',
|
||||
|
|
Loading…
Reference in New Issue