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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-04 21:22:08 +01:00
parent b7001b78b7
commit 7da1500963
10 changed files with 118 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/components/Table/Table.svelte
View File

@ -35,7 +35,7 @@
export let hideLastRow = false;
let originalData = [...rawData]; // Unaltered copy of raw data
let ruleOfList = defaultList;
let ruleOfList = [...defaultList];
let socket;
const defaultRules = defaultList?.map((item) => item?.rule);
@ -105,6 +105,7 @@
{ name: "Altman-Z-Score", rule: "altmanZScore", type: "float" },
{ name: "Piotroski F-Score", rule: "piotroskiScore", type: "float" },
{ name: "Total Liabilities", rule: "totalLiabilities", type: "int" },
{ name: "RSI", rule: "rsi", type: "float" },
{ name: "Short Ratio", rule: "shortRatio", type: "int" },
{ name: "Short Interest", rule: "sharesShort", type: "int" },
{ name: "Short % Float", rule: "shortFloatPercent", type: "percent" },
@ -150,7 +151,8 @@
?.map((item) => item?.name), // Map the remaining items to their names
);
checkedItems = new Set(ruleOfList.map((item) => item.name));
checkedItems = new Set(ruleOfList?.map((item) => item.name));
allRows = sortIndicatorCheckMarks(allRows);
const handleDownloadMessage = (event) => {
let updateData = event?.data?.rawData ?? []; // Use a new variable for updated data
@ -168,7 +170,7 @@
Object.assign(newData, updateData[i]);
// Merge fields from defaultRules that are missing in updateData
defaultRules.forEach((rule) => {
defaultRules?.forEach((rule) => {
if (!(rule in updateData[i]) && rule in rawData[i]) {
newData[rule] = rawData[i][rule];
}
@ -494,7 +496,6 @@
score: "AI Score",
researchAndDevelopmentExpenses: "R&D",
counter: "Ratings Count",
rsi: "RSI",
// Add more key-label mappings here as needed
};

17
src/routes/+layout.svelte
View File

@ -325,18 +325,6 @@
>
</Button>
<Button
builders={[builder]}
type="submit"
class="w-full bg-[#141417] hover:bg-[#141417]"
>
<a
href="/most-shorted-stocks"
class="text-start w-full text-[1rem] text-white ml-4 mt-4"
>Top Shorted Stocks</a
>
</Button>
<Button
builders={[builder]}
type="submit"
@ -928,11 +916,6 @@
>Top Analyst Stocks</a
>
<a
href="/most-shorted-stocks"
class="text-[1rem] text-white ml-4 mt-4"
>Top Shorted Stocks</a
>
<a
href="/industry"
class="text-[1rem] text-white ml-4 mt-4"

4
src/routes/list/+layout.svelte
View File

@ -202,6 +202,10 @@
title: "Biggest Companies with Failed-to-Deliver Shares",
link: "/list/most-ftd-shares",
},
{
title: "Most Shorted Stocks",
link: "/list/most-shorted-stocks",
},
];
navigation = [...navigationIndustry, ...navigation];

6
src/routes/list/+page.svelte
View File

@ -166,6 +166,12 @@
>Penny Stocks</a
>
</li>
<li>
<a
class="text-blue-400 sm:hover:text-white"
href="/list/most-shorted-stocks">Most Shorted Stocks</a
>
</li>
<li>
<a class="text-blue-400 sm:hover:text-white" href="/list/oversold-stocks/"
>Oversold Stocks</a

26
src/routes/list/most-shorted-stocks/+page.server.ts Normal file
View File

@ -0,0 +1,26 @@
export const load = async ({ locals, setHeaders }) => {
const getStocks = async () => {
const { apiKey, apiURL } = locals;
const postData = { filterList: 'most-shorted-stocks' };
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();
setHeaders({ "cache-control": "public, max-age=60*5" });
return output;
};
// Make sure to return a promise
return {
getStocks: await getStocks(),
};
};

45
src/routes/list/most-shorted-stocks/+page.svelte Normal file
View File

@ -0,0 +1,45 @@
<script lang="ts">
import Table from "$lib/components/Table/Table.svelte";
export let data;
const defaultList = [
{ name: "Short % Float", rule: "shortFloatPercent" },
{ name: "Price", rule: "price" },
{ name: "% Change", rule: "changesPercentage" },
{ name: "Market Cap", rule: "marketCap" },
];
const excludedRules = new Set([
"volume",
"price",
"changesPercentage",
"revenue",
"eps",
"marketCap",
"shortFloatPercent",
]);
</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
the stock's float. Float is the amount of shares that are considered
available for trading.
</div>
<!-- Page wrapper -->
<Table {data} rawData={data?.getStocks} {excludedRules} {defaultList} />
</section>

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

@ -9,6 +9,16 @@
{ name: "% Change", rule: "changesPercentage" },
{ name: "Market Cap", rule: "marketCap" },
];
const excludedRules = new Set([
"volume",
"price",
"changesPercentage",
"revenue",
"eps",
"marketCap",
"rsi",
]);
</script>
<section class="w-full overflow-hidden m-auto">
@ -32,5 +42,10 @@
</div>
<!-- Page wrapper -->
<Table {data} rawData={data?.getOverBoughtStocks} {defaultList} />
<Table
{data}
rawData={data?.getOverBoughtStocks}
{excludedRules}
{defaultList}
/>
</section>

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

@ -9,6 +9,16 @@
{ name: "% Change", rule: "changesPercentage" },
{ name: "Market Cap", rule: "marketCap" },
];
const excludedRules = new Set([
"volume",
"price",
"changesPercentage",
"revenue",
"eps",
"marketCap",
"rsi",
]);
</script>
<section class="w-full overflow-hidden m-auto">
@ -33,5 +43,10 @@
</div>
<!-- Page wrapper -->
<Table {data} rawData={data?.getOverSoldStocks} {defaultList} />
<Table
{data}
rawData={data?.getOverSoldStocks}
{excludedRules}
{defaultList}
/>
</section>

25
src/routes/most-shorted-stocks/+page.server.ts
View File

@ -1,25 +0,0 @@
export const load = async ({ locals, setHeaders }) => {
const getMostShortedStocks = async () => {
const { apiKey, apiURL, user } = locals;
const response = await fetch(apiURL + "/most-shorted-stocks", {
method: "GET",
headers: {
"Content-Type": "application/json",
"X-API-KEY": apiKey,
},
});
let output = await response.json();
output = user?.tier !== "Pro" ? output?.reverse()?.slice(0, 6) : output;
setHeaders({ "cache-control": "public, max-age=3000" });
return output;
};
// Make sure to return a promise
return {
getMostShortedStocks: await getMostShortedStocks(),
};
};

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

@ -1,168 +0,0 @@
<script lang="ts">
import { numberOfUnreadNotification } from "$lib/store";
import Table from "$lib/components/Table/Table.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right";
export let data;
const excludedRules = new Set([
"volume",
"price",
"shortRatio",
"sharesShort",
"shortOutStandingPercent",
"shortFloatPercent",
"changesPercentage",
]);
const defaultList = [
{ name: "Short Ratio", rule: "shortRatio" },
{ name: "Short Interest", rule: "sharesShort" },
{ name: "Short % Shares", rule: "shortOutStandingPercent" },
{ name: "Short % Float", rule: "shortFloatPercent" },
];
const hideLastRow = true;
</script>
<svelte:head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} High
Short Interest Stocks · stocknear
</title>
<meta
name="description"
content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`}
/>
<!-- Other meta tags -->
<meta
property="og:title"
content={`High Short Interest Stocks · stocknear`}
/>
<meta
property="og:description"
content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`}
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content={`High Short Interest Stocks · stocknear`}
/>
<meta
name="twitter:description"
content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`}
/>
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section
class="w-full max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
>
<div class="text-sm sm:text-[1rem] breadcrumbs">
<ul>
<li><a href="/" class="text-gray-300">Home</a></li>
<li class="text-gray-300">Top Shorted Stocks</li>
</ul>
</div>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
<div
class="relative flex justify-center items-start overflow-hidden w-full"
>
<main class="w-full lg:w-3/4 lg:pr-5">
<div class="mb-6 border-b-[3px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
Top Shorted Stocks
</h1>
<p class="mb-3 px-1 text-base font-semibold text-muted sm:px-0">
High short-interest stocks are volatile and prone to short
squeezes.
</p>
</div>
<div class="w-full m-auto mt-20 sm:mt-10">
<Table
{data}
rawData={data?.getMostShortedStocks}
{excludedRules}
{defaultList}
{hideLastRow}
/>
</div>
<UpgradeToPro
{data}
title="Get stock forecasts from Wall Street's highest rated professionals"
/>
</main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/pricing"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Upgrade now for unlimited access to all data and tools
</span>
</a>
</div>
{/if}
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/analysts"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Analyst
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings
</span>
</a>
</div>
<div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
>
<a
href={"/analysts/top-stocks"}
class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Top Stocks Picks
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings.
</span>
</a>
</div>
</aside>
</div>
</div>
</div>
</section>