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

calendar optimizer page works

Browse Source
This commit is contained in:
Avraham Sakal
2024-03-12 23:37:35 -04:00
parent 4580494810
commit 438585f9e0
3 changed files with 175 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/CalendarOptimizer/index.tsx
+149 -6
View File
@@ -1,6 +1,18 @@
import { signal } from "@preact/signals";
import { useCallback, useEffect } from "preact/hooks";
import { trpc } from "../../trpc.js";
import {
Chart as ChartJS,
LinearScale,
CategoryScale,
PointElement,
Tooltip,
Title,
} from "chart.js";
import { Scatter } from "react-chartjs-2";
import "./style.css";
ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
const availableUnderlyings = signal([]);
const chosenUnderlying = signal(null);
@@ -151,12 +163,143 @@ export function CalendarOptimizer() {
</select>
)}
</div>
{/* {chosenUnderlying.value!==null && underlyingUplotData.value.length>0
? <UPlot data={underlyingUplotData.value} title="Underlying" opts={uplotOpts}/>
: <></>}
{chosenUnderlying.value!==null && chosenAsOfDate.value!==null && chosenExpiration.value!==null && chosenStrike.value!==null && optionContractUplotData.value.length>0
? <UPlot data={optionContractUplotData.value} title="Option Contract" opts={uplotOpts}/>
: <></>} */}
<div className="chart-container">
{chosenUnderlying.value !== null &&
underlyingUplotData.value.length > 0 ? (
<div className="chart">
<Scatter
data={{
datasets: [
{
label: "Stock Open Price",
data: underlyingUplotData.value,
},
],
}}
options={{
scales: {
x: {
title: {
display: true,
text: "Time",
},
ticks: {
callback: function (value, index, ticks) {
return new Date((value as number) * 1000)
.toISOString()
.substring(0, 10);
},
},
// min: (new Date(chosenLookbackPeriodStart.value)).getTime()/1000,
// max: (new Date(chosenLookbackPeriodEnd.value)).getTime()/1000,
},
y: {
beginAtZero: false,
ticks: {
callback: function (value, index, ticks) {
return "$" + value.toString();
},
},
// min: 0,
// max: maxChartPrice.value,
},
},
elements: {
point: {
radius: 1,
borderWidth: 0,
},
},
plugins: {
tooltip: {
enabled: false,
},
legend: {
display: false,
},
title: {
display: true,
text: "Stock Price",
},
},
animation: false,
maintainAspectRatio: false,
}}
/>
</div>
) : (
<></>
)}
{chosenUnderlying.value !== null &&
chosenAsOfDate.value !== null &&
chosenExpiration.value !== null &&
chosenStrike.value !== null &&
optionContractUplotData.value.length > 0 ? (
<div className="chart">
<Scatter
data={{
datasets: [
{
label: "Option Contract Open Price",
data: optionContractUplotData.value,
},
],
}}
options={{
scales: {
x: {
title: {
display: true,
text: "Time",
},
ticks: {
callback: function (value, index, ticks) {
return new Date((value as number) * 1000)
.toISOString()
.substring(0, 10);
},
},
// min: (new Date(chosenLookbackPeriodStart.value)).getTime()/1000,
// max: (new Date(chosenLookbackPeriodEnd.value)).getTime()/1000,
},
y: {
beginAtZero: false,
ticks: {
callback: function (value, index, ticks) {
return "$" + value.toString();
},
},
// min: 0,
// max: maxChartPrice.value,
},
},
elements: {
point: {
radius: 1,
borderWidth: 0,
},
},
plugins: {
tooltip: {
enabled: false,
},
legend: {
display: false,
},
title: {
display: true,
text: "Option Contract Price",
},
},
animation: false,
maintainAspectRatio: false,
}}
/>
</div>
) : (
<></>
)}
</div>
</div>
);
}
frontend/src/pages/CalendarOptimizer/style.css
+11
View File
@@ -0,0 +1,11 @@
.chart-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
width: 1800px;
height: 480px;
}
.chart-container > .chart {
width: 880px;
}
server/src/index.ts
+13 -28
View File
@@ -49,6 +49,7 @@ const appRouter = router({
DISTINCT(asOfDate) as asOfDate
FROM option_contracts
WHERE symbol = '${underlying}'
ORDER BY asOfDate
`)
).map(({ asOfDate }) => asOfDate);
}),
@@ -66,10 +67,11 @@ const appRouter = router({
return (
await query<{ expirationDate: string }>(`
SELECT
DISTINCT(expirationDate)
DISTINCT(expirationDate) as expirationDate
FROM option_contracts
WHERE symbol = '${underlying}'
AND asOfDate = '${asOfDate}'
ORDER BY expirationDate
`)
).map(({ expirationDate }) => expirationDate);
}),
@@ -88,11 +90,12 @@ const appRouter = router({
return (
await query<{ strike: string }>(`
SELECT
DISTINCT(strike)
DISTINCT(strike) as strike
FROM option_contracts
WHERE symbol = '${underlying}'
AND asOfDate = '${asOfDate}'
AND expirationDate = '${expirationDate}'
ORDER BY strike
`)
).map(({ strike }) => strike);
}),
@@ -106,25 +109,16 @@ const appRouter = router({
)
.query(async (opts) => {
const { underlying } = opts.input;
return (
await query<[number, number]>(
return await query<{ x: number; y: number }>(
`
SELECT
toUnixTimestamp(tsStart),
open
toUnixTimestamp(tsStart) as x,
open as y
FROM stock_aggregates
WHERE symbol = '${underlying}'
ORDER BY tsStart ASC
`,
"JSONCompactEachRow"
)
).reduce(
(columns, row) => {
columns[0].push(row[0]);
columns[1].push(row[1]);
return columns;
},
[[], []]
"JSONEachRow"
);
}),
getOpensForOptionContract: publicProcedure
@@ -139,12 +133,11 @@ const appRouter = router({
)
.query(async (opts) => {
const { underlying, expirationDate, strike } = opts.input;
return (
await query<[number, number]>(
return await query<{ x: number; y: number }>(
`
SELECT
toUnixTimestamp(tsStart),
open
toUnixTimestamp(tsStart) as x,
open as y
FROM option_aggregates
WHERE symbol = '${underlying}'
AND expirationDate = '${expirationDate}'
@@ -152,15 +145,7 @@ const appRouter = router({
AND type = 'call'
ORDER BY tsStart ASC
`,
"JSONCompactEachRow"
)
).reduce(
(columns, row) => {
columns[0].push(row[0]);
columns[1].push(row[1]);
return columns;
},
[[], []]
"JSONEachRow"
);
}),
getHistoricalCalendarPrices: publicProcedure