reduce data points for historical exit quotes by aggregating and applying weighted transparency

clean frontend html structure

frontend/src/pages/HistoricalCalendarPrices.tsx

@@ -48,7 +48,15 @@ const maxChartPrice = computed(() =>
   )
 );
 
+const maxN = computed(() =>
+  Math.max.apply(
+    null,
+    historicalCalendarExitQuoteChartData.value.map((d) => d.n)
+  )
+);
+
 const refreshHistoricalStockQuoteChartData = () => {
+  historicalStockQuoteChartData.value = [];
   trpc.getHistoricalStockQuoteChartData
     .query({
       underlying: chosenUnderlying.value,
@@ -61,6 +69,7 @@ const refreshHistoricalStockQuoteChartData = () => {
     });
 };
 const refreshHistoricalCalendarQuoteChartData = () => {
+  historicalCalendarQuoteChartData.value = [];
   trpc.getHistoricalCalendarQuoteChartData
     .query({
       underlying: chosenUnderlying.value,
@@ -82,6 +91,7 @@ const refreshHistoricalCalendarQuoteChartData = () => {
     });
 };
 const refreshHistoricalCalendarExitQuoteChartData = () => {
+  historicalCalendarExitQuoteChartData.value = [];
   trpc.getHistoricalCalendarExitQuoteChartData
     .query({
       underlying: chosenUnderlying.value,
@@ -289,11 +299,11 @@ export function HistoricalCalendarPrices() {
           </div>
         </div>
         {/* charts container: */}
-        <div>
-          <div className="chart-container">
+        <div className="flex flex-col justify-start gap-3">
+          <div className="min-h-96">
             {chosenUnderlying.value !== null &&
             historicalStockQuoteChartData.value.length > 0 ? (
-              <div className="chart">
+              <div className="h-full">
                 <Scatter
                   data={{
                     datasets: [
@@ -353,17 +363,18 @@ export function HistoricalCalendarPrices() {
                     },
                     animation: false,
                     maintainAspectRatio: false,
+                    events: [],
                   }}
                 />
               </div>
             ) : (
-              <div>Loading Chart...</div>
+              <div className="h-full">Loading Chart...</div>
             )}
           </div>
-          <div className="chart-container">
+          <div className="min-h-96">
             {chosenUnderlying.value !== null &&
             historicalCalendarQuoteChartData.value.length > 0 ? (
-              <div className="chart">
+              <div className="h-full">
                 <Scatter
                   data={{
                     datasets: [
@@ -419,16 +430,18 @@ export function HistoricalCalendarPrices() {
                     },
                     animation: false,
                     maintainAspectRatio: false,
+                    events: [],
                   }}
                 />
               </div>
             ) : (
-              <div>Loading Chart...</div>
+              <div className="h-full">Loading Chart...</div>
             )}
-
+          </div>
+          <div className="min-h-96">
             {chosenUnderlying.value !== null &&
             historicalCalendarQuoteChartData.value.length > 0 ? (
-              <div className="chart">
+              <div className="h-full">
                 <Scatter
                   data={{
                     datasets: [
@@ -467,6 +480,13 @@ export function HistoricalCalendarPrices() {
                     elements: {
                       point: {
                         borderWidth: 0,
+                        backgroundColor: function (context) {
+                          const n = (
+                            context.raw as { x: number; y: number; n: number }
+                          ).n;
+                          const alpha = n / maxN.value;
+                          return `rgba(0, 0, 0, ${alpha})`;
+                        },
                       },
                     },
                     plugins: {
@@ -486,11 +506,12 @@ export function HistoricalCalendarPrices() {
                     },
                     animation: false,
                     maintainAspectRatio: false,
+                    events: [],
                   }}
                 />
               </div>
             ) : (
-              <div>Loading Chart...</div>
+              <div className="h-full">Loading Chart...</div>
             )}
           </div>
         </div>