From 28708ed8af71fcd75ed7b9ce64bd5592fe87c18d Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sun, 3 Nov 2024 23:00:10 +0100 Subject: [PATCH] make dividend table sortable --- src/routes/dividends-calendar/+page.svelte | 121 +++++++++++++++------ src/routes/earnings-calendar/+page.svelte | 21 ++-- 2 files changed, 98 insertions(+), 44 deletions(-) diff --git a/src/routes/dividends-calendar/+page.svelte b/src/routes/dividends-calendar/+page.svelte index 42f3f52a..b0216530 100644 --- a/src/routes/dividends-calendar/+page.svelte +++ b/src/routes/dividends-calendar/+page.svelte @@ -10,6 +10,9 @@ import { screenWidth, numberOfUnreadNotification } from "$lib/store"; import { abbreviateNumber } from "$lib/utils"; import ArrowLogo from "lucide-svelte/icons/move-up-right"; + import TableHeader from "$lib/components/Table/TableHeader.svelte"; + + import HoverStockChart from "$lib/components/HoverStockChart.svelte"; export let data; let currentWeek = startOfWeek(new Date(), { weekStartsOn: 1 }); @@ -34,6 +37,7 @@ formattedFriday, ]; let weekday = []; + let rawWeekday = []; let startDate = startOfWeek(currentWeek, { weekStartsOn: 1 }); let endDate = addDays(startDate, 4); @@ -123,6 +127,7 @@ formattedFriday, ]; weekday = []; + rawWeekday = []; startDate = startOfWeek(currentWeek, { weekStartsOn: 1 }); endDate = addDays(startDate, 4); @@ -168,8 +173,9 @@ // Filter out entries with company name "---" // Sort and map the filtered data - weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap); + rawWeekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap); } + weekday = rawWeekday; } } @@ -192,8 +198,9 @@ // Filter out entries with company name "---" // Sort and map the filtered data - weekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap); + rawWeekday[i] = dayData.sort((a, b) => b.marketCap - a.marketCap); } + weekday = rawWeekday; } } } @@ -217,6 +224,82 @@ } } } + + let columns = [ + { key: "symbol", label: "Symbol", align: "left" }, + { key: "name", label: "Name", align: "left" }, + { key: "marketCap", label: "Market Cap", align: "right" }, + { key: "revenue", label: "Revenue", align: "right" }, + { key: "adjDividend", label: "Cash Amount", align: "right" }, + { key: "paymentDate", label: "Payment Date", align: "right" }, + ]; + + let sortOrders = { + symbol: { order: "none", type: "string" }, + name: { order: "none", type: "string" }, + marketCap: { order: "none", type: "number" }, + revenue: { order: "none", type: "number" }, + adjDividend: { order: "none", type: "number" }, + paymentDate: { order: "none", type: "date" }, + }; + + $: originalData = rawWeekday[selectedWeekday]; + + 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"]; + + 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") { + weekday[selectedWeekday] = [...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 + weekday[selectedWeekday] = [...originalData]?.sort(compareValues); + }; @@ -389,33 +472,7 @@ class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4" > - - Symbol - Company Name - Market Cap - Revenue - - Cash Amount - Payment Date - + {#each day as item} @@ -426,11 +483,7 @@ - {item?.symbol} - + b?.marketCap - a?.marketCap); + rawWeekday[i] = dayData?.sort((a, b) => b?.marketCap - a?.marketCap); } + weekday = rawWeekday; } } @@ -195,8 +199,9 @@ // Filter out entries with company name "---" // Sort and map the filtered data - weekday[i] = dayData?.sort((a, b) => b?.marketCap - a?.marketCap); + rawWeekday[i] = dayData?.sort((a, b) => b?.marketCap - a?.marketCap); } + weekday = rawWeekday; } } } @@ -239,6 +244,8 @@ release: { order: "none", type: "string" }, }; + $: originalData = rawWeekday[selectedWeekday]; + const sortData = (key) => { // Reset all other keys to 'none' except the current key for (const k in sortOrders) { @@ -250,8 +257,6 @@ // Cycle through 'none', 'asc', 'desc' for the clicked key const orderCycle = ["none", "asc", "desc"]; - let originalData = weekday[selectedWeekday]; - const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order); sortOrders[key].order = orderCycle[(currentOrderIndex + 1) % orderCycle.length]; @@ -294,7 +299,7 @@ }; // Sort using the generic comparison function - weekday[selectedWeekday] = [...originalData].sort(compareValues); + weekday[selectedWeekday] = [...originalData]?.sort(compareValues); }; @@ -478,11 +483,7 @@ - {item?.symbol} +