Add BB portfolio values

sudo-rgorai · sudo-rgorai · commit d204bd0e7657 · 2021-06-10T03:36:21.000+05:30
diff --git a/src/components/Dashboard/Chart/BBand.js b/src/components/Dashboard/Chart/BBand.js
@@ -1,5 +1,12 @@
 import React from "react";
 import { Line } from "react-chartjs-2";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TableRow from "@material-ui/core/TableRow";
+import Paper from "@material-ui/core/Paper";
 
 const LineChart = (props) => {
 
@@ -49,8 +56,53 @@ const LineChart = (props) => {
     },
   };
 
+  const rows = [];
+
+  for (let i = 0; i < bb.signals.length; i++) {
+    rows.push({
+      date: bb.signalDates[i],
+      signal: bb.signals[i] === 1 ? "BUY" : "SELL",
+      investedAmount: bb.investedAmount[i].toFixed(2),
+      liquidAmount: bb.liquidAmount[i].toFixed(2),
+      totalAmount: bb.totalAmount[i].toFixed(2),
+      pnl: bb.pnl[i].toFixed(2),
+    });
+  }
+
   
-  return <Line style={{ width: "90%" }} data={data} options={options} />;
+  return (
+    <>
+      <Line style={{ width: "90%" }} data={data} options={options} />
+      <TableContainer style={{marginTop: "25px"}} component={Paper}>
+        <Table aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Date</TableCell>
+              <TableCell align="right">Signal</TableCell>
+              <TableCell align="right">Invested Amount</TableCell>
+              <TableCell align="right">Liquid Amount</TableCell>
+              <TableCell align="right">Total Amount</TableCell>
+              <TableCell align="right">Trade Profit</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow key={row.date}>
+                <TableCell component="th" scope="row">
+                  {row.date}
+                </TableCell>
+                <TableCell align="right">{row.signal}</TableCell>
+                <TableCell align="right">{row.investedAmount}</TableCell>
+                <TableCell align="right">{row.liquidAmount}</TableCell>
+                <TableCell align="right">{row.totalAmount}</TableCell>
+                <TableCell align="right">{row.pnl}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </>
+  );
 };
 
 export default LineChart;
diff --git a/src/components/Dashboard/Chart/Chart.js b/src/components/Dashboard/Chart/Chart.js
@@ -3,7 +3,7 @@ import BBand from "./BBand";
 import RSI from "./RSI";
 import MACD from "./MACD";
 
-import Styles from "../styles";
+// import Styles from "../styles";
 import LottieLoader from "../../LottieLoader"
 
 let ChartJS = (props) => {
diff --git a/src/components/Dashboard/Chart/MACD.js b/src/components/Dashboard/Chart/MACD.js
@@ -56,8 +56,8 @@ const LineChart = (props) => {
 
   return (
     <>
-      <Line style={{ width: "90%" }} data={data} options={options} />;
-      <TableContainer component={Paper}>
+      <Line style={{ width: "90%" }} data={data} options={options} />
+      <TableContainer style={{marginTop: "25px"}} component={Paper}>
         <Table aria-label="simple table">
           <TableHead>
             <TableRow>
@@ -66,7 +66,7 @@ const LineChart = (props) => {
               <TableCell align="right">Invested Amount</TableCell>
               <TableCell align="right">Liquid Amount</TableCell>
               <TableCell align="right">Total Amount</TableCell>
-              <TableCell align="right">Net Profit</TableCell>
+              <TableCell align="right">Trade Profit</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
diff --git a/src/components/Dashboard/Chart/RSI.js b/src/components/Dashboard/Chart/RSI.js
@@ -55,8 +55,8 @@ const LineChart = (props) => {
   }
   return (
     <>
-      <Line style={{ width: "90%" }} data={data} options={options} />;
-      <TableContainer component={Paper}>
+      <Line style={{ width: "90%" }} data={data} options={options} />
+      <TableContainer style={{marginTop: "25px"}} component={Paper}>
         <Table aria-label="simple table">
           <TableHead>
             <TableRow>
@@ -65,7 +65,7 @@ const LineChart = (props) => {
               <TableCell align="right">Invested Amount</TableCell>
               <TableCell align="right">Liquid Amount</TableCell>
               <TableCell align="right">Total Amount</TableCell>
-              <TableCell align="right">Net Profit</TableCell>
+              <TableCell align="right">Trade Profit</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js
@@ -29,6 +29,7 @@ function ResponsiveDrawer(props) {
   //BB params
   
   let [BBData, setBBData] = useState({});
+  let [BBAmount, setBBAmount] = useState(10000);
   let [BBWindow, setBBWindow] = useState(20);
   let [BBSDFactor, setBBSDFactor] = useState(2);
   
@@ -67,6 +68,7 @@ function ResponsiveDrawer(props) {
           end: endDate.toISOString().substring(0, 10),
           window: 20,
           sdfactor: 2,
+          investment: BBAmount
         },
       };
 
@@ -149,6 +151,8 @@ function ResponsiveDrawer(props) {
               setEndDate={setEndDate}
 
               setBBData={setBBData}
+              BBAmount={BBAmount}
+              setBBAmount={setBBAmount}
               BBWindow={BBWindow}
               setBBWindow={setBBWindow}
               BBSDFactor={BBSDFactor}
@@ -200,6 +204,9 @@ function ResponsiveDrawer(props) {
               endDate={endDate}
               setEndDate={setEndDate}
 
+              
+              BBAmount={BBAmount}
+              setBBAmount={setBBAmount}
               setBBData={setBBData}
               BBWindow={BBWindow}
               setBBWindow={setBBWindow}
diff --git a/src/components/Dashboard/Drawer/Drawer.js b/src/components/Dashboard/Drawer/Drawer.js
@@ -32,6 +32,8 @@ const DashboardDrawer = (props) => {
   let setChartType = props.setChartType;
 
   // let setBBData = props.setBBData;
+  let BBAmount = props.BBAmount;
+  let setBBAmount = props.setBBAmount;
   let BBWindow = props.BBWindow;
   let setBBWindow = props.setBBWindow;
   let BBSDFactor = props.BBSDFactor;
@@ -93,6 +95,7 @@ const DashboardDrawer = (props) => {
           end: endDate.toISOString().substring(0, 10),
           window: BBWindow,
           sdfactor: BBSDFactor,
+          investment: BBAmount
         },
       };
       props.setBBData(await getBBData(data));
@@ -202,6 +205,8 @@ const DashboardDrawer = (props) => {
         setRSIUpperBand={setRSIUpperBand}
         RSILowerBand={RSILowerBand}
         setRSILowerBand={setRSILowerBand}
+        BBAmount={BBAmount}
+        setBBAmount={setBBAmount}
         BBWindow={BBWindow}
         setBBWindow={setBBWindow}
         BBSDFactor={BBSDFactor}
diff --git a/src/components/Dashboard/Drawer/Hyperparameters.js b/src/components/Dashboard/Drawer/Hyperparameters.js
@@ -10,6 +10,15 @@ const Hyperparameter = (props) => {
     case "BB":
       return (
         <>
+          <TextField
+            id="standard-basic"
+            label="Amount"
+            value={props.BBAmount}
+            className={classes.drawerItem}
+            onChange={(e) => {
+              props.setBBAmount(e.target.value);
+            }}
+          />
           <TextField
             id="standard-basic"
             label="Lookback Period"
diff --git a/src/components/Dashboard/getBBdata.js b/src/components/Dashboard/getBBdata.js
@@ -2,25 +2,51 @@ import axios from "axios";
 
 const getBBData = async (data) => {
 
-  let res = await axios.post("https://secret-reaches-87237.herokuapp.com/getBBands", data);
+  let res = await axios.post("http://127.0.0.1:5000/getBBands", data);
   let ma = [];
   let ub = [];
   let lb = [];
   let close = [];
   let date = [];
-  for (let i = 0; i < res.data.length; i++) {
+
+
+  let Signals = [];
+  let SignalDates = [];
+  let InvestedAmount = [];
+  let LiquidAmount = [];
+  let TotalAmount = [];
+  let Pnl = [];
+
+  for (let i = 0; i < res.data.data_length; i++) {
     ma[i] = res.data.data[i].moving_average;
     ub[i] = res.data.data[i].upper_band;
     lb[i] = res.data.data[i].lower_band;
     close[i] = res.data.data[i].close;
     date[i] = res.data.data[i].date;
   }
+
+  for (let i = 0; i < res.data["ordered_signals_len"]; i++) {
+    Signals.push(res.data.ordered_signals[i]["signal"]);
+    SignalDates.push(res.data.ordered_signals[i]["date"]);
+    InvestedAmount.push(res.data.ordered_signals[i]["invested_amount"]);
+    LiquidAmount.push(res.data.ordered_signals[i]["liquid_amount"]);
+    TotalAmount.push(res.data.ordered_signals[i]["total_amount"]);
+    Pnl.push(res.data.ordered_signals[i]["pnl"]);
+    
+  }
+
   let BB = {
     avg: ma,
     uband: ub,
     lband: lb,
     close: close,
     date: date,
+    signals: Signals,
+    signalDates: SignalDates,
+    investedAmount: InvestedAmount,
+    liquidAmount: LiquidAmount,
+    totalAmount: TotalAmount,
+    pnl: Pnl
   }
   return BB;
   
diff --git a/src/components/Dashboard/getMACDData.js b/src/components/Dashboard/getMACDData.js
@@ -4,16 +4,14 @@ const getMACDData = async (data) => {
 
   let res = await axios.post("https://secret-reaches-87237.herokuapp.com/getMACD", data);
 
-  console.log(res);
-
   let MACDData = [];
   let Dates = [];
   let Signals = [];
   let SignalDates = [];
   let InvestedAmount = [];
   let LiquidAmount = [];
   let TotalAmount = [];
-  let Pnl = []
+  let Pnl = [];
 
   for(let i = 0; i < res.data.data_len; i++)
   {
@@ -41,8 +39,6 @@ const getMACDData = async (data) => {
       totalAmount: TotalAmount,
       pnl: Pnl
   }
-
-  console.log(MACD);
   
 
   return MACD;
