add dark pool section

src/routes/etf/[tickerID]/+layout.svelte

@@ -69,6 +69,7 @@
     const sectionMap = {
       insider: "/insider",
       options: "/options",
+      "dark-pool": "/dark-pool",
       dividends: "/dividends",
       holdings: "/holdings",
       history: "/history",
@@ -344,6 +345,7 @@
       const sectionMap = {
         holdings: "holdings",
         options: "options",
+        "dark-pool": "dark-pool",
         insider: "insider",
         dividends: "dividends",
         history: "history",
@@ -881,6 +883,17 @@
                         >
                           Holdings
                         </a>
+
+                        <a
+                          href={`/etf/${$etfTicker}/dark-pool`}
+                          on:click={() => changeSection("dark-pool")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'dark-pool'
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Dark Pool
+                        </a>
                         <a
                           href={`/etf/${$etfTicker}/options`}
                           on:click={() => changeSection("options")}

src/routes/heatmap/+page.svelte

@@ -12,40 +12,27 @@
   let selectedFormat: "png" | "jpeg" | "svg" = "png";
   let selectedTimePeriod = "1D";
   let iframeUrl: string;
-  let loading = true;
 
   async function getHeatMap() {
-    loading = true;
+    const cachedData = getCache(selectedTimePeriod, "getHeatmap");
-    try {
+    if (cachedData) {
-      const cachedData = getCache(selectedTimePeriod, "getHeatmap");
+      rawData = cachedData;
-      if (cachedData) {
+    } else {
-        rawData = cachedData;
+      const postData = { params: selectedTimePeriod };
-      } else {
+      const response = await fetch("/api/heatmap", {
-        const postData = { params: selectedTimePeriod };
+        method: "POST",
-        const response = await fetch("/api/heatmap", {
+        headers: {
-          method: "POST",
+          "Content-Type": "application/json",
-          headers: {
+        },
-            "Content-Type": "application/json",
+        body: JSON.stringify(postData),
-          },
+      });
-          body: JSON.stringify(postData),
-        });
 
-        rawData = await response.json();
+      rawData = await response.json();
-        setCache(selectedTimePeriod, rawData, "getHeatmap");
+      setCache(selectedTimePeriod, rawData, "getHeatmap");
-      }
-
-      const htmlContent = rawData;
-
-      const blob = new Blob([htmlContent], { type: "text/html" });
-      if (iframeUrl) {
-        URL.revokeObjectURL(iframeUrl);
-      }
-      iframeUrl = URL.createObjectURL(blob);
-    } catch (error) {
-      console.error("Error loading heatmap:", error);
-    } finally {
-      loading = false;
     }
+
+    const blob = new Blob([rawData], { type: "text/html" });
+    iframeUrl = URL.createObjectURL(blob);
   }
 
   async function downloadPlot(item) {
@@ -105,6 +92,10 @@
   }
 </script>
 
+<svelte:head>
+  <script src="https://cdn.plot.ly/plotly-2.18.0.min.js" defer></script>
+</svelte:head>
+
 <SEO
   title="S&P 500 Stock Market Heatmap"
   description="A stock market heatmap showing the performance of the individual stocks, sectors and industries in the S&P500."
@@ -235,25 +226,12 @@
             </div>
           </div>
           <div class="w-full min-h-screen bg-[#09090B] overflow-hidden">
-            {#if loading}
-              <div class="flex justify-center items-center h-[50vh]">
-                <div
-                  class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"
-                ></div>
-              </div>
-            {/if}
-
             {#if rawData}
               <iframe
                 bind:this={iframe}
                 src={iframeUrl}
-                class="w-full h-screen border-none {loading ? 'hidden' : ''}"
+                class="w-full h-screen border-none"
-                on:load={() => {
+                on:load={() => (iframeLoaded = true)}
-                  iframeLoaded = true;
-                  loading = false;
-                }}
-                loading="eager"
-                title="S&P 500 Heatmap"
               />
             {/if}
           </div>
@@ -262,13 +240,3 @@
     </div>
   </div>
 </section>
-
-<style>
-  iframe {
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  .hidden {
-    opacity: 0;
-  }
-</style>

src/routes/stocks/[tickerID]/+layout.svelte

@@ -953,6 +953,16 @@
                             Forecast
                           </a>
                         {/if}
+                        <a
+                          href={`/stocks/${$stockTicker}/dark-pool`}
+                          on:click={() => changeSection("dark-pool")}
+                          class="p-2 px-5 cursor-pointer {displaySection ===
+                          'dark-pool'
+                            ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95] font-semibold'
+                            : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+                        >
+                          Dark Pool
+                        </a>
                         <a
                           href={`/stocks/${$stockTicker}/options`}
                           on:click={() => changeSection("options")}