mirror of
https://github.com/c9s/bbgo.git
synced 2024-09-20 08:11:08 +00:00
backtest-report: add order list table and support visible range selection
Signed-off-by: c9s <yoanlin93@gmail.com>
This commit is contained in:
parent
f16fad4ca1
commit
2eca045245
|
@ -5,7 +5,7 @@ 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} from 'lightweight-charts';
|
import {createChart, CrosshairMode, MouseEventParams, TimeRange} from 'lightweight-charts';
|
||||||
import {ReportSummary} from "../types";
|
import {ReportSummary} from "../types";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
|
||||||
|
@ -494,9 +494,6 @@ 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({
|
chart.current.timeScale().setVisibleRange({
|
||||||
|
@ -560,18 +557,40 @@ const TradingViewChart = (props: TradingViewChartProps) => {
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<OrderListTable orders={orders}/>
|
<OrderListTable orders={orders} onClick={(order) => {
|
||||||
|
console.log("selected order", order);
|
||||||
|
const visibleRange = chart.current.timeScale().getVisibleRange()
|
||||||
|
const seconds = parseInterval(currentInterval)
|
||||||
|
const bars = 12
|
||||||
|
const orderTime = order.creation_time.getTime() / 1000
|
||||||
|
const from = orderTime - bars * seconds
|
||||||
|
const to = orderTime + bars * seconds
|
||||||
|
|
||||||
|
console.log("orderTime", orderTime)
|
||||||
|
console.log("visibleRange", visibleRange)
|
||||||
|
console.log("setVisibleRange", from, to, to - from)
|
||||||
|
chart.current.timeScale().setVisibleRange({ from, to } as TimeRange);
|
||||||
|
// chart.current.timeScale().scrollToPosition(20, true);
|
||||||
|
}}/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
interface OrderListTableProps {
|
interface OrderListTableProps {
|
||||||
orders: Order[];
|
orders: Order[];
|
||||||
|
onClick?: (order: Order) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const OrderListTable = (props: OrderListTableProps) => {
|
const OrderListTable = (props: OrderListTableProps) => {
|
||||||
const rows = props.orders.map((order: Order) => (
|
const rows = props.orders.map((order: Order) => (
|
||||||
<tr key={order.order_id}>
|
<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.order_id}</td>
|
||||||
<td>{order.symbol}</td>
|
<td>{order.symbol}</td>
|
||||||
<td>{order.side}</td>
|
<td>{order.side}</td>
|
||||||
|
@ -582,7 +601,7 @@ const OrderListTable = (props: OrderListTableProps) => {
|
||||||
<td>{order.creation_time.toString()}</td>
|
<td>{order.creation_time.toString()}</td>
|
||||||
</tr>
|
</tr>
|
||||||
));
|
));
|
||||||
return <Table>
|
return <Table highlightOnHover striped>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Order ID</th>
|
<th>Order ID</th>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user