grid panel draft

frontend/pages/strategies.tsx

@@ -1,5 +1,7 @@
 import DashboardLayout from '../layouts/DashboardLayout';
 import { styled } from '@mui/styles';
+import {queryStrategiesMetrics} from '../api/bbgo';
+import { useEffect, useState } from 'react';
 
 const StrategyContainer = styled('section')(() => ({
   display: 'flex',
@@ -32,6 +34,9 @@ const RunningTime = styled('div')(() => ({
 
 const Description = styled('div')(() => ({
   color: 'rgb(140, 140, 140)',
+  "& .duration": {
+    marginLeft: '3px',
+  },
 }))
 
 const Summary = styled('div')(() => ({
@@ -56,7 +61,7 @@ const StatsValue = styled('div')(() => ({
   color: 'rgb(123, 169, 90)',
 }));
 
-const Precentage = styled('div')(() => ({
+const Percentage = styled('div')(() => ({
   color: 'rgb(123, 169, 90)',
 }));
 
@@ -67,64 +72,98 @@ const Stats = styled('div')(() => ({
   rowGap: '20px'
 }));
 
-
 export default function Strategies(){
+  const [details, setDetails] = useState([]);
+
+  useEffect(() => {
+    queryStrategiesMetrics().then((value) => {
+      setDetails(value);
+    } 
+    );
+  },[])
 
   return (
     <DashboardLayout>
+      {details.map((element) => {
+        return(
+          <Detail key={element.id} data={element}/>
+        )
+      })}
+    </DashboardLayout>
+
+  );
+}
+
+export function Detail({data}){
+  const {strategy, stats, startTime} = data;
+  const totalProfitsPercentage = stats.totalProfits / stats.investment * 100;
+  const gridProfitsPercentage = stats.gridProfits / stats.investment * 100;
+  const gridAprPercentage = stats.gridProfits / 5 * 365;
+  
+  const now = Date.now();
+  const durationMilliseconds = now - startTime;
+  const seconds = durationMilliseconds / 1000;
+
+  const day = Math.floor(seconds / (60 * 60 * 24));
+  const hour = Math.floor(seconds %  (60 * 60 * 24) / 3600);
+  const min = Math.floor(seconds %  (60 * 60 * 24) % 3600 / 60);
+
+  return (
       <StrategyContainer>
-        <Strategy>Grid Trading</Strategy>
+          <Strategy>{strategy}</Strategy>
-        <div>BTC/USDT</div>
+          <div>{data[strategy].symbol}</div>
           <RunningTime>
             <StatusSign/>
-          <Description>Running for 5D 0H 0M</Description>
+              <Description>
+                Running for
+                <span className="duration">{day}</span>D 
+                <span className="duration">{hour}</span>H 
+                <span className="duration">{min}</span>M
+              </Description>
           </RunningTime> 
 
-        <Description>0 arbitrages in 24 hours / Total 3 arbitrages</Description>
+          <Description>0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span> arbitrages</Description>
           
           <Summary>
             <SummaryBlock>
             <StatsTitle>Investment USDT</StatsTitle>
-            <div>100</div>
+              <div>{stats.investment}</div>
             </SummaryBlock>
             
             <SummaryBlock>
               <StatsTitle>Total Profit USDT</StatsTitle>
-            <StatsValue>+5.600</StatsValue>
+              <StatsValue>{stats.totalProfits}</StatsValue>
-            <Precentage>+5.6%</Precentage>
+              <Percentage>{totalProfitsPercentage}%</Percentage>
             </SummaryBlock>
           </Summary>
 
           <Stats>
             <div>
               <StatsTitle>Grid Profits</StatsTitle>
-              <StatsValue>+2.500</StatsValue>
+              <StatsValue>{stats.gridProfits}</StatsValue>
-              <Precentage>+2.5%</Precentage>
+              <Percentage>{gridProfitsPercentage}%</Percentage>
             </div>
 
             <div>
               <StatsTitle>Floating PNL</StatsTitle>
-              <StatsValue>+3.100</StatsValue>
+              <StatsValue>{stats.floatingPNL}</StatsValue>
             </div>
 
             <div>
               <StatsTitle>Grid APR</StatsTitle>
-              <Precentage>+182.5%</Precentage>
+              <Percentage>{gridAprPercentage}%</Percentage>
             </div>
 
             <div>
               <StatsTitle>Current Price</StatsTitle>
-              <div>29,000</div>
+              <div>{stats.currentPrice}</div>
             </div>
 
             <div>
               <StatsTitle>Price Range</StatsTitle>
-              <div>25,000~35,000</div>
+              <div>{stats.lowestPrice}~{stats.highestPrice}</div>
             </div>
           </Stats>
       </StrategyContainer>
-      
+  )
-    </DashboardLayout>
-
-  );
 }