Skip to content

Commit

Permalink
List closed trades based on opening month
Browse files Browse the repository at this point in the history
  • Loading branch information
@rylorin
rylorin committed Nov 2, 2024
1 parent f8630a0 commit 98ccbfd
Show file tree
Hide file tree
Showing 10 changed files with 249 additions and 177 deletions.
136 changes: 69 additions & 67 deletions src/app/components/Portfolio/Trade/ClosedTradesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,73 +23,75 @@ const TradesTable: FunctionComponent<Props> = ({ title = "Trades index", content
const theTrades = content || (useLoaderData() as TradeEntry[]);

return (
<TableContainer>
<Table variant="simple" size="sm">
<TableCaption>
{title} ({theTrades.length})
</TableCaption>
<Thead>
<Tr>
<Td>Id</Td>
<Td>Symbol</Td>
<Td>Strategy</Td>
<Td>Open</Td>
<Td>Closed</Td>
<Td>Status</Td>
<Td>Days</Td>
<Td>Engaged</Td>
<Td>PnL</Td>
<Td>APY</Td>
</Tr>
</Thead>
<Tbody>
{theTrades
.sort((a, b) => (a.closingDate ? b.closingDate - a.closingDate : b.openingDate - a.openingDate))
.map((item) => (
<Tr key={item.id}>
<Td>
<Link to={TradeLink.toItem(portfolioId, item.id)} as={RouterLink}>
{item.id}
</Link>
</Td>
<Td>
<Link to={ContractLink.toItem(portfolioId, item.underlying.id)} as={RouterLink}>
{item.underlying.symbol}
</Link>
</Td>
<Td>{tradeStrategy2String(item.strategy)}</Td>
<Td>{new Date(item.openingDate).toLocaleDateString()}</Td>
<Td>{item.closingDate ? new Date(item.closingDate).toLocaleDateString() : undefined}</Td>
<Td>{tradeStatus2String(item.status)}</Td>
<Td isNumeric>{formatNumber(item.duration)}</Td>
<Td isNumeric>{formatNumber(item.risk)}</Td>
<Td isNumeric>
<Number value={item.pnlInBase} />
</Td>
<Td isNumeric>
<Number value={item.apy} decimals={1} isPercent />
</Td>
</Tr>
))}
</Tbody>
<Tfoot>
<Tr fontWeight="bold">
<Td>Total</Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td isNumeric>
<Number value={theTrades.reduce((p: number, item) => (p += item.pnlInBase || 0), 0)} />
</Td>
<Td></Td>
</Tr>
</Tfoot>
</Table>
</TableContainer>
<>
<TableContainer>
<Table variant="simple" size="sm">
<TableCaption>
{title} ({theTrades.length})
</TableCaption>
<Thead>
<Tr>
<Td>Id</Td>
<Td>Symbol</Td>
<Td>Strategy</Td>
<Td>Open</Td>
<Td>Closed</Td>
<Td>Status</Td>
<Td>Days</Td>
<Td>Engaged</Td>
<Td>PnL</Td>
<Td>APY</Td>
</Tr>
</Thead>
<Tbody>
{theTrades
.sort((a, b) => (a.closingDate ? b.closingDate - a.closingDate : b.openingDate - a.openingDate))
.map((item) => (
<Tr key={item.id}>
<Td>
<Link to={TradeLink.toItem(portfolioId, item.id)} as={RouterLink}>
{item.id}
</Link>
</Td>
<Td>
<Link to={ContractLink.toItem(portfolioId, item.underlying.id)} as={RouterLink}>
{item.underlying.symbol}
</Link>
</Td>
<Td>{tradeStrategy2String(item.strategy)}</Td>
<Td>{new Date(item.openingDate).toLocaleDateString()}</Td>
<Td>{item.closingDate ? new Date(item.closingDate).toLocaleDateString() : undefined}</Td>
<Td>{tradeStatus2String(item.status)}</Td>
<Td isNumeric>{formatNumber(item.duration)}</Td>
<Td isNumeric>{formatNumber(item.risk)}</Td>
<Td isNumeric>
<Number value={item.pnlInBase} />
</Td>
<Td isNumeric>
<Number value={item.apy} decimals={1} isPercent />
</Td>
</Tr>
))}
</Tbody>
<Tfoot>
<Tr fontWeight="bold">
<Td>Total</Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td isNumeric>
<Number value={theTrades.reduce((p: number, item) => (p += item.pnlInBase || 0), 0)} />
</Td>
<Td></Td>
</Tr>
</Tfoot>
</Table>
</TableContainer>
</>
);
};

Expand Down
34 changes: 34 additions & 0 deletions src/app/components/Portfolio/Trade/Nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Box, Link, Spacer } from "@chakra-ui/react";
import React, { FunctionComponent } from "react";
import { Link as RouterLink, useParams } from "react-router-dom";
import { TradeLink } from "./links";

type NavProps = Record<string, never>;

const Nav: FunctionComponent<NavProps> = ({ ..._rest }): React.ReactNode => {
const { portfolioId } = useParams();

return (
<Box>
<Spacer />
<Link to={TradeLink.toIndex(portfolioId)} as={RouterLink}>
Open
</Link>
{" | "}
<Link to={TradeLink.toClosedYtd(portfolioId)} as={RouterLink}>
YTD
</Link>
{" | "}
<Link to={TradeLink.toClosed12m(portfolioId)} as={RouterLink}>
12M
</Link>
{" | "}
<Link to={TradeLink.toClosed(portfolioId)} as={RouterLink}>
All
</Link>
<Spacer />
</Box>
);
};

export default Nav;
122 changes: 62 additions & 60 deletions src/app/components/Portfolio/Trade/OpenTradesTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,72 +23,74 @@ const TradesTable: FunctionComponent<Props> = ({ title = "Trades index", content
const theTrades = content || (useLoaderData() as TradeEntry[]);

return (
<TableContainer>
<Table variant="simple" size="sm">
<TableCaption>
{title} ({theTrades.length})
</TableCaption>
<Thead>
<Tr>
<Td>Id</Td>
<Td>Symbol</Td>
<Td>Strategy</Td>
<Td>Open</Td>
<Td>Expiration</Td>
<Td>Days</Td>
<Td>Risk</Td>
<Td>PnL</Td>
<Td>APY</Td>
</Tr>
</Thead>
<Tbody>
{theTrades.map((item) => (
<Tr key={item.id}>
<Td>
{item.id > 0 && (
<Link to={TradeLink.toItem(portfolioId, item.id)} as={RouterLink}>
{item.id}
<>
<TableContainer>
<Table variant="simple" size="sm">
<TableCaption>
{title} ({theTrades.length})
</TableCaption>
<Thead>
<Tr>
<Td>Id</Td>
<Td>Symbol</Td>
<Td>Strategy</Td>
<Td>Open</Td>
<Td>Expiration</Td>
<Td>Days</Td>
<Td>Risk</Td>
<Td>PnL</Td>
<Td>APY</Td>
</Tr>
</Thead>
<Tbody>
{theTrades.map((item) => (
<Tr key={item.id}>
<Td>
{item.id > 0 && (
<Link to={TradeLink.toItem(portfolioId, item.id)} as={RouterLink}>
{item.id}
</Link>
)}
</Td>
<Td>
<Link to={ContractLink.toItem(portfolioId, item.underlying.id)} as={RouterLink}>
{item.underlying.symbol}
</Link>
)}
</Td>
<Td>
<Link to={ContractLink.toItem(portfolioId, item.underlying.id)} as={RouterLink}>
{item.underlying.symbol}
</Link>
</Td>
<Td>{tradeStrategy2String(item.strategy)}</Td>
<Td>{new Date(item.openingDate).toLocaleDateString()}</Td>
<Td>{item.expectedExpiry && new Date(item.expectedExpiry).toLocaleDateString()}</Td>
<Td isNumeric>{formatNumber(item.expectedDuration)}</Td>
<Td isNumeric>{formatNumber(item.risk)}</Td>
</Td>
<Td>{tradeStrategy2String(item.strategy)}</Td>
<Td>{new Date(item.openingDate).toLocaleDateString()}</Td>
<Td>{item.expectedExpiry && new Date(item.expectedExpiry).toLocaleDateString()}</Td>
<Td isNumeric>{formatNumber(item.expectedDuration)}</Td>
<Td isNumeric>{formatNumber(item.risk)}</Td>
<Td isNumeric>
<Number value={item.pnlInBase} />
</Td>
<Td isNumeric>
<Number value={item.apy} decimals={1} isPercent />
</Td>
</Tr>
))}
</Tbody>
<Tfoot>
<Tr fontWeight="bold">
<Td>Total</Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td isNumeric>
<Number value={item.pnlInBase} />
<Number value={theTrades.reduce((p: number, item) => (p += item.risk || 0), 0)} />
</Td>
<Td isNumeric>
<Number value={item.apy} decimals={1} isPercent />
<Number value={theTrades.reduce((p: number, item) => (p += item.pnlInBase || 0), 0)} />
</Td>
<Td></Td>
</Tr>
))}
</Tbody>
<Tfoot>
<Tr fontWeight="bold">
<Td>Total</Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td></Td>
<Td isNumeric>
<Number value={theTrades.reduce((p: number, item) => (p += item.risk || 0), 0)} />
</Td>
<Td isNumeric>
<Number value={theTrades.reduce((p: number, item) => (p += item.pnlInBase || 0), 0)} />
</Td>
<Td></Td>
</Tr>
</Tfoot>
</Table>
</TableContainer>
</Tfoot>
</Table>
</TableContainer>
</>
);
};

Expand Down
24 changes: 17 additions & 7 deletions src/app/components/Portfolio/Trade/TradesMonthlyTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { HStack, Link, Text, VStack } from "@chakra-ui/react";
import React, { FunctionComponent } from "react";
import { Link as RouterLink } from "react-router-dom";
import { Link as RouterLink, useParams } from "react-router-dom";
import { TradeMonthlyRow, TradeMonthlySynthesys, TradeMonthlySynthesysEntry } from "../../../../routers/trades.types";
import Number from "../../Number/Number";
import { TradeLink } from "./links";

type TradesMonthlyTableProps = {
title?: string;
content: TradeMonthlySynthesys;
};

Expand All @@ -15,13 +17,14 @@ type minorRowProps = {
};

const MinorRow: FunctionComponent<minorRowProps> = ({ major, index, content, ..._rest }): React.ReactNode => {
console.log("MinorRow", index, content);
const { portfolioId } = useParams();

return (
<>
<HStack>
<Text width="100px"></Text>
<Text width="100px">
<Link to={`../../month/${major.substring(0, 4)}/${major.substring(5)}`} as={RouterLink}>
<Link to={TradeLink.toClosedOpened(portfolioId, major, index)} as={RouterLink}>
{index}
</Link>
</Text>
Expand All @@ -43,12 +46,13 @@ type majorRowProps = {
};

const MajorRow: FunctionComponent<majorRowProps> = ({ index, content, ..._rest }): React.ReactNode => {
console.log("MajorRow", index, content);
const { portfolioId } = useParams();

return (
<>
<HStack>
<Text width="100px">
<Link to={`../../month/${index.substring(0, 4)}/${index.substring(5)}`} as={RouterLink}>
<Link to={TradeLink.toClosedMonth(portfolioId, index)} as={RouterLink}>
{index}
</Link>
</Text>
Expand All @@ -71,8 +75,11 @@ const MajorRow: FunctionComponent<majorRowProps> = ({ index, content, ..._rest }
);
};

const TradesMonthlyTable: FunctionComponent<TradesMonthlyTableProps> = ({ content, ..._rest }): React.ReactNode => {
console.log("TradesMonthlyTable", content);
const TradesMonthlyTable: FunctionComponent<TradesMonthlyTableProps> = ({
title = "Closed trades by month",
content,
..._rest
}): React.ReactNode => {
return (
<>
<VStack>
Expand Down Expand Up @@ -110,6 +117,9 @@ const TradesMonthlyTable: FunctionComponent<TradesMonthlyTableProps> = ({ conten
.map((index) => (
<MajorRow key={index} index={index} content={content[index]} />
))}
<Text>
{title} ({Object.keys(content).length})
</Text>
</VStack>
</>
);
Expand Down
Loading

0 comments on commit 98ccbfd

Please sign in to comment.