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-10-27 23:19:31 +01:00
parent 29d69c32db
commit d6edfe2dc9
5 changed files with 99 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/lib/components/DividendAnnouncement.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import { stockTicker, displayCompanyName } from "$lib/store";
import InfoModal from "$lib/components/InfoModal.svelte";
export let data;
let rawData = {};
@ -39,17 +38,11 @@
<div class="flex flex-row justify-start mr-auto items-center">
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
<div class="flex flex-row items-center">
<label
for="dividendAnnouncement"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
<h3
class="mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
>
Dividend Announcement
</label>
<InfoModal
title={"Dividend Announcement"}
content={`Dividend announcements are company declarations of cash or stock distributions to shareholders, usually reflecting profit and providing investment returns.`}
id={"dividendAnnouncement"}
/>
</h3>
</div>
</div>
</div>
@ -57,7 +50,7 @@
<div
class="text-white text-[1rem] {latestInfoDate(rawData?.date)
? 'bg-[#F9AB00] bg-opacity-[0.1] p-3 rounded-lg'
: 'bg-[#09090B] pl-1'} "
: 'bg-[#09090B] pl-1'}"
>
<div class="mt-1">
{$displayCompanyName} has announced its upcoming dividend details on {new Date(
@ -70,52 +63,62 @@
})}:
</div>
<li
class="ml-[20px] sm:ml-[30px]"
style="color: #fff; line-height: 22px; margin-top:20px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Dividend:</span> ${rawData?.dividend} per share
({rawData?.dividend / rawData?.dividendPrior - 1 > 0 ? "+" : ""}{(
(rawData?.dividend / rawData?.dividendPrior - 1) *
100
)?.toFixed(2)}% YoY)
</li>
<li
class="ml-[20px] sm:ml-[30px]"
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Dividend Yield:</span>
{rawData?.dividendYield?.toFixed(2)}%
</li>
<li
class="ml-[20px] sm:ml-[30px]"
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Ex-Dividend Date:</span>
{new Date(rawData?.exDividendDate)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
</li>
<!-- Added grid container -->
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 mt-5">
<!-- First column -->
<div>
<li
class="ml-[20px]"
style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Dividend:</span> ${rawData?.dividend} per share
({rawData?.dividend / rawData?.dividendPrior - 1 > 0 ? "+" : ""}{(
(rawData?.dividend / rawData?.dividendPrior - 1) *
100
)?.toFixed(2)}% YoY)
</li>
<li
class="ml-[20px]"
style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Dividend Yield:</span>
{rawData?.dividendYield?.toFixed(2)}%
</li>
</div>
<li
class="ml-[20px] sm:ml-[30px]"
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Payable Date:</span>
{new Date(rawData?.payableDate)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
</li>
<!-- Second column -->
<div>
<li
class="ml-[20px]"
style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Ex-Dividend Date:</span>
{new Date(rawData?.exDividendDate)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
</li>
<li
class="ml-[20px]"
style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Payable Date:</span>
{new Date(rawData?.payableDate)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
</li>
</div>
</ul>
<!-- Keep the Record Date outside the grid as a full-width item -->
<li
class="ml-[20px] sm:ml-[30px]"
style="color: #fff; line-height: 22px; margin-top:0px; margin-bottom: 15px; list-style-type: disc;"
class="ml-[20px]"
style="color: #fff; line-height: 22px; margin-bottom: 15px; list-style-type: disc;"
>
<span class="font-bold">Record Date:</span>
{new Date(rawData?.recordDate)?.toLocaleString("en-US", {

39
src/lib/components/EarningsSurprise.svelte
View File

@ -5,7 +5,8 @@
export let data;
let rawData = {};
let epsRatio = 0;
let revenueRatio = 0;
function latestInfoDate(inputDate) {
// Convert the input date string to milliseconds since epoch
const inputDateMs = Date?.parse(inputDate);
@ -28,6 +29,14 @@
$: {
if ($stockTicker && typeof window !== "undefined") {
rawData = data?.getEarningsSurprise;
epsRatio = (
((rawData?.eps - rawData?.epsPrior) / Math.abs(rawData?.epsPrior)) *
100
)?.toFixed(2);
revenueRatio = (
(rawData?.revenue / rawData?.revenuePrior - 1) *
100
)?.toFixed(2);
}
}
</script>
@ -80,14 +89,12 @@
Math.abs(rawData?.revenueSurprise),
true,
)}, with
<strong
>{((rawData?.revenue / rawData?.revenuePrior - 1) * 100)?.toFixed(
2,
)}%</strong
<span
class="font-semibold {revenueRatio > 0
? 'text-[#00FC50]'
: 'text-[#FF2F1F]'}">{revenueRatio}%</span
>
YoY {rawData?.revenue / rawData?.revenuePrior - 1 < 0
? "decline"
: "growth"}.
YoY {revenueRatio < 0 ? "decline" : "growth"}.
</li>
<li
class="ml-[20px] sm:ml-[30px]"
@ -97,18 +104,12 @@
{rawData?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by ${rawData?.epsSurprise?.toFixed(
2,
)}, with
<strong
>{(
((rawData?.eps - rawData?.epsPrior) /
Math.abs(rawData?.epsPrior)) *
100
)?.toFixed(2)}%</strong
<span
class="font-semibold {epsRatio > 0
? 'text-[#00FC50]'
: 'text-[#FF2F1F]'}">{epsRatio}%</span
>
YoY {(rawData?.eps - rawData?.epsPrior) /
Math.abs(rawData?.epsPrior) <
0
? "decline"
: "growth"}.
YoY {epsRatio < 0 ? "decline" : "growth"}.
</li>
</div>
</div>

31
src/lib/components/NextEarnings.svelte
View File

@ -1,6 +1,5 @@
<script lang="ts">
import { stockTicker, displayCompanyName } from "$lib/store";
import InfoModal from "$lib/components/InfoModal.svelte";
import { abbreviateNumber } from "$lib/utils";
export let data;
@ -39,17 +38,11 @@
<div class="flex flex-row justify-start mr-auto items-center">
<!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
<div class="flex flex-row items-center">
<label
for="nextEarningsInfo"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
<h3
class="mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
>
Next Earnings Release
</label>
<InfoModal
title={"Next Earnings"}
content={`Earnings represent a company's net profit after expenses, taxes, and costs. Reported quarterly, they show financial health, including revenue and EPS, influencing stock prices and investor decisions.`}
id={"nextEarningsInfo"}
/>
</h3>
</div>
</div>
</div>
@ -73,13 +66,19 @@
<br />Analysts project revenue of
<strong>{abbreviateNumber(rawData?.revenueEst, true)}</strong>,
reflecting a
<strong>{revenueRatio}%</strong> YoY {revenueRatio > 0
? "growth"
: revenueRatio < 0
? "shrinking"
: ""} and earnings per share of
<span
class="font-semibold {revenueRatio > 0
? 'text-[#00FC50]'
: 'text-[#FF2F1F]'} ">{abbreviateNumber(revenueRatio)}%</span
>
YoY {revenueRatio > 0 ? "growth" : revenueRatio < 0 ? "shrinking" : ""} and
earnings per share of
<strong>{rawData?.epsEst}</strong>, making a
<strong>{epsRatio}%</strong>
<span
class="font-semibold {epsRatio > 0
? 'text-[#00FC50]'
: 'text-[#FF2F1F]'} ">{epsRatio}%</span
>
{epsRatio > 0 ? "increase" : epsRatio < 0 ? "decrease" : ""} YoY.
</div>
</div>

21
src/routes/stocks/[tickerID]/+layout.server.ts
View File

@ -43,23 +43,6 @@ const fetchWatchlist = async (pb, userId) => {
return output;
};
const fetchCommunitySentiment = async (pb, ticker, cookies) => {
const cookieVote = cookies.get(`community-sentiment-${ticker}`);
const today = new Date().toISOString().split("T")[0];
const pastNDays = new Date(new Date().setDate(new Date().getDate() - 7))
.toISOString()
.split("T")[0];
const output = await pb.collection("sentiment").getFullList({
filter: `ticker="${ticker}" && created < "${today}" && created >= "${pastNDays}"`,
});
return {
alreadyVoted: cookieVote || null,
sentimentData: output?.at(0) || {},
};
};
export const load = async ({ params, locals, cookies, setHeaders }) => {
const { apiURL, apiKey, pb, user } = locals;
const { tickerID } = params;
@ -84,8 +67,6 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
fetchData(apiURL, apiKey, endpoint, tickerID),
),
fetchWatchlist(pb, user?.id),
//fetchFromFastify(fastifyURL, '/get-portfolio-data', user?.id),
fetchCommunitySentiment(pb, tickerID, cookies),
];
const [
@ -102,7 +83,6 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
getDividendAnnouncement,
getNews,
getUserWatchlist,
getCommunitySentiment,
] = await Promise.all(promises);
return {
@ -119,7 +99,6 @@ export const load = async ({ params, locals, cookies, setHeaders }) => {
getDividendAnnouncement,
getNews,
getUserWatchlist,
getCommunitySentiment,
companyName: cleanString(getStockDeck?.at(0)?.companyName),
};
};

22
src/routes/stocks/[tickerID]/+page.svelte
View File

@ -25,7 +25,6 @@
import EarningsSurprise from "$lib/components/EarningsSurprise.svelte";
import DividendAnnouncement from "$lib/components/DividendAnnouncement.svelte";
import CommunitySentiment from "$lib/components/CommunitySentiment.svelte";
import Lazy from "$lib/components/Lazy.svelte";
import { convertTimestamp } from "$lib/utils";
import { Button } from "$lib/components/shadcn/button/index.js";
@ -36,7 +35,6 @@
export let form;
let prePostData = {};
let communitySentiment = {};
$: previousClose = data?.getStockQuote?.previousClose;
@ -668,11 +666,8 @@
oneYearPrice = [];
maxPrice = [];
prePostData = {};
communitySentiment = {};
output = null;
communitySentiment = data?.getCommunitySentiment;
const asyncFunctions = [getPrePostQuote()];
Promise.all(asyncFunctions)
@ -1651,10 +1646,10 @@
</div>
</div>
<div>
<h2 class="mb-2" data-svelte-h="svelte-avjv7o">
<h2 class="mb-2 text-white text-2xl font-semibold">
Analyst Forecast
</h2>
<p class="mb-4" data-test="overview-forecast-intro">
<p class="mb-4 text-gray-200">
According to 40 analysts, the average rating for NVDA stock is
"Strong Buy." The 12-month stock price forecast is $145.84,
which is an increase of 3.04% from the latest price.
@ -1688,9 +1683,6 @@
<div class="lg:sticky lg:top-20"></div>
</div>
<div class="w-full">
<div class="w-full mt-14 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
<CommunitySentiment {communitySentiment} />
</div>
<div class="w-full mt-10 m-auto sm:p-6 lg:hidden">
<Lazy>
<h3
@ -1705,7 +1697,7 @@
</div>
<div
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
data?.getEarningsSurprise || {},
)?.length !== 0
? ''
@ -1715,7 +1707,7 @@
</div>
<div
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
data?.getNextEarnings || {},
)?.length !== 0
? ''
@ -1725,7 +1717,7 @@
</div>
<div
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
data?.getDividendAnnouncement || {},
)?.length !== 0
? ''
@ -1735,7 +1727,7 @@
</div>
<div
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {Object?.keys(
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {Object?.keys(
data?.getBullBearSay || {},
)?.length !== 0
? ''
@ -1746,7 +1738,7 @@
<Lazy>
<div
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {data
class="w-full mt-10 sm:mt-0 m-auto sm:pl-6 sm:pb-6 {data
?.getWhyPriceMoved?.length !== 0
? ''
: 'hidden'}"