add trades panel

frontend/pages/orders.js

@@ -15,13 +15,13 @@ const columns = [
     {field: 'symbol', headerName: 'Symbol'},
     {field: 'orderType', headerName: 'Type'},
     {field: 'side', headerName: 'Side', width: 90},
-    {field: 'averagePrice', headerName: 'Average Price', type: 'number'},
+    {field: 'averagePrice', headerName: 'Average Price', type: 'number', width: 120 },
     {field: 'quantity', headerName: 'Quantity', type: 'number'},
     {field: 'executedQuantity', headerName: 'Executed Quantity', type: 'number'},
     {field: 'status', headerName: 'Status'},
     {field: 'isMargin', headerName: 'Margin'},
     {field: 'isIsolated', headerName: 'Isolated'},
-    {field: 'creationTime', headerName: 'Create Time'},
+    {field: 'creationTime', headerName: 'Create Time', width: 200},
 ];
 
 const useStyles = makeStyles((theme) => ({

frontend/pages/trades.js

@@ -0,0 +1,57 @@
+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 {queryTrades} from '../api/bbgo';
+import {DataGrid} from '@material-ui/data-grid';
+
+const columns = [
+    {field: 'gid', headerName: 'GID', width: 80, type: 'number'},
+    {field: 'exchange', headerName: 'Exchange'},
+    {field: 'symbol', headerName: 'Symbol'},
+    {field: 'side', headerName: 'Side', width: 90},
+    {field: 'price', headerName: 'Price', type: 'number', width: 120 },
+    {field: 'quantity', headerName: 'Quantity', type: 'number'},
+    {field: 'isMargin', headerName: 'Margin'},
+    {field: 'isIsolated', headerName: 'Isolated'},
+    {field: 'tradedAt', headerName: 'Trade Time', width: 200},
+];
+
+const useStyles = makeStyles((theme) => ({
+    paper: {
+        padding: theme.spacing(2),
+    },
+}));
+
+export default function Trades() {
+    const classes = useStyles();
+
+    const [trades, setTrades] = useState([])
+
+    useEffect(() => {
+        queryTrades({}, (trades) => {
+            setTrades(trades.map((o) => { o.id = o.gid; return o }))
+        })
+    }, [])
+
+    return (
+        <Container>
+            <Box m={4}>
+                <Paper className={classes.paper}>
+                    <Typography variant="h4" component="h2" gutterBottom>
+                        Trades
+                    </Typography>
+                </Paper>
+                <DataGrid
+                    rows={trades}
+                    columns={columns}
+                    pageSize={50}
+                    autoHeight={true}/>
+            </Box>
+        </Container>
+    );
+}
+