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"
|
||||
<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"
|
||||
>
|
||||
<span
|
||||
class="mr-1 flex flex-row items-center text-white text-lg sm:text-xl"
|
||||
>
|
||||
Growth (1Y)
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-light text-lg sm:text-xl"
|
||||
>
|
||||
{#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>
|
||||
{growthRate}%
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
Revenue / Employee
|
||||
<div
|
||||
class="mt-0.5 text-lg font-semibold bp:text-xl sm:mt-1.5 sm:text-2xl"
|
||||
>
|
||||
{#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"
|
||||
@ -365,6 +430,48 @@
|
||||
)}% in one year.
|
||||
</div>
|
||||
|
||||
<div
|
||||
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>
|
||||
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>
|
||||
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"
|
||||
>
|
||||
@ -375,7 +482,8 @@
|
||||
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>
|
||||
<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"
|
||||
@ -463,6 +571,7 @@
|
||||
>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app w-full">
|
||||
<Chart {init} options={optionsData} class="chart" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user