From e4021c521348ac21695db00d9c3ca16030babe58 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 3 Apr 2025 23:30:41 +0200
Subject: [PATCH] add ytd to chart

---
 src/lib/utils.ts                          | 15 ++++++++
 src/routes/etf/[tickerID]/+page.svelte    | 44 ++++++++++++++++++----
 src/routes/index/[tickerID]/+page.svelte  | 46 +++++++++++++++++++----
 src/routes/pricing/+page.svelte           |  2 +
 src/routes/stocks/[tickerID]/+page.svelte | 45 ++++++++++++++++++----
 5 files changed, 129 insertions(+), 23 deletions(-)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8a557397..e50d23b9 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1009,6 +1009,21 @@ function convertNYTimeToLocalTime(nyTimeString) {
     return localFormattedTime;
 }
 */
+export function convertPeriodString(interval) {
+  const mapping = {
+    "1D": "1 Day",
+    "1W": "5 Days", // Assuming "1W" means a trading week (5 days)
+    "1M": "1 Month",
+    "YTD": "YTD",
+    "3M": "3 Months",
+    "6M": "6 Months",
+    "1Y": "1 Year",
+    "5Y": "5 Years",
+    "MAX": "Max",
+  };
+
+  return mapping[interval] || interval; // Return original if no match
+}
 
 export function getPartyForPoliticians(name) {
   // Predefined list of senators and their parties
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index 3b81e95a..bbb4a54b 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -22,7 +22,11 @@
   import News from "$lib/components/News.svelte";
   import ETFSidecard from "$lib/components/ETFSidecard.svelte";
 
-  import { convertTimestamp, abbreviateNumber } from "$lib/utils";
+  import {
+    convertTimestamp,
+    abbreviateNumber,
+    convertPeriodString,
+  } from "$lib/utils";
 
   export let data;
   export let form;
@@ -31,7 +35,7 @@
 
   $: previousClose = data?.getStockQuote?.previousClose;
   //============================================//
-  const intervals = ["1D", "1W", "1M", "6M", "1Y", "MAX"];
+  const intervals = ["1D", "1W", "1M", "YTD", "6M", "1Y", "MAX"];
 
   let config = null;
   let output = null;
@@ -337,6 +341,11 @@
           graphBaseClose = oneMonthPrice?.at(0)?.close;
           config = plotData(oneMonthPrice) || null;
           break;
+        case "ytd":
+          currentDataRow = ytdPrice?.at(-1);
+          graphBaseClose = ytdPrice?.at(0)?.close;
+          config = plotData(ytdPrice) || null;
+          break;
 
         case "6M":
           currentDataRow = sixMonthPrice?.at(-1);
@@ -460,7 +469,17 @@
           lastValue = null;
         }
         break;
-
+      case "ytd":
+        displayData = "ytd";
+        await historicalPrice("ytd");
+        if (ytdPrice?.length !== 0) {
+          displayLastLogicalRangeValue = ytdPrice?.at(0)?.close;
+          lastValue = ytdPrice.slice(-1)?.at(0)?.close;
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+        break;
       case "6M":
         displayData = "6M";
         await historicalPrice("six-months");
@@ -505,6 +524,7 @@
   let oneDayPrice = [];
   let oneWeekPrice = [];
   let oneMonthPrice = [];
+  let ytdPrice = [];
   let sixMonthPrice = [];
 
   let oneYearPrice = [];
@@ -520,6 +540,9 @@
         case "one-month":
           oneMonthPrice = cachedData;
           break;
+        case "ytd":
+          ytdPrice = cachedData;
+          break;
         case "six-months":
           sixMonthPrice = cachedData;
           break;
@@ -559,6 +582,9 @@
           case "one-month":
             oneMonthPrice = output;
             break;
+          case "ytd":
+            ytdPrice = output;
+            break;
           case "six-months":
             sixMonthPrice = output;
             break;
@@ -631,6 +657,7 @@
     "1D": oneDayPrice,
     "1W": oneWeekPrice,
     "1M": oneMonthPrice,
+    ytd: ytdPrice,
     "6M": sixMonthPrice,
     "1Y": oneYearPrice,
     MAX: maxPrice,
@@ -649,6 +676,7 @@
       oneDayPrice = [];
       oneWeekPrice = [];
       oneMonthPrice = [];
+      ytdPrice = [];
       oneYearPrice = [];
       maxPrice = [];
       output = null;
@@ -687,15 +715,17 @@
                       <li>
                         <button
                           on:click={() => changeData(interval)}
-                          class="cursor-pointer focus:outline-none"
+                          class="cursor-pointer"
                         >
                           <span
-                            class="block px-3 py-1 rounded duration-100 ease-in-out
+                            class="block px-3 sm:px-2 py-1 text-sm sm:text-[1rem] rounded duration-100 ease-in-out
           {displayData === interval
-                              ? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
+                              ? 'bg-gray-100 text-muted dark:bg-primary dark:text-white font-semibold'
                               : 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
                           >
-                            {interval}
+                            {$screenWidth < 640
+                              ? interval
+                              : convertPeriodString(interval)}
                           </span>
                         </button>
                       </li>
diff --git a/src/routes/index/[tickerID]/+page.svelte b/src/routes/index/[tickerID]/+page.svelte
index cd073b63..45734be0 100644
--- a/src/routes/index/[tickerID]/+page.svelte
+++ b/src/routes/index/[tickerID]/+page.svelte
@@ -19,7 +19,11 @@
   import News from "$lib/components/News.svelte";
   import IndexSidecard from "$lib/components/IndexSidecard.svelte";
 
-  import { convertTimestamp, abbreviateNumber } from "$lib/utils";
+  import {
+    convertTimestamp,
+    abbreviateNumber,
+    convertPeriodString,
+  } from "$lib/utils";
   import { mode } from "mode-watcher";
 
   export let data;
@@ -29,7 +33,7 @@
 
   $: previousClose = data?.getStockQuote?.previousClose;
   //============================================//
-  const intervals = ["1D", "1W", "1M", "6M", "1Y", "MAX"];
+  const intervals = ["1D", "1W", "1M", "YTD", "6M", "1Y", "MAX"];
 
   let config = null;
   let output = null;
@@ -336,6 +340,11 @@
           graphBaseClose = oneMonthPrice?.at(0)?.close;
           config = plotData(oneMonthPrice) || null;
           break;
+        case "ytd":
+          currentDataRow = ytdPrice?.at(-1);
+          graphBaseClose = ytdPrice?.at(0)?.close;
+          config = plotData(ytdPrice) || null;
+          break;
 
         case "6M":
           currentDataRow = sixMonthPrice?.at(-1);
@@ -459,7 +468,17 @@
           lastValue = null;
         }
         break;
-
+      case "ytd":
+        displayData = "ytd";
+        await historicalPrice("ytd");
+        if (ytdPrice?.length !== 0) {
+          displayLastLogicalRangeValue = ytdPrice?.at(0)?.close;
+          lastValue = ytdPrice.slice(-1)?.at(0)?.close;
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+        break;
       case "6M":
         displayData = "6M";
         await historicalPrice("six-months");
@@ -504,6 +523,7 @@
   let oneDayPrice = [];
   let oneWeekPrice = [];
   let oneMonthPrice = [];
+  let ytdPrice = [];
   let sixMonthPrice = [];
 
   let oneYearPrice = [];
@@ -519,6 +539,9 @@
         case "one-month":
           oneMonthPrice = cachedData;
           break;
+        case "ytd":
+          ytdPrice = cachedData;
+          break;
         case "six-months":
           sixMonthPrice = cachedData;
           break;
@@ -558,6 +581,9 @@
           case "one-month":
             oneMonthPrice = output;
             break;
+          case "ytd":
+            ytdPrice = output;
+            break;
           case "six-months":
             sixMonthPrice = output;
             break;
@@ -630,6 +656,7 @@
     "1D": oneDayPrice,
     "1W": oneWeekPrice,
     "1M": oneMonthPrice,
+    ytd: ytdPrice,
     "6M": sixMonthPrice,
     "1Y": oneYearPrice,
     MAX: maxPrice,
@@ -648,6 +675,7 @@
       oneDayPrice = [];
       oneWeekPrice = [];
       oneMonthPrice = [];
+      ytdPrice = [];
       oneYearPrice = [];
       maxPrice = [];
       output = null;
@@ -701,15 +729,17 @@
                         <li>
                           <button
                             on:click={() => changeData(interval)}
-                            class="cursor-pointer focus:outline-none"
+                            class="cursor-pointer"
                           >
                             <span
-                              class="block px-3 py-1 rounded duration-100 ease-in-out
+                              class="block px-3 sm:px-2 py-1 text-sm sm:text-[1rem] rounded duration-100 ease-in-out
           {displayData === interval
-                                ? 'bg-gray-200 text-muted dark:bg-primary dark: font-semibold'
-                                : 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover: sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
+                                ? 'bg-gray-100 text-muted dark:bg-primary dark:text-white font-semibold'
+                                : 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
                             >
-                              {interval}
+                              {$screenWidth < 640
+                                ? interval
+                                : convertPeriodString(interval)}
                             </span>
                           </button>
                         </li>
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index 7f22cda6..2e91c907 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -1131,6 +1131,7 @@
             <span class="">Realtime Dark Pool Trades</span>
           </li>
         </ul>
+        <!--
         {#if !["Pro", "Plus"]?.includes(data?.user?.tier) || data?.user?.freeTrial === true}
           <div class="mt-3 items-center text-[1rem] font-medium mb-5">
             Promo Code: <strong>SPRINGSALE</strong>
@@ -1138,6 +1139,7 @@
             Get <strong>50% OFF</strong> on Pro Annual Membership!
           </div>
         {/if}
+        -->
         <div class="mt-auto pt-6 border-t border-zinc-700 mx-4">
           <label
             for={!data?.user ? "userLogin" : ""}
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index e3712821..fad7542b 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -24,7 +24,11 @@
   import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
   import Sidecard from "$lib/components/Sidecard.svelte";
 
-  import { convertTimestamp, abbreviateNumber } from "$lib/utils";
+  import {
+    convertTimestamp,
+    abbreviateNumber,
+    convertPeriodString,
+  } from "$lib/utils";
 
   export let data;
   export let form;
@@ -33,7 +37,7 @@
 
   $: previousClose = data?.getStockQuote?.previousClose;
   //============================================//
-  const intervals = ["1D", "1W", "1M", "6M", "1Y", "MAX"];
+  const intervals = ["1D", "1W", "1M", "YTD", "6M", "1Y", "MAX"];
 
   let config = null;
   let output = null;
@@ -340,7 +344,11 @@
           graphBaseClose = oneMonthPrice?.at(0)?.close;
           config = plotData(oneMonthPrice) || null;
           break;
-
+        case "YTD":
+          currentDataRow = ytdPrice?.at(-1);
+          graphBaseClose = ytdPrice?.at(0)?.close;
+          config = plotData(ytdPrice) || null;
+          break;
         case "6M":
           currentDataRow = sixMonthPrice?.at(-1);
           graphBaseClose = sixMonthPrice?.at(0)?.close;
@@ -463,7 +471,17 @@
           lastValue = null;
         }
         break;
-
+      case "YTD":
+        displayData = "YTD";
+        await historicalPrice("ytd");
+        if (ytdPrice?.length !== 0) {
+          displayLastLogicalRangeValue = ytdPrice?.at(0)?.close;
+          lastValue = ytdPrice.slice(-1)?.at(0)?.close;
+        } else {
+          displayLastLogicalRangeValue = null;
+          lastValue = null;
+        }
+        break;
       case "6M":
         displayData = "6M";
         await historicalPrice("six-months");
@@ -508,6 +526,7 @@
   let oneDayPrice = [];
   let oneWeekPrice = [];
   let oneMonthPrice = [];
+  let ytdPrice = [];
   let sixMonthPrice = [];
 
   let oneYearPrice = [];
@@ -523,6 +542,9 @@
         case "one-month":
           oneMonthPrice = cachedData;
           break;
+        case "ytd":
+          ytdPrice = cachedData;
+          break;
         case "six-months":
           sixMonthPrice = cachedData;
           break;
@@ -562,6 +584,9 @@
           case "one-month":
             oneMonthPrice = output;
             break;
+          case "ytd":
+            ytdPrice = output;
+            break;
           case "six-months":
             sixMonthPrice = output;
             break;
@@ -634,6 +659,7 @@
     "1D": oneDayPrice,
     "1W": oneWeekPrice,
     "1M": oneMonthPrice,
+    ytd: ytdPrice,
     "6M": sixMonthPrice,
     "1Y": oneYearPrice,
     MAX: maxPrice,
@@ -652,6 +678,7 @@
       oneDayPrice = [];
       oneWeekPrice = [];
       oneMonthPrice = [];
+      ytdPrice = [];
       oneYearPrice = [];
       maxPrice = [];
       output = null;
@@ -694,15 +721,17 @@
                       <li>
                         <button
                           on:click={() => changeData(interval)}
-                          class="cursor-pointer focus:outline-none"
+                          class="cursor-pointer"
                         >
                           <span
-                            class="block px-3 py-1 rounded duration-100 ease-in-out
+                            class="block px-3 sm:px-2 py-1 text-sm sm:text-[1rem] rounded duration-100 ease-in-out
           {displayData === interval
-                              ? 'bg-gray-200 text-muted dark:bg-primary dark:text-white font-semibold'
+                              ? 'bg-gray-100 text-muted dark:bg-primary dark:text-white font-semibold'
                               : 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
                           >
-                            {interval}
+                            {$screenWidth < 640
+                              ? interval
+                              : convertPeriodString(interval)}
                           </span>
                         </button>
                       </li>