Add TradingVolumeBar

frontend/api/bbgo.js

@@ -16,3 +16,11 @@ export function queryAssets(cb) {
         });
 }
 
+export function queryTradingVolume(params, cb) {
+    axios.get(baseURL + '/api/trading-volume', { params: params })
+        .then(response => {
+            cb(response.data.tradingVolumes)
+        });
+}
+
+

frontend/components/TradingVolumeBar.js

@@ -0,0 +1,106 @@
+import {ResponsiveBar} from '@nivo/bar';
+import {queryTradingVolume} from '../api/bbgo';
+import {useEffect, useState} from "react";
+
+
+function groupData(rows) {
+    let dateIndex = {}
+    let startTime = null
+    let endTime = null
+    rows.forEach((v) => {
+        const time = new Date(v.time)
+        if (!startTime) {
+            startTime = time
+        }
+
+        endTime = time
+
+        const dateStr = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
+        const key = v.exchange
+        const k = key ? key : "total"
+        const quoteVolume = Math.round(v.quoteVolume * 100) / 100
+
+        if (dateIndex[dateStr]) {
+            dateIndex[dateStr][k] = quoteVolume
+        } else {
+            dateIndex[dateStr] = {
+                date: dateStr,
+                year: time.getFullYear(),
+                month: time.getMonth() + 1,
+                day: time.getDate(),
+                [k]: quoteVolume,
+            }
+        }
+    })
+
+    let data = []
+    while (startTime < endTime) {
+        const dateStr = startTime.getFullYear() + "-" + (startTime.getMonth() + 1) + "-" + startTime.getDate()
+        const groupData = dateIndex[dateStr]
+        if (groupData) {
+            data.push(groupData)
+        } else {
+            data.push({
+                date: dateStr,
+                year: startTime.getFullYear(),
+                month: startTime.getMonth() + 1,
+                day: startTime.getDate(),
+                total: 0,
+            })
+        }
+
+        startTime.setDate(startTime.getDate() + 1)
+    }
+
+    return data
+}
+
+export default function TradingVolumeBar() {
+    const [tradingVolumes, setTradingVolumes] = useState([])
+
+    useEffect(() => {
+        queryTradingVolume({}, (tradingVolumes) => {
+            setTradingVolumes(tradingVolumes)
+        })
+    }, [])
+
+    const data = groupData(tradingVolumes)
+
+    return <ResponsiveBar keys={["total"]}
+                          data={data}
+                          indexBy={"date"}
+                          margin={{ top: 50, right: 160, bottom: 50, left: 60 }}
+                          padding={0.3}
+                          valueScale={{ type: 'linear' }}
+                          indexScale={{ type: 'band', round: true }}
+                          enableGridY={true}
+                          colors={{ scheme: 'paired' }}
+                          legends={[
+                              {
+                                  dataFrom: 'keys',
+                                  anchor: 'right',
+                                  direction: 'column',
+                                  justify: false,
+                                  translateX: 120,
+                                  translateY: 0,
+                                  itemsSpacing: 2,
+                                  itemWidth: 100,
+                                  itemHeight: 20,
+                                  itemDirection: 'left-to-right',
+                                  itemOpacity: 0.85,
+                                  symbolSize: 20,
+                                  effects: [
+                                      {
+                                          on: 'hover',
+                                          style: {
+                                              itemOpacity: 1
+                                          }
+                                      }
+                                  ]
+                              }
+                          ]}
+                          animate={true}
+                          motionStiffness={90}
+                          motionDamping={15}
+    />;
+}

frontend/pages/index.tsx

@@ -4,14 +4,12 @@ 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 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 TotalAssetsPie from '../components/TotalAssetsPie';
 import TotalAssetSummary from '../components/TotalAssetsSummary';
+import TradingVolumeBar from '../components/TradingVolumeBar';
 
 import ExchangeSessionTabPanel from '../components/ExchangeSessionTabPanel';
 
@@ -24,6 +22,9 @@ const useStyles = makeStyles((theme) => ({
         height: 300,
     },
     totalAssetsSummary: {},
+    TradingVolumeBar: {
+        height: 400,
+    },
     control: {
         padding: theme.spacing(2),
     },
@@ -55,6 +56,10 @@ export default function Home() {
                 </Box>
             </Paper>
 
+            <Paper className={classes.TradingVolumeBar}>
+                <TradingVolumeBar/>
+            </Paper>
+
             <ExchangeSessionTabPanel/>
         </Container>
     );

pkg/bbgo/server.go

@@ -49,7 +49,7 @@ func RunServer(ctx context.Context, userConfig *Config, environ *Environment) er
 			return
 		}
 
-		c.JSON(http.StatusOK, rows)
+		c.JSON(http.StatusOK, gin.H{"tradingVolumes": rows})
 		return
 	})