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
main
Avraham Sakal 1 year ago
parent 0627acc8cf
commit d5cc6d90b5
1 changed files with 90 additions and 74 deletions
Show Stats Download Patch File Download Diff File

164
frontend/src/pages/HistoricalCalendarPrices/HistoricalCalendarPrices.tsx
Unescape Escape View File

@ -36,98 +36,114 @@ 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, lookbackPeriodStart:chosenLookbackPeriodStart.value,
lookbackPeriodStart:chosenLookbackPeriodStart.value, lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
lookbackPeriodEnd:chosenLookbackPeriodEnd.value, })
}) .then((getHistoricalStockQuoteChartDataResponse)=>{
.then((getHistoricalStockQuoteChartDataResponse)=>{ historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse;
historicalStockQuoteChartData.value = getHistoricalStockQuoteChartDataResponse; })
}) };
},[]); const refreshHistoricalCalendarQuoteChartData = ()=>{
const refreshHistoricalCalendarQuoteChartData = useCallback(()=>{ trpc.getHistoricalCalendarQuoteChartData
trpc.getHistoricalCalendarQuoteChartData .query({
.query({ underlying:chosenUnderlying.value,
underlying:chosenUnderlying.value, daysToFrontExpiration:chosenDaysToFrontExpiration.value,
daysToFrontExpiration:chosenDaysToFrontExpiration.value, daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value,
daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value, strikePercentageFromUnderlyingPriceRangeMin:chosenStrikePercentageFromUnderlyingPrice.value - chosenStrikePercentageFromUnderlyingPriceRadius.value,
strikePercentageFromUnderlyingPriceRangeMin:chosenStrikePercentageFromUnderlyingPrice.value - chosenStrikePercentageFromUnderlyingPriceRadius.value, strikePercentageFromUnderlyingPriceRangeMax:chosenStrikePercentageFromUnderlyingPrice.value + chosenStrikePercentageFromUnderlyingPriceRadius.value,
strikePercentageFromUnderlyingPriceRangeMax:chosenStrikePercentageFromUnderlyingPrice.value + chosenStrikePercentageFromUnderlyingPriceRadius.value, lookbackPeriodStart:chosenLookbackPeriodStart.value,
lookbackPeriodStart:chosenLookbackPeriodStart.value, lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
lookbackPeriodEnd:chosenLookbackPeriodEnd.value, })
}) .then((getHistoricalCalendarQuoteChartDataResponse)=>{
.then((getHistoricalCalendarQuoteChartDataResponse)=>{ historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse;
historicalCalendarQuoteChartData.value = getHistoricalCalendarQuoteChartDataResponse; })
}) };
},[]); const refreshHistoricalCalendarExitQuoteChartData = ()=>{
const refreshHistoricalCalendarExitQuoteChartData = useCallback(()=>{ trpc.getHistoricalCalendarExitQuoteChartData
trpc.getHistoricalCalendarExitQuoteChartData .query({
.query({ underlying:chosenUnderlying.value,
underlying:chosenUnderlying.value, daysToFrontExpiration:chosenExitToFrontExpiration.value,
daysToFrontExpiration:chosenExitToFrontExpiration.value, daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value,
daysBetweenFrontAndBackExpiration:chosenDaysBetweenFrontAndBackExpiration.value, lookbackPeriodStart:chosenLookbackPeriodStart.value,
lookbackPeriodStart:chosenLookbackPeriodStart.value, lookbackPeriodEnd:chosenLookbackPeriodEnd.value,
lookbackPeriodEnd:chosenLookbackPeriodEnd.value, })
}) .then((getHistoricalCalendarExitQuoteChartDataResponse)=>{
.then((getHistoricalCalendarExitQuoteChartDataResponse)=>{ historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse;
historicalCalendarExitQuoteChartData.value = getHistoricalCalendarExitQuoteChartDataResponse; })
}) };
},[]); const handleInit = ()=>{
const handleInit = useCallback(()=>{ trpc.getAvailableUnderlyings
trpc.getAvailableUnderlyings .query()
.query() .then((availableUnderlyingsResponse)=>{
.then((availableUnderlyingsResponse)=>{ availableUnderlyings.value = availableUnderlyingsResponse;
availableUnderlyings.value = availableUnderlyingsResponse; chosenUnderlying.value = availableUnderlyingsResponse[0];
chosenUnderlying.value = availableUnderlyingsResponse[0]; refreshHistoricalStockQuoteChartData();
refreshHistoricalStockQuoteChartData(); refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarQuoteChartData(); refreshHistoricalCalendarExitQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData(); });
}); };
},[]); const handleUnderlyingChange = (e)=>{
const handleUnderlyingChange = useCallback((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

Write Preview
Loading…
Cancel
Save