From 10a0d296037d62c31d91a9807e92a39b60ea9b8c Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 7 Aug 2024 10:23:01 +0200
Subject: [PATCH] remove lazy load

---
 src/lib/components/AnalystEstimate.svelte     |  2 +-
 src/lib/components/BorrowedShare.svelte       | 13 +++++--------
 src/lib/components/DarkPool.svelte            | 11 ++++-------
 src/lib/components/Enterprise.svelte          |  9 +++------
 src/lib/components/FailToDeliver.svelte       | 14 +++++---------
 src/lib/components/ImpliedVolatility.svelte   |  4 ++--
 src/lib/components/LayerCake/Bar/Bar.svelte   |  2 +-
 src/lib/components/MarketMaker.svelte         | 15 ++++++---------
 src/lib/components/OptionsNetFlow.svelte      |  3 ---
 src/lib/components/PriceAnalysis.svelte       |  9 +++------
 src/lib/components/RetailVolume.svelte        | 11 ++++-------
 src/lib/components/RevenueSegmentation.svelte |  4 ++--
 src/lib/components/ShareHolders.svelte        |  9 +++------
 src/lib/components/ShareStatistics.svelte     | 13 +++++--------
 src/lib/components/Swap.svelte                |  6 +-----
 src/lib/components/TARating.svelte            |  3 ---
 16 files changed, 45 insertions(+), 83 deletions(-)

diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index f2b2758e..28f3bfe2 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -264,7 +264,7 @@ $: {
                 <div class="flex flex-row items-center justify-between m-auto mt-10">
                     <div class="flex flex-row items-center w-1/2 sm:w-full justify-center">
                         <div class="h-full bg-gray-800 transform -translate-x-1/2 " aria-hidden="true"></div>
-                        <div class="w-3 h-3 bg-[#00BBFF] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
+                        <div class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-gray-900 rounded-full transform -translate-x-1/2" aria-hidden="true"></div>
                         <span class="text-white text-sm sm:text-md sm:font-medium inline-block">
                             Analyst Forecast
                         </span>
diff --git a/src/lib/components/BorrowedShare.svelte b/src/lib/components/BorrowedShare.svelte
index f1aef4e5..db731b64 100644
--- a/src/lib/components/BorrowedShare.svelte
+++ b/src/lib/components/BorrowedShare.svelte
@@ -8,7 +8,6 @@
   import { LineChart } from 'echarts/charts'
   import { GridComponent } from 'echarts/components'
   import { CanvasRenderer } from 'echarts/renderers'
-  import Lazy from 'svelte-lazy';
   
   export let data;
   
@@ -160,10 +159,10 @@ function findLowestAndHighestFee(data, lastDateStr) {
         {
             data: feeList,
             type: 'line',
-            areaStyle: {opacity: 0.3},
+            areaStyle: {opacity: 1},
             yAxisIndex: 1,
             itemStyle: {
-                color: '#FF9E21' // Change bar color to white
+                color: '#22C55E' // Change bar color to white
             },
             showSymbol: false
         },
@@ -259,11 +258,9 @@ function findLowestAndHighestFee(data, lastDateStr) {
         <div class="pb-2 rounded-lg bg-[#09090B]">
                 
           
-            <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                <div class="app w-full h-[300px] mt-5">
-                    <Chart {init} options={optionsData} class="chart" />
-                </div>
-            </Lazy>
+          <div class="app w-full h-[300px] mt-5">
+              <Chart {init} options={optionsData} class="chart" />
+          </div>
         
         </div>
   
diff --git a/src/lib/components/DarkPool.svelte b/src/lib/components/DarkPool.svelte
index 1128366d..52f20447 100644
--- a/src/lib/components/DarkPool.svelte
+++ b/src/lib/components/DarkPool.svelte
@@ -3,7 +3,6 @@
   import InfoModal from '$lib/components/InfoModal.svelte';
   import { Chart } from 'svelte-echarts'
   import { abbreviateNumber, formatDateRange } from "$lib/utils";
-  import Lazy from 'svelte-lazy';
   import { init, use } from 'echarts/core'
   import { LineChart } from 'echarts/charts'
   import { GridComponent } from 'echarts/components'
@@ -248,11 +247,9 @@ $: {
         <div class="pb-2 rounded-lg bg-[#09090B]">
                 
           
-            <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                <div class="app w-full h-[300px] mt-5">
-                    <Chart {init} options={optionsData} class="chart" />
-                </div>
-            </Lazy>
+          <div class="app w-full h-[300px] mt-5">
+              <Chart {init} options={optionsData} class="chart" />
+          </div>
         
         </div>
 
@@ -288,7 +285,7 @@ $: {
                       <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                           <span>Date</span>
                       </td>
-                      <td class="px-[5px] py-1.5 text-sm sm:text[1rem] text-right font-medium xs:px-2.5 xs:py-2">
+                      <td class="px-[5px] py-1.5 text-sm sm:text-[1rem] text-right font-medium xs:px-2.5 xs:py-2">
                         { formatDateRange(rawData?.slice(-1)?.at(0)?.date)}
                       </td>
                   </tr>
diff --git a/src/lib/components/Enterprise.svelte b/src/lib/components/Enterprise.svelte
index 881c97e1..5c28f31f 100644
--- a/src/lib/components/Enterprise.svelte
+++ b/src/lib/components/Enterprise.svelte
@@ -3,7 +3,6 @@
     import { enterpriseComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts';
-    import Lazy from 'svelte-lazy';
     import { init, use } from 'echarts/core'
     import { BarChart } from 'echarts/charts'
     import { GridComponent } from 'echarts/components'
@@ -207,11 +206,9 @@ $: {
                     Full report
                 </a>
 
-                <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                    <div class="app w-full h-[300px] mt-5">
-                        <Chart {init} options={optionsData} class="chart" />
-                    </div>
-                </Lazy>
+                <div class="app w-full h-[300px] mt-5">
+                    <Chart {init} options={optionsData} class="chart" />
+                </div>
                 
                 <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">
diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index aec0daec..c835d113 100644
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@@ -4,8 +4,6 @@
   import { Chart } from 'svelte-echarts'
   import { abbreviateNumber, formatDateRange } from "$lib/utils";
 
-  import Lazy from 'svelte-lazy';
-
   import { init, use } from 'echarts/core'
   import { LineChart } from 'echarts/charts'
   import { GridComponent } from 'echarts/components'
@@ -156,10 +154,10 @@ function findLowestAndHighestPrice(data, lastDateStr) {
         {
             data: failToDeliverList,
             type: 'line',
-            areaStyle: {opacity: 0.3},
+            areaStyle: {opacity: 1},
             yAxisIndex: 1,
             itemStyle: {
-                color: '#FF9E21' // Change bar color to white
+                color: '#E11D48' // Change bar color to white
             },
             showSymbol: false
         },
@@ -267,11 +265,9 @@ function findLowestAndHighestPrice(data, lastDateStr) {
         <div class="pb-2 rounded-lg bg-[#09090B]">
                 
           
-            <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                <div class="app w-full h-[300px] mt-5">
-                    <Chart {init} options={optionsData} class="chart" />
-                </div>
-            </Lazy>
+          <div class="app w-full h-[300px] mt-5">
+              <Chart {init} options={optionsData} class="chart" />
+          </div>
         
         </div>
   
diff --git a/src/lib/components/ImpliedVolatility.svelte b/src/lib/components/ImpliedVolatility.svelte
index e9c27f01..e376aa2d 100644
--- a/src/lib/components/ImpliedVolatility.svelte
+++ b/src/lib/components/ImpliedVolatility.svelte
@@ -170,7 +170,7 @@ function changeStatement(event)
             stack: 'ImpliedVolatility',
             yAxisIndex: 1,
             itemStyle: {
-                color: '#00BBFF'
+                color: '#3B82F6'
             },
             showSymbol: false,
            
@@ -309,7 +309,7 @@ function changeStatement(event)
 
             <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-[#00BBFF] 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-[#3B82F6] 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">
                     Realized Volatility
                 </span>
diff --git a/src/lib/components/LayerCake/Bar/Bar.svelte b/src/lib/components/LayerCake/Bar/Bar.svelte
index 8f2114a7..730e7c9b 100644
--- a/src/lib/components/LayerCake/Bar/Bar.svelte
+++ b/src/lib/components/LayerCake/Bar/Bar.svelte
@@ -7,7 +7,7 @@
   
     const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
   
-    /** @type {String} [fill='#00bbff'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
+    /** @type {String} [fill='#3B82F6'] - The shape's fill color. This is technically optional because it comes with a default value but you'll likely want to replace it with your own color. */
     export let fill = '#fff';
   </script>
   
diff --git a/src/lib/components/MarketMaker.svelte b/src/lib/components/MarketMaker.svelte
index 4938c26c..be1a9c79 100644
--- a/src/lib/components/MarketMaker.svelte
+++ b/src/lib/components/MarketMaker.svelte
@@ -8,7 +8,6 @@
   import { LineChart } from 'echarts/charts'
   import { GridComponent } from 'echarts/components'
   import { CanvasRenderer } from 'echarts/renderers'
-  import Lazy from 'svelte-lazy';
 
   use([LineChart, GridComponent, CanvasRenderer])
 
@@ -138,10 +137,10 @@ function getPlotOptions() {
       {
           data: shareQuantityList,
           type: 'line',
-          areaStyle: {opacity: 0.3},
+          areaStyle: {opacity: 1},
           yAxisIndex: 1,
           itemStyle: {
-              color: '#00BBFF' // Change bar color to white
+              color: '#3B82F6' // Change bar color to white
           },
           showSymbol: false
       },
@@ -255,11 +254,9 @@ else {
       <div class="pb-2 rounded-lg bg-[#09090B]">
               
         
-          <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-              <div class="app w-full h-[300px] mt-5">
-                  <Chart {init} options={optionsData} class="chart" />
-              </div>
-          </Lazy>
+          <div class="app w-full h-[300px] mt-5">
+              <Chart {init} options={optionsData} class="chart" />
+          </div>
       
       </div>
 
@@ -273,7 +270,7 @@ else {
       </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-[#00BBFF] 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-[#3B82F6] 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">
                   Share Quantity
               </span>
diff --git a/src/lib/components/OptionsNetFlow.svelte b/src/lib/components/OptionsNetFlow.svelte
index f8b398c8..56269f9f 100644
--- a/src/lib/components/OptionsNetFlow.svelte
+++ b/src/lib/components/OptionsNetFlow.svelte
@@ -2,7 +2,6 @@
     import { optionsNetFlowComponent, stockTicker, assetType, etfTicker, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
-    import Lazy from 'svelte-lazy';
     import { init, use } from 'echarts/core'
     import { LineChart } from 'echarts/charts'
     import { GridComponent } from 'echarts/components'
@@ -241,11 +240,9 @@
         <div class="pb-2 rounded-lg bg-[#09090B]">
                 
           
-            <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
                     <Chart {init} options={optionsData} class="chart" />
                 </div>
-            </Lazy>
         
         </div>
   
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index 09b2d0e9..90204a4f 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -3,7 +3,6 @@
   import { priceAnalysisComponent, displayCompanyName, stockTicker, etfTicker, cryptoTicker, assetType, screenWidth, getCache, setCache} from '$lib/store';
   import InfoModal from '$lib/components/InfoModal.svelte';
   import { Chart } from 'svelte-echarts'
-  import Lazy from 'svelte-lazy';
 
 
   import { init, use } from 'echarts/core'
@@ -294,11 +293,9 @@ $: {
 
             
 
-            <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                <div class="app w-full h-[300px] ">
-                    <Chart {init} options={optionsData} class="chart" />
-                </div>
-            </Lazy>
+              <div class="app w-full h-[300px]">
+                  <Chart {init} options={optionsData} class="chart" />
+              </div>
 
             <div class="text-white text-[1rem] mt-4 sm:mt-7 ml-1">
                 Over the next 12 months, the model predicts a
diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte
index 3c2e1b9c..50ca2c76 100644
--- a/src/lib/components/RetailVolume.svelte
+++ b/src/lib/components/RetailVolume.svelte
@@ -4,7 +4,6 @@
   import InfoModal from '$lib/components/InfoModal.svelte';
   import { Chart } from 'svelte-echarts'
   import { abbreviateNumber, formatDateRange } from "$lib/utils";
-  import Lazy from 'svelte-lazy';
   import { init, use } from 'echarts/core'
   import { LineChart, BarChart } from 'echarts/charts'
   import { GridComponent } from 'echarts/components'
@@ -291,11 +290,9 @@ $: {
             <div class="pb-8 sm:pb-2 rounded-lg bg-[#09090B]">
                     
               
-                <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                    <div class="app w-full h-[300px] mt-5">
-                        <Chart {init} options={optionsData} class="chart" />
-                    </div>
-                </Lazy>
+                <div class="app w-full h-[300px] mt-5">
+                    <Chart {init} options={optionsData} class="chart" />
+                </div>
             
             </div>
 
@@ -316,7 +313,7 @@ $: {
                           <td class="px-[5px] py-1.5 xs:px-2.5 xs:py-2">
                               <span>Date</span>
                           </td>
-                          <td class="px-[5px] text-sm py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
+                          <td class="px-[5px] text-sm sm:text-[1rem] py-1.5 text-right font-medium xs:px-2.5 xs:py-2">
                             {formatDateRange(rawData?.lastDate)}
                           </td>
                       </tr>
diff --git a/src/lib/components/RevenueSegmentation.svelte b/src/lib/components/RevenueSegmentation.svelte
index 0bb2f7b1..83e300b3 100644
--- a/src/lib/components/RevenueSegmentation.svelte
+++ b/src/lib/components/RevenueSegmentation.svelte
@@ -240,8 +240,8 @@ $: {
                                             >
                                             <Svg>
                                                 <Sankey
-                                                colorNodes={d => '#00bbff'}
-                                                colorLinks={d => '#00bbff35'}
+                                                colorNodes={d => '#3B82F6'}
+                                                colorLinks={d => '#3B82F635'}
                                                 />
                                             </Svg>
                                             </LayerCake>
diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte
index 6c933ef4..c236644f 100644
--- a/src/lib/components/ShareHolders.svelte
+++ b/src/lib/components/ShareHolders.svelte
@@ -6,7 +6,6 @@ import { formatString } from '$lib/utils';
 import { goto } from '$app/navigation';
 import { abbreviateNumber } from '$lib/utils';
 import InfoModal from '$lib/components/InfoModal.svelte';
-import Lazy from 'svelte-lazy';
 
 import { init, use } from 'echarts/core'
 import { PieChart } from 'echarts/charts'
@@ -187,11 +186,9 @@ let charNumber = 20;
               
 
                     <div class="flex flex-row items-center sm:-mt-5">
-                        <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                            <div class="app w-56">
-                                <Chart {init} options={optionsPieChart} class="chart w-full" />
-                            </div>
-                        </Lazy>
+                        <div class="app w-56">
+                            <Chart {init} options={optionsPieChart} class="chart w-full" />
+                        </div>
                         
                         <div class="flex flex-col items-center  sm:pt-0 m-auto">
 
diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte
index 2d2530f7..87718157 100644
--- a/src/lib/components/ShareStatistics.svelte
+++ b/src/lib/components/ShareStatistics.svelte
@@ -5,7 +5,6 @@ import InfoModal from '$lib/components/InfoModal.svelte';
 import { Chart } from 'svelte-echarts'
 import { abbreviateNumber } from "$lib/utils";
 
-import Lazy from 'svelte-lazy';
 
 import { init, use } from 'echarts/core'
 
@@ -91,14 +90,14 @@ function getPlotOptions() {
             data: floatShares,
             type: 'bar',
             itemStyle: {
-                color: '#5470C6' // Change bar color to white
+                color: '#3B82F6' // Change bar color to white
             }
         },
         {
             data: outstandingShares,
             type: 'bar',
             itemStyle: {
-                color: '#C12F23' // Change bar color to white
+                color: '#E11D48'
             }
         },
     ]
@@ -188,11 +187,9 @@ $: {
                     </div>
                 
                     
-                    <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
-                        <div class="app w-full h-[300px] mt-6">
-                            <Chart {init} options={optionsData} class="chart" />
-                        </div>
-                    </Lazy>
+                    <div class="app w-full h-[300px] mt-6">
+                        <Chart {init} options={optionsData} class="chart" />
+                    </div>
                     
                     
                     <div class="flex flex-row items-center justify-between mx-auto mt-8 w-full sm:w-11/12">
diff --git a/src/lib/components/Swap.svelte b/src/lib/components/Swap.svelte
index e05156fb..1d7a749b 100644
--- a/src/lib/components/Swap.svelte
+++ b/src/lib/components/Swap.svelte
@@ -9,9 +9,7 @@
     import { init, use } from 'echarts/core'
     import { ScatterChart } from 'echarts/charts'
    import { GridComponent } from 'echarts/components'
-   import { CanvasRenderer } from 'echarts/renderers'
-
-    import Lazy from 'svelte-lazy';
+   import { CanvasRenderer } from 'echarts/renderers';
     export let data;
 
     use([ScatterChart, GridComponent, CanvasRenderer])
@@ -277,11 +275,9 @@
               </div>
 
           
-            <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <div class="app w-full h-[300px] mt-5">
                     <Chart {init} options={optionsData} class="chart" />
                 </div>
-            </Lazy>
         
         </div>
   
diff --git a/src/lib/components/TARating.svelte b/src/lib/components/TARating.svelte
index 8719ff99..941b74ab 100644
--- a/src/lib/components/TARating.svelte
+++ b/src/lib/components/TARating.svelte
@@ -2,7 +2,6 @@
   import { taRatingComponent, stockTicker, etfTicker, cryptoTicker, assetType, getCache, setCache} from '$lib/store';
   import SignalBar from '$lib/components/SignalBar.svelte'
   import InfoModal from '$lib/components/InfoModal.svelte';
-  import Lazy from 'svelte-lazy';
 
   export let data;
 
@@ -151,7 +150,6 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
 
             <!--Start Momentum Indicators-->
             <div class="w-full overflow-hidden">
-              <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                 <table class="table table-sm table-compact w-full mb-5 mt-5">
                   <!-- head -->
                   <thead>
@@ -188,7 +186,6 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
                   <svg class="w-10 h-10 transform {showFullStats ? 'rotate-180' : ''} " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2A323C" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 13.5L7.5 11l1.42-1.41L12 12.67l3.08-3.08L16.5 11L12 15.5z"/></svg>
                 </label>
 
-              </Lazy>
             </div>
           <!--End Momentum Indicators-->