This commit is contained in:
Jun Su 2022-06-16 22:30:05 +08:00
parent 575d0d24a2
commit 12164b694d
6 changed files with 47 additions and 37 deletions

View File

@ -156,7 +156,6 @@ export interface GridStats {
} }
export async function queryStrategiesMetrics(): Promise<GridStrategy[]> { export async function queryStrategiesMetrics(): Promise<GridStrategy[]> {
const temp = { const temp = {
id: 'uuid', id: 'uuid',
instanceID: 'testInstanceID', instanceID: 'testInstanceID',
@ -177,15 +176,15 @@ export async function queryStrategiesMetrics(): Promise<GridStrategy[]> {
}, },
status: 'RUNNING', status: 'RUNNING',
startTime: 1654938187102, startTime: 1654938187102,
} };
const testArr = []; const testArr = [];
for(let i = 0; i < 11 ; i++){ for (let i = 0; i < 11; i++) {
const cloned = {...temp} const cloned = { ...temp };
cloned.id = "uuid" + i; cloned.id = 'uuid' + i;
testArr.push(cloned); testArr.push(cloned);
} }
return testArr return testArr;
} }

View File

@ -26,7 +26,7 @@ export const Description = styled('div')(() => ({
}, },
})); }));
export default function Detail({ data }:{ data: GridStrategy}) { export default function Detail({ data }: { data: GridStrategy }) {
const { strategy, stats, startTime } = data; const { strategy, stats, startTime } = data;
const totalProfitsPercentage = (stats.totalProfits / stats.investment) * 100; const totalProfitsPercentage = (stats.totalProfits / stats.investment) * 100;
const gridProfitsPercentage = (stats.gridProfits / stats.investment) * 100; const gridProfitsPercentage = (stats.gridProfits / stats.investment) * 100;
@ -40,14 +40,12 @@ export default function Detail({ data }:{ data: GridStrategy}) {
<StrategyContainer> <StrategyContainer>
<Strategy>{strategy}</Strategy> <Strategy>{strategy}</Strategy>
<div>{data[strategy].symbol}</div> <div>{data[strategy].symbol}</div>
<RunningTime seconds={seconds}/> <RunningTime seconds={seconds} />
<Description> <Description>
0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span> arbitrages 0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span>{' '}
arbitrages
</Description> </Description>
<Summary <Summary stats={stats} totalProfitsPercentage={totalProfitsPercentage} />
stats={stats}
totalProfitsPercentage={totalProfitsPercentage}
/>
<Stats <Stats
stats={stats} stats={stats}
gridProfitsPercentage={gridProfitsPercentage} gridProfitsPercentage={gridProfitsPercentage}

View File

@ -1,5 +1,5 @@
import { styled } from '@mui/styles'; import { styled } from '@mui/styles';
import { Description } from './Detail' import { Description } from './Detail';
const RunningTimeSection = styled('div')(() => ({ const RunningTimeSection = styled('div')(() => ({
display: 'flex', display: 'flex',
@ -15,7 +15,7 @@ const StatusSign = styled('span')(() => ({
marginRight: '5px', marginRight: '5px',
})); }));
export default function RunningTime({seconds}:{seconds: number}){ export default function RunningTime({ seconds }: { seconds: number }) {
const day = Math.floor(seconds / (60 * 60 * 24)); const day = Math.floor(seconds / (60 * 60 * 24));
const hour = Math.floor((seconds % (60 * 60 * 24)) / 3600); const hour = Math.floor((seconds % (60 * 60 * 24)) / 3600);
const min = Math.floor(((seconds % (60 * 60 * 24)) % 3600) / 60); const min = Math.floor(((seconds % (60 * 60 * 24)) % 3600) / 60);

View File

@ -1,5 +1,5 @@
import { styled } from '@mui/styles'; import { styled } from '@mui/styles';
import {StatsTitle, StatsValue, Percentage} from './Summary'; import { StatsTitle, StatsValue, Percentage } from './Summary';
const StatsSection = styled('div')(() => ({ const StatsSection = styled('div')(() => ({
display: 'grid', display: 'grid',
@ -7,7 +7,15 @@ const StatsSection = styled('div')(() => ({
gap: '10px', gap: '10px',
})); }));
export default function Stats({stats, gridProfitsPercentage, gridAprPercentage}:{stats: GridStats, gridProfitsPercentage: number, gridAprPercentage: number}){ export default function Stats({
stats,
gridProfitsPercentage,
gridAprPercentage,
}: {
stats: GridStats;
gridProfitsPercentage: number;
gridAprPercentage: number;
}) {
return ( return (
<StatsSection> <StatsSection>
<div> <div>

View File

@ -25,7 +25,13 @@ export const Percentage = styled('div')(() => ({
color: 'rgb(123, 169, 90)', color: 'rgb(123, 169, 90)',
})); }));
export default function Summary({stats, totalProfitsPercentage}:{stats: GridStats,totalProfitsPercentage:number}) { export default function Summary({
stats,
totalProfitsPercentage,
}: {
stats: GridStats;
totalProfitsPercentage: number;
}) {
return ( return (
<SummarySection> <SummarySection>
<SummaryBlock> <SummaryBlock>
@ -39,5 +45,5 @@ export default function Summary({stats, totalProfitsPercentage}:{stats: GridStat
<Percentage>{totalProfitsPercentage}%</Percentage> <Percentage>{totalProfitsPercentage}%</Percentage>
</SummaryBlock> </SummaryBlock>
</SummarySection> </SummarySection>
) );
} }

View File

@ -38,7 +38,6 @@ export default function Strategies() {
return <Detail key={element.id} data={element} />; return <Detail key={element.id} data={element} />;
})} })}
</StrategiesContainer> </StrategiesContainer>
</DashboardLayout> </DashboardLayout>
); );
} }