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

fully adopt `@mui/material`; refactor

Browse Source
main
avraham 7 months ago
parent ea9bd307f3
commit 8986dc4ea9
13 changed files with 678 additions and 386 deletions
Show Stats Download Patch File Download Diff File

10
frontend/package.json
Unescape Escape View File

@ -7,12 +7,10 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@date-io/date-fns": "^3.0.0", "@mui/icons-material": "^6.1.1",
"@emotion/react": "^11.13.0", "@mui/material": "^6.1.1",
"@emotion/styled": "^11.13.0", "@mui/system": "^6.1.1",
"@mui/material": "^5.16.6", "@mui/x-date-pickers": "^7.18.0",
"@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",

293
frontend/pnpm-lock.yaml
Unescape Escape View File

@ -8,24 +8,18 @@ importers:
.: .:
dependencies: dependencies:
'@date-io/date-fns': '@mui/icons-material':
specifier: ^3.0.0 specifier: ^6.1.1
version: 3.0.0(date-fns@3.6.0) version: 6.1.1(@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
'@emotion/react':
specifier: ^11.13.0
version: 11.13.0(@types/react@18.3.3)(react@18.3.1)
'@emotion/styled':
specifier: ^11.13.0
version: 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
'@mui/material': '@mui/material':
specifier: ^5.16.6 specifier: ^6.1.1
version: 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/system': '@mui/system':
specifier: ^5.16.6 specifier: ^6.1.1
version: 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) version: 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
'@mui/x-date-pickers': '@mui/x-date-pickers':
specifier: ^7.12.0 specifier: ^7.18.0
version: 7.12.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 7.18.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@preact/signals': '@preact/signals':
specifier: ^1.2.2 specifier: ^1.2.2
version: 1.2.2(preact@10.19.3) version: 1.2.2(preact@10.19.3)
@ -178,6 +172,10 @@ packages:
resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==} resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
'@babel/runtime@7.25.6':
resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==}
engines: {node: '>=6.9.0'}
'@babel/template@7.22.15': '@babel/template@7.22.15':
resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
@ -190,17 +188,6 @@ packages:
resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==} resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
'@date-io/core@3.0.0':
resolution: {integrity: sha512-S3j+IAQVBYNkQzchVVhX40eBkGDreBpScy9RXwTS5j2+k07+62pMVPisQ44Gq76Rqy5AOG/EZXCwBpY/jbemvA==}
'@date-io/date-fns@3.0.0':
resolution: {integrity: sha512-hsLAbsdP8LKfi7OQ729cXMWfmHQEq0hn3ysXfAAoc92j6j6sBq0s0tplnkWu6O4iBUpVCYRPGuNjQQhTaOu2AA==}
peerDependencies:
date-fns: ^3.2.0
peerDependenciesMeta:
date-fns:
optional: true
'@emotion/babel-plugin@11.12.0': '@emotion/babel-plugin@11.12.0':
resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==} resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==}
@ -408,57 +395,71 @@ packages:
'@kurkle/color@0.3.2': '@kurkle/color@0.3.2':
resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==} resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
'@mui/core-downloads-tracker@5.16.6': '@mui/core-downloads-tracker@6.1.1':
resolution: {integrity: sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==} resolution: {integrity: sha512-VdQC1tPIIcZAnf62L2M1eQif0x2vlKg3YK4kGYbtijSH4niEgI21GnstykW1vQIs+Bc6L+Hua2GATYVjilJ22A==}
'@mui/material@5.16.6': '@mui/icons-material@6.1.1':
resolution: {integrity: sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==} resolution: {integrity: sha512-sy/YKwcLPW8VcacNP2uWMYR9xyWuwO9NN9FXuGEU90bRshBXj8pdKk+joe3TCW7oviVS3zXLHlc94wQ0jNsQRQ==}
engines: {node: '>=12.0.0'} engines: {node: '>=14.0.0'}
peerDependencies:
'@mui/material': ^6.1.1
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@types/react':
optional: true
'@mui/material@6.1.1':
resolution: {integrity: sha512-b+eULldTqtqTCbN++2BtBWCir/1LwEYw+2mIlOt2GiEUh1EBBw4/wIukGKKNt3xrCZqRA80yLLkV6tF61Lq3cA==}
engines: {node: '>=14.0.0'}
peerDependencies: peerDependencies:
'@emotion/react': ^11.5.0 '@emotion/react': ^11.5.0
'@emotion/styled': ^11.3.0 '@emotion/styled': ^11.3.0
'@types/react': ^17.0.0 || ^18.0.0 '@mui/material-pigment-css': ^6.1.1
react: ^17.0.0 || ^18.0.0 '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta: peerDependenciesMeta:
'@emotion/react': '@emotion/react':
optional: true optional: true
'@emotion/styled': '@emotion/styled':
optional: true optional: true
'@mui/material-pigment-css':
optional: true
'@types/react': '@types/react':
optional: true optional: true
'@mui/private-theming@5.16.6': '@mui/private-theming@6.1.1':
resolution: {integrity: sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==} resolution: {integrity: sha512-JlrjIdhyZUtewtdAuUsvi3ZnO0YS49IW4Mfz19ZWTlQ0sDGga6LNPVwHClWr2/zJK2we2BQx9/i8M32rgKuzrg==}
engines: {node: '>=12.0.0'} engines: {node: '>=14.0.0'}
peerDependencies: peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0 '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta: peerDependenciesMeta:
'@types/react': '@types/react':
optional: true optional: true
'@mui/styled-engine@5.16.6': '@mui/styled-engine@6.1.1':
resolution: {integrity: sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==} resolution: {integrity: sha512-HJyIoMpFb11fnHuRtUILOXgq6vj4LhIlE8maG4SwP/W+E5sa7HFexhnB3vOMT7bKys4UKNxhobC8jwWxYilGsA==}
engines: {node: '>=12.0.0'} engines: {node: '>=14.0.0'}
peerDependencies: peerDependencies:
'@emotion/react': ^11.4.1 '@emotion/react': ^11.4.1
'@emotion/styled': ^11.3.0 '@emotion/styled': ^11.3.0
react: ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta: peerDependenciesMeta:
'@emotion/react': '@emotion/react':
optional: true optional: true
'@emotion/styled': '@emotion/styled':
optional: true optional: true
'@mui/system@5.16.6': '@mui/system@6.1.1':
resolution: {integrity: sha512-5xgyJjBIMPw8HIaZpfbGAaFYPwImQn7Nyh+wwKWhvkoIeDosQ1ZMVrbTclefi7G8hNmqhip04duYwYpbBFnBgw==} resolution: {integrity: sha512-PaYsCz2tUOcpu3T0okDEsSuP/yCDIj9JZ4Tox1JovRSKIjltHpXPsXZSGr3RiWdtM1MTQMFMCZzu0+CKbyy+Kw==}
engines: {node: '>=12.0.0'} engines: {node: '>=14.0.0'}
peerDependencies: peerDependencies:
'@emotion/react': ^11.5.0 '@emotion/react': ^11.5.0
'@emotion/styled': ^11.3.0 '@emotion/styled': ^11.3.0
'@types/react': ^17.0.0 || ^18.0.0 '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta: peerDependenciesMeta:
'@emotion/react': '@emotion/react':
optional: true optional: true
@ -467,10 +468,10 @@ packages:
'@types/react': '@types/react':
optional: true optional: true
'@mui/types@7.2.15': '@mui/types@7.2.17':
resolution: {integrity: sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==} resolution: {integrity: sha512-oyumoJgB6jDV8JFzRqjBo2daUuHpzDjoO/e3IrRhhHo/FxJlaVhET6mcNrKHUq2E+R+q3ql0qAtvQ4rfWHhAeQ==}
peerDependencies: peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0 '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta: peerDependenciesMeta:
'@types/react': '@types/react':
optional: true optional: true
@ -485,14 +486,25 @@ packages:
'@types/react': '@types/react':
optional: true optional: true
'@mui/x-date-pickers@7.12.0': '@mui/utils@6.1.1':
resolution: {integrity: sha512-WU5C7QNfSpJ9cP8vl2sY7q35NW+0TUMgEy+sl98fcPhLckq3cgV1wnVxoZnQZ3BxVQAtx+7ag/MpefU03vJcVw==} resolution: {integrity: sha512-HlRrgdJSPbYDXPpoVMWZV8AE7WcFtAk13rWNWAEVWKSanzBBkymjz3km+Th/Srowsh4pf1fTSP1B0L116wQBYw==}
engines: {node: '>=14.0.0'}
peerDependencies:
'@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
react: ^17.0.0 || ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@types/react':
optional: true
'@mui/x-date-pickers@7.18.0':
resolution: {integrity: sha512-12tXIoMj9vpS8fS/bS3kWPCoVrH38vNGCxgplI0vOnUrN9rJuYJz3agLPJe1S0xciTw+9W8ZSe3soaW+owoz1Q==}
engines: {node: '>=14.0.0'} engines: {node: '>=14.0.0'}
peerDependencies: peerDependencies:
'@emotion/react': ^11.9.0 '@emotion/react': ^11.9.0
'@emotion/styled': ^11.8.1 '@emotion/styled': ^11.8.1
'@mui/material': ^5.15.14 '@mui/material': ^5.15.14 || ^6.0.0
date-fns: ^2.25.0 || ^3.2.0 '@mui/system': ^5.15.14 || ^6.0.0
date-fns: ^2.25.0 || ^3.2.0 || ^4.0.0
date-fns-jalali: ^2.13.0-0 || ^3.2.0-0 date-fns-jalali: ^2.13.0-0 || ^3.2.0-0
dayjs: ^1.10.7 dayjs: ^1.10.7
luxon: ^3.0.2 luxon: ^3.0.2
@ -521,6 +533,12 @@ packages:
moment-jalaali: moment-jalaali:
optional: true optional: true
'@mui/x-internals@7.18.0':
resolution: {integrity: sha512-lzCHOWIR0cAIY1bGrWSprYerahbnH5C31ql/2OWCEjcngL2NAV1M6oKI2Vp4HheqzJ822c60UyWyapvyjSzY/A==}
engines: {node: '>=14.0.0'}
peerDependencies:
react: ^17.0.0 || ^18.0.0
'@popperjs/core@2.11.8': '@popperjs/core@2.11.8':
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
@ -573,8 +591,8 @@ packages:
'@types/prop-types@15.7.12': '@types/prop-types@15.7.12':
resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
'@types/react-transition-group@4.4.10': '@types/react-transition-group@4.4.11':
resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==} resolution: {integrity: sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==}
'@types/react@18.3.3': '@types/react@18.3.3':
resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
@ -1107,6 +1125,10 @@ snapshots:
dependencies: dependencies:
regenerator-runtime: 0.14.1 regenerator-runtime: 0.14.1
'@babel/runtime@7.25.6':
dependencies:
regenerator-runtime: 0.14.1
'@babel/template@7.22.15': '@babel/template@7.22.15':
dependencies: dependencies:
'@babel/code-frame': 7.23.5 '@babel/code-frame': 7.23.5
@ -1134,18 +1156,10 @@ snapshots:
'@babel/helper-validator-identifier': 7.22.20 '@babel/helper-validator-identifier': 7.22.20
to-fast-properties: 2.0.0 to-fast-properties: 2.0.0
'@date-io/core@3.0.0': {}
'@date-io/date-fns@3.0.0(date-fns@3.6.0)':
dependencies:
'@date-io/core': 3.0.0
optionalDependencies:
date-fns: 3.6.0
'@emotion/babel-plugin@11.12.0': '@emotion/babel-plugin@11.12.0':
dependencies: dependencies:
'@babel/helper-module-imports': 7.22.15 '@babel/helper-module-imports': 7.22.15
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@emotion/hash': 0.9.2 '@emotion/hash': 0.9.2
'@emotion/memoize': 0.9.0 '@emotion/memoize': 0.9.0
'@emotion/serialize': 1.3.0 '@emotion/serialize': 1.3.0
@ -1155,6 +1169,7 @@ snapshots:
find-root: 1.1.0 find-root: 1.1.0
source-map: 0.5.7 source-map: 0.5.7
stylis: 4.2.0 stylis: 4.2.0
optional: true
'@emotion/cache@11.13.1': '@emotion/cache@11.13.1':
dependencies: dependencies:
@ -1164,17 +1179,19 @@ snapshots:
'@emotion/weak-memoize': 0.4.0 '@emotion/weak-memoize': 0.4.0
stylis: 4.2.0 stylis: 4.2.0
'@emotion/hash@0.9.2': {} '@emotion/hash@0.9.2':
optional: true
'@emotion/is-prop-valid@1.3.0': '@emotion/is-prop-valid@1.3.0':
dependencies: dependencies:
'@emotion/memoize': 0.9.0 '@emotion/memoize': 0.9.0
optional: true
'@emotion/memoize@0.9.0': {} '@emotion/memoize@0.9.0': {}
'@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1)': '@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1)':
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@emotion/babel-plugin': 11.12.0 '@emotion/babel-plugin': 11.12.0
'@emotion/cache': 11.13.1 '@emotion/cache': 11.13.1
'@emotion/serialize': 1.3.0 '@emotion/serialize': 1.3.0
@ -1185,6 +1202,7 @@ snapshots:
react: 18.3.1 react: 18.3.1
optionalDependencies: optionalDependencies:
'@types/react': 18.3.3 '@types/react': 18.3.3
optional: true
'@emotion/serialize@1.3.0': '@emotion/serialize@1.3.0':
dependencies: dependencies:
@ -1193,12 +1211,13 @@ snapshots:
'@emotion/unitless': 0.9.0 '@emotion/unitless': 0.9.0
'@emotion/utils': 1.4.0 '@emotion/utils': 1.4.0
csstype: 3.1.3 csstype: 3.1.3
optional: true
'@emotion/sheet@1.4.0': {} '@emotion/sheet@1.4.0': {}
'@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': '@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@emotion/babel-plugin': 11.12.0 '@emotion/babel-plugin': 11.12.0
'@emotion/is-prop-valid': 1.3.0 '@emotion/is-prop-valid': 1.3.0
'@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1) '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
@ -1208,12 +1227,15 @@ snapshots:
react: 18.3.1 react: 18.3.1
optionalDependencies: optionalDependencies:
'@types/react': 18.3.3 '@types/react': 18.3.3
optional: true
'@emotion/unitless@0.9.0': {} '@emotion/unitless@0.9.0':
optional: true
'@emotion/use-insertion-effect-with-fallbacks@1.1.0(react@18.3.1)': '@emotion/use-insertion-effect-with-fallbacks@1.1.0(react@18.3.1)':
dependencies: dependencies:
react: 18.3.1 react: 18.3.1
optional: true
'@emotion/utils@1.4.0': {} '@emotion/utils@1.4.0': {}
@ -1304,17 +1326,25 @@ snapshots:
'@kurkle/color@0.3.2': {} '@kurkle/color@0.3.2': {}
'@mui/core-downloads-tracker@5.16.6': {} '@mui/core-downloads-tracker@6.1.1': {}
'@mui/material@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': '@mui/icons-material@6.1.1(@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@mui/core-downloads-tracker': 5.16.6 '@mui/material': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/system': 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) react: 18.3.1
'@mui/types': 7.2.15(@types/react@18.3.3) optionalDependencies:
'@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1) '@types/react': 18.3.3
'@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.6
'@mui/core-downloads-tracker': 6.1.1
'@mui/system': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
'@mui/types': 7.2.17(@types/react@18.3.3)
'@mui/utils': 6.1.1(@types/react@18.3.3)(react@18.3.1)
'@popperjs/core': 2.11.8 '@popperjs/core': 2.11.8
'@types/react-transition-group': 4.4.10 '@types/react-transition-group': 4.4.11
clsx: 2.1.1 clsx: 2.1.1
csstype: 3.1.3 csstype: 3.1.3
prop-types: 15.8.1 prop-types: 15.8.1
@ -1327,19 +1357,20 @@ snapshots:
'@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
'@types/react': 18.3.3 '@types/react': 18.3.3
'@mui/private-theming@5.16.6(@types/react@18.3.3)(react@18.3.1)': '@mui/private-theming@6.1.1(@types/react@18.3.3)(react@18.3.1)':
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 6.1.1(@types/react@18.3.3)(react@18.3.1)
prop-types: 15.8.1 prop-types: 15.8.1
react: 18.3.1 react: 18.3.1
optionalDependencies: optionalDependencies:
'@types/react': 18.3.3 '@types/react': 18.3.3
'@mui/styled-engine@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)': '@mui/styled-engine@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)':
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@emotion/cache': 11.13.1 '@emotion/cache': 11.13.1
'@emotion/sheet': 1.4.0
csstype: 3.1.3 csstype: 3.1.3
prop-types: 15.8.1 prop-types: 15.8.1
react: 18.3.1 react: 18.3.1
@ -1347,13 +1378,13 @@ snapshots:
'@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1) '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
'@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
'@mui/system@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)': '@mui/system@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)':
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@mui/private-theming': 5.16.6(@types/react@18.3.3)(react@18.3.1) '@mui/private-theming': 6.1.1(@types/react@18.3.3)(react@18.3.1)
'@mui/styled-engine': 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1) '@mui/styled-engine': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(react@18.3.1)
'@mui/types': 7.2.15(@types/react@18.3.3) '@mui/types': 7.2.17(@types/react@18.3.3)
'@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 6.1.1(@types/react@18.3.3)(react@18.3.1)
clsx: 2.1.1 clsx: 2.1.1
csstype: 3.1.3 csstype: 3.1.3
prop-types: 15.8.1 prop-types: 15.8.1
@ -1363,14 +1394,14 @@ snapshots:
'@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
'@types/react': 18.3.3 '@types/react': 18.3.3
'@mui/types@7.2.15(@types/react@18.3.3)': '@mui/types@7.2.17(@types/react@18.3.3)':
optionalDependencies: optionalDependencies:
'@types/react': 18.3.3 '@types/react': 18.3.3
'@mui/utils@5.16.6(@types/react@18.3.3)(react@18.3.1)': '@mui/utils@5.16.6(@types/react@18.3.3)(react@18.3.1)':
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@mui/types': 7.2.15(@types/react@18.3.3) '@mui/types': 7.2.17(@types/react@18.3.3)
'@types/prop-types': 15.7.12 '@types/prop-types': 15.7.12
clsx: 2.1.1 clsx: 2.1.1
prop-types: 15.8.1 prop-types: 15.8.1
@ -1379,13 +1410,26 @@ snapshots:
optionalDependencies: optionalDependencies:
'@types/react': 18.3.3 '@types/react': 18.3.3
'@mui/x-date-pickers@7.12.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/react@18.3.3)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': '@mui/utils@6.1.1(@types/react@18.3.3)(react@18.3.1)':
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
'@mui/material': 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/types': 7.2.17(@types/react@18.3.3)
'@mui/system': 5.16.6(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@types/prop-types': 15.7.12
clsx: 2.1.1
prop-types: 15.8.1
react: 18.3.1
react-is: 18.3.1
optionalDependencies:
'@types/react': 18.3.3
'@mui/x-date-pickers@7.18.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@mui/material@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mui/system@6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(date-fns@3.6.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.6
'@mui/material': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@mui/system': 6.1.1(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@emotion/styled@11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1)
'@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1) '@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1)
'@types/react-transition-group': 4.4.10 '@mui/x-internals': 7.18.0(@types/react@18.3.3)(react@18.3.1)
'@types/react-transition-group': 4.4.11
clsx: 2.1.1 clsx: 2.1.1
prop-types: 15.8.1 prop-types: 15.8.1
react: 18.3.1 react: 18.3.1
@ -1398,6 +1442,14 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- '@types/react' - '@types/react'
'@mui/x-internals@7.18.0(@types/react@18.3.3)(react@18.3.1)':
dependencies:
'@babel/runtime': 7.25.6
'@mui/utils': 5.16.6(@types/react@18.3.3)(react@18.3.1)
react: 18.3.1
transitivePeerDependencies:
- '@types/react'
'@popperjs/core@2.11.8': {} '@popperjs/core@2.11.8': {}
'@preact/preset-vite@2.8.1(@babel/core@7.23.7)(preact@10.19.3)(vite@4.5.1)': '@preact/preset-vite@2.8.1(@babel/core@7.23.7)(preact@10.19.3)(vite@4.5.1)':
@ -1456,11 +1508,12 @@ snapshots:
'@trpc/server@10.45.0': {} '@trpc/server@10.45.0': {}
'@types/parse-json@4.0.2': {} '@types/parse-json@4.0.2':
optional: true
'@types/prop-types@15.7.12': {} '@types/prop-types@15.7.12': {}
'@types/react-transition-group@4.4.10': '@types/react-transition-group@4.4.11':
dependencies: dependencies:
'@types/react': 18.3.3 '@types/react': 18.3.3
@ -1475,9 +1528,10 @@ snapshots:
babel-plugin-macros@3.1.0: babel-plugin-macros@3.1.0:
dependencies: dependencies:
'@babel/runtime': 7.25.0 '@babel/runtime': 7.25.6
cosmiconfig: 7.1.0 cosmiconfig: 7.1.0
resolve: 1.22.8 resolve: 1.22.8
optional: true
babel-plugin-transform-hook-names@1.0.2(@babel/core@7.23.7): babel-plugin-transform-hook-names@1.0.2(@babel/core@7.23.7):
dependencies: dependencies:
@ -1492,7 +1546,8 @@ snapshots:
node-releases: 2.0.14 node-releases: 2.0.14
update-browserslist-db: 1.0.13(browserslist@4.22.2) update-browserslist-db: 1.0.13(browserslist@4.22.2)
callsites@3.1.0: {} callsites@3.1.0:
optional: true
caniuse-lite@1.0.30001575: {} caniuse-lite@1.0.30001575: {}
@ -1514,7 +1569,8 @@ snapshots:
color-name@1.1.3: {} color-name@1.1.3: {}
convert-source-map@1.9.0: {} convert-source-map@1.9.0:
optional: true
convert-source-map@2.0.0: {} convert-source-map@2.0.0: {}
@ -1525,6 +1581,7 @@ snapshots:
parse-json: 5.2.0 parse-json: 5.2.0
path-type: 4.0.0 path-type: 4.0.0
yaml: 1.10.2 yaml: 1.10.2
optional: true
css-select@5.1.0: css-select@5.1.0:
dependencies: dependencies:
@ -1576,6 +1633,7 @@ snapshots:
error-ex@1.3.2: error-ex@1.3.2:
dependencies: dependencies:
is-arrayish: 0.2.1 is-arrayish: 0.2.1
optional: true
esbuild@0.18.20: esbuild@0.18.20:
optionalDependencies: optionalDependencies:
@ -1606,11 +1664,13 @@ snapshots:
escape-string-regexp@1.0.5: {} escape-string-regexp@1.0.5: {}
escape-string-regexp@4.0.0: {} escape-string-regexp@4.0.0:
optional: true
estree-walker@2.0.2: {} estree-walker@2.0.2: {}
find-root@1.1.0: {} find-root@1.1.0:
optional: true
fsevents@2.3.3: fsevents@2.3.3:
optional: true optional: true
@ -1632,13 +1692,16 @@ snapshots:
hoist-non-react-statics@3.3.2: hoist-non-react-statics@3.3.2:
dependencies: dependencies:
react-is: 16.13.1 react-is: 16.13.1
optional: true
import-fresh@3.3.0: import-fresh@3.3.0:
dependencies: dependencies:
parent-module: 1.0.1 parent-module: 1.0.1
resolve-from: 4.0.0 resolve-from: 4.0.0
optional: true
is-arrayish@0.2.1: {} is-arrayish@0.2.1:
optional: true
is-core-module@2.13.1: is-core-module@2.13.1:
dependencies: dependencies:
@ -1648,13 +1711,15 @@ snapshots:
jsesc@2.5.2: {} jsesc@2.5.2: {}
json-parse-even-better-errors@2.3.1: {} json-parse-even-better-errors@2.3.1:
optional: true
json5@2.2.3: {} json5@2.2.3: {}
kolorist@1.8.0: {} kolorist@1.8.0: {}
lines-and-columns@1.2.4: {} lines-and-columns@1.2.4:
optional: true
loose-envify@1.4.0: loose-envify@1.4.0:
dependencies: dependencies:
@ -1688,6 +1753,7 @@ snapshots:
parent-module@1.0.1: parent-module@1.0.1:
dependencies: dependencies:
callsites: 3.1.0 callsites: 3.1.0
optional: true
parse-json@5.2.0: parse-json@5.2.0:
dependencies: dependencies:
@ -1695,10 +1761,12 @@ snapshots:
error-ex: 1.3.2 error-ex: 1.3.2
json-parse-even-better-errors: 2.3.1 json-parse-even-better-errors: 2.3.1
lines-and-columns: 1.2.4 lines-and-columns: 1.2.4
optional: true
path-parse@1.0.7: {} path-parse@1.0.7: {}
path-type@4.0.0: {} path-type@4.0.0:
optional: true
picocolors@1.0.0: {} picocolors@1.0.0: {}
@ -1761,7 +1829,8 @@ snapshots:
regenerator-runtime@0.14.1: {} regenerator-runtime@0.14.1: {}
resolve-from@4.0.0: {} resolve-from@4.0.0:
optional: true
resolve@1.22.8: resolve@1.22.8:
dependencies: dependencies:
@ -1781,7 +1850,8 @@ snapshots:
source-map-js@1.2.0: {} source-map-js@1.2.0: {}
source-map@0.5.7: {} source-map@0.5.7:
optional: true
stylis@4.2.0: {} stylis@4.2.0: {}
@ -1811,4 +1881,5 @@ snapshots:
yallist@3.1.1: {} yallist@3.1.1: {}
yaml@1.10.2: {} yaml@1.10.2:
optional: true

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

@ -1,5 +1,5 @@
import { signal, computed } from "@preact/signals"; import { signal, computed } from "@preact/signals";
import { useEffect } from "preact/hooks"; import { useEffect, useRef } from "preact/hooks";
import { trpc } from "../trpc.js"; import { trpc } from "../trpc.js";
import { import {
Chart as ChartJS, Chart as ChartJS,
@ -17,102 +17,42 @@ import {
TextField, TextField,
Select, Select,
MenuItem, MenuItem,
InputLabel,
FormControl,
Paper, Paper,
Button,
Popper,
ClickAwayListener,
Slider,
Box,
} from "@mui/material"; } from "@mui/material";
import {
availableUnderlyings,
calendarExitPriceChartData,
isPopperOpen,
lookbackPeriodEnd,
lookbackPeriodStart,
maxChartPrice,
maxN,
popperAnchorEl,
popperContent,
similarCalendarPriceChartData,
stockPriceChartData,
underlying,
} from "./HistoricalCalendarPrices/state.js";
import { EditableStrike } from "./HistoricalCalendarPrices/EditableStrike.js";
import {
refreshcalendarExitPriceChartData,
refreshSimilarCalendarPriceChartData,
refreshStockPriceChartData,
} from "./HistoricalCalendarPrices/actions.js";
import { EditableUnderlying } from "./HistoricalCalendarPrices/EditableUnderlying.js";
import { EditableDaysToFrontExpiration } from "./HistoricalCalendarPrices/EditableDaysToFrontExpiration.js";
import { EditableExitToFrontExpiration } from "./HistoricalCalendarPrices/EditableExitToFrontExpiration.js";
import { EditableDaysBetweenFrontAndBackExpiration } from "./HistoricalCalendarPrices/EditableDaysBetweenFrontAndBackExpiration.js";
import { EditableLookbackPeriodStart } from "./HistoricalCalendarPrices/EditableLookbackPeriodStart.js";
import { EditableLookbackPeriodEnd } from "./HistoricalCalendarPrices/EditableLookbackPeriodEnd.js";
ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title); ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
const availableUnderlyings = signal([]);
const underlying = signal(null);
const daysToFrontExpiration = signal(14);
const daysBetweenFrontAndBackExpiration = signal(14);
const strikePercentageFromUnderlyingPrice = signal(1.4);
const strikePercentageFromUnderlyingPriceRadius = signal(0.05);
const exitToFrontExpiration = signal(2);
const stockPriceChartData = signal([]);
const similarCalendarPriceChartData = signal([]);
const calendarExitPriceChartData = signal([]);
const lookbackPeriodStart = signal("2022-01-01");
const lookbackPeriodEnd = signal("2024-01-01");
const maxChartPrice = computed(() =>
Math.max(
Math.max.apply(
null,
similarCalendarPriceChartData.value.map((d) => d.y)
),
Math.max.apply(
null,
calendarExitPriceChartData.value.map((d) => d.y)
)
)
);
const maxN = computed(() =>
Math.max.apply(
null,
calendarExitPriceChartData.value.map((d) => d.n)
)
);
const refreshStockPriceChartData = () => {
stockPriceChartData.value = [];
trpc.StockPriceChart.getChartData
.query({
underlying: underlying.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getChartDataResponse) => {
stockPriceChartData.value = getChartDataResponse;
});
};
const refreshSimilarCalendarPriceChartData = () => {
similarCalendarPriceChartData.value = [];
trpc.SimilarCalendarPriceChart.getChartData
.query({
underlying: underlying.value,
daysToFrontExpiration: daysToFrontExpiration.value,
daysBetweenFrontAndBackExpiration:
daysBetweenFrontAndBackExpiration.value,
strikePercentageFromUnderlyingPriceRangeMin:
strikePercentageFromUnderlyingPrice.value -
strikePercentageFromUnderlyingPriceRadius.value,
strikePercentageFromUnderlyingPriceRangeMax:
strikePercentageFromUnderlyingPrice.value +
strikePercentageFromUnderlyingPriceRadius.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getChartDataResponse) => {
similarCalendarPriceChartData.value = getChartDataResponse;
});
};
const refreshcalendarExitPriceChartData = () => {
calendarExitPriceChartData.value = [];
trpc.CalendarExitPriceChart.getChartData
.query({
underlying: underlying.value,
daysToFrontExpiration: exitToFrontExpiration.value,
daysBetweenFrontAndBackExpiration:
daysBetweenFrontAndBackExpiration.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getChartDataResponse) => {
calendarExitPriceChartData.value = getChartDataResponse;
});
};
const handleInit = () => { const handleInit = () => {
trpc.CalendarCharacteristicsForm.getAvailableUnderlyings trpc.CalendarCharacteristicsForm.getAvailableUnderlyings
.query() .query()
@ -124,74 +64,6 @@ const handleInit = () => {
refreshcalendarExitPriceChartData(); refreshcalendarExitPriceChartData();
}); });
}; };
const handleUnderlyingChange = (e) => {
if (underlying.value !== e.target.value) {
underlying.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
const handleDaysToFrontExpirationChange = (e) => {
if (daysToFrontExpiration.value !== Number.parseInt(e.target.value)) {
daysToFrontExpiration.value = Number.parseInt(e.target.value);
refreshSimilarCalendarPriceChartData();
}
};
const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
if (
daysBetweenFrontAndBackExpiration.value !== Number.parseInt(e.target.value)
) {
daysBetweenFrontAndBackExpiration.value = Number.parseInt(e.target.value);
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
const handleStrikePercentageFromUnderlyingPriceChange = (e) => {
if (
strikePercentageFromUnderlyingPrice.value !==
Number.parseFloat(e.target.value)
) {
strikePercentageFromUnderlyingPrice.value = Number.parseFloat(
e.target.value
);
refreshSimilarCalendarPriceChartData();
}
};
const handleStrikePercentageFromUnderlyingPriceRadiusChange = (e) => {
if (
strikePercentageFromUnderlyingPriceRadius.value !==
Number.parseFloat(e.target.value)
) {
strikePercentageFromUnderlyingPriceRadius.value = Number.parseFloat(
e.target.value
);
refreshSimilarCalendarPriceChartData();
}
};
const handleExitToFrontExpirationChange = (e) => {
if (exitToFrontExpiration.value !== Number.parseInt(e.target.value)) {
exitToFrontExpiration.value = Number.parseInt(e.target.value);
refreshcalendarExitPriceChartData();
}
};
const handleLookbackPeriodStartChange = (e) => {
if (lookbackPeriodStart.value !== e.target.value) {
lookbackPeriodStart.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
const handleLookbackPeriodEndChange = (e) => {
if (lookbackPeriodEnd.value !== e.target.value) {
lookbackPeriodEnd.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
export function HistoricalCalendarPrices() { export function HistoricalCalendarPrices() {
useEffect(handleInit, []); useEffect(handleInit, []);
@ -201,113 +73,36 @@ export function HistoricalCalendarPrices() {
<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 <EditableUnderlying /> :
<EditableDaysBetweenFrontAndBackExpiration />
-Day Calendar @ <EditableStrike />
%-from-the-money
</Typography> </Typography>
<Typography variant="h5" gutterBottom sx={{ pl: 1 }}>
Opening at <EditableDaysToFrontExpiration /> DTE, Closing at{" "}
<EditableExitToFrontExpiration />
DTE
</Typography>
<Typography variant="h5" gutterBottom>
<EditableLookbackPeriodStart />-
<EditableLookbackPeriodEnd />
</Typography>
<ClickAwayListener
onClickAway={() => {
isPopperOpen.value = false;
// refreshSimilarCalendarPriceChartData();
console.log("clicked away");
}}
>
<Popper open={isPopperOpen.value} anchorEl={popperAnchorEl.value}>
<Paper elevation={3} sx={{ p: 3 }}>
{popperContent.value}
</Paper>
</Popper>
</ClickAwayListener>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12}>
<Paper elevation={3} sx={{ p: 3 }}> <Paper elevation={3} sx={{ p: 3, minHeight: "28em", height: "100%" }}>
<Grid container spacing={2}>
<Grid item xs={12}>
<FormControl fullWidth>
<InputLabel>Available Underlyings</InputLabel>
<Select
value={underlying.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={daysToFrontExpiration.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={daysBetweenFrontAndBackExpiration.value}
onChange={handleDaysBetweenFrontAndBackExpirationChange}
InputProps={{ endAdornment: "Days Difference" }}
/>
</Grid>
<Grid item xs={6}>
<TextField
fullWidth
label="Strike % From Underlying Price"
type="number"
value={strikePercentageFromUnderlyingPrice.value}
onChange={handleStrikePercentageFromUnderlyingPriceChange}
InputProps={{ endAdornment: "%" }}
/>
</Grid>
<Grid item xs={6}>
<TextField
fullWidth
label="Strike % Radius"
type="number"
value={strikePercentageFromUnderlyingPriceRadius.value}
onChange={
handleStrikePercentageFromUnderlyingPriceRadiusChange
}
InputProps={{ endAdornment: "%" }}
/>
</Grid>
<Grid item xs={12}>
<TextField
fullWidth
label="Exit-to-Front-Month Days to Expiration"
type="number"
value={exitToFrontExpiration.value}
onChange={handleExitToFrontExpirationChange}
InputProps={{ endAdornment: "Days" }}
/>
</Grid>
<Grid item xs={6}>
<TextField
fullWidth
label="Lookback Period Start"
type="date"
value={lookbackPeriodStart.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={lookbackPeriodEnd.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%" }}>
{underlying.value !== null && {underlying.value !== null &&
stockPriceChartData.value.length > 0 ? ( stockPriceChartData.value.length > 0 ? (
<Scatter <Scatter
@ -371,8 +166,8 @@ export function HistoricalCalendarPrices() {
)} )}
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12} md={6}>
<Paper elevation={3} sx={{ p: 3 }}> <Paper elevation={3} sx={{ p: 3, minHeight: "28em" }}>
{underlying.value !== null && {underlying.value !== null &&
similarCalendarPriceChartData.value.length > 0 ? ( similarCalendarPriceChartData.value.length > 0 ? (
<Scatter <Scatter
@ -432,8 +227,8 @@ export function HistoricalCalendarPrices() {
)} )}
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12} md={6}>
<Paper elevation={3} sx={{ p: 3 }}> <Paper elevation={3} sx={{ p: 3, minHeight: "28em" }}>
{underlying.value !== null && {underlying.value !== null &&
similarCalendarPriceChartData.value.length > 0 ? ( similarCalendarPriceChartData.value.length > 0 ? (
<Scatter <Scatter

38
frontend/src/pages/HistoricalCalendarPrices/EditableDaysBetweenFrontAndBackExpiration.tsx
Unescape Escape View File

@ -0,0 +1,38 @@
import TextField from "@mui/material/TextField";
import {
refreshcalendarExitPriceChartData,
refreshSimilarCalendarPriceChartData,
} from "./actions";
import { daysBetweenFrontAndBackExpiration } from "./state";
import { EditableValue } from "./EditableValue";
const handleDaysBetweenFrontAndBackExpirationChange = (e) => {
if (
daysBetweenFrontAndBackExpiration.value !== Number.parseInt(e.target.value)
) {
daysBetweenFrontAndBackExpiration.value = Number.parseInt(e.target.value);
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
function DaysBetweenFrontAndBackExpirationChooser() {
return (
<TextField
fullWidth
label="Front-to-Back-Month Days to Expiration Difference"
type="number"
value={daysBetweenFrontAndBackExpiration.value}
onChange={handleDaysBetweenFrontAndBackExpirationChange}
InputProps={{ endAdornment: "Days Difference" }}
/>
);
}
export function EditableDaysBetweenFrontAndBackExpiration() {
return (
<EditableValue text={daysBetweenFrontAndBackExpiration.value}>
<DaysBetweenFrontAndBackExpirationChooser />
</EditableValue>
);
}

32
frontend/src/pages/HistoricalCalendarPrices/EditableDaysToFrontExpiration.tsx
Unescape Escape View File

@ -0,0 +1,32 @@
import TextField from "@mui/material/TextField";
import { refreshSimilarCalendarPriceChartData } from "./actions";
import { EditableValue } from "./EditableValue";
import { daysToFrontExpiration } from "./state";
const handleDaysToFrontExpirationChange = (e) => {
if (daysToFrontExpiration.value !== Number.parseInt(e.target.value)) {
daysToFrontExpiration.value = Number.parseInt(e.target.value);
refreshSimilarCalendarPriceChartData();
}
};
function DaysToFrontExpirationChooser() {
return (
<TextField
fullWidth
label="Now-to-Front-Month Days to Expiration"
type="number"
value={daysToFrontExpiration.value}
onChange={handleDaysToFrontExpirationChange}
InputProps={{ endAdornment: "Days" }}
/>
);
}
export function EditableDaysToFrontExpiration() {
return (
<EditableValue text={daysToFrontExpiration.value}>
<DaysToFrontExpirationChooser />
</EditableValue>
);
}

32
frontend/src/pages/HistoricalCalendarPrices/EditableExitToFrontExpiration.tsx
Unescape Escape View File

@ -0,0 +1,32 @@
import TextField from "@mui/material/TextField";
import { EditableValue } from "./EditableValue";
import { exitToFrontExpiration } from "./state";
import { refreshcalendarExitPriceChartData } from "./actions";
const handleExitToFrontExpirationChange = (e) => {
if (exitToFrontExpiration.value !== Number.parseInt(e.target.value)) {
exitToFrontExpiration.value = Number.parseInt(e.target.value);
refreshcalendarExitPriceChartData();
}
};
function ExitToFrontExpirationChooser() {
return (
<TextField
fullWidth
label="Exit-to-Front-Month Days to Expiration"
type="number"
value={exitToFrontExpiration.value}
onChange={handleExitToFrontExpirationChange}
InputProps={{ endAdornment: "Days" }}
/>
);
}
export function EditableExitToFrontExpiration() {
return (
<EditableValue text={exitToFrontExpiration.value}>
<ExitToFrontExpirationChooser />
</EditableValue>
);
}

38
frontend/src/pages/HistoricalCalendarPrices/EditableLookbackPeriodEnd.tsx
Unescape Escape View File

@ -0,0 +1,38 @@
import TextField from "@mui/material/TextField";
import {
refreshcalendarExitPriceChartData,
refreshSimilarCalendarPriceChartData,
refreshStockPriceChartData,
} from "./actions";
import { lookbackPeriodEnd } from "./state";
import { EditableValue } from "./EditableValue";
const handleLookbackPeriodEndChange = (e) => {
if (lookbackPeriodEnd.value !== e.target.value) {
lookbackPeriodEnd.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
function LookbackPeriodEndChooser() {
return (
<TextField
fullWidth
label="Lookback Period End"
type="date"
value={lookbackPeriodEnd.value}
onChange={handleLookbackPeriodEndChange}
InputLabelProps={{ shrink: true }}
/>
);
}
export function EditableLookbackPeriodEnd() {
return (
<EditableValue text={lookbackPeriodEnd.value}>
<LookbackPeriodEndChooser />
</EditableValue>
);
}

38
frontend/src/pages/HistoricalCalendarPrices/EditableLookbackPeriodStart.tsx
Unescape Escape View File

@ -0,0 +1,38 @@
import TextField from "@mui/material/TextField";
import {
refreshcalendarExitPriceChartData,
refreshSimilarCalendarPriceChartData,
refreshStockPriceChartData,
} from "./actions";
import { lookbackPeriodStart } from "./state";
import { EditableValue } from "./EditableValue";
const handleLookbackPeriodStartChange = (e) => {
if (lookbackPeriodStart.value !== e.target.value) {
lookbackPeriodStart.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
function LookbackPeriodStartChooser() {
return (
<TextField
fullWidth
label="Lookback Period Start"
type="date"
value={lookbackPeriodStart.value}
onChange={handleLookbackPeriodStartChange}
InputLabelProps={{ shrink: true }}
/>
);
}
export function EditableLookbackPeriodStart() {
return (
<EditableValue text={lookbackPeriodStart.value}>
<LookbackPeriodStartChooser />
</EditableValue>
);
}

70
frontend/src/pages/HistoricalCalendarPrices/EditableStrike.tsx
Unescape Escape View File

@ -0,0 +1,70 @@
import Box from "@mui/material/Box";
import { EditableValue } from "./EditableValue";
import {
strikePercentageFromUnderlyingPrice,
strikePercentageFromUnderlyingPriceRadius,
} from "./state";
import Slider from "@mui/material/Slider";
import { refreshSimilarCalendarPriceChartData } from "./actions";
function StrikePercentageFromUnderlyingPriceChooser() {
return (
<Slider
fullWidth
label="Strike % From Underlying Price"
value={strikePercentageFromUnderlyingPrice.value}
valueLabelDisplay="on"
min={0}
max={10}
step={0.1}
onChange={(e, value) => {
strikePercentageFromUnderlyingPrice.value = value as number;
}}
onChangeCommitted={(e, value) => {
refreshSimilarCalendarPriceChartData();
}}
InputProps={{ endAdornment: "%" }}
/>
);
}
function StrikePercentageFromUnderlyingPriceRadiusChooser() {
return (
<Slider
fullWidth
label="Strike % Radius"
value={strikePercentageFromUnderlyingPriceRadius.value}
valueLabelDisplay="on"
min={0}
max={0.5}
step={0.05}
onChange={(e, value) => {
strikePercentageFromUnderlyingPriceRadius.value = value as number;
}}
onChangeCommitted={(e, value) => {
refreshSimilarCalendarPriceChartData();
}}
InputProps={{ endAdornment: "%" }}
/>
);
}
/** This is its own component so that sliding the slider with the mouse is
* smoother. Preact detects reads from the "slider" signal values, and
* associates them with the component that read them and redraws that component.
* If this was not its own component, it would redraw the entire UI. It was very
* slow. */
export function EditableStrike() {
return (
<EditableValue
text={`${strikePercentageFromUnderlyingPrice.value.toFixed(
1
)}±${strikePercentageFromUnderlyingPriceRadius.value.toFixed(2)}`}
>
<Box sx={{ minWidth: "20em" }}>
<StrikePercentageFromUnderlyingPriceChooser />
<StrikePercentageFromUnderlyingPriceRadiusChooser />
</Box>
</EditableValue>
);
}

42
frontend/src/pages/HistoricalCalendarPrices/EditableUnderlying.tsx
Unescape Escape View File

@ -0,0 +1,42 @@
import Select from "@mui/material/Select";
import { EditableValue } from "./EditableValue";
import { availableUnderlyings, underlying } from "./state";
import MenuItem from "@mui/material/MenuItem";
import {
refreshcalendarExitPriceChartData,
refreshSimilarCalendarPriceChartData,
refreshStockPriceChartData,
} from "./actions";
const handleUnderlyingChange = (e) => {
if (underlying.value !== e.target.value) {
underlying.value = e.target.value;
refreshStockPriceChartData();
refreshSimilarCalendarPriceChartData();
refreshcalendarExitPriceChartData();
}
};
function UnderlyingChooser() {
return (
<Select
value={underlying.value || ""}
onChange={handleUnderlyingChange}
label="Available Underlyings"
>
{availableUnderlyings.value.map((underlying) => (
<MenuItem key={underlying} value={underlying}>
{underlying}
</MenuItem>
))}
</Select>
);
}
export function EditableUnderlying() {
return (
<EditableValue text={underlying.value}>
<UnderlyingChooser />
</EditableValue>
);
}

29
frontend/src/pages/HistoricalCalendarPrices/EditableValue.tsx
Unescape Escape View File

@ -0,0 +1,29 @@
import Button from "@mui/material/Button";
import { isPopperOpen, popperAnchorEl, popperContent } from "./state";
export function EditableValue({ text, children }) {
return (
<Button
variant="text"
size="large"
sx={{
textDecoration: "underline",
textUnderlineOffset: "3px",
fontSize: "1.0em",
}}
onClick={(e) => {
// stop propagation so it's not caught by the ClickAwayListener:
e.stopPropagation();
if (isPopperOpen.value === false) {
isPopperOpen.value = true;
popperAnchorEl.value = e.currentTarget;
popperContent.value = children;
} else {
isPopperOpen.value = false;
}
}}
>
{text}
</Button>
);
}

63
frontend/src/pages/HistoricalCalendarPrices/actions.ts
Unescape Escape View File

@ -0,0 +1,63 @@
import { trpc } from "../../trpc";
import {
calendarExitPriceChartData,
daysBetweenFrontAndBackExpiration,
daysToFrontExpiration,
exitToFrontExpiration,
lookbackPeriodEnd,
lookbackPeriodStart,
similarCalendarPriceChartData,
stockPriceChartData,
strikePercentageFromUnderlyingPrice,
strikePercentageFromUnderlyingPriceRadius,
underlying,
} from "./state";
export const refreshStockPriceChartData = () => {
stockPriceChartData.value = [];
trpc.StockPriceChart.getChartData
.query({
underlying: underlying.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getChartDataResponse) => {
stockPriceChartData.value = getChartDataResponse;
});
};
export const refreshSimilarCalendarPriceChartData = () => {
similarCalendarPriceChartData.value = [];
trpc.SimilarCalendarPriceChart.getChartData
.query({
underlying: underlying.value,
daysToFrontExpiration: daysToFrontExpiration.value,
daysBetweenFrontAndBackExpiration:
daysBetweenFrontAndBackExpiration.value,
strikePercentageFromUnderlyingPriceRangeMin:
strikePercentageFromUnderlyingPrice.value -
strikePercentageFromUnderlyingPriceRadius.value,
strikePercentageFromUnderlyingPriceRangeMax:
strikePercentageFromUnderlyingPrice.value +
strikePercentageFromUnderlyingPriceRadius.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getChartDataResponse) => {
similarCalendarPriceChartData.value = getChartDataResponse;
});
};
export const refreshcalendarExitPriceChartData = () => {
calendarExitPriceChartData.value = [];
trpc.CalendarExitPriceChart.getChartData
.query({
underlying: underlying.value,
daysToFrontExpiration: exitToFrontExpiration.value,
daysBetweenFrontAndBackExpiration:
daysBetweenFrontAndBackExpiration.value,
lookbackPeriodStart: lookbackPeriodStart.value,
lookbackPeriodEnd: lookbackPeriodEnd.value,
})
.then((getChartDataResponse) => {
calendarExitPriceChartData.value = getChartDataResponse;
});
};

46
frontend/src/pages/HistoricalCalendarPrices/state.ts
Unescape Escape View File

@ -0,0 +1,46 @@
import { computed, signal } from "@preact/signals";
export const isPopperOpen = signal(false);
export const popperAnchorEl = signal(null);
export const popperContent = signal(null);
export const availableUnderlyings = signal([]);
export const underlying = signal(null);
export const daysToFrontExpiration = signal(14);
export const daysBetweenFrontAndBackExpiration = signal(14);
export const strikePercentageFromUnderlyingPrice = signal(1.4);
export const strikePercentageFromUnderlyingPriceRadius = signal(0.05);
export const exitToFrontExpiration = signal(2);
export const stockPriceChartData = signal([]);
export const similarCalendarPriceChartData = signal([]);
export const calendarExitPriceChartData = signal([]);
export const lookbackPeriodStart = signal("2022-01-01");
export const lookbackPeriodEnd = signal("2024-01-01");
export const maxChartPrice = computed(() =>
Math.max(
Math.max.apply(
null,
similarCalendarPriceChartData.value.map((d) => d.y)
),
Math.max.apply(
null,
calendarExitPriceChartData.value.map((d) => d.y)
)
)
);
export const maxN = computed(() =>
Math.max.apply(
null,
calendarExitPriceChartData.value.map((d) => d.n)
)
);
Write Preview
Loading…
Cancel
Save