AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-28 23:15:21 +01:00
parent 7caf65e345
commit a9093f7882
17 changed files with 189 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Infobox.svelte
View File

@ -3,7 +3,7 @@
</script>
<div
class="mt-5 bg-primary rounded-l-none rounded-md sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
class="sm:mt-5 bg-primary rounded-l-none rounded-md sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
>
<svg
class="h-6 w-6 hidden sm:block"

20
src/lib/components/Table/TableHeader.svelte
View File

@ -3,22 +3,6 @@
export let sortOrders = {};
export let sortData;
// Local sort orders specific to this table
let localSortOrders = { ...sortOrders };
// Handle sorting within this table
function handleSort(key) {
const currentOrder = localSortOrders[key]?.order || null;
const newOrder =
currentOrder === "asc" ? "desc" : currentOrder === "desc" ? null : "asc";
localSortOrders = { ...localSortOrders, [key]: { order: newOrder } };
// Notify parent with the updated sort state
if (sortData) {
sortData(key, newOrder);
}
}
const SortIcon = ({ sortOrder }) => `
<svg class="flex-shrink-0 w-4 h-4 inline-block ${
sortOrder === "asc" ? "rotate-180" : sortOrder === "desc" ? "" : "hidden"
@ -31,14 +15,14 @@
<tr class="bg-default border-b border-[#27272A]">
{#each columns as column}
<th
on:click={() => handleSort(column.key)}
on:click={() => sortData(column.key)}
class="cursor-pointer select-none text-white font-semibold text-sm whitespace-nowrap {column.align ===
'right'
? 'text-end'
: 'text-start'}"
>
{column.label}
{@html SortIcon({ sortOrder: localSortOrders[column.key]?.order })}
{@html SortIcon({ sortOrder: sortOrders[column.key].order })}
</th>
{/each}
</tr>

38
src/routes/etf/[tickerID]/dividends/+page.svelte
View File

@ -335,40 +335,34 @@
</div>
<div
class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-md mb-4"
class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4"
>
<table
class="table table-sm table-compact flex justify-start items-center w-full m-auto"
class="table table-sm table-compact bg-table border border-gray-800 flex justify-start items-center w-full m-auto"
>
<thead>
<tr class="bg-default border-b-slate-600 shadow-md">
<th
class="text-start bg-default border-b border-[#09090B] text-white text-sm font-semibold"
>
<thead class="bg-default">
<tr class="">
<th class="text-start text-white text-sm font-semibold">
Ex-Divid. Date
</th>
<th
class="text-end bg-default border-b border-[#09090B] text-white text-sm font-semibold"
>
<th class="text-end text-white text-sm font-semibold">
Cash Amount
</th>
<th
class="text-end bg-default border-b border-[#09090B] text-white text-sm font-semibold"
>
<th class="text-end text-white text-sm font-semibold">
Record Date
</th>
<th
class="text-end bg-default border-b border-[#09090B] text-white text-sm font-semibold"
>
<th class="text-end text-white text-sm font-semibold">
Pay Date
</th>
</tr>
</thead>
<tbody class="shadow-md">
<tbody class="">
{#each rawData?.history as item}
<tr class="text-gray-200 odd:bg-odd">
<tr
class="text-white odd:bg-odd border-b border-gray-800"
>
<td
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium"
>
{new Date(item?.date)?.toLocaleString("en-US", {
month: "short",
@ -378,12 +372,12 @@
})}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{item?.adjDividend?.toFixed(3)}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{item?.recordDate?.length !== 0
? new Date(item?.recordDate)?.toLocaleString(
@ -398,7 +392,7 @@
: "n/a"}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{item?.paymentDate?.length !== 0
? new Date(item?.paymentDate)?.toLocaleString(

27
src/routes/etf/[tickerID]/holdings/+page.svelte
View File

@ -101,25 +101,22 @@
<div
class="relative flex justify-center items-center overflow-hidden w-full"
>
<div class="sm:p-7 w-full m-auto">
<div class="mb-10">
<div class="mt-5 sm:mt-0 sm:p-7 w-full m-auto">
<div class="flex flex-row items-center md:space-x-4 md:border-0">
<h1 class=" text-xl sm:text-2xl font-bold">
{$etfTicker} Holdings List
</h1>
<div
class="ml-3 sm:mt-1 whitespace-nowrap text-sm sm:text-[1rem] md:ml-0"
>
<span class="inline">As of </span>{formattedDate}
</div>
</div>
<div class="mt-5 mb-10">
<Infobox text={htmlOutput} />
</div>
{#if rawData?.length !== 0}
<div class="text-white">
<div class="flex flex-row items-center md:space-x-4 md:border-0">
<h1 class=" text-xl sm:text-2xl font-semibold">
{$etfTicker} Holdings List
</h1>
<div
class="ml-3 sm:mt-1 whitespace-nowrap text-sm sm:text-[1rem] md:ml-0"
>
<span class="inline">As of </span>{formattedDate}
</div>
</div>
</div>
<Table
{data}
{rawData}

119
src/routes/etf/[tickerID]/insider/+page.svelte
View File

@ -6,6 +6,7 @@
etfTicker,
} from "$lib/store";
import { getPartyForPoliticians } from "$lib/utils";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
export let data;
@ -103,6 +104,83 @@
window.removeEventListener("scroll", handleScroll);
};
});
let columns = [
{ key: "representative", label: "Person", align: "left" },
{ key: "party", label: "Party", align: "left" },
{ key: "transactionDate", label: "Transaction Date", align: "right" },
{
key: "amount",
label: "Amount",
align: "right",
},
{ key: "type", label: "Type", align: "right" },
];
let sortOrders = {
representative: { order: "none", type: "string" },
party: { order: "none", type: "string" },
transactionDate: { order: "none", type: "date" },
amount: { order: "none", type: "string" },
type: { order: "none", type: "string" },
};
const sortData = (key) => {
// Reset all other keys to 'none' except the current key
for (const k in sortOrders) {
if (k !== key) {
sortOrders[k].order = "none";
}
}
// Cycle through 'none', 'asc', 'desc' for the clicked key
const orderCycle = ["none", "asc", "desc"];
let originalData = rawData;
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
sortOrders[key].order =
orderCycle[(currentOrderIndex + 1) % orderCycle.length];
const sortOrder = sortOrders[key].order;
// Reset to original data when 'none' and stop further sorting
if (sortOrder === "none") {
senateTradingList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
return;
}
// Define a generic comparison function
const compareValues = (a, b) => {
const { type } = sortOrders[key];
let valueA, valueB;
switch (type) {
case "date":
valueA = new Date(a[key]);
valueB = new Date(b[key]);
break;
case "string":
valueA = a[key].toUpperCase();
valueB = b[key].toUpperCase();
return sortOrder === "asc"
? valueA.localeCompare(valueB)
: valueB.localeCompare(valueA);
case "number":
default:
valueA = parseFloat(a[key]);
valueB = parseFloat(b[key]);
break;
}
if (sortOrder === "asc") {
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
} else {
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
}
};
// Sort using the generic comparison function
senateTradingList = [...originalData].sort(compareValues)?.slice(0, 50);
};
</script>
<svelte:head>
@ -161,7 +239,7 @@
class="w-full mt-5 mb-10 m-auto flex justify-center items-center"
>
<div
class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3"
class="w-full grid grid-cols-2 lg:grid-cols-4 gap-y-3 lg:gap-y-3 gap-x-3"
>
<!--Start Buy/Sell-->
<div
@ -296,35 +374,15 @@
class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
>
<thead>
<tr class="bg-default border-b border-[#27272A]">
<th
class="shadow-md text-start bg-default text-white text-sm font-semibold"
>
Person
</th>
<th
class="shadow-md text-end bg-default text-white text-sm font-semibold"
>
Transaction Date
</th>
<th
class="shadow-md text-end bg-default text-white text-sm font-semibold"
>
Amount
</th>
<th
class="shadow-md text-white font-semibold text-end text-sm"
>Type</th
>
</tr>
<TableHeader {columns} {sortOrders} {sortData} />
</thead>
<tbody>
{#each senateTradingList as item}
<tr
class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-default border-b-[#09090B]"
class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b border-gray-800"
>
<td
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]"
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3"
>
<div class="flex flex-row items-center">
<div
@ -350,14 +408,19 @@
item?.representative?.replace("_", " "),
)}</a
>
<span class="text-gray-300">{item?.party}</span>
</div>
</div>
<!--{item?.firstName} {item?.lastName}-->
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{item?.party}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{new Date(item?.transactionDate)?.toLocaleString(
"en-US",
@ -371,12 +434,12 @@
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{item?.amount}
</td>
<td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-b-[#09090B]"
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
>
{#if item?.type === "Bought"}
<span class="text-[#00FC50]">Bought</span>

25
src/routes/list/bitcoin-etfs/+page.svelte
View File

@ -1,10 +1,11 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { screenWidth } from "$lib/store";
import { abbreviateNumber } from "$lib/utils";
import TableHeader from "$lib/components/Table/TableHeader.svelte";
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
import DownloadData from "$lib/components/DownloadData.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let rawData = data?.getETFBitcoinList;
@ -100,25 +101,13 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="border border-gray-600 w-full sm:flex sm:flex-row sm:items-center m-auto text-white bg-default sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
A list of all Bitcoin ETFs available for trading on the US stock market,
offering investors exposure to the cryptocurrency's price.
</div>
<Infobox
text=" A list of all Bitcoin ETFs available for trading on the US stock market,
offering investors exposure to the cryptocurrency's price."
/>
<div
class="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"
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">

13
src/routes/list/country/[slug]/+page.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import { abbreviateNumber } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
@ -27,15 +28,13 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
>
A complete list of the {countryNavigation[data?.getParams?.toLowerCase()]} companies
that are listed on the US stock market.
</div>
<Infobox
text={`A complete list of the ${countryNavigation[data?.getParams?.toLowerCase()]} companies
that are listed on the US stock market.`}
/>
<div
class="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"
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">

14
src/routes/list/exchange/[slug]/+page.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { abbreviateNumber } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let rawData = data?.getExchangeCategory;
@ -23,15 +23,13 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
>
A complete list of the {exchangeNavigation[data?.getParams?.toLowerCase()]} companies
that are listed on the US stock market.
</div>
<Infobox
text={`A complete list of the ${exchangeNavigation[data?.getParams?.toLowerCase()]} companies
that are listed on the US stock market.`}
/>
<div
class="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"
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">

25
src/routes/list/faang/+page.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { abbreviateNumber } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let rawData = data?.getFAANG;
@ -12,27 +12,14 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full border border-gray-600 sm:flex sm:flex-row sm:items-center m-auto text-white bg-default sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
The "FAANG" stocks refer to five major U.S. tech companies: Meta (formerly
<Infobox
text="The FAANG stocks refer to five major U.S. tech companies: Meta (formerly
Facebook), Amazon, Apple, Netflix, and Alphabet (Google). Originally
popularized by Jim Cramer as "FANG," the list did not initially include
Apple.
</div>
popularized by Jim Cramer as FAANG."
/>
<div
class="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"
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">

9
src/routes/list/index/[slug]/+page.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import { abbreviateNumber } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
@ -26,14 +27,10 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
>
{indexNavigation[data?.getParams?.toLowerCase()]}
</div>
<Infobox text={`${indexNavigation[data?.getParams?.toLowerCase()]}`} />
<div
class="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"
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">

23
src/routes/list/magnificent-seven/+page.svelte
View File

@ -1,6 +1,7 @@
<script lang="ts">
import { abbreviateNumber } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let rawData = data?.getMagnificentSeven;
@ -12,26 +13,14 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full border border-gray-600 sm:flex sm:flex-row sm:items-center m-auto text-white bg-default sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
The "magnificent seven" stocks are 7 technology stocks that drove a large
<Infobox
text="The magnificent seven stocks are 7 technology stocks that drove a large
portion of the market's returns in 2023 and 2024. The list includes Apple,
Microsoft, Amazon, Alphabet (Google), Tesla, Nvidia and Meta Platforms.
</div>
Microsoft, Amazon, Alphabet (Google), Tesla, Nvidia and Meta Platforms."
/>
<div
class="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"
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">

32
src/routes/list/market-cap/[slug]/+page.svelte
View File

@ -2,6 +2,7 @@
import { abbreviateNumber } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte";
import { page } from "$app/stores";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
@ -109,34 +110,13 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
>
{currentCategoryData?.name} stocks have market capitalizations ranging {description}
USD.
<!--
, while additional categories include
{#each otherCategories as category, i}
{#if i === otherCategories.length - 1}
and
<a href={category.link} class="text-blue-400 sm:hover:text-white">
{category.name}
</a>.
{:else if i === otherCategories.length - 2}
<a href={category.link} class="text-blue-400 sm:hover:text-white">
{category.name}
</a>
{:else}
<a href={category.link} class="text-blue-400 sm:hover:text-white">
{category.name}
</a>,
{/if}
{/each}
-->
</div>
<Infobox
text={`${currentCategoryData?.name} stocks have market capitalizations ranging ${description}
USD.`}
/>
<div
class="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"
class="mt-5 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">

21
src/routes/list/most-shorted-stocks/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
@ -22,23 +23,11 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
A list of the stocks with the highest number of shares shorted relative to
<Infobox
text="A list of the stocks with the highest number of shares shorted relative to
the stock's float. Float is the amount of shares that are considered
available for trading.
</div>
available for trading."
/>
<!-- Page wrapper -->
<Table {data} rawData={data?.getStocks} {excludedRules} {defaultList} />

21
src/routes/list/overbought-stocks/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
@ -22,24 +23,12 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
A list of stocks that are "overbought" according to the Relative Strength
<Infobox
text="A list of stocks that are overbought according to the Relative Strength
Index (RSI), which is an indicator often used in technical analysis. An RSI
of over 70 on a daily chart is generally used to determine that an asset is
overbought and indicates that the stock may soon reverse to the downside.
</div>
overbought and indicates that the stock may soon reverse to the downside."
/>
<!-- Page wrapper -->
<Table

21
src/routes/list/oversold-stocks/+page.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
@ -22,25 +23,13 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
A list of stocks that are "oversold" according to the Relative Strength
<Infobox
text=" A list of stocks that are oversold according to the Relative Strength
Index (RSI), which is an indicator often used in technical analysis. An RSI
of under 30 on a daily chart is generally used to determine that an asset is
oversold and indicates that the stock may soon bounce back from the oversold
conditions.
</div>
conditions."
/>
<!-- Page wrapper -->
<Table

22
src/routes/list/penny-stocks/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
const defaultList = [
@ -12,23 +12,11 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#fff"
d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
/></svg
>
A list of actively traded penny stocks, which are generally defined as
<Infobox
text=" A list of actively traded penny stocks, which are generally defined as
stocks with a price below $5 per share. It is filtered to only show stocks
with volume over 10K.
</div>
with volume over 10K."
/>
<!-- Page wrapper -->
<Table {data} rawData={data?.getPennyStocks} {defaultList} />

16
src/routes/list/sector/[slug]/+page.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { abbreviateNumber } from "$lib/utils";
import Table from "$lib/components/Table/Table.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let rawData = data?.getSectorCategory;
@ -17,16 +17,14 @@
</script>
<section class="w-full overflow-hidden m-auto">
<div
class="w-full m-auto text-white border border-gray-600 rounded-md h-auto p-5 mb-4"
>
The {data?.getParams} sector has a total of {rawData?.length} stocks, with a
combined market cap of {abbreviateNumber(totalMarketCap)} and a total revenue
of {abbreviateNumber(totalRevenue)}.
</div>
<Infobox
text={`The ${data?.getParams} sector has a total of ${rawData?.length} stocks, with a
combined market cap of ${abbreviateNumber(totalMarketCap)} and a total revenue
of ${abbreviateNumber(totalRevenue)}.`}
/>
<div
class="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"
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">