ui fixes

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

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { stockTicker, screenWidth } from "$lib/store";
+  import { stockTicker } from "$lib/store";
-  import ArrowLogo from "lucide-svelte/icons/move-up-right";
 
   import { page } from "$app/stores";
 

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

@@ -10,7 +10,6 @@
   let companyName = $displayCompanyName
     ?.replace("Inc.", "")
     ?.replace(".com", "");
-  let quantStats = {};
 
   function checkValue(val, category) {
     if (val !== null && val !== undefined) {

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

@@ -1,8 +1,39 @@
 <script lang="ts">
+  import { stockTicker } from "$lib/store";
+
   import { abbreviateNumber } from "$lib/utils";
 
   export let data;
   const similarStocks = data?.getSimilarStocks;
+
+  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" : ""}`;
+    }
+  };
 </script>
 
 <section class="w-full overflow-hidden">
@@ -109,6 +140,32 @@
               </div>
             </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-xl text-white font-semibold mb-3">
+                  {$stockTicker} News
+                </h3>
+                <ul class="text-white">
+                  {#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>
+              </div>
+            </div>
+          {/if}
         </aside>
       </div>
     </div>

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

@@ -3,8 +3,6 @@
   import { abbreviateNumber, monthNames } from "$lib/utils";
   import SEO from "$lib/components/SEO.svelte";
 
-  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
-  import { Button } from "$lib/components/shadcn/button/index.js";
   //import * as XLSX from 'xlsx';
   import { goto } from "$app/navigation";
   import { Chart } from "svelte-echarts";
@@ -22,7 +20,6 @@
 
   let rawData = data?.getHistoricalRevenue || {};
   let tableList = [];
-  let timePeriod = "3Y";
 
   const tabs = [
     {
@@ -33,25 +30,49 @@
     },
   ];
   let activeIdx = 0;
+  let timeIdx = 0;
+
+  const plotTabs = [
+    {
+      title: "Annual",
+    },
+    {
+      title: "Quarterly",
+    },
+  ];
 
   function changeTablePeriod(index) {
     activeIdx = index;
+    const rawData = data?.getHistoricalRevenue;
     if (activeIdx === 0) {
-      tableList = rawData?.annual;
+      // Clone the array before sorting
+      tableList = [...rawData?.annual];
+      tableList.sort((a, b) => new Date(b?.date) - new Date(a?.date));
     } else {
-      tableList = rawData?.quarter;
+      tableList = [...rawData?.quarter];
+      tableList.sort((a, b) => new Date(b?.date) - new Date(a?.date));
     }
-    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
   }
 
-  async function changeStatement(state) {
+  async function changeTimePeriod(state) {
-    timePeriod = state;
+    timeIdx = state;
-
+    optionsData = plotData();
-    optionsData = await plotData();
   }
 
   function plotData() {
-    const filteredData = filterDataByTimePeriod(rawData, timePeriod);
+    let filteredData = [];
+    const rawData = data?.getHistoricalRevenue;
+    if (timeIdx === 0) {
+      // Clone the array before sorting
+      filteredData = [...rawData?.annual];
+    } else {
+      filteredData = [...rawData?.quarter];
+    }
+    // Sort ascending for plotting
+    filteredData.sort((a, b) => new Date(a?.date) - new Date(b?.date));
+
+    const dates = filteredData.map((item) => item?.date);
+    const valueList = filteredData.map((item) => item?.revenue);
 
     const options = {
       animation: false,
@@ -65,10 +86,9 @@
       xAxis: [
         {
           type: "category",
-          data: filteredData?.dates,
+          data: dates,
           axisLabel: {
             color: "#fff",
-
             formatter: function (value) {
               // Assuming dates are in the format 'yyyy-mm-dd'
               const dateParts = value.split("-");
@@ -86,7 +106,6 @@
           splitLine: {
             show: false, // Disable x-axis grid lines
           },
-
           axisLabel: {
             show: false, // Hide y-axis labels
           },
@@ -94,14 +113,15 @@
       ],
       series: [
         {
-          name: "Mkt Cap",
+          name: "Revenue",
-          data: filteredData?.marketCapList,
+          data: valueList,
-          type: "line",
+          type: "bar",
           smooth: true,
           symbol: "none",
           itemStyle: {
-            color: "#fff",
+            color: "#f2f1f0",
           },
+          barWidth: "60%",
         },
       ],
       tooltip: {
@@ -116,10 +136,8 @@
         formatter: function (params) {
           // Get the timestamp from the first parameter
           const timestamp = params[0].axisValue;
-
           // Initialize result with timestamp
           let result = timestamp + "<br/>";
-
           // Add each series data
           params.forEach((param) => {
             const marker =
@@ -134,7 +152,6 @@
               abbreviateNumber(param.value, false, true) +
               "<br/>";
           });
-
           return result;
         },
         axisPointer: {
@@ -148,12 +165,8 @@
     return options;
   }
 
-  $: {
+  changeTablePeriod(0);
-    if ($stockTicker) {
+  optionsData = plotData();
-      tableList = rawData?.annual;
-      tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-    }
-  }
 </script>
 
 <SEO
@@ -275,15 +288,45 @@
               </div>
 
               <div
-                class="flex flex-col sm:flex-row items-start sm:items-center w-full sm:mt-10 mb-8"
+                class="mt-10 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between"
               >
-                <h1 class="text-2xl text-white font-bold mb-3 sm:mb-0">
+                <h2 class="text-xl sm:text-2xl text-white font-bold">
                   Revenue Chart
-                </h1>
+                </h2>
+
                 <div
-                  class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto sm:ml-auto"
+                  class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
-                ></div>
+                >
+                  <div
+                    class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                  >
+                    {#each plotTabs as item, i}
+                      <button
+                        on:click={() => changeTimePeriod(i)}
+                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {timeIdx ===
+                        i
+                          ? 'z-0'
+                          : ''} "
+                      >
+                        {#if timeIdx === i}
+                          <div
+                            class="absolute inset-0 rounded-md bg-[#fff]"
+                          ></div>
+                        {/if}
+                        <span
+                          class="relative text-sm block font-semibold {timeIdx ===
+                          i
+                            ? 'text-black'
+                            : 'text-white'}"
+                        >
+                          {item.title}
+                        </span>
+                      </button>
+                    {/each}
+                  </div>
+                </div>
               </div>
+
               {#if optionsData !== null}
                 <div class="app w-full">
                   <Chart {init} options={optionsData} class="chart" />
@@ -357,7 +400,9 @@
                   <thead class="bg-default">
                     <tr>
                       <th class="text-white font-semibold text-start text-sm"
-                        >Date</th
+                        >{activeIdx === 0
+                          ? "Fiscal Year End"
+                          : "Quarter Ended"}</th
                       >
                       <th class="text-white font-semibold text-end text-sm"
                         >Revenue</th
@@ -382,7 +427,7 @@
                         <td
                           class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
                         >
-                          {@html abbreviateNumber(item?.revenue, false, true)}
+                          {abbreviateNumber(item?.revenue)}
                         </td>
 
                         <td