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

refactor

Browse Source
This commit is contained in:
avraham
2024-09-26 21:00:58 -04:00
parent 7bca5e701d
commit ea9bd307f3
6 changed files with 122 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/HistoricalCalendarPrices.tsx
+112 -124
View File
@@ -25,175 +25,171 @@ import {
ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
const availableUnderlyings = signal([]);
const chosenUnderlying = signal(null);
const underlying = signal(null);
const chosenDaysToFrontExpiration = signal(14);
const daysToFrontExpiration = signal(14);
const chosenDaysBetweenFrontAndBackExpiration = signal(14);
const daysBetweenFrontAndBackExpiration = signal(14);
const chosenStrikePercentageFromUnderlyingPrice = signal(1.4);
const chosenStrikePercentageFromUnderlyingPriceRadius = signal(0.05);
const strikePercentageFromUnderlyingPrice = signal(1.4);
const strikePercentageFromUnderlyingPriceRadius = signal(0.05);
const chosenExitToFrontExpiration = signal(2);
const exitToFrontExpiration = signal(2);
const historicalStockQuoteChartData = signal([]);
const stockPriceChartData = signal([]);
const historicalCalendarQuoteChartData = signal([]);
const similarCalendarPriceChartData = signal([]);
const historicalCalendarExitQuoteChartData = signal([]);
const calendarExitPriceChartData = signal([]);
const chosenLookbackPeriodStart = signal("2022-01-01");
const chosenLookbackPeriodEnd = signal("2024-01-01");
const lookbackPeriodStart = signal("2022-01-01");
const lookbackPeriodEnd = signal("2024-01-01");
const maxChartPrice = computed(() =>
Math.max(
Math.max.apply(
null,
historicalCalendarQuoteChartData.value.map((d) => d.y),
similarCalendarPriceChartData.value.map((d) => d.y)
),
Math.max.apply(
null,
historicalCalendarExitQuoteChartData.value.map((d) => d.y),
),
),
calendarExitPriceChartData.value.map((d) => d.y)
)
)
);
const maxN = computed(() =>
Math.max.apply(
null,
historicalCalendarExitQuoteChartData.value.map((d) => d.n),
),
calendarExitPriceChartData.value.map((d) => d.n)
)
);
const refreshHistoricalStockQuoteChartData = () => {
historicalStockQuoteChartData.value = [];
trpc.getHistoricalStockQuoteChartData
const refreshStockPriceChartData = () => {
stockPriceChartData.value = [];
trpc.StockPriceChart.getChartData
.query({
underlying: chosenUnderlying.value,
lookbackPeriodStart: chosenLookbackPeriodStart.value,
lookbackPeriodEnd: chosenLookbackPeriodEnd.value,
underlying: underlying.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getHistoricalStockQuoteChartDataResponse) => {
historicalStockQuoteChartData.value =
getHistoricalStockQuoteChartDataResponse;
.then((getChartDataResponse) => {
stockPriceChartData.value = getChartDataResponse;
});
};
const refreshHistoricalCalendarQuoteChartData = () => {
historicalCalendarQuoteChartData.value = [];
trpc.getHistoricalCalendarQuoteChartData
const refreshSimilarCalendarPriceChartData = () => {
similarCalendarPriceChartData.value = [];
trpc.SimilarCalendarPriceChart.getChartData
.query({
underlying: chosenUnderlying.value,
daysToFrontExpiration: chosenDaysToFrontExpiration.value,
underlying: underlying.value,
daysToFrontExpiration: daysToFrontExpiration.value,
daysBetweenFrontAndBackExpiration:
chosenDaysBetweenFrontAndBackExpiration.value,
daysBetweenFrontAndBackExpiration.value,
strikePercentageFromUnderlyingPriceRangeMin:
chosenStrikePercentageFromUnderlyingPrice.value -
chosenStrikePercentageFromUnderlyingPriceRadius.value,
strikePercentageFromUnderlyingPrice.value -
strikePercentageFromUnderlyingPriceRadius.value,
strikePercentageFromUnderlyingPriceRangeMax:
chosenStrikePercentageFromUnderlyingPrice.value +
chosenStrikePercentageFromUnderlyingPriceRadius.value,
lookbackPeriodStart: chosenLookbackPeriodStart.value,
lookbackPeriodEnd: chosenLookbackPeriodEnd.value,
strikePercentageFromUnderlyingPrice.value +
strikePercentageFromUnderlyingPriceRadius.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getHistoricalCalendarQuoteChartDataResponse) => {
historicalCalendarQuoteChartData.value =
getHistoricalCalendarQuoteChartDataResponse;
.then((getChartDataResponse) => {
similarCalendarPriceChartData.value = getChartDataResponse;
});
};
const refreshHistoricalCalendarExitQuoteChartData = () => {
historicalCalendarExitQuoteChartData.value = [];
trpc.getHistoricalCalendarExitQuoteChartData
const refreshcalendarExitPriceChartData = () => {
calendarExitPriceChartData.value = [];
trpc.CalendarExitPriceChart.getChartData
.query({
underlying: chosenUnderlying.value,
daysToFrontExpiration: chosenExitToFrontExpiration.value,
underlying: underlying.value,
daysToFrontExpiration: exitToFrontExpiration.value,
daysBetweenFrontAndBackExpiration:
chosenDaysBetweenFrontAndBackExpiration.value,
lookbackPeriodStart: chosenLookbackPeriodStart.value,
lookbackPeriodEnd: chosenLookbackPeriodEnd.value,
daysBetweenFrontAndBackExpiration.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getHistoricalCalendarExitQuoteChartDataResponse) => {
historicalCalendarExitQuoteChartData.value =
getHistoricalCalendarExitQuoteChartDataResponse;
.then((getChartDataResponse) => {
calendarExitPriceChartData.value = getChartDataResponse;
});
};
const handleInit = () => {
trpc.getAvailableUnderlyings.query().then((availableUnderlyingsResponse) => {
availableUnderlyings.value = availableUnderlyingsResponse;
chosenUnderlying.value = availableUnderlyingsResponse[0];
refreshHistoricalStockQuoteChartData();
refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData();
});
trpc.CalendarCharacteristicsForm.getAvailableUnderlyings
.query()
.then((availableUnderlyingsResponse) => {
availableUnderlyings.value = availableUnderlyingsResponse;
underlying.value = availableUnderlyingsResponse[0];
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
});
};
const handleUnderlyingChange = (e) => {
if (chosenUnderlying.value !== e.target.value) {
chosenUnderlying.value = e.target.value;
refreshHistoricalStockQuoteChartData();
refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData();
if (underlying.value !== e.target.value) {
underlying.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
const handleDaysToFrontExpirationChange = (e) => {
if (chosenDaysToFrontExpiration.value !== Number.parseInt(e.target.value)) {
chosenDaysToFrontExpiration.value = Number.parseInt(e.target.value);
refreshHistoricalCalendarQuoteChartData();
if (daysToFrontExpiration.value !== Number.parseInt(e.target.value)) {
daysToFrontExpiration.value = Number.parseInt(e.target.value);
refreshSimilarCalendarPriceChartData();
}
};
const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
if (
chosenDaysBetweenFrontAndBackExpiration.value !==
Number.parseInt(e.target.value)
daysBetweenFrontAndBackExpiration.value !== Number.parseInt(e.target.value)
) {
chosenDaysBetweenFrontAndBackExpiration.value = Number.parseInt(
e.target.value,
);
refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData();
daysBetweenFrontAndBackExpiration.value = Number.parseInt(e.target.value);
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
const handleStrikePercentageFromUnderlyingPriceChange = (e) => {
if (
chosenStrikePercentageFromUnderlyingPrice.value !==
strikePercentageFromUnderlyingPrice.value !==
Number.parseFloat(e.target.value)
) {
chosenStrikePercentageFromUnderlyingPrice.value = Number.parseFloat(
e.target.value,
strikePercentageFromUnderlyingPrice.value = Number.parseFloat(
e.target.value
);
refreshHistoricalCalendarQuoteChartData();
refreshSimilarCalendarPriceChartData();
}
};
const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e) => {
if (
chosenStrikePercentageFromUnderlyingPriceRadius.value !==
strikePercentageFromUnderlyingPriceRadius.value !==
Number.parseFloat(e.target.value)
) {
chosenStrikePercentageFromUnderlyingPriceRadius.value = Number.parseFloat(
e.target.value,
strikePercentageFromUnderlyingPriceRadius.value = Number.parseFloat(
e.target.value
);
refreshHistoricalCalendarQuoteChartData();
refreshSimilarCalendarPriceChartData();
}
};
const handleExitToFrontExpirationChange = (e) => {
if (chosenExitToFrontExpiration.value !== Number.parseInt(e.target.value)) {
chosenExitToFrontExpiration.value = Number.parseInt(e.target.value);
refreshHistoricalCalendarExitQuoteChartData();
if (exitToFrontExpiration.value !== Number.parseInt(e.target.value)) {
exitToFrontExpiration.value = Number.parseInt(e.target.value);
refreshcalendarExitPriceChartData();
}
};
const handleLookbackPeriodStartChange = (e) => {
if (chosenLookbackPeriodStart.value !== e.target.value) {
chosenLookbackPeriodStart.value = e.target.value;
refreshHistoricalStockQuoteChartData();
refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData();
if (lookbackPeriodStart.value !== e.target.value) {
lookbackPeriodStart.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
const handleLookbackPeriodEndChange = (e) => {
if (chosenLookbackPeriodEnd.value !== e.target.value) {
chosenLookbackPeriodEnd.value = e.target.value;
refreshHistoricalStockQuoteChartData();
refreshHistoricalCalendarQuoteChartData();
refreshHistoricalCalendarExitQuoteChartData();
if (lookbackPeriodEnd.value !== e.target.value) {
lookbackPeriodEnd.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
@@ -215,7 +211,7 @@ export function HistoricalCalendarPrices() {
<FormControl fullWidth>
<InputLabel>Available Underlyings</InputLabel>
<Select
value={chosenUnderlying.value || ""}
value={underlying.value || ""}
onChange={handleUnderlyingChange}
label="Available Underlyings"
>
@@ -232,7 +228,7 @@ export function HistoricalCalendarPrices() {
fullWidth
label="Now-to-Front-Month Days to Expiration"
type="number"
value={chosenDaysToFrontExpiration.value}
value={daysToFrontExpiration.value}
onChange={handleDaysToFrontExpirationChange}
InputProps={{ endAdornment: "Days" }}
/>
@@ -242,7 +238,7 @@ export function HistoricalCalendarPrices() {
fullWidth
label="Front-to-Back-Month Days to Expiration Difference"
type="number"
value={chosenDaysBetweenFrontAndBackExpiration.value}
value={daysBetweenFrontAndBackExpiration.value}
onChange={handleDaysBetweenFrontAndBackExpirationChange}
InputProps={{ endAdornment: "Days Difference" }}
/>
@@ -252,7 +248,7 @@ export function HistoricalCalendarPrices() {
fullWidth
label="Strike % From Underlying Price"
type="number"
value={chosenStrikePercentageFromUnderlyingPrice.value}
value={strikePercentageFromUnderlyingPrice.value}
onChange={handleStrikePercentageFromUnderlyingPriceChange}
InputProps={{ endAdornment: "%" }}
/>
@@ -262,7 +258,7 @@ export function HistoricalCalendarPrices() {
fullWidth
label="Strike % Radius"
type="number"
value={chosenStrikePercentageFromUnderlyingPriceRadius.value}
value={strikePercentageFromUnderlyingPriceRadius.value}
onChange={
handleStrikePercentageFromUnderlyingPriceRadiusChange
}
@@ -274,7 +270,7 @@ export function HistoricalCalendarPrices() {
fullWidth
label="Exit-to-Front-Month Days to Expiration"
type="number"
value={chosenExitToFrontExpiration.value}
value={exitToFrontExpiration.value}
onChange={handleExitToFrontExpirationChange}
InputProps={{ endAdornment: "Days" }}
/>
@@ -284,7 +280,7 @@ export function HistoricalCalendarPrices() {
fullWidth
label="Lookback Period Start"
type="date"
value={chosenLookbackPeriodStart.value}
value={lookbackPeriodStart.value}
onChange={(e) =>
handleLookbackPeriodStartChange({
target: { value: e.target.value },
@@ -298,7 +294,7 @@ export function HistoricalCalendarPrices() {
fullWidth
label="Lookback Period End"
type="date"
value={chosenLookbackPeriodEnd.value}
value={lookbackPeriodEnd.value}
onChange={(e) =>
handleLookbackPeriodEndChange({
target: { value: e.target.value },
@@ -312,14 +308,14 @@ export function HistoricalCalendarPrices() {
</Grid>
<Grid item xs={12} md={6}>
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
{chosenUnderlying.value !== null &&
historicalStockQuoteChartData.value.length > 0 ? (
{underlying.value !== null &&
stockPriceChartData.value.length > 0 ? (
<Scatter
data={{
datasets: [
{
label: "Stock Open Price",
data: historicalStockQuoteChartData.value,
data: stockPriceChartData.value,
},
],
}}
@@ -336,12 +332,8 @@ export function HistoricalCalendarPrices() {
.toISOString()
.substring(0, 10),
},
min:
new Date(chosenLookbackPeriodStart.value).getTime() /
1000,
max:
new Date(chosenLookbackPeriodEnd.value).getTime() /
1000,
min: new Date(lookbackPeriodStart.value).getTime() / 1000,
max: new Date(lookbackPeriodEnd.value).getTime() / 1000,
},
y: {
beginAtZero: false,
@@ -381,14 +373,14 @@ export function HistoricalCalendarPrices() {
</Grid>
<Grid item xs={12}>
<Paper elevation={3} sx={{ p: 3 }}>
{chosenUnderlying.value !== null &&
historicalCalendarQuoteChartData.value.length > 0 ? (
{underlying.value !== null &&
similarCalendarPriceChartData.value.length > 0 ? (
<Scatter
data={{
datasets: [
{
label: "Calendar Open Price",
data: historicalCalendarQuoteChartData.value,
data: similarCalendarPriceChartData.value,
},
],
}}
@@ -405,12 +397,8 @@ export function HistoricalCalendarPrices() {
.toISOString()
.substring(0, 10),
},
min:
new Date(chosenLookbackPeriodStart.value).getTime() /
1000,
max:
new Date(chosenLookbackPeriodEnd.value).getTime() /
1000,
min: new Date(lookbackPeriodStart.value).getTime() / 1000,
max: new Date(lookbackPeriodEnd.value).getTime() / 1000,
},
y: {
beginAtZero: true,
@@ -446,14 +434,14 @@ export function HistoricalCalendarPrices() {
</Grid>
<Grid item xs={12}>
<Paper elevation={3} sx={{ p: 3 }}>
{chosenUnderlying.value !== null &&
historicalCalendarQuoteChartData.value.length > 0 ? (
{underlying.value !== null &&
similarCalendarPriceChartData.value.length > 0 ? (
<Scatter
data={{
datasets: [
{
label: "Calendar Exit Price",
data: historicalCalendarExitQuoteChartData.value,
data: calendarExitPriceChartData.value,
},
],
}}