ui fixes
This commit is contained in:
MuslemRahimi
parent
20d32b7eb2
commit
7afc2d8c00
@ -4,7 +4,7 @@
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<section class="w-full overflow-hidden">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
|
||||
@ -363,8 +363,8 @@
|
||||
>
|
||||
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
|
||||
Employees
|
||||
<h2 class="text-2xl sm:text-2xl text-gray-200 font-bold mb-4">
|
||||
{$stockTicker} Employees
|
||||
</h2>
|
||||
|
||||
<div
|
||||
@ -429,35 +429,23 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 md:divide-x"
|
||||
class="my-5 grid grid-cols-2 gap-3 px-1 text-base xs:mt-6 bp:mt-7 bp:text-lg sm:grid-cols-3 sm:gap-6 sm:px-4 sm:text-xl"
|
||||
>
|
||||
<div class="p-4 bp:p-5 sm:p-6">
|
||||
<span
|
||||
class="mr-1 flex flex-row items-center text-white text-lg sm:text-xl"
|
||||
>
|
||||
Total Employees
|
||||
</span>
|
||||
<div>
|
||||
Employees
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-lg sm:text-xl"
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
{#if Number(employees)}
|
||||
{new Intl.NumberFormat("en")?.format(employees)}
|
||||
{:else}
|
||||
-
|
||||
n/a
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast md:border-0"
|
||||
>
|
||||
<span
|
||||
class="mr-1 flex flex-row items-center text-white text-lg sm:text-xl"
|
||||
>
|
||||
Change (1Y)
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-lg sm:text-xl"
|
||||
<div>
|
||||
Change (1Y) <div
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
{#if dateDistance}
|
||||
n/a
|
||||
@ -466,35 +454,55 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast md:border-0"
|
||||
>
|
||||
<span
|
||||
class="mr-1 flex flex-row items-center text-white text-lg sm:text-xl"
|
||||
<div>
|
||||
Growth (1Y) <div
|
||||
class="mt-0.5 text-lg {growthRate > 0
|
||||
? "before:content-['+'] "
|
||||
: ''} font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
Growth (1Y)
|
||||
</span>
|
||||
|
||||
{growthRate}%
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Revenue / Employee
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-lg sm:text-xl"
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
{#if growthRate >= 0}
|
||||
<span class="text-white">
|
||||
<span class="text-[#37C97D] text-lg">+{growthRate}%</span>
|
||||
</span>
|
||||
{:else if growthRate < 0}
|
||||
<div class="text-white">
|
||||
<span class="text-[#FF2F1F] text-lg">{growthRate}%</span>
|
||||
</div>
|
||||
{#if Number(data?.getStockDeck?.revenuePerEmployee)}
|
||||
${new Intl.NumberFormat("en")?.format(
|
||||
data?.getStockDeck?.revenuePerEmployee,
|
||||
)}
|
||||
{:else}
|
||||
<span class="text-white m-auto"> n/a </span>
|
||||
n/a
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Profits / Employee
|
||||
<div
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
{#if Number(data?.getStockDeck?.profitPerEmployee)}
|
||||
${new Intl.NumberFormat("en")?.format(
|
||||
data?.getStockDeck?.profitPerEmployee,
|
||||
)}
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Market Cap
|
||||
<div
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(data?.getStockQuote?.marketCap)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center w-full mt-10 mb-8">
|
||||
<h1 class="text-xl text-white font-semibold">Employees History</h1>
|
||||
<h1 class="text-2xl text-white font-bold">Employees Chart</h1>
|
||||
|
||||
<div
|
||||
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<section class="w-full overflow-hidden min-h-screen">
|
||||
<section class="w-full overflow-hidden">
|
||||
<div class="w-full overflow-hidden m-auto">
|
||||
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
|
||||
<div
|
||||
|
||||
@ -29,6 +29,69 @@
|
||||
let changePercentageYearAgo = 0;
|
||||
let timePeriod = "3Y";
|
||||
|
||||
function getMarketCapCategory(marketCap) {
|
||||
const BILLION = 1_000_000_000;
|
||||
const MILLION = 1_000_000;
|
||||
|
||||
const marketCapNavigation = [
|
||||
{
|
||||
threshold: 200 * BILLION,
|
||||
name: "Mega Cap",
|
||||
link: "/list/mega-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 10 * BILLION,
|
||||
maxThreshold: 200 * BILLION,
|
||||
name: "Large Cap",
|
||||
link: "/list/large-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 2 * BILLION,
|
||||
maxThreshold: 10 * BILLION,
|
||||
name: "Mid Cap",
|
||||
link: "/list/mid-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 300 * MILLION,
|
||||
maxThreshold: 2 * BILLION,
|
||||
name: "Small Cap",
|
||||
link: "/list/small-cap-stocks",
|
||||
},
|
||||
{
|
||||
minThreshold: 50 * MILLION,
|
||||
maxThreshold: 300 * MILLION,
|
||||
name: "Micro Cap",
|
||||
link: "/list/micro-cap-stocks",
|
||||
},
|
||||
{
|
||||
maxThreshold: 50 * MILLION,
|
||||
name: "Nano Cap",
|
||||
link: "/list/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;
|
||||
});
|
||||
}
|
||||
|
||||
function computeYearOverYearChange(rawData) {
|
||||
if (rawData.length < 2) {
|
||||
return null; // Not enough rawData to compute change
|
||||
@ -292,6 +355,8 @@
|
||||
goto("/pricing");
|
||||
}
|
||||
};
|
||||
|
||||
$: capCategory = getMarketCapCategory(data?.getStockQuote?.marketCap);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -337,7 +402,7 @@
|
||||
{#if rawData?.length !== 0}
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
|
||||
class="text-white p-3 sm:p-5 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
|
||||
@ -366,102 +431,146 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
|
||||
class="mt-5 grid grid-cols-2 gap-3 px-1 text-base xs:mt-6 bp:mt-7 bp:text-lg sm:grid-cols-3 sm:gap-6 sm:px-4 sm:text-xl"
|
||||
>
|
||||
<div class="relative inline-block text-left grow">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
>
|
||||
<span class="truncate text-white">{timePeriod}</span>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<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>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||
>
|
||||
<DropdownMenu.Label class="text-gray-400">
|
||||
Select time frame
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("1M")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
1 Month
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("6M")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
6 Months
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("1Y")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
1 Year
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("3Y")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
3 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("5Y")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
5 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("10Y")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
10 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("Max")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
Max
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
<Button
|
||||
on:click={() => exportData("csv")}
|
||||
class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
>
|
||||
<span class="truncate text-white">Download</span>
|
||||
<svg
|
||||
class="{data?.user?.tier === 'Pro'
|
||||
? 'hidden'
|
||||
: ''} 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>
|
||||
Market Cap
|
||||
<div
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
</Button>
|
||||
{abbreviateNumber(data?.getStockQuote?.marketCap)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Category
|
||||
<div
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
{#if capCategory}
|
||||
<a
|
||||
class="sm:hover:text-white text-blue-400"
|
||||
href={capCategory.link}
|
||||
>
|
||||
{capCategory.name}
|
||||
</a>
|
||||
{:else}
|
||||
n/a
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
1-Year Change
|
||||
<div
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
198.62%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center w-full mt-10 mb-8">
|
||||
<h1 class="text-2xl text-white font-bold">
|
||||
Market Cap Chart
|
||||
</h1>
|
||||
<div
|
||||
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
|
||||
>
|
||||
<div class="relative inline-block text-left grow">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
class="w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
>
|
||||
<span class="truncate text-white">{timePeriod}</span
|
||||
>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
style="max-width:40px"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<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>
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
class="w-56 h-fit max-h-72 overflow-y-auto scroller"
|
||||
>
|
||||
<DropdownMenu.Label class="text-gray-400">
|
||||
Select time frame
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("1M")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
1 Month
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("6M")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
6 Months
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("1Y")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
1 Year
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("3Y")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
3 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("5Y")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
5 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("10Y")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
10 Years
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item
|
||||
on:click={() => changeStatement("Max")}
|
||||
class="cursor-pointer hover:bg-[#27272A]"
|
||||
>
|
||||
Max
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
<Button
|
||||
on:click={() => exportData("csv")}
|
||||
class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
|
||||
>
|
||||
<span class="truncate text-white">Download</span>
|
||||
<svg
|
||||
class="{data?.user?.tier === 'Pro'
|
||||
? 'hidden'
|
||||
: ''} 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
|
||||
>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app w-full">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user