From c2c9b298d305da446ca055a8c83968876c6c3353 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 9 Aug 2024 22:03:31 +0200
Subject: [PATCH] add sorting to lobbying tracker

---
 .../corporate-lobbying-tracker/+page.svelte   | 42 ++++++++++++++++---
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/routes/corporate-lobbying-tracker/+page.svelte b/src/routes/corporate-lobbying-tracker/+page.svelte
index 339af9a2..65daef16 100644
--- a/src/routes/corporate-lobbying-tracker/+page.svelte
+++ b/src/routes/corporate-lobbying-tracker/+page.svelte
@@ -13,8 +13,21 @@
       let rawData = []
       let displayList =  [];
 
+      let order = 'highToLow';
+
+  const sortByAmount = (tickerList) => {
+    return tickerList?.sort(function(a, b) {
+      if(order === 'highToLow')
+      {
+        return b?.amount - a?.amount;
+      }
+      else {
+        return a?.amount - b?.amount;
+      }
+       
+      });
+  }
 
-  
     async function infiniteHandler({ detail: { loaded, complete } }) 
     {
     if (displayList?.length === rawData?.length) {
@@ -30,7 +43,7 @@
       
     onMount(() => {
       rawData = data?.getCramerTracker ?? [];
-      displayList = rawData?.slice(0,20) ?? []
+      displayList = rawData?.slice(0,50) ?? []
       isLoaded = true;
     })
     
@@ -46,7 +59,22 @@
       }
     }
     
-          
+function changeOrder(state:string) {
+  if (state === 'highToLow')
+  {
+    order = 'lowToHigh';
+  }
+  else {
+    order = 'highToLow';
+  }
+
+  displayList = sortByAmount(rawData)?.slice(0,50);
+
+}
+
+
+
+
     </script>
     
     <svelte:head>
@@ -158,8 +186,9 @@
                               <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
                                 Sector
                               </th>
-                              <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
+                              <th on:click={() => { changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-sm font-semibold">
                                 Amount
+                                <svg class="w-5 h-5 inline-block {order === 'highToLow' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                               </th>
                             </tr>
                           </thead>
@@ -195,7 +224,10 @@
                               </td>
 
                               <td class="text-white text-sm sm:text-[1rem] text-end">
-                                {item?.amount}
+                                ${new Intl.NumberFormat("en", {
+                                  minimumFractionDigits: 0,
+                                  maximumFractionDigits: 0,
+                              }).format(item?.amount)}
                               </td>