From 39bb6c85f8896d1666e34dee31b9db7b40536a38 Mon Sep 17 00:00:00 2001
From: avraham <briansakal@gmail.com>
Date: Fri, 2 Aug 2024 17:00:01 -0400
Subject: [PATCH] fix biome kvetches

---
 frontend/src/pages/CalendarOptimizer.tsx      |  21 +-
 .../src/pages/HistoricalCalendarPrices.tsx    | 629 +++++++++---------
 2 files changed, 329 insertions(+), 321 deletions(-)

diff --git a/frontend/src/pages/CalendarOptimizer.tsx b/frontend/src/pages/CalendarOptimizer.tsx
index 959c99a..f76b375 100644
--- a/frontend/src/pages/CalendarOptimizer.tsx
+++ b/frontend/src/pages/CalendarOptimizer.tsx
@@ -86,7 +86,7 @@ function chooseStrike(strike: string) {
     .query({
       underlying: chosenUnderlying.value,
       expirationDate: chosenExpiration.value,
-      strike: parseFloat(strike),
+      strike: Number.parseFloat(strike),
     })
     .then((getOpensForOptionContractResponse) => {
       optionContractUplotData.value = getOpensForOptionContractResponse;
@@ -201,8 +201,9 @@ export function CalendarOptimizer() {
           </Paper>
         </Grid>
         <Grid item xs={12} md={6}>
-          <Paper elevation={3} sx={{ p: 3, height: '100%' }}>
-            {chosenUnderlying.value !== null && underlyingUplotData.value.length > 0 ? (
+          <Paper elevation={3} sx={{ p: 3, height: "100%" }}>
+            {chosenUnderlying.value !== null &&
+            underlyingUplotData.value.length > 0 ? (
               <Scatter
                 data={{
                   datasets: [
@@ -220,7 +221,7 @@ export function CalendarOptimizer() {
                         text: "Time",
                       },
                       ticks: {
-                        callback: function (value, index, ticks) {
+                        callback: (value, index, ticks) => {
                           return new Date((value as number) * 1000)
                             .toISOString()
                             .substring(0, 10);
@@ -230,8 +231,8 @@ export function CalendarOptimizer() {
                     y: {
                       beginAtZero: false,
                       ticks: {
-                        callback: function (value, index, ticks) {
-                          return "$" + value.toString();
+                        callback: (value, index, ticks) => {
+                          return `$${value.toString()}`;
                         },
                       },
                     },
@@ -287,7 +288,7 @@ export function CalendarOptimizer() {
                         text: "Time",
                       },
                       ticks: {
-                        callback: function (value, index, ticks) {
+                        callback: (value, index, ticks) => {
                           return new Date((value as number) * 1000)
                             .toISOString()
                             .substring(0, 10);
@@ -297,8 +298,8 @@ export function CalendarOptimizer() {
                     y: {
                       beginAtZero: false,
                       ticks: {
-                        callback: function (value, index, ticks) {
-                          return "$" + value.toString();
+                        callback: (value, index, ticks) => {
+                          return `$${value.toString()}`;
                         },
                       },
                     },
@@ -333,4 +334,4 @@ export function CalendarOptimizer() {
       </Grid>
     </Container>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/HistoricalCalendarPrices.tsx b/frontend/src/pages/HistoricalCalendarPrices.tsx
index c63a421..32cb684 100644
--- a/frontend/src/pages/HistoricalCalendarPrices.tsx
+++ b/frontend/src/pages/HistoricalCalendarPrices.tsx
@@ -49,20 +49,20 @@ const maxChartPrice = computed(() =>
   Math.max(
     Math.max.apply(
       null,
-      historicalCalendarQuoteChartData.value.map((d) => d.y)
+      historicalCalendarQuoteChartData.value.map((d) => d.y),
     ),
     Math.max.apply(
       null,
-      historicalCalendarExitQuoteChartData.value.map((d) => d.y)
-    )
-  )
+      historicalCalendarExitQuoteChartData.value.map((d) => d.y),
+    ),
+  ),
 );
 
 const maxN = computed(() =>
   Math.max.apply(
     null,
-    historicalCalendarExitQuoteChartData.value.map((d) => d.n)
-  )
+    historicalCalendarExitQuoteChartData.value.map((d) => d.n),
+  ),
 );
 
 const refreshHistoricalStockQuoteChartData = () => {
@@ -134,16 +134,19 @@ const handleUnderlyingChange = (e) => {
   }
 };
 const handleDaysToFrontExpirationChange = (e) => {
-  if (chosenDaysToFrontExpiration.value !== parseInt(e.target.value)) {
-    chosenDaysToFrontExpiration.value = parseInt(e.target.value);
+  if (chosenDaysToFrontExpiration.value !== Number.parseInt(e.target.value)) {
+    chosenDaysToFrontExpiration.value = Number.parseInt(e.target.value);
     refreshHistoricalCalendarQuoteChartData();
   }
 };
 const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
   if (
-    chosenDaysBetweenFrontAndBackExpiration.value !== parseInt(e.target.value)
+    chosenDaysBetweenFrontAndBackExpiration.value !==
+    Number.parseInt(e.target.value)
   ) {
-    chosenDaysBetweenFrontAndBackExpiration.value = parseInt(e.target.value);
+    chosenDaysBetweenFrontAndBackExpiration.value = Number.parseInt(
+      e.target.value,
+    );
     refreshHistoricalCalendarQuoteChartData();
     refreshHistoricalCalendarExitQuoteChartData();
   }
@@ -151,10 +154,10 @@ const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
 const handleStrikePercentageFromUnderlyingPriceChange = (e) => {
   if (
     chosenStrikePercentageFromUnderlyingPrice.value !==
-    parseFloat(e.target.value)
+    Number.parseFloat(e.target.value)
   ) {
-    chosenStrikePercentageFromUnderlyingPrice.value = parseFloat(
-      e.target.value
+    chosenStrikePercentageFromUnderlyingPrice.value = Number.parseFloat(
+      e.target.value,
     );
     refreshHistoricalCalendarQuoteChartData();
   }
@@ -162,17 +165,17 @@ const handleStrikePercentageFromUnderlyingPriceChange = (e) => {
 const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e) => {
   if (
     chosenStrikePercentageFromUnderlyingPriceRadius.value !==
-    parseFloat(e.target.value)
+    Number.parseFloat(e.target.value)
   ) {
-    chosenStrikePercentageFromUnderlyingPriceRadius.value = parseFloat(
-      e.target.value
+    chosenStrikePercentageFromUnderlyingPriceRadius.value = Number.parseFloat(
+      e.target.value,
     );
     refreshHistoricalCalendarQuoteChartData();
   }
 };
 const handleExitToFrontExpirationChange = (e) => {
-  if (chosenExitToFrontExpiration.value !== parseInt(e.target.value)) {
-    chosenExitToFrontExpiration.value = parseInt(e.target.value);
+  if (chosenExitToFrontExpiration.value !== Number.parseInt(e.target.value)) {
+    chosenExitToFrontExpiration.value = Number.parseInt(e.target.value);
     refreshHistoricalCalendarExitQuoteChartData();
   }
 };
@@ -198,320 +201,324 @@ export function HistoricalCalendarPrices() {
   useEffect(handleInit, []);
 
   return (
-      <Container maxWidth="lg">
-        <Grid container spacing={4}>
-          <Grid item xs={12}>
-            <Typography variant="h4" gutterBottom>
-              Historical Calendar Prices
-            </Typography>
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <Paper elevation={3} sx={{ p: 3 }}>
-              <Grid container spacing={2}>
-                <Grid item xs={12}>
-                  <FormControl fullWidth>
-                    <InputLabel>Available Underlyings</InputLabel>
-                    <Select
-                      value={chosenUnderlying.value || ""}
-                      onChange={handleUnderlyingChange}
-                      label="Available Underlyings"
-                    >
-                      {availableUnderlyings.value.map((underlying) => (
-                        <MenuItem key={underlying} value={underlying}>
-                          {underlying}
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  </FormControl>
-                </Grid>
-                <Grid item xs={12}>
-                  <TextField
-                    fullWidth
-                    label="Now-to-Front-Month Days to Expiration"
-                    type="number"
-                    value={chosenDaysToFrontExpiration.value}
-                    onChange={handleDaysToFrontExpirationChange}
-                    InputProps={{ endAdornment: "Days" }}
-                  />
-                </Grid>
-                <Grid item xs={12}>
-                  <TextField
-                    fullWidth
-                    label="Front-to-Back-Month Days to Expiration Difference"
-                    type="number"
-                    value={chosenDaysBetweenFrontAndBackExpiration.value}
-                    onChange={handleDaysBetweenFrontAndBackExpirationChange}
-                    InputProps={{ endAdornment: "Days Difference" }}
-                  />
-                </Grid>
-                <Grid item xs={6}>
-                  <TextField
-                    fullWidth
-                    label="Strike % From Underlying Price"
-                    type="number"
-                    value={chosenStrikePercentageFromUnderlyingPrice.value}
-                    onChange={handleStrikePercentageFromUnderlyingPriceChange}
-                    InputProps={{ endAdornment: "%" }}
-                  />
-                </Grid>
-                <Grid item xs={6}>
-                  <TextField
-                    fullWidth
-                    label="Strike % Radius"
-                    type="number"
-                    value={chosenStrikePercentageFromUnderlyingPriceRadius.value}
-                    onChange={handleStrikePercentageFromUnderlyingPriceRadiusChange}
-                    InputProps={{ endAdornment: "%" }}
-                  />
-                </Grid>
-                <Grid item xs={12}>
-                  <TextField
-                    fullWidth
-                    label="Exit-to-Front-Month Days to Expiration"
-                    type="number"
-                    value={chosenExitToFrontExpiration.value}
-                    onChange={handleExitToFrontExpirationChange}
-                    InputProps={{ endAdornment: "Days" }}
-                  />
-                </Grid>
-                <Grid item xs={6}>
-  <TextField
-    fullWidth
-    label="Lookback Period Start"
-    type="date"
-    value={chosenLookbackPeriodStart.value}
-    onChange={(e) => handleLookbackPeriodStartChange({ target: { value: e.target.value } })}
-    InputLabelProps={{ shrink: true }}
-  />
-</Grid>
-<Grid item xs={6}>
-  <TextField
-    fullWidth
-    label="Lookback Period End"
-    type="date"
-    value={chosenLookbackPeriodEnd.value}
-    onChange={(e) => handleLookbackPeriodEndChange({ target: { value: e.target.value } })}
-    InputLabelProps={{ shrink: true }}
-  />
-</Grid>
+    <Container maxWidth="lg">
+      <Grid container spacing={4}>
+        <Grid item xs={12}>
+          <Typography variant="h4" gutterBottom>
+            Historical Calendar Prices
+          </Typography>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Paper elevation={3} sx={{ p: 3 }}>
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <FormControl fullWidth>
+                  <InputLabel>Available Underlyings</InputLabel>
+                  <Select
+                    value={chosenUnderlying.value || ""}
+                    onChange={handleUnderlyingChange}
+                    label="Available Underlyings"
+                  >
+                    {availableUnderlyings.value.map((underlying) => (
+                      <MenuItem key={underlying} value={underlying}>
+                        {underlying}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
               </Grid>
-            </Paper>
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <Paper elevation={3} sx={{ p: 3, height: '100%' }}>
-              {chosenUnderlying.value !== null &&
-              historicalStockQuoteChartData.value.length > 0 ? (
-                <Scatter
-                  data={{
-                    datasets: [
-                      {
-                        label: "Stock Open Price",
-                        data: historicalStockQuoteChartData.value,
-                      },
-                    ],
-                  }}
-                  options={{
-                    scales: {
-                      x: {
-                        title: {
-                          display: true,
-                          text: "Time",
-                        },
-                        ticks: {
-                          callback: function (value, index, ticks) {
-                            return new Date((value as number) * 1000)
-                              .toISOString()
-                              .substring(0, 10);
-                          },
-                        },
-                        min:
-                          new Date(chosenLookbackPeriodStart.value).getTime() /
-                          1000,
-                        max:
-                          new Date(chosenLookbackPeriodEnd.value).getTime() /
-                          1000,
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth
+                  label="Now-to-Front-Month Days to Expiration"
+                  type="number"
+                  value={chosenDaysToFrontExpiration.value}
+                  onChange={handleDaysToFrontExpirationChange}
+                  InputProps={{ endAdornment: "Days" }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth
+                  label="Front-to-Back-Month Days to Expiration Difference"
+                  type="number"
+                  value={chosenDaysBetweenFrontAndBackExpiration.value}
+                  onChange={handleDaysBetweenFrontAndBackExpirationChange}
+                  InputProps={{ endAdornment: "Days Difference" }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth
+                  label="Strike % From Underlying Price"
+                  type="number"
+                  value={chosenStrikePercentageFromUnderlyingPrice.value}
+                  onChange={handleStrikePercentageFromUnderlyingPriceChange}
+                  InputProps={{ endAdornment: "%" }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth
+                  label="Strike % Radius"
+                  type="number"
+                  value={chosenStrikePercentageFromUnderlyingPriceRadius.value}
+                  onChange={
+                    handleStrikePercentageFromUnderlyingPriceRadiusChange
+                  }
+                  InputProps={{ endAdornment: "%" }}
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth
+                  label="Exit-to-Front-Month Days to Expiration"
+                  type="number"
+                  value={chosenExitToFrontExpiration.value}
+                  onChange={handleExitToFrontExpirationChange}
+                  InputProps={{ endAdornment: "Days" }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth
+                  label="Lookback Period Start"
+                  type="date"
+                  value={chosenLookbackPeriodStart.value}
+                  onChange={(e) =>
+                    handleLookbackPeriodStartChange({
+                      target: { value: e.target.value },
+                    })
+                  }
+                  InputLabelProps={{ shrink: true }}
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TextField
+                  fullWidth
+                  label="Lookback Period End"
+                  type="date"
+                  value={chosenLookbackPeriodEnd.value}
+                  onChange={(e) =>
+                    handleLookbackPeriodEndChange({
+                      target: { value: e.target.value },
+                    })
+                  }
+                  InputLabelProps={{ shrink: true }}
+                />
+              </Grid>
+            </Grid>
+          </Paper>
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <Paper elevation={3} sx={{ p: 3, height: "100%" }}>
+            {chosenUnderlying.value !== null &&
+            historicalStockQuoteChartData.value.length > 0 ? (
+              <Scatter
+                data={{
+                  datasets: [
+                    {
+                      label: "Stock Open Price",
+                      data: historicalStockQuoteChartData.value,
+                    },
+                  ],
+                }}
+                options={{
+                  scales: {
+                    x: {
+                      title: {
+                        display: true,
+                        text: "Time",
                       },
-                      y: {
-                        beginAtZero: false,
-                        ticks: {
-                          callback: function (value, index, ticks) {
-                            return "$" + value.toString();
-                          },
-                        },
+                      ticks: {
+                        callback: (value, index, ticks) =>
+                          new Date((value as number) * 1000)
+                            .toISOString()
+                            .substring(0, 10),
                       },
+                      min:
+                        new Date(chosenLookbackPeriodStart.value).getTime() /
+                        1000,
+                      max:
+                        new Date(chosenLookbackPeriodEnd.value).getTime() /
+                        1000,
                     },
-                    elements: {
-                      point: {
-                        radius: 1,
-                        borderWidth: 0,
+                    y: {
+                      beginAtZero: false,
+                      ticks: {
+                        callback: (value, index, ticks) =>
+                          `$${value.toString()}`,
                       },
                     },
-                    plugins: {
-                      tooltip: {
-                        enabled: false,
-                      },
-                      legend: {
-                        display: false,
-                      },
+                  },
+                  elements: {
+                    point: {
+                      radius: 1,
+                      borderWidth: 0,
+                    },
+                  },
+                  plugins: {
+                    tooltip: {
+                      enabled: false,
+                    },
+                    legend: {
+                      display: false,
+                    },
+                    title: {
+                      display: true,
+                      text: "Stock Price",
+                    },
+                  },
+                  animation: false,
+                  maintainAspectRatio: false,
+                  events: [],
+                }}
+              />
+            ) : (
+              <Typography>Loading Chart...</Typography>
+            )}
+          </Paper>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper elevation={3} sx={{ p: 3 }}>
+            {chosenUnderlying.value !== null &&
+            historicalCalendarQuoteChartData.value.length > 0 ? (
+              <Scatter
+                data={{
+                  datasets: [
+                    {
+                      label: "Calendar Open Price",
+                      data: historicalCalendarQuoteChartData.value,
+                    },
+                  ],
+                }}
+                options={{
+                  scales: {
+                    x: {
                       title: {
                         display: true,
-                        text: "Stock Price",
-                      },
-                    },
-                    animation: false,
-                    maintainAspectRatio: false,
-                    events: [],
-                  }}
-                />
-              ) : (
-                <Typography>Loading Chart...</Typography>
-              )}
-            </Paper>
-          </Grid>
-          <Grid item xs={12}>
-            <Paper elevation={3} sx={{ p: 3 }}>
-              {chosenUnderlying.value !== null &&
-              historicalCalendarQuoteChartData.value.length > 0 ? (
-                <Scatter
-                  data={{
-                    datasets: [
-                      {
-                        label: "Calendar Open Price",
-                        data: historicalCalendarQuoteChartData.value,
-                      },
-                    ],
-                  }}
-                  options={{
-                    scales: {
-                      x: {
-                        title: {
-                          display: true,
-                          text: "Time",
-                        },
-                        ticks: {
-                          callback: function (value, index, ticks) {
-                            return new Date((value as number) * 1000)
-                              .toISOString()
-                              .substring(0, 10);
-                          },
-                        },
-                        min:
-                          new Date(chosenLookbackPeriodStart.value).getTime() /
-                          1000,
-                        max:
-                          new Date(chosenLookbackPeriodEnd.value).getTime() /
-                          1000,
+                        text: "Time",
                       },
-                      y: {
-                        beginAtZero: true,
-                        ticks: {
-                          callback: function (value, index, ticks) {
-                            return "$" + value.toString();
-                          },
-                        },
-                        min: 0,
-                        max: maxChartPrice.value,
+                      ticks: {
+                        callback: (value, index, ticks) =>
+                          new Date((value as number) * 1000)
+                            .toISOString()
+                            .substring(0, 10),
                       },
+                      min:
+                        new Date(chosenLookbackPeriodStart.value).getTime() /
+                        1000,
+                      max:
+                        new Date(chosenLookbackPeriodEnd.value).getTime() /
+                        1000,
                     },
-                    plugins: {
-                      tooltip: {
-                        enabled: false,
-                      },
-                      legend: {
-                        display: false,
+                    y: {
+                      beginAtZero: true,
+                      ticks: {
+                        callback: (value, index, ticks) =>
+                          `$${value.toString()}`,
                       },
+                      min: 0,
+                      max: maxChartPrice.value,
+                    },
+                  },
+                  plugins: {
+                    tooltip: {
+                      enabled: false,
+                    },
+                    legend: {
+                      display: false,
+                    },
+                    title: {
+                      display: true,
+                      text: "Calendar Price (Under Like Conditions)",
+                    },
+                  },
+                  animation: false,
+                  maintainAspectRatio: false,
+                  events: [],
+                }}
+              />
+            ) : (
+              <Typography>Loading Chart...</Typography>
+            )}
+          </Paper>
+        </Grid>
+        <Grid item xs={12}>
+          <Paper elevation={3} sx={{ p: 3 }}>
+            {chosenUnderlying.value !== null &&
+            historicalCalendarQuoteChartData.value.length > 0 ? (
+              <Scatter
+                data={{
+                  datasets: [
+                    {
+                      label: "Calendar Exit Price",
+                      data: historicalCalendarExitQuoteChartData.value,
+                    },
+                  ],
+                }}
+                options={{
+                  scales: {
+                    x: {
+                      type: "linear",
+                      beginAtZero: false,
                       title: {
                         display: true,
-                        text: "Calendar Price (Under Like Conditions)",
-                      },
-                    },
-                    animation: false,
-                    maintainAspectRatio: false,
-                    events: [],
-                  }}
-                />
-              ) : (
-                <Typography>Loading Chart...</Typography>
-              )}
-            </Paper>
-          </Grid>
-          <Grid item xs={12}>
-            <Paper elevation={3} sx={{ p: 3 }}>
-              {chosenUnderlying.value !== null &&
-              historicalCalendarQuoteChartData.value.length > 0 ? (
-                <Scatter
-                  data={{
-                    datasets: [
-                      {
-                        label: "Calendar Exit Price",
-                        data: historicalCalendarExitQuoteChartData.value,
+                        text: "%-From-the-Money",
                       },
-                    ],
-                  }}
-                  options={{
-                    scales: {
-                      x: {
-                        type: "linear",
-                        beginAtZero: false,
-                        title: {
-                          display: true,
-                          text: "%-From-the-Money",
-                        },
-                        ticks: {
-                          callback: function (value, index, ticks) {
-                            return value.toString() + "%";
-                          },
-                        },
-                      },
-                      y: {
-                        beginAtZero: true,
-                        ticks: {
-                          callback: function (value, index, ticks) {
-                            return "$" + value.toString();
-                          },
-                        },
-                        min: 0,
-                        max: maxChartPrice.value,
+                      ticks: {
+                        callback: (value, index, ticks) =>
+                          `${value.toString()}%`,
                       },
                     },
-                    elements: {
-                      point: {
-                        borderWidth: 0,
-                        backgroundColor: function (context) {
-                          const n = (
-                            context.raw as { x: number; y: number; n: number }
-                          ).n;
-                          const alpha = n / maxN.value;
-                          return `rgba(0, 0, 0, ${alpha})`;
-                        },
+                    y: {
+                      beginAtZero: true,
+                      ticks: {
+                        callback: (value, index, ticks) =>
+                          `$${value.toString()}`,
                       },
+                      min: 0,
+                      max: maxChartPrice.value,
                     },
-                    plugins: {
-                      tooltip: {
-                        enabled: false,
-                      },
-                      legend: {
-                        display: false,
-                      },
-                      title: {
-                        display: true,
-                        text: [
-                          "Calendar Prices at Exit",
-                          "by %-age from-the-money",
-                        ],
+                  },
+                  elements: {
+                    point: {
+                      borderWidth: 0,
+                      backgroundColor: (context) => {
+                        const n = (
+                          context.raw as { x: number; y: number; n: number }
+                        ).n;
+                        const alpha = n / maxN.value;
+                        return `rgba(0, 0, 0, ${alpha})`;
                       },
                     },
-                    animation: false,
-                    maintainAspectRatio: false,
-                    events: [],
-                  }}
-                />
-              ) : (
-                <Typography>Loading Chart...</Typography>
-              )}
-            </Paper>
-          </Grid>
+                  },
+                  plugins: {
+                    tooltip: {
+                      enabled: false,
+                    },
+                    legend: {
+                      display: false,
+                    },
+                    title: {
+                      display: true,
+                      text: [
+                        "Calendar Prices at Exit",
+                        "by %-age from-the-money",
+                      ],
+                    },
+                  },
+                  animation: false,
+                  maintainAspectRatio: false,
+                  events: [],
+                }}
+              />
+            ) : (
+              <Typography>Loading Chart...</Typography>
+            )}
+          </Paper>
         </Grid>
-      </Container>
+      </Grid>
+    </Container>
   );
 }