sync: main to stage

src/components/TickerName.tsx

@@ -1,9 +1,14 @@
 'use client';
 import { ITradeView } from "@/lib/types";
 import { shortDateFormatter } from "./trades";
-
+import dayjs from "dayjs";
 
 export const TickerName = (p: { trade: ITradeView; }) => {
     const { trade } = p;
-    return <div>{trade.symbol} {trade.strikePrice as unknown as string} {shortDateFormatter(trade.contractExpiry as unknown as string)} x {trade.numberOfContracts}</div>;
+    const dt = trade.contractExpiry;
+    const isYearAfter = dayjs(dt).diff(dayjs(), 'days') > 365;
+    const fmtDate = isYearAfter ? dayjs(dt).format('M/D/YY') : dayjs(dt).format('M/D');
+    return <div>
+        {trade.symbol} {trade.strikePrice as unknown as string} {fmtDate} x {trade.numberOfContracts}
+    </div>;
 };

src/components/progress-bar.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { getColor } from '@/lib/color';
+
+interface ProgressBarProps {
+    value: number;
+    formattedValue: string
+}
+
+const Center = styled('div')({
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const Element = styled('div')(({ theme }) => ({
+    // border: `1px solid`,
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+    height: 26,
+    // borderRadius: 2,
+}));
+
+const Value = styled('div')({
+    position: 'absolute',
+    lineHeight: '24px',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+});
+
+const Bar = styled('div')({
+    height: '100%',
+    '&.low': {
+        backgroundColor: '#f44336',
+    },
+    '&.medium': {
+        backgroundColor: '#efbb5aa3',
+    },
+    '&.high': {
+        backgroundColor: '#088208a3',
+    },
+});
+
+export const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) {
+    const { value, formattedValue } = props;
+    const valueInPercent = value * 100;
+    let color = getColor(valueInPercent * 10);
+    if (!Number.isNaN(value)) {
+        return (
+            <Element>
+                {/* <ConditionalFormattingBox
+                value={value}
+                formattedValue={formattedValue}
+                maxWidth={valueInPercent}
+            /> */}
+                {/* <Center></Center> */}
+                <Value>{formattedValue} ({valueInPercent.toFixed()}%)</Value>
+                <Bar sx={{
+                    backgroundColor: color,
+                    width: "100%",
+                    maxWidth: `${Math.abs(valueInPercent)}%`,
+                    height: "100%",
+                    padding: "2px"
+                }}>
+                    {/* {formattedValue} */}
+                </Bar>                
+            </Element>
+        );
+    }
+});
+
+// export function renderProgress(params: GridRenderCellParams<any, number, any>) {
+//   if (params.value == null) {
+//     return '';
+//   }
+
+//   // If the aggregated value does not have the same unit as the other cell
+//   // Then we fall back to the default rendering based on `valueGetter` instead of rendering a progress bar.
+//   if (params.aggregation && !params.aggregation.hasCellUnit) {
+//     return null;
+//   }
+
+//   return (
+//     <Center>
+//       <ProgressBar value={params.value} />
+//     </Center>
+//   );
+// }

src/components/trades.tsx

@@ -6,18 +6,26 @@ import CloseIcon from '@mui/icons-material/Close';
 import dayjs from 'dayjs';
 import { CloseTradeCloseDialogReason, CloseTradeDialog } from "./close-trade";
 import { ConfirmDialog } from "./confirm-dialog";
-import { Card, CardContent, FormControlLabel, Grid, LinearProgress, Paper, Switch, Typography } from "@mui/material";
+import { Box, Card, CardContent, FormControlLabel, Grid, LinearProgress, Paper, Switch, Typography } from "@mui/material";
 
 import { ConditionalFormattingBox } from "./conditional-formatting";
 import { useTrades } from "@/lib/useTrades";
 import { currencyFormatter, fixedCurrencyFormatter, percentageFormatter } from "@/lib/formatters";
 import { ITradeView } from "@/lib/types";
 import { TickerName } from "./TickerName";
 import humanFormat from "human-format";
+import { ProgressBar } from "./progress-bar";
 
 const dateFormatter = (v: string) => v && dayjs(v.substring(0, 10)).format('DD/MM/YYYY');   //to avoid utc conversion strip the time part
 export const shortDateFormatter = (v: string) => v && dayjs(v.substring(0, 10)).format('DD/MM/YYYY');   //to avoid utc conversion strip the time part
 
+const ProfitBar = (props: { cost: number, profit: number }) => {
+    const { profit, cost } = props;
+    return <Box>
+        <ProgressBar value={profit / cost} formattedValue={fixedCurrencyFormatter(profit)} />
+    </Box>
+}
+
 export const TradeList = () => {
     const { trades, deleteTrade, reloadTrade, isLoading } = useTrades();
     const [showCloseTrades, toggleShowCloseTrades] = useState(false);//useShowCloseTrades();
@@ -57,11 +65,12 @@ export const TradeList = () => {
         { field: 'buyCost', width: 70, headerName: 'Buy Cost', type: 'number', valueFormatter: fixedCurrencyFormatter },
         { field: 'sellCost', width: 70, headerName: 'Sell Cost', type: 'number', valueFormatter: fixedCurrencyFormatter },
         {
-            field: 'actualProfit', width: 70, headerName: 'PnL', type: 'number', valueFormatter: fixedCurrencyFormatter,
-            renderCell: (p) => <ConditionalFormattingBox value={p.value} formattedValue={p.formattedValue} />
+            field: 'actualProfit', width: 100, headerName: 'PnL', type: 'number', valueFormatter: fixedCurrencyFormatter,
+            // renderCell: (p) => <ConditionalFormattingBox value={p.value} formattedValue={p.formattedValue} />
+            renderCell: (p) => <ProfitBar profit={p.value} cost={p.row.sellCost} />
         },
         {
-            field: 'actualAnnualizedReturn', headerName: 'Annualized%', type: 'number', valueFormatter: percentageFormatter,
+            field: 'actualAnnualizedReturn', width: 70, headerName: 'Annualized%', type: 'number', valueFormatter: percentageFormatter,
             renderCell: (p) => <ConditionalFormattingBox value={p.value * 1000} formattedValue={p.formattedValue} />
         },
         {