add dev envs; add lookbackPeriod

frontend/src/env.ts

@@ -0,0 +1,7 @@
+import dotenv from 'dotenv';
+
+if(process.env.NODE_DEV==="development"){
+  dotenv.config({ path:"../.env.development" });
+}
+
+export default null;

frontend/src/index.tsx

@@ -1,3 +1,4 @@
+import _ from './env';
 import { render } from 'preact';
 import { LocationProvider, Router, Route } from 'preact-iso';
 

frontend/src/pages/HistoricalCalendarPrices/HistoricalCalendarPrices.tsx

@@ -32,12 +32,17 @@ const historicalCalendarQuoteChartData = signal([]);
 
 const historicalCalendarExitQuoteChartData = signal([]);
 
+const chosenLookbackPeriodStart = signal("2022-01-01");
+const chosenLookbackPeriodEnd = signal("2024-01-01");
+
 
 export function HistoricalCalendarPrices(){
   const refreshHistoricalStockQuoteChartData = useCallback(()=>{
     trpc.getHistoricalStockQuoteChartData
       .query({
         underlying:chosenUnderlying.value,
+        lookbackPeriodStart:chosenLookbackPeriodStart.value,
+        lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
       })
       .then((getHistoricalStockQuoteChartDataResponse)=>{
         historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse;
@@ -51,6 +56,8 @@ export function HistoricalCalendarPrices(){
         daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value,
         strikePercentageFromUnderlyingPriceRangeMin:chosenStrikePercentageFromUnderlyingPrice.value - chosenStrikePercentageFromUnderlyingPriceRadius.value,
         strikePercentageFromUnderlyingPriceRangeMax:chosenStrikePercentageFromUnderlyingPrice.value + chosenStrikePercentageFromUnderlyingPriceRadius.value,
+        lookbackPeriodStart:chosenLookbackPeriodStart.value,
+        lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
       })
       .then((getHistoricalCalendarQuoteChartDataResponse)=>{
         historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse;
@@ -62,6 +69,8 @@ export function HistoricalCalendarPrices(){
         underlying:chosenUnderlying.value,
         daysToFrontExpiration:chosenExitToFrontExpiration.value,
         daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value,
+        lookbackPeriodStart:chosenLookbackPeriodStart.value,
+        lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
       })
       .then((getHistoricalCalendarExitQuoteChartDataResponse)=>{
         historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse;
@@ -106,6 +115,19 @@ export function HistoricalCalendarPrices(){
     refreshHistoricalCalendarExitQuoteChartData();
   },[]);
 
+  const handleLookbackPeriodStartChange = useCallback((e)=>{
+    chosenLookbackPeriodStart.value = e.target.value;
+    refreshHistoricalStockQuoteChartData();
+    refreshHistoricalCalendarQuoteChartData();
+    refreshHistoricalCalendarExitQuoteChartData();
+  },[]);
+  const handleLookbackPeriodEndChange = useCallback((e)=>{
+    chosenLookbackPeriodEnd.value = e.target.value;
+    refreshHistoricalStockQuoteChartData();
+    refreshHistoricalCalendarQuoteChartData();
+    refreshHistoricalCalendarExitQuoteChartData();
+  },[]);
+
   useEffect(handleInit, []);
 
   return (
@@ -145,6 +167,12 @@ export function HistoricalCalendarPrices(){
         <input type="text" onChange={handleExitToFrontExpirationChange} value={chosenExitToFrontExpiration.value} />
         Days
       </div>
+      <div>
+        <label>Lookback Period</label>
+        <input type="text" onChange={handleLookbackPeriodStartChange} value={chosenLookbackPeriodStart.value} />
+        -
+        <input type="text" onChange={handleLookbackPeriodEndChange} value={chosenLookbackPeriodEnd.value} />
+      </div>
       <div className="chart-container">
         {chosenUnderlying.value!==null && historicalStockQuoteChartData.value.length>0
         ? <div className="chart">