use line on stock price chart; more compact data transfer format

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: {

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/src/StockPriceChart.ts

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