ui fixes

src/routes/stocks/[tickerID]/statistics/employees/+page.svelte

@@ -21,9 +21,9 @@
   let employeeHistory = data?.getHistoryEmployee ?? [];
   let historyList = sortByDate(employeeHistory);
 
-  let employees = "n/a";
-  let changeRate = "n/a";
-  let growthRate = "n/a";
+  let employees = null;
+  let changeRate = null;
+  let growthRate = null;
 
   let optionsTotal;
   let optionsChange;
@@ -407,12 +407,15 @@
                   day: "numeric",
                   year: "numeric",
                   daySuffix: "2-digit",
-                })}. The number of employees {changeRate >= 0
+                })}. The number of employees {changeRate >= 0 &&
+                changeRate !== null
                   ? "increased"
                   : "decreased"}
                 by {new Intl.NumberFormat("en")?.format(changeRate)} or
                 <span
-                  class={changeRate >= 0 ? "text-[#00FC50]" : "text-[#FF2F1F]"}
+                  class={changeRate >= 0 && changeRate !== null
+                    ? "text-[#00FC50]"
+                    : "text-[#FF2F1F]"}
                 >
                   {growthRate}%
                 </span>
@@ -442,7 +445,7 @@
         </div>
 
         <div
-          class="my-5 grid grid-cols-2 gap-3 px-1 text-base xs:mt-6 bp:mt-7 bp:text-lg sm:grid-cols-3 sm:gap-6 sm:px-4 sm:text-xl"
+          class="my-5 grid grid-cols-2 gap-3 px-1 xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6 sm:px-4"
         >
           <div>
             Employees
@@ -463,7 +466,9 @@
               {#if dateDistance}
                 n/a
               {:else}
-                {new Intl.NumberFormat("en")?.format(changeRate)}
+                {changeRate !== null
+                  ? new Intl.NumberFormat("en")?.format(changeRate)
+                  : "n/a"}
               {/if}
             </div>
           </div>
@@ -473,7 +478,7 @@
                 ? "before:content-['+'] "
                 : ''} font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
             >
-              {growthRate}%
+              {growthRate !== null ? growthRate + "%" : "n/a"}
             </div>
           </div>
           <div>
@@ -518,7 +523,7 @@
           >
             Employees Chart
           </h1>
-
+          {#if historyList?.length > 0}
             <div
               class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
             >
@@ -593,6 +598,7 @@
                 >
               </Button>
             </div>
+          {/if}
         </div>
 
         {#if historyList?.length !== 0}
@@ -702,7 +708,7 @@
           </div>
         {:else}
           <h1
-            class="text-xl m-auto flex justify-center text-gray-200 font-medium mb-4 mt-10"
+            class="text-xl m-auto flex justify-center text-gray-200 font-semibold mb-4 mt-10"
           >
             No history found
           </h1>

src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte

@@ -486,12 +486,19 @@
                         1-Year Change
                       </div>
                       <div
-                        class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changePercentageYearAgo >
-                        0
+                        class="mt-1 break-words font-semibold leading-8 tiny:text-lg xs:text-xl sm:text-2xl {changePercentageYearAgo >=
+                          0 && changePercentageYearAgo !== null
                           ? "before:content-['+'] text-[#00FC50]"
-                          : 'text-[#FF2F1F]'}"
+                          : changePercentageYearAgo < 0 &&
+                              changePercentageYearAgo !== null
+                            ? 'text-[#FF2F1F]'
+                            : 'text-white'}"
                       >
-                        {abbreviateNumber(changePercentageYearAgo?.toFixed(2))}%
+                        {changePercentageYearAgo !== null
+                          ? abbreviateNumber(
+                              changePercentageYearAgo?.toFixed(2),
+                            ) + "%"
+                          : "n/a"}
                       </div>
                     </div>
                   </div>