From 3e3b21c59f64f5b95f8c0231b1e7f18ee3f262e9 Mon Sep 17 00:00:00 2001 From: c9s Date: Mon, 25 Jan 2021 18:29:31 +0800 Subject: [PATCH] add exchange session panel --- frontend/api/bbgo.js | 7 ++ .../components/ExchangeSessionTabPanel.js | 41 ++++++++++++ .../{TotalAssets.js => TotalAssetsPie.js} | 44 +++---------- frontend/components/TotalAssetsSummary.js | 66 +++++++++++++++++++ frontend/pages/index.tsx | 58 ++++++++-------- frontend/src/utils.js | 28 ++++++++ 6 files changed, 176 insertions(+), 68 deletions(-) create mode 100644 frontend/components/ExchangeSessionTabPanel.js rename frontend/components/{TotalAssets.js => TotalAssetsPie.js} (69%) create mode 100644 frontend/components/TotalAssetsSummary.js create mode 100644 frontend/src/utils.js diff --git a/frontend/api/bbgo.js b/frontend/api/bbgo.js index 3bc73a990..b92f7c330 100644 --- a/frontend/api/bbgo.js +++ b/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 => { diff --git a/frontend/components/ExchangeSessionTabPanel.js b/frontend/components/ExchangeSessionTabPanel.js new file mode 100644 index 000000000..3c2adb49c --- /dev/null +++ b/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 + + + + + + + + + Go to the about page + + + +} diff --git a/frontend/components/TotalAssets.js b/frontend/components/TotalAssetsPie.js similarity index 69% rename from frontend/components/TotalAssets.js rename to frontend/components/TotalAssetsPie.js index 90c9c48ca..92f96d505 100644 --- a/frontend/components/TotalAssets.js +++ b/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', diff --git a/frontend/components/TotalAssetsSummary.js b/frontend/components/TotalAssetsSummary.js new file mode 100644 index 000000000..9fe98f426 --- /dev/null +++ b/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 + + + Total Account Balance + + + {Math.round(aggregateAssetsBy(assets, "inBTC") * 1e8) / 1e8} BTC + + + + Estimated Value + + + + {Math.round(aggregateAssetsBy(assets, "inUSD") * 100) / 100} USD + + + +} diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index 01a0d63b7..ef121b011 100644 --- a/frontend/pages/index.tsx +++ b/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 ( - - - - Total Assets - + + + + + Total Assets + - - - - + + + + - - - - - - - - - - - - - + + + + - + + - - Go to the about page - - + ); } diff --git a/frontend/src/utils.js b/frontend/src/utils.js new file mode 100644 index 000000000..07bad9cfb --- /dev/null +++ b/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" + + } +}