ui fix
This commit is contained in:
MuslemRahimi
parent
47ee632513
commit
3169248abf
@ -1,103 +1,89 @@
|
||||
<script lang="ts">
|
||||
import { indexTicker } from "$lib/store";
|
||||
import {
|
||||
abbreviateNumber,
|
||||
sectorNavigation,
|
||||
} from "$lib/utils";
|
||||
|
||||
|
||||
export let data;
|
||||
|
||||
let info;
|
||||
let topSectorList = [];
|
||||
let description = "";
|
||||
|
||||
|
||||
import { indexTicker } from "$lib/store";
|
||||
import { abbreviateNumber, sectorNavigation } from "$lib/utils";
|
||||
|
||||
$: {
|
||||
if ($indexTicker) {
|
||||
info = data?.getIndexProfile?.at(0);
|
||||
topSectorList = data?.getIndexSectorWeighting || [];
|
||||
|
||||
description =
|
||||
info?.description ??
|
||||
"A detailed description of the company is not yet available.";
|
||||
|
||||
}
|
||||
export let data;
|
||||
|
||||
let info;
|
||||
let topSectorList = [];
|
||||
let description = "";
|
||||
|
||||
$: {
|
||||
if ($indexTicker) {
|
||||
info = data?.getIndexProfile?.at(0);
|
||||
topSectorList = data?.getIndexSectorWeighting || [];
|
||||
|
||||
description =
|
||||
info?.description ??
|
||||
"A detailed description of the company is not yet available.";
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="px-0.5 lg:px-0">
|
||||
<h2 class="mb-2 text-2xl text-white font-semibold">
|
||||
About {$indexTicker}
|
||||
</h2>
|
||||
<p class="text-gray-200">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{#if topSectorList?.length !== 0}
|
||||
<div class="space-y-3 pt-5 {topSectorList?.length !== 0 ? '' : 'hidden'}">
|
||||
<div class="h-auto w-full">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full flex flex-col m-auto">
|
||||
<h2
|
||||
class="mb-2 text-2xl text-white font-semibold flex flex-row items-center"
|
||||
>
|
||||
<span>Top Sectors</span>
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 w-full overflow-hidden">
|
||||
<table class="w-full table table-sm table table-compact w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="text-white font-semibold text-sm text-start bg-default"
|
||||
>Sector</th
|
||||
>
|
||||
|
||||
<th class="text-white font-semibold text-sm text-end bg-default"
|
||||
>Weight %</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each topSectorList as item}
|
||||
{#if item?.weightPercentage > 0}
|
||||
<tr class="text-white border-b border-[#27272A]">
|
||||
<td class="text-start text-sm sm:text-[1rem]">
|
||||
<a
|
||||
href={sectorNavigation?.find(
|
||||
(listItem) => listItem?.title === item?.sector,
|
||||
)?.link}
|
||||
class="sm:hover:underline sm:hover:underline-offset-4 text-white truncate"
|
||||
>
|
||||
{item?.sector}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td class="text-white font-semibold text-end">
|
||||
{abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`/industry/sectors`}
|
||||
class="rounded cursor-pointer w-full m-auto py-2 h-full mt-6 text-[1rem] text-center font-semibold text-black sm:hover:hover:bg-gray-300 bg-[#ffff] transition duration-100"
|
||||
>
|
||||
All Sectors
|
||||
</a>
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="px-0.5 lg:px-0">
|
||||
<h2 class="mb-2 text-2xl text-white font-semibold">
|
||||
About {$indexTicker}
|
||||
</h2>
|
||||
<p class="text-gray-200">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if topSectorList?.length !== 0}
|
||||
<div
|
||||
class="space-y-3 pt-5 text-muted dark:text-white {topSectorList?.length !==
|
||||
0
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
>
|
||||
<div class="h-auto w-full">
|
||||
<!--Start Content-->
|
||||
<div class="w-auto lg:w-full flex flex-col m-auto">
|
||||
<h2 class="mb-2 text-2xl flex flex-row items-center">
|
||||
<span class="font-bold">Top Sectors</span>
|
||||
</h2>
|
||||
|
||||
<div class="mt-2 w-full overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="border-y border-gray-300 dark:border-gray-800">
|
||||
<th class="px-1 py-1.5 text-left xs:px-2">Sector</th>
|
||||
|
||||
<th class="px-1 py-1.5 text-right xs:px-2">Weight %</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each topSectorList as item}
|
||||
{#if item?.weightPercentage > 0}
|
||||
<tr class=" border-b border-gray-300 dark:border-gray-800">
|
||||
<td class="px-1 py-1.5 text-left xs:px-2">
|
||||
<a
|
||||
href={sectorNavigation?.find(
|
||||
(listItem) => listItem?.title === item?.sector,
|
||||
)?.link}
|
||||
class="sm:hover:underline sm:hover:underline-offset-4 truncate"
|
||||
>
|
||||
{item?.sector}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td class="px-1 py-1.5 text-right xs:px-2">
|
||||
{abbreviateNumber(item?.weightPercentage?.toFixed(2))}%
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`/industry/sectors`}
|
||||
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
|
||||
>
|
||||
All Sectors
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -218,21 +218,21 @@
|
||||
hour: "numeric",
|
||||
hour12: true,
|
||||
});
|
||||
return `<span class="font-[501] text-xs">${timeString.replace(/\s/g, " ")}</span>`;
|
||||
return `<span class=" text-xs">${timeString.replace(/\s/g, " ")}</span>`;
|
||||
} else if (["1W", "1M"].includes(displayData)) {
|
||||
const timeString = date?.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
timeZone: "UTC",
|
||||
});
|
||||
return `<span class="font-[501] text-xs">${timeString}</span>`;
|
||||
return `<span class=" text-xs">${timeString}</span>`;
|
||||
} else {
|
||||
const timeString = date?.toLocaleDateString("en-US", {
|
||||
year: "2-digit",
|
||||
month: "short",
|
||||
timeZone: "UTC",
|
||||
});
|
||||
return `<span class="font-[501] text-xs">${timeString}</span>`;
|
||||
return `<span class=" text-xs">${timeString}</span>`;
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -680,29 +680,6 @@
|
||||
<div
|
||||
class="order-1 lg:order-5 m-auto grow overflow-hidden border-gray-800 py-0.5 xs:py-1 sm:px-0.5 sm:pb-3 sm:pt-2.5 lg:mb-0 lg:border-0 lg:border-l lg:border-sharp lg:px-0 lg:py-0 lg:pl-5 md:mb-4 md:border-b"
|
||||
>
|
||||
<div class="flex items-center justify-between py-1 sm:pt-0.5">
|
||||
<div class="hide-scroll overflow-x-auto">
|
||||
<ul class="flex sm:space-x-2">
|
||||
{#each intervals as interval}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => changeData(interval)}
|
||||
class="cursor-pointer focus:outline-none"
|
||||
>
|
||||
<span
|
||||
class="block px-3 py-1 rounded duration-100 ease-in-out
|
||||
{displayData === interval
|
||||
? 'bg-blue-50 text-blue-700 dark:bg-primary dark:text-white font-semibold'
|
||||
: 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
|
||||
>
|
||||
{interval}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[250px] sm:h-[350px]">
|
||||
<div
|
||||
class="flex h-full w-full flex-col items-center justify-center rounded-sm border border-gray-800 p-6 text-center md:p-12"
|
||||
@ -721,25 +698,21 @@
|
||||
>
|
||||
<div class="flex items-center justify-between py-1 sm:pt-0.5">
|
||||
<div class="hide-scroll overflow-x-auto">
|
||||
<ul
|
||||
class="flex space-x-[3px] whitespace-nowrap pl-0.5 xs:space-x-1"
|
||||
>
|
||||
<ul class="flex sm:space-x-2">
|
||||
{#each intervals as interval}
|
||||
<li>
|
||||
<button
|
||||
on:click={() => changeData(interval)}
|
||||
class="cursor-pointer px-1 py-1 text-sm sm:text-[1rem] xs:px-[3px] bp:px-1.5 sm:px-2 xxxl:px-3"
|
||||
class="cursor-pointer focus:outline-none"
|
||||
>
|
||||
<span
|
||||
class="block {displayData === interval
|
||||
? 'text-white'
|
||||
: 'text-gray-400'}">{interval}</span
|
||||
class="block px-3 py-1 rounded duration-100 ease-in-out
|
||||
{displayData === interval
|
||||
? 'bg-gray-200 text-muted dark:bg-primary dark:text-white font-semibold'
|
||||
: 'bg-transparent text-muted dark:text-gray-400 dark:sm:hover:text-white sm:hover:bg-gray-100 dark:sm:hover:bg-primary'}"
|
||||
>
|
||||
<div
|
||||
class="{displayData === interval
|
||||
? `bg-[${displayLegend?.graphChange < 0 ? '#FF2F1F' : '#00FC50'}] `
|
||||
: 'bg-default'} mt-1 h-[3px] w-[1.5rem] m-auto rounded-full"
|
||||
/>
|
||||
{interval}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user