add dev envs; add lookbackPeriod

frontend/.env.development

@@ -0,0 +1 @@
+VITE_SERVER_BASE_URL=http://127.0.0.1:3005

frontend/package.json

@@ -10,6 +10,7 @@
 		"@preact/signals": "^1.2.2",
 		"@trpc/client": "^10.45.0",
 		"chart.js": "^4.4.1",
+		"dotenv": "^16.4.1",
 		"preact": "^10.13.1",
 		"preact-iso": "^2.3.2",
 		"preact-render-to-string": "^6.3.1",

frontend/pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   chart.js:
     specifier: ^4.4.1
     version: 4.4.1
+  dotenv:
+    specifier: ^16.4.1
+    version: 16.4.1
   preact:
     specifier: ^10.13.1
     version: 10.19.3
@@ -724,6 +727,11 @@ packages:
       domhandler: 5.0.3
     dev: true
 
+  /dotenv@16.4.1:
+    resolution: {integrity: sha512-CjA3y+Dr3FyFDOAMnxZEGtnW9KBR2M0JvvUtXNW+dYJL5ROWxP9DUHCwgFqpMk0OXCc0ljhaNTr2w/kutYIcHQ==}
+    engines: {node: '>=12'}
+    dev: false
+
   /electron-to-chromium@1.4.623:
     resolution: {integrity: sha512-lKoz10iCYlP1WtRYdh5MvocQPWVRoI7ysp6qf18bmeBgR8abE6+I2CsfyNKztRDZvhdWc+krKT6wS7Neg8sw3A==}
     dev: true

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">