show pnl in more meaningful manner

src/components/progress-bar.tsx

@@ -0,0 +1,99 @@
+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);
+
+    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>
+            {/* <Bar
+        className={clsx({
+          low: valueInPercent < 30,
+          medium: valueInPercent >= 30 && valueInPercent <= 70,
+          high: valueInPercent > 70,
+        })}
+        style={{ maxWidth: `${valueInPercent}%` }}
+      /> */}
+        </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} />
         },
         {