fix biome kvetches
This commit is contained in:
@@ -86,7 +86,7 @@ function chooseStrike(strike: string) {
|
|||||||
.query({
|
.query({
|
||||||
underlying: chosenUnderlying.value,
|
underlying: chosenUnderlying.value,
|
||||||
expirationDate: chosenExpiration.value,
|
expirationDate: chosenExpiration.value,
|
||||||
strike: parseFloat(strike),
|
strike: Number.parseFloat(strike),
|
||||||
})
|
})
|
||||||
.then((getOpensForOptionContractResponse) => {
|
.then((getOpensForOptionContractResponse) => {
|
||||||
optionContractUplotData.value = getOpensForOptionContractResponse;
|
optionContractUplotData.value = getOpensForOptionContractResponse;
|
||||||
@@ -201,8 +201,9 @@ export function CalendarOptimizer() {
|
|||||||
</Paper>
|
</Paper>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} md={6}>
|
<Grid item xs={12} md={6}>
|
||||||
<Paper elevation={3} sx={{ p: 3, height: '100%' }}>
|
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
|
||||||
{chosenUnderlying.value !== null && underlyingUplotData.value.length > 0 ? (
|
{chosenUnderlying.value !== null &&
|
||||||
|
underlyingUplotData.value.length > 0 ? (
|
||||||
<Scatter
|
<Scatter
|
||||||
data={{
|
data={{
|
||||||
datasets: [
|
datasets: [
|
||||||
@@ -220,7 +221,7 @@ export function CalendarOptimizer() {
|
|||||||
text: "Time",
|
text: "Time",
|
||||||
},
|
},
|
||||||
ticks: {
|
ticks: {
|
||||||
callback: function (value, index, ticks) {
|
callback: (value, index, ticks) => {
|
||||||
return new Date((value as number) * 1000)
|
return new Date((value as number) * 1000)
|
||||||
.toISOString()
|
.toISOString()
|
||||||
.substring(0, 10);
|
.substring(0, 10);
|
||||||
@@ -230,8 +231,8 @@ export function CalendarOptimizer() {
|
|||||||
y: {
|
y: {
|
||||||
beginAtZero: false,
|
beginAtZero: false,
|
||||||
ticks: {
|
ticks: {
|
||||||
callback: function (value, index, ticks) {
|
callback: (value, index, ticks) => {
|
||||||
return "$" + value.toString();
|
return `$${value.toString()}`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -287,7 +288,7 @@ export function CalendarOptimizer() {
|
|||||||
text: "Time",
|
text: "Time",
|
||||||
},
|
},
|
||||||
ticks: {
|
ticks: {
|
||||||
callback: function (value, index, ticks) {
|
callback: (value, index, ticks) => {
|
||||||
return new Date((value as number) * 1000)
|
return new Date((value as number) * 1000)
|
||||||
.toISOString()
|
.toISOString()
|
||||||
.substring(0, 10);
|
.substring(0, 10);
|
||||||
@@ -297,8 +298,8 @@ export function CalendarOptimizer() {
|
|||||||
y: {
|
y: {
|
||||||
beginAtZero: false,
|
beginAtZero: false,
|
||||||
ticks: {
|
ticks: {
|
||||||
callback: function (value, index, ticks) {
|
callback: (value, index, ticks) => {
|
||||||
return "$" + value.toString();
|
return `$${value.toString()}`;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -49,20 +49,20 @@ const maxChartPrice = computed(() =>
|
|||||||
Math.max(
|
Math.max(
|
||||||
Math.max.apply(
|
Math.max.apply(
|
||||||
null,
|
null,
|
||||||
historicalCalendarQuoteChartData.value.map((d) => d.y)
|
historicalCalendarQuoteChartData.value.map((d) => d.y),
|
||||||
),
|
),
|
||||||
Math.max.apply(
|
Math.max.apply(
|
||||||
null,
|
null,
|
||||||
historicalCalendarExitQuoteChartData.value.map((d) => d.y)
|
historicalCalendarExitQuoteChartData.value.map((d) => d.y),
|
||||||
)
|
),
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
const maxN = computed(() =>
|
const maxN = computed(() =>
|
||||||
Math.max.apply(
|
Math.max.apply(
|
||||||
null,
|
null,
|
||||||
historicalCalendarExitQuoteChartData.value.map((d) => d.n)
|
historicalCalendarExitQuoteChartData.value.map((d) => d.n),
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
const refreshHistoricalStockQuoteChartData = () => {
|
const refreshHistoricalStockQuoteChartData = () => {
|
||||||
@@ -134,16 +134,19 @@ const handleUnderlyingChange = (e) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
const handleDaysToFrontExpirationChange = (e) => {
|
const handleDaysToFrontExpirationChange = (e) => {
|
||||||
if (chosenDaysToFrontExpiration.value !== parseInt(e.target.value)) {
|
if (chosenDaysToFrontExpiration.value !== Number.parseInt(e.target.value)) {
|
||||||
chosenDaysToFrontExpiration.value = parseInt(e.target.value);
|
chosenDaysToFrontExpiration.value = Number.parseInt(e.target.value);
|
||||||
refreshHistoricalCalendarQuoteChartData();
|
refreshHistoricalCalendarQuoteChartData();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
|
const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
|
||||||
if (
|
if (
|
||||||
chosenDaysBetweenFrontAndBackExpiration.value !== parseInt(e.target.value)
|
chosenDaysBetweenFrontAndBackExpiration.value !==
|
||||||
|
Number.parseInt(e.target.value)
|
||||||
) {
|
) {
|
||||||
chosenDaysBetweenFrontAndBackExpiration.value = parseInt(e.target.value);
|
chosenDaysBetweenFrontAndBackExpiration.value = Number.parseInt(
|
||||||
|
e.target.value,
|
||||||
|
);
|
||||||
refreshHistoricalCalendarQuoteChartData();
|
refreshHistoricalCalendarQuoteChartData();
|
||||||
refreshHistoricalCalendarExitQuoteChartData();
|
refreshHistoricalCalendarExitQuoteChartData();
|
||||||
}
|
}
|
||||||
@@ -151,10 +154,10 @@ const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
|
|||||||
const handleStrikePercentageFromUnderlyingPriceChange = (e) => {
|
const handleStrikePercentageFromUnderlyingPriceChange = (e) => {
|
||||||
if (
|
if (
|
||||||
chosenStrikePercentageFromUnderlyingPrice.value !==
|
chosenStrikePercentageFromUnderlyingPrice.value !==
|
||||||
parseFloat(e.target.value)
|
Number.parseFloat(e.target.value)
|
||||||
) {
|
) {
|
||||||
chosenStrikePercentageFromUnderlyingPrice.value = parseFloat(
|
chosenStrikePercentageFromUnderlyingPrice.value = Number.parseFloat(
|
||||||
e.target.value
|
e.target.value,
|
||||||
);
|
);
|
||||||
refreshHistoricalCalendarQuoteChartData();
|
refreshHistoricalCalendarQuoteChartData();
|
||||||
}
|
}
|
||||||
@@ -162,17 +165,17 @@ const handleStrikePercentageFromUnderlyingPriceChange = (e) => {
|
|||||||
const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e) => {
|
const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e) => {
|
||||||
if (
|
if (
|
||||||
chosenStrikePercentageFromUnderlyingPriceRadius.value !==
|
chosenStrikePercentageFromUnderlyingPriceRadius.value !==
|
||||||
parseFloat(e.target.value)
|
Number.parseFloat(e.target.value)
|
||||||
) {
|
) {
|
||||||
chosenStrikePercentageFromUnderlyingPriceRadius.value = parseFloat(
|
chosenStrikePercentageFromUnderlyingPriceRadius.value = Number.parseFloat(
|
||||||
e.target.value
|
e.target.value,
|
||||||
);
|
);
|
||||||
refreshHistoricalCalendarQuoteChartData();
|
refreshHistoricalCalendarQuoteChartData();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const handleExitToFrontExpirationChange = (e) => {
|
const handleExitToFrontExpirationChange = (e) => {
|
||||||
if (chosenExitToFrontExpiration.value !== parseInt(e.target.value)) {
|
if (chosenExitToFrontExpiration.value !== Number.parseInt(e.target.value)) {
|
||||||
chosenExitToFrontExpiration.value = parseInt(e.target.value);
|
chosenExitToFrontExpiration.value = Number.parseInt(e.target.value);
|
||||||
refreshHistoricalCalendarExitQuoteChartData();
|
refreshHistoricalCalendarExitQuoteChartData();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -198,320 +201,324 @@ export function HistoricalCalendarPrices() {
|
|||||||
useEffect(handleInit, []);
|
useEffect(handleInit, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container maxWidth="lg">
|
<Container maxWidth="lg">
|
||||||
<Grid container spacing={4}>
|
<Grid container spacing={4}>
|
||||||
<Grid item xs={12}>
|
<Grid item xs={12}>
|
||||||
<Typography variant="h4" gutterBottom>
|
<Typography variant="h4" gutterBottom>
|
||||||
Historical Calendar Prices
|
Historical Calendar Prices
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6}>
|
|
||||||
<Paper elevation={3} sx={{ p: 3 }}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<FormControl fullWidth>
|
|
||||||
<InputLabel>Available Underlyings</InputLabel>
|
|
||||||
<Select
|
|
||||||
value={chosenUnderlying.value || ""}
|
|
||||||
onChange={handleUnderlyingChange}
|
|
||||||
label="Available Underlyings"
|
|
||||||
>
|
|
||||||
{availableUnderlyings.value.map((underlying) => (
|
|
||||||
<MenuItem key={underlying} value={underlying}>
|
|
||||||
{underlying}
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Now-to-Front-Month Days to Expiration"
|
|
||||||
type="number"
|
|
||||||
value={chosenDaysToFrontExpiration.value}
|
|
||||||
onChange={handleDaysToFrontExpirationChange}
|
|
||||||
InputProps={{ endAdornment: "Days" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Front-to-Back-Month Days to Expiration Difference"
|
|
||||||
type="number"
|
|
||||||
value={chosenDaysBetweenFrontAndBackExpiration.value}
|
|
||||||
onChange={handleDaysBetweenFrontAndBackExpirationChange}
|
|
||||||
InputProps={{ endAdornment: "Days Difference" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Strike % From Underlying Price"
|
|
||||||
type="number"
|
|
||||||
value={chosenStrikePercentageFromUnderlyingPrice.value}
|
|
||||||
onChange={handleStrikePercentageFromUnderlyingPriceChange}
|
|
||||||
InputProps={{ endAdornment: "%" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Strike % Radius"
|
|
||||||
type="number"
|
|
||||||
value={chosenStrikePercentageFromUnderlyingPriceRadius.value}
|
|
||||||
onChange={handleStrikePercentageFromUnderlyingPriceRadiusChange}
|
|
||||||
InputProps={{ endAdornment: "%" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Exit-to-Front-Month Days to Expiration"
|
|
||||||
type="number"
|
|
||||||
value={chosenExitToFrontExpiration.value}
|
|
||||||
onChange={handleExitToFrontExpirationChange}
|
|
||||||
InputProps={{ endAdornment: "Days" }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Lookback Period Start"
|
|
||||||
type="date"
|
|
||||||
value={chosenLookbackPeriodStart.value}
|
|
||||||
onChange={(e) => handleLookbackPeriodStartChange({ target: { value: e.target.value } })}
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<TextField
|
|
||||||
fullWidth
|
|
||||||
label="Lookback Period End"
|
|
||||||
type="date"
|
|
||||||
value={chosenLookbackPeriodEnd.value}
|
|
||||||
onChange={(e) => handleLookbackPeriodEndChange({ target: { value: e.target.value } })}
|
|
||||||
InputLabelProps={{ shrink: true }}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Paper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6}>
|
|
||||||
<Paper elevation={3} sx={{ p: 3, height: '100%' }}>
|
|
||||||
{chosenUnderlying.value !== null &&
|
|
||||||
historicalStockQuoteChartData.value.length > 0 ? (
|
|
||||||
<Scatter
|
|
||||||
data={{
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "Stock Open Price",
|
|
||||||
data: historicalStockQuoteChartData.value,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
options={{
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: "Time",
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
callback: function (value, index, ticks) {
|
|
||||||
return new Date((value as number) * 1000)
|
|
||||||
.toISOString()
|
|
||||||
.substring(0, 10);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
min:
|
|
||||||
new Date(chosenLookbackPeriodStart.value).getTime() /
|
|
||||||
1000,
|
|
||||||
max:
|
|
||||||
new Date(chosenLookbackPeriodEnd.value).getTime() /
|
|
||||||
1000,
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
beginAtZero: false,
|
|
||||||
ticks: {
|
|
||||||
callback: function (value, index, ticks) {
|
|
||||||
return "$" + value.toString();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
radius: 1,
|
|
||||||
borderWidth: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
tooltip: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: "Stock Price",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: false,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
events: [],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Typography>Loading Chart...</Typography>
|
|
||||||
)}
|
|
||||||
</Paper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Paper elevation={3} sx={{ p: 3 }}>
|
|
||||||
{chosenUnderlying.value !== null &&
|
|
||||||
historicalCalendarQuoteChartData.value.length > 0 ? (
|
|
||||||
<Scatter
|
|
||||||
data={{
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "Calendar Open Price",
|
|
||||||
data: historicalCalendarQuoteChartData.value,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
options={{
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: "Time",
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
callback: function (value, index, ticks) {
|
|
||||||
return new Date((value as number) * 1000)
|
|
||||||
.toISOString()
|
|
||||||
.substring(0, 10);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
min:
|
|
||||||
new Date(chosenLookbackPeriodStart.value).getTime() /
|
|
||||||
1000,
|
|
||||||
max:
|
|
||||||
new Date(chosenLookbackPeriodEnd.value).getTime() /
|
|
||||||
1000,
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
beginAtZero: true,
|
|
||||||
ticks: {
|
|
||||||
callback: function (value, index, ticks) {
|
|
||||||
return "$" + value.toString();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
min: 0,
|
|
||||||
max: maxChartPrice.value,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
tooltip: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: "Calendar Price (Under Like Conditions)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: false,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
events: [],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Typography>Loading Chart...</Typography>
|
|
||||||
)}
|
|
||||||
</Paper>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Paper elevation={3} sx={{ p: 3 }}>
|
|
||||||
{chosenUnderlying.value !== null &&
|
|
||||||
historicalCalendarQuoteChartData.value.length > 0 ? (
|
|
||||||
<Scatter
|
|
||||||
data={{
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "Calendar Exit Price",
|
|
||||||
data: historicalCalendarExitQuoteChartData.value,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
options={{
|
|
||||||
scales: {
|
|
||||||
x: {
|
|
||||||
type: "linear",
|
|
||||||
beginAtZero: false,
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: "%-From-the-Money",
|
|
||||||
},
|
|
||||||
ticks: {
|
|
||||||
callback: function (value, index, ticks) {
|
|
||||||
return value.toString() + "%";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
beginAtZero: true,
|
|
||||||
ticks: {
|
|
||||||
callback: function (value, index, ticks) {
|
|
||||||
return "$" + value.toString();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
min: 0,
|
|
||||||
max: maxChartPrice.value,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
elements: {
|
|
||||||
point: {
|
|
||||||
borderWidth: 0,
|
|
||||||
backgroundColor: function (context) {
|
|
||||||
const n = (
|
|
||||||
context.raw as { x: number; y: number; n: number }
|
|
||||||
).n;
|
|
||||||
const alpha = n / maxN.value;
|
|
||||||
return `rgba(0, 0, 0, ${alpha})`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: {
|
|
||||||
tooltip: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
display: false,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
display: true,
|
|
||||||
text: [
|
|
||||||
"Calendar Prices at Exit",
|
|
||||||
"by %-age from-the-money",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: false,
|
|
||||||
maintainAspectRatio: false,
|
|
||||||
events: [],
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Typography>Loading Chart...</Typography>
|
|
||||||
)}
|
|
||||||
</Paper>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
</Container>
|
<Grid item xs={12} md={6}>
|
||||||
|
<Paper elevation={3} sx={{ p: 3 }}>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<FormControl fullWidth>
|
||||||
|
<InputLabel>Available Underlyings</InputLabel>
|
||||||
|
<Select
|
||||||
|
value={chosenUnderlying.value || ""}
|
||||||
|
onChange={handleUnderlyingChange}
|
||||||
|
label="Available Underlyings"
|
||||||
|
>
|
||||||
|
{availableUnderlyings.value.map((underlying) => (
|
||||||
|
<MenuItem key={underlying} value={underlying}>
|
||||||
|
{underlying}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Now-to-Front-Month Days to Expiration"
|
||||||
|
type="number"
|
||||||
|
value={chosenDaysToFrontExpiration.value}
|
||||||
|
onChange={handleDaysToFrontExpirationChange}
|
||||||
|
InputProps={{ endAdornment: "Days" }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Front-to-Back-Month Days to Expiration Difference"
|
||||||
|
type="number"
|
||||||
|
value={chosenDaysBetweenFrontAndBackExpiration.value}
|
||||||
|
onChange={handleDaysBetweenFrontAndBackExpirationChange}
|
||||||
|
InputProps={{ endAdornment: "Days Difference" }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Strike % From Underlying Price"
|
||||||
|
type="number"
|
||||||
|
value={chosenStrikePercentageFromUnderlyingPrice.value}
|
||||||
|
onChange={handleStrikePercentageFromUnderlyingPriceChange}
|
||||||
|
InputProps={{ endAdornment: "%" }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Strike % Radius"
|
||||||
|
type="number"
|
||||||
|
value={chosenStrikePercentageFromUnderlyingPriceRadius.value}
|
||||||
|
onChange={
|
||||||
|
handleStrikePercentageFromUnderlyingPriceRadiusChange
|
||||||
|
}
|
||||||
|
InputProps={{ endAdornment: "%" }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Exit-to-Front-Month Days to Expiration"
|
||||||
|
type="number"
|
||||||
|
value={chosenExitToFrontExpiration.value}
|
||||||
|
onChange={handleExitToFrontExpirationChange}
|
||||||
|
InputProps={{ endAdornment: "Days" }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Lookback Period Start"
|
||||||
|
type="date"
|
||||||
|
value={chosenLookbackPeriodStart.value}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleLookbackPeriodStartChange({
|
||||||
|
target: { value: e.target.value },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
InputLabelProps={{ shrink: true }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
label="Lookback Period End"
|
||||||
|
type="date"
|
||||||
|
value={chosenLookbackPeriodEnd.value}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleLookbackPeriodEndChange({
|
||||||
|
target: { value: e.target.value },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
InputLabelProps={{ shrink: true }}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} md={6}>
|
||||||
|
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
|
||||||
|
{chosenUnderlying.value !== null &&
|
||||||
|
historicalStockQuoteChartData.value.length > 0 ? (
|
||||||
|
<Scatter
|
||||||
|
data={{
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "Stock Open Price",
|
||||||
|
data: historicalStockQuoteChartData.value,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
options={{
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: "Time",
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
callback: (value, index, ticks) =>
|
||||||
|
new Date((value as number) * 1000)
|
||||||
|
.toISOString()
|
||||||
|
.substring(0, 10),
|
||||||
|
},
|
||||||
|
min:
|
||||||
|
new Date(chosenLookbackPeriodStart.value).getTime() /
|
||||||
|
1000,
|
||||||
|
max:
|
||||||
|
new Date(chosenLookbackPeriodEnd.value).getTime() /
|
||||||
|
1000,
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
beginAtZero: false,
|
||||||
|
ticks: {
|
||||||
|
callback: (value, index, ticks) =>
|
||||||
|
`$${value.toString()}`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
point: {
|
||||||
|
radius: 1,
|
||||||
|
borderWidth: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
tooltip: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: "Stock Price",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
events: [],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Typography>Loading Chart...</Typography>
|
||||||
|
)}
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Paper elevation={3} sx={{ p: 3 }}>
|
||||||
|
{chosenUnderlying.value !== null &&
|
||||||
|
historicalCalendarQuoteChartData.value.length > 0 ? (
|
||||||
|
<Scatter
|
||||||
|
data={{
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "Calendar Open Price",
|
||||||
|
data: historicalCalendarQuoteChartData.value,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
options={{
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: "Time",
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
callback: (value, index, ticks) =>
|
||||||
|
new Date((value as number) * 1000)
|
||||||
|
.toISOString()
|
||||||
|
.substring(0, 10),
|
||||||
|
},
|
||||||
|
min:
|
||||||
|
new Date(chosenLookbackPeriodStart.value).getTime() /
|
||||||
|
1000,
|
||||||
|
max:
|
||||||
|
new Date(chosenLookbackPeriodEnd.value).getTime() /
|
||||||
|
1000,
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
ticks: {
|
||||||
|
callback: (value, index, ticks) =>
|
||||||
|
`$${value.toString()}`,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: maxChartPrice.value,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
tooltip: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: "Calendar Price (Under Like Conditions)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
events: [],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Typography>Loading Chart...</Typography>
|
||||||
|
)}
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Paper elevation={3} sx={{ p: 3 }}>
|
||||||
|
{chosenUnderlying.value !== null &&
|
||||||
|
historicalCalendarQuoteChartData.value.length > 0 ? (
|
||||||
|
<Scatter
|
||||||
|
data={{
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "Calendar Exit Price",
|
||||||
|
data: historicalCalendarExitQuoteChartData.value,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}}
|
||||||
|
options={{
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
type: "linear",
|
||||||
|
beginAtZero: false,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: "%-From-the-Money",
|
||||||
|
},
|
||||||
|
ticks: {
|
||||||
|
callback: (value, index, ticks) =>
|
||||||
|
`${value.toString()}%`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
ticks: {
|
||||||
|
callback: (value, index, ticks) =>
|
||||||
|
`$${value.toString()}`,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: maxChartPrice.value,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
point: {
|
||||||
|
borderWidth: 0,
|
||||||
|
backgroundColor: (context) => {
|
||||||
|
const n = (
|
||||||
|
context.raw as { x: number; y: number; n: number }
|
||||||
|
).n;
|
||||||
|
const alpha = n / maxN.value;
|
||||||
|
return `rgba(0, 0, 0, ${alpha})`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
tooltip: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: [
|
||||||
|
"Calendar Prices at Exit",
|
||||||
|
"by %-age from-the-money",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: false,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
events: [],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Typography>Loading Chart...</Typography>
|
||||||
|
)}
|
||||||
|
</Paper>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user