From 38d7cfbd9e3800c835ff559fa4eb0340cce9798a Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 14 Jan 2025 21:45:39 +0100
Subject: [PATCH] add change to layout

---
 src/routes/stocks/[tickerID]/+layout.svelte   | 27 +++++--
 .../statistics/price-reaction/+page.svelte    | 75 +++++++++++--------
 2 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 0502b996..5b52297b 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -270,7 +270,8 @@
         close: item?.close !== null ? item?.close : NaN,
       }));
 
-      let change;
+      let changesPercentage = null;
+      let change = null;
       let currentDataRowOneDay;
       let baseClose =
         data?.getStockQuote?.previousClose || oneDayPrice?.at(0)?.open;
@@ -290,7 +291,8 @@
           : currentDataRowOneDay?.close || currentDataRowOneDay?.value;
 
       if (closeValue && baseClose) {
-        change = ((closeValue / baseClose - 1) * 100)?.toFixed(2);
+        change = (closeValue - baseClose)?.toFixed(2);
+        changesPercentage = ((closeValue / baseClose - 1) * 100)?.toFixed(2);
       }
 
       // Format date
@@ -320,6 +322,7 @@
             : currentDataRowOneDay?.close?.toFixed(2) ||
               data?.getStockQuote?.price?.toFixed(2),
         date: safeFormattedDate,
+        changesPercentage,
         change,
       };
     }
@@ -772,12 +775,22 @@
                                     prePostData,
                                   )?.length === 0
                                     ? 'inline'
-                                    : 'block sm:inline'} text-lg xs:text-xl sm:text-2xl {displayLegend?.change >=
-                                  0
-                                    ? "before:content-['+'] text-[#00FC50]"
-                                    : 'text-[#FF2F1F]'}"
+                                    : 'block sm:inline'} text-lg xs:text-xl sm:text-2xl"
                                 >
-                                  {displayLegend?.change}%
+                                  <span
+                                    class={displayLegend?.change >= 0
+                                      ? "before:content-['+'] text-[#00FC50]"
+                                      : "text-[#FF2F1F]"}
+                                  >
+                                    {displayLegend?.change}
+                                  </span>
+                                  <span
+                                    class={displayLegend?.changesPercentage >= 0
+                                      ? "text-[#00FC50]"
+                                      : "text-[#FF2F1F]"}
+                                  >
+                                    ({displayLegend?.changesPercentage}%)
+                                  </span>
                                 </div>
                                 <div class="mt-0.5 text-xs sm:text-sm">
                                   {#if !$isOpen}
diff --git a/src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte b/src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte
index 1895c1ee..a0a4a128 100644
--- a/src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte
@@ -171,17 +171,17 @@
                       ><td
                         class="border-primary px-3.5 py-0.5 border-t border-l px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
                         ><span class="text-white text-sm sm:text-[1rem]"
-                          >{item?.backward_2_days_close}</span
+                          >{item?.backward_2_days_close?.toFixed(2)}</span
                         ></td
                       ><td
                         class="border-primary px-3.5 py-0.5 border-t px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
                         ><span class="text-white text-sm sm:text-[1rem]"
-                          >{item?.backward_1_days_close}</span
+                          >{item?.backward_1_days_close?.toFixed(2)}</span
                         ></td
                       ><td
                         class="border-primary px-3.5 py-0.5 border-t border-r rounded-tr-md px-4 last:pr-11 w-17 last:w-24.5 border-r px-1 text-right"
                         ><span class="text-white text-sm sm:text-[1rem]"
-                          >{item?.forward_0_days_close}</span
+                          >{item?.forward_0_days_close?.toFixed(2)}</span
                         ></td
                       ><td
                         class="border-primary px-3.5 py-0.5 px-4 last:pr-11 w-17 last:w-24.5 px-1"
@@ -191,7 +191,7 @@
                           ? 'rounded-tl-md border-t-violet-500'
                           : ''} px-4 last:pr-11 w-17 last:w-24.5 border-l border-l-violet-500 px-1 text-right"
                         ><span class="text-white text-sm sm:text-[1rem]"
-                          >{item?.open}</span
+                          >{item?.open?.toFixed(2)}</span
                         ></td
                       ><td
                         class="border-primary px-3.5 py-0.5 border-t {index ===
@@ -199,7 +199,7 @@
                           ? 'border-t-violet-500'
                           : ''} px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
                         ><span class="text-white text-sm sm:text-[1rem]"
-                          >{item?.high}</span
+                          >{item?.high?.toFixed(2)}</span
                         ></td
                       ><td
                         class="border-primary px-3.5 py-0.5 border-t {index ===
@@ -222,17 +222,17 @@
                       ></td><td
                         class="border-primary px-3.5 py-0.5 border-t border-l rounded-tl-md px-4 last:pr-11 w-17 last:w-24.5 border-l px-1 text-right"
                         ><span class="text-white text-sm sm:text-[1rem]"
-                          >{item?.forward_2_days_close}</span
+                          >{item?.forward_2_days_close?.toFixed(2)}</span
                         ></td
                       ><td
                         class="border-primary px-3.5 py-0.5 border-t px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
                         ><span class="text-white text-sm sm:text-[1rem]"
-                          >{item?.forward_3_days_close}</span
+                          >{item?.forward_3_days_close?.toFixed(2)}</span
                         ></td
                       ><td
                         class="border-primary px-3.5 py-0.5 border-t px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
                         ><span class="text-white text-sm sm:text-[1rem]"
-                          >{item?.forward_4_days_close}</span
+                          >{item?.forward_4_days_close?.toFixed(2)}</span
                         ></td
                       ><td
                         class="border-primary px-3.5 py-0.5 border-t border-l px-4 last:pr-11 w-17 last:w-24.5 px-1 text-right"
@@ -252,14 +252,23 @@
                         ? 'opacity-[0.1]'
                         : ''}"
                       ><td
-                        class="border-l border-primary pl-1 text-[#c3c6d0] text-sm px-1"
+                        class="border-l border-primary pl-1 text-gray-200 text-sm px-1"
                         ><div class="flex w-full justify-between">
                           <div class="flex items-center">
-                            <div class="mr-1">RSI</div>
+                            <div class="mr-1 text-purple-400">IV:</div>
                             <div
-                              class="leading-3 w-full whitespace-nowrap rounded-[3px] p-1 font-medium bg-secondary text-white"
+                              class="leading-3 w-full whitespace-nowrap text-purple-400 font-medium text-white"
                             >
-                              {item?.rsi}
+                              {item?.iv ?? "n/a"}
+                            </div>
+                          </div>
+
+                          <div class="flex items-center">
+                            <div class="mr-1 text-purple-400">RSI:</div>
+                            <div
+                              class="leading-3 w-full whitespace-nowrap text-purple-400 font-medium text-white"
+                            >
+                              {item?.rsi ?? "n/a"}
                             </div>
                           </div>
 
@@ -283,9 +292,9 @@
                           0
                             ? "text-positive before:content-['+']"
                             : 'text-negative'}"
-                          >{item?.backward_1_days_change_percent}%<span
-                            class="w-0 text-center"
-                          ></span></span
+                          >{item?.backward_1_days_change_percent?.toFixed(
+                            2,
+                          )}%<span class="w-0 text-center"></span></span
                         ></td
                       ><td
                         class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-l px-1 text-right"
@@ -294,9 +303,9 @@
                           0
                             ? "text-positive before:content-['+']"
                             : 'text-negative'}"
-                          >{item?.backward_1_days_change_percent}%<span
-                            class="w-0 text-center"
-                          ></span></span
+                          >{item?.backward_1_days_change_percent?.toFixed(
+                            2,
+                          )}%<span class="w-0 text-center"></span></span
                         ></td
                       ><td
                         class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
@@ -349,9 +358,9 @@
                           0
                             ? "text-positive before:content-['+']"
                             : 'text-negative'}"
-                          >{item?.forward_2_days_change_percent}%<span
-                            class="w-0 text-center"
-                          ></span></span
+                          >{item?.forward_2_days_change_percent?.toFixed(
+                            2,
+                          )}%<span class="w-0 text-center"></span></span
                         ></td
                       ><td
                         class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
@@ -360,9 +369,9 @@
                           0
                             ? "text-positive before:content-['+']"
                             : 'text-negative'}"
-                          >{item?.forward_3_days_change_percent}%<span
-                            class="w-0 text-center"
-                          ></span></span
+                          >{item?.forward_3_days_change_percent?.toFixed(
+                            2,
+                          )}%<span class="w-0 text-center"></span></span
                         ></td
                       ><td
                         class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 px-1 text-right"
@@ -371,9 +380,9 @@
                           0
                             ? "text-positive before:content-['+']"
                             : 'text-negative'}"
-                          >{item?.forward_4_days_change_percent}%<span
-                            class="w-0 text-center"
-                          ></span></span
+                          >{item?.forward_4_days_change_percent?.toFixed(
+                            2,
+                          )}%<span class="w-0 text-center"></span></span
                         ></td
                       ><td
                         class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-l px-1 text-right"
@@ -382,9 +391,9 @@
                           0
                             ? "text-positive before:content-['+']"
                             : 'text-negative'}"
-                          >{item?.forward_6_days_change_percent}%<span
-                            class="w-0 text-center"
-                          ></span></span
+                          >{item?.forward_6_days_change_percent?.toFixed(
+                            2,
+                          )}%<span class="w-0 text-center"></span></span
                         ></td
                       ><td
                         class="px-4 last:pr-11 w-17 last:w-24.5 border-primary px-3.5 py-0.5 border-r px-1 text-right"
@@ -393,9 +402,9 @@
                           0
                             ? "text-positive before:content-['+']"
                             : 'text-negative'}"
-                          >{item?.backward_4_days_change_percent}%<span
-                            class="w-0 text-center"
-                          ></span></span
+                          >{item?.backward_4_days_change_percent?.toFixed(
+                            2,
+                          )}%<span class="w-0 text-center"></span></span
                         ></td
                       ></tr
                     >