Merge pull request #178 from blockworks-foundation/export-pnl

add export pnl function

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,9 @@ 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'
+import Loading from '../Loading'
 
 dayjs.extend(utc)
 
@@ -25,9 +29,10 @@ const performanceRangePresets = [
 ]
 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')
@@ -59,11 +64,37 @@ 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 = 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()}`,
+        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)
+    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)
@@ -113,17 +144,30 @@ export default function AccountOverview() {
             </div>
           </div>
           <div className="border-b border-th-bkg-4 p-3 sm:p-4">
-            <div className="pb-0.5 text-th-fgd-3 text-xs sm:text-sm">
-              {t('pnl')}{' '}
-              {hourlyPerformanceStats?.length ? (
-                <span className="text-th-fgd-4 text-xxs">
-                  (
-                  {dayjs(hourlyPerformanceStats[0]['time']).format(
-                    'MMM D YYYY, h:mma'
-                  )}
-                  )
-                </span>
-              ) : null}
+            <div className="flex items-center justify-between">
+              <div className="pb-0.5 text-th-fgd-3 text-xs sm:text-sm">
+                {t('pnl')}{' '}
+                {hourlyPerformanceStats?.length ? (
+                  <div className="text-th-fgd-4 text-xs">
+                    {dayjs(hourlyPerformanceStats[0]['time']).format(
+                      'MMM D YYYY, h:mma'
+                    )}
+                  </div>
+                ) : null}
+              </div>
+              <Button
+                className={`flex items-center justify-center text-xs h-8 pt-0 pb-0 pl-3 pr-3 whitespace-nowrap`}
+                onClick={exportPerformanceDataToCSV}
+              >
+                {loadExportData ? (
+                  <Loading />
+                ) : (
+                  <div className={`flex items-center`}>
+                    <SaveIcon className={`h-4 w-4 mr-1.5`} />
+                    {t('export-data')}
+                  </div>
+                )}
+              </Button>
             </div>
             <div className="font-bold text-th-fgd-1 text-xl sm:text-2xl">
               {formatUsdValue(pnl)}