mirror of
https://github.com/c9s/bbgo.git
synced 2024-09-20 08:11:08 +00:00
backtest-report: add order list table
Signed-off-by: c9s <yoanlin93@gmail.com>
This commit is contained in:
parent
2fd7af1a90
commit
f16fad4ca1
|
@ -1,6 +1,6 @@
|
||||||
import React, {useEffect, useRef, useState} from 'react';
|
import React, {useEffect, useRef, useState} from 'react';
|
||||||
import {tsvParse} from "d3-dsv";
|
import {tsvParse} from "d3-dsv";
|
||||||
import {Checkbox, Group, SegmentedControl} from '@mantine/core';
|
import {Checkbox, Group, SegmentedControl, Table} from '@mantine/core';
|
||||||
|
|
||||||
|
|
||||||
// https://github.com/tradingview/lightweight-charts/issues/543
|
// https://github.com/tradingview/lightweight-charts/issues/543
|
||||||
|
@ -128,8 +128,10 @@ const parseInterval = (s: string) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
interface Order {
|
interface Order {
|
||||||
|
order_id: number;
|
||||||
order_type: string;
|
order_type: string;
|
||||||
side: string;
|
side: string;
|
||||||
|
symbol: string;
|
||||||
price: number;
|
price: number;
|
||||||
quantity: number;
|
quantity: number;
|
||||||
executed_quantity: number;
|
executed_quantity: number;
|
||||||
|
@ -147,7 +149,7 @@ interface Marker {
|
||||||
text: string;
|
text: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ordersToMarkets = (interval: string, orders: Array<Order> | void): Array<Marker> => {
|
const ordersToMarkers = (interval: string, orders: Array<Order> | void): Array<Marker> => {
|
||||||
const markers: Array<Marker> = [];
|
const markers: Array<Marker> = [];
|
||||||
const intervalSecs = parseInterval(interval);
|
const intervalSecs = parseInterval(interval);
|
||||||
|
|
||||||
|
@ -376,9 +378,9 @@ const TradingViewChart = (props: TradingViewChartProps) => {
|
||||||
const resizeObserver = useRef<any>();
|
const resizeObserver = useRef<any>();
|
||||||
const intervals = props.reportSummary.intervals || [];
|
const intervals = props.reportSummary.intervals || [];
|
||||||
const [currentInterval, setCurrentInterval] = useState(intervals.length > 0 ? intervals[0] : '1m');
|
const [currentInterval, setCurrentInterval] = useState(intervals.length > 0 ? intervals[0] : '1m');
|
||||||
|
|
||||||
const [showPositionBase, setShowPositionBase] = useState(false);
|
const [showPositionBase, setShowPositionBase] = useState(false);
|
||||||
const [showPositionAverageCost, setShowPositionAverageCost] = useState(false);
|
const [showPositionAverageCost, setShowPositionAverageCost] = useState(false);
|
||||||
|
const [orders, setOrders] = useState<Order[]>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!chartContainerRef.current || chartContainerRef.current.children.length > 0) {
|
if (!chartContainerRef.current || chartContainerRef.current.children.length > 0) {
|
||||||
|
@ -387,10 +389,13 @@ const TradingViewChart = (props: TradingViewChartProps) => {
|
||||||
|
|
||||||
const chartData: any = {};
|
const chartData: any = {};
|
||||||
const fetchers = [];
|
const fetchers = [];
|
||||||
const ordersFetcher = fetchOrders(props.basePath, props.runID).then((orders) => {
|
const ordersFetcher = fetchOrders(props.basePath, props.runID).then((orders: Order[] | void) => {
|
||||||
const markers = ordersToMarkets(currentInterval, orders);
|
if (orders) {
|
||||||
chartData.orders = orders;
|
const markers = ordersToMarkers(currentInterval, orders);
|
||||||
chartData.markers = markers;
|
chartData.orders = orders;
|
||||||
|
chartData.markers = markers;
|
||||||
|
setOrders(orders);
|
||||||
|
}
|
||||||
return orders;
|
return orders;
|
||||||
});
|
});
|
||||||
fetchers.push(ordersFetcher);
|
fetchers.push(ordersFetcher);
|
||||||
|
@ -488,8 +493,17 @@ const TradingViewChart = (props: TradingViewChartProps) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
chart.current.timeScale().fitContent();
|
chart.current.timeScale().fitContent();
|
||||||
|
chart.current.timeScale().scrollToPosition(20, true);
|
||||||
|
const visibleRange = chart.current.timeScale().getVisibleRange()
|
||||||
|
console.log("visibleRange", visibleRange)
|
||||||
|
|
||||||
|
/*
|
||||||
|
chart.current.timeScale().setVisibleRange({
|
||||||
|
from: (new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0))).getTime() / 1000,
|
||||||
|
to: (new Date(Date.UTC(2018, 1, 1, 0, 0, 0, 0))).getTime() / 1000,
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
// see:
|
// see:
|
||||||
// https://codesandbox.io/s/9inkb?file=/src/styles.css
|
// https://codesandbox.io/s/9inkb?file=/src/styles.css
|
||||||
|
@ -545,10 +559,46 @@ const TradingViewChart = (props: TradingViewChartProps) => {
|
||||||
<div ref={chartContainerRef} style={{'flex': 1, 'minHeight': 500, position: 'relative'}}>
|
<div ref={chartContainerRef} style={{'flex': 1, 'minHeight': 500, position: 'relative'}}>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<OrderListTable orders={orders}/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
interface OrderListTableProps {
|
||||||
|
orders: Order[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const OrderListTable = (props: OrderListTableProps) => {
|
||||||
|
const rows = props.orders.map((order: Order) => (
|
||||||
|
<tr key={order.order_id}>
|
||||||
|
<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>
|
||||||
|
<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}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user