ui fixes
This commit is contained in:
MuslemRahimi
parent
cd90bbf2f8
commit
d7de863c0e
@ -665,14 +665,14 @@
|
||||
historyList[index + 1]?.employeeCount,
|
||||
)}
|
||||
{:else}
|
||||
-
|
||||
n/a
|
||||
{/if}
|
||||
</td>
|
||||
<td
|
||||
class="text-end border-b border-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap text-white text-end"
|
||||
>
|
||||
{#if index + 1 - historyList?.length === 0}
|
||||
-
|
||||
n/a
|
||||
{:else if item?.employeeCount - historyList[index + 1]?.employeeCount > 0}
|
||||
<span class="text-[#00FC50]">
|
||||
+{(
|
||||
@ -692,7 +692,7 @@
|
||||
)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
-
|
||||
n/a
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -4,6 +4,71 @@
|
||||
|
||||
export let data;
|
||||
const similarStocks = data?.getSimilarStocks;
|
||||
|
||||
function getMarketCapCategory(marketCap) {
|
||||
const BILLION = 1_000_000_000;
|
||||
const MILLION = 1_000_000;
|
||||
|
||||
const marketCapNavigation = [
|
||||
{
|
||||
threshold: 200 * BILLION,
|
||||
name: "Mega-Cap",
|
||||
link: "/list/market-cap/mega-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 10 * BILLION,
|
||||
maxThreshold: 200 * BILLION,
|
||||
name: "Large-Cap",
|
||||
link: "/list/market-cap/large-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 2 * BILLION,
|
||||
maxThreshold: 10 * BILLION,
|
||||
name: "Mid-Cap",
|
||||
link: "/list/market-cap/mid-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 300 * MILLION,
|
||||
maxThreshold: 2 * BILLION,
|
||||
name: "Small-Cap",
|
||||
link: "/list/market-cap/small-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 50 * MILLION,
|
||||
maxThreshold: 300 * MILLION,
|
||||
name: "Micro-Cap",
|
||||
link: "/list/market-cap/micro-cap-stocks",
|
||||
},
|
||||
{
|
||||
maxThreshold: 50 * MILLION,
|
||||
name: "Nano-Cap",
|
||||
link: "/list/market-cap/nano-cap-stocks",
|
||||
},
|
||||
];
|
||||
|
||||
if (!marketCap) return null;
|
||||
|
||||
// Convert string to number if needed
|
||||
const capValue =
|
||||
typeof marketCap === "string" ? parseFloat(marketCap) : marketCap;
|
||||
|
||||
return marketCapNavigation.find((category) => {
|
||||
if (category.threshold) {
|
||||
return capValue >= category.threshold;
|
||||
}
|
||||
if (category.minThreshold && category.maxThreshold) {
|
||||
return (
|
||||
capValue >= category.minThreshold && capValue < category.maxThreshold
|
||||
);
|
||||
}
|
||||
if (category.maxThreshold) {
|
||||
return capValue < category.maxThreshold;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
let capCategory = getMarketCapCategory(data?.getStockQuote?.marketCap);
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden">
|
||||
@ -57,24 +122,36 @@
|
||||
></thead
|
||||
>
|
||||
<tbody>
|
||||
{#each similarStocks?.slice(0, 8) as item}
|
||||
{#if item?.marketCap > 0}
|
||||
<tr class="border-gray-600 border-b"
|
||||
><td class="text-left"
|
||||
><a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>{item?.symbol}</a
|
||||
></td
|
||||
>
|
||||
<td class="text-right cursor-normal"
|
||||
>{abbreviateNumber(item?.marketCap)}</td
|
||||
>
|
||||
</tr>
|
||||
{#each similarStocks?.slice(0, 8) as item, index}
|
||||
{#if item?.marketCap > 0}
|
||||
<tr
|
||||
class="border-gray-600 {index !==
|
||||
similarStocks?.slice(0, 8).length - 1
|
||||
? 'border-b'
|
||||
: ''}"
|
||||
><td class="text-left"
|
||||
><a
|
||||
href={`/stocks/${item?.symbol}`}
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
>{item?.symbol}</a
|
||||
></td
|
||||
>
|
||||
<td class="text-right cursor-normal"
|
||||
>{abbreviateNumber(item?.marketCap)}</td
|
||||
>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{#if capCategory}
|
||||
<a
|
||||
href={capCategory?.link}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100"
|
||||
>
|
||||
{capCategory?.name} Rankings
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
|
||||
@ -25,10 +25,19 @@
|
||||
|
||||
let rawData = data?.getHistoricalMarketCap || [];
|
||||
let tableList = [];
|
||||
let filterRule = "annual";
|
||||
let changePercentageYearAgo = 0;
|
||||
let timePeriod = "3Y";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "Annual",
|
||||
},
|
||||
{
|
||||
title: "Quarterly",
|
||||
},
|
||||
];
|
||||
let activeIdx = 0;
|
||||
|
||||
function getMarketCapCategory(marketCap) {
|
||||
const BILLION = 1_000_000_000;
|
||||
const MILLION = 1_000_000;
|
||||
@ -36,36 +45,36 @@
|
||||
const marketCapNavigation = [
|
||||
{
|
||||
threshold: 200 * BILLION,
|
||||
name: "Mega Cap",
|
||||
name: "Mega-Cap",
|
||||
link: "/list/market-cap/mega-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 10 * BILLION,
|
||||
maxThreshold: 200 * BILLION,
|
||||
name: "Large Cap",
|
||||
name: "Large-Cap",
|
||||
link: "/list/market-cap/large-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 2 * BILLION,
|
||||
maxThreshold: 10 * BILLION,
|
||||
name: "Mid Cap",
|
||||
name: "Mid-Cap",
|
||||
link: "/list/market-cap/mid-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 300 * MILLION,
|
||||
maxThreshold: 2 * BILLION,
|
||||
name: "Small Cap",
|
||||
name: "Small-Cap",
|
||||
link: "/list/market-cap/small-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 50 * MILLION,
|
||||
maxThreshold: 300 * MILLION,
|
||||
name: "Micro Cap",
|
||||
name: "Micro-Cap",
|
||||
link: "/list/market-cap/micro-cap-stocks",
|
||||
},
|
||||
{
|
||||
maxThreshold: 50 * MILLION,
|
||||
name: "Nano Cap",
|
||||
name: "Nano-Cap",
|
||||
link: "/list/market-cap/nano-cap-stocks",
|
||||
},
|
||||
];
|
||||
@ -181,9 +190,9 @@
|
||||
return quarterlyData;
|
||||
}
|
||||
|
||||
function changeTablePeriod(state: string) {
|
||||
filterRule = state;
|
||||
if (state === "annual") {
|
||||
function changeTablePeriod(index) {
|
||||
activeIdx = index;
|
||||
if (activeIdx === 0) {
|
||||
tableList = filterEndOfYearDates(rawData);
|
||||
} else {
|
||||
tableList = filterEndOfQuarterDates(rawData);
|
||||
@ -390,7 +399,9 @@
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<section class="bg-[#09090B] w-full overflow-hidden text-white h-full">
|
||||
<section
|
||||
class="bg-[#09090B] w-full overflow-hidden min-h-screen text-white h-full"
|
||||
>
|
||||
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
@ -599,51 +610,57 @@
|
||||
Market Cap History
|
||||
</h2>
|
||||
|
||||
<ul
|
||||
class="text-[0.8rem] font-medium text-center w-56 pt-5 sm:pt-3 sm:w-56 mb-5 flex m-auto sm:m-0 sm:justify-end items-center sm:ml-auto"
|
||||
<div
|
||||
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mb-6"
|
||||
>
|
||||
<li class="w-full">
|
||||
<label
|
||||
on:click={() => changeTablePeriod("annual")}
|
||||
class="cursor-pointer rounded-l-md inline-block w-full py-1.5 {filterRule ===
|
||||
'annual'
|
||||
? 'bg-[#fff] text-black'
|
||||
: 'bg-[#313131] text-white'} font-semibold"
|
||||
aria-current="page"
|
||||
>
|
||||
Annual
|
||||
</label>
|
||||
</li>
|
||||
<li class="w-full">
|
||||
{#if data?.user?.tier === "Pro"}
|
||||
<label
|
||||
on:click={() => changeTablePeriod("quarterly")}
|
||||
class="cursor-pointer inline-block w-full py-1.5 {filterRule ===
|
||||
'quarterly'
|
||||
? 'bg-[#fff] text-black'
|
||||
: 'bg-[#313131]'} font-semibold rounded-r-md"
|
||||
>
|
||||
Quartely
|
||||
</label>
|
||||
{:else}
|
||||
<a
|
||||
href="/pricing"
|
||||
class="flex flex-row items-center m-auto justify-center cursor-pointer inline-block w-full py-1.5 bg-[#313131] font-semibold text-white rounded-r-md"
|
||||
>
|
||||
<span class="">Quarterly</span>
|
||||
<svg
|
||||
class="ml-1 -mt-0.5 w-3.5 h-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#A3A3A3"
|
||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||
/></svg
|
||||
<div
|
||||
class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
|
||||
>
|
||||
{#each tabs as item, i}
|
||||
{#if data?.user?.tier !== "Pro" && i > 0}
|
||||
<button
|
||||
on:click={() => goto("/pricing")}
|
||||
class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
||||
>
|
||||
</a>
|
||||
{/if}
|
||||
</li>
|
||||
</ul>
|
||||
<span class="relative text-sm block font-semibold">
|
||||
{item.title}
|
||||
<svg
|
||||
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="#A3A3A3"
|
||||
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||
/></svg
|
||||
>
|
||||
</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
on:click={() => changeTablePeriod(i)}
|
||||
class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
|
||||
i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<div
|
||||
class="absolute inset-0 rounded-md bg-[#fff]"
|
||||
></div>
|
||||
{/if}
|
||||
<span
|
||||
class="relative text-sm block font-semibold {activeIdx ===
|
||||
i
|
||||
? 'text-black'
|
||||
: 'text-white'}"
|
||||
>
|
||||
{item.title}
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full overflow-x-scroll">
|
||||
<table
|
||||
@ -651,16 +668,13 @@
|
||||
>
|
||||
<thead>
|
||||
<tr class="border border-gray-600">
|
||||
<th
|
||||
class="text-white font-semibold text-start text-sm sm:text-[1rem]"
|
||||
<th class="text-white font-semibold text-start text-sm"
|
||||
>Date</th
|
||||
>
|
||||
<th
|
||||
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>Market Cap</th
|
||||
>
|
||||
<th
|
||||
class="text-white font-semibold text-end text-sm sm:text-[1rem]"
|
||||
<th class="text-white font-semibold text-end text-sm"
|
||||
>% Change</th
|
||||
>
|
||||
</tr>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user