ui fix

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

@@ -3,6 +3,34 @@
   export let data;
 
   let similarStocks;
+  let newsList = data?.getNews ?? [];
+
+  const formatDate = (dateString) => {
+    // Create a date object for the input dateString
+    const inputDate = new Date(dateString);
+
+    // Create a date object for the current time in New York City
+    const nycTime = new Date().toLocaleString("en-US", {
+      timeZone: "America/New_York",
+    });
+    const currentNYCDate = new Date(nycTime);
+
+    // Calculate the difference in milliseconds
+    const difference = inputDate.getTime() - currentNYCDate.getTime();
+
+    // Convert the difference to minutes
+    const minutes = Math.abs(Math.round(difference / (1000 * 60)));
+
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    } else if (minutes < 1440) {
+      const hours = Math.round(minutes / 60);
+      return `${hours} hour${hours !== 1 ? "s" : ""}`;
+    } else {
+      const days = Math.round(minutes / 1440);
+      return `${days} day${days !== 1 ? "s" : ""}`;
+    }
+  };
 
   $: {
     if ($stockTicker) {
@@ -82,6 +110,38 @@
               </a>
             </div>
           {/if}
+
+          {#if newsList?.length !== 0}
+            <div
+              class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+            >
+              <div class="p-4 text-sm">
+                <h3 class="text-lg text-white font-semibold mb-3">
+                  {$stockTicker} News
+                </h3>
+                <ul class="text-white mb-3">
+                  {#each newsList?.slice(0, 10) as item}
+                    <li class="mb-3 last:mb-1">
+                      {formatDate(item?.publishedDate)} ago -
+                      <a
+                        class="sm:hover:text-white text-blue-400"
+                        href={item?.url}
+                        target="_blank"
+                        rel="noopener noreferrer nofollow">{item?.title}</a
+                      >
+                      - {item?.site}
+                    </li>
+                  {/each}
+                </ul>
+                <a
+                  href={`/stocks/${$stockTicker}`}
+                  class="flex justify-center items-center rounded cursor-pointer w-full py-2 -mb-3 mt-6 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
+                >
+                  More News
+                </a>
+              </div>
+            </div>
+          {/if}
         </aside>
       </div>
     </div>

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

@@ -2,6 +2,7 @@
   import {
     numberOfUnreadNotification,
     displayCompanyName,
+    screenWidth,
     stockTicker,
   } from "$lib/store";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -55,23 +56,17 @@
 
     for (let i = 0; i < employeeHistory?.length; i++) {
       const current = employeeHistory[i]?.employeeCount;
-      //const previousDividend = i === 0 ? 0 : employeeHistory[i - 1]?.dividend;
-
       dateList?.push(employeeHistory[i]?.filingDate?.slice(0, 4));
       employeeList?.push(current);
-
-      //const growthRate = ( (currentDividend - previousDividend) / previousDividend ) ;
-
-      //growthList.push(growthRate?.toFixed(2))
     }
 
     const options = {
       animation: false,
       grid: {
-        left: "0%",
-        right: "0%",
+        left: $screenWidth < 640 ? "5%" : "0%",
+        right: $screenWidth < 640 ? "3%" : "0%",
         top: "10%",
-        bottom: "20%",
+        bottom: "10%",
         containLabel: true,
       },
       xAxis: {
@@ -79,9 +74,10 @@
         type: "category",
         axisLabel: {
           color: "#fff",
-          interval: 0, // Show all labels
+          interval: (index, value) =>
+            dateList.length > 12 ? index % 2 === 0 : 0, // Show every second label if there are too many
           rotate: 45, // Rotate labels for better readability
-          fontSize: 12, // Adjust font size if needed
+          fontSize: 12,
           margin: 10,
         },
       },
@@ -89,11 +85,10 @@
         {
           type: "value",
           splitLine: {
-            show: false, // Disable x-axis grid lines
+            show: false,
           },
-
           axisLabel: {
-            show: false, // Hide y-axis labels
+            show: false,
           },
         },
       ],
@@ -108,22 +103,27 @@
           },
         },
       ],
-
       tooltip: {
         trigger: "axis",
         hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
+        borderColor: "#969696",
+        borderWidth: 1,
+        backgroundColor: "#313131",
         textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
+          color: "#fff",
         },
         formatter: function (params) {
-          const date = params[0].name; // Get the date from the x-axis value
-          // Return the tooltip content
+          const date = params[0].name;
           return `${date}<br/> Employees: ${params[0].value?.toLocaleString("en-US")}`;
         },
       },
+      dataZoom: [
+        {
+          type: "slider", // Adds a horizontal slider for zooming
+          start: 0,
+          end: 100,
+        },
+      ],
     };
 
     return options;