Stats updates

README.md

@@ -1,4 +1,4 @@
-# Mars Protocol Rsik Dashboard
+# Mars Protocol Risk Dashboard
 
 ![https://risk.marsprotocol.io](https://raw.githubusercontent.com/mars-protocol/mars-rd-fe/main/public/banner.png)
 

src/api/perps/getPerpsGlobalStats.ts

@@ -1,16 +1,22 @@
 import chains from 'chains'
 import { DEFAULT_PERPS_GLOBAL_DATA } from 'constants/chartData'
+import { TIMEFRAME } from 'constants/timeframe'
 import { getApiBaseUrl } from 'utils/api'
 import { getCurrentChainId } from 'utils/getCurrentChainId'
 
-export default async function getPerpsGlobalStats(timeframe: string = '7') {
+export default async function getPerpsGlobalStats(timeframe: string = '30') {
   const chainId = getCurrentChainId()
   const chainConfig = chains[chainId]
   if (!chainConfig.perps) return
   try {
     const baseUrl = getApiBaseUrl()
+    const timeframeConfig = TIMEFRAME.find((t) => t.value === timeframe) || {
+      granularity: 'day',
+      value: Number(timeframe),
+    }
+
     const url = new URL(
-      `${baseUrl}/v2/perps_overview?chain=neutron&days=${timeframe}&product=creditmanager&response_type=global`,
+      `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.value}&response_type=global`,
     )
     const response = await fetch(url.toString())
     const data = (await response.json()) as PerpsGlobalOverview

src/api/perps/getPerpsMarketStats.ts

@@ -1,13 +1,18 @@
+import { TIMEFRAME } from 'constants/timeframe'
 import { getApiBaseUrl } from 'utils/api'
 
 export default async function getPerpsMarketStats(
   market: string = 'untrn',
-  timeframe: string = '7',
+  timeframe: string = '30',
 ) {
   try {
     const baseUrl = getApiBaseUrl()
+    const timeframeConfig = TIMEFRAME.find((t) => t.value === timeframe) || {
+      granularity: 'day',
+      value: Number(timeframe),
+    }
     const url = new URL(
-      `${baseUrl}/v2/perps_overview?chain=neutron&days=${timeframe}&product=creditmanager&response_type=market&market=${market}`,
+      `${baseUrl}/v2/perps_overview?chain=neutron&granularity=${timeframeConfig.granularity}&unit=${timeframeConfig.value}&market=${market}&response_type=market`,
     )
     const response = await fetch(url.toString())
     const data = (await response.json()) as PerpsMarketOverview

src/components/common/Chart/SynchronizedChart/SynchronizedChartBody.tsx

@@ -99,7 +99,7 @@ export default function SynchronizedChartBody(props: Props) {
   }
 
   return (
-    <div className={`-ml-4 w-full h-[560px]`}>
+    <div className='-ml-4 w-full h-140'>
       <ResponsiveContainer width='100%' height='50%'>
         <ComposedChart
           data={reversedData}

src/components/main/Liquidations/LiquidationsMetrics.tsx

@@ -69,7 +69,7 @@ export default function LiquidationsMetrics() {
     <MetricsCard
       hideBackground={false}
       background={
-        <div className='absolute right-0 top-0 md:w-180'>
+        <div className='absolute right-0 top-0 w-90 sm:w-160 md:w-180'>
           <GridPlanet />
         </div>
       }

src/components/main/overview/OverviewCharts.tsx

@@ -13,7 +13,7 @@ import { useOverviewChartData } from 'hooks/tokenomics/useOverviewChartData'
 import { useState } from 'react'
 
 export default function OverviewCharts() {
-  const [selectedTimeframe, setSelectedTimeframe] = useState<string>(TIMEFRAME[1].value)
+  const [selectedTimeframe, setSelectedTimeframe] = useState<string>(TIMEFRAME[2].value)
 
   const {
     data: overviewData,

src/components/main/overview/StatsMetrics.tsx

@@ -52,7 +52,7 @@ export default function StatsMetrics() {
     <MetricsCard
       hideBackground={false}
       background={
-        <div className='absolute right-0 top-0 md:w-180 transform scale-y-[-1]'>
+        <div className='absolute right-0 top-0 w-90 sm:w-160 md:w-180 transform scale-y-[-1]'>
           <GridGlobe />
         </div>
       }

src/components/main/perps/PerpsMetrics.tsx

@@ -1,21 +1,16 @@
 import MetricsCard from 'components/common/Card/MetricsCard'
+import usePerpsStats from 'hooks/perps/usePerpsGlobalStats'
+import { BN } from 'utils/helpers'
 import { GridLandscape } from 'components/common/Icons'
 import { BN_ZERO } from 'constants/math'
 import { PRICE_ORACLE_DECIMALS } from 'constants/query'
-import usePerpsStats from 'hooks/perps/usePerpsGlobalStats'
-import { BN } from 'utils/helpers'
 
 export default function PerpsMetrics() {
   const { data: perpsStats, isLoading: perpsStatsLoading } = usePerpsStats('total', '90')
 
-  const totalTradingVolume = perpsStats?.daily_trading_volume.reduce(
-    (acc, day) => acc.plus(BN(day.value || 0)),
-    BN_ZERO,
-  )
-
   const perpsMetrics: Metric[] = [
     {
-      value: totalTradingVolume?.shiftedBy(-PRICE_ORACLE_DECIMALS) || BN(0),
+      value: BN(perpsStats?.cumulative_trading_volume || 0).shiftedBy(-PRICE_ORACLE_DECIMALS),
       label: 'Total Trading Volume',
       isCurrency: true,
       formatOptions: {
@@ -51,7 +46,9 @@ export default function PerpsMetrics() {
       showSignPrefix: true,
     },
     {
-      value: BN(perpsStats?.fees.trading_fee[0]?.value || 0).shiftedBy(-PRICE_ORACLE_DECIMALS),
+      value: BN(perpsStats?.fees?.realized_trading_fee?.[0]?.value || 0).shiftedBy(
+        -PRICE_ORACLE_DECIMALS,
+      ),
       label: 'Total Trading Fees',
       isCurrency: true,
       formatOptions: {
@@ -66,7 +63,7 @@ export default function PerpsMetrics() {
     <MetricsCard
       hideBackground={false}
       background={
-        <div className='absolute bottom-0 right-0 md:w-190'>
+        <div className='absolute right-0 bottom-0 w-90 sm:w-160 md:w-190'>
           <GridLandscape />
         </div>
       }

src/components/main/perps/perpsMarketStats/StatisticsPanel.tsx

@@ -40,7 +40,7 @@ export default function StatisticsPanel(props: Props) {
 
   const metrics: Metric[] = [
     {
-      value: getLatestValue(data.daily_trading_volume),
+      value: getLatestValue(data.trading_volume),
       label: 'Daily Trading Volume',
       isCurrency: true,
       formatOptions: { maxDecimals: 2, minDecimals: 2, abbreviated: true },
@@ -56,7 +56,7 @@ export default function StatisticsPanel(props: Props) {
       },
     },
     {
-      value: getLatestValue(data.fees.trading_fee || []),
+      value: getLatestValue(data.fees.realized_trading_fee || []),
       label: 'Trading Fees',
       isCurrency: true,
       formatOptions: { abbreviated: true },

src/components/main/perps/perpsMarketStats/index.tsx

@@ -35,11 +35,12 @@ export default function PerpsMarketStats(props: Props) {
     openInterestData,
     fundingRateData,
     pnlData,
+    realizedPnlBreakdown,
     feesData,
     skewData,
     imbalanceRatioData,
     notionalLiquidatedData,
-    dailyTradingVolumeData,
+    tradingVolumeData,
     vaultData,
     combinedMetricsData,
   } = usePerpsChartData(perpsStats || DEFAULT_PERPS_GLOBAL_DATA)
@@ -93,6 +94,33 @@ export default function PerpsMarketStats(props: Props) {
     })
   }, [pnlData])
 
+  const netFundingFeesData = useMemo(() => {
+    return feesData.map((item) => {
+      const netFundingFees = BN(item.realized_net_funding_fees)
+        .plus(BN(item.unrealized_net_funding_fees))
+        .toNumber()
+
+      return {
+        ...item,
+        netTotal: netFundingFees,
+      }
+    })
+  }, [feesData])
+
+  const realizedPnlBreakdownData = useMemo(() => {
+    return realizedPnlBreakdown.map((item) => {
+      const total = BN(item.realized_net_funding_fees)
+        .plus(BN(item.realized_trading_fees))
+        .plus(BN(item.realized_price_pnl))
+        .toNumber()
+
+      return {
+        ...item,
+        total,
+      }
+    })
+  }, [realizedPnlBreakdown])
+
   if (perpsStatsLoading)
     return (
       <div className='h-100 w-full flex items-center justify-center'>
@@ -113,18 +141,18 @@ export default function PerpsMarketStats(props: Props) {
       <div className='flex flex-col md:flex-row gap-4'>
         <div className='w-full md:w-1/2'>
           <DynamicLineChart
-            data={dailyTradingVolumeData}
+            data={tradingVolumeData}
             lines={PERPS_CHART_CONFIGS.tradingVolume}
             height='h-80'
-            title='Daily Trading Volume'
+            title='Trading Volume'
           />
         </div>
         <div className='w-full md:w-1/2'>
           <DynamicLineChart
             data={feesData}
             lines={PERPS_CHART_CONFIGS.tradingFees}
             height='h-80'
-            title='Cumulative Realized Trading and Net Funding Fees'
+            title='Cumulative Realized Trading and Funding Fees'
           />
         </div>
       </div>
@@ -186,7 +214,6 @@ export default function PerpsMarketStats(props: Props) {
           <ComposedChart
             data={openInterestData}
             title={isGlobalStats ? 'Open Interest' : 'Open Interest and Max Open Interest'}
-            loading={perpsStatsLoading}
             config={
               isGlobalStats
                 ? PERPS_CHART_CONFIGS.openInterestGlobal
@@ -204,11 +231,29 @@ export default function PerpsMarketStats(props: Props) {
         config={PERPS_CHART_CONFIGS.pnl}
       />
 
+      <div className='flex flex-col md:flex-row gap-4'>
+        <div className='w-full md:w-1/2'>
+          <DynamicLineChart
+            data={totalPnlData}
+            lines={PERPS_CHART_CONFIGS.totalPnl}
+            height='h-80'
+            title='Cumulative Total PnL'
+          />
+        </div>
+        <div className='w-full md:w-1/2'>
+          <DynamicLineChart
+            data={netFundingFeesData}
+            lines={PERPS_CHART_CONFIGS.netFundingFees}
+            height='h-80'
+            title='Cumulative Net Funding Fees'
+          />
+        </div>
+      </div>
       <DynamicLineChart
-        data={totalPnlData}
-        lines={PERPS_CHART_CONFIGS.totalPnl}
+        data={realizedPnlBreakdownData}
+        lines={PERPS_CHART_CONFIGS.realizedPnlBreakdown}
         height='h-80'
-        title='Cumulative Total PnL'
+        title='Cumulative Realized Pnl Breakdown'
       />
 
       {!isGlobalStats && (