ticker name minor changes

mnsrulz · Apr 19, 2024 · 2a4a4a5 · 2a4a4a5
1 parent 5b2b275
commit 2a4a4a5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 29 deletions.
diff --git a/src/components/TickerName.tsx b/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>;
 };
diff --git a/src/components/progress-bar.tsx b/src/components/progress-bar.tsx
@@ -47,39 +47,30 @@ export const ProgressBar = React.memo(function ProgressBar(props: ProgressBarPro
     const { value, formattedValue } = props;
     const valueInPercent = value * 100;
     let color = getColor(valueInPercent * 10);
-
-    return (
-        <Element>
-            {/* <ConditionalFormattingBox
+    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>
-            {/* <Bar
-        className={clsx({
-          low: valueInPercent < 30,
-          medium: valueInPercent >= 30 && valueInPercent <= 70,
-          high: valueInPercent > 70,
-        })}
-        style={{ maxWidth: `${valueInPercent}%` }}
-      /> */}
-        </Element>
-    );
+                {/* <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 '';