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