converted frontend from tailwind to material-ui using AI
This commit is contained in:
@@ -10,7 +10,16 @@ import {
|
||||
Title,
|
||||
} from "chart.js";
|
||||
import { Scatter } from "react-chartjs-2";
|
||||
// import "./style.css";
|
||||
import {
|
||||
Container,
|
||||
Grid,
|
||||
Typography,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
Paper,
|
||||
} from "@mui/material";
|
||||
|
||||
ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
|
||||
|
||||
@@ -114,98 +123,86 @@ export function CalendarOptimizer() {
|
||||
useEffect(handleInit, []);
|
||||
|
||||
return (
|
||||
/* container for centering: */
|
||||
<div class="flex flex-row justify-center">
|
||||
<div class="flex flex-col justify-start gap-4">
|
||||
{/* inputs form container: */}
|
||||
<div class="flex flex-col justify-start gap-1">
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Available Underlyings</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
{availableUnderlyings.value.length === 0 ? (
|
||||
"Loading..."
|
||||
) : (
|
||||
<select
|
||||
onChange={handleUnderlyingChange}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
>
|
||||
{availableUnderlyings.value.map((availableUnderlying) => (
|
||||
<option value={availableUnderlying}>
|
||||
{availableUnderlying}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Available "As-of" Dates</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
{availableAsOfDates.value.length === 0 ? (
|
||||
"Loading..."
|
||||
) : (
|
||||
<select
|
||||
onChange={handleAsOfDateChange}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
>
|
||||
{availableAsOfDates.value.map((availableAsOfDate) => (
|
||||
<option value={availableAsOfDate}>
|
||||
{availableAsOfDate}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Available Expirations</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
{availableExpirations.value.length === 0 ? (
|
||||
"Loading..."
|
||||
) : (
|
||||
<select
|
||||
onChange={handleExpirationChange}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
>
|
||||
{availableExpirations.value.map((availableExpiration) => (
|
||||
<option value={availableExpiration}>
|
||||
{availableExpiration}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Available Strikes</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
{availableStrikes.value.length === 0 ? (
|
||||
"Loading..."
|
||||
) : (
|
||||
<select
|
||||
onChange={handleStrikeChange}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
>
|
||||
{availableStrikes.value.map((availableStrike) => (
|
||||
<option value={availableStrike}>{availableStrike}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart-container">
|
||||
{chosenUnderlying.value !== null &&
|
||||
underlyingUplotData.value.length > 0 ? (
|
||||
<div className="chart">
|
||||
<Container maxWidth="lg">
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Calendar Optimizer
|
||||
</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}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Available "As-of" Dates</InputLabel>
|
||||
<Select
|
||||
value={chosenAsOfDate.value || ""}
|
||||
onChange={handleAsOfDateChange}
|
||||
label='Available "As-of" Dates'
|
||||
>
|
||||
{availableAsOfDates.value.map((asOfDate) => (
|
||||
<MenuItem key={asOfDate} value={asOfDate}>
|
||||
{asOfDate}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Available Expirations</InputLabel>
|
||||
<Select
|
||||
value={chosenExpiration.value || ""}
|
||||
onChange={handleExpirationChange}
|
||||
label="Available Expirations"
|
||||
>
|
||||
{availableExpirations.value.map((expiration) => (
|
||||
<MenuItem key={expiration} value={expiration}>
|
||||
{expiration}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>Available Strikes</InputLabel>
|
||||
<Select
|
||||
value={chosenStrike.value || ""}
|
||||
onChange={handleStrikeChange}
|
||||
label="Available Strikes"
|
||||
>
|
||||
{availableStrikes.value.map((strike) => (
|
||||
<MenuItem key={strike} value={strike}>
|
||||
{strike}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Paper elevation={3} sx={{ p: 3, height: '100%' }}>
|
||||
{chosenUnderlying.value !== null && underlyingUplotData.value.length > 0 ? (
|
||||
<Scatter
|
||||
data={{
|
||||
datasets: [
|
||||
@@ -229,8 +226,6 @@ export function CalendarOptimizer() {
|
||||
.substring(0, 10);
|
||||
},
|
||||
},
|
||||
// min: (new Date(chosenLookbackPeriodStart.value)).getTime()/1000,
|
||||
// max: (new Date(chosenLookbackPeriodEnd.value)).getTime()/1000,
|
||||
},
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
@@ -239,8 +234,6 @@ export function CalendarOptimizer() {
|
||||
return "$" + value.toString();
|
||||
},
|
||||
},
|
||||
// min: 0,
|
||||
// max: maxChartPrice.value,
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
@@ -265,16 +258,18 @@ export function CalendarOptimizer() {
|
||||
maintainAspectRatio: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{chosenUnderlying.value !== null &&
|
||||
chosenAsOfDate.value !== null &&
|
||||
chosenExpiration.value !== null &&
|
||||
chosenStrike.value !== null &&
|
||||
optionContractUplotData.value.length > 0 ? (
|
||||
<div className="chart">
|
||||
) : (
|
||||
<Typography>Loading Chart...</Typography>
|
||||
)}
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Paper elevation={3} sx={{ p: 3 }}>
|
||||
{chosenUnderlying.value !== null &&
|
||||
chosenAsOfDate.value !== null &&
|
||||
chosenExpiration.value !== null &&
|
||||
chosenStrike.value !== null &&
|
||||
optionContractUplotData.value.length > 0 ? (
|
||||
<Scatter
|
||||
data={{
|
||||
datasets: [
|
||||
@@ -298,8 +293,6 @@ export function CalendarOptimizer() {
|
||||
.substring(0, 10);
|
||||
},
|
||||
},
|
||||
// min: (new Date(chosenLookbackPeriodStart.value)).getTime()/1000,
|
||||
// max: (new Date(chosenLookbackPeriodEnd.value)).getTime()/1000,
|
||||
},
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
@@ -308,8 +301,6 @@ export function CalendarOptimizer() {
|
||||
return "$" + value.toString();
|
||||
},
|
||||
},
|
||||
// min: 0,
|
||||
// max: maxChartPrice.value,
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
@@ -334,12 +325,12 @@ export function CalendarOptimizer() {
|
||||
maintainAspectRatio: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Typography>Loading Chart...</Typography>
|
||||
)}
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,17 @@ import {
|
||||
Title,
|
||||
} from "chart.js";
|
||||
import { Scatter } from "react-chartjs-2";
|
||||
// import './style.css';
|
||||
import {
|
||||
Container,
|
||||
Grid,
|
||||
Typography,
|
||||
TextField,
|
||||
Select,
|
||||
MenuItem,
|
||||
InputLabel,
|
||||
FormControl,
|
||||
Paper,
|
||||
} from "@mui/material";
|
||||
|
||||
ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
|
||||
|
||||
@@ -188,122 +198,109 @@ export function HistoricalCalendarPrices() {
|
||||
useEffect(handleInit, []);
|
||||
|
||||
return (
|
||||
/* container for centering: */
|
||||
<div class="flex flex-row justify-center">
|
||||
<div class="flex flex-col justify-start gap-4">
|
||||
{/* inputs form container: */}
|
||||
<div class="flex flex-col justify-start gap-1 divide-y">
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Available Underlyings</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
{availableUnderlyings.value.length === 0 ? (
|
||||
"Loading..."
|
||||
) : (
|
||||
<select
|
||||
onChange={handleUnderlyingChange}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
>
|
||||
{availableUnderlyings.value.map((availableUnderlying) => (
|
||||
<option value={availableUnderlying}>
|
||||
{availableUnderlying}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Now-to-Front-Month "Days to Expiration"</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
<input
|
||||
type="text"
|
||||
onBlur={handleDaysToFrontExpirationChange}
|
||||
value={chosenDaysToFrontExpiration.value}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
/>
|
||||
Days
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Front-to-Back-Month "Days to Expiration" Difference</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
<input
|
||||
type="text"
|
||||
onBlur={handleDaysBetweenFrontAndBackExpirationChange}
|
||||
value={chosenDaysBetweenFrontAndBackExpiration.value}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
/>
|
||||
Days Difference
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>"Strike Percentage From Underlying Price" Range</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
<input
|
||||
type="text"
|
||||
onBlur={handleStrikePercentageFromUnderlyingPriceChange}
|
||||
value={chosenStrikePercentageFromUnderlyingPrice.value}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
/>
|
||||
% +/-
|
||||
<input
|
||||
type="text"
|
||||
onBlur={handleStrikePercentageFromUnderlyingPriceRadiusChange}
|
||||
value={chosenStrikePercentageFromUnderlyingPriceRadius.value}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
/>
|
||||
% from ATM
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Exit-to-Front-Month "Days to Expiration"</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
<input
|
||||
type="text"
|
||||
onBlur={handleExitToFrontExpirationChange}
|
||||
value={chosenExitToFrontExpiration.value}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
/>
|
||||
Days
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row w-160 gap-3">
|
||||
<div class="text-right w-1/3">
|
||||
<label>Lookback Period</label>
|
||||
</div>
|
||||
<div class="my-auto w-2/3">
|
||||
<input
|
||||
type="text"
|
||||
onBlur={handleLookbackPeriodStartChange}
|
||||
value={chosenLookbackPeriodStart.value}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
/>
|
||||
-
|
||||
<input
|
||||
type="text"
|
||||
onBlur={handleLookbackPeriodEndChange}
|
||||
value={chosenLookbackPeriodEnd.value}
|
||||
class="border border-gray-300 focus:border-blue-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* charts container: */}
|
||||
<div className="flex flex-col justify-start gap-3">
|
||||
<div className="min-h-96">
|
||||
{chosenUnderlying.value !== null &&
|
||||
historicalStockQuoteChartData.value.length > 0 ? (
|
||||
<div className="h-full">
|
||||
<Container maxWidth="lg">
|
||||
<Grid container spacing={4}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Historical Calendar Prices
|
||||
</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: [
|
||||
@@ -366,15 +363,15 @@ export function HistoricalCalendarPrices() {
|
||||
events: [],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full">Loading Chart...</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-h-96">
|
||||
{chosenUnderlying.value !== null &&
|
||||
historicalCalendarQuoteChartData.value.length > 0 ? (
|
||||
<div className="h-full">
|
||||
) : (
|
||||
<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: [
|
||||
@@ -433,15 +430,15 @@ export function HistoricalCalendarPrices() {
|
||||
events: [],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full">Loading Chart...</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-h-96">
|
||||
{chosenUnderlying.value !== null &&
|
||||
historicalCalendarQuoteChartData.value.length > 0 ? (
|
||||
<div className="h-full">
|
||||
) : (
|
||||
<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: [
|
||||
@@ -509,13 +506,12 @@ export function HistoricalCalendarPrices() {
|
||||
events: [],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full">Loading Chart...</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Typography>Loading Chart...</Typography>
|
||||
)}
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user