update options net flow

src/lib/components/OptionsNetFlow.svelte

@@ -3,13 +3,16 @@
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
     import { init, use } from 'echarts/core'
-    import { LineChart } from 'echarts/charts'
+    import { BarChart } from 'echarts/charts'
-    import { GridComponent } from 'echarts/components'
+    import { GridComponent, TooltipComponent } from 'echarts/components'
     import { CanvasRenderer } from 'echarts/renderers'
 
     export let data;
     
-    use([LineChart, GridComponent, CanvasRenderer])
+    use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
+
+
+    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
     let isLoaded = false;
    
@@ -43,7 +46,7 @@
     let priceList = [];
     let netCallList = [];
     let netPutList = [];
-
+    console.log(rawData)
     // Iterate over the data and extract required information
     rawData?.forEach(item => {
   
@@ -72,15 +75,25 @@
         top: '10%',
         containLabel: true
     },
-    xAxis:
+    xAxis: {
-    {
+    type: 'category',
-        type: 'category',
+    boundaryGap: false,
-        boundaryGap: false,
+    data: dates,  // Use the full dates here
-        data: dates,
+    axisLabel: {
-        axisLabel: {
+        color: '#fff',
-            color: '#fff',
+        formatter: function (value, index) {
+            if (index % 2 === 0) {
+            
+            const dateParts = value.split(' ')[0].split('-');
+            const day = dateParts[2]; // Extracting the day
+            const monthIndex = parseInt(dateParts[1], 10) - 1; // Zero-indexed months
+            return `${day} ${monthNames[monthIndex]}`; // Return formatted day and month
+            } else {
+              return '';
+            }
         }
-    },
+    }
+},
     yAxis: [
     { 
         type: 'value',
@@ -100,56 +113,27 @@
             }
         },
     },
-    {
-      type: 'value',
-      splitLine: {
-            show: false, // Disable x-axis grid lines
-      },
-      position: 'right',
   
-      axisLabel: {
-        color: '#fff',
-          formatter: function (value, index) {
-            if (index % 2 === 0) {
-              return '$'+value?.toFixed(1)
-            } else {
-                  return ''; // Hide this tick
-              }
-          }
-      }
-    },
     ],
     series: [
-        {
+       {
-            name: 'Price',
+            name: 'Net Call',
-            data: priceList,
+            data: netCallList,
-            type: 'line',
+            type: 'bar',
-            yAxisIndex: 1,
+            stack: 'NetFlow',
             itemStyle: {
-                color: '#fff'
+                color: '#2256FF'
             },
             showSymbol: false,
+
         },
         {   
             name: 'Net Put',
             data: netPutList,
-            type: 'line',
+            type: 'bar',
-            areaStyle: {opacity: 0.5},
             stack: 'NetFlow',
             itemStyle: {
-                color: '#FF2F1F'
+                color: '#FF2256'
-            },
-            showSymbol: false,
-           
-        },
-        {
-            name: 'Net Call',
-            data: netCallList,
-            type: 'line',
-            areaStyle: {opacity: 0.5},
-            stack: 'NetFlow',
-            itemStyle: {
-                color: '#10DB06'
             },
             showSymbol: false,
            
@@ -215,7 +199,6 @@
   
   </script>
     
-<svelte:options immutable={true} />
     
   <section class="overflow-hidden text-white h-full pb-8">
     <main class="overflow-hidden ">
@@ -238,7 +221,7 @@
   
         <div class="w-full flex flex-col items-start">
             <div class="text-white text-[1rem] mt-2 mb-2 w-full">
-                Analysis of the 20-day moving average of the options net flow demonstrates a {sentiment} trend, characterized by the {sentiment === 'bullish' ? 'Net Call Flow exceeding the Net Put Flow' : 'Net Put Flow exceeding the Net Call Flow'} .
+                The options net flow demonstrates a {sentiment} trend in the last 2 trading hours, characterized by the {sentiment === 'bullish' ? 'Net Call Flow exceeding the Net Put Flow' : 'Net Put Flow exceeding the Net Call Flow'}.
             </div>
         </div>
   
@@ -253,17 +236,9 @@
   
         <div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
             
-            <div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
-                <div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
-                <div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                <span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
-                    Price
-                </span>
-            </div>
-
             <div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
                 <div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
-                <div class="w-3 h-3 bg-[#10DB06] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
+                <div class="w-3 h-3 bg-[#2256FF] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
                 <span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
                     Net Call 
                 </span>

src/routes/+layout.svelte

@@ -811,9 +811,8 @@ $: {
                         <div class="flex flex-col items-start">
                           <a href="/dividends-calendar" class="text-[1rem] text-white ml-4 mt-4">Dividends Calendar</a>
                           <a href="/earnings-calendar" class="text-[1rem] text-white ml-4 mt-4">Earnings Calendar</a>
-                          <a href="/fda-calendar" class="text-[1rem] text-white ml-4 mt-4">FDA Calendar</a>
-                          <a href="/ipos/2024" class="text-[1rem] text-white ml-4 mt-4">IPO Calendar</a>
                           <!--<a href="/fda-calendar" class="text-[1rem] text-white ml-4 mt-4">FDA Calendar</a>-->
+                          <a href="/ipos/2024" class="text-[1rem] text-white ml-4 mt-4">IPO Calendar</a>
                           <a href="/economic-calendar" class="text-[1rem] text-white ml-4 mt-4">Economic Calendar</a>
                           <a href="/stock-splits-calendar" class="text-[1rem] text-white ml-4 mt-4">Stock Splits Calendar</a>
                         </div>

src/routes/blog/+page.svelte

@@ -3,6 +3,7 @@
 import { articleId, numberOfUnreadNotification } from '$lib/store';
 import { goto } from '$app/navigation';
 import {getImageURL} from '$lib/utils';
+  import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
 
 export let data;
@@ -81,18 +82,25 @@ let allBlogPosts = data?.getAllBlogPost;
 
 
 
-<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
+  <section class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3">
           
-
+    <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
-  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
       <ul>
         <li><a href="/" class="text-gray-300">Home</a></li>
-        <li class="text-gray-300">All Blog Post</li>
+        <li class="text-gray-300">Top Shorted Stocks</li>
       </ul>
-  </div>
+    </div>
             
-    <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+    <div class="w-full overflow-hidden m-auto mt-5">
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-10 ">
+      
+      <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden ">
+          <div class="relative flex justify-center items-start overflow-hidden w-full">
+
+
+              <main class="w-full lg:w-3/4 lg:pr-5">
+               
+                <div class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
     
         <!-- Start Column -->
         <div>
@@ -157,9 +165,9 @@ let allBlogPosts = data?.getAllBlogPost;
                         <label on:click={() => blogSelector(item?.id)} class="cursor-pointer">
                             <div class="flex-shrink-0 m-auto">
                                 <img 
-                                class="w-full h-56 rounded-t-xl" 
+                                class="w-full object-cover h-56 rounded-t-xl" 
                                 src={getImageURL(item?.collectionId, item?.id, item?.cover)}
-                                alt="User avatar" loading="lazy"/>
+                                alt="Wallpaper" loading="lazy"/>
                             </div>
 
                             <div class="pl-4 pt-3 w-11/12">
@@ -209,7 +217,64 @@ let allBlogPosts = data?.getAllBlogPost;
 
 
     
+  </main>
+              <aside class="hidden lg:block relative fixed w-1/4 ml-4">        
+              
+                {#if data?.user?.tier !== 'Pro' || data?.user?.freeTrial}
+                <div on:click={() => goto('/pricing')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Pro Subscription 🔥
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Upgrade now for unlimited access to all data and tools
+                        </span>
+                    </div>
+                </div>
+                {/if}
+
+                <div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Top Analyst 📊
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Wall Street analyst ratings
+                        </span>
+                    </div>
+                </div>
+
+                <div on:click={() => goto('/analysts/top-stocks')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
+                    <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+                        <div class="w-full flex justify-between items-center p-3 mt-3">
+                        <h2 class="text-start text-xl font-semibold text-white ml-3">
+                        Top Stocks Picks ⭐
+                        </h2>
+                        <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
+                        </div>
+                        <span class="text-white p-3 ml-3 mr-3">
+                            Get the latest top Wall Street analyst ratings.
+                        </span>
+                    </div>
+                </div>
+
+              </aside>
+
+        </div>
+      </div>
+  
+    
+    </div>
+        
+        
+    
+  </section>
   
-</section>
 
   

src/routes/blog/article/[slug]/+page.svelte

@@ -22,7 +22,6 @@ const article = data?.getArticle;
     <!-- Other meta tags -->
     <meta property="og:title" content="{article?.title}"/>
     <meta property="og:description" content="{article?.abstract}"/>
-    <meta property="og:image" content="{getImageURL(article?.collectionId, article?.id, article?.cover)}"/>
     <meta property="og:type" content="article"/>
     <!-- Add more Open Graph meta tags as needed -->
 
@@ -30,14 +29,13 @@ const article = data?.getArticle;
     <meta name="twitter:card" content="summary_large_image"/>
     <meta name="twitter:title" content="{article?.title}"/>
     <meta name="twitter:description" content="{article?.abstract}"/>
-    <meta name="twitter:image" content="{getImageURL(article?.collectionId, article?.id, article?.cover)}"/>
     <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
 
             
 <section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
         
-    <div class="text-sm sm:text-[1rem] breadcrumbs ml-4 sm:ml-0">
+    <div class="text-sm sm:text-[1rem] breadcrumbs ">
         <ul>
           <li><a href="/" class="text-gray-300">Home</a></li> 
           <li><a href="/blog" class="text-gray-300">All Blog Post</a></li> 
@@ -46,7 +44,7 @@ const article = data?.getArticle;
     </div>
 
 
-        <div class="mt-3 w-full max-w-4xl h-72 flex flex-col bg-cover bg-center bg-no-repeat" 
+        <div class="mt-3 w-full max-w-4xl h-72 flex flex-col bg-cover bg-center bg-no-repeat rounded-lg" 
           style="background-image: url('{article?.cover ? getImageURL(article?.collectionId, article?.id, article?.cover) : ''}');" />
     
             <main class="grow m-auto">