lychiyu/bbgo_origin
1
0
Fork 0
mirror of https://github.com/c9s/bbgo.git synced 2024-11-21 22:43:52 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

run prettier

Browse Source
This commit is contained in:
Jun Su 2022-06-15 19:02:24 +08:00
parent 19db5b3fdf
commit 21ec4fdb30
5 changed files with 130 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/api/bbgo.ts
View File

@ -17,17 +17,17 @@ export function queryOutboundIP(cb) {
export async function triggerSync() { export async function triggerSync() {
return axios.post<any>(baseURL + '/api/environment/sync'); return axios.post<any>(baseURL + '/api/environment/sync');
}; }
export enum SyncStatus { export enum SyncStatus {
SyncNotStarted = 0, SyncNotStarted = 0,
Syncing = 1, Syncing = 1,
SyncDone = 2 SyncDone = 2,
} }
export async function querySyncStatus(): Promise<SyncStatus> { export async function querySyncStatus(): Promise<SyncStatus> {
const resp = await axios.get<any>(baseURL + '/api/environment/syncing') const resp = await axios.get<any>(baseURL + '/api/environment/syncing');
return resp.data.syncing return resp.data.syncing;
} }
export function testDatabaseConnection(params, cb) { export function testDatabaseConnection(params, cb) {
@ -132,29 +132,27 @@ export function queryTradingVolume(params, cb) {
} }
export async function queryStrategiesMetrics() { export async function queryStrategiesMetrics() {
return ( return [
[ {
{ id: 'uuid',
"id":"uuid", instanceID: 'testInstanceID',
"instanceID": "testInstanceID", strategy: 'grid',
"strategy": "grid", grid: {
"grid": { symbol: 'BTCUSDT',
"symbol": "BTCUSDT", },
}, stats: {
"stats": { oneDayArbs: 0,
"oneDayArbs": 0, totalArbs: 3,
"totalArbs": 3, investment: 100,
"investment": 100, totalProfits: 5.6,
"totalProfits": 5.6, gridProfits: 2.5,
"gridProfits": 2.5, floatingPNL: 3.1,
"floatingPNL": 3.1, currentPrice: 29000,
"currentPrice": 29000, lowestPrice: 25000,
"lowestPrice": 25000, highestPrice: 35000,
"highestPrice": 35000 },
}, status: 'RUNNING',
"status": "RUNNING", startTime: 1654938187102,
"startTime": 1654938187102 },
} ];
] }
)
}

1
frontend/components/SideBar.js
View File

@ -97,7 +97,6 @@ export default function SideBar() {
<ListItemText primary="Strategies" /> <ListItemText primary="Strategies" />
</ListItem> </ListItem>
</Link> </Link>
</List> </List>
</Drawer> </Drawer>
); );

30
frontend/components/SyncButton.tsx
View File

@ -1,7 +1,7 @@
import {styled} from "@mui/styles"; import { styled } from '@mui/styles';
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from 'react';
import {querySyncStatus, SyncStatus, triggerSync} from "../api/bbgo"; import { querySyncStatus, SyncStatus, triggerSync } from '../api/bbgo';
import useInterval from "../hooks/useInterval"; import useInterval from '../hooks/useInterval';
const ToolbarButton = styled('button')(({ theme }) => ({ const ToolbarButton = styled('button')(({ theme }) => ({
padding: theme.spacing(1), padding: theme.spacing(1),
@ -9,7 +9,7 @@ const ToolbarButton = styled('button')(({ theme }) => ({
export default function SyncButton() { export default function SyncButton() {
const [syncing, setSyncing] = useState(false); const [syncing, setSyncing] = useState(false);
const sync = async () => { const sync = async () => {
try { try {
setSyncing(true); setSyncing(true);
@ -18,26 +18,22 @@ export default function SyncButton() {
setSyncing(false); setSyncing(false);
} }
}; };
useEffect(() => { useEffect(() => {
sync(); sync();
}, []) }, []);
useInterval(() => { useInterval(() => {
querySyncStatus().then(s => { querySyncStatus().then((s) => {
if (s !== SyncStatus.Syncing) { if (s !== SyncStatus.Syncing) {
setSyncing(false); setSyncing(false);
} }
}) });
}, 2000) }, 2000);
return ( return (
<ToolbarButton <ToolbarButton disabled={syncing} onClick={sync}>
disabled={syncing}
onClick={sync}
>
{syncing ? 'Syncing...' : 'Sync'} {syncing ? 'Syncing...' : 'Sync'}
</ToolbarButton> </ToolbarButton>
); );
} }

20
frontend/hooks/useInterval.ts
View File

@ -1,20 +1,20 @@
import {useEffect, useRef} from "react"; import { useEffect, useRef } from 'react';
export default function useInterval(cb: Function, delayMs: number | null) { export default function useInterval(cb: Function, delayMs: number | null) {
const savedCallback = useRef<Function>(); const savedCallback = useRef<Function>();
useEffect(() => { useEffect(() => {
savedCallback.current = cb savedCallback.current = cb;
}, [cb]) }, [cb]);
useEffect(() => { useEffect(() => {
function tick() { function tick() {
savedCallback.current(); savedCallback.current();
} }
if (delayMs !== null) { if (delayMs !== null) {
let timerId = setInterval(tick, delayMs) let timerId = setInterval(tick, delayMs);
return () => clearInterval(timerId) return () => clearInterval(timerId);
} }
}, [delayMs]) }, [delayMs]);
} }

159
frontend/pages/strategies.tsx
View File

@ -1,6 +1,6 @@
import DashboardLayout from '../layouts/DashboardLayout'; import DashboardLayout from '../layouts/DashboardLayout';
import { styled } from '@mui/styles'; import { styled } from '@mui/styles';
import {queryStrategiesMetrics} from '../api/bbgo'; import { queryStrategiesMetrics } from '../api/bbgo';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
const StrategyContainer = styled('section')(() => ({ const StrategyContainer = styled('section')(() => ({
@ -11,7 +11,7 @@ const StrategyContainer = styled('section')(() => ({
height: '400px', height: '400px',
border: '1px solid rgb(248, 149, 35)', border: '1px solid rgb(248, 149, 35)',
borderRadius: '10px', borderRadius: '10px',
padding: '10px' padding: '10px',
})); }));
const Strategy = styled('div')(() => ({ const Strategy = styled('div')(() => ({
@ -24,36 +24,34 @@ const StatusSign = styled('span')(() => ({
display: 'block', display: 'block',
backgroundColor: 'rgb(113, 218, 113)', backgroundColor: 'rgb(113, 218, 113)',
borderRadius: '50%', borderRadius: '50%',
marginRight:'5px', marginRight: '5px',
})); }));
const RunningTime = styled('div')(() => ({ const RunningTime = styled('div')(() => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
})) }));
const Description = styled('div')(() => ({ const Description = styled('div')(() => ({
color: 'rgb(140, 140, 140)', color: 'rgb(140, 140, 140)',
"& .duration": { '& .duration': {
marginLeft: '3px', marginLeft: '3px',
}, },
})) }));
const Summary = styled('div')(() => ({ const Summary = styled('div')(() => ({
width: '100%', width: '100%',
display: 'flex', display: 'flex',
justifyContent: 'space-around', justifyContent: 'space-around',
backgroundColor: 'rgb(255, 245, 232)', backgroundColor: 'rgb(255, 245, 232)',
})) }));
const SummaryBlock = styled('div')(() => ({ const SummaryBlock = styled('div')(() => ({
padding: '5px 0 5px 0' padding: '5px 0 5px 0',
})); }));
const StatsTitle = styled('div')(() => ({ const StatsTitle = styled('div')(() => ({
margin:'0 0 10px 0', margin: '0 0 10px 0',
})); }));
const StatsValue = styled('div')(() => ({ const StatsValue = styled('div')(() => ({
@ -69,101 +67,102 @@ const Stats = styled('div')(() => ({
display: 'grid', display: 'grid',
gridTemplateColumns: '1fr 1fr 1fr', gridTemplateColumns: '1fr 1fr 1fr',
columnGap: '10px', columnGap: '10px',
rowGap: '20px' rowGap: '20px',
})); }));
export default function Strategies(){ export default function Strategies() {
const [details, setDetails] = useState([]); const [details, setDetails] = useState([]);
useEffect(() => { useEffect(() => {
queryStrategiesMetrics().then((value) => { queryStrategiesMetrics().then((value) => {
setDetails(value); setDetails(value);
} });
); }, []);
},[])
return ( return (
<DashboardLayout> <DashboardLayout>
{details.map((element) => { {details.map((element) => {
return( return <Detail key={element.id} data={element} />;
<Detail key={element.id} data={element}/>
)
})} })}
</DashboardLayout> </DashboardLayout>
); );
} }
export function Detail({data}){ export function Detail({ data }) {
const {strategy, stats, startTime} = data; const { strategy, stats, startTime } = data;
const totalProfitsPercentage = stats.totalProfits / stats.investment * 100; const totalProfitsPercentage = (stats.totalProfits / stats.investment) * 100;
const gridProfitsPercentage = stats.gridProfits / stats.investment * 100; const gridProfitsPercentage = (stats.gridProfits / stats.investment) * 100;
const gridAprPercentage = stats.gridProfits / 5 * 365; const gridAprPercentage = (stats.gridProfits / 5) * 365;
const now = Date.now(); const now = Date.now();
const durationMilliseconds = now - startTime; const durationMilliseconds = now - startTime;
const seconds = durationMilliseconds / 1000; const seconds = durationMilliseconds / 1000;
const day = Math.floor(seconds / (60 * 60 * 24)); const day = Math.floor(seconds / (60 * 60 * 24));
const hour = Math.floor(seconds % (60 * 60 * 24) / 3600); const hour = Math.floor((seconds % (60 * 60 * 24)) / 3600);
const min = Math.floor(seconds % (60 * 60 * 24) % 3600 / 60); const min = Math.floor(((seconds % (60 * 60 * 24)) % 3600) / 60);
return ( return (
<StrategyContainer> <StrategyContainer>
<Strategy>{strategy}</Strategy> <Strategy>{strategy}</Strategy>
<div>{data[strategy].symbol}</div> <div>{data[strategy].symbol}</div>
<RunningTime> <RunningTime>
<StatusSign/> <StatusSign />
<Description> <Description>
Running for Running for
<span className="duration">{day}</span>D <span className="duration">{day}</span>D
<span className="duration">{hour}</span>H <span className="duration">{hour}</span>H
<span className="duration">{min}</span>M <span className="duration">{min}</span>M
</Description> </Description>
</RunningTime> </RunningTime>
<Description>0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span> arbitrages</Description> <Description>
0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span>{' '}
<Summary> arbitrages
<SummaryBlock> </Description>
<StatsTitle>Investment USDT</StatsTitle>
<div>{stats.investment}</div>
</SummaryBlock>
<SummaryBlock>
<StatsTitle>Total Profit USDT</StatsTitle>
<StatsValue>{stats.totalProfits}</StatsValue>
<Percentage>{totalProfitsPercentage}%</Percentage>
</SummaryBlock>
</Summary>
<Stats> <Summary>
<div> <SummaryBlock>
<StatsTitle>Grid Profits</StatsTitle> <StatsTitle>Investment USDT</StatsTitle>
<StatsValue>{stats.gridProfits}</StatsValue> <div>{stats.investment}</div>
<Percentage>{gridProfitsPercentage}%</Percentage> </SummaryBlock>
</div>
<div> <SummaryBlock>
<StatsTitle>Floating PNL</StatsTitle> <StatsTitle>Total Profit USDT</StatsTitle>
<StatsValue>{stats.floatingPNL}</StatsValue> <StatsValue>{stats.totalProfits}</StatsValue>
</div> <Percentage>{totalProfitsPercentage}%</Percentage>
</SummaryBlock>
</Summary>
<div> <Stats>
<StatsTitle>Grid APR</StatsTitle> <div>
<Percentage>{gridAprPercentage}%</Percentage> <StatsTitle>Grid Profits</StatsTitle>
</div> <StatsValue>{stats.gridProfits}</StatsValue>
<Percentage>{gridProfitsPercentage}%</Percentage>
</div>
<div> <div>
<StatsTitle>Current Price</StatsTitle> <StatsTitle>Floating PNL</StatsTitle>
<div>{stats.currentPrice}</div> <StatsValue>{stats.floatingPNL}</StatsValue>
</div> </div>
<div> <div>
<StatsTitle>Price Range</StatsTitle> <StatsTitle>Grid APR</StatsTitle>
<div>{stats.lowestPrice}~{stats.highestPrice}</div> <Percentage>{gridAprPercentage}%</Percentage>
</div> </div>
</Stats>
</StrategyContainer> <div>
) <StatsTitle>Current Price</StatsTitle>
} <div>{stats.currentPrice}</div>
</div>
<div>
<StatsTitle>Price Range</StatsTitle>
<div>
{stats.lowestPrice}~{stats.highestPrice}
</div>
</div>
</Stats>
</StrategyContainer>
);
}