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