mirror of
https://github.com/c9s/bbgo.git
synced 2024-11-10 09:11:55 +00:00
Improve backtest report ui
This commit is contained in:
parent
9f5575f1ef
commit
0ad62c5b58
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -36,6 +36,7 @@
|
|||
|
||||
bbgo.sqlite3
|
||||
node_modules
|
||||
output
|
||||
|
||||
otp*png
|
||||
|
||||
|
|
|
@ -50,35 +50,34 @@ function StatsGridIcons({data}: StatsGridIconsProps) {
|
|||
const DiffIcon = stat.diff && stat.diff > 0 ? ArrowUpRight : ArrowDownRight;
|
||||
const DirIcon = stat.dir && stat.dir == "up" ? ArrowUpRight : ArrowDownRight;
|
||||
|
||||
return (
|
||||
return (
|
||||
<Paper withBorder p="xs" radius="md" key={stat.title}>
|
||||
<Group position="apart">
|
||||
<Group position="left">
|
||||
<div>
|
||||
<Text
|
||||
color="dimmed"
|
||||
transform="uppercase"
|
||||
weight={700}
|
||||
size="xs"
|
||||
className={classes.label}
|
||||
>
|
||||
{stat.title}
|
||||
{stat.dir ?
|
||||
<ThemeIcon
|
||||
color="gray"
|
||||
variant="light"
|
||||
sx={(theme) => ({color: stat.dir == "up" ? theme.colors.teal[6] : theme.colors.red[6]})}
|
||||
size={16}
|
||||
radius="sx"
|
||||
>
|
||||
<DirIcon size={16}/>
|
||||
</ThemeIcon>
|
||||
: null}
|
||||
</Text>
|
||||
<Text weight={700} size="xl">
|
||||
<Text weight={700} size="xs">
|
||||
{stat.value}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{stat.dir ?
|
||||
<ThemeIcon
|
||||
color="gray"
|
||||
variant="light"
|
||||
sx={(theme) => ({color: stat.dir == "up" ? theme.colors.teal[6] : theme.colors.red[6]})}
|
||||
size={38}
|
||||
radius="md"
|
||||
>
|
||||
<DirIcon size={28}/>
|
||||
</ThemeIcon>
|
||||
: null}
|
||||
|
||||
{stat.diff ?
|
||||
<ThemeIcon
|
||||
|
@ -112,8 +111,8 @@ function StatsGridIcons({data}: StatsGridIconsProps) {
|
|||
});
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<SimpleGrid cols={4} breakpoints={[{maxWidth: 'sm', cols: 1}]}>
|
||||
<div py="xl">
|
||||
<SimpleGrid cols={5} breakpoints={[{maxWidth: 'sm', cols: 1, spacing: 'xl'}]}>
|
||||
{stats}
|
||||
</SimpleGrid>
|
||||
</div>
|
||||
|
@ -151,7 +150,7 @@ const BalanceDetails = (props: BalanceDetailsProps) => {
|
|||
</tr>;
|
||||
});
|
||||
|
||||
return <Table>
|
||||
return <Table verticalSpacing="xs" fontSize="xs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Currency</th>
|
||||
|
@ -177,6 +176,8 @@ const ReportDetails = (props: ReportDetailsProps) => {
|
|||
</div>;
|
||||
}
|
||||
|
||||
const strategyName = props.runID.split("_")[1]
|
||||
const runID = props.runID.split("_").pop()
|
||||
const totalProfit = Math.round(reportSummary.symbolReports.map((report) => report.pnl.profit).reduce((prev, cur) => prev + cur) * 100) / 100
|
||||
const totalUnrealizedProfit = Math.round(reportSummary.symbolReports.map((report) => report.pnl.unrealizedProfit).reduce((prev, cur) => prev + cur) * 100) / 100
|
||||
const totalTrades = reportSummary.symbolReports.map((report) => report.pnl.numTrades).reduce((prev, cur) => prev + cur) || 0
|
||||
|
@ -187,36 +188,36 @@ const ReportDetails = (props: ReportDetailsProps) => {
|
|||
const volumeUnit = reportSummary.symbolReports.length == 1 ? reportSummary.symbolReports[0].market.baseCurrency : '';
|
||||
|
||||
return <div>
|
||||
<Container my="md" mx="xs">
|
||||
<Title order={2}>RUN {props.runID}</Title>
|
||||
<Container my="sx">
|
||||
<div>
|
||||
{reportSummary.sessions.map((session) => <Badge key={session}>Exchange {session}</Badge>)}
|
||||
{reportSummary.symbols.map((symbol) => <Badge key={symbol}>{symbol}</Badge>)}
|
||||
<Badge key={strategyName} color="teal">Strategy: {strategyName}</Badge>
|
||||
{reportSummary.sessions.map((session) => <Badge key={session} color="teal">Exchange: {session}</Badge>)}
|
||||
{reportSummary.symbols.map((symbol) => <Badge key={symbol} color="teal">Symbol: {symbol}</Badge>)}
|
||||
|
||||
<Badge>{reportSummary.startTime.toString()} ~ {reportSummary.endTime.toString()}</Badge>
|
||||
<Badge>{
|
||||
<Badge color="teal">{reportSummary.startTime.toString()} — {reportSummary.endTime.toString()} ~ {
|
||||
moment.duration((new Date(reportSummary.endTime)).getTime() - (new Date(reportSummary.startTime)).getTime()).humanize()
|
||||
}</Badge>
|
||||
<Badge key={runID} color="gray" size="xs">Run ID: {runID}</Badge>
|
||||
</div>
|
||||
<StatsGridIcons data={[
|
||||
{title: "Profit", value: "$" + totalProfit.toString(), dir: totalProfit > 0 ? "up" : "down"},
|
||||
{title: "Profit", value: "$" + totalProfit.toString(), dir: totalProfit >= 0 ? "up" : "down"},
|
||||
{
|
||||
title: "Unrealized Profit",
|
||||
value: "$" + totalUnrealizedProfit.toString(),
|
||||
title: "Unr. Profit",
|
||||
value: totalUnrealizedProfit.toString() + "$",
|
||||
dir: totalUnrealizedProfit > 0 ? "up" : "down"
|
||||
},
|
||||
{title: "Trades", value: totalTrades.toString()},
|
||||
{title: "Buy Volume", value: totalBuyVolume.toString() + ` ${volumeUnit}`},
|
||||
{title: "Sell Volume", value: totalSellVolume.toString() + ` ${volumeUnit}`},
|
||||
{title: "Buy Vol", value: totalBuyVolume.toString() + ` ${volumeUnit}`},
|
||||
{title: "Sell Vol", value: totalSellVolume.toString() + ` ${volumeUnit}`},
|
||||
]}/>
|
||||
|
||||
<Grid p={"xs"} mb={"lg"}>
|
||||
<Grid py="xl">
|
||||
<Grid.Col xs={6}>
|
||||
<Title order={5}>Initial Total Balances</Title>
|
||||
<Title order={6}>Initial Total Balances</Title>
|
||||
<BalanceDetails balances={reportSummary.initialTotalBalances}/>
|
||||
</Grid.Col>
|
||||
<Grid.Col xs={6}>
|
||||
<Title order={5}>Final Total Balances</Title>
|
||||
<Title order={6}>Final Total Balances</Title>
|
||||
<BalanceDetails balances={reportSummary.finalTotalBalances}/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
|
|
@ -11,6 +11,7 @@ function fetchIndex(basePath: string, setter: (data: any) => void) {
|
|||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
console.log("reportIndex", data);
|
||||
data.runs.reverse() // last reports render first
|
||||
setter(data);
|
||||
})
|
||||
.catch((e) => {
|
||||
|
@ -47,7 +48,7 @@ const ReportNavigator = (props: ReportNavigatorProps) => {
|
|||
size="xs"
|
||||
center
|
||||
icon={
|
||||
<ThemeIcon color="teal" size={24} radius="xl">
|
||||
<ThemeIcon color="teal" size={16} radius="xl">
|
||||
<CircleCheck size={16}/>
|
||||
</ThemeIcon>
|
||||
}
|
||||
|
|
|
@ -173,9 +173,9 @@ const ordersToMarkets = (interval: string, orders: Array<Order> | void): Array<M
|
|||
time: t,
|
||||
position: 'belowBar',
|
||||
color: '#239D10',
|
||||
shape: 'arrowDown',
|
||||
// text: 'Buy @ ' + order.price
|
||||
text: 'B',
|
||||
shape: 'arrowUp',
|
||||
text: ''+order.price
|
||||
//text: 'B',
|
||||
});
|
||||
break;
|
||||
case "SELL":
|
||||
|
@ -184,8 +184,8 @@ const ordersToMarkets = (interval: string, orders: Array<Order> | void): Array<M
|
|||
position: 'aboveBar',
|
||||
color: '#e91e63',
|
||||
shape: 'arrowDown',
|
||||
// text: 'Sell @ ' + order.price
|
||||
text: 'S',
|
||||
text: ''+order.price
|
||||
//text: 'S',
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
|
|
@ -22,7 +22,7 @@ const Home: NextPage = () => {
|
|||
</Head>
|
||||
<main className={styles.main}>
|
||||
<AppShell
|
||||
padding="md"
|
||||
padding="xm"
|
||||
navbar={<Navbar width={{base: 250}} height={500} p="xs">
|
||||
|
||||
<ReportNavigator onSelect={(reportEntry) => {
|
||||
|
@ -31,7 +31,7 @@ const Home: NextPage = () => {
|
|||
|
||||
</Navbar>}
|
||||
header={
|
||||
<Header height={60} p="md">
|
||||
<Header height={50} p="sm">
|
||||
<Text>BBGO Back-Test Report</Text>
|
||||
</Header>
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user