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

converted frontend from tailwind to material-ui using AI

Browse Source
main
avraham 1 year ago
parent 3e5e728d92
commit 70b690ab9d
9 changed files with 883 additions and 1045 deletions
Show Stats Download Patch File Download Diff File

4
frontend/index.css
Unescape Escape View File

@ -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;

11
frontend/package.json
Unescape Escape View File

@ -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"
}

1287
frontend/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

6
frontend/postcss.config.js
Unescape Escape View File

@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

53
frontend/src/components/Header.tsx
Unescape Escape View File

@ -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>
);
}
}

43
frontend/src/index.tsx
Unescape Escape View File

@ -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"));

229
frontend/src/pages/CalendarOptimizer.tsx
Unescape Escape View File

@ -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>
);
}
}

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

@ -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>
);
}

13
frontend/tailwind.config.js
Unescape Escape View File

@ -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: [],
};
Write Preview
Loading…
Cancel
Save