show interest rate charts as a bar chart

2023-07-26 16:21:23 +10:00 · 2023-07-26 16:21:23 +10:00 · 4eefede386
parent 256714b6b4
commit 4eefede386
9 changed files with 163 additions and 56 deletions
--- a/components/shared/DetailedAreaOrBarChart.tsx
+++ b/components/shared/DetailedAreaOrBarChart.tsx
@ -163,7 +163,7 @@ const DetailedAreaOrBarChart: FunctionComponent<
        ) : filteredData.length ? (
          <div className="relative">
            {setDaysToShow ? (
-              <div className="mb-4 sm:absolute sm:-top-1 sm:right-0 sm:mb-0 sm:-mb-2 sm:flex sm:justify-end">
+              <div className="mb-4 sm:absolute sm:-top-1 sm:right-0 sm:mb-0 sm:flex sm:justify-end">
                <ChartRangeButtons
                  activeValue={daysToShow}
                  names={['24H', '7D', '30D']}
--- a/components/stats/AverageFundingChart.tsx
+++ b/components/stats/AverageFundingChart.tsx
@ -8,6 +8,35 @@ interface GroupedDataItem extends PerpStatsItem {
  intervalStartMillis: number
 }

+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,
+        intervalStartMillis: intervalStartMillis,
+      }
+      currentGroup.funding_rate_hourly = obj.funding_rate_hourly * 100
+      groupedData.push(currentGroup)
+    } else {
+      currentGroup.funding_rate_hourly += obj.funding_rate_hourly * 100
+    }
+  }
+  return groupedData
+}
+
 const AverageFundingChart = ({
  loading,
  marketStats,
@ -18,35 +47,6 @@ const AverageFundingChart = ({
  const { t } = useTranslation(['common', 'stats', 'trade'])
  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,
-          intervalStartMillis: intervalStartMillis,
-        }
-        currentGroup.funding_rate_hourly = obj.funding_rate_hourly * 100
-        groupedData.push(currentGroup)
-      } else {
-        currentGroup.funding_rate_hourly += obj.funding_rate_hourly * 100
-      }
-    }
-    return groupedData
-  }
-
  const [interval, intervalString] = useMemo(() => {
    if (daysToShow === '30') {
      return [24, 'stats:daily']
--- a/components/token/ChartTabs.tsx
+++ b/components/token/ChartTabs.tsx
@ -7,6 +7,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { TokenStatsItem } from 'types'
 import { formatYAxis } from 'utils/formatting'
 import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
+import TokenRatesChart from './TokenRatesChart'

 const ChartTabs = ({ bank }: { bank: Bank }) => {
  const { t } = useTranslation('token')
@ -33,8 +34,6 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
    return tokenStats.reduce((a: TokenStatsItem[], c: TokenStatsItem) => {
      if (c.token_index === bank.tokenIndex) {
        const copy = { ...c }
-        copy.deposit_apr = copy.deposit_apr * 100
-        copy.borrow_apr = copy.borrow_apr * 100
        a.push(copy)
      }
      return a.sort(
@ -69,25 +68,18 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
                loading={loadingTokenStats}
                small
                tickFormat={(x) => formatYAxis(x)}
-                title={`${bank?.name} ${t('token:deposits')}`}
+                title={`${t('token:deposits')}`}
                xKey="date_hour"
                yKey={'total_deposits'}
              />
            ) : (
-              <DetailedAreaOrBarChart
+              <TokenRatesChart
                data={statsHistory}
+                dataKey="deposit_apr"
                daysToShow={depositRateDaysToShow}
-                setDaysToShow={setDepositRateDaysToShow}
-                heightClass="h-64"
-                loaderHeightClass="h-[334px]"
                loading={loadingTokenStats}
-                hideChange
-                small
-                suffix="%"
-                tickFormat={(x) => `${x.toFixed(2)}%`}
-                title={`${bank?.name} ${t('token:deposit-rates')} APR`}
-                xKey="date_hour"
-                yKey={'deposit_apr'}
+                setDaysToShow={setDepositRateDaysToShow}
+                title={`${t('token:average-deposit-rate')} (APR)`}
              />
            )}
          </div>
@ -116,25 +108,18 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
                loading={loadingTokenStats}
                small
                tickFormat={(x) => formatYAxis(x)}
-                title={`${bank?.name} ${t('token:borrows')}`}
+                title={`${t('token:borrows')}`}
                xKey="date_hour"
                yKey={'total_borrows'}
              />
            ) : (
-              <DetailedAreaOrBarChart
+              <TokenRatesChart
                data={statsHistory}
+                dataKey="borrow_apr"
                daysToShow={borrowRateDaysToShow}
-                setDaysToShow={setBorrowRateDaysToShow}
-                heightClass="h-64"
-                loaderHeightClass="h-[334px]"
                loading={loadingTokenStats}
-                small
-                hideChange
-                suffix="%"
-                tickFormat={(x) => `${x.toFixed(2)}%`}
-                title={`${bank?.name} ${t('token:borrow-rates')} APR`}
-                xKey="date_hour"
-                yKey={'borrow_apr'}
+                setDaysToShow={setBorrowRateDaysToShow}
+                title={`${t('token:average-borrow-rate')} (APR)`}
              />
            )}
          </div>
--- a/components/token/TokenRatesChart.tsx
+++ b/components/token/TokenRatesChart.tsx
@ -0,0 +1,112 @@
+import DetailedAreaOrBarChart from '@components/shared/DetailedAreaOrBarChart'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { TokenStatsItem } from 'types'
+
+interface GroupedDataItem extends TokenStatsItem {
+  intervalStartMillis: number
+}
+
+const groupByHourlyInterval = (
+  data: TokenStatsItem[],
+  dataKey: 'borrow_apr' | 'deposit_apr',
+  intervalDurationHours: number,
+) => {
+  const intervalMillis = intervalDurationHours * 60 * 60 * 1000
+  const groupedData = []
+  let currentGroup: GroupedDataItem | null = null
+  let itemsInCurrentGroup = 0
+
+  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
+    ) {
+      if (currentGroup) {
+        // calculate the average for the previous group
+        currentGroup[dataKey] /= itemsInCurrentGroup
+        groupedData.push(currentGroup)
+      }
+
+      currentGroup = {
+        ...obj,
+        intervalStartMillis: intervalStartMillis,
+      }
+
+      // initialize the sum for the new group
+      currentGroup[dataKey] = obj[dataKey] * 100
+      itemsInCurrentGroup = 1
+    } else {
+      // add the value to the sum for the current group
+      currentGroup[dataKey] += obj[dataKey] * 100
+      itemsInCurrentGroup++
+    }
+  }
+
+  // calculate the average for the last group (if it exists)
+  if (currentGroup) {
+    currentGroup[dataKey] /= itemsInCurrentGroup
+    groupedData.push(currentGroup)
+  }
+
+  return groupedData
+}
+
+const TokenRatesChart = ({
+  data,
+  dataKey,
+  daysToShow,
+  loading,
+  setDaysToShow,
+  title,
+}: {
+  data: TokenStatsItem[]
+  dataKey: 'deposit_apr' | 'borrow_apr'
+  daysToShow: string | undefined
+  loading: boolean
+  setDaysToShow: (x: string) => void
+  title: string
+}) => {
+  const { t } = useTranslation('stats')
+  const [interval, intervalString] = useMemo(() => {
+    if (daysToShow === '30') {
+      return [24, 'stats:daily']
+    } else if (daysToShow === '7') {
+      return [6, 'stats:six-hourly']
+    } else {
+      return [1, 'stats:hourly']
+    }
+  }, [daysToShow])
+
+  const chartData = useMemo(() => {
+    if (!data || !data.length) return []
+    const groupedData = groupByHourlyInterval(data, dataKey, interval)
+    return groupedData
+  }, [data, dataKey, daysToShow, interval])
+
+  return (
+    <DetailedAreaOrBarChart
+      chartType="bar"
+      data={chartData}
+      daysToShow={daysToShow}
+      setDaysToShow={setDaysToShow}
+      heightClass="h-64"
+      loaderHeightClass="h-[334px]"
+      loading={loading}
+      small
+      hideChange
+      suffix="%"
+      tickFormat={(x) => `${x.toFixed(2)}%`}
+      title={`${t(intervalString)} ${title}`}
+      xKey="date_hour"
+      yKey={dataKey}
+    />
+  )
+}
+
+export default TokenRatesChart
--- a/public/locales/en/token.json
+++ b/public/locales/en/token.json
@ -1,6 +1,8 @@
 {
    "all-time-high": "All-time High",
    "all-time-low": "All-time Low",
+    "average-borrow-rate": "Average Borrow Rate",
+    "average-deposit-rate": "Average Deposit Rate",
    "borrowing": "Borrowing",
    "borrows": "Borrows",
    "borrow-rates": "Borrow Rates",
--- a/public/locales/es/token.json
+++ b/public/locales/es/token.json
@ -1,6 +1,8 @@
 {
    "all-time-high": "All-time High",
    "all-time-low": "All-time Low",
+    "average-borrow-rate": "Average Borrow Rate",
+    "average-deposit-rate": "Average Deposit Rate",
    "borrowing": "Borrowing",
    "borrows": "Borrows",
    "borrow-rates": "Borrow Rates",
--- a/public/locales/ru/token.json
+++ b/public/locales/ru/token.json
@ -1,6 +1,8 @@
 {
    "all-time-high": "All-time High",
    "all-time-low": "All-time Low",
+    "average-borrow-rate": "Average Borrow Rate",
+    "average-deposit-rate": "Average Deposit Rate",
    "borrowing": "Borrowing",
    "borrows": "Borrows",
    "borrow-rates": "Borrow Rates",
--- a/public/locales/zh/token.json
+++ b/public/locales/zh/token.json
@ -1,6 +1,8 @@
 {
    "all-time-high": "历史高价",
    "all-time-low": "历史低价",
+    "average-borrow-rate": "Average Borrow Rate",
+    "average-deposit-rate": "Average Deposit Rate",
    "borrow-rates": "借贷利率",
    "borrow-upkeep-rate": "维持借贷的费用",
    "borrowing": "借入",
--- a/public/locales/zh_tw/token.json
+++ b/public/locales/zh_tw/token.json
@ -1,6 +1,8 @@
 {
    "all-time-high": "歷史高價",
    "all-time-low": "歷史低價",
+    "average-borrow-rate": "Average Borrow Rate",
+    "average-deposit-rate": "Average Deposit Rate",
    "borrow-rates": "借貸利率",
    "borrow-upkeep-rate": "維持借貸的費用",
    "borrowing": "借入",