use Slider for lookback period

frontend/src/pages/HistoricalCalendarPrices.tsx

@@ -5,6 +5,7 @@ import {
   LinearScale,
   CategoryScale,
   PointElement,
+  LineElement,
   Tooltip,
   Title,
 } from "chart.js";
@@ -42,10 +43,16 @@ import { EditableUnderlying } from "./HistoricalCalendarPrices/EditableUnderlyin
 import { EditableOpenDTE } from "./HistoricalCalendarPrices/EditableOpenDTE.js";
 import { EditableExitDTE } from "./HistoricalCalendarPrices/EditableExitDTE.js";
 import { EditableSpan } from "./HistoricalCalendarPrices/EditableSpan.js";
-import { EditableLookbackPeriodStart } from "./HistoricalCalendarPrices/EditableLookbackPeriodStart.js";
+import { EditableLookbackPeriod } from "./HistoricalCalendarPrices/EditableLookbackPeriod.js";
-import { EditableLookbackPeriodEnd } from "./HistoricalCalendarPrices/EditableLookbackPeriodEnd.js";
 
-ChartJS.register(LinearScale, CategoryScale, PointElement, Tooltip, Title);
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  PointElement,
+  LineElement,
+  Tooltip,
+  Title
+);
 
 const handleInit = () => {
   trpc.CalendarCharacteristicsForm.getAvailableUnderlyings
@@ -125,8 +132,7 @@ export function HistoricalCalendarPrices() {
             <Typography gutterBottom minWidth={"8em"}>
               Lookback Period
             </Typography>
-            <EditableLookbackPeriodStart />-
+            <EditableLookbackPeriod />
-            <EditableLookbackPeriodEnd />
           </Stack>
           <ClickAwayListener
             onClickAway={() => {
@@ -292,6 +298,8 @@ export function HistoricalCalendarPrices() {
                   ],
                 }}
                 options={{
+                  showLine: true,
+                  normalized: true,
                   scales: {
                     x: {
                       title: {
@@ -317,9 +325,12 @@ export function HistoricalCalendarPrices() {
                   },
                   elements: {
                     point: {
-                      radius: 1,
+                      radius: 2,
                       borderWidth: 0,
                     },
+                    line: {
+                      borderWidth: 2,
+                    },
                   },
                   plugins: {
                     tooltip: {

frontend/src/pages/HistoricalCalendarPrices/EditableLookbackPeriod.tsx

@@ -0,0 +1,66 @@
+import TextField from "@mui/material/TextField";
+import {
+  refreshcalendarExitPriceChartData,
+  refreshSimilarCalendarPriceChartData,
+  refreshStockPriceChartData,
+} from "./actions";
+import { lookbackPeriodEnd, lookbackPeriodStart } from "./state";
+import Slider from "@mui/material/Slider";
+
+const handleLookbackPeriodChange = (
+  e,
+  [newLookbackPeriodStart, newLookbackPeriodEnd]: [number, number]
+) => {
+  const [lookbackPeriodStartUnixTime, lookbackPeriodEndUnixTime] = [
+    new Date(lookbackPeriodStart.value).getTime(),
+    new Date(lookbackPeriodEnd.value).getTime(),
+  ];
+  if (lookbackPeriodStartUnixTime !== newLookbackPeriodStart) {
+    lookbackPeriodStart.value = new Date(newLookbackPeriodStart)
+      .toISOString()
+      .substring(0, 10);
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+  if (lookbackPeriodEndUnixTime !== newLookbackPeriodEnd) {
+    lookbackPeriodEnd.value = new Date(newLookbackPeriodEnd)
+      .toISOString()
+      .substring(0, 10);
+    refreshStockPriceChartData();
+    refreshSimilarCalendarPriceChartData();
+    refreshcalendarExitPriceChartData();
+  }
+};
+
+const earliestDate = new Date("2022-03-07");
+const DAY = 1000 * 60 * 60 * 24;
+function addDays(date, days) {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result.toISOString().substring(0, 10);
+}
+function daysBetween(date1, date2) {
+  return Math.round(Math.abs((date2.getTime() - date1.getTime()) / DAY));
+}
+export function EditableLookbackPeriod() {
+  return (
+    <Slider
+      value={[
+        new Date(lookbackPeriodStart.value).getTime(),
+        new Date(lookbackPeriodEnd.value).getTime(),
+      ]}
+      onChange={handleLookbackPeriodChange}
+      valueLabelFormat={(unixTimeMs) =>
+        new Date(unixTimeMs).toISOString().substring(0, 10)
+      }
+      getAriaValueText={(unixTimeMs) =>
+        new Date(unixTimeMs).toISOString().substring(0, 10)
+      }
+      min={earliestDate.getTime()}
+      max={earliestDate.getTime() + 250 * DAY}
+      step={DAY}
+      valueLabelDisplay="on"
+    />
+  );
+}

frontend/src/pages/HistoricalCalendarPrices/actions.ts

@@ -13,7 +13,29 @@ import {
   underlying,
 } from "./state";
 
-export const refreshStockPriceChartData = () => {
+function debounce(func, wait) {
+  let timeout;
+  return function () {
+    const context = this;
+    const args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}
+function throttle(func, limit) {
+  let inThrottle;
+  return function () {
+    const context = this;
+    const args = arguments;
+    if (!inThrottle) {
+      func.apply(context, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+export const refreshStockPriceChartData = throttle(() => {
   stockPriceChartData.value = [];
   trpc.StockPriceChart.getChartData
     .query({
@@ -24,8 +46,8 @@ export const refreshStockPriceChartData = () => {
     .then((getChartDataResponse) => {
       stockPriceChartData.value = getChartDataResponse;
     });
-};
+}, 400);
-export const refreshSimilarCalendarPriceChartData = () => {
+export const refreshSimilarCalendarPriceChartData = throttle(() => {
   similarCalendarPriceChartData.value = [];
   trpc.SimilarCalendarPriceChart.getChartData
     .query({
@@ -42,8 +64,8 @@ export const refreshSimilarCalendarPriceChartData = () => {
     .then((getChartDataResponse) => {
       similarCalendarPriceChartData.value = getChartDataResponse;
     });
-};
+}, 400);
-export const refreshcalendarExitPriceChartData = () => {
+export const refreshcalendarExitPriceChartData = throttle(() => {
   calendarExitPriceChartData.value = [];
   trpc.CalendarExitPriceChart.getChartData
     .query({
@@ -56,4 +78,4 @@ export const refreshcalendarExitPriceChartData = () => {
     .then((getChartDataResponse) => {
       calendarExitPriceChartData.value = getChartDataResponse;
     });
-};
+}, 400);

frontend/src/pages/HistoricalCalendarPrices/state.ts

@@ -16,7 +16,7 @@ export const moninessRadius = signal(1);
 
 export const exitDTE = signal(2);
 
-export const stockPriceChartData = signal([]);
+export const stockPriceChartData = signal<Array<[number, number]>>([]);
 
 export const similarCalendarPriceChartData = signal([]);
 

server/.gitignore

@@ -26,4 +26,5 @@ dist-ssr
 
 .env
 *.db
-*.db-lck
+*.db-lck
+Calendar tRPC

server/src/StockPriceChart.ts

@@ -26,7 +26,8 @@ export const getChartData = publicProcedure
      GROUP BY x
 		 ORDER BY x ASC
 	 `,
-      "JSONEachRow"
+      "JSONCompactEachRow"
+      // "JSONEachRow"
     );
   });
 

server/src/lib/clickhouse.ts

@@ -6,10 +6,10 @@ import { retry } from "./utils/retry.js";
 const env = new Env();
 
 const { CLICKHOUSE_USER, CLICKHOUSE_PASS } = env.required;
-const CLICKHOUSE_HOST = env.get("CLICKHOUSE_HOST", "http://localhost:8123");
+const CLICKHOUSE_URL = env.get("CLICKHOUSE_URL", "http://localhost:8123");
 
 export const clickhouse = createClickhouseClient({
-  url: CLICKHOUSE_HOST,
+  url: CLICKHOUSE_URL,
   username: CLICKHOUSE_USER,
   password: CLICKHOUSE_PASS,
   keep_alive: {