Improve backtest report ui

This commit is contained in:
Сиденко Кирилл Сергеевич 2022-06-05 12:46:43 +07:00
parent 9f5575f1ef
commit 0ad62c5b58
5 changed files with 43 additions and 40 deletions

1
.gitignore vendored
View File

@ -36,6 +36,7 @@
bbgo.sqlite3
node_modules
output
otp*png

View File

@ -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>

View File

@ -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>
}

View File

@ -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;
}

View File

@ -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>
}