From 990c818727159137e2c8b9822c826025f0a7ba54 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 7 Nov 2024 19:32:03 +0100
Subject: [PATCH] make table sortable for industry page

---
 src/lib/components/SectorSegmentation.svelte |  55 +--------
 src/lib/components/Sidecard.svelte           |  55 +--------
 src/lib/utils.ts                             |  51 ++++++++
 src/routes/industry/+page.svelte             |  54 +--------
 src/routes/industry/sectors/+page.svelte     |  54 +--------
 src/routes/list/industry/[slug]/+page.svelte | 117 ++++++++++++-------
 6 files changed, 135 insertions(+), 251 deletions(-)

diff --git a/src/lib/components/SectorSegmentation.svelte b/src/lib/components/SectorSegmentation.svelte
index 1299a12e..918e775e 100644
--- a/src/lib/components/SectorSegmentation.svelte
+++ b/src/lib/components/SectorSegmentation.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { etfTicker, screenWidth } from "$lib/store";
-  import { formatString } from "$lib/utils";
+  import { etfTicker } from "$lib/store";
+  import { formatString, sectorNavigation } from "$lib/utils";
   import { goto } from "$app/navigation";
   import InfoModal from "$lib/components/InfoModal.svelte";
 
@@ -8,57 +8,6 @@
 
   let showFullStats = false;
 
-  const sectorNavigation = [
-    {
-      title: "Financial Services",
-      link: "/list/sector/financial",
-    },
-    {
-      title: "Finance",
-      link: "/list/sector/financial",
-    },
-    {
-      title: "Healthcare",
-      link: "/list/sector/healthcare",
-    },
-    {
-      title: "Technology",
-      link: "/list/sector/technology",
-    },
-    {
-      title: "Industrials",
-      link: "/list/sector/industrials",
-    },
-    {
-      title: "Energy",
-      link: "/list/sector/energy",
-    },
-    {
-      title: "Utilities",
-      link: "/list/sector/utilities",
-    },
-    {
-      title: "Consumer Cyclical",
-      link: "/list/sector/consumer-cyclical",
-    },
-    {
-      title: "Real Estate",
-      link: "/list/sector/real-estate",
-    },
-    {
-      title: "Basic Materials",
-      link: "/list/sector/basic-materials",
-    },
-    {
-      title: "Communication Services",
-      link: "/list/sector/communication-services",
-    },
-    {
-      title: "Consumer Defensive",
-      link: "/list/sector/consumer-defensive",
-    },
-  ];
-
   function sectorSelector(sector) {
     const selectedSector = sectorNavigation?.find(
       (item) => item?.title === sector,
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index bd7a9fe8..0c907bb5 100644
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { stockTicker, screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import { stockTicker } from "$lib/store";
+  import { sectorNavigation } from "$lib/utils";
   export let data;
 
   let info;
@@ -24,57 +24,6 @@
 
   let showFullText = false;
 
-  const sectorNavigation = [
-    {
-      title: "Financial Services",
-      link: "/list/sector/financial",
-    },
-    {
-      title: "Finance",
-      link: "/list/sector/financial",
-    },
-    {
-      title: "Healthcare",
-      link: "/list/sector/healthcare",
-    },
-    {
-      title: "Technology",
-      link: "/list/sector/technology",
-    },
-    {
-      title: "Industrials",
-      link: "/list/sector/industrials",
-    },
-    {
-      title: "Energy",
-      link: "/list/sector/energy",
-    },
-    {
-      title: "Utilities",
-      link: "/list/sector/utilities",
-    },
-    {
-      title: "Consumer Cyclical",
-      link: "/list/sector/consumer-cyclical",
-    },
-    {
-      title: "Real Estate",
-      link: "/list/sector/real-estate",
-    },
-    {
-      title: "Basic Materials",
-      link: "/list/sector/basic-materials",
-    },
-    {
-      title: "Communication Services",
-      link: "/list/sector/communication-services",
-    },
-    {
-      title: "Consumer Defensive",
-      link: "/list/sector/consumer-defensive",
-    },
-  ];
-
   function getIndustryHref(industryName) {
     // Replace spaces with hyphens
     let formattedName = industryName?.replace(/ /g, "-");
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 4ceebcf1..b1387e5b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1321,3 +1321,54 @@ export const getLastTradingDay = () => {
     nyDate.setDate(nyDate.getDate() - 1);
   }
 };
+
+export const sectorNavigation = [
+  {
+    title: "Financial Services",
+    link: "/list/sector/financial",
+  },
+  {
+    title: "Finance",
+    link: "/list/sector/financial",
+  },
+  {
+    title: "Healthcare",
+    link: "/list/sector/healthcare",
+  },
+  {
+    title: "Technology",
+    link: "/list/sector/technology",
+  },
+  {
+    title: "Industrials",
+    link: "/list/sector/industrials",
+  },
+  {
+    title: "Energy",
+    link: "/list/sector/energy",
+  },
+  {
+    title: "Utilities",
+    link: "/list/sector/utilities",
+  },
+  {
+    title: "Consumer Cyclical",
+    link: "/list/sector/consumer-cyclical",
+  },
+  {
+    title: "Real Estate",
+    link: "/list/sector/real-estate",
+  },
+  {
+    title: "Basic Materials",
+    link: "/list/sector/basic-materials",
+  },
+  {
+    title: "Communication Services",
+    link: "/list/sector/communication-services",
+  },
+  {
+    title: "Consumer Defensive",
+    link: "/list/sector/consumer-defensive",
+  },
+];
diff --git a/src/routes/industry/+page.svelte b/src/routes/industry/+page.svelte
index 507c1417..b4df735a 100644
--- a/src/routes/industry/+page.svelte
+++ b/src/routes/industry/+page.svelte
@@ -1,63 +1,11 @@
 <script lang="ts">
   import { screenWidth } from "$lib/store";
   import IndustryTable from "$lib/components/IndustryTable.svelte";
-  import { industryList, sectorList } from "$lib/utils";
-  import { goto } from "$app/navigation";
+  import { industryList, sectorList, sectorNavigation } from "$lib/utils";
 
   export let data;
   let rawData = data?.getSectorIndustryOverview;
 
-  const sectorNavigation = [
-    {
-      title: "Financial Services",
-      link: "/list/sector/financial",
-    },
-    {
-      title: "Finance",
-      link: "/list/sector/financial",
-    },
-    {
-      title: "Healthcare",
-      link: "/list/sector/healthcare",
-    },
-    {
-      title: "Technology",
-      link: "/list/sector/technology",
-    },
-    {
-      title: "Industrials",
-      link: "/list/sector/industrials",
-    },
-    {
-      title: "Energy",
-      link: "/list/sector/energy",
-    },
-    {
-      title: "Utilities",
-      link: "/list/sector/utilities",
-    },
-    {
-      title: "Consumer Cyclical",
-      link: "/list/sector/consumer-cyclical",
-    },
-    {
-      title: "Real Estate",
-      link: "/list/sector/real-estate",
-    },
-    {
-      title: "Basic Materials",
-      link: "/list/sector/basic-materials",
-    },
-    {
-      title: "Communication Services",
-      link: "/list/sector/communication-services",
-    },
-    {
-      title: "Consumer Defensive",
-      link: "/list/sector/consumer-defensive",
-    },
-  ];
-
   $: charNumber = $screenWidth < 640 ? 20 : 30;
 </script>
 
diff --git a/src/routes/industry/sectors/+page.svelte b/src/routes/industry/sectors/+page.svelte
index f3ffbe40..3e8037f3 100644
--- a/src/routes/industry/sectors/+page.svelte
+++ b/src/routes/industry/sectors/+page.svelte
@@ -1,62 +1,10 @@
 <script lang="ts">
   import { screenWidth } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
-  import { goto } from "$app/navigation";
+  import { abbreviateNumber, sectorNavigation } from "$lib/utils";
 
   export let data;
   let rawData = data?.getSectorOverview;
 
-  const sectorNavigation = [
-    {
-      title: "Financial Services",
-      link: "/list/sector/financial",
-    },
-    {
-      title: "Finance",
-      link: "/list/sector/financial",
-    },
-    {
-      title: "Healthcare",
-      link: "/list/sector/healthcare",
-    },
-    {
-      title: "Technology",
-      link: "/list/sector/technology",
-    },
-    {
-      title: "Industrials",
-      link: "/list/sector/industrials",
-    },
-    {
-      title: "Energy",
-      link: "/list/sector/energy",
-    },
-    {
-      title: "Utilities",
-      link: "/list/sector/utilities",
-    },
-    {
-      title: "Consumer Cyclical",
-      link: "/list/sector/consumer-cyclical",
-    },
-    {
-      title: "Real Estate",
-      link: "/list/sector/real-estate",
-    },
-    {
-      title: "Basic Materials",
-      link: "/list/sector/basic-materials",
-    },
-    {
-      title: "Communication Services",
-      link: "/list/sector/communication-services",
-    },
-    {
-      title: "Consumer Defensive",
-      link: "/list/sector/consumer-defensive",
-    },
-  ];
-
   $: charNumber = $screenWidth < 640 ? 20 : 30;
 </script>
 
diff --git a/src/routes/list/industry/[slug]/+page.svelte b/src/routes/list/industry/[slug]/+page.svelte
index 40fc3964..b59503f9 100644
--- a/src/routes/list/industry/[slug]/+page.svelte
+++ b/src/routes/list/industry/[slug]/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
   import { screenWidth } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
   import { onMount } from "svelte";
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import { Chart } from "svelte-echarts";
 
   import { init, use } from "echarts/core";
@@ -139,6 +141,79 @@
   });
 
   $: charNumber = $screenWidth < 640 ? 15 : 20;
+
+  let columns = [
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Name", align: "left" },
+    { key: "marketCap", label: "Market Cap", align: "right" },
+    { key: "changesPercentage", label: "% Change", align: "right" },
+    { key: "volume", label: "Volume", align: "right" },
+    { key: "revenue", label: "Revenue", align: "right" },
+  ];
+
+  let sortOrders = {
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    marketCap: { order: "none", type: "number" },
+    changesPercentage: { order: "none", type: "number" },
+    volume: { order: "none", type: "number" },
+    revenue: { order: "none", type: "number" },
+  };
+
+  const sortData = (key) => {
+    // Reset all other keys to 'none' except the current key
+    for (const k in sortOrders) {
+      if (k !== key) {
+        sortOrders[k].order = "none";
+      }
+    }
+
+    const originalData = rawData;
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+    const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
+    sortOrders[key].order =
+      orderCycle[(currentOrderIndex + 1) % orderCycle.length];
+
+    const sortOrder = sortOrders[key].order;
+
+    // Reset to original data when 'none' and stop further sorting
+    if (sortOrder === "none") {
+      stockList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
+      return;
+    }
+
+    // Define a generic comparison function
+    const compareValues = (a, b) => {
+      const { type } = sortOrders[key];
+      let valueA, valueB;
+      switch (type) {
+        case "date":
+          valueA = new Date(a[key]);
+          valueB = new Date(b[key]);
+          break;
+        case "string":
+          valueA = a[key].toUpperCase();
+          valueB = b[key].toUpperCase();
+          return sortOrder === "asc"
+            ? valueA.localeCompare(valueB)
+            : valueB.localeCompare(valueA);
+        case "number":
+        default:
+          valueA = parseFloat(a[key]);
+          valueB = parseFloat(b[key]);
+          break;
+      }
+      if (sortOrder === "asc") {
+        return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      } else {
+        return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
+      }
+    };
+
+    // Sort using the generic comparison function
+    stockList = [...originalData].sort(compareValues)?.slice(0, 50);
+  };
 </script>
 
 <section class="w-full overflow-hidden m-auto">
@@ -190,38 +265,7 @@
         class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
       >
         <thead>
-          <tr class="bg-[#09090B]">
-            <th
-              class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
-            >
-              Symbol
-            </th>
-            <th
-              class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
-            >
-              Name
-            </th>
-            <th
-              class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
-            >
-              Market Cap
-            </th>
-            <th
-              class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
-            >
-              % Change
-            </th>
-            <th
-              class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
-            >
-              Volume
-            </th>
-            <th
-              class="hidden xl:table-cell text-end bg-[#09090B] text-white text-[1rem] font-semibold"
-            >
-              Revenue
-            </th>
-          </tr>
+          <TableHeader {columns} {sortOrders} {sortData} />
         </thead>
         <tbody>
           {#each stockList as item}
@@ -229,12 +273,7 @@
               class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]"
             >
               <td class="text-sm sm:text-[1rem] whitespace-nowrap text-start">
-                <a
-                  href={`/stocks/${item?.symbol}`}
-                  class="sm:hover:text-white text-blue-400"
-                >
-                  {item?.symbol}
-                </a>
+                <HoverStockChart symbol={item?.symbol} />
               </td>
 
               <td