bugfixing insider tracker
This commit is contained in:
MuslemRahimi
parent
518da0f309
commit
569a221f21
@ -4,9 +4,9 @@
|
|||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||||
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
import ArrowLogo from "lucide-svelte/icons/move-up-right";
|
||||||
|
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
|
||||||
|
|
||||||
let isLoaded = false;
|
let isLoaded = false;
|
||||||
let rawData = [];
|
let rawData = [];
|
||||||
@ -65,6 +65,84 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
$: charNumber = $screenWidth < 640 ? 15 : 20;
|
$: charNumber = $screenWidth < 640 ? 15 : 20;
|
||||||
|
|
||||||
|
let columns = [
|
||||||
|
{ key: "date", label: "Date", align: "left" },
|
||||||
|
{ key: "ticker", label: "Symbol", align: "left" },
|
||||||
|
|
||||||
|
{ key: "name", label: "Name", align: "left" },
|
||||||
|
{ key: "price", label: "Price", align: "right" },
|
||||||
|
|
||||||
|
{ key: "changesPercentage", label: "% Change", align: "right" },
|
||||||
|
{ key: "amount", label: "Amount", align: "right" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let sortOrders = {
|
||||||
|
date: { order: "none", type: "date" },
|
||||||
|
ticker: { order: "none", type: "string" },
|
||||||
|
name: { order: "none", type: "string" },
|
||||||
|
changesPercentage: { order: "none", type: "number" },
|
||||||
|
price: { order: "none", type: "number" },
|
||||||
|
amount: { 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 = rawData;
|
||||||
|
|
||||||
|
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]?.slice(0, 50); // 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)?.slice(0, 50);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@ -139,50 +217,7 @@
|
|||||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="bg-[#09090B] border-b border-[#27272A]">
|
<TableHeader {columns} {sortOrders} {sortData} />
|
||||||
<th
|
|
||||||
class="text-start bg-[#09090B] text-white text-[1rem] font-semibold"
|
|
||||||
>
|
|
||||||
Date
|
|
||||||
</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
|
|
||||||
class="text-end bg-[#09090B] text-white text-[1rem] font-semibold"
|
|
||||||
>
|
|
||||||
Sector
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
on:click={() => {
|
|
||||||
changeOrder(order);
|
|
||||||
}}
|
|
||||||
class="cursor-pointer text-end bg-[#09090B] text-white text-[1rem] font-semibold"
|
|
||||||
>
|
|
||||||
Amount
|
|
||||||
<svg
|
|
||||||
class="w-5 h-5 inline-block {order === 'highToLow'
|
|
||||||
? ''
|
|
||||||
: '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>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each displayList as item, index}
|
{#each displayList as item, index}
|
||||||
@ -221,7 +256,25 @@
|
|||||||
<td
|
<td
|
||||||
class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
|
class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
|
||||||
>
|
>
|
||||||
{item?.sector}
|
{item?.price}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white text-end text-sm sm:text-[1rem] font-medium border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{#if item?.changesPercentage >= 0}
|
||||||
|
<span class="text-[#00FC50]"
|
||||||
|
>+{item?.changesPercentage >= 1000
|
||||||
|
? item?.changesPercentage
|
||||||
|
: item?.changesPercentage?.toFixed(2)}%</span
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<span class="text-[#FF2F1F]"
|
||||||
|
>{item?.changesPercentage <= -1000
|
||||||
|
? item?.changesPercentage
|
||||||
|
: item?.changesPercentage?.toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<td class="text-white text-sm sm:text-[1rem] text-end">
|
<td class="text-white text-sm sm:text-[1rem] text-end">
|
||||||
|
|||||||
@ -11,11 +11,10 @@
|
|||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||||
|
|
||||||
let rawData = data?.getAllHedgeFunds;
|
let rawData = data?.getAllHedgeFunds;
|
||||||
console.log(rawData[0]);
|
let displayList = rawData?.slice(0, 20) ?? [];
|
||||||
let displayList = [];
|
|
||||||
let filterQuery = "";
|
let filterQuery = "";
|
||||||
|
|
||||||
let isLoaded = false;
|
let isLoaded = true;
|
||||||
|
|
||||||
async function handleScroll() {
|
async function handleScroll() {
|
||||||
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
@ -28,9 +27,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
displayList = rawData?.slice(0, 20) ?? [];
|
|
||||||
isLoaded = true;
|
|
||||||
|
|
||||||
window.addEventListener("scroll", handleScroll);
|
window.addEventListener("scroll", handleScroll);
|
||||||
//window.addEventListener('keydown', handleKeyDown);
|
//window.addEventListener('keydown', handleKeyDown);
|
||||||
|
|
||||||
@ -126,198 +122,177 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if isLoaded}
|
<section class="w-full overflow-hidden m-auto sm:mt-10 px-0 sm:px-3 mt-10">
|
||||||
<section
|
<div class="p-3 sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||||
class="w-full overflow-hidden m-auto sm:mt-10 px-0 sm:px-3 mt-10"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="p-3 sm:p-0 flex justify-center w-full m-auto overflow-hidden"
|
class="relative flex justify-center items-center overflow-hidden w-full"
|
||||||
>
|
>
|
||||||
<div
|
<main class="w-full">
|
||||||
class="relative flex justify-center items-center overflow-hidden w-full"
|
<div class="w-full pb-3">
|
||||||
>
|
<div class="relative right-0 bg-[#09090B]">
|
||||||
<main class="w-full">
|
<ul
|
||||||
<div class="w-full pb-3">
|
class="relative grid grid-cols-1 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]"
|
||||||
<div class="relative right-0 bg-[#09090B]">
|
|
||||||
<ul
|
|
||||||
class="relative grid grid-cols-1 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]"
|
|
||||||
>
|
|
||||||
<label class="flex flex-row items-center">
|
|
||||||
<input
|
|
||||||
id="modal-search"
|
|
||||||
type="search"
|
|
||||||
class="text-white ml-2 text-[1rem] placeholder-gray-400 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
|
|
||||||
placeholder="Find by name"
|
|
||||||
bind:value={filterQuery}
|
|
||||||
on:input={handleInput}
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
<svg
|
|
||||||
class="ml-auto mr-5 h-8 w-8 inline-block mr-2"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="#fff"
|
|
||||||
d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full m-auto mt-4">
|
|
||||||
<div
|
|
||||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 sm:gap-5"
|
|
||||||
>
|
>
|
||||||
{#each displayList as item}
|
<li
|
||||||
<a
|
class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]"
|
||||||
href={`/hedge-funds/${item?.cik}`}
|
>
|
||||||
class="w-full cursor-pointer bg-[#141417] sm:hover:bg-[#000] transition-colors ease-in-out border sm:hover:border-[#000] sm:hover:shadow-[#8C5F1B] border-gray-800 shadow-md rounded-lg h-auto pb-4 pt-4 mb-7"
|
<label class="flex flex-row items-center">
|
||||||
>
|
<input
|
||||||
<div class="flex flex-col relative">
|
id="modal-search"
|
||||||
<img
|
type="search"
|
||||||
class="absolute -mt-4 w-full m-auto rounded-lg"
|
class="text-white ml-2 text-[1rem] placeholder-gray-400 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
|
||||||
src={cardBackground}
|
placeholder="Find by name"
|
||||||
/>
|
bind:value={filterQuery}
|
||||||
<div
|
on:input={handleInput}
|
||||||
class="flex flex-col justify-center items-center rounded-2xl"
|
autocomplete="off"
|
||||||
>
|
/>
|
||||||
<div
|
<svg
|
||||||
class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative hedge-fund-striped bg-[#20202E] flex items-center justify-center"
|
class="ml-auto mr-5 h-8 w-8 inline-block mr-2"
|
||||||
>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<img
|
viewBox="0 0 24 24"
|
||||||
style="clip-path: circle(50%);"
|
><path
|
||||||
class="rounded-full w-16"
|
fill="#fff"
|
||||||
src={`${cloudFrontUrl}/assets/hedge_funds/default-avatar.png`}
|
d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"
|
||||||
loading="lazy"
|
/></svg
|
||||||
/>
|
>
|
||||||
</div>
|
</label>
|
||||||
<span
|
</li>
|
||||||
class="text-white text-md font-semibold mt-2 mb-2 w-64 text-center"
|
</ul>
|
||||||
>
|
|
||||||
{item?.name}
|
|
||||||
</span>
|
|
||||||
<span class="text-white text-md mb-8">
|
|
||||||
AUM: {abbreviateNumber(item?.marketValue, true)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative bottom-0 w-full px-8">
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-between items-center w-full mb-6"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="cursor-pointer flex flex-col items-start"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="text-white text-[1rem] font-semibold"
|
|
||||||
>
|
|
||||||
{new Intl.NumberFormat("en", {
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 0,
|
|
||||||
}).format(item?.numberOfStocks)}
|
|
||||||
</span>
|
|
||||||
<span class="text-slate-300 font-medium text-sm"
|
|
||||||
># of Holdings</span
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="flex flex-col items-end">
|
|
||||||
<span
|
|
||||||
class="text-white text-[1rem] font-semibold"
|
|
||||||
>
|
|
||||||
{item?.turnover?.toFixed(2)}
|
|
||||||
</span>
|
|
||||||
<span class="text-slate-300 font-medium text-sm"
|
|
||||||
>Turnover</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-between items-center w-full"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
class="cursor-pointer flex flex-col items-start"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="flex flex-row mt-1 text-[1rem] font-semibold"
|
|
||||||
>
|
|
||||||
{#if item?.performancePercentage3year >= 0}
|
|
||||||
<span class="text-[#00FC50]"
|
|
||||||
>+{abbreviateNumber(
|
|
||||||
item?.performancePercentage3year?.toFixed(
|
|
||||||
2,
|
|
||||||
),
|
|
||||||
)}%</span
|
|
||||||
>
|
|
||||||
{:else}
|
|
||||||
<span class="text-[#FF2F1F]"
|
|
||||||
>{abbreviateNumber(
|
|
||||||
item?.performancePercentage3year?.toFixed(
|
|
||||||
2,
|
|
||||||
),
|
|
||||||
)}%
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<span class="text-slate-300 font-medium text-sm"
|
|
||||||
>3-Year Performance</span
|
|
||||||
>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="flex flex-col items-end">
|
|
||||||
<div
|
|
||||||
class="flex flex-row mt-1 text-[1rem] font-semibold"
|
|
||||||
>
|
|
||||||
{#if item?.winRate >= 0}
|
|
||||||
<span class="text-[#00FC50]"
|
|
||||||
>+{abbreviateNumber(
|
|
||||||
item?.winRate?.toFixed(2),
|
|
||||||
)}%</span
|
|
||||||
>
|
|
||||||
{:else}
|
|
||||||
<span class="text-[#FF2F1F]"
|
|
||||||
>{abbreviateNumber(
|
|
||||||
item?.winRate?.toFixed(2),
|
|
||||||
)}%
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<span class="text-slate-300 font-medium text-sm"
|
|
||||||
>Win Rate</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div></a
|
|
||||||
>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<!--<InfiniteLoading on:infinite={infiniteHandler} />-->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<div class="w-full m-auto mt-4">
|
||||||
</section>
|
<div
|
||||||
{:else}
|
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 sm:gap-5"
|
||||||
<div class="flex justify-center items-center h-80">
|
>
|
||||||
<div class="relative">
|
{#each displayList as item}
|
||||||
<label
|
<a
|
||||||
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
href={`/hedge-funds/${item?.cik}`}
|
||||||
>
|
class="w-full cursor-pointer bg-[#141417] sm:hover:bg-[#000] transition-colors ease-in-out border sm:hover:border-[#000] sm:hover:shadow-[#8C5F1B] border-gray-800 shadow-md rounded-lg h-auto pb-4 pt-4 mb-7"
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
>
|
||||||
></span>
|
<div class="flex flex-col relative">
|
||||||
</label>
|
<img
|
||||||
|
class="absolute -mt-4 w-full m-auto rounded-lg"
|
||||||
|
src={cardBackground}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="flex flex-col justify-center items-center rounded-2xl"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative hedge-fund-striped bg-[#20202E] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
style="clip-path: circle(50%);"
|
||||||
|
class="rounded-full w-16"
|
||||||
|
src={`${cloudFrontUrl}/assets/hedge_funds/default-avatar.png`}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="text-white text-md font-semibold mt-2 mb-2 w-64 text-center"
|
||||||
|
>
|
||||||
|
{item?.name}
|
||||||
|
</span>
|
||||||
|
<span class="text-white text-md mb-8">
|
||||||
|
AUM: {abbreviateNumber(item?.marketValue, true)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative bottom-0 w-full px-8">
|
||||||
|
<div
|
||||||
|
class="flex flex-row justify-between items-center w-full mb-6"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cursor-pointer flex flex-col items-start"
|
||||||
|
>
|
||||||
|
<span class="text-white text-[1rem] font-semibold">
|
||||||
|
{new Intl.NumberFormat("en", {
|
||||||
|
minimumFractionDigits: 0,
|
||||||
|
maximumFractionDigits: 0,
|
||||||
|
}).format(item?.numberOfStocks)}
|
||||||
|
</span>
|
||||||
|
<span class="text-slate-300 font-medium text-sm"
|
||||||
|
># of Holdings</span
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-end">
|
||||||
|
<span class="text-white text-[1rem] font-semibold">
|
||||||
|
{item?.turnover?.toFixed(2)}
|
||||||
|
</span>
|
||||||
|
<span class="text-slate-300 font-medium text-sm"
|
||||||
|
>Turnover</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-row justify-between items-center w-full"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="cursor-pointer flex flex-col items-start"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex flex-row mt-1 text-[1rem] font-semibold"
|
||||||
|
>
|
||||||
|
{#if item?.performancePercentage3year >= 0}
|
||||||
|
<span class="text-[#00FC50]"
|
||||||
|
>+{abbreviateNumber(
|
||||||
|
item?.performancePercentage3year?.toFixed(
|
||||||
|
2,
|
||||||
|
),
|
||||||
|
)}%</span
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<span class="text-[#FF2F1F]"
|
||||||
|
>{abbreviateNumber(
|
||||||
|
item?.performancePercentage3year?.toFixed(
|
||||||
|
2,
|
||||||
|
),
|
||||||
|
)}%
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<span class="text-slate-300 font-medium text-sm"
|
||||||
|
>3-Year Performance</span
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="flex flex-col items-end">
|
||||||
|
<div
|
||||||
|
class="flex flex-row mt-1 text-[1rem] font-semibold"
|
||||||
|
>
|
||||||
|
{#if item?.winRate >= 0}
|
||||||
|
<span class="text-[#00FC50]"
|
||||||
|
>+{abbreviateNumber(
|
||||||
|
item?.winRate?.toFixed(2),
|
||||||
|
)}%</span
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<span class="text-[#FF2F1F]"
|
||||||
|
>{abbreviateNumber(
|
||||||
|
item?.winRate?.toFixed(2),
|
||||||
|
)}%
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<span class="text-slate-300 font-medium text-sm"
|
||||||
|
>Win Rate</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></a
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<!--<InfiniteLoading on:infinite={infiniteHandler} />-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</section>
|
||||||
</body>
|
</body>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user