backtest: pull out OrderListTable

This commit is contained in:
c9s 2022-06-27 16:17:06 +08:00
parent dfdfd6b85e
commit ec3ac4e077
No known key found for this signature in database
GPG Key ID: 7385E7E464CB0A54
4 changed files with 84 additions and 71 deletions

View 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;

View File

@ -5,10 +5,12 @@ import {Checkbox, Group, SegmentedControl, Table} from '@mantine/core';
// https://github.com/tradingview/lightweight-charts/issues/543
// const createChart = dynamic(() => import('lightweight-charts'));
import {createChart, CrosshairMode, MouseEventParams, TimeRange} from 'lightweight-charts';
import {ReportSummary} from "../types";
import {ReportSummary, Order} from "../types";
import moment from "moment";
import {format} from 'date-fns';
import OrderListTable from './OrderListTable';
// See https://codesandbox.io/s/ve7w2?file=/src/App.js
import TimeRangeSlider from './TimeRangeSlider';
@ -147,19 +149,6 @@ const parseInterval = (s: string) => {
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 {
time: number;
@ -602,12 +591,7 @@ const TradingViewChart = (props: TradingViewChartProps) => {
}}
/>
<Group>
<Checkbox label="Show Canceled" checked={showCanceledOrders}
onChange={(event) => setShowCanceledOrders(event.currentTarget.checked)}/>
</Group>
<OrderListTable orders={orders} showCanceled={showCanceledOrders} onClick={(order) => {
<OrderListTable orders={orders} onClick={(order) => {
console.log("selected order", order);
const visibleRange = chart.current.timeScale().getVisibleRange()
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) => {
return a.map((k) => {
return {time: k.time, value: k.close}

View File

@ -1 +1,3 @@
export * from './report';
export * from './order';
export * from './market';

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