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

sorting column

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-14 16:21:09 +02:00
parent 2881632418
commit 9abc052d3f
1 changed files with 75 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/routes/analysts/+page.svelte
View File

@ -34,94 +34,77 @@ window.addEventListener('scroll', handleScroll);
}) })
let order = '';
let sortBy = ''; // Default sorting by change percentage
function changeOrder(state:string) {
if (state === 'highToLow') let sortOrders = {
{ rank: 'none',
order = 'lowToHigh'; successRate: 'none',
} avgReturn: 'none',
else { totalRatings: 'none',
order = 'highToLow'; lastRating: 'none',
};
// Generalized sorting function
function sortData(key) {
// Reset all other keys to 'none' except the current key
for (const k in sortOrders) {
if (k !== key) {
sortOrders[k] = 'none';
} }
} }
const sortByRank = (tickerList) => { // Cycle through 'none', 'asc', 'desc' for the clicked key
return tickerList?.sort(function(a, b) { const orderCycle = ['none', 'asc', 'desc'];
if(order === 'highToLow') const originalData = rawData?.slice(0,40)
{
return b?.rank - a?.rank;
}
else {
return a?.rank - b?.rank;
}
}); const currentOrderIndex = orderCycle.indexOf(sortOrders[key]);
} sortOrders[key] = orderCycle[(currentOrderIndex + 1) % orderCycle.length];
const sortBySuccessRate = (tickerList) => { const sortOrder = sortOrders[key];
return tickerList?.sort(function(a, b) {
if(order === 'highToLow')
{
return b?.successRate - a?.successRate;
}
else {
return a?.successRate - b?.successRate;
}
});
}
const sortByAvgReturn = (tickerList) => {
return tickerList?.sort(function(a, b) {
if(order === 'highToLow')
{
return b?.avgReturn - a?.avgReturn;
}
else {
return a?.avgReturn - b?.avgReturn;
}
});
}
const sortByTotalRatings = (tickerList) => {
return tickerList?.sort(function(a, b) {
if(order === 'highToLow')
{
return b?.totalRatings - a?.totalRatings;
}
else {
return a?.totalRatings - b?.totalRatings;
}
});
}
$: {
if(order)
{
if(sortBy === 'rank')
{
analytRatingList = sortByRank(rawData)?.slice(0,50);
}
else if(sortBy === 'successRate')
{
analytRatingList = sortBySuccessRate(rawData)?.slice(0,50);
}
else if(sortBy === 'avgReturn')
{
analytRatingList = sortByAvgReturn(rawData)?.slice(0,50);
}
else if(sortBy === 'totalRatings')
{
analytRatingList = sortByTotalRatings(rawData)?.slice(0,50);
}
// 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 comparison functions for each key
const compareFunctions = {
rank: (a, b) => {
const numA = parseFloat(a?.rank);
const numB = parseFloat(b?.rank);
return sortOrder === 'asc' ? numA - numB : numB - numA;
},
analystName: (a, b) => {
const nameA = a?.analystName.toUpperCase();
const nameB = b?.analystName.toUpperCase();
return sortOrder === 'asc' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
},
successRate: (a, b) => {
const numA = parseFloat(a?.successRate);
const numB = parseFloat(b?.successRate);
return sortOrder === 'asc' ? numA - numB : numB - numA;
},
avgReturn: (a, b) => {
const numA = parseFloat(a?.avgReturn);
const numB = parseFloat(b?.avgReturn);
return sortOrder === 'asc' ? numA - numB : numB - numA;
},
totalRatings: (a, b) => {
const numA = parseFloat(a.totalRatings);
const numB = parseFloat(b.totalRatings);
return sortOrder === 'asc' ? numA - numB : numB - numA;
},
lastRating: (a, b) => {
const timeA = new Date(a?.lastRating);
const timeB = new Date(b?.lastRating);
return sortOrder === 'asc' ? timeA - timeB : timeB - timeA;
},
};
// Sort using the appropriate comparison function
analytRatingList = [...originalData].sort(compareFunctions[key]);
}
</script> </script>
@ -225,34 +208,35 @@ $: {
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"> <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
<thead> <thead>
<tr class="bg-[#09090B] border-b border-[#27272A]"> <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"> <th on:click={() => sortData('rank')} class="cursor-pointer select-none text-white font-semibold text-[1rem] whitespace-nowrap">
Rank 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> <svg class="flex-shrink-0 w-4 h-4 inline-block {sortOrders['rank'] === 'asc' ? 'rotate-180' : sortOrders['rank'] === 'desc' ? '' : 'hidden'} " viewBox="0 0 20 20" fill="currentColor" style="max-width:50px"><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>
<th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"> <th on:click={() => sortData('analystName')} class="cursor-pointer select-none text-white font-semibold text-[1rem] whitespace-nowrap">
Analyst Analyst
<svg class="flex-shrink-0 w-4 h-4 inline-block {sortOrders['analystName'] === 'asc' ? 'rotate-180' : sortOrders['analystName'] === 'desc' ? '' : 'hidden'} " viewBox="0 0 20 20" fill="currentColor" style="max-width:50px"><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>
<th on:click={() => sortData('successRate')} class="text-end cursor-pointer select-none text-white font-semibold text-[1rem] whitespace-nowrap">
<th on:click={() => { sortBy = 'successRate'; changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Success Rate Success Rate
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'successRate' ? '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> <svg class="flex-shrink-0 w-4 h-4 inline-block {sortOrders['successRate'] === 'asc' ? 'rotate-180' : sortOrders['successRate'] === 'desc' ? '' : 'hidden'} " viewBox="0 0 20 20" fill="currentColor" style="max-width:50px"><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>
<th on:click={() => { sortBy = 'avgReturn'; changeOrder(order); }} class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold"> <th on:click={() => sortData('avgReturn')} class="text-end cursor-pointer select-none text-white font-semibold text-[1rem] whitespace-nowrap">
Avg. return Avg. Return
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'avgReturn' ? '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> <svg class="flex-shrink-0 w-4 h-4 inline-block {sortOrders['avgReturn'] === 'asc' ? 'rotate-180' : sortOrders['avgReturn'] === 'desc' ? '' : 'hidden'} " viewBox="0 0 20 20" fill="currentColor" style="max-width:50px"><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>
<th on:click={() => { sortBy = 'totalRatings'; changeOrder(order); }} class="cursor-pointer text-white font-semibold text-end text-[1rem]"> <th on:click={() => sortData('totalRatings')} class="text-end cursor-pointer select-none text-white font-semibold text-[1rem] whitespace-nowrap">
Total Ratings Total Ratings
<svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'totalRatings' ? '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> <svg class="flex-shrink-0 w-4 h-4 inline-block {sortOrders['totalRatings'] === 'asc' ? 'rotate-180' : sortOrders['totalRatings'] === 'desc' ? '' : 'hidden'} " viewBox="0 0 20 20" fill="currentColor" style="max-width:50px"><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>
<!-- <!--
<th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"> <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
Main Sector Main Sector
</th> </th>
--> -->
<th class="text-white font-semibold text-end text-[1rem]"> <th on:click={() => sortData('lastRating')} class="text-end cursor-pointer select-none text-white font-semibold text-[1rem] whitespace-nowrap">
Last Rating Last Rating
<svg class="flex-shrink-0 w-4 h-4 inline-block {sortOrders['lastRating'] === 'asc' ? 'rotate-180' : sortOrders['lastRating'] === 'desc' ? '' : 'hidden'} " viewBox="0 0 20 20" fill="currentColor" style="max-width:50px"><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>
</tr> </tr>