update bitcoin etf list

2024-11-12 11:55:42 +01:00 · 2024-11-12 11:55:42 +01:00 · 1457c4bf87
commit 1457c4bf87
parent 093ff73a6d
3 changed files with 161 additions and 52 deletions
--- a/src/routes/list/bitcoin-etfs/+page.svelte
+++ b/src/routes/list/bitcoin-etfs/+page.svelte
@ -2,10 +2,13 @@
  import { goto } from "$app/navigation";
  import { screenWidth } from "$lib/store";
  import { abbreviateNumber } from "$lib/utils";
-
+  import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import HoverStockChart from "$lib/components/HoverStockChart.svelte";
+  import DownloadData from "$lib/components/DownloadData.svelte";
  export let data;

  let rawData = data?.getETFBitcoinList;
+  let displayList = rawData;

  const totalAssets = rawData?.reduce(
    (total, etf) => total + etf?.totalAssets,
@ -15,12 +18,90 @@
    rawData?.reduce((total, item) => total + item?.expenseRatio || 0, 0) /
    rawData?.length;

+  let columns = [
+    { key: "rank", label: "Rank", align: "center" },
+    { key: "symbol", label: "Symbol", align: "left" },
+    { key: "name", label: "Name", align: "left" },
+    { key: "price", label: "Price", align: "right" },
+    { key: "changesPercentage", label: "% Change", align: "right" },
+    { key: "expenseRatio", label: "Expense Ratio", align: "right" },
+    { key: "totalAssets", label: "Assets", align: "right" },
+  ];
+
+  let sortOrders = {
+    rank: { order: "none", type: "number" },
+    symbol: { order: "none", type: "string" },
+    name: { order: "none", type: "string" },
+    price: { order: "none", type: "number" },
+    changesPercentage: { order: "none", type: "number" },
+    expenseRatio: { order: "none", type: "number" },
+    totalAssets: { 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";
+      }
+    }
+
+    // Cycle through 'none', 'asc', 'desc' for the clicked key
+    const orderCycle = ["none", "asc", "desc"];
+
+    let originalData = data?.getETFBitcoinList;
+
+    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") {
+      displayList = [...originalData]; // 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
+    displayList = [...originalData].sort(compareValues);
+  };
+
  $: charNumber = $screenWidth < 640 ? 15 : 20;
 </script>

 <section class="w-full overflow-hidden m-auto">
  <div
-    class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
+    class="border border-gray-600 w-full sm:flex sm:flex-row sm:items-center m-auto text-white bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4"
  >
    <svg
      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
@ -36,33 +117,47 @@
    offering investors exposure to the cryptocurrency's price.
  </div>

-  <div class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-lg">
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total ETFs
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {rawData?.length}
+  <div
+    class="mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
+  >
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total ETFs</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {new Intl.NumberFormat("en")?.format(rawData?.length)}
+        </div>
      </div>
    </div>
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Total Assets</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {abbreviateNumber(totalAssets)}
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
+      <div class="flex items-center justify-between sm:block">
+        <div class="text-sm font-normal text-white">Avg. Cost</div>
+        <div
+          class="mt-1 break-words font-semibold leading-8 text-white tiny:text-lg xs:text-xl sm:text-2xl"
+        >
+          {avgExpenseRatio?.toFixed(2)}%
+        </div>
+      </div>
+    </div>
+  </div>

-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Total Assets
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        ${abbreviateNumber(totalAssets)}
-      </div>
-    </div>
-
-    <div class="stat">
-      <div class="stat-title text-sm sm:text-lg font-semibold text-white">
-        Avg. Cost
-      </div>
-      <div class="stat-value text-lg font-semibold text-white">
-        {avgExpenseRatio?.toFixed(2)}%
-      </div>
-    </div>
+  <div class="flex flex-row items-end justify-end w-fit ml-auto mt-5 mb-2">
+    <DownloadData
+      {data}
+      rawData={data?.getETFBitcoinList}
+      title="etf_bitcoin_list"
+    />
  </div>

  <!-- Page wrapper -->
@ -73,36 +168,26 @@
        class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
      >
        <thead>
-          <tr class="border border-slate-800">
-            <th class="text-white font-semibold text-[1rem]">Symbol</th>
-            <th class="text-white font-semibold text-[1rem] whitespace-nowrap"
-              >Fund Name</th
-            >
-            <th
-              class="text-white font-semibold text-end sm:text-start text-[1rem]"
-              >Assets</th
-            >
-            <th
-              class="text-white font-semibold text-[1rem] text-end whitespace-nowrap"
-              >Expense Ratio</th
-            >
-          </tr>
+          <TableHeader {columns} {sortOrders} {sortData} />
        </thead>
        <tbody>
-          {#each rawData as item, index}
+          {#each displayList as item}
            <!-- row -->
            <tr
-              on:click={() => goto("/etf/" + item?.symbol)}
-              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+              class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
            >
              <td
-                class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white font-semibold sm:font-normal text-center text-sm sm:text-[1rem] border-b-[#09090B]"
              >
-                {item?.symbol}
+                {item?.rank}
+              </td>
+
+              <td class="text-[1rem] border-b-[#09090B]">
+                <HoverStockChart symbol={item?.symbol} />
              </td>

              <td
-                class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
              >
                {item?.name?.length > charNumber
                  ? item?.name?.slice(0, charNumber) + "..."
@ -110,15 +195,35 @@
              </td>

              <td
-                class="text-white font-medium text-end sm:text-start text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
              >
-                {abbreviateNumber(item?.totalAssets, true)}
+                {item?.price}
+              </td>
+
+              <td
+                class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
+              >
+                {#if item?.changesPercentage >= 0}
+                  <span class="text-[#00FC50]"
+                    >+{item.changesPercentage?.toFixed(2)}%</span
+                  >
+                {:else}
+                  <span class="text-[#FF2F1F]"
+                    >{item.changesPercentage?.toFixed(2)}%
+                  </span>
+                {/if}
+              </td>
+
+              <td
+                class="text-white text-end text-sm sm:text-[1rem] border-b-[#09090B]"
+              >
+                {item?.expenseRatio}%
              </td>

              <td
                class="text-white font-medium text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
              >
-                {item?.expenseRatio}%
+                {abbreviateNumber(item?.totalAssets)}
              </td>
            </tr>
          {/each}
--- a/src/routes/list/dividend-aristocrats/+page.svelte
+++ b/src/routes/list/dividend-aristocrats/+page.svelte
@ -109,7 +109,7 @@

 <section class="w-full overflow-hidden m-auto">
  <div
-    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4"
+    class="w-full sm:flex sm:flex-row sm:items-center m-auto text-white border border-gray-600 sm:rounded-lg h-auto p-5 mb-4"
  >
    <svg
      class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
@ -161,7 +161,9 @@
                <HoverStockChart symbol={item?.symbol} />
              </td>

-              <td class="text-white border-b-[#09090B] whitespace-nowrap">
+              <td
+                class="text-white text-sm sm:text-[1rem] border-b-[#09090B] whitespace-nowrap"
+              >
                {item?.name?.length > charNumber
                  ? item?.name?.slice(0, charNumber) + "..."
                  : item?.name}
--- a/src/routes/list/dividend-kings/+page.svelte
+++ b/src/routes/list/dividend-kings/+page.svelte
@ -161,7 +161,9 @@
                <HoverStockChart symbol={item?.symbol} />
              </td>

-              <td class="text-white border-b-[#09090B] whitespace-nowrap">
+              <td
+                class="text-white border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap"
+              >
                {item?.name?.length > charNumber
                  ? item?.name?.slice(0, charNumber) + "..."
                  : item?.name}