diff --git a/frontend/api/bbgo.js b/frontend/api/bbgo.js index c03dff1ef..bcb27a342 100644 --- a/frontend/api/bbgo.js +++ b/frontend/api/bbgo.js @@ -9,6 +9,13 @@ export function querySessions(cb) { }); } +export function queryOrders(params, cb) { + axios.get(baseURL + '/api/orders', { params: params }) + .then(response => { + cb(response.data.orders) + }); +} + export function queryAssets(cb) { axios.get(baseURL + '/api/assets', {}) .then(response => { diff --git a/frontend/package.json b/frontend/package.json index 368fd1833..d8bdbe11b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@material-ui/core": "^4.11.2", + "@material-ui/data-grid": "^4.0.0-alpha.18", "@material-ui/icons": "^4.11.2", "@nivo/bar": "^0.67.0", "@nivo/core": "^0.67.0", diff --git a/frontend/pages/orders.js b/frontend/pages/orders.js index 6d0920dc9..0e8513141 100644 --- a/frontend/pages/orders.js +++ b/frontend/pages/orders.js @@ -1,10 +1,28 @@ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import {makeStyles} from '@material-ui/core/styles'; import Container from '@material-ui/core/Container'; import Typography from '@material-ui/core/Typography'; import Box from '@material-ui/core/Box'; import Paper from '@material-ui/core/Paper'; +import {queryOrders} from '../api/bbgo'; +import {DataGrid} from '@material-ui/data-grid'; + +const columns = [ + {field: 'gid', headerName: 'GID', width: 80, type: 'number'}, + {field: 'clientOrderID', headerName: 'Client Order ID', width: 130 }, + {field: 'exchange', headerName: 'Exchange'}, + {field: 'symbol', headerName: 'Symbol'}, + {field: 'orderType', headerName: 'Type'}, + {field: 'side', headerName: 'Side', width: 90}, + {field: 'price', headerName: 'Price', width: 120, type: 'number'}, + {field: 'quantity', headerName: 'Quantity', width: 120, type: 'number'}, + {field: 'executedQuantity', headerName: 'Executed Quantity', width: 120, type: 'number'}, + {field: 'status', headerName: 'Status'}, + {field: 'isMargin', headerName: 'Margin'}, + {field: 'isIsolated', headerName: 'Isolated'}, + {field: 'creationTime', headerName: 'Create Time'}, +]; const useStyles = makeStyles((theme) => ({ paper: { @@ -15,6 +33,14 @@ const useStyles = makeStyles((theme) => ({ export default function Orders() { const classes = useStyles(); + const [orders, setOrders] = useState([]) + + useEffect(() => { + queryOrders({}, (orders) => { + setOrders(orders.map((o) => { o.id = o.gid; return o })) + }) + }, []) + return ( @@ -23,6 +49,12 @@ export default function Orders() { Orders + ); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 39d23d273..1b2b49126 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -143,6 +143,15 @@ react-is "^16.8.0 || ^17.0.0" react-transition-group "^4.4.0" +"@material-ui/data-grid@^4.0.0-alpha.18": + version "4.0.0-alpha.18" + resolved "https://registry.yarnpkg.com/@material-ui/data-grid/-/data-grid-4.0.0-alpha.18.tgz#d078a518dd5671f0d1d3fe2de8449b94b8547e9f" + integrity sha512-t4wikroS2s3Aj+zM/mDfG5+8gfF2okUffKRppIqZQVIn+n3K4pAexWC10wqc8ohNFzBEgGzwQjTXEt+Hy2PX0A== + dependencies: + "@material-ui/utils" "^5.0.0-alpha.14" + prop-types "^15.7.2" + reselect "^4.0.0" + "@material-ui/icons@^4.11.2": version "4.11.2" resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" @@ -196,6 +205,17 @@ prop-types "^15.7.2" react-is "^16.8.0 || ^17.0.0" +"@material-ui/utils@^5.0.0-alpha.14": + version "5.0.0-alpha.24" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-5.0.0-alpha.24.tgz#4d25895581ef5daaf965c06ca40a2ad108ca5309" + integrity sha512-di0zaQKHiRi6NwPAt/4mRNfUYTa5aWVTqfzTYN/OdnQTGtOLPPFo9Om+uYgkunZIOa3lsahveo6ieH/YgFnJfQ== + dependencies: + "@babel/runtime" "^7.4.4" + "@types/prop-types" "^15.7.3" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + "@next/env@10.0.5": version "10.0.5" resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.5.tgz#446e59ee7a8d05061be784b24732c369653038ab" @@ -431,11 +451,18 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.22.tgz#0d29f382472c4ccf3bd96ff0ce47daf5b7b84b18" integrity sha512-g+f/qj/cNcqKkc3tFqlXOYjrmZA+jNBiDzbP3kH+B+otKFqAdPgVTGP1IeKRdMml/aE69as5S4FqtxAbl+LaMw== -"@types/prop-types@*": +"@types/prop-types@*", "@types/prop-types@^15.7.3": version "15.7.3" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.0" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.0.tgz#6b60190ae60591ae0c83d6f3854e61e08f5a7976" + integrity sha512-A0DQ1YWZ0RG2+PV7neAotNCIh8gZ3z7tQnDJyS2xRPDNtAtSPcJ9YyfMP8be36Ha0kQRzbZCrrTMznA4blqO5g== + dependencies: + "@types/react" "*" + "@types/react-transition-group@^4.2.0": version "4.4.0" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d" @@ -4161,6 +4188,11 @@ repeat-string@^1.6.1: resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637" integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc= +reselect@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7" + integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA== + resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"