From b36e59e3f981ef79031b8de9f270fdc3f18232c3 Mon Sep 17 00:00:00 2001 From: saml33 Date: Thu, 13 Jun 2024 14:45:44 +1000 Subject: [PATCH] save mango stats chart settings --- components/stats/mango/DepositsAndBorrows.tsx | 33 ++++++-- components/stats/mango/Fees.tsx | 81 +++++++++++++------ components/stats/mango/MangoStats.tsx | 26 ++++++ components/stats/mango/OpenInterest.tsx | 23 ++++-- components/stats/mango/Volume.tsx | 43 +++++++--- utils/constants.ts | 2 + 6 files changed, 160 insertions(+), 48 deletions(-) diff --git a/components/stats/mango/DepositsAndBorrows.tsx b/components/stats/mango/DepositsAndBorrows.tsx index f7e773e1..a1f2053b 100644 --- a/components/stats/mango/DepositsAndBorrows.tsx +++ b/components/stats/mango/DepositsAndBorrows.tsx @@ -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 = () => { { { 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 = () => { { tooltipContent={t('token:tooltip-token-fees-collected')} xKey="date" yKey={'feesCollected'} - chartType={showCumulativeFees ? 'area' : 'bar'} + chartType={chartSettings.tokenFees.showCumulative ? 'area' : 'bar'} />
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 = () => { { title="Perp Fees" xKey="date" yKey="value" - chartType={showCumulativePerpFees ? 'area' : 'bar'} + chartType={chartSettings.perpFees.showCumulative ? 'area' : 'bar'} />
setShowCumulativePerpFees(!showCumulativePerpFees)} + checked={chartSettings.perpFees.showCumulative} + onChange={() => + setChartSettings({ + ...chartSettings, + perpFees: { + ...chartSettings.perpFees, + showCumulative: !chartSettings.perpFees.showCumulative, + }, + }) + } small > {t('stats:show-cumulative')} diff --git a/components/stats/mango/MangoStats.tsx b/components/stats/mango/MangoStats.tsx index e65ad9c3..ba69abb8 100644 --- a/components/stats/mango/MangoStats.tsx +++ b/components/stats/mango/MangoStats.tsx @@ -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 (
diff --git a/components/stats/mango/OpenInterest.tsx b/components/stats/mango/OpenInterest.tsx index 57dff73e..3102c669 100644 --- a/components/stats/mango/OpenInterest.tsx +++ b/components/stats/mango/OpenInterest.tsx @@ -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 ( <> -
+
{ 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 = () => { { title={t('stats:perp-volume')} xKey="date" yKey="value" - chartType={showCumulativePerpVolume ? 'area' : 'bar'} + chartType={showCumulative ? 'area' : 'bar'} />
- setShowCumulativePerpVolume(!showCumulativePerpVolume) + setChartSettings({ + ...chartSettings, + perpVolume: { + ...chartSettings.perpVolume, + showCumulative: !chartSettings.perpVolume.showCumulative, + }, + }) } small > diff --git a/utils/constants.ts b/utils/constants.ts index 4aa48279..f6e84ffa 100644 --- a/utils/constants.ts +++ b/utils/constants.ts @@ -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',