update list page
This commit is contained in:
MuslemRahimi
parent
e7e16bcdad
commit
1e971dceea
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Basic Materials Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Basic Materials Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Communication Services Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Communication Services Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Consumer Cyclical Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Consumer Cyclical Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Consumer Defensive Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Consumer Defensive Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Energy Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Energy Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,107 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Financial Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Financial Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
|
||||||
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="stat">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
<div class="flex flex-row items-center">
|
Stocks
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
<InfoModal
|
||||||
Stocks
|
title={"Stocks"}
|
||||||
</label>
|
content={"The total number of companies who operate in this sector."}
|
||||||
<InfoModal
|
id={"stocksInfo"}
|
||||||
title={"Stocks"}
|
/>
|
||||||
content={"The total number of companies who operates in this sector."}
|
</label>
|
||||||
id={"stocksInfo"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
/>
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
</div>
|
{rawData?.length}
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Healthcare Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Healthcare Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Industrials Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Industrials Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Real Estate Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Real Estate Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Technology Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Technology Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
@ -130,105 +130,105 @@ function getPlotOptions() {
|
|||||||
A complete list of companies in the Utilities Sector that are publicly traded on the US stock exchange.
|
A complete list of companies in the Utilities Sector that are publicly traded on the US stock exchange.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats stats-horizontal no-scrollbar bg-[#27272A] shadow w-full rounded-lg">
|
<div class="mb-4 grid grid-cols-2 divide-y divide-gray-600 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 divide-x">
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-4">
|
<label for="stocksInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Stocks
|
||||||
<div class="stat">
|
<InfoModal
|
||||||
<div class="flex flex-row items-center">
|
title={"Stocks"}
|
||||||
<label for="stocksInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
content={"The total number of companies who operate in this sector."}
|
||||||
Stocks
|
id={"stocksInfo"}
|
||||||
</label>
|
/>
|
||||||
<InfoModal
|
</label>
|
||||||
title={"Stocks"}
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
content={"The total number of companies who operates in this sector."}
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
id={"stocksInfo"}
|
{rawData?.length}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{rawData?.length}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="marketCapModal" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Market Cap
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Market Cap"}
|
|
||||||
content={"Combined market cap of all companies in this sector."}
|
|
||||||
id={"marketCapModal"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalMarketCap,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="revenueInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Revenue
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Revenue"}
|
|
||||||
content={"The total revenue of all companies in this sector."}
|
|
||||||
id={"revenueInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalRevenue,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitsInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profits
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profits"}
|
|
||||||
content={"The total net income of all companies in this sector."}
|
|
||||||
id={"profitsInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{abbreviateNumber(totalProfits,true)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="profitMarginInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
Profit Margin
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"Profit Margin"}
|
|
||||||
content={"The industry's profit margin, calculated by dividing the industry's total net income by the total revenue."}
|
|
||||||
id={"profitMarginInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalRevenue *100)?.toFixed(2)}%</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="stat">
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<label for="peRatioInfo" class="cursor-pointer stat-title text-sm sm:text-lg font-semibold text-white">
|
|
||||||
PE Ratio
|
|
||||||
</label>
|
|
||||||
<InfoModal
|
|
||||||
title={"PE Ratio"}
|
|
||||||
content={"The industry's PE Ratio, calculated by dividing the industry's total market cap by the total net income."}
|
|
||||||
id={"peRatioInfo"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="stat-value text-lg font-semibold text-white">{(totalProfits/totalMarketCap *100)?.toFixed(2)}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="marketCapModal" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Market Cap
|
||||||
|
<InfoModal
|
||||||
|
title={"Market Cap"}
|
||||||
|
content={"Combined market cap of all companies in this sector."}
|
||||||
|
id={"marketCapModal"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalMarketCap, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="revenueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Revenue
|
||||||
|
<InfoModal
|
||||||
|
title={"Revenue"}
|
||||||
|
content={"The total revenue of all companies in this sector."}
|
||||||
|
id={"revenueInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalRevenue, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profits
|
||||||
|
<InfoModal
|
||||||
|
title={"Profits"}
|
||||||
|
content={"The total net income of all companies in this sector."}
|
||||||
|
id={"profitsInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{abbreviateNumber(totalProfits, true)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="profitMarginInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
Profit Margin
|
||||||
|
<InfoModal
|
||||||
|
title={"Profit Margin"}
|
||||||
|
content={"The industry's profit margin, calculated by dividing the total net income by the total revenue."}
|
||||||
|
id={"profitMarginInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalProfits / totalRevenue * 100)?.toFixed(2)}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-4 bp:p-5 sm:p-6">
|
||||||
|
<label for="peRatioInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] sm:text-xl font-semibold">
|
||||||
|
PE Ratio
|
||||||
|
<InfoModal
|
||||||
|
title={"PE Ratio"}
|
||||||
|
content={"The industry's PE Ratio, calculated by dividing the total market cap by the total net income."}
|
||||||
|
id={"peRatioInfo"}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0">
|
||||||
|
<div class="flex items-baseline text-lg sm:text-xl font-semibold text-white">
|
||||||
|
{(totalMarketCap / totalProfits)?.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
<h2 class="text-white text-xl sm:text-2xl mt-8 font-semibold">
|
||||||
Historical Performance
|
Historical Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user