From 789bf2225a203497b5619fa6956228d8b8e55430 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 28 Oct 2024 10:15:38 +0100
Subject: [PATCH] ui fix

---
 src/lib/components/EarningsSurprise.svelte |  12 +-
 src/lib/components/NextEarnings.svelte     |  15 +-
 src/lib/components/Sidecard.svelte         |  68 ++-
 src/routes/industry/all/+page.svelte       | 195 +++++----
 src/routes/stocks/[tickerID]/+page.svelte  | 476 ++++++++-------------
 5 files changed, 371 insertions(+), 395 deletions(-)

diff --git a/src/lib/components/EarningsSurprise.svelte b/src/lib/components/EarningsSurprise.svelte
index 71744600..ba53183e 100644
--- a/src/lib/components/EarningsSurprise.svelte
+++ b/src/lib/components/EarningsSurprise.svelte
@@ -77,14 +77,16 @@
           class="ml-[20px] sm:ml-[30px]"
           style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;"
         >
-          Revenue of <strong>{abbreviateNumber(rawData?.revenue, true)}</strong>
+          Revenue of <span class="font-semibold"
+            >{abbreviateNumber(rawData?.revenue, true)}</span
+          >
           {rawData?.revenueSurprise > 0 ? "exceeds" : "misses"} estimates by {abbreviateNumber(
             Math.abs(rawData?.revenueSurprise),
             true,
           )}, with
           <span
             class="font-semibold {revenueRatio > 0
-              ? 'text-[#00FC50]'
+              ? "before:content-['+'] text-[#00FC50]"
               : 'text-[#FF2F1F]'}">{revenueRatio}%</span
           >
           YoY {revenueRatio < 0 ? "decline" : "growth"}.
@@ -93,13 +95,13 @@
           class="ml-[20px] sm:ml-[30px]"
           style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
         >
-          EPS of <strong>${rawData?.eps}</strong>
-          {rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by ${rawData?.epsSurprise?.toFixed(
+          EPS of <span class="font-semibold">{rawData?.eps}</span>
+          {rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by {rawData?.epsSurprise?.toFixed(
             2,
           )}, with
           <span
             class="font-semibold {epsRatio > 0
-              ? 'text-[#00FC50]'
+              ? "before:content-['+'] text-[#00FC50]"
               : 'text-[#FF2F1F]'}">{epsRatio}%</span
           >
           YoY {epsRatio < 0 ? "decline" : "growth"}.
diff --git a/src/lib/components/NextEarnings.svelte b/src/lib/components/NextEarnings.svelte
index c401109b..92f4380d 100644
--- a/src/lib/components/NextEarnings.svelte
+++ b/src/lib/components/NextEarnings.svelte
@@ -64,19 +64,20 @@
           during market hours.
         {/if}
         <br />Analysts project revenue of
-        <strong>{abbreviateNumber(rawData?.revenueEst, true)}</strong>,
-        reflecting a
+        <span class="font-semibold"
+          >{abbreviateNumber(rawData?.revenueEst, true)}</span
+        >, reflecting a
         <span
-          class="font-semibold {revenueRatio > 0
-            ? 'text-[#00FC50]'
+          class="{revenueRatio > 0
+            ? "before:content-['+'] text-[#00FC50]"
             : 'text-[#FF2F1F]'} ">{abbreviateNumber(revenueRatio)}%</span
         >
         YoY {revenueRatio > 0 ? "growth" : revenueRatio < 0 ? "shrinking" : ""} and
         earnings per share of
-        <strong>{rawData?.epsEst}</strong>, making a
+        <span class="font-semibold">{rawData?.epsEst}</span>, making a
         <span
-          class="font-semibold {epsRatio > 0
-            ? 'text-[#00FC50]'
+          class="{epsRatio > 0
+            ? "before:content-['+'] text-[#00FC50]"
             : 'text-[#FF2F1F]'} ">{epsRatio}%</span
         >
         {epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index 5ccb43fc..501fe8ac 100644
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@@ -23,6 +23,68 @@
 
   let showFullText = false;
 
+  const sectorNavigation = [
+    {
+      title: "Financial Services",
+      link: "/list/financial-sector",
+    },
+    {
+      title: "Finance",
+      link: "/list/financial-sector",
+    },
+    {
+      title: "Healthcare",
+      link: "/list/healthcare-sector",
+    },
+    {
+      title: "Technology",
+      link: "/list/technology-sector",
+    },
+    {
+      title: "Industrials",
+      link: "/list/industrials-sector",
+    },
+    {
+      title: "Energy",
+      link: "/list/energy-sector",
+    },
+    {
+      title: "Utilities",
+      link: "/list/utilities-sector",
+    },
+    {
+      title: "Consumer Cyclical",
+      link: "/list/consumer-cyclical-sector",
+    },
+    {
+      title: "Real Estate",
+      link: "/list/real-estate-sector",
+    },
+    {
+      title: "Basic Materials",
+      link: "/list/basic-materials-sector",
+    },
+    {
+      title: "Communication Services",
+      link: "/list/communication-services-sector",
+    },
+    {
+      title: "Consumer Defensive",
+      link: "/list/consumer-defensive-sector",
+    },
+  ];
+
+  function getIndustryHref(industryName) {
+    // Replace spaces with hyphens
+    let formattedName = industryName?.replace(/ /g, "-");
+    // Replace "&" with "and"
+    formattedName = formattedName?.replace(/&/g, "and");
+    // Remove any extra hyphens (e.g., from consecutive spaces)
+    formattedName = formattedName?.replace(/-{2,}/g, "-");
+    // Convert to lowercase for consistency
+    return "/list/industry/" + formattedName?.toLowerCase();
+  }
+
   $: {
     if (
       $stockTicker &&
@@ -88,7 +150,7 @@
     <div class="inline-block">
       <label
         on:click={() => (showFullText = !showFullText)}
-        class="hidden lg:block w-full text-md mt-1 cursor-pointer font-medium sm:hover:text-white text-blue-400 sm:hover:underline"
+        class="w-full text-md mt-1 cursor-pointer font-medium sm:hover:text-white text-blue-400 sm:hover:underline"
       >
         {#if showFullText}
           [Show less]
@@ -103,7 +165,7 @@
     <div class="col-span-1 text-gray-200">
       <span class="block font-semibold">Industry</span>
       <a
-        href={`/stocks/${$stockTicker}/statistics/employees`}
+        href={getIndustryHref(industry)}
         class="sm:hover:text-blue-400 text-white underline underline-offset-4"
         >{industry}</a
       >
@@ -111,7 +173,7 @@
     <div class="col-span-1 text-gray-200">
       <span class="block font-semibold">Sector</span>
       <a
-        href={`/stocks/${$stockTicker}/statistics/employees`}
+        href={sectorNavigation?.find((item) => item?.title === sector)?.link}
         class="sm:hover:text-blue-400 text-white underline underline-offset-4"
         >{sector}</a
       >
diff --git a/src/routes/industry/all/+page.svelte b/src/routes/industry/all/+page.svelte
index ae81dcb3..244d2515 100644
--- a/src/routes/industry/all/+page.svelte
+++ b/src/routes/industry/all/+page.svelte
@@ -1,104 +1,123 @@
-<script lang='ts'>
-import { screenWidth } from '$lib/store';
-import { abbreviateNumber } from '$lib/utils';
+<script lang="ts">
+  import { screenWidth } from "$lib/store";
+  import { abbreviateNumber } from "$lib/utils";
 
-export let data;
-let rawData = data?.getIndustryOverview;
+  export let data;
+  let rawData = data?.getIndustryOverview;
 
-function formatFilename(industryName) {
+  function formatFilename(industryName) {
     // Replace spaces with hyphens
-    let formattedName = industryName?.replace(/ /g, '-');
+    let formattedName = industryName?.replace(/ /g, "-");
     // Replace "&" with "and"
-    formattedName = formattedName?.replace(/&/g, 'and');
+    formattedName = formattedName?.replace(/&/g, "and");
     // Remove any extra hyphens (e.g., from consecutive spaces)
-    formattedName = formattedName?.replace(/-{2,}/g, '-');
+    formattedName = formattedName?.replace(/-{2,}/g, "-");
     // Convert to lowercase for consistency
-   return "/list/industry/"+formattedName?.toLowerCase();
-}
-
-
-
-$: charNumber = $screenWidth < 640 ? 20 : 30;
+    return "/list/industry/" + formattedName?.toLowerCase();
+  }
 
+  $: charNumber = $screenWidth < 640 ? 20 : 30;
 </script>
-    
-    <section class="w-full overflow-hidden m-auto px-2 sm:px-0">
-            
-          
-    
-    
-          <!-- Page wrapper -->
-          <div class="flex justify-center w-full m-auto h-full overflow-hidden">
-      
-              
-        
-              <!-- Content area -->
-                <div class="w-full overflow-x-scroll">
 
-                <table class="table rounded-none sm:rounded-md w-full m-auto mt-4 ">
-                    <thead>
-                        <tr class="border border-slate-800">
-                        <th class="text-white font-semibold text-[1rem]">Industry Name</th>
-                        <th class="text-white text-end font-semibold text-[1rem]">Stocks</th>
-                        <th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
-                        <th class="text-white font-semibold text-[1rem] text-end">Div. Yield</th>
-                        <th class="text-white font-semibold text-[1rem] text-end">PE Ratio</th>
-                        <th class="text-white font-semibold text-[1rem] text-end">Profit Margin</th>
-                        <th class="text-white font-semibold text-[1rem] text-end">1M Change</th>
-                        <th class="text-white font-semibold text-[1rem] text-end">1Y Change</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {#each rawData as item}
-                        <!-- row -->
-                        <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
-                        <td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            <a href={`/list/industry/${item?.industry?.replace(/ /g, '-')?.replace(/&/g, 'and')?.replace(/-{2,}/g, '-')?.toLowerCase()}`} class="sm:hover:text-white text-blue-400">
-                                {item?.industry?.length > charNumber ? item?.industry?.slice(0,charNumber) + "..." : item?.industry}
-                            </a>
-                        </td>
+<section class="w-full overflow-hidden m-auto px-2 sm:px-0">
+  <!-- Page wrapper -->
+  <div class="flex justify-center w-full m-auto h-full overflow-hidden">
+    <!-- Content area -->
+    <div class="w-full overflow-x-scroll">
+      <table class="table rounded-none sm:rounded-md w-full m-auto mt-4">
+        <thead>
+          <tr class="border border-slate-800">
+            <th class="text-white font-semibold text-[1rem]">Industry Name</th>
+            <th class="text-white text-end font-semibold text-[1rem]">Stocks</th
+            >
+            <th class="text-white font-semibold text-end text-[1rem]"
+              >Market Cap</th
+            >
+            <th class="text-white font-semibold text-[1rem] text-end"
+              >Div. Yield</th
+            >
+            <th class="text-white font-semibold text-[1rem] text-end"
+              >PE Ratio</th
+            >
+            <th class="text-white font-semibold text-[1rem] text-end"
+              >Profit Margin</th
+            >
+            <th class="text-white font-semibold text-[1rem] text-end"
+              >1M Change</th
+            >
+            <th class="text-white font-semibold text-[1rem] text-end"
+              >1Y Change</th
+            >
+          </tr>
+        </thead>
+        <tbody>
+          {#each rawData as item}
+            <!-- row -->
+            <tr
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
+            >
+              <td
+                class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              >
+                <a
+                  href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
+                  class="sm:hover:text-white text-blue-400"
+                >
+                  {item?.industry?.length > charNumber
+                    ? item?.industry?.slice(0, charNumber) + "..."
+                    : item?.industry}
+                </a>
+              </td>
 
+              <td
+                class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              >
+                {item?.numStocks}
+              </td>
 
-                        <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            {item?.numStocks}
-                        </td>
+              <td
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              >
+                {abbreviateNumber(item?.totalMarketCap) ?? "-"}
+              </td>
 
-                        <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            {abbreviateNumber(item?.totalMarketCap) ?? '-'}
-                        </td>
+              <td
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              >
+                {item?.avgDividendYield?.toFixed(2) ?? "-"}%
+              </td>
 
-                        <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            {item?.avgDividendYield?.toFixed(2) ?? '-'}%
-                        </td>
+              <td
+                class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              >
+                {item?.pe?.toFixed(2) ?? "-"}
+              </td>
 
-                        <td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            {item?.pe?.toFixed(2) ?? '-'}
-                        </td>
+              <td
+                class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
+              >
+                {item?.profitMargin?.toFixed(2)}%
+              </td>
 
+              <td
+                class="{item?.avgChange1M >= 0
+                  ? 'text-[#37C97D]'
+                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              >
+                {item?.avgChange1M?.toFixed(2) ?? "-"}%
+              </td>
 
-                        <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
-                            {item?.profitMargin?.toFixed(2)}%
-                        </td>
-
-                        <td class="{item?.avgChange1M >= 0 ? 'text-[#37C97D]' : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            {item?.avgChange1M?.toFixed(2) ?? '-'}%
-                        </td>
-
-                        <td class="{item?.avgChange1Y >= 0 ? 'text-[#37C97D]' : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                            {item?.avgChange1Y?.toFixed(2) ?? '-'}%
-                        </td>
-
-                        </tr>
-                        
-                    
-                        {/each}
-                    </tbody>
-                </table>
-                </div>
-
-          </div>
-      
-      </section>
-      
-      
-    
\ No newline at end of file
+              <td
+                class="{item?.avgChange1Y >= 0
+                  ? 'text-[#37C97D]'
+                  : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+              >
+                {item?.avgChange1Y?.toFixed(2) ?? "-"}%
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 7f097f91..9189f2f8 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -28,7 +28,6 @@
   import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
   import Sidecard from "$lib/components/Sidecard.svelte";
 
-  import Lazy from "$lib/components/Lazy.svelte";
   import { convertTimestamp } from "$lib/utils";
   import { Button } from "$lib/components/shadcn/button/index.js";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@@ -424,68 +423,6 @@
     }
   }
 
-  async function handleCrosshairMove({ detail: param }) {
-    if (
-      param?.time &&
-      !isNaN(
-        param?.seriesData?.get(lineLegend)?.close ??
-          param?.seriesData?.get(lineLegend)?.value,
-      )
-    ) {
-      $isCrosshairMoveActive = true;
-      try {
-        let graphData;
-        graphData = param?.seriesData?.get(lineLegend);
-
-        const price = graphData?.close ?? graphData?.value;
-        const dateObj = graphData?.time;
-        const date = ["1D", "1W", "1M"]?.includes(displayData)
-          ? new Date(dateObj * 1000)
-          : new Date(dateObj);
-        const options = {
-          day: "2-digit",
-          month: "short",
-          year: "numeric",
-          hour: "numeric",
-          minute: "2-digit",
-          timeZone: "UTC",
-        };
-        //const formattedDate = (displayData === '1D' || displayData === '1W' || displayData === '1M') ? date.toLocaleString('en-GB', options).replace(/\//g, '.') : date.toLocaleDateString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })?.replace(/\//g, '.');
-
-        const formattedDate =
-          displayData === "1D" || displayData === "1W" || displayData === "1M"
-            ? date.toLocaleString("en-US", options)
-            : date.toLocaleDateString("en-US", {
-                day: "2-digit",
-                month: "short",
-                year: "numeric",
-              });
-
-        const change = (
-          (price / displayLastLogicalRangeValue - 1) *
-          100
-        )?.toFixed(2);
-
-        displayLegend = {
-          close: price?.toFixed(2),
-          date: formattedDate,
-          change: change,
-        };
-      } catch (error) {
-        //pass;
-      }
-    } else {
-      //currentDataRow = oneDayPrice[oneDayPrice?.length - 1];
-      const length = oneDayPrice?.length;
-      for (let i = length - 1; i >= 0; i--) {
-        if (!isNaN(oneDayPrice[i]?.close)) {
-          currentDataRow = oneDayPrice[i];
-          break;
-        }
-      }
-    }
-  }
-
   let displayLastLogicalRangeValue;
 
   const fitContentChart = async () => {
@@ -735,56 +672,6 @@
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
-      /*
-    if (data?.user) {
-      const response = await fetch("/api/historical-price", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ ticker: $stockTicker, timePeriod: timePeriod }),
-      });
-
-      exportList = await response.json();
-
-      exportList = exportList?.map(
-        ({ time, open, high, low, close, date }) => ({
-          date: timePeriod === "max" ? time : date, // Use 'time' if timePeriod is "max", otherwise use 'date'
-          open,
-          high,
-          low,
-          close,
-        }),
-      );
-
-      const csvRows = [];
-
-      // Add headers row
-      csvRows.push("time,open,high,low,close");
-
-      // Add data rows
-      for (const row of exportList) {
-        const csvRow = `${row.date},${row.open},${row.high},${row.low},${row.close}`;
-        csvRows.push(csvRow);
-      }
-
-      // Create CSV blob and trigger download
-      const csv = csvRows.join("\n");
-      const blob = new Blob([csv], { type: "text/csv" });
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.setAttribute("hidden", "");
-      a.setAttribute("href", url);
-      a.setAttribute("download", `${$stockTicker}_${timePeriod}.csv`);
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-    } else {
-      toast.error("Please Sign In", {
-        style: "border-radius: 200px; background: #333; color: #fff;",
-      });
-    }
-      */
     } else {
       goto("/pricing");
     }
@@ -905,13 +792,7 @@
               <div
                 class="text-2xl md:text-3xl font-bold text-white flex flex-row items-center w-full"
               >
-                {#if $isCrosshairMoveActive}
-                  {displayLegend?.close}
-                {:else if !$isCrosshairMoveActive && $realtimePrice !== null}
-                  {$currentPortfolioPrice}
-                {:else}
-                  {displayLegend?.close}
-                {/if}
+                {displayLegend?.close}
 
                 {#if $priceIncrease === true}
                   <div
@@ -1152,7 +1033,183 @@
               {:else}
                 <div class="mt-4 lg:flex lg:flex-row lg:gap-x-4 w-full">
                   <div
-                    class="order-2 sm:order-1 flex flex-row space-x-2 tiny:space-x-3 xs:space-x-4"
+                    class="order-1 sm:order-2 grow overflow-hidden border-t border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
+                  >
+                    <div
+                      class="flex items-center justify-between py-1 sm:pt-0.5"
+                    >
+                      <div class="hide-scroll overflow-x-auto">
+                        <ul
+                          class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
+                        >
+                          {#each intervals as interval}
+                            <li>
+                              <button
+                                on:click={() => changeData(interval)}
+                                class="px-1 py-1 text-smaller xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
+                              >
+                                <span
+                                  class="block {displayData === interval
+                                    ? 'text-white'
+                                    : 'text-gray-400'}">{interval}</span
+                                >
+                                <div
+                                  class="{displayData === interval
+                                    ? `bg-[${colorChange}] `
+                                    : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
+                                />
+                              </button>
+                            </li>
+                          {/each}
+                        </ul>
+                      </div>
+                      <div
+                        class="flex shrink flex-row space-x-1 pr-1 text-smaller sm:text-base"
+                      >
+                        <span
+                          class={displayLegend?.change >= 0
+                            ? "before:content-['+'] text-[#00FC50]"
+                            : "text-[#FF2F1F]"}
+                        >
+                          {displayLegend?.change}%
+                        </span>
+
+                        <span class="hidden text-gray-200 sm:block"
+                          >({displayData})</span
+                        >
+                      </div>
+                    </div>
+                    <Chart
+                      {...options}
+                      autoSize={true}
+                      ref={(api) => (chart = api)}
+                    >
+                      {#if displayData === "1D"}
+                        <AreaSeries
+                          reactive={true}
+                          data={oneDayPrice?.map(({ time, close }) => ({
+                            time,
+                            value: close,
+                          }))}
+                          lineWidth={1.5}
+                          priceScaleId="right"
+                          lineColor={colorChange}
+                          topColor={topColorChange}
+                          bottomColor={bottomColorChange}
+                          ref={handleSeriesReference}
+                          priceLineVisible={false}
+                        >
+                          <PriceLine
+                            price={oneDayPrice?.at(0)?.close}
+                            lineWidth={1}
+                            color="#fff"
+                          />
+                        </AreaSeries>
+                      {:else if displayData === "1W"}
+                        <AreaSeries
+                          data={oneWeekPrice?.map(({ time, close }) => ({
+                            time,
+                            value: close,
+                          }))}
+                          lineWidth={1.5}
+                          priceScaleId="right"
+                          lineColor={colorChange}
+                          topColor={topColorChange}
+                          bottomColor={bottomColorChange}
+                          ref={handleSeriesReference}
+                          priceLineVisible={false}
+                        >
+                          <PriceLine
+                            price={oneWeekPrice?.at(0)?.close}
+                            lineWidth={1}
+                            color="#fff"
+                          />
+                        </AreaSeries>
+                      {:else if displayData === "1M"}
+                        <AreaSeries
+                          data={oneMonthPrice?.map(({ time, close }) => ({
+                            time: time,
+                            value: close,
+                          }))}
+                          lineWidth={1.5}
+                          priceScaleId="right"
+                          lineColor={colorChange}
+                          topColor={topColorChange}
+                          bottomColor={bottomColorChange}
+                          ref={handleSeriesReference}
+                          priceLineVisible={false}
+                        >
+                          <PriceLine
+                            price={oneMonthPrice?.at(0)?.close}
+                            lineWidth={1}
+                            color="#fff"
+                          />
+                        </AreaSeries>
+                      {:else if displayData === "6M"}
+                        <AreaSeries
+                          data={sixMonthPrice?.map(({ time, close }) => ({
+                            time,
+                            value: close,
+                          }))}
+                          lineWidth={1.5}
+                          priceScaleId="right"
+                          lineColor={colorChange}
+                          topColor={topColorChange}
+                          bottomColor={bottomColorChange}
+                          ref={handleSeriesReference}
+                          priceLineVisible={false}
+                        >
+                          <PriceLine
+                            price={sixMonthPrice?.at(0)?.close}
+                            lineWidth={1}
+                            color="#fff"
+                          />
+                        </AreaSeries>
+                      {:else if displayData === "1Y"}
+                        <AreaSeries
+                          data={oneYearPrice?.map(({ time, close }) => ({
+                            time,
+                            value: close,
+                          }))}
+                          lineWidth={1.5}
+                          priceScaleId="right"
+                          lineColor={colorChange}
+                          topColor={topColorChange}
+                          bottomColor={bottomColorChange}
+                          ref={handleSeriesReference}
+                          priceLineVisible={false}
+                        >
+                          <PriceLine
+                            price={oneYearPrice?.at(0)?.close}
+                            lineWidth={1}
+                            color="#fff"
+                          />
+                        </AreaSeries>
+                      {:else if displayData === "MAX"}
+                        <AreaSeries
+                          data={maxPrice?.map(({ time, close }) => ({
+                            time,
+                            value: close,
+                          }))}
+                          lineWidth={1.5}
+                          priceScaleId="right"
+                          lineColor={colorChange}
+                          topColor={topColorChange}
+                          bottomColor={bottomColorChange}
+                          ref={handleSeriesReference}
+                          priceLineVisible={false}
+                        >
+                          <PriceLine
+                            price={maxPrice?.at(0)?.close}
+                            lineWidth={1}
+                            color="#fff"
+                          />
+                        </AreaSeries>
+                      {/if}
+                    </Chart>
+                  </div>
+                  <div
+                    class="order-5 lg:order-1 flex flex-row space-x-2 tiny:space-x-3 xs:space-x-4"
                   >
                     <table
                       class="w-[50%] text-sm text-white tiny:text-small lg:w-full lg:min-w-[210px]"
@@ -1391,175 +1448,6 @@
                       </tbody>
                     </table>
                   </div>
-                  <div
-                    class="order-1 sm:order-2 grow overflow-hidden border-t border-gray-600 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
-                  >
-                    <div
-                      class="flex items-center justify-between py-1 sm:pt-0.5"
-                    >
-                      <div class="hide-scroll overflow-x-auto">
-                        <ul
-                          class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
-                        >
-                          {#each intervals as interval}
-                            <li>
-                              <button
-                                on:click={() => changeData(interval)}
-                                class="px-1 py-1 text-smaller xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
-                              >
-                                <span
-                                  class="block {displayData === interval
-                                    ? 'text-white'
-                                    : 'text-gray-400'}">{interval}</span
-                                >
-                                <div
-                                  class="{displayData === interval
-                                    ? `bg-[${colorChange}] `
-                                    : 'bg-[#09090B]'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
-                                />
-                              </button>
-                            </li>
-                          {/each}
-                        </ul>
-                      </div>
-                      <div
-                        class="flex shrink flex-row space-x-1 pr-1 text-smaller sm:text-base"
-                      >
-                        <span class="text-green-vivid before:content-['+']"
-                          >0.80%</span
-                        > <span class="hidden text-faded sm:block">(1D)</span>
-                      </div>
-                    </div>
-                    <Chart
-                      {...options}
-                      autoSize={true}
-                      ref={(api) => (chart = api)}
-                      on:crosshairMove={handleCrosshairMove}
-                    >
-                      {#if displayData === "1D"}
-                        <AreaSeries
-                          reactive={true}
-                          data={oneDayPrice?.map(({ time, close }) => ({
-                            time,
-                            value: close,
-                          }))}
-                          lineWidth={1.5}
-                          priceScaleId="right"
-                          lineColor={colorChange}
-                          topColor={topColorChange}
-                          bottomColor={bottomColorChange}
-                          ref={handleSeriesReference}
-                          priceLineVisible={false}
-                        >
-                          <PriceLine
-                            price={oneDayPrice?.at(0)?.close}
-                            lineWidth={1}
-                            color="#fff"
-                          />
-                        </AreaSeries>
-                      {:else if displayData === "1W"}
-                        <AreaSeries
-                          data={oneWeekPrice?.map(({ time, close }) => ({
-                            time,
-                            value: close,
-                          }))}
-                          lineWidth={1.5}
-                          priceScaleId="right"
-                          lineColor={colorChange}
-                          topColor={topColorChange}
-                          bottomColor={bottomColorChange}
-                          ref={handleSeriesReference}
-                          priceLineVisible={false}
-                        >
-                          <PriceLine
-                            price={oneWeekPrice?.at(0)?.close}
-                            lineWidth={1}
-                            color="#fff"
-                          />
-                        </AreaSeries>
-                      {:else if displayData === "1M"}
-                        <AreaSeries
-                          data={oneMonthPrice?.map(({ time, close }) => ({
-                            time: time,
-                            value: close,
-                          }))}
-                          lineWidth={1.5}
-                          priceScaleId="right"
-                          lineColor={colorChange}
-                          topColor={topColorChange}
-                          bottomColor={bottomColorChange}
-                          ref={handleSeriesReference}
-                          priceLineVisible={false}
-                        >
-                          <PriceLine
-                            price={oneMonthPrice?.at(0)?.close}
-                            lineWidth={1}
-                            color="#fff"
-                          />
-                        </AreaSeries>
-                      {:else if displayData === "6M"}
-                        <AreaSeries
-                          data={sixMonthPrice?.map(({ time, close }) => ({
-                            time,
-                            value: close,
-                          }))}
-                          lineWidth={1.5}
-                          priceScaleId="right"
-                          lineColor={colorChange}
-                          topColor={topColorChange}
-                          bottomColor={bottomColorChange}
-                          ref={handleSeriesReference}
-                          priceLineVisible={false}
-                        >
-                          <PriceLine
-                            price={sixMonthPrice?.at(0)?.close}
-                            lineWidth={1}
-                            color="#fff"
-                          />
-                        </AreaSeries>
-                      {:else if displayData === "1Y"}
-                        <AreaSeries
-                          data={oneYearPrice?.map(({ time, close }) => ({
-                            time,
-                            value: close,
-                          }))}
-                          lineWidth={1.5}
-                          priceScaleId="right"
-                          lineColor={colorChange}
-                          topColor={topColorChange}
-                          bottomColor={bottomColorChange}
-                          ref={handleSeriesReference}
-                          priceLineVisible={false}
-                        >
-                          <PriceLine
-                            price={oneYearPrice?.at(0)?.close}
-                            lineWidth={1}
-                            color="#fff"
-                          />
-                        </AreaSeries>
-                      {:else if displayData === "MAX"}
-                        <AreaSeries
-                          data={maxPrice?.map(({ time, close }) => ({
-                            time,
-                            value: close,
-                          }))}
-                          lineWidth={1.5}
-                          priceScaleId="right"
-                          lineColor={colorChange}
-                          topColor={topColorChange}
-                          bottomColor={bottomColorChange}
-                          ref={handleSeriesReference}
-                          priceLineVisible={false}
-                        >
-                          <PriceLine
-                            price={maxPrice?.at(0)?.close}
-                            lineWidth={1}
-                            color="#fff"
-                          />
-                        </AreaSeries>
-                      {/if}
-                    </Chart>
-                  </div>
                 </div>
               {/if}
             </div>
@@ -1581,8 +1469,12 @@
 
           <!--End Graph-->
 
-          <div class="mt-6 flex flex-row gap-x-14 items-start w-full">
-            <div class="space-y-6 lg:order-2 lg:pt-1 w-[45%] ml-auto">
+          <div
+            class="mt-6 flex flex-col lg:flex-row gap-x-14 items-start w-full"
+          >
+            <div
+              class="space-y-6 lg:order-2 lg:pt-1 sm:pl-7 lg:pl-0 w-full lg:w-[45%] sm:ml-auto"
+            >
               <Sidecard {data} />
               <div class="lg:sticky lg:top-20"></div>
             </div>