added IPO bars

stockingly-frontend/src/components/StockPrice.vue

@@ -15,7 +15,8 @@
         </v-btn-toggle>
         <strong class="label">Current price:</strong>
         <div class="chips">
-          <v-chip class="ma-1" v-for="ticker in tickers" :key="ticker" :color="getTickerColor(ticker)" size="large" variant="outlined">
+          <v-chip class="ma-1" v-for="ticker in tickers" :key="ticker" :color="getTickerColor(ticker)" size="large"
+            variant="outlined">
             {{ ticker }}: ${{ maxPrice[ticker] }}
           </v-chip>
         </div>
@@ -38,7 +39,8 @@
   flex: 1 0;
 }
 
-.toolbar .chips, .toolbar .label {
+.toolbar .chips,
+.toolbar .label {
   flex: 0 0;
   text-align: center;
 }
@@ -78,6 +80,23 @@ const optToDuration: Record<TimeOptions, [DurationLike | undefined, TimeInterval
 
 const getTickerColor = (ticker: string) => props.colors[props.tickers.indexOf(ticker)];
 
+const minDates = (data: PriceHistory[]) => {
+  const toReturn = Object.fromEntries(props.tickers.map(t => [t, +Infinity]));
+
+  for (const d of data ?? []) {
+    for (const key in d) {
+      if (key === 'date' || typeof d[key] !== 'number') continue;
+      if (Date.parse(d.date) < toReturn[key]) {
+        toReturn[key] = Date.parse(d.date);
+      }
+    }
+  }
+
+  console.log(toReturn);
+
+  return toReturn;
+};
+
 const maxPrice = computed(() => {
   const maxVal = Object.fromEntries(props.tickers.map(t => [t, NaN]));
   let maxDate = -Infinity;
@@ -144,7 +163,16 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
+        crossLines: Object.entries(minDates(stockPrice.data ?? []))
+          .map(([key, value]: [string, number]) => ({
+            type: 'line',
+            value,
+            label: {
+              text: key + ' IPO',
+              position: 'top',
+            }
+          }))
       },
       {
         type: 'number',
@@ -160,7 +188,7 @@ const options = computed(() => {
           lineDash: [Infinity]
         }, {
           lineDash: [Infinity]
-        }]
+        }],
       },
     ],
     legend: {