mirror of
https://github.com/c9s/bbgo.git
synced 2024-09-20 08:11:08 +00:00
backtest: pull out OrderListTable
This commit is contained in:
parent
dfdfd6b85e
commit
ec3ac4e077
64
apps/backtest-report/components/OrderListTable.tsx
Normal file
64
apps/backtest-report/components/OrderListTable.tsx
Normal file
|
@ -0,0 +1,64 @@
|
||||||
|
import {Checkbox, Group, Table} from "@mantine/core";
|
||||||
|
import React, {useState} from "react";
|
||||||
|
import {Order} from "../types";
|
||||||
|
|
||||||
|
interface OrderListTableProps {
|
||||||
|
orders: Order[];
|
||||||
|
onClick?: (order: Order) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const OrderListTable = (props: OrderListTableProps) => {
|
||||||
|
let orders = props.orders;
|
||||||
|
const [showCanceledOrders, setShowCanceledOrders] = useState(false);
|
||||||
|
|
||||||
|
if (!showCanceledOrders) {
|
||||||
|
orders = orders.filter((order: Order) => {
|
||||||
|
return order.status != "CANCELED"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const rows = orders.map((order: Order) => (
|
||||||
|
<tr key={order.order_id} onClick={(e) => {
|
||||||
|
props.onClick ? props.onClick(order) : null;
|
||||||
|
const nodes = e.currentTarget?.parentNode?.querySelectorAll(".selected")
|
||||||
|
nodes?.forEach((node, i) => {
|
||||||
|
node.classList.remove("selected")
|
||||||
|
})
|
||||||
|
e.currentTarget.classList.add("selected")
|
||||||
|
}}>
|
||||||
|
<td>{order.order_id}</td>
|
||||||
|
<td>{order.symbol}</td>
|
||||||
|
<td>{order.side}</td>
|
||||||
|
<td>{order.order_type}</td>
|
||||||
|
<td>{order.price}</td>
|
||||||
|
<td>{order.quantity}</td>
|
||||||
|
<td>{order.status}</td>
|
||||||
|
<td>{order.creation_time.toString()}</td>
|
||||||
|
</tr>
|
||||||
|
));
|
||||||
|
|
||||||
|
return <div>
|
||||||
|
<Group>
|
||||||
|
<Checkbox label="Show Canceled" checked={showCanceledOrders}
|
||||||
|
onChange={(event) => setShowCanceledOrders(event.currentTarget.checked)}/>
|
||||||
|
|
||||||
|
</Group>
|
||||||
|
<Table highlightOnHover striped>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Order ID</th>
|
||||||
|
<th>Symbol</th>
|
||||||
|
<th>Side</th>
|
||||||
|
<th>Order Type</th>
|
||||||
|
<th>Price</th>
|
||||||
|
<th>Quantity</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Creation Time</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>{rows}</tbody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default OrderListTable;
|
|
@ -5,10 +5,12 @@ import {Checkbox, Group, SegmentedControl, Table} from '@mantine/core';
|
||||||
// https://github.com/tradingview/lightweight-charts/issues/543
|
// https://github.com/tradingview/lightweight-charts/issues/543
|
||||||
// const createChart = dynamic(() => import('lightweight-charts'));
|
// const createChart = dynamic(() => import('lightweight-charts'));
|
||||||
import {createChart, CrosshairMode, MouseEventParams, TimeRange} from 'lightweight-charts';
|
import {createChart, CrosshairMode, MouseEventParams, TimeRange} from 'lightweight-charts';
|
||||||
import {ReportSummary} from "../types";
|
import {ReportSummary, Order} from "../types";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import {format} from 'date-fns';
|
import {format} from 'date-fns';
|
||||||
|
|
||||||
|
import OrderListTable from './OrderListTable';
|
||||||
|
|
||||||
// See https://codesandbox.io/s/ve7w2?file=/src/App.js
|
// See https://codesandbox.io/s/ve7w2?file=/src/App.js
|
||||||
import TimeRangeSlider from './TimeRangeSlider';
|
import TimeRangeSlider from './TimeRangeSlider';
|
||||||
|
|
||||||
|
@ -147,19 +149,6 @@ const parseInterval = (s: string) => {
|
||||||
return 60;
|
return 60;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface Order {
|
|
||||||
order_id: number;
|
|
||||||
order_type: string;
|
|
||||||
side: string;
|
|
||||||
symbol: string;
|
|
||||||
price: number;
|
|
||||||
quantity: number;
|
|
||||||
executed_quantity: number;
|
|
||||||
status: string;
|
|
||||||
update_time: Date;
|
|
||||||
creation_time: Date;
|
|
||||||
time?: Date;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Marker {
|
interface Marker {
|
||||||
time: number;
|
time: number;
|
||||||
|
@ -602,12 +591,7 @@ const TradingViewChart = (props: TradingViewChartProps) => {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Group>
|
<OrderListTable orders={orders} onClick={(order) => {
|
||||||
<Checkbox label="Show Canceled" checked={showCanceledOrders}
|
|
||||||
onChange={(event) => setShowCanceledOrders(event.currentTarget.checked)}/>
|
|
||||||
|
|
||||||
</Group>
|
|
||||||
<OrderListTable orders={orders} showCanceled={showCanceledOrders} onClick={(order) => {
|
|
||||||
console.log("selected order", order);
|
console.log("selected order", order);
|
||||||
const visibleRange = chart.current.timeScale().getVisibleRange()
|
const visibleRange = chart.current.timeScale().getVisibleRange()
|
||||||
const seconds = parseInterval(currentInterval)
|
const seconds = parseInterval(currentInterval)
|
||||||
|
@ -626,57 +610,6 @@ const TradingViewChart = (props: TradingViewChartProps) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
interface OrderListTableProps {
|
|
||||||
orders: Order[];
|
|
||||||
showCanceled: boolean;
|
|
||||||
onClick?: (order: Order) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const OrderListTable = (props: OrderListTableProps) => {
|
|
||||||
let orders = props.orders;
|
|
||||||
|
|
||||||
if (!props.showCanceled) {
|
|
||||||
orders = orders.filter((order: Order) => {
|
|
||||||
return order.status != "CANCELED"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows = orders.map((order: Order) => (
|
|
||||||
<tr key={order.order_id} onClick={(e) => {
|
|
||||||
props.onClick ? props.onClick(order) : null;
|
|
||||||
const nodes = e.currentTarget?.parentNode?.querySelectorAll(".selected")
|
|
||||||
nodes?.forEach((node, i) => {
|
|
||||||
node.classList.remove("selected")
|
|
||||||
})
|
|
||||||
e.currentTarget.classList.add("selected")
|
|
||||||
}}>
|
|
||||||
<td>{order.order_id}</td>
|
|
||||||
<td>{order.symbol}</td>
|
|
||||||
<td>{order.side}</td>
|
|
||||||
<td>{order.order_type}</td>
|
|
||||||
<td>{order.price}</td>
|
|
||||||
<td>{order.quantity}</td>
|
|
||||||
<td>{order.status}</td>
|
|
||||||
<td>{order.creation_time.toString()}</td>
|
|
||||||
</tr>
|
|
||||||
));
|
|
||||||
return <Table highlightOnHover striped>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Order ID</th>
|
|
||||||
<th>Symbol</th>
|
|
||||||
<th>Side</th>
|
|
||||||
<th>Order Type</th>
|
|
||||||
<th>Price</th>
|
|
||||||
<th>Quantity</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Creation Time</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>{rows}</tbody>
|
|
||||||
</Table>
|
|
||||||
}
|
|
||||||
|
|
||||||
const calculateEMA = (a: KLine[], r: number) => {
|
const calculateEMA = (a: KLine[], r: number) => {
|
||||||
return a.map((k) => {
|
return a.map((k) => {
|
||||||
return {time: k.time, value: k.close}
|
return {time: k.time, value: k.close}
|
||||||
|
|
|
@ -1 +1,3 @@
|
||||||
export * from './report';
|
export * from './report';
|
||||||
|
export * from './order';
|
||||||
|
export * from './market';
|
||||||
|
|
14
apps/backtest-report/types/order.ts
Normal file
14
apps/backtest-report/types/order.ts
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
|
||||||
|
export interface Order {
|
||||||
|
order_id: number;
|
||||||
|
order_type: string;
|
||||||
|
side: string;
|
||||||
|
symbol: string;
|
||||||
|
price: number;
|
||||||
|
quantity: number;
|
||||||
|
executed_quantity: number;
|
||||||
|
status: string;
|
||||||
|
update_time: Date;
|
||||||
|
creation_time: Date;
|
||||||
|
time?: Date;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user