AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sorting columns

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-14 19:49:55 +02:00
parent 5fa9604649
commit 9519d2e606
1 changed files with 80 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
src/routes/analysts/top-stocks/+page.svelte
View File

@ -5,6 +5,7 @@
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { onMount } from 'svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import TableHeader from '$lib/components/Table/TableHeader.svelte';
export let data;
@ -36,82 +37,87 @@ window.addEventListener('scroll', handleScroll);
};
})
let order = '';
let sortBy = ''; // Default sorting by change percentage
function changeOrder(state:string) {
if (state === 'highToLow')
{
order = 'lowToHigh';
}
else {
order = 'highToLow';
let columns = [
{ key: 'rank', label: 'Rank', align: 'left' },
{ key: 'ticker', label: 'Symbol', align: 'left' },
{ key: 'name', label: 'Name', align: 'left' },
{ key: 'counter', label: 'Ratings Count', align: 'right' },
{ key: 'priceTarget', label: 'Price Target', align: 'right' },
{ key: 'price', label: 'Current Price', align: 'right' },
{ key: 'marketCap', label: 'Market Cap', align: 'right' },
{ key: 'upside', label: 'Upside', align: 'right' },
];
let sortOrders = {
rank: { order: 'none', type: 'number' },
ticker: { order: 'none', type: 'string' },
name: { order: 'none', type: 'string' },
counter: { order: 'none', type: 'number' },
priceTarget: { order: 'none', type: 'number' },
price: { order: 'none', type: 'number' },
marketCap: { order: 'none', type: 'number' },
upside: { order: 'none', type: 'number' },
};
const sortData = (key) => {
// Reset all other keys to 'none' except the current key
let finalList = [];
for (const k in sortOrders) {
if (k !== key) {
sortOrders[k].order = 'none';
}
}
const sortByRank = (tickerList) => {
return tickerList?.sort(function(a, b) {
if(order === 'highToLow')
{
return b?.rank - a?.rank;
}
else {
return a?.rank - b?.rank;
// Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ['none', 'asc', 'desc'];
const originalData = rawData?.slice(0, 40);
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') {
analytRatingList = [...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;
const sortByRatingCount = (tickerList) => {
return tickerList?.sort(function(a, b) {
if(order === 'highToLow')
{
return b?.counter - a?.counter;
}
else {
return a?.counter - b?.counter;
}
});
}
const sortByUpside = (tickerList) => {
return tickerList?.sort(function(a, b) {
if(order === 'highToLow')
{
return b?.upside - a?.upside;
}
else {
return a?.upside - b?.upside;
}
});
}
$: {
if(order)
{
if(sortBy === 'rank')
{
analytRatingList = sortByRank(rawData)?.slice(0,50);
}
else if(sortBy === 'ratingCount')
{
analytRatingList = sortByRatingCount(rawData)?.slice(0,50);
}
else if(sortBy === 'upside')
{
analytRatingList = sortByUpside(rawData)?.slice(0,50);
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
analytRatingList = [...originalData].sort(compareValues);
};
$: charNumber = $screenWidth < 640 ? 15 : 20;
$: charNumber = $screenWidth < 640 ? 30 : 20;
@ -218,37 +224,7 @@ $: {
<div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead>
<tr class="bg-[#09090B] border-b border-[#27272A]">
<th on:click={() => { sortBy = 'rank'; changeOrder(order); }} class="cursor-pointer text-center bg-[#09090B] text-white text-[1rem] font-semibold">
Rank
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'rank' ? '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>
<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 on:click={() => { sortBy = 'ratingCount'; changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Ratings Count
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'ratingCount' ? '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>
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Price Target
</th>
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Current Price
</th>
<th on:click={() => { sortBy = 'upside'; changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Upside
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'upside' ? '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>
<th class="sm:hidden text-white font-semibold text-end text-[1rem]">
Market Cap
</th>
</tr>
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each analytRatingList as item, index}
@ -274,11 +250,14 @@ $: {
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
${item?.priceTarget?.toFixed(2)}
{item?.priceTarget?.toFixed(2)}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
${item?.price?.toFixed(2)}
{item?.price?.toFixed(2)}
</td>
<td class="text-end font-medium text-white text-sm sm:text-[1rem] whitespace-nowrap">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap) : '-'}
</td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white">
@ -289,10 +268,6 @@ $: {
{/if}
</td>
<td class="sm:hidden text-end font-medium text-white text-sm">
{item?.marketCap !== null ? abbreviateNumber(item?.marketCap,true) : '-'}
</td>
</tr>
{/each}
</tbody>