From 906e63eb91b817b692ed80d08fa0ca5eab8f1402 Mon Sep 17 00:00:00 2001
From: avraham <briansakal@gmail.com>
Date: Sun, 2 Mar 2025 17:53:59 -0500
Subject: [PATCH] use line on stock price chart; more compact data transfer
 format

---
 frontend/src/pages/HistoricalCalendarPrices.tsx | 17 +++++++++++++++--
 .../src/pages/HistoricalCalendarPrices/state.ts |  2 +-
 server/src/StockPriceChart.ts                   |  3 ++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/HistoricalCalendarPrices.tsx b/frontend/src/pages/HistoricalCalendarPrices.tsx
index 995acbf..0225c85 100644
--- a/frontend/src/pages/HistoricalCalendarPrices.tsx
+++ b/frontend/src/pages/HistoricalCalendarPrices.tsx
@@ -5,6 +5,7 @@ import {
   LinearScale,
   CategoryScale,
   PointElement,
+  LineElement,
   Tooltip,
   Title,
 } from "chart.js";
@@ -45,7 +46,14 @@ import { EditableSpan } from "./HistoricalCalendarPrices/EditableSpan.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,
+  LineElement,
+  Tooltip,
+  Title
+);
 
 const handleInit = () => {
   trpc.CalendarCharacteristicsForm.getAvailableUnderlyings
@@ -292,6 +300,8 @@ export function HistoricalCalendarPrices() {
                   ],
                 }}
                 options={{
+                  showLine: true,
+                  normalized: true,
                   scales: {
                     x: {
                       title: {
@@ -317,9 +327,12 @@ export function HistoricalCalendarPrices() {
                   },
                   elements: {
                     point: {
-                      radius: 1,
+                      radius: 2,
                       borderWidth: 0,
                     },
+                    line: {
+                      borderWidth: 2,
+                    },
                   },
                   plugins: {
                     tooltip: {
diff --git a/frontend/src/pages/HistoricalCalendarPrices/state.ts b/frontend/src/pages/HistoricalCalendarPrices/state.ts
index 3e92f0d..0137af3 100644
--- a/frontend/src/pages/HistoricalCalendarPrices/state.ts
+++ b/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([]);
 
diff --git a/server/src/StockPriceChart.ts b/server/src/StockPriceChart.ts
index 78a6649..acb28d3 100644
--- a/server/src/StockPriceChart.ts
+++ b/server/src/StockPriceChart.ts
@@ -26,7 +26,8 @@ export const getChartData = publicProcedure
      GROUP BY x
 		 ORDER BY x ASC
 	 `,
-      "JSONEachRow"
+      "JSONCompactEachRow"
+      // "JSONEachRow"
     );
   });