ui fixes
This commit is contained in:
MuslemRahimi
parent
569a221f21
commit
e4b17138c0
@ -8,21 +8,8 @@
|
|||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let isLoaded = false;
|
let rawData = data?.getCorporateLobbyingTracker ?? [];
|
||||||
let rawData = [];
|
let displayList = rawData?.slice(0, 50) ?? [];
|
||||||
let displayList = [];
|
|
||||||
|
|
||||||
let order = "highToLow";
|
|
||||||
|
|
||||||
const sortByAmount = (tickerList) => {
|
|
||||||
return tickerList?.sort(function (a, b) {
|
|
||||||
if (order === "highToLow") {
|
|
||||||
return b?.amount - a?.amount;
|
|
||||||
} else {
|
|
||||||
return a?.amount - b?.amount;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
async function infiniteHandler({ detail: { loaded, complete } }) {
|
async function infiniteHandler({ detail: { loaded, complete } }) {
|
||||||
if (displayList?.length === rawData?.length) {
|
if (displayList?.length === rawData?.length) {
|
||||||
@ -48,21 +35,6 @@
|
|||||||
|
|
||||||
return `${year}/${month}/${day} ${hours}:${minutes} ${ampm}`;
|
return `${year}/${month}/${day} ${hours}:${minutes} ${ampm}`;
|
||||||
}
|
}
|
||||||
onMount(() => {
|
|
||||||
rawData = data?.getCorporateLobbyingTracker ?? [];
|
|
||||||
displayList = rawData?.slice(0, 50) ?? [];
|
|
||||||
isLoaded = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
function changeOrder(state: string) {
|
|
||||||
if (state === "highToLow") {
|
|
||||||
order = "lowToHigh";
|
|
||||||
} else {
|
|
||||||
order = "highToLow";
|
|
||||||
}
|
|
||||||
|
|
||||||
displayList = sortByAmount(rawData)?.slice(0, 50);
|
|
||||||
}
|
|
||||||
|
|
||||||
$: charNumber = $screenWidth < 640 ? 15 : 20;
|
$: charNumber = $screenWidth < 640 ? 15 : 20;
|
||||||
|
|
||||||
@ -206,102 +178,90 @@
|
|||||||
Track the latest lobbying spendings of US stock companies
|
Track the latest lobbying spendings of US stock companies
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{#if isLoaded}
|
<div
|
||||||
|
class="w-screen sm:w-full flex flex-row items-start mt-20 sm:mt-10"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="w-screen sm:w-full flex flex-row items-start mt-20 sm:mt-10"
|
class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden"
|
||||||
>
|
>
|
||||||
<div
|
<table
|
||||||
class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden"
|
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
||||||
>
|
>
|
||||||
<table
|
<thead>
|
||||||
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
|
<TableHeader {columns} {sortOrders} {sortData} />
|
||||||
>
|
</thead>
|
||||||
<thead>
|
<tbody>
|
||||||
<TableHeader {columns} {sortOrders} {sortData} />
|
{#each displayList as item, index}
|
||||||
</thead>
|
<tr
|
||||||
<tbody>
|
class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
|
||||||
{#each displayList as item, index}
|
1 ===
|
||||||
<tr
|
displayList?.length && data?.user?.tier !== 'Pro'
|
||||||
class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index +
|
? 'opacity-[0.1]'
|
||||||
1 ===
|
: ''}"
|
||||||
displayList?.length && data?.user?.tier !== 'Pro'
|
>
|
||||||
? 'opacity-[0.1]'
|
<td
|
||||||
: ''}"
|
class="text-start text-sm text-white whitespace-nowrap"
|
||||||
>
|
>
|
||||||
<td
|
{formatDate(item?.date)}
|
||||||
class="text-start text-sm text-white whitespace-nowrap"
|
</td>
|
||||||
>
|
|
||||||
{formatDate(item?.date)}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
<td
|
||||||
class="text-blue-400 text-sm sm:text-[1rem] text-start"
|
class="text-blue-400 text-sm sm:text-[1rem] text-start"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={"/stocks/" + item?.ticker}
|
||||||
|
class="sm:hover:text-white text-blue-400"
|
||||||
>
|
>
|
||||||
<a
|
{item?.ticker}
|
||||||
href={"/stocks/" + item?.ticker}
|
</a>
|
||||||
class="sm:hover:text-white text-blue-400"
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
|
||||||
|
>
|
||||||
|
{item?.name?.length > charNumber
|
||||||
|
? item?.name?.slice(0, charNumber) + "..."
|
||||||
|
: item?.name}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{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
|
||||||
>
|
>
|
||||||
{item?.ticker}
|
{:else}
|
||||||
</a>
|
<span class="text-[#FF2F1F]"
|
||||||
</td>
|
>{item?.changesPercentage <= -1000
|
||||||
|
? item?.changesPercentage
|
||||||
|
: item?.changesPercentage?.toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
|
||||||
<td
|
<td class="text-white text-sm sm:text-[1rem] text-end">
|
||||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-white text-start"
|
${new Intl.NumberFormat("en", {
|
||||||
>
|
minimumFractionDigits: 0,
|
||||||
{item?.name?.length > charNumber
|
maximumFractionDigits: 0,
|
||||||
? item?.name?.slice(0, charNumber) + "..."
|
}).format(item?.amount)}
|
||||||
: item?.name}
|
</td>
|
||||||
</td>
|
</tr>
|
||||||
|
{/each}
|
||||||
<td
|
</tbody>
|
||||||
class="text-end text-sm sm:text-[1rem] font-medium text-white whitespace-nowrap"
|
</table>
|
||||||
>
|
|
||||||
{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 class="text-white text-sm sm:text-[1rem] text-end">
|
|
||||||
${new Intl.NumberFormat("en", {
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 0,
|
|
||||||
}).format(item?.amount)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||||
<div class="flex justify-center items-center h-80">
|
</div>
|
||||||
<div class="relative">
|
|
||||||
<label
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
<span class="loading loading-spinner loading-md text-gray-400"
|
|
||||||
></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<UpgradeToPro
|
<UpgradeToPro
|
||||||
{data}
|
{data}
|
||||||
title="Get the latest lobbying spendings in realtime of US stock companies"
|
title="Get the latest lobbying spendings in realtime of US stock companies"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user