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
This commit is contained in:
avraham
2024-08-02 13:37:08 -04:00
parent 3e5e728d92
commit 70b690ab9d
9 changed files with 889 additions and 1051 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.css
-4
View File
@@ -1,7 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
frontend/package.json
+8 -3
View File
@@ -7,20 +7,25 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "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", "@preact/signals": "^1.2.2",
"@trpc/client": "^10.45.0", "@trpc/client": "^10.45.0",
"chart.js": "^4.4.1", "chart.js": "^4.4.1",
"date-fns": "^3.6.0",
"dotenv": "^16.4.1", "dotenv": "^16.4.1",
"preact": "^10.13.1", "preact": "^10.13.1",
"preact-iso": "^2.3.2", "preact-iso": "^2.3.2",
"preact-render-to-string": "^6.3.1", "preact-render-to-string": "^6.3.1",
"react": "18.3.1",
"react-chartjs-2": "^5.2.0" "react-chartjs-2": "^5.2.0"
}, },
"devDependencies": { "devDependencies": {
"@preact/preset-vite": "^2.5.0", "@preact/preset-vite": "^2.5.0",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.4",
"typescript": "^5.3.3", "typescript": "^5.3.3",
"vite": "^4.3.2" "vite": "^4.3.2"
} }
frontend/pnpm-lock.yaml
Generated
+575 -724
View File
File diff suppressed because it is too large Load Diff
frontend/postcss.config.js
-6
View File
@@ -1,6 +0,0 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
frontend/src/components/Header.tsx
+26 -13
View File
@@ -1,27 +1,40 @@
import { useLocation } from "preact-iso"; 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() { export function Header() {
const { url } = useLocation(); const { url } = useLocation();
return ( return (
<header class="flex flex-row justify-center"> <AppBar position="static" elevation={0}>
<nav class="flex flex-row justify-center text-lg gap-4 max-w-5xl py-2 px-3 rounded-full bg-indigo-200"> <StyledToolbar>
<a <Box sx={{ display: "flex", gap: 2 }}>
<StyledButton
href="/" href="/"
class={ active={url === "/" || url === "/historical-calendar-prices"}
(url === "/" || url === "/historical-calendar-prices") &&
"underline font-bold"
}
> >
Historical Calendar Prices Historical Calendar Prices
</a> </StyledButton>
<a <StyledButton
href="/calendar-optimizer" href="/calendar-optimizer"
class={url === "/calendar-optimizer" && "underline font-bold"} active={url === "/calendar-optimizer"}
> >
Calendar Optimizer Calendar Optimizer
</a> </StyledButton>
</nav> </Box>
</header> </StyledToolbar>
</AppBar>
); );
} }
frontend/src/index.tsx
+8 -3
View File
@@ -1,17 +1,21 @@
import _ from "./env";
import { render } from "preact"; import { render } from "preact";
import { LocationProvider, Router, Route } from "preact-iso"; 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 { Header } from "./components/Header.jsx";
import { CalendarOptimizer } from "./pages/CalendarOptimizer.js"; import { CalendarOptimizer } from "./pages/CalendarOptimizer.js";
import { NotFound } from "./pages/_404.jsx"; import { NotFound } from "./pages/_404.jsx";
// import './style.css';
import { HistoricalCalendarPrices } from "./pages/HistoricalCalendarPrices.js"; import { HistoricalCalendarPrices } from "./pages/HistoricalCalendarPrices.js";
const theme = createTheme();
export function App() { export function App() {
return ( return (
<ThemeProvider theme={theme}>
<CssBaseline />
<LocationProvider> <LocationProvider>
<div class="flex flex-col justify-start gap-4"> <div>
<Header /> <Header />
<main> <main>
<Router> <Router>
@@ -26,6 +30,7 @@ export function App() {
</main> </main>
</div> </div>
</LocationProvider> </LocationProvider>
</ThemeProvider>
); );
} }
frontend/src/pages/CalendarOptimizer.tsx
+88 -97
View File
@@ -10,7 +10,16 @@ import {
Title, Title,
} from "chart.js"; } from "chart.js";
import { Scatter } from "react-chartjs-2"; 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); ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
@@ -114,98 +123,86 @@ export function CalendarOptimizer() {
useEffect(handleInit, []); useEffect(handleInit, []);
return ( return (
/* container for centering: */ <Container maxWidth="lg">
<div class="flex flex-row justify-center"> <Grid container spacing={4}>
<div class="flex flex-col justify-start gap-4"> <Grid item xs={12}>
{/* inputs form container: */} <Typography variant="h4" gutterBottom>
<div class="flex flex-col justify-start gap-1"> Calendar Optimizer
<div class="flex flex-row w-160 gap-3"> </Typography>
<div class="text-right w-1/3"> </Grid>
<label>Available Underlyings</label> <Grid item xs={12} md={6}>
</div> <Paper elevation={3} sx={{ p: 3 }}>
<div class="my-auto w-2/3"> <Grid container spacing={2}>
{availableUnderlyings.value.length === 0 ? ( <Grid item xs={12}>
"Loading..." <FormControl fullWidth>
) : ( <InputLabel>Available Underlyings</InputLabel>
<select <Select
value={chosenUnderlying.value || ""}
onChange={handleUnderlyingChange} onChange={handleUnderlyingChange}
class="border border-gray-300 focus:border-blue-400" label="Available Underlyings"
> >
{availableUnderlyings.value.map((availableUnderlying) => ( {availableUnderlyings.value.map((underlying) => (
<option value={availableUnderlying}> <MenuItem key={underlying} value={underlying}>
{availableUnderlying} {underlying}
</option> </MenuItem>
))} ))}
</select> </Select>
)} </FormControl>
</div> </Grid>
</div> <Grid item xs={12}>
<div class="flex flex-row w-160 gap-3"> <FormControl fullWidth>
<div class="text-right w-1/3"> <InputLabel>Available "As-of" Dates</InputLabel>
<label>Available "As-of" Dates</label> <Select
</div> value={chosenAsOfDate.value || ""}
<div class="my-auto w-2/3">
{availableAsOfDates.value.length === 0 ? (
"Loading..."
) : (
<select
onChange={handleAsOfDateChange} onChange={handleAsOfDateChange}
class="border border-gray-300 focus:border-blue-400" label='Available "As-of" Dates'
> >
{availableAsOfDates.value.map((availableAsOfDate) => ( {availableAsOfDates.value.map((asOfDate) => (
<option value={availableAsOfDate}> <MenuItem key={asOfDate} value={asOfDate}>
{availableAsOfDate} {asOfDate}
</option> </MenuItem>
))} ))}
</select> </Select>
)} </FormControl>
</div> </Grid>
</div> <Grid item xs={12}>
<div class="flex flex-row w-160 gap-3"> <FormControl fullWidth>
<div class="text-right w-1/3"> <InputLabel>Available Expirations</InputLabel>
<label>Available Expirations</label> <Select
</div> value={chosenExpiration.value || ""}
<div class="my-auto w-2/3">
{availableExpirations.value.length === 0 ? (
"Loading..."
) : (
<select
onChange={handleExpirationChange} onChange={handleExpirationChange}
class="border border-gray-300 focus:border-blue-400" label="Available Expirations"
> >
{availableExpirations.value.map((availableExpiration) => ( {availableExpirations.value.map((expiration) => (
<option value={availableExpiration}> <MenuItem key={expiration} value={expiration}>
{availableExpiration} {expiration}
</option> </MenuItem>
))} ))}
</select> </Select>
)} </FormControl>
</div> </Grid>
</div> <Grid item xs={12}>
<div class="flex flex-row w-160 gap-3"> <FormControl fullWidth>
<div class="text-right w-1/3"> <InputLabel>Available Strikes</InputLabel>
<label>Available Strikes</label> <Select
</div> value={chosenStrike.value || ""}
<div class="my-auto w-2/3">
{availableStrikes.value.length === 0 ? (
"Loading..."
) : (
<select
onChange={handleStrikeChange} onChange={handleStrikeChange}
class="border border-gray-300 focus:border-blue-400" label="Available Strikes"
> >
{availableStrikes.value.map((availableStrike) => ( {availableStrikes.value.map((strike) => (
<option value={availableStrike}>{availableStrike}</option> <MenuItem key={strike} value={strike}>
{strike}
</MenuItem>
))} ))}
</select> </Select>
)} </FormControl>
</div> </Grid>
</div> </Grid>
</div> </Paper>
<div className="chart-container"> </Grid>
{chosenUnderlying.value !== null && <Grid item xs={12} md={6}>
underlyingUplotData.value.length > 0 ? ( <Paper elevation={3} sx={{ p: 3, height: '100%' }}>
<div className="chart"> {chosenUnderlying.value !== null && underlyingUplotData.value.length > 0 ? (
<Scatter <Scatter
data={{ data={{
datasets: [ datasets: [
@@ -229,8 +226,6 @@ export function CalendarOptimizer() {
.substring(0, 10); .substring(0, 10);
}, },
}, },
// min: (new Date(chosenLookbackPeriodStart.value)).getTime()/1000,
// max: (new Date(chosenLookbackPeriodEnd.value)).getTime()/1000,
}, },
y: { y: {
beginAtZero: false, beginAtZero: false,
@@ -239,8 +234,6 @@ export function CalendarOptimizer() {
return "$" + value.toString(); return "$" + value.toString();
}, },
}, },
// min: 0,
// max: maxChartPrice.value,
}, },
}, },
elements: { elements: {
@@ -265,16 +258,18 @@ export function CalendarOptimizer() {
maintainAspectRatio: false, maintainAspectRatio: false,
}} }}
/> />
</div>
) : ( ) : (
<></> <Typography>Loading Chart...</Typography>
)} )}
</Paper>
</Grid>
<Grid item xs={12}>
<Paper elevation={3} sx={{ p: 3 }}>
{chosenUnderlying.value !== null && {chosenUnderlying.value !== null &&
chosenAsOfDate.value !== null && chosenAsOfDate.value !== null &&
chosenExpiration.value !== null && chosenExpiration.value !== null &&
chosenStrike.value !== null && chosenStrike.value !== null &&
optionContractUplotData.value.length > 0 ? ( optionContractUplotData.value.length > 0 ? (
<div className="chart">
<Scatter <Scatter
data={{ data={{
datasets: [ datasets: [
@@ -298,8 +293,6 @@ export function CalendarOptimizer() {
.substring(0, 10); .substring(0, 10);
}, },
}, },
// min: (new Date(chosenLookbackPeriodStart.value)).getTime()/1000,
// max: (new Date(chosenLookbackPeriodEnd.value)).getTime()/1000,
}, },
y: { y: {
beginAtZero: false, beginAtZero: false,
@@ -308,8 +301,6 @@ export function CalendarOptimizer() {
return "$" + value.toString(); return "$" + value.toString();
}, },
}, },
// min: 0,
// max: maxChartPrice.value,
}, },
}, },
elements: { elements: {
@@ -334,12 +325,12 @@ export function CalendarOptimizer() {
maintainAspectRatio: false, maintainAspectRatio: false,
}} }}
/> />
</div>
) : ( ) : (
<></> <Typography>Loading Chart...</Typography>
)} )}
</div> </Paper>
</div> </Grid>
</div> </Grid>
</Container>
); );
} }
frontend/src/pages/HistoricalCalendarPrices.tsx
+110 -114
View File
@@ -10,7 +10,17 @@ import {
Title, Title,
} from "chart.js"; } from "chart.js";
import { Scatter } from "react-chartjs-2"; 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); ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
@@ -188,122 +198,109 @@ export function HistoricalCalendarPrices() {
useEffect(handleInit, []); useEffect(handleInit, []);
return ( return (
/* container for centering: */ <Container maxWidth="lg">
<div class="flex flex-row justify-center"> <Grid container spacing={4}>
<div class="flex flex-col justify-start gap-4"> <Grid item xs={12}>
{/* inputs form container: */} <Typography variant="h4" gutterBottom>
<div class="flex flex-col justify-start gap-1 divide-y"> Historical Calendar Prices
<div class="flex flex-row w-160 gap-3"> </Typography>
<div class="text-right w-1/3"> </Grid>
<label>Available Underlyings</label> <Grid item xs={12} md={6}>
</div> <Paper elevation={3} sx={{ p: 3 }}>
<div class="my-auto w-2/3"> <Grid container spacing={2}>
{availableUnderlyings.value.length === 0 ? ( <Grid item xs={12}>
"Loading..." <FormControl fullWidth>
) : ( <InputLabel>Available Underlyings</InputLabel>
<select <Select
value={chosenUnderlying.value || ""}
onChange={handleUnderlyingChange} onChange={handleUnderlyingChange}
class="border border-gray-300 focus:border-blue-400" label="Available Underlyings"
> >
{availableUnderlyings.value.map((availableUnderlying) => ( {availableUnderlyings.value.map((underlying) => (
<option value={availableUnderlying}> <MenuItem key={underlying} value={underlying}>
{availableUnderlying} {underlying}
</option> </MenuItem>
))} ))}
</select> </Select>
)} </FormControl>
</div> </Grid>
</div> <Grid item xs={12}>
<div class="flex flex-row w-160 gap-3"> <TextField
<div class="text-right w-1/3"> fullWidth
<label>Now-to-Front-Month "Days to Expiration"</label> label="Now-to-Front-Month Days to Expiration"
</div> type="number"
<div class="my-auto w-2/3">
<input
type="text"
onBlur={handleDaysToFrontExpirationChange}
value={chosenDaysToFrontExpiration.value} value={chosenDaysToFrontExpiration.value}
class="border border-gray-300 focus:border-blue-400" onChange={handleDaysToFrontExpirationChange}
InputProps={{ endAdornment: "Days" }}
/> />
Days </Grid>
</div> <Grid item xs={12}>
</div> <TextField
<div class="flex flex-row w-160 gap-3"> fullWidth
<div class="text-right w-1/3"> label="Front-to-Back-Month Days to Expiration Difference"
<label>Front-to-Back-Month "Days to Expiration" Difference</label> type="number"
</div>
<div class="my-auto w-2/3">
<input
type="text"
onBlur={handleDaysBetweenFrontAndBackExpirationChange}
value={chosenDaysBetweenFrontAndBackExpiration.value} value={chosenDaysBetweenFrontAndBackExpiration.value}
class="border border-gray-300 focus:border-blue-400" onChange={handleDaysBetweenFrontAndBackExpirationChange}
InputProps={{ endAdornment: "Days Difference" }}
/> />
Days Difference </Grid>
</div> <Grid item xs={6}>
</div> <TextField
<div class="flex flex-row w-160 gap-3"> fullWidth
<div class="text-right w-1/3"> label="Strike % From Underlying Price"
<label>"Strike Percentage From Underlying Price" Range</label> type="number"
</div>
<div class="my-auto w-2/3">
<input
type="text"
onBlur={handleStrikePercentageFromUnderlyingPriceChange}
value={chosenStrikePercentageFromUnderlyingPrice.value} value={chosenStrikePercentageFromUnderlyingPrice.value}
class="border border-gray-300 focus:border-blue-400" onChange={handleStrikePercentageFromUnderlyingPriceChange}
InputProps={{ endAdornment: "%" }}
/> />
% +/- </Grid>
<input <Grid item xs={6}>
type="text" <TextField
onBlur={handleStrikePercentageFromUnderlyingPriceRadiusChange} fullWidth
label="Strike % Radius"
type="number"
value={chosenStrikePercentageFromUnderlyingPriceRadius.value} value={chosenStrikePercentageFromUnderlyingPriceRadius.value}
class="border border-gray-300 focus:border-blue-400" onChange={handleStrikePercentageFromUnderlyingPriceRadiusChange}
InputProps={{ endAdornment: "%" }}
/> />
% from ATM </Grid>
</div> <Grid item xs={12}>
</div> <TextField
<div class="flex flex-row w-160 gap-3"> fullWidth
<div class="text-right w-1/3"> label="Exit-to-Front-Month Days to Expiration"
<label>Exit-to-Front-Month "Days to Expiration"</label> type="number"
</div>
<div class="my-auto w-2/3">
<input
type="text"
onBlur={handleExitToFrontExpirationChange}
value={chosenExitToFrontExpiration.value} value={chosenExitToFrontExpiration.value}
class="border border-gray-300 focus:border-blue-400" onChange={handleExitToFrontExpirationChange}
InputProps={{ endAdornment: "Days" }}
/> />
Days </Grid>
</div> <Grid item xs={6}>
</div> <TextField
<div class="flex flex-row w-160 gap-3"> fullWidth
<div class="text-right w-1/3"> label="Lookback Period Start"
<label>Lookback Period</label> type="date"
</div>
<div class="my-auto w-2/3">
<input
type="text"
onBlur={handleLookbackPeriodStartChange}
value={chosenLookbackPeriodStart.value} value={chosenLookbackPeriodStart.value}
class="border border-gray-300 focus:border-blue-400" onChange={(e) => handleLookbackPeriodStartChange({ target: { value: e.target.value } })}
InputLabelProps={{ shrink: true }}
/> />
- </Grid>
<input <Grid item xs={6}>
type="text" <TextField
onBlur={handleLookbackPeriodEndChange} fullWidth
label="Lookback Period End"
type="date"
value={chosenLookbackPeriodEnd.value} value={chosenLookbackPeriodEnd.value}
class="border border-gray-300 focus:border-blue-400" onChange={(e) => handleLookbackPeriodEndChange({ target: { value: e.target.value } })}
InputLabelProps={{ shrink: true }}
/> />
</div> </Grid>
</div> </Grid>
</div> </Paper>
{/* charts container: */} </Grid>
<div className="flex flex-col justify-start gap-3"> <Grid item xs={12} md={6}>
<div className="min-h-96"> <Paper elevation={3} sx={{ p: 3, height: '100%' }}>
{chosenUnderlying.value !== null && {chosenUnderlying.value !== null &&
historicalStockQuoteChartData.value.length > 0 ? ( historicalStockQuoteChartData.value.length > 0 ? (
<div className="h-full">
<Scatter <Scatter
data={{ data={{
datasets: [ datasets: [
@@ -366,15 +363,15 @@ export function HistoricalCalendarPrices() {
events: [], events: [],
}} }}
/> />
</div>
) : ( ) : (
<div className="h-full">Loading Chart...</div> <Typography>Loading Chart...</Typography>
)} )}
</div> </Paper>
<div className="min-h-96"> </Grid>
<Grid item xs={12}>
<Paper elevation={3} sx={{ p: 3 }}>
{chosenUnderlying.value !== null && {chosenUnderlying.value !== null &&
historicalCalendarQuoteChartData.value.length > 0 ? ( historicalCalendarQuoteChartData.value.length > 0 ? (
<div className="h-full">
<Scatter <Scatter
data={{ data={{
datasets: [ datasets: [
@@ -433,15 +430,15 @@ export function HistoricalCalendarPrices() {
events: [], events: [],
}} }}
/> />
</div>
) : ( ) : (
<div className="h-full">Loading Chart...</div> <Typography>Loading Chart...</Typography>
)} )}
</div> </Paper>
<div className="min-h-96"> </Grid>
<Grid item xs={12}>
<Paper elevation={3} sx={{ p: 3 }}>
{chosenUnderlying.value !== null && {chosenUnderlying.value !== null &&
historicalCalendarQuoteChartData.value.length > 0 ? ( historicalCalendarQuoteChartData.value.length > 0 ? (
<div className="h-full">
<Scatter <Scatter
data={{ data={{
datasets: [ datasets: [
@@ -509,13 +506,12 @@ export function HistoricalCalendarPrices() {
events: [], events: [],
}} }}
/> />
</div>
) : ( ) : (
<div className="h-full">Loading Chart...</div> <Typography>Loading Chart...</Typography>
)} )}
</div> </Paper>
</div> </Grid>
</div> </Grid>
</div> </Container>
); );
} }
frontend/tailwind.config.js
-13
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: [],
};