converted frontend from tailwind to material-ui using AI
This commit is contained in:
@@ -1,7 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
|
||||
@@ -7,20 +7,25 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@date-io/date-fns": "^3.0.0",
|
||||
"@emotion/react": "^11.13.0",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/material": "^5.16.6",
|
||||
"@mui/system": "^5.16.6",
|
||||
"@mui/x-date-pickers": "^7.12.0",
|
||||
"@preact/signals": "^1.2.2",
|
||||
"@trpc/client": "^10.45.0",
|
||||
"chart.js": "^4.4.1",
|
||||
"date-fns": "^3.6.0",
|
||||
"dotenv": "^16.4.1",
|
||||
"preact": "^10.13.1",
|
||||
"preact-iso": "^2.3.2",
|
||||
"preact-render-to-string": "^6.3.1",
|
||||
"react": "18.3.1",
|
||||
"react-chartjs-2": "^5.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "^2.5.0",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
"tailwindcss": "^3.4.4",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^4.3.2"
|
||||
}
|
||||
|
||||
Generated
+575
-724
File diff suppressed because it is too large
Load Diff
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -1,27 +1,40 @@
|
||||
import { useLocation } from "preact-iso";
|
||||
import { AppBar, Toolbar, Button, Box } from "@mui/material";
|
||||
import { styled } from "@mui/system";
|
||||
|
||||
const StyledToolbar = styled(Toolbar)({
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#E0E7FF", // Indigo-200 equivalent
|
||||
});
|
||||
|
||||
const StyledButton = styled(Button)(({ theme, active }) => ({
|
||||
color: theme.palette.text.primary,
|
||||
fontWeight: active ? "bold" : "normal",
|
||||
textDecoration: active ? "underline" : "none",
|
||||
}));
|
||||
|
||||
export function Header() {
|
||||
const { url } = useLocation();
|
||||
|
||||
return (
|
||||
<header class="flex flex-row justify-center">
|
||||
<nav class="flex flex-row justify-center text-lg gap-4 max-w-5xl py-2 px-3 rounded-full bg-indigo-200">
|
||||
<a
|
||||
href="/"
|
||||
class={
|
||||
(url === "/" || url === "/historical-calendar-prices") &&
|
||||
"underline font-bold"
|
||||
}
|
||||
>
|
||||
Historical Calendar Prices
|
||||
</a>
|
||||
<a
|
||||
href="/calendar-optimizer"
|
||||
class={url === "/calendar-optimizer" && "underline font-bold"}
|
||||
>
|
||||
Calendar Optimizer
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
<AppBar position="static" elevation={0}>
|
||||
<StyledToolbar>
|
||||
<Box sx={{ display: "flex", gap: 2 }}>
|
||||
<StyledButton
|
||||
href="/"
|
||||
active={url === "/" || url === "/historical-calendar-prices"}
|
||||
>
|
||||
Historical Calendar Prices
|
||||
</StyledButton>
|
||||
<StyledButton
|
||||
href="/calendar-optimizer"
|
||||
active={url === "/calendar-optimizer"}
|
||||
>
|
||||
Calendar Optimizer
|
||||
</StyledButton>
|
||||
</Box>
|
||||
</StyledToolbar>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
}
|
||||
+24
-19
@@ -1,32 +1,37 @@
|
||||
import _ from "./env";
|
||||
import { render } from "preact";
|
||||
import { LocationProvider, Router, Route } from "preact-iso";
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
|
||||
import { Header } from "./components/Header.jsx";
|
||||
import { CalendarOptimizer } from "./pages/CalendarOptimizer.js";
|
||||
import { NotFound } from "./pages/_404.jsx";
|
||||
// import './style.css';
|
||||
import { HistoricalCalendarPrices } from "./pages/HistoricalCalendarPrices.js";
|
||||
|
||||
const theme = createTheme();
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<LocationProvider>
|
||||
<div class="flex flex-col justify-start gap-4">
|
||||
<Header />
|
||||
<main>
|
||||
<Router>
|
||||
<Route path="/" component={HistoricalCalendarPrices} />
|
||||
<Route path="/calendar-optimizer" component={CalendarOptimizer} />
|
||||
<Route
|
||||
path="/historical-calendar-prices"
|
||||
component={HistoricalCalendarPrices}
|
||||
/>
|
||||
<Route default component={NotFound} />
|
||||
</Router>
|
||||
</main>
|
||||
</div>
|
||||
</LocationProvider>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<LocationProvider>
|
||||
<div>
|
||||
<Header />
|
||||
<main>
|
||||
<Router>
|
||||
<Route path="/" component={HistoricalCalendarPrices} />
|
||||
<Route path="/calendar-optimizer" component={CalendarOptimizer} />
|
||||
<Route
|
||||
path="/historical-calendar-prices"
|
||||
component={HistoricalCalendarPrices}
|
||||
/>
|
||||
<Route default component={NotFound} />
|
||||
</Router>
|
||||
</main>
|
||||
</div>
|
||||
</LocationProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
render(<App />, document.getElementById("app"));
|
||||
render(<App />, document.getElementById("app"));
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
width: {
|
||||
128: "32rem",
|
||||
160: "40rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Reference in New Issue
Block a user