lychiyu/bbgo_origin
1
0
Fork 0
mirror of https://github.com/c9s/bbgo.git synced 2024-11-10 09:11:55 +00:00
Code Issues Actions 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

56
frontend/api/bbgo.ts
View File

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

1
frontend/components/SideBar.js
View File

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

22
frontend/components/SyncButton.tsx
View File

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

12
frontend/hooks/useInterval.ts
View File

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

151
frontend/pages/strategies.tsx
View File

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