ui fixes

src/lib/components/RetailVolume.svelte

@@ -70,7 +70,7 @@ function getPlotOptions() {
     animation: $screenWidth < 640 ? false: true,
     grid: {
         left: $screenWidth < 640 ? '0%' : '2%',
-        right: $screenWidth < 640 ? '5%' : '2%',
+        right: $screenWidth < 640 ? '0%' : '2%',
         bottom: $screenWidth < 640 ? '0%' : '2%',
         containLabel: true
     },
@@ -90,25 +90,44 @@ function getPlotOptions() {
         }
     },
     yAxis: [
-        {
+    { 
-            type: 'value',
+      name: 'Volume',
-            splitLine: {
+      position: 'left',
+        type: 'value',
+        splitLine: {
             show: false, // Disable x-axis grid lines
-            },
+        },
-            axisLabel: {
+        axisLabel: {
             color: '#6E7079', // Change label color to white
-            formatter: function (value) {
+            formatter: function (value, index) {
-                value = Math.max(value, 0);
+                // Display every second tick
-                return '$'+(value / denominator)?.toFixed(1) + unit; // Format value in millions
+                if (index % 2 === 0) {
-                },
+                    value = Math.max(value, 0);
-            },
+                    return '$' + (value / denominator)?.toFixed(1) + unit; // Format value in millions
+                } else {
+                    return ''; // Hide this tick
+                }
+            }
         },
-        {
+    },
-            type: 'value',
+    {
-            show: false,
+      type: 'value',
-        },
+      splitLine: {
-        
+            show: false, // Disable x-axis grid lines
-        ],
+      },
+      name: 'Sentiment',
+      position: 'right',
+      axisLabel: {
+          formatter: function (value, index) {
+            if (index % 2 === 0) {
+              return value.toFixed(2); // Format the sentiment value
+            } else {
+                  return ''; // Hide this tick
+              }
+          }
+      }
+    }
+    ],
     series: [
         {
             data: tradingList,
@@ -122,7 +141,6 @@ function getPlotOptions() {
             name: 'Sentiment',
             data: sentimentList,
             type: 'bar',
-            smooth: true,
             yAxisIndex: 1,
             itemStyle: {
             color: (params) => {
@@ -130,6 +148,7 @@ function getPlotOptions() {
                 return params.data >= 0 ? '#10DB06' : '#FF2F1F';
             },
             },
+            
         },
     ]
     };
@@ -199,7 +218,7 @@ $: {
                 </label>
                 <InfoModal
                   title={"Retail Investor Volume"}
-                  content={"Understand retail investor activity: The green bar shows the daily volume trend, indicating if it was more bullish (above the axis) or bearish (below the axis). The white line represents the daily volume of retail investors."}
+                  content={"Gain insights into retail investor activity with the following visualization: The green bar illustrates the daily volume trend, signifying a bullish sentiment if it ranges from 0 to 100, or bearish if it spans from -100 to just below 0. The white line depicts the daily trading volume of retail investors."}
                   id={"retailTraderTrackerInfo"}
                 />
             </div>
@@ -207,32 +226,33 @@ $: {
             {#if isLoaded}
     
             {#if rawData?.length !== 0}
-            <div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
-                    
-                <div class="w-full flex flex-col items-start">
-                    <div class="text-white text-sm sm:text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
-                        In the past six months, the {$displayCompanyName} had an average retail investor volume of <span class="font-semibold">{abbreviateNumber(avgVolume,true)}</span>, with a prevailing
-                        {#if avgSentiment === 'Bullish' }
-                        <span class="text-[#10DB06]">
-                          <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#10db06" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="m3 17l6-6l4 4l8-8"/><path d="M17 7h4v4"/></g></svg>
-                          {avgSentiment}
-                          </span>
-      
-                          {:else if avgSentiment === 'Bearish' }
-                          <span class="text-[#E57C34]">
-                              <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#ff2f1f" d="M244 136v64a12 12 0 0 1-12 12h-64a12 12 0 0 1 0-24h35l-67-67l-31.51 31.52a12 12 0 0 1-17 0l-72-72a12 12 0 0 1 17-17L96 127l31.51-31.52a12 12 0 0 1 17 0L220 171v-35a12 12 0 0 1 24 0Z"/></svg>
-                          {avgSentiment}
-                          </span>
-                          {:else}
-                          <span class="text-[#FF2F1F]">
-                              <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#e57c34" d="m22 12l-4-4v3H3v2h15v3l4-4Z"/></svg>
-                              Neutral
-                          </span>
-                          {/if} trend.
-                    </div>
-                </div>
-            
 
+            <div class="w-full flex flex-col items-start">
+              <div class="text-white text-sm sm:text-[1rem] mt-2 mb-2 w-full">
+                  In the past six months, the {$displayCompanyName} had an average retail investor volume of <span class="font-semibold">{abbreviateNumber(avgVolume,true)}</span>, with a prevailing
+                  {#if avgSentiment === 'Bullish' }
+                  <span class="text-[#10DB06]">
+                    <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="#10db06" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="m3 17l6-6l4 4l8-8"/><path d="M17 7h4v4"/></g></svg>
+                    {avgSentiment}
+                    </span>
+
+                    {:else if avgSentiment === 'Bearish' }
+                    <span class="text-[#E57C34]">
+                        <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#ff2f1f" d="M244 136v64a12 12 0 0 1-12 12h-64a12 12 0 0 1 0-24h35l-67-67l-31.51 31.52a12 12 0 0 1-17 0l-72-72a12 12 0 0 1 17-17L96 127l31.51-31.52a12 12 0 0 1 17 0L220 171v-35a12 12 0 0 1 24 0Z"/></svg>
+                    {avgSentiment}
+                    </span>
+                    {:else}
+                    <span class="text-[#FF2F1F]">
+                        <svg class="w-6 h-6 sm:w-7 sm:h-7 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#e57c34" d="m22 12l-4-4v3H3v2h15v3l4-4Z"/></svg>
+                        Neutral
+                    </span>
+                    {/if} trend.
+              </div>
+          </div>
+
+            <div class="p-3 sm:p-0 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
+                    
+              
                 <Lazy height={300} fadeOption={{delay: 100, duration: 500}} keep={true}>
                     <div class="app w-full h-[300px] ">
                         <Chart options={optionsData} class="chart" />
@@ -269,7 +289,7 @@ $: {
                               <span>Retail Sentiment</span>
                           </td>
                           <td class="px-[5px] py-1.5 text-right font-medium xs:px-2.5 xs:py-2 { rawData?.slice(-1)?.at(0)?.sentiment > 0 ? 'text-[#10DB06]' : 'text-[#E57C34]'} ">
-                              {rawData?.slice(-1)?.at(0)?.sentiment > 0 ? 'Bullish' : 'Bearish'}
+                              {rawData?.slice(-1)?.at(0)?.sentiment > 0 ? rawData?.slice(-1)?.at(0)?.sentimentt+' '+'(Bullish)' : rawData?.slice(-1)?.at(0)?.sentiment+' '+'(Bearish)'}
                           </td>
                       </tr>
                   </tbody>