fix return component

src/lib/components/ReturnCard.svelte

@@ -1,23 +1,17 @@
 <script lang='ts'>
-
+import {stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
 import { Chart } from 'svelte-echarts'
 import { init, use } from 'echarts/core'
 
 import { BarChart } from 'echarts/charts'
-import { GridComponent } from 'echarts/components'
+import { GridComponent, TooltipComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
-use([BarChart, GridComponent, CanvasRenderer])
 
-    import {stockTicker, etfTicker, cryptoTicker, assetType} from '$lib/store';
+use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
     
 export let quantData;
 
 
-    
-    const months = [
-      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
-    ];
-    
 let firstElementKey;
 
 let monthlyReturnsData;
@@ -25,8 +19,6 @@ use([BarChart, GridComponent, CanvasRenderer])
 
     
     
- 
-    
 const plotAnnualReturn = () => {
 
 const annualReturnList = [];
@@ -60,9 +52,15 @@ use([BarChart, GridComponent, CanvasRenderer])
 
        
 const options = {
+    silent: true,
+    animation: false,
+    tooltip: {
+        trigger: 'axis',
+        hideDelay: 100, // Set the delay in milliseconds
+    },
     grid: {
-                    left: "2%",
+        left: "0%",
-                    right: "2%",
+        right: "0%",
         bottom: '0%',
         height: "90%",
         containLabel: true,
@@ -73,6 +71,9 @@ use([BarChart, GridComponent, CanvasRenderer])
         axisTick: {
             alignWithLabel: true,
         },
+        axisLabel: {
+            color: '#fff',
+        }
     },
     yAxis: [
         {
@@ -80,6 +81,17 @@ use([BarChart, GridComponent, CanvasRenderer])
             splitLine: {
                 show: false, // Disable y-axis grid lines
             },
+            axisLabel: {
+            color: '#fff',
+            formatter: function (value, index) {
+                // Display every second tick
+                if (index % 2 === 0) {
+                    return '%'+value; // Format value in millions
+                } else {
+                    return ''; // Hide this tick
+                }
+            }
+        }
         },
         {
             type: 'value',
@@ -124,95 +136,8 @@ use([BarChart, GridComponent, CanvasRenderer])
 
 }
     
-    const plotMonthlyDistributionReturn = () => {
-        const allReturns = Object?.values(monthlyReturnsData)?.flat();
 
-        let histogramData = [];
-        // Calculate histogram data
-        let binSize = 6;
-        let maxBin = Math.ceil(Math.max(...allReturns) / binSize) * binSize;
-        let minBin = Math.floor(Math.min(...allReturns) / binSize) * binSize;
-
-        for (let i = minBin; i <= maxBin; i += binSize) {
-            let count = allReturns.filter(r => r >= i && r < i + binSize)?.length;
-            histogramData.push([i, count]);
-        }
-
-        const options = {
-            grid: {
-                    left: "0%",
-                    right: "0%",
-                    bottom: '0%',
-                    height: "90%",
-                    containLabel: true,
-                },
-            xAxis: [
-                {
-                type: 'category',
-                name: 'Return (%)', // X-axis label
-                nameLocation: 'center',
-                axisTick: {
-                    alignWithLabel: true,
-                },
-               
-                nameTextStyle: {
-                    color: 'white', // Set label color to white
-                    padding: [30, 0, 0, 0],
-                },
-                }
-                
-            ],
-            yAxis: [
-                    {
-                        type: 'value',
-                        name: 'Frequency', // X-axis label
-                        nameLocation: 'center',
-                        splitLine: {
-                            show: false, // Disable y-axis grid lines
-                        },
-                        nameTextStyle: {
-                            color: 'white', // Set label color to white
-                            padding: [0, 0, 20, 0],
-                        },
-                    },
-                    {
-                        type: 'value',
-                        axisLabel: {
-                            formatter: '{value} %', // Display value with a percent sign
-                        },
-                        splitLine: {
-                            show: false, // Disable y-axis grid lines
-                        },
-                    },
-                ],
-            series: [
-                {
-                name: 'Frequency of Return',
-                type: 'bar',
-                barWidth: '80%',
-                itemStyle: {
-                    color: 'white',
-                },
-                data: histogramData
-                }
-            ],
-            
-            };
-        
-        return options;
-    };
-    
-    let displayReturn = 'annualReturn';
     let optionsAnnualReturn;
-    let optionsMonthlyDistributionReturn;
-    
-    function changeStatement(event)
-        
-        {
-        
-            displayReturn = event.target.value;
-        
-        }
     
     
     
@@ -232,15 +157,8 @@ use([BarChart, GridComponent, CanvasRenderer])
             }
             
     
-            if (displayReturn === 'annualReturn')
-            {
             optionsAnnualReturn = plotAnnualReturn()
         }
-            else if(displayReturn === 'monthlyDistributionReturn')
-            {
-                optionsMonthlyDistributionReturn = plotMonthlyDistributionReturn();
-            }
-        }
     }
     
     
@@ -253,22 +171,11 @@ use([BarChart, GridComponent, CanvasRenderer])
         <div class="w-full m-auto h-full overflow-hidden">
             <main>
 
-            <div class="text-start mr-auto w-full">
+      
-              <select class="w-48 select select-bordered select-sm p-0 pl-5 ml-2 mt-2 bg-[#2A303C]" on:change={changeStatement}>
-                <option disabled>Choose your Return</option>
-                <option value="annualReturn" selected>
-                    Annual Return
-                </option>
-                <option value="monthlyDistributionReturn" >
-                    Distribution of Monthly Returns
-                </option>
-              </select>
-            </div>
 
 
             <div class="rounded-2xl pl-3 sm:pr-0 pt-3 w-full mt-4">
 
-                {#if displayReturn === 'annualReturn'}
                     <h1 class="text-white m-auto font-bold text-lg  text-center">
                         Annual Return (%)
                     </h1>
@@ -299,16 +206,6 @@ use([BarChart, GridComponent, CanvasRenderer])
                 </div>
 
                 
-                {:else if displayReturn === 'monthlyDistributionReturn'}
-
-                    <h1 class="text-white m-auto font-bold text-lg sm:-mb-2 text-center">
-                        Distribution of Monthly Returns
-                    </h1>
-
-                    <div class="app w-full h-[300px] mt-5 mb-16">
-                        <Chart {init} options={optionsMonthlyDistributionReturn} class="chart" />
-                    </div>
-                {/if}
             </div>
     
               </main>

src/routes/stocks/[tickerID]/stats/+page.svelte

@@ -658,7 +658,7 @@ updateYearRange()
                       <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap">
                         Max Consecutive Wins
                       </td>
-                      <td class="text-start text-end text-sm">
+                      <td class="text-start text-end text-sm sm:text-[1rem] whitespace-nowrap">
                         {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Wins"]}
                       </td>
                       <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">