update stock list
This commit is contained in:
MuslemRahimi
parent
1215ef8ad5
commit
028b5e152d
@ -176,7 +176,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-normal text-white">Listed Funds</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{rawData?.length}
|
||||
</div>
|
||||
@ -186,7 +186,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-normal text-white">Total Assets</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalAssets)}
|
||||
</div>
|
||||
@ -196,7 +196,7 @@
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-normal text-white">Average Cost</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{avgExpenseRatio?.toFixed(2)}%
|
||||
</div>
|
||||
|
||||
@ -222,6 +222,34 @@
|
||||
title: "Highest Option Premium",
|
||||
link: "/list/highest-option-premium",
|
||||
},
|
||||
{
|
||||
title: "Biggest Artificial Intelligence Stocks",
|
||||
link: "/list/ai-stocks",
|
||||
},
|
||||
{
|
||||
title: "Biggest Mobile Game Stocks",
|
||||
link: "/list/mobile-games",
|
||||
},
|
||||
{
|
||||
title: "Biggest Social Media Stocks by Market Cap",
|
||||
link: "/list/social-media-stocks",
|
||||
},
|
||||
{
|
||||
title: "Biggest Clean Energy Stocks",
|
||||
link: "/list/clean-energy",
|
||||
},
|
||||
{
|
||||
title: "Biggest E-Sports Stocks",
|
||||
link: "/list/esports",
|
||||
},
|
||||
{
|
||||
title: "Biggest Car Company Stocks",
|
||||
link: "/list/car-company-stocks",
|
||||
},
|
||||
{
|
||||
title: "Biggest Electric Vehicle Stocks",
|
||||
link: "/list/electric-vehicles",
|
||||
},
|
||||
];
|
||||
|
||||
navigation = [...navigationIndustry, ...navigation];
|
||||
@ -236,7 +264,7 @@
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pt-5 px-4 lg:px-3 mb-20"
|
||||
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden pb-40 pt-5 px-4 lg:px-3 mb-20"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||
<ul>
|
||||
|
||||
@ -236,6 +236,96 @@
|
||||
|
||||
<!--End Other Lists-->
|
||||
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold pt-10">
|
||||
Category of Stocks Ranked by Market Cap
|
||||
</h2>
|
||||
<ul
|
||||
class="list-outside list-disc space-y-1 p-1 pl-6 text-base md:columns-2 md:gap-x-8 md:text-lg"
|
||||
>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/mobile-games/"
|
||||
>Mobile Games</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/social-media-stocks/">Social Media</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/clean-energy/"
|
||||
>Clean Energy</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/esports/"
|
||||
>E-Sports</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/car-company-stocks/">Car Companies</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/ai-stocks/"
|
||||
>Artificial Intelligence</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/electric-vehicles/">Electric Vehicles</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/online-gambling/"
|
||||
>Online Gambling</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/augmented-reality/">Augmented Reality</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/gaming-stocks/"
|
||||
>Gaming</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="text-blue-400 sm:hover:text-white"
|
||||
href="/list/pharmaceutical-stocks/">Pharmaceuticals</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/online-dating/"
|
||||
>Online Dating</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/virtual-reality/"
|
||||
>Virtual Reality</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/sports-betting/"
|
||||
>Sports Betting</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="text-blue-400 sm:hover:text-white" href="/list/metaverse/"
|
||||
>Metaverse</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!--Start Non-US Stocks Listed on US Exchanges-->
|
||||
<div class="text-white">
|
||||
<h2 class="mb-2 text-xl font-bold pt-10">
|
||||
|
||||
24
src/routes/list/ai-stocks/+page.server.ts
Normal file
24
src/routes/list/ai-stocks/+page.server.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getData = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = {'filterList': 'ai-stocks'}
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/list-category", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
59
src/routes/list/ai-stocks/+page.svelte
Normal file
59
src/routes/list/ai-stocks/+page.svelte
Normal file
@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData;
|
||||
|
||||
let totalMarketCap =
|
||||
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||
let totalRevenue =
|
||||
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||
</script>
|
||||
|
||||
<SEO title="A List of Artificial Intelligence (AI) Stocks" description="" />
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<Infobox
|
||||
text="This is a list of the top stocks that are directly involved with artificial intelligence (AI) and/or have significant exposure to the growth of AI technology."
|
||||
/>
|
||||
|
||||
<div
|
||||
class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table {data} rawData={data?.getData} />
|
||||
</section>
|
||||
@ -111,9 +111,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total ETFs</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total ETFs</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -121,9 +121,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Assets</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Assets</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalAssets)}
|
||||
</div>
|
||||
@ -131,9 +131,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Avg. Cost</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Avg. Cost</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{avgExpenseRatio?.toFixed(2)}%
|
||||
</div>
|
||||
|
||||
24
src/routes/list/car-company-stocks/+page.server.ts
Normal file
24
src/routes/list/car-company-stocks/+page.server.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getData = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = {'filterList': 'car-company-stocks'}
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/list-category", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
62
src/routes/list/car-company-stocks/+page.svelte
Normal file
62
src/routes/list/car-company-stocks/+page.svelte
Normal file
@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData || [];
|
||||
|
||||
let totalMarketCap =
|
||||
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||
let totalRevenue =
|
||||
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="A List of Car Company Stocks, Ranked by Market Cap"
|
||||
description="A list of the biggest car company and automaker stocks, ranked by market capitalization."
|
||||
/>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<Infobox
|
||||
text="This is a list of the biggest car company and automaker stocks, ranked by market capitalization."
|
||||
/>
|
||||
|
||||
<div
|
||||
class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table {data} rawData={data?.getData} />
|
||||
</section>
|
||||
24
src/routes/list/clean-energy/+page.server.ts
Normal file
24
src/routes/list/clean-energy/+page.server.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getData = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = {'filterList': 'clean-energy'}
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/list-category", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
57
src/routes/list/clean-energy/+page.svelte
Normal file
57
src/routes/list/clean-energy/+page.svelte
Normal file
@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData;
|
||||
|
||||
let totalMarketCap =
|
||||
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||
let totalRevenue =
|
||||
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="A List of Clean Energy Stocks, Ranked by Market Cap"
|
||||
description=""
|
||||
/>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table {data} rawData={data?.getData} />
|
||||
</section>
|
||||
@ -38,9 +38,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -48,9 +48,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -58,9 +58,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
24
src/routes/list/electric-vehicles/+page.server.ts
Normal file
24
src/routes/list/electric-vehicles/+page.server.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getData = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = {'filterList': 'electric-vehicles'}
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/list-category", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
57
src/routes/list/electric-vehicles/+page.svelte
Normal file
57
src/routes/list/electric-vehicles/+page.svelte
Normal file
@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData;
|
||||
|
||||
let totalMarketCap =
|
||||
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||
let totalRevenue =
|
||||
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||
</script>
|
||||
|
||||
<SEO
|
||||
title="Biggest Electric Vehicle Stocks, Sorted by Market Cap"
|
||||
description=""
|
||||
/>
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table {data} rawData={data?.getData} />
|
||||
</section>
|
||||
24
src/routes/list/esports/+page.server.ts
Normal file
24
src/routes/list/esports/+page.server.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getData = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = {'filterList': 'esports'}
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/list-category", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
59
src/routes/list/esports/+page.svelte
Normal file
59
src/routes/list/esports/+page.svelte
Normal file
@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData;
|
||||
|
||||
let totalMarketCap =
|
||||
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||
let totalRevenue =
|
||||
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||
</script>
|
||||
|
||||
<SEO title="A List of E-Sports Stocks" description="" />
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<Infobox
|
||||
text="E-Sports stands for Electronic Sports. It is a term for competition in video games, often over the internet but also via in-person events. Below is a list of stocks of companies involved in e-sports."
|
||||
/>
|
||||
|
||||
<div
|
||||
class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table {data} rawData={data?.getData} />
|
||||
</section>
|
||||
@ -40,9 +40,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -50,9 +50,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -60,9 +60,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -30,9 +30,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -40,9 +40,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -50,9 +50,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -46,9 +46,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -56,9 +56,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -66,9 +66,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -30,9 +30,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -40,9 +40,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -50,9 +50,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -30,9 +30,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -40,9 +40,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -50,9 +50,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
@ -126,9 +126,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -136,9 +136,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -146,9 +146,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
24
src/routes/list/mobile-games/+page.server.ts
Normal file
24
src/routes/list/mobile-games/+page.server.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getData = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = {'filterList': 'mobile-games'}
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/list-category", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
54
src/routes/list/mobile-games/+page.svelte
Normal file
54
src/routes/list/mobile-games/+page.svelte
Normal file
@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData;
|
||||
|
||||
let totalMarketCap =
|
||||
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||
let totalRevenue =
|
||||
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||
</script>
|
||||
|
||||
<SEO title="A List of Mobile Game Stocks" description="" />
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<div
|
||||
class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table {data} rawData={data?.getData} />
|
||||
</section>
|
||||
@ -28,9 +28,9 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Stocks</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
@ -38,9 +38,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Market Cap</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
@ -48,9 +48,9 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Total Revenue</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
|
||||
24
src/routes/list/social-media-stocks/+page.server.ts
Normal file
24
src/routes/list/social-media-stocks/+page.server.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export const load = async ({ locals }) => {
|
||||
const getData = async () => {
|
||||
const { apiKey, apiURL } = locals;
|
||||
const postData = {'filterList': 'social-media-stocks'}
|
||||
// make the POST request to the endpoint
|
||||
const response = await fetch(apiURL + "/list-category", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-API-KEY": apiKey,
|
||||
},
|
||||
body: JSON.stringify(postData)
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
|
||||
return output;
|
||||
};
|
||||
|
||||
// Make sure to return a promise
|
||||
return {
|
||||
getData: await getData(),
|
||||
};
|
||||
};
|
||||
59
src/routes/list/social-media-stocks/+page.svelte
Normal file
59
src/routes/list/social-media-stocks/+page.svelte
Normal file
@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import { abbreviateNumber } from "$lib/utils";
|
||||
import Table from "$lib/components/Table/Table.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
|
||||
export let data;
|
||||
let rawData = data?.getData;
|
||||
|
||||
let totalMarketCap =
|
||||
rawData?.reduce((total, stock) => total + stock?.marketCap, 0) ?? 0;
|
||||
let totalRevenue =
|
||||
rawData?.reduce((total, stock) => total + stock?.revenue, 0) ?? 0;
|
||||
</script>
|
||||
|
||||
<SEO title="A List of Social Media Company Stocks" description="" />
|
||||
|
||||
<section class="w-full overflow-hidden m-auto">
|
||||
<Infobox
|
||||
text="This list includes stocks of companies who own social networks or have a significant percentage of their operations involved with social media."
|
||||
/>
|
||||
|
||||
<div
|
||||
class="mt-6 mb-4 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Stocks</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{new Intl.NumberFormat("en")?.format(rawData?.length)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Market Cap</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalMarketCap)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-[1rem] font-semibold text-white">Total Revenue</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(totalRevenue)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table {data} rawData={data?.getData} />
|
||||
</section>
|
||||
@ -580,7 +580,7 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Date</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Date</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
|
||||
>
|
||||
@ -591,7 +591,9 @@
|
||||
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Volume</div>
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
Volume
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
|
||||
>
|
||||
@ -605,7 +607,7 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
Net Call Premium
|
||||
</div>
|
||||
<div
|
||||
@ -621,7 +623,7 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
Net Put Premium
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -634,7 +634,7 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Date</div>
|
||||
<div class="text-[1rem] font-semibold text-white">Date</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
|
||||
>
|
||||
@ -645,7 +645,9 @@
|
||||
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Volume</div>
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
Volume
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-sm sm:text-[1rem]"
|
||||
>
|
||||
@ -659,7 +661,7 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
Net Call Premium
|
||||
</div>
|
||||
<div
|
||||
@ -675,7 +677,7 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
Net Put Premium
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -316,7 +316,7 @@
|
||||
<div class="text-[1rem] font-normal text-white">Total Analysts</div>
|
||||
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{numOfAnalyst}
|
||||
</div>
|
||||
@ -326,7 +326,7 @@
|
||||
Consensus Rating
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{consensusRating}
|
||||
</div>
|
||||
@ -334,7 +334,7 @@
|
||||
<div class="p-4 bp:p-5 sm:p-6 border-t border-gray-600 md:border-0">
|
||||
<div class="text-[1rem] font-normal text-white">Price Target</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{priceTarget !== null && priceTarget !== undefined
|
||||
? priceTarget
|
||||
|
||||
@ -113,11 +113,11 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
FTD Shares
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{abbreviateNumber(
|
||||
rawData?.slice(-1)?.at(0)?.failToDeliver,
|
||||
@ -128,11 +128,11 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
FTD / Avg Volume
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{relativeFTD > 0.01
|
||||
? relativeFTD + "%"
|
||||
@ -144,7 +144,7 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
1-Year Change
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -460,11 +460,11 @@
|
||||
>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
Market Cap
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{@html abbreviateNumber(
|
||||
data?.getStockQuote?.marketCap,
|
||||
@ -476,9 +476,11 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">Category</div>
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
Category
|
||||
</div>
|
||||
<div
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-[1rem] sm:text-lg"
|
||||
class="mt-1 break-words font-semibold leading-8 text-white text-xl sm:text-2xl"
|
||||
>
|
||||
{#if capCategory}
|
||||
<a
|
||||
@ -495,7 +497,7 @@
|
||||
</div>
|
||||
<div class="px-4 py-3 sm:px-2 sm:py-5 md:px-3 lg:p-6">
|
||||
<div class="flex items-center justify-between sm:block">
|
||||
<div class="text-sm font-semibold text-white">
|
||||
<div class="text-[1rem] font-semibold text-white">
|
||||
1-Year Change
|
||||
</div>
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user