From 1457c4bf8740711290fdd4d76d0262904b7af2a3 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Tue, 12 Nov 2024 11:55:42 +0100 Subject: [PATCH] update bitcoin etf list --- src/routes/list/bitcoin-etfs/+page.svelte | 203 +++++++++++++----- .../list/dividend-aristocrats/+page.svelte | 6 +- src/routes/list/dividend-kings/+page.svelte | 4 +- 3 files changed, 161 insertions(+), 52 deletions(-) diff --git a/src/routes/list/bitcoin-etfs/+page.svelte b/src/routes/list/bitcoin-etfs/+page.svelte index 3f38d442..dcdbe6d1 100644 --- 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;
-
-
-
- Total ETFs -
-
- {rawData?.length} +
+
+
+
Total ETFs
+
+ {new Intl.NumberFormat("en")?.format(rawData?.length)} +
+
+
+
Total Assets
+
+ {abbreviateNumber(totalAssets)} +
+
+
+
+
+
Avg. Cost
+
+ {avgExpenseRatio?.toFixed(2)}% +
+
+
+
-
-
- Total Assets -
-
- ${abbreviateNumber(totalAssets)} -
-
- -
-
- Avg. Cost -
-
- {avgExpenseRatio?.toFixed(2)}% -
-
+
+
@@ -73,36 +168,26 @@ class="table rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4" > - - Symbol - Fund Name - Assets - Expense Ratio - + - {#each rawData as item, index} + {#each displayList as item} 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]" > - {item?.symbol} + {item?.rank} + + + + {item?.name?.length > charNumber ? item?.name?.slice(0, charNumber) + "..." @@ -110,15 +195,35 @@ - {abbreviateNumber(item?.totalAssets, true)} + {item?.price} + + + + {#if item?.changesPercentage >= 0} + +{item.changesPercentage?.toFixed(2)}% + {:else} + {item.changesPercentage?.toFixed(2)}% + + {/if} + + + + {item?.expenseRatio}% - {item?.expenseRatio}% + {abbreviateNumber(item?.totalAssets)} {/each} diff --git a/src/routes/list/dividend-aristocrats/+page.svelte b/src/routes/list/dividend-aristocrats/+page.svelte index e5900784..63ff754d 100644 --- a/src/routes/list/dividend-aristocrats/+page.svelte +++ b/src/routes/list/dividend-aristocrats/+page.svelte @@ -109,7 +109,7 @@
- + {item?.name?.length > charNumber ? item?.name?.slice(0, charNumber) + "..." : item?.name} diff --git a/src/routes/list/dividend-kings/+page.svelte b/src/routes/list/dividend-kings/+page.svelte index f2ff6faa..914ffc07 100644 --- a/src/routes/list/dividend-kings/+page.svelte +++ b/src/routes/list/dividend-kings/+page.svelte @@ -161,7 +161,9 @@ - + {item?.name?.length > charNumber ? item?.name?.slice(0, charNumber) + "..." : item?.name}