add ticker flow to etf page

src/lib/components/Options/TickerFlow.svelte

@@ -168,8 +168,8 @@
       },
       grid: [
         {
-          left: "3%",
+          left: $screenWidth < 640 ? "3%" : "0%",
-          right: "3%",
+          right: $screenWidth < 640 ? "3%" : "0%",
           top: $screenWidth < 640 ? "15%" : "5%",
           height: "60%",
           containLabel: true,
@@ -417,7 +417,7 @@
               </div>
 
               <div>
-                <div class="app w-full h-[300px] mt-5">
+                <div class="app w-full h-[250px] mt-5">
                   {#if isLoading}
                     <div class="flex justify-center items-center h-80">
                       <div class="relative">
@@ -445,13 +445,13 @@
 
 <style>
   .app {
-    height: 600px;
+    height: 400px;
     max-width: 100%; /* Ensure chart width doesn't exceed the container */
   }
 
   @media (max-width: 640px) {
     .app {
-      height: 510px;
+      height: 400px;
     }
   }
 

src/routes/etf/[tickerID]/options/+page.server.ts

@@ -26,6 +26,26 @@ export const load = async ({ locals, params }) => {
   };
 
 
+   const getTickerFlow = async () => {
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+    const response = await fetch(apiURL + "/ticker-flow", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+
 
   const getOptionsHistoricalData = async () => {
     const postData = {
@@ -52,6 +72,7 @@ export const load = async ({ locals, params }) => {
   // Make sure to return a promise
   return {
     getDailyStats: await getDailyStats(),
+    getTickerFlow: await getTickerFlow(),
     getOptionsHistoricalData: await getOptionsHistoricalData(),
   };
 };

src/routes/etf/[tickerID]/options/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { displayCompanyName, screenWidth, etfTicker } from "$lib/store";
   import DailyStats from "$lib/components/Options/DailyStats.svelte";
+  import TickerFlow from "$lib/components/Options/TickerFlow.svelte";
+
   import { Chart } from "svelte-echarts";
   import { abbreviateNumberWithColor, monthNames } from "$lib/utils";
   import { onMount } from "svelte";
@@ -16,6 +18,7 @@
 
   export let data;
   let dailyStats = data?.getDailyStats;
+  let tickerFlow = data?.getTickerFlow || [];
 
   let filteredList = [];
 
@@ -299,6 +302,11 @@
           <Infobox text="No Options data available" />
         {/if}
 
+        {#if tickerFlow?.length > 0}
+          <div class="w-full mb-5">
+            <TickerFlow {tickerFlow} />
+          </div>
+        {/if}
         {#if Object?.keys(dailyStats)?.length > 0}
           <div class="w-full mb-10">
             <DailyStats rawData={dailyStats} />