ui fixes

src/lib/components/AnalystEstimate.svelte

@@ -769,7 +769,7 @@
             class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-scroll pr-5 sm:pr-0"
           >
             <table
-              class="table table-sm shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
+              class="table table-sm table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
             >
               <thead class="">
                 <tr class="">

src/routes/stocks/[tickerID]/+layout.svelte

@@ -899,7 +899,6 @@
                           >Statistics</a
                         >
 
-                        {#if ["amd", "save", "ba", "adbe", "nflx", "pltr", "msft", "meta", "tsla", "nvda", "aapl", "gme"]?.includes($stockTicker?.toLowerCase())}
                           <a
                             href={`/stocks/${$stockTicker}/metrics`}
                             on:click={() => changeSection("metrics")}
@@ -909,7 +908,6 @@
                               : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary sm:hover:bg-opacity-[0.95]'}"
                             >Metrics</a
                           >
-                        {/if}
 
                         {#if Object?.keys(data?.getAnalystRating ?? {})?.length > 0}
                           <a

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

@@ -50,13 +50,19 @@
         containLabel: true,
       },
       xAxis: {
-        data: dates,
         type: "category",
+        boundaryGap: false,
+        data: dates,
         axisLabel: {
           color: "#fff",
+          formatter: function (value) {
+            // Assuming dates are in the format 'yyyy-mm-dd'
+            // Extract the month and day from the date string and convert the month to its abbreviated name
+            const dateParts = value.split("-");
+            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
+            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+            return `${monthNames[monthIndex]} '${year} `;
           },
-        splitLine: {
-          show: false, // Disable x-axis grid lines
         },
       },
       yAxis: [

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

@@ -285,7 +285,6 @@
       estimatedEpsAvg,
     );
 
-    console.log(estimatedEpsAvg, data?.getAnalystEstimate[index - 2]?.eps);
   }
 
   function getPriceForecastChart() {

src/routes/stocks/[tickerID]/metrics/+layout.server.ts

@@ -17,7 +17,6 @@ export const load = async ({ locals, params }) => {
     });
 
     const output = await response.json();
-
     return output;
   };
 

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

@@ -35,15 +35,15 @@
   const xData = dataset?.map((item) => item?.date);
   const geographicXData = geographicDataset?.map((item) => item?.date);
 
-  const categoryValues = revenueNames.map((_, index) =>
+  const categoryValues = revenueNames?.map((_, index) =>
-    dataset.map((item) => item.value[index]),
+    dataset?.map((item) => item.value[index]),
   );
-  const geographiCategoryValues = geographicNames.map((_, index) =>
+  const geographiCategoryValues = geographicNames?.map((_, index) =>
-    geographicDataset.map((item) => item.value[index]),
+    geographicDataset?.map((item) => item.value[index]),
   );
 
   const growthValues = revenueNames?.map((_, index) =>
-    dataset.map((item) => item.valueGrowth[index]),
+    dataset?.map((item) => item.valueGrowth[index]),
   );
   const geographicGrowthValues = geographicNames?.map((_, index) =>
     geographicDataset?.map((item) => item.valueGrowth[index]),
@@ -88,7 +88,7 @@
   />
 </svelte:head>
 
-<section class="bg-[#09090B] overflow-hidden text-white h-full w-full">
+<section class="bg-[#09090B] overflow-hidden text-white min-h-screen w-full">
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
     <div
       class="relative flex justify-center items-center overflow-hidden w-full"
@@ -251,20 +251,29 @@
           {/if}
         {:else}
         <div
-            class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]"
+                class="border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
               >
                 <svg
-              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
+                  class="h-6 w-6 hidden sm:block"
-              xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
-              viewBox="0 0 256 256"
+                  fill="currentColor"
+                  style="max-width:40px"
+                  aria-hidden="true"
                   ><path
-                fill="#fff"
+                    fill-rule="evenodd"
-                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-              /></svg
+                    clip-rule="evenodd"
+                  ></path></svg
                 >
+                <div class="ml-3 w-full">
+                  <div class="flex w-full flex-row justify-between">
+                    <div>
                       Currently, there are no business metrics available for {$stockTicker}.
-            We're working to add more data soon!
                     </div>
+                  </div>
+                </div>
+              </div>
+
         {/if}
       </div>
     </div>

src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte

@@ -67,11 +67,20 @@
         containLabel: true,
       },
       xAxis: {
+        type: "category",
+        boundaryGap: false,
+        data: xData,
         axisLabel: {
           color: "#fff",
+          formatter: function (value) {
+            // Assuming dates are in the format 'yyyy-mm-dd'
+            // Extract the month and day from the date string and convert the month to its abbreviated name
+            const dateParts = value.split("-");
+            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
+            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+            return `${monthNames[monthIndex]} '${year} `;
+          },
         },
-        data: xData,
-        type: "category",
       },
       yAxis: [
         {
@@ -90,7 +99,7 @@
           name: "Revenue",
           data: valueList,
           type: "line",
-          areaStyle: { opacity: 0.2 },
+          areaStyle: { opacity: 0.08 },
           smooth: true,
           symbol: "none",
           itemStyle: {