avraham/calendar-optimizer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

static handlers; use onBlur instead of onChange

Browse Source 
which gets converted to onInput due to preact/compat
This commit is contained in:
Avraham Sakal
2024-02-04 21:51:00 -05:00
parent 0627acc8cf
commit d5cc6d90b5
1 changed files with 90 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/HistoricalCalendarPrices/HistoricalCalendarPrices.tsx
+48 -32
View File
@@ -36,8 +36,7 @@ const chosenLookbackPeriodStart = signal("2022-01-01");
const chosenLookbackPeriodEnd = signal("2024-01-01"); const chosenLookbackPeriodEnd = signal("2024-01-01");
export function HistoricalCalendarPrices(){ const refreshHistoricalStockQuoteChartData = ()=>{
const refreshHistoricalStockQuoteChartData = useCallback(()=>{
trpc.getHistoricalStockQuoteChartData trpc.getHistoricalStockQuoteChartData
.query({ .query({
underlying:chosenUnderlying.value, underlying:chosenUnderlying.value,
@@ -47,8 +46,8 @@ export function HistoricalCalendarPrices(){
.then((getHistoricalStockQuoteChartDataResponse)=>{ .then((getHistoricalStockQuoteChartDataResponse)=>{
historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse; historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse;
}) })
},[]); };
const refreshHistoricalCalendarQuoteChartData = useCallback(()=>{ const refreshHistoricalCalendarQuoteChartData = ()=>{
trpc.getHistoricalCalendarQuoteChartData trpc.getHistoricalCalendarQuoteChartData
.query({ .query({
underlying:chosenUnderlying.value, underlying:chosenUnderlying.value,
@@ -62,8 +61,8 @@ export function HistoricalCalendarPrices(){
.then((getHistoricalCalendarQuoteChartDataResponse)=>{ .then((getHistoricalCalendarQuoteChartDataResponse)=>{
historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse; historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse;
}) })
},[]); };
const refreshHistoricalCalendarExitQuoteChartData = useCallback(()=>{ const refreshHistoricalCalendarExitQuoteChartData = ()=>{
trpc.getHistoricalCalendarExitQuoteChartData trpc.getHistoricalCalendarExitQuoteChartData
.query({ .query({
underlying:chosenUnderlying.value, underlying:chosenUnderlying.value,
@@ -75,8 +74,8 @@ export function HistoricalCalendarPrices(){
.then((getHistoricalCalendarExitQuoteChartDataResponse)=>{ .then((getHistoricalCalendarExitQuoteChartDataResponse)=>{
historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse; historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse;
}) })
},[]); };
const handleInit = useCallback(()=>{ const handleInit = ()=>{
trpc.getAvailableUnderlyings trpc.getAvailableUnderlyings
.query() .query()
.then((availableUnderlyingsResponse)=>{ .then((availableUnderlyingsResponse)=>{
@@ -86,48 +85,65 @@ export function HistoricalCalendarPrices(){
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData(); refreshHistoricalCalendarExitQuoteChartData();
}); });
},[]); };
const handleUnderlyingChange = useCallback((e)=>{ const handleUnderlyingChange = (e)=>{
if(chosenUnderlying.value !== e.target.value){
chosenUnderlying.value = e.target.value; chosenUnderlying.value = e.target.value;
refreshHistoricalStockQuoteChartData(); refreshHistoricalStockQuoteChartData();
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData(); refreshHistoricalCalendarExitQuoteChartData();
},[]); }
const handleDaysToFrontExpirationChange = useCallback((e)=>{ };
const handleDaysToFrontExpirationChange = (e)=>{
if(chosenDaysToFrontExpiration.value !== parseInt(e.target.value)){
chosenDaysToFrontExpiration.value = parseInt(e.target.value); chosenDaysToFrontExpiration.value = parseInt(e.target.value);
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
},[]); }
const handleDaysBetweenFrontAndBackExpirationChange = useCallback((e)=>{ };
const handleDaysBetweenFrontAndBackExpirationChange = (e)=>{
if(chosenDaysBetweenFrontAndBackExpiration.value !== parseInt(e.target.value)){
chosenDaysBetweenFrontAndBackExpiration.value = parseInt(e.target.value); chosenDaysBetweenFrontAndBackExpiration.value = parseInt(e.target.value);
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData(); refreshHistoricalCalendarExitQuoteChartData();
},[]); }
const handleStrikePercentageFromUnderlyingPriceChange = useCallback((e)=>{ };
const handleStrikePercentageFromUnderlyingPriceChange = (e)=>{
if(chosenStrikePercentageFromUnderlyingPrice.value !== parseFloat(e.target.value)){
chosenStrikePercentageFromUnderlyingPrice.value = parseFloat(e.target.value); chosenStrikePercentageFromUnderlyingPrice.value = parseFloat(e.target.value);
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
},[]); }
const handleStrikePercentageFromUnderlyingPriceRadiusChange = useCallback((e)=>{ };
const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e)=>{
if(chosenStrikePercentageFromUnderlyingPriceRadius.value !== parseFloat(e.target.value)){
chosenStrikePercentageFromUnderlyingPriceRadius.value = parseFloat(e.target.value); chosenStrikePercentageFromUnderlyingPriceRadius.value = parseFloat(e.target.value);
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
},[]); }
const handleExitToFrontExpirationChange = useCallback((e)=>{ };
const handleExitToFrontExpirationChange = (e)=>{
if(chosenExitToFrontExpiration.value !== parseInt(e.target.value)){
chosenExitToFrontExpiration.value = parseInt(e.target.value); chosenExitToFrontExpiration.value = parseInt(e.target.value);
refreshHistoricalCalendarExitQuoteChartData(); refreshHistoricalCalendarExitQuoteChartData();
},[]); }
};
const handleLookbackPeriodStartChange = useCallback((e)=>{ const handleLookbackPeriodStartChange = (e)=>{
if(chosenLookbackPeriodStart.value !== e.target.value){
chosenLookbackPeriodStart.value = e.target.value; chosenLookbackPeriodStart.value = e.target.value;
refreshHistoricalStockQuoteChartData(); refreshHistoricalStockQuoteChartData();
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData(); refreshHistoricalCalendarExitQuoteChartData();
},[]); }
const handleLookbackPeriodEndChange = useCallback((e)=>{ };
const handleLookbackPeriodEndChange = (e)=>{
if(chosenLookbackPeriodEnd.value !== e.target.value){
chosenLookbackPeriodEnd.value = e.target.value; chosenLookbackPeriodEnd.value = e.target.value;
refreshHistoricalStockQuoteChartData(); refreshHistoricalStockQuoteChartData();
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData(); refreshHistoricalCalendarExitQuoteChartData();
},[]); }
};
export function HistoricalCalendarPrices(){
useEffect(handleInit, []); useEffect(handleInit, []);
return ( return (
@@ -146,32 +162,32 @@ export function HistoricalCalendarPrices(){
</div> </div>
<div> <div>
<label>Now-to-Front-Month "Days to Expiration"</label> <label>Now-to-Front-Month "Days to Expiration"</label>
<input type="text" onChange={handleDaysToFrontExpirationChange} value={chosenDaysToFrontExpiration.value} /> <input type="text" onBlur={handleDaysToFrontExpirationChange} value={chosenDaysToFrontExpiration.value} />
Days Days
</div> </div>
<div> <div>
<label>Front-to-Back-Month "Days to Expiration" Difference</label> <label>Front-to-Back-Month "Days to Expiration" Difference</label>
<input type="text" onChange={handleDaysBetweenFrontAndBackExpirationChange} value={chosenDaysBetweenFrontAndBackExpiration.value} /> <input type="text" onBlur={handleDaysBetweenFrontAndBackExpirationChange} value={chosenDaysBetweenFrontAndBackExpiration.value} />
Days Difference Days Difference
</div> </div>
<div> <div>
<label>"Strike Percentage From Underlying Price" Range</label> <label>"Strike Percentage From Underlying Price" Range</label>
<input type="text" onChange={handleStrikePercentageFromUnderlyingPriceChange} value={chosenStrikePercentageFromUnderlyingPrice.value} /> <input type="text" onBlur={handleStrikePercentageFromUnderlyingPriceChange} value={chosenStrikePercentageFromUnderlyingPrice.value} />
% %
+/- +/-
<input type="text" onChange={handleStrikePercentageFromUnderlyingPriceRadiusChange} value={chosenStrikePercentageFromUnderlyingPriceRadius.value} /> <input type="text" onBlur={handleStrikePercentageFromUnderlyingPriceRadiusChange} value={chosenStrikePercentageFromUnderlyingPriceRadius.value} />
% from ATM % from ATM
</div> </div>
<div> <div>
<label>Exit-to-Front-Month "Days to Expiration"</label> <label>Exit-to-Front-Month "Days to Expiration"</label>
<input type="text" onChange={handleExitToFrontExpirationChange} value={chosenExitToFrontExpiration.value} /> <input type="text" onBlur={handleExitToFrontExpirationChange} value={chosenExitToFrontExpiration.value} />
Days Days
</div> </div>
<div> <div>
<label>Lookback Period</label> <label>Lookback Period</label>
<input type="text" onChange={handleLookbackPeriodStartChange} value={chosenLookbackPeriodStart.value} /> <input type="text" onBlur={handleLookbackPeriodStartChange} value={chosenLookbackPeriodStart.value} />
- -
<input type="text" onChange={handleLookbackPeriodEndChange} value={chosenLookbackPeriodEnd.value} /> <input type="text" onBlur={handleLookbackPeriodEndChange} value={chosenLookbackPeriodEnd.value} />
</div> </div>
<div className="chart-container"> <div className="chart-container">
{chosenUnderlying.value!==null && historicalStockQuoteChartData.value.length>0 {chosenUnderlying.value!==null && historicalStockQuoteChartData.value.length>0