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