70 lines
3.0 KiB
Svelte
70 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { abbreviateNumber } from '$lib/utils';
|
|
export let charNumber;
|
|
export let industryList
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<div class="w-full overflow-x-scroll">
|
|
|
|
<table class="table rounded-none sm:rounded-md w-full m-auto mt-4 ">
|
|
<thead>
|
|
<tr class="border border-slate-800">
|
|
<th class="text-white font-semibold text-[1rem]">Industry Name</th>
|
|
<th class="text-white text-end font-semibold text-[1rem]">Stocks</th>
|
|
<th class="text-white font-semibold text-end text-[1rem]">Market Cap</th>
|
|
<th class="text-white font-semibold text-[1rem] text-end">Div. Yield</th>
|
|
<th class="text-white font-semibold text-[1rem] text-end">PE Ratio</th>
|
|
<th class="text-white font-semibold text-[1rem] text-end">Profit Margin</th>
|
|
<th class="text-white font-semibold text-[1rem] text-end">1M Change</th>
|
|
<th class="text-white font-semibold text-[1rem] text-end">1Y Change</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each industryList as item}
|
|
<!-- row -->
|
|
<tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]">
|
|
<td class="font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
|
<a href={`/list/industry/${item?.industry?.replace(/ /g, '-')?.replace(/&/g, 'and')?.replace(/-{2,}/g, '-')?.toLowerCase()}`} class="sm:hover:text-white text-blue-400">
|
|
{item?.industry?.length > charNumber ? item?.industry?.slice(0,charNumber) + "..." : item?.industry}
|
|
</a>
|
|
</td>
|
|
|
|
<td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
|
{item?.numStocks}
|
|
</td>
|
|
|
|
<td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
|
{abbreviateNumber(item?.totalMarketCap) ?? '-'}
|
|
</td>
|
|
|
|
<td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
|
{item?.avgDividendYield?.toFixed(2) ?? '-'}%
|
|
</td>
|
|
|
|
<td class="text-white text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
|
{item?.pe?.toFixed(2) ?? '-'}
|
|
</td>
|
|
|
|
|
|
<td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]">
|
|
{item?.profitMargin?.toFixed(2)}%
|
|
</td>
|
|
|
|
<td class="{item?.avgChange1M >= 0 ? 'text-[#37C97D]' : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
|
{item?.avgChange1M?.toFixed(2) ?? '-'}%
|
|
</td>
|
|
|
|
<td class="{item?.avgChange1Y >= 0 ? 'text-[#37C97D]' : 'text-[#FF2F1F]'} text-end font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
|
|
{item?.avgChange1Y?.toFixed(2) ?? '-'}%
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div> |