Merge pull request #746 from alexstotsky/summary-by-asset-updates

(improvements) Summary by asset: actualize columns
bitfinexcom · Dec 13, 2023 · 4b67538 · 4b67538
2 parents 877c5e0 + 4ed33a9
commit 4b67538
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 71 deletions.
diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
@@ -624,7 +624,8 @@
     "no_data": "No related data for this period is available or data should be synced.",
     "fees": {
       "title": "Account Fees",
-      "sub_title": "Based on your trading volume",
+      "sub_title": "Based on your 30 days eligible trading volume",
+      "fee_tier_volume": "Eligible Trading Volume",
       "maker": "Maker Fees",
       "taker_crypto": "Taker Fees Crypto",
       "taker_fiat": "Taker Fees Fiat",
@@ -638,14 +639,17 @@
     },
     "by_asset":{
       "title": "Summary by Asset",
-      "sub_title":  "For the last 30 days",
+      "sub_title": "For period ",
       "currency": "Currency",
+      "all_assets": "All Assets",
       "amount": "Amount",
       "balance": "Balance",
       "balance_change": "Balance Change",
       "profits": "Profits",
       "volume": "Volume",
-      "total": "Total"
+      "total": "Total",
+      "trading_fees": "Trading Fees",
+      "fund_earnings": "Funding Earnings"
     }
   },
   "symbols": {

diff --git a/src/components/AppSummary/AppSummary.byAsset.js b/src/components/AppSummary/AppSummary.byAsset.js
@@ -6,33 +6,43 @@ import { isEmpty } from '@bitfinex/lib-js-util-base'
 import NoData from 'ui/NoData'
 import Loading from 'ui/Loading'
 import DataTable from 'ui/DataTable'
-import { fetchData } from 'state/summaryByAsset/actions'
+import { formatDate } from 'state/utils'
+import { fetchData, refresh } from 'state/summaryByAsset/actions'
 import {
   getPageLoading,
   getDataReceived,
   getSummaryByAssetTotal,
   getSummaryByAssetEntries,
 } from 'state/summaryByAsset/selectors'
+import { getTimezone } from 'state/base/selectors'
 import { getIsSyncRequired } from 'state/sync/selectors'
+import { getTimeRange, getTimeFrame } from 'state/timeRange/selectors'
 
 import { getAssetColumns } from './AppSummary.columns'
 import { prepareSummaryByAssetData } from './AppSummary.helpers'
 
 const AppSummaryByAsset = () => {
   const { t } = useTranslation()
   const dispatch = useDispatch()
+  const timezone = useSelector(getTimezone)
+  const timeRange = useSelector(getTimeRange)
   const pageLoading = useSelector(getPageLoading)
   const dataReceived = useSelector(getDataReceived)
   const total = useSelector(getSummaryByAssetTotal)
   const entries = useSelector(getSummaryByAssetEntries)
   const isSyncRequired = useSelector(getIsSyncRequired)
+  const { start, end } = useSelector(getTimeFrame)
 
   useEffect(() => {
     if (!dataReceived && !pageLoading && !isSyncRequired) {
       dispatch(fetchData())
     }
   }, [dataReceived, pageLoading, isSyncRequired])
 
+  useEffect(() => {
+    dispatch(refresh())
+  }, [timeRange])
+
   const preparedData = useMemo(
     () => prepareSummaryByAssetData(entries, total, t),
     [entries, total, t],
@@ -66,6 +76,7 @@ const AppSummaryByAsset = () => {
       </div>
       <div className='app-summary-item-sub-title'>
         {t('summary.by_asset.sub_title')}
+        {`${formatDate(start, timezone)} - ${formatDate(end, timezone)}`}
       </div>
       {showContent}
     </div>

diff --git a/src/components/AppSummary/AppSummary.columns.js b/src/components/AppSummary/AppSummary.columns.js
@@ -5,21 +5,33 @@ import { formatFee, fixedFloat } from 'ui/utils'
 import { getTooltipContent } from 'utils/columns'
 
 import {
+  getIsTotal,
   formatUsdValue,
   formatPercentValue,
   formatUsdValueChange,
-  shouldShowPercentCheck,
 } from './AppSummary.helpers'
 
 export const getFeesColumns = ({
   makerFee,
+  feeTierVolume,
   isTurkishSite,
   derivTakerFee,
   takerFeeToFiat,
   takerFeeToStable,
   takerFeeToCrypto,
   derivMakerRebate,
 }) => [
+  {
+    id: 'feeTierVolume',
+    name: 'summary.fees.fee_tier_volume',
+    width: 100,
+    renderer: () => (
+      <Cell>
+        $
+        {formatUsdValue(feeTierVolume)}
+      </Cell>
+    ),
+  },
   {
     id: 'makerFee',
     name: 'summary.fees.maker',
@@ -99,110 +111,172 @@ export const getAssetColumns = ({
     width: 110,
     renderer: (rowIndex) => {
       const { currency } = preparedData[rowIndex]
+      const isTotal = getIsTotal(currency, t)
       return (
         <Cell tooltip={getTooltipContent(currency, t)}>
-          {currency}
+          {isTotal ? (
+            <>
+              <span>
+                {currency}
+              </span>
+              <br />
+              <span className='cell-value secondary-value'>
+                {t('summary.by_asset.all_assets')}
+              </span>
+            </>
+          ) : (
+            <span className='cell-value'>
+              {currency}
+            </span>
+          )}
         </Cell>
       )
     },
     copyText: rowIndex => preparedData[rowIndex]?.currency,
   },
   {
     id: 'balance',
-    name: 'summary.by_asset.amount',
+    name: 'summary.by_asset.balance',
     width: 178,
     renderer: (rowIndex) => {
-      const { balance = null } = preparedData[rowIndex]
+      const { currency, balance = null, balanceUsd = null } = preparedData[rowIndex]
+      const isTotal = getIsTotal(currency, t)
+      const tooltipContent = isTotal ? balanceUsd : balance
       return (
-        <Cell tooltip={getTooltipContent(balance, t)}>
-          {fixedFloat(balance)}
+        <Cell tooltip={getTooltipContent(tooltipContent, t)}>
+          {isTotal ? (
+            <span className='cell-value'>
+              $
+              {formatUsdValue(balanceUsd)}
+            </span>
+          ) : (
+            <>
+              <span className='cell-value'>
+                {fixedFloat(balance)}
+              </span>
+              <br />
+              <span className='cell-value secondary-value'>
+                $
+                {formatUsdValue(balanceUsd)}
+              </span>
+            </>
+          )}
         </Cell>
       )
     },
     copyText: rowIndex => fixedFloat(preparedData[rowIndex]?.balance),
   },
   {
-    id: 'balanceUsd',
-    name: 'summary.by_asset.balance',
+    id: 'balanceChange',
+    name: 'summary.by_asset.balance_change',
     width: 178,
     renderer: (rowIndex) => {
-      const { balanceUsd } = preparedData[rowIndex]
+      const {
+        currency, balanceChange, balanceChangeUsd, balanceChangePerc,
+      } = preparedData[rowIndex]
+      const isTotal = getIsTotal(currency, t)
+      const tooltipContent = isTotal ? balanceChangeUsd : balanceChange
       return (
-        <Cell tooltip={getTooltipContent(balanceUsd, t)}>
-          $
-          {formatUsdValue(balanceUsd)}
+        <Cell tooltip={getTooltipContent(tooltipContent, t)}>
+          {isTotal ? (
+            <>
+              <span className='cell-value'>
+                {formatUsdValueChange(balanceChangeUsd)}
+              </span>
+              <br />
+              <span className='cell-value secondary-value'>
+                {formatPercentValue(balanceChangePerc)}
+              </span>
+            </>
+          ) : (
+            <>
+              <span className='cell-value'>
+                {fixedFloat(balanceChange)}
+              </span>
+              <br />
+              <span className='cell-value secondary-value'>
+                {formatPercentValue(balanceChangePerc)}
+              </span>
+            </>
+          )}
         </Cell>
       )
     },
-    isNumericValue: true,
-    copyText: rowIndex => fixedFloat(preparedData[rowIndex]?.balanceUsd, 2),
+    copyText: rowIndex => preparedData[rowIndex]?.balanceChange,
   },
   {
-    id: 'valueChange30dUsd',
-    name: 'summary.by_asset.balance_change',
+    id: 'volume',
+    name: 'summary.by_asset.volume',
     width: 178,
     renderer: (rowIndex) => {
-      const { balanceUsd, valueChange30dUsd, valueChange30dPerc } = preparedData[rowIndex]
-      const shouldShowPercentChange = shouldShowPercentCheck(balanceUsd, valueChange30dUsd)
+      const { currency, volume, volumeUsd } = preparedData[rowIndex]
+      const isTotal = getIsTotal(currency, t)
+      const tooltipContent = isTotal ? volumeUsd : volume
       return (
-        <Cell tooltip={getTooltipContent(valueChange30dUsd, t)}>
-          <>
+        <Cell tooltip={getTooltipContent(tooltipContent, t)}>
+          {isTotal ? (
             <span className='cell-value'>
-              {formatUsdValueChange(valueChange30dUsd)}
+              $
+              {formatUsdValue(volumeUsd)}
             </span>
-            {shouldShowPercentChange && (
-              <>
-                <br />
-                <span className='cell-value secondary-value'>
-                  {formatPercentValue(valueChange30dPerc)}
-                </span>
-              </>
-            )}
-
-          </>
+          ) : (
+            <>
+              <span className='cell-value'>
+                {fixedFloat(volume)}
+              </span>
+              <br />
+              <span className='cell-value secondary-value'>
+                $
+                {formatUsdValue(volumeUsd)}
+              </span>
+            </>
+          )}
         </Cell>
       )
     },
-    isNumericValue: true,
-    copyText: rowIndex => preparedData[rowIndex]?.valueChange30dUsd,
+    copyText: rowIndex => fixedFloat(preparedData[rowIndex]?.volume, 2),
   },
   {
-    id: 'result30dUsd',
-    name: 'summary.by_asset.profits',
+    id: 'tradingFees',
+    name: 'summary.by_asset.trading_fees',
     width: 178,
     renderer: (rowIndex) => {
-      const { result30dUsd, result30dPerc } = preparedData[rowIndex]
+      const { tradingFees, tradingFeesUsd, currency } = preparedData[rowIndex]
+      const isTotal = getIsTotal(currency, t)
+      const tooltipContent = isTotal ? tradingFeesUsd : tradingFees
       return (
-        <Cell tooltip={getTooltipContent(result30dUsd, t)}>
-          <>
+        <Cell tooltip={getTooltipContent(tooltipContent, t)}>
+          {isTotal ? (
             <span className='cell-value'>
-              {formatUsdValueChange(result30dUsd)}
+              $
+              {formatUsdValue(tradingFeesUsd)}
             </span>
-            <br />
-            <span className='cell-value secondary-value'>
-              {formatPercentValue(result30dPerc)}
-            </span>
-          </>
+          ) : (
+            <>
+              <span className='cell-value'>
+                {fixedFloat(tradingFees)}
+              </span>
+            </>
+          )}
         </Cell>
       )
     },
-    isNumericValue: true,
-    copyText: rowIndex => preparedData[rowIndex]?.result30dUsd,
+    copyText: rowIndex => fixedFloat(preparedData[rowIndex]?.tradingFees, 2),
   },
   {
-    id: 'volume30dUsd',
-    name: 'summary.by_asset.volume',
+    id: 'marginFundingPayment',
+    name: 'summary.by_asset.fund_earnings',
     width: 178,
     renderer: (rowIndex) => {
-      const { volume30dUsd } = preparedData[rowIndex]
+      const { marginFundingPayment, currency } = preparedData[rowIndex]
+      const isTotal = getIsTotal(currency, t)
+      const tooltipContent = isTotal ? '' : marginFundingPayment
       return (
-        <Cell tooltip={getTooltipContent(volume30dUsd, t)}>
-          $
-          {formatUsdValue(volume30dUsd)}
+        <Cell tooltip={getTooltipContent(tooltipContent, t)}>
+          {fixedFloat(marginFundingPayment)}
         </Cell>
       )
     },
-    isNumericValue: true,
-    copyText: rowIndex => fixedFloat(preparedData[rowIndex]?.volume30dUsd, 2),
+    copyText: rowIndex => fixedFloat(preparedData[rowIndex]?.marginFundingPayment, 2),
   },
 ]
diff --git a/src/components/AppSummary/AppSummary.fees.js b/src/components/AppSummary/AppSummary.fees.js
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React, { memo, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from '@bitfinex/lib-js-util-base'
 
@@ -7,6 +7,7 @@ import Loading from 'ui/Loading'
 import CollapsedTable from 'ui/CollapsedTable'
 
 import { getFeesColumns } from './AppSummary.columns'
+import { getFeeTierVolume } from './AppSummary.helpers'
 
 const AppSummaryFees = ({
   t,
@@ -24,8 +25,14 @@ const AppSummaryFees = ({
     derivMakerRebate = 0,
   } = data
 
+  const feeTierVolume = useMemo(
+    () => getFeeTierVolume(data),
+    [data],
+  )
+
   const columns = getFeesColumns({
     makerFee,
+    feeTierVolume,
     isTurkishSite,
     derivTakerFee,
     takerFeeToFiat,

diff --git a/src/components/AppSummary/AppSummary.helpers.js b/src/components/AppSummary/AppSummary.helpers.js
@@ -33,3 +33,7 @@ export const shouldShowPercentCheck = (balance, balanceChange) => {
   if (bal === balChange) return false
   return true
 }
+
+export const getIsTotal = (currency, t) => currency === t('summary.by_asset.total')
+
+export const getFeeTierVolume = (data) => data?.trade_vol_30d?.at(-1)?.vol_safe ?? 0
diff --git a/src/components/AppSummary/AppSummary.value.js b/src/components/AppSummary/AppSummary.value.js
@@ -71,7 +71,7 @@ const AccountSummaryValue = () => {
           {formattedPercValue}
         </div>
         <Chart
-          aspect={1.675}
+          aspect={1.455}
           data={chartData}
           showLegend={false}
           dataKeys={presentCurrencies}