103 lines
3.1 KiB
Svelte
103 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { indexTicker } from "$lib/store";
|
|
import {
|
|
abbreviateNumber,
|
|
sectorNavigation,
|
|
} from "$lib/utils";
|
|
|
|
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
|
|
|