add exchange session panel

frontend/api/bbgo.js

@@ -2,6 +2,13 @@ import axios from "axios";
 
 const baseURL = process.env.NODE_ENV === "development" ? "http://localhost:8080" : ""
 
+export function querySessions(cb) {
+    axios.get(baseURL + '/api/sessions', {})
+        .then(response => {
+            cb(response.data.sessions)
+        });
+}
+
 export function queryAssets(cb) {
     axios.get(baseURL + '/api/assets', {})
         .then(response => {

frontend/components/ExchangeSessionTabPanel.js

@@ -0,0 +1,41 @@
+import Paper from "@material-ui/core/Paper";
+import Box from "@material-ui/core/Box";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import Link from "@material-ui/core/Link";
+import React, {useEffect, useState} from "react";
+import {querySessions} from '../api/bbgo'
+
+export default function ExchangeSessionTabPanel() {
+    const [tabIndex, setTabIndex] = React.useState(0);
+    const handleTabClick = (event, newValue) => {
+        setTabIndex(newValue);
+    };
+
+    const [sessions, setSessions] = useState({})
+
+    useEffect(() => {
+        querySessions((sessions) => {
+            setSessions(sessions)
+        })
+    }, [])
+
+    return <Paper>
+        <Box m={4}>
+            <Tabs
+                value={tabIndex}
+                onChange={handleTabClick}
+                indicatorColor="primary"
+                textColor="primary"
+            >
+                <Tab label="Item One"/>
+                <Tab label="Item Two"/>
+                <Tab label="Item Three"/>
+            </Tabs>
+
+            <Link href="/about" color="secondary">
+                Go to the about page
+            </Link>
+        </Box>
+    </Paper>
+}

frontend/components/TotalAssetsPie.js

@@ -2,34 +2,7 @@ import React, {useEffect, useState} from 'react';
 
 import {ResponsivePie} from '@nivo/pie';
 import {queryAssets} from '../api/bbgo';
-
-function currencyColor(currency) {
-    switch (currency) {
-        case "BTC":
-            return "#f69c3d"
-        case "ETH":
-            return "#497493"
-        case "MCO":
-            return "#032144"
-        case "OMG":
-            return "#2159ec"
-        case "LTC":
-            return "#949494"
-        case "USDT":
-            return "#2ea07b"
-        case "SAND":
-            return "#2E9AD0"
-        case "XRP":
-            return "#00AAE4"
-        case "BCH":
-            return "#8DC351"
-        case "MAX":
-            return "#2D4692"
-        case "TWD":
-            return "#4A7DED"
-
-    }
-}
+import {currencyColor} from '../src/utils';
 
 function reduceAssetsBy(assets, field, minimum) {
     let as = []
@@ -56,7 +29,7 @@ function reduceAssetsBy(assets, field, minimum) {
     return as
 }
 
-export default function TotalAssets() {
+export default function TotalAssetsPie() {
     const [assets, setAssets] = useState({})
 
     useEffect(() => {
@@ -83,16 +56,15 @@ export default function TotalAssets() {
         sliceLabelsTextColor="#fff"
         legends={[
             {
-                anchor: 'bottom',
-                direction: 'row',
+                anchor: 'right',
+                direction: 'column',
                 justify: false,
                 translateX: 0,
-                translateY: 56,
-                itemsSpacing: 0,
-                itemWidth: 100,
-                itemHeight: 18,
+                translateY: 0,
+                itemsSpacing: 5,
+                itemWidth: 120,
+                itemHeight: 24,
                 itemTextColor: '#999',
-                itemDirection: 'left-to-right',
                 itemOpacity: 1,
                 symbolSize: 18,
                 symbolShape: 'circle',

frontend/components/TotalAssetsSummary.js

@@ -0,0 +1,66 @@
+import {useEffect, useState} from "react";
+import {queryAssets} from "../api/bbgo";
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import {makeStyles} from '@material-ui/core/styles';
+
+function aggregateAssetsBy(assets, field) {
+    let total = 0.0
+    for (let key in assets) {
+        if (assets[key]) {
+            let a = assets[key]
+            let value = a[field]
+            total += value
+        }
+    }
+
+    return total
+}
+
+const useStyles = makeStyles({
+    root: {
+        minWidth: 275,
+    },
+    bullet: {
+        display: 'inline-block',
+        margin: '0 2px',
+        transform: 'scale(0.8)',
+    },
+    title: {
+        fontSize: 14,
+    },
+    pos: {
+        marginTop: 12,
+    },
+});
+
+export default function TotalAssetSummary() {
+    const classes = useStyles();
+    const [assets, setAssets] = useState({})
+
+    useEffect(() => {
+        queryAssets((assets) => {
+            setAssets(assets)
+        })
+    }, [])
+
+    return <Card className={classes.root} variant="outlined">
+        <CardContent>
+            <Typography className={classes.title} color="textSecondary" gutterBottom>
+                Total Account Balance
+            </Typography>
+            <Typography variant="h5" component="h2">
+                {Math.round(aggregateAssetsBy(assets, "inBTC") * 1e8) / 1e8} <span>BTC</span>
+            </Typography>
+
+            <Typography className={classes.pos} color="textSecondary">
+                Estimated Value
+            </Typography>
+
+            <Typography variant="h5" component="h3">
+                {Math.round(aggregateAssetsBy(assets, "inUSD") * 100) / 100} <span>USD</span>
+            </Typography>
+        </CardContent>
+    </Card>
+}

frontend/pages/index.tsx

@@ -7,20 +7,23 @@ import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
 
-import TotalAssets from '../components/TotalAssets';
+import TotalAssetsPie from '../components/TotalAssetsPie';
+import TotalAssetSummary from '../components/TotalAssetsSummary';
+
+import ExchangeSessionTabPanel from '../components/ExchangeSessionTabPanel';
 
 const useStyles = makeStyles((theme) => ({
-    root: {
-        flexGrow: 1,
-    },
     paper: {
         height: 140,
         width: 200,
     },
-    totalAssetsPaper: {
+    totalAssetsBox: {
         height: 300,
     },
+    totalAssetsSummary: {},
     control: {
         padding: theme.spacing(2),
     },
@@ -29,39 +32,30 @@ const useStyles = makeStyles((theme) => ({
 
 export default function Home() {
     const classes = useStyles();
+
     return (
-        <Container maxWidth="lg">
-            <Box my={4}>
-                <Typography variant="h4" component="h1" gutterBottom>
+        <Container>
+            <Paper className={classes.totalAssetsSummary}>
+                <Box m={4}>
+                    <Typography variant="h4" component="h2" gutterBottom>
                         Total Assets
                     </Typography>
 
-                <Paper className={classes.totalAssetsPaper}>
-                    <TotalAssets/>
-                </Paper>
+                    <Grid container spacing={3}>
+                        <Grid item xs={12} md={6}>
+                            <TotalAssetSummary/>
+                        </Grid>
+
+                        <Grid item xs={12} md={6}>
+                            <Box className={classes.totalAssetsBox}>
+                                <TotalAssetsPie/>
                             </Box>
-
-            <Box my={4}>
-
-                <Grid container className={classes.root}>
-                    <Grid item xs={12}>
-                        <Grid container justify="center">
-                            <Grid item>
-                                <Paper className={classes.paper}>
-                                </Paper>
-                            </Grid>
-                            <Grid item>
-                                <Paper className={classes.paper}>
-                                </Paper>
                         </Grid>
                     </Grid>
-                    </Grid>
-                </Grid>
-
-                <Link href="/about" color="secondary">
-                    Go to the about page
-                </Link>
                 </Box>
+            </Paper>
+
+            <ExchangeSessionTabPanel/>
         </Container>
     );
 }

frontend/src/utils.js

@@ -0,0 +1,28 @@
+
+export function currencyColor(currency) {
+    switch (currency) {
+        case "BTC":
+            return "#f69c3d"
+        case "ETH":
+            return "#497493"
+        case "MCO":
+            return "#032144"
+        case "OMG":
+            return "#2159ec"
+        case "LTC":
+            return "#949494"
+        case "USDT":
+            return "#2ea07b"
+        case "SAND":
+            return "#2E9AD0"
+        case "XRP":
+            return "#00AAE4"
+        case "BCH":
+            return "#8DC351"
+        case "MAX":
+            return "#2D4692"
+        case "TWD":
+            return "#4A7DED"
+
+    }
+}