From 25090ff022d87594aeffa82661a463e18f497fa4 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 20 Aug 2024 18:22:33 +0200
Subject: [PATCH] fix return component

---
 src/lib/components/ReturnCard.svelte          | 343 ++++++------------
 .../stocks/[tickerID]/stats/+page.svelte      |   4 +-
 2 files changed, 122 insertions(+), 225 deletions(-)

diff --git a/src/lib/components/ReturnCard.svelte b/src/lib/components/ReturnCard.svelte
index b2af33ca..541e9277 100644
--- a/src/lib/components/ReturnCard.svelte
+++ b/src/lib/components/ReturnCard.svelte
@@ -1,219 +1,144 @@
 <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';
-    
-    export let quantData;
+use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
     
+export let quantData;
+
+
+let firstElementKey;
+
+let monthlyReturnsData;
+let benchmarkMonthlyReturnsData;
 
     
-    const months = [
-      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
-    ];
     
-    let firstElementKey;
+const plotAnnualReturn = () => {
 
-    let monthlyReturnsData;
-    let benchmarkMonthlyReturnsData;
-    
-    
-    
- 
-    
-    const plotAnnualReturn = () => {
-        
-        const annualReturnList = [];
-        const annualReturnListBenchmark = [];
+const annualReturnList = [];
+const annualReturnListBenchmark = [];
 
-        // Find the maximum year in monthlyReturnsData
-        // Find the maximum year in monthlyReturnsData
-        let maxYear = Math?.max(...Object?.keys(monthlyReturnsData)?.map(year => parseInt(year)));
+// Find the maximum year in monthlyReturnsData
+// Find the maximum year in monthlyReturnsData
+let maxYear = Math?.max(...Object?.keys(monthlyReturnsData)?.map(year => parseInt(year)));
 
-        // Iterate over the last 4 years
-        for (let year = maxYear; year > maxYear - 4; year--) {
-            if (monthlyReturnsData.hasOwnProperty(year.toString())) {
-                const values = monthlyReturnsData[year.toString()];
-                annualReturnList.push(values[values.length - 1]);
-            }
-        }
+// Iterate over the last 4 years
+for (let year = maxYear; year > maxYear - 4; year--) {
+    if (monthlyReturnsData.hasOwnProperty(year.toString())) {
+        const values = monthlyReturnsData[year.toString()];
+        annualReturnList.push(values[values.length - 1]);
+    }
+}
 
-        // Find the maximum year in benchmarkMonthlyReturnsData
-        maxYear = Math?.max(...Object?.keys(benchmarkMonthlyReturnsData)?.map(year => parseInt(year)));
+// Find the maximum year in benchmarkMonthlyReturnsData
+maxYear = Math?.max(...Object?.keys(benchmarkMonthlyReturnsData)?.map(year => parseInt(year)));
 
-        // Iterate over the last 4 years
-        for (let year = maxYear; year > maxYear - 4; year--) {
-            if (benchmarkMonthlyReturnsData.hasOwnProperty(year.toString())) {
-                const values = benchmarkMonthlyReturnsData[year.toString()];
-                annualReturnListBenchmark.push(values[values.length - 1]);
-            }
-        }
+// Iterate over the last 4 years
+for (let year = maxYear; year > maxYear - 4; year--) {
+    if (benchmarkMonthlyReturnsData.hasOwnProperty(year.toString())) {
+        const values = benchmarkMonthlyReturnsData[year.toString()];
+        annualReturnListBenchmark.push(values[values.length - 1]);
+    }
+}
 
 
 
 
        
-            const options = {
-                grid: {
-                    left: "2%",
-                    right: "2%",
-                    bottom: '0%',
-                    height: "90%",
-                    containLabel: true,
-                },
-                xAxis: {
-                    data: ['2020', '2021', '2022', '2023','2024'],
-                    type: 'category',
-                    axisTick: {
-                        alignWithLabel: true,
-                    },
-                },
-                yAxis: [
-                    {
-                        type: 'value',
-                        splitLine: {
-                            show: false, // Disable y-axis grid lines
-                        },
-                    },
-                    {
-                        type: 'value',
-                        axisLabel: {
-                            formatter: '{value} %', // Display value with a percent sign
-                        },
-                        splitLine: {
-                            show: false, // Disable y-axis grid lines
-                        },
-                    },
-                ],
-                series: [                    
-                    {
-                        name: $assetType === 'etf' ? $etfTicker : $assetType === 'crypto' ? $cryptoTicker : $stockTicker,
-                        data: annualReturnList,
-                        type: 'bar',
-                        barWidth: '30%',
-                        smooth: true,
-                        itemStyle: {
-                            color: '#398EC2',
-                        },
-                       
-                    },
-                    {
-                        name: 'S&P500',
-                        data: annualReturnListBenchmark,
-                        type: 'bar',
-                        barWidth: '30%',
-                        smooth: true,
-                        itemStyle: {
-                            color: '#FEDD78',
-                        },
-                      
-                       
-                    },
-                ],
-               
-            };
-    
-    
-        return options;
-    
-    }
-    
-    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 = {
+    silent: true,
+    animation: false,
+    tooltip: {
+        trigger: 'axis',
+        hideDelay: 100, // Set the delay in milliseconds
+    },
+    grid: {
+        left: "0%",
+        right: "0%",
+        bottom: '0%',
+        height: "90%",
+        containLabel: true,
+    },
+    xAxis: {
+        data: ['2020', '2021', '2022', '2023','2024'],
+        type: 'category',
+        axisTick: {
+            alignWithLabel: true,
+        },
+        axisLabel: {
+            color: '#fff',
         }
-
-        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)
-        
+    },
+    yAxis: [
         {
-        
-            displayReturn = event.target.value;
-        
+            type: 'value',
+            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',
+            axisLabel: {
+                formatter: '{value} %', // Display value with a percent sign
+            },
+            splitLine: {
+                show: false, // Disable y-axis grid lines
+            },
+        },
+    ],
+    series: [                    
+        {
+            name: $assetType === 'etf' ? $etfTicker : $assetType === 'crypto' ? $cryptoTicker : $stockTicker,
+            data: annualReturnList,
+            type: 'bar',
+            barWidth: '30%',
+            smooth: true,
+            itemStyle: {
+                color: '#398EC2',
+            },
+            
+        },
+        {
+            name: 'S&P500',
+            data: annualReturnListBenchmark,
+            type: 'bar',
+            barWidth: '30%',
+            smooth: true,
+            itemStyle: {
+                color: '#FEDD78',
+            },
+            
+            
+        },
+    ],
+    
+};
+
+
+return options;
+
+}
+    
+
+    let optionsAnnualReturn;
+    
     
     
     $: {
@@ -232,14 +157,7 @@ use([BarChart, GridComponent, CanvasRenderer])
             }
             
     
-            if (displayReturn === 'annualReturn')
-            {
-                optionsAnnualReturn = plotAnnualReturn()
-            }
-            else if(displayReturn === 'monthlyDistributionReturn')
-            {
-                optionsMonthlyDistributionReturn = plotMonthlyDistributionReturn();
-            }
+            optionsAnnualReturn = plotAnnualReturn()
         }
     }
     
@@ -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>
@@ -298,17 +205,7 @@ use([BarChart, GridComponent, CanvasRenderer])
                     <Chart {init} options={optionsAnnualReturn} class="chart" />
                 </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>
diff --git a/src/routes/stocks/[tickerID]/stats/+page.svelte b/src/routes/stocks/[tickerID]/stats/+page.svelte
index 5d11402f..b21b46c1 100644
--- a/src/routes/stocks/[tickerID]/stats/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/+page.svelte
@@ -655,10 +655,10 @@ updateYearRange()
                       
 
                       <tr class="text-white odd:bg-[#27272A] font-semibold">
-                      <td class="text-start text-whitetext-sm sm:text-[1rem] whitespace-nowrap">
+                      <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">