From 4303e0c6eb2e2ff035ee7f5b924f5fb912f44602 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 8 Aug 2024 23:38:56 +0200
Subject: [PATCH] ui fix

---
 .../stocks/[tickerID]/dividends/+page.svelte  | 128 ++++++++----------
 .../stocks/[tickerID]/options/+page.svelte    |  24 ++--
 2 files changed, 72 insertions(+), 80 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 5e08090b..872626df 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
 import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store';
 import { onMount } from 'svelte';
-import Lazy from 'svelte-lazy';
 
 import { Chart } from 'svelte-echarts'
 import { init, use } from 'echarts/core'
 import { LineChart, BarChart } from 'echarts/charts'
-import { GridComponent } from 'echarts/components'
+import { GridComponent, TooltipComponent } from 'echarts/components'
 import { CanvasRenderer } from 'echarts/renderers'
-use([LineChart, BarChart, GridComponent, CanvasRenderer])
-
+use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
 
 
 export let data;
@@ -31,24 +29,41 @@ let dividendList = [];
 let growthList = [];
 let dateList = [];
 
-let mode = false;
-
-
-function toggleMode() {
-    mode = !mode;
-}
-            
     
 
 async function plotDividend(dividendList, growthList, dateList) {  
-    const options = {
+  const options = {
+     tooltip: {
+        trigger: 'axis',
+        hideDelay: 100, // Set the delay in milliseconds
+    },
+    animation: false,
+    grid: {
+        left: '2%',
+        right: '2%',
+        bottom: '2%',
+        top: '5%',
+        containLabel: true
+    },
       xAxis: {
         data: dateList,
         type: 'category',
+        axisLabel: {
+          color: '#fff',
+        },
+        splitLine: {
+            show: false, // Disable x-axis grid lines
+        },
       },
       yAxis: [
         {
           type: 'value',
+        axisLabel: {
+          color: '#fff',
+          },
+          splitLine: {
+            show: false, // Disable x-axis grid lines
+        },
         },
         {
           type: 'value',
@@ -71,7 +86,10 @@ async function plotDividend(dividendList, growthList, dateList) {
           name: 'Dividend per Share',
           data: dividendList,
           type: 'line',
-          smooth: true,
+          itemStyle: {
+                color: '#fff' // Change bar color to white
+            },
+          showSymbol: false
         },
         {
           name: 'Growth Rate (%)',
@@ -83,15 +101,11 @@ async function plotDividend(dividendList, growthList, dateList) {
           itemStyle: {
             color: (params) => {
               // Set color based on positive or negative value
-              return params.data >= 0 ? '#076E0B' : '#F80102';
+              return params.data >= 0 ? '#22C55E' : '#E11D48';
             },
           },
         },
       ],
-      tooltip: {
-        trigger: 'axis',
-        
-      },
     };
     
     
@@ -292,40 +306,18 @@ onMount(async() => {
                               Dividends History
                             </h3>
         
-        
-                            <label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto mt-5 sm:mt-0">
-                              <input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer">
-                              <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
-                              {#if mode}
-                              <span class="ml-2 text-sm font-medium text-gray-300">
-                                  Cool Mode
-                              </span>
-                              {:else}
-                              <span class="ml-2 text-sm font-medium text-gray-500">
-                                  Boring Mode
-                              </span>
-                              {/if}
-                            </label>
+      
         
                           </div>
       
-                        {#if stockDividends?.length !== 0}
+                        {#if stockDividends?.length !== 0 && optionsDividend}
       
+                        <div class="app w-full h-[400px] sm:h-[500px] mb-14">
+                          <Chart {init} options={optionsDividend} class="chart" />
+                        </div>
       
-                          {#if mode}
-                          <Lazy height={300} fadeOption={{delay: 0, duration: 0}} keep={true}>
-                            <div class="app w-full ">
-                              <Chart {init} options={optionsDividend} class="chart" />
-                            </div>
-                          </Lazy>
-      
-                            <span class="text-gray-200 text-sm italic">
-                              * Dividend amounts are adjusted for stock splits when applicable.
-                            </span>
-                          
-                          {:else}
-                          
-                            <div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
+                        
+                            <div class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
                               <table class="table table-sm table-compact flex justify-start items-center w-full m-auto">
                                 <thead>
                                   <tr class="bg-[#09090B] border-b-slate-600 shadow-md">
@@ -335,7 +327,7 @@ onMount(async() => {
                                     <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
                                       Cash Amount
                                     </th>
-                                    <th class="text-end bg-[#09090B] border-b border-[#09090B] hidden sm:table-cell text-white text-sm font-semibold">
+                                    <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
                                       Record Date
                                     </th>
                                     <th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold">
@@ -346,16 +338,16 @@ onMount(async() => {
                                 <tbody class="shadow-md">
                                   {#each stockDividends as item}
                                   <tr class="text-gray-200 odd:bg-[#27272A]">
-                                    <td class="text-start text-xs sm:text-sm text-white font-medium border-b border-[#09090B]">
+                                    <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]">
                                       {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                     </td>
-                                    <td class="text-end text-xs sm:text-sm text-white border-b border-[#09090B]">
+                                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                       ${item?.adjDividend?.toFixed(2)}
                                     </td>
-                                    <td class="text-end text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#09090B]">
+                                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                       {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                     </td>
-                                    <td class="text-end text-xs sm:text-sm text-white border-b border-[#09090B]">
+                                    <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]">
                                       {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                     </td>
                                   </tr>
@@ -366,7 +358,6 @@ onMount(async() => {
                             <span class="text-gray-200 text-sm italic">
                               * Dividend amounts are adjusted for stock splits when applicable.
                             </span>
-                            {/if}
       
                         {:else}
                         <h1 class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10">
@@ -391,19 +382,20 @@ onMount(async() => {
     
         
 <style>
-    .app {
-        height: 700px;
-        max-width: 1500px;
-    }
-    
-    @media (max-width: 560px) {
-        .app {
-            max-width: 520px;
-            height: 500px;
-        }
-    }
-
-    .chart {
-        width: 100%;
-    }
+  .app {
+  height: 500px;
+  max-width: 100%; /* Ensure chart width doesn't exceed the container */
+  
+  }
+  
+  @media (max-width: 640px) {
+  .app {
+    height: 300px;
+  }
+  }
+  
+  .chart {
+  width: 100%;
+  }
+  
 </style>
\ No newline at end of file
diff --git a/src/routes/stocks/[tickerID]/options/+page.svelte b/src/routes/stocks/[tickerID]/options/+page.svelte
index 1bf1656b..51a8c071 100644
--- a/src/routes/stocks/[tickerID]/options/+page.svelte
+++ b/src/routes/stocks/[tickerID]/options/+page.svelte
@@ -8,9 +8,9 @@
   import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
   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])
+  use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
   
   
     export let data;
@@ -553,10 +553,10 @@
                                             <td class="text-slate-200 font-semibold text-sm text-end">Strike</td>
                                             <td class="text-slate-200 font-semibold text-sm text-end">C/P</td>
                                             <td class="text-slate-200 font-semibold text-sm text-start">Sent.</td>
-                                            <td class="text-slate-200 font-semibold text-sm table-cell sm:hidden text-end">Spot</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-end">Spot</td>
                                             <td class="text-slate-200 font-semibold text-sm text-end">Price</td>
                                             <td class="text-slate-200 font-semibold text-sm text-end">Prem.</td>
-                                            <td class="text-slate-200 font-semibold text-sm table-cell sm:hidden text-start">Type</td>
+                                            <td class="text-slate-200 font-semibold text-sm text-start">Type</td>
                                             <td class="text-slate-200 font-semibold text-sm text-end">Vol.</td>
                                             <td class="text-slate-200 font-semibold text-sm text-end">OI</td>
                                           </tr>
@@ -566,19 +566,19 @@
                                           <!-- row -->
                                           <tr class="odd:bg-[#27272A] border-b-[#09090B] {index+1 === optionList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                             
-                                            <td class="text-white text-xs sm:text-sm text-start whitespace-nowrap">
+                                            <td class="text-white text-sm sm:text-[1rem] text-start whitespace-nowrap">
                                               {formatTime(item?.time)}
                                             </td>
     
-                                            <td class="text-white text-xs sm:text-sm text-start">
+                                            <td class="text-white text-sm sm:text-[1rem] text-start">
                                               {formatDate(item?.date)}
                                             </td>
     
-                                            <td class="text-white text-sm text-end">
+                                            <td class="text-white text-sm sm:text-[1rem] text-end">
                                               {item?.dte < 0 ? 'expired' : item?.dte +'d'}
                                             </td>
                                             
-                                            <td class="text-sm text-end text-white">
+                                            <td class="text-sm sm:text-[1rem] text-end text-white">
                                               {item?.strike_price}
                                             </td>
     
@@ -590,19 +590,19 @@
                                               {item?.sentiment}
                                             </td>
     
-                                            <td class="text-sm text-end text-white table-cell sm:hidden">
+                                            <td class="text-sm sm:text-[1rem] text-end text-white">
                                               {item?.underlying_price}
                                             </td>
                                           
-                                          <td class="text-sm text-end text-white">
+                                          <td class="text-sm sm:text-[1rem] text-end text-white">
                                             {item?.price}
                                           </td>
                                           
-                                          <td class="text-sm text-end font-medium {item?.put_call === 'Puts' ? 'text-[#CB281C]' : 'text-[#0FB307]'} ">
+                                          <td class="text-sm sm:text-[1rem] text-end font-medium {item?.put_call === 'Puts' ? 'text-[#CB281C]' : 'text-[#0FB307]'} ">
                                             {abbreviateNumber(item?.cost_basis)}
                                           </td>
                       
-                                          <td class="text-sm text-start table-cell sm:hidden {item?.type === 'Sweep' ? 'text-[#C6A755]' : 'text-[#976DB7]'}">
+                                          <td class="text-sm sm:text-[1rem] text-start {item?.type === 'Sweep' ? 'text-[#C6A755]' : 'text-[#976DB7]'}">
                                             {item?.type}
                                           </td>