From c38e063ff4edd22b53f1c6727b191a6416ed8826 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 2 Mar 2022 12:47:06 +1100 Subject: [PATCH 1/2] add export pnl function --- components/account_page/AccountOverview.tsx | 54 ++++++++++++++++----- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/components/account_page/AccountOverview.tsx b/components/account_page/AccountOverview.tsx index d92245ee..ce690934 100644 --- a/components/account_page/AccountOverview.tsx +++ b/components/account_page/AccountOverview.tsx @@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react' import dayjs from 'dayjs' import utc from 'dayjs/plugin/utc' import { ExclamationIcon } from '@heroicons/react/solid' +import { SaveIcon } from '@heroicons/react/outline' import { useTranslation } from 'next-i18next' import useMangoStore from '../../stores/useMangoStore' @@ -12,6 +13,8 @@ import useLocalStorageState from '../../hooks/useLocalStorageState' import ButtonGroup from '../ButtonGroup' import PerformanceChart from './PerformanceChart' import PositionsTable from '../PerpPositionsTable' +import { exportDataToCSV } from '../../utils/export' +import Button from '../Button' dayjs.extend(utc) @@ -21,7 +24,7 @@ const performanceRangePresets = [ { label: '24h', value: 1 }, { label: '7d', value: 7 }, { label: '30d', value: 30 }, - { label: '3m', value: 90 }, + { label: 'All', value: 10000 }, ] const performanceRangePresetLabels = performanceRangePresets.map((x) => x.label) @@ -60,6 +63,24 @@ export default function AccountOverview() { const [performanceRange, setPerformanceRange] = useState('30d') const [hourlyPerformanceStats, setHourlyPerformanceStats] = useState([]) + const exportPerformanceDataToCSV = () => { + const dataToExport = hourlyPerformanceStats.map((row) => { + const timestamp = new Date(row.time) + return { + timestamp: `${timestamp.toLocaleDateString()} ${timestamp.toLocaleTimeString()}`, + account_equity: row.account_equity, + pnl: row.pnl, + } + }) + + const title = `${ + mangoAccount.name || mangoAccount.publicKey + }-Performance-${new Date().toLocaleDateString()}` + const headers = ['Timestamp', 'Account Equity', 'PNL'] + + exportDataToCSV(dataToExport, title, headers, t) + } + useEffect(() => { const fetchData = async () => { const stats = await fetchHourlyPerformanceStats( @@ -111,17 +132,26 @@ export default function AccountOverview() {
-
- {t('pnl')}{' '} - {hourlyPerformanceStats?.length ? ( - - ( - {dayjs(hourlyPerformanceStats[0]['time']).format( - 'MMM D YYYY, h:mma' - )} - ) - - ) : null} +
+
+ {t('pnl')}{' '} + {hourlyPerformanceStats?.length ? ( +
+ {dayjs(hourlyPerformanceStats[0]['time']).format( + 'MMM D YYYY, h:mma' + )} +
+ ) : null} +
+
{formatUsdValue(pnl)} From d2029ef5f5fbaae310464d2dc025766e3b6656a5 Mon Sep 17 00:00:00 2001 From: saml33 Date: Wed, 2 Mar 2022 13:25:23 +1100 Subject: [PATCH 2/2] use separate api call for export --- components/account_page/AccountOverview.tsx | 36 ++++++++++++++------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/components/account_page/AccountOverview.tsx b/components/account_page/AccountOverview.tsx index ce690934..e442379f 100644 --- a/components/account_page/AccountOverview.tsx +++ b/components/account_page/AccountOverview.tsx @@ -15,6 +15,7 @@ import PerformanceChart from './PerformanceChart' import PositionsTable from '../PerpPositionsTable' import { exportDataToCSV } from '../../utils/export' import Button from '../Button' +import Loading from '../Loading' dayjs.extend(utc) @@ -24,13 +25,14 @@ const performanceRangePresets = [ { label: '24h', value: 1 }, { label: '7d', value: 7 }, { label: '30d', value: 30 }, - { label: 'All', value: 10000 }, + { label: '3m', value: 90 }, ] const performanceRangePresetLabels = performanceRangePresets.map((x) => x.label) -const fetchHourlyPerformanceStats = async (mangoAccountPk: string) => { - const range = - performanceRangePresets[performanceRangePresets.length - 1].value +const fetchHourlyPerformanceStats = async ( + mangoAccountPk: string, + range: number +) => { const response = await fetch( `https://mango-transaction-log.herokuapp.com/v3/stats/account-performance-detailed?mango-account=${mangoAccountPk}&start-date=${dayjs() .subtract(range, 'day') @@ -62,9 +64,15 @@ export default function AccountOverview() { const [pnl, setPnl] = useState(0) const [performanceRange, setPerformanceRange] = useState('30d') const [hourlyPerformanceStats, setHourlyPerformanceStats] = useState([]) + const [loadExportData, setLoadExportData] = useState(false) - const exportPerformanceDataToCSV = () => { - const dataToExport = hourlyPerformanceStats.map((row) => { + const exportPerformanceDataToCSV = async () => { + setLoadExportData(true) + const exportData = await fetchHourlyPerformanceStats( + mangoAccount.publicKey.toString(), + 10000 + ) + const dataToExport = exportData.map((row) => { const timestamp = new Date(row.time) return { timestamp: `${timestamp.toLocaleDateString()} ${timestamp.toLocaleTimeString()}`, @@ -79,12 +87,14 @@ export default function AccountOverview() { const headers = ['Timestamp', 'Account Equity', 'PNL'] exportDataToCSV(dataToExport, title, headers, t) + setLoadExportData(false) } useEffect(() => { const fetchData = async () => { const stats = await fetchHourlyPerformanceStats( - mangoAccount.publicKey.toString() + mangoAccount.publicKey.toString(), + performanceRangePresets[performanceRangePresets.length - 1].value ) setPnl(stats?.length ? stats?.[0]?.['pnl'] : 0) @@ -147,10 +157,14 @@ export default function AccountOverview() { className={`flex items-center justify-center text-xs h-8 pt-0 pb-0 pl-3 pr-3 whitespace-nowrap`} onClick={exportPerformanceDataToCSV} > -
- - {t('export-data')} -
+ {loadExportData ? ( + + ) : ( +
+ + {t('export-data')} +
+ )}