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 2025-03-10 23:38:33 +01:00
parent 6b8bffbe7c
commit 6a2b9038f0
33 changed files with 149 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,8 +83,8 @@
rawData?.dividendPrior -
1 >
0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'}"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'}"
>
{(
(rawData?.dividend / rawData?.dividendPrior - 1) *

5
src/lib/components/HoverStockChart.svelte
View File

@ -207,8 +207,9 @@
<p>
Current Price: {stockChartData?.price?.toFixed(2)} (<span
class="text-xs {change >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'}">{change?.toFixed(2)}</span
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'}"
>{change?.toFixed(2)}</span
>)
</p>
<p>

34
src/lib/components/IndustryTable.svelte
View File

@ -90,7 +90,7 @@
<div class="w-full overflow-x-auto">
<table
class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
>
<thead>
<TableHeader {columns} {sortOrders} {sortData} />
@ -99,12 +99,12 @@
{#each displayList as item}
<!-- row -->
<tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800"
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
>
<td class=" text-sm sm:text-[1rem] whitespace-nowrap">
<a
href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
class="sm:hover:underline sm:hover:underline-offset-4 text-white"
class="sm:hover:underline sm:hover:underline-offset-4"
>
{item?.industry?.length > charNumber
? item?.industry?.slice(0, charNumber) + "..."
@ -112,50 +112,42 @@
</a>
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.numStocks}
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{abbreviateNumber(item?.totalMarketCap) ?? "n/a"}
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.avgDividendYield?.toFixed(2) ?? "n/a"}%
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.pe?.toFixed(2) ?? "n/a"}
</td>
<td
class="{item?.profitMargin >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'} text-sm sm:text-[1rem] whitespace-nowrap text-end"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-sm sm:text-[1rem] whitespace-nowrap text-end"
>
{abbreviateNumber(item?.profitMargin)}%
</td>
<td
class="{item?.avgChange1D >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.avgChange1D?.toFixed(2) ?? "n/a"}%
</td>
<td
class="{item?.avgChange1Y >= 0
? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.avgChange1Y?.toFixed(2) ?? "n/a"}%
</td>

4
src/lib/components/Options/UnusualActivity.svelte
View File

@ -768,7 +768,7 @@
<span
class="inline-block px-2 {item?.optionType === 'Calls'
? 'text-green-600 dark:text-[#00FC50]'
: 'text-[#FF2F1F]'}"
: 'text-red-600 dark:text-[#FF2F1F]'}"
>
{item?.optionType}
</span>
@ -817,7 +817,7 @@
'Bullish'
? 'text-green-600 dark:text-[#00FC50]'
: item?.sentiment === 'Bearish'
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-[#C8A32D]'} "
>
{item?.sentiment}

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

@ -170,7 +170,8 @@
class="text-start text-[1rem] sm:text-lg font-semibold {priceSentiment ===
'Bullish'
? 'text-[#37C97D]'
: 'text-[#FF2F1F]'}">{priceSentiment}</span
: 'text-red-600 dark:text-[#FF2F1F]'}"
>{priceSentiment}</span
>
</div>
</div>
@ -215,7 +216,7 @@
? 'text-green-600 dark:text-[#00FC50]'
: r2Score >= 50
? 'text-[#F8901E]'
: 'text-[#FF2F1F]'}"
: 'text-red-600 dark:text-[#FF2F1F]'}"
stroke-width="3"
stroke-dasharray="100"
stroke-dashoffset={100 - r2Score}
@ -270,7 +271,7 @@
? 'text-green-600 dark:text-[#00FC50]'
: mape <= 35
? 'text-[#F8901E]'
: 'text-[#FF2F1F]'}"
: 'text-red-600 dark:text-[#FF2F1F]'}"
stroke-width="3"
stroke-dasharray="100"
stroke-dashoffset={100 - mape > 0 ? 100 - mape : 1}
@ -299,7 +300,7 @@
<span
class="font-semibold {priceSentiment === 'Bullish'
? 'text-[#37C97D]'
: 'text-[#FF2F1F]'}">{priceSentiment}</span
: 'text-red-600 dark:text-[#FF2F1F]'}">{priceSentiment}</span
>
trend, suggesting that the future price is expected to {priceSentiment ===
"Bullish"

4
src/lib/components/SentimentAnalysis.svelte
View File

@ -79,7 +79,7 @@
class="stroke-current {oneYearResult > 5
? 'text-green-600 dark:text-[#00FC50]'
: oneYearResult < 5
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} text-opacity-[0.7]"
stroke-width="3.5"
stroke-dasharray="100"
@ -116,7 +116,7 @@
class="stroke-current {oneMonthResult > 5
? 'text-green-600 dark:text-[#00FC50]'
: oneMonthResult < 5
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} "
stroke-width="4"
stroke-dasharray="100"

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

@ -168,7 +168,7 @@
class="stroke-current {rating > 5
? 'text-green-600 dark:text-[#00FC50]'
: rating < 5
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} "
stroke-width="4"
stroke-dasharray="100"

4
src/routes/analysts/[slug]/+page.svelte
View File

@ -479,7 +479,7 @@
'Sell',
'Underperform',
]?.includes(item?.rating_current)
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-gray-300'}"
>
{item?.rating_current}
@ -528,7 +528,7 @@
<td
class="{item?.upside >= 0 && item?.upside !== null
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: item?.upside < 0 && item?.upside !== null
? 'text-red-600 dark:text-[#FF2F1F]'
: ''} text-end text-sm sm:text-[1rem] whitespace-nowrap"

14
src/routes/blog/+page.svelte
View File

@ -23,7 +23,7 @@
>
<main class="w-full">
<div class="mb-6 border-b-[2px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
<h1 class="mb-1 text-2xl sm:text-3xl font-bold">
Stock Analysis Blog
</h1>
</div>
@ -32,7 +32,7 @@
{#if allBlogPosts?.length !== 0}
{#each allBlogPosts as item}
<div
class="flex flex-col overflow-hidden rounded border border-gray-700"
class="shadow-sm sm:hover:shadow-lg flex flex-col overflow-hidden rounded border border-gray-300 dark:border-gray-700"
>
<div class="shrink-0">
<a href={"/blog/article/" + convertToSlug(item?.title)}
@ -49,18 +49,16 @@
>
</div>
<div
class="flex flex-1 flex-col justify-between bg-table p-4 sm:p-6"
class="flex flex-1 flex-col justify-between bg-white dark:bg-table p-4 sm:p-6"
>
<div class="flex-1">
<a
href={"/blog/article/" + convertToSlug(item?.title)}
class="mt-2 block"
><h2
class="text-lg sm:text-xl font-semibold text-white"
>
><h2 class="text-lg sm:text-xl font-semibold">
{item?.title}
</h2>
<p class="mt-3 text-sm text-white">
<p class="mt-3 text-sm">
{item?.abstract.length > 250
? item?.abstract?.slice(0, 250) + "..."
: item?.abstract}
@ -68,7 +66,7 @@
>
</div>
<div class="mt-6 flex items-center">
<div class="flex space-x-1 text-sm text-white">
<div class="flex space-x-1 text-sm">
Published: <time datetime={item?.created} class="ml-1">
{new Date(item?.created)?.toLocaleString("en-US", {
month: "short",

14
src/routes/blog/article/[slug]/+page.svelte
View File

@ -21,7 +21,7 @@
/>
<section
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3 text-white"
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@ -33,7 +33,7 @@
article?.id,
article?.cover,
)}
class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-800"
class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-300 dark:border-gray-800"
loading="lazy"
alt="Wallpaper"
/>
@ -42,17 +42,15 @@
<article
class="z-5 relative mx-1 {article?.cover
? '-mt-10 lg:-mt-16'
: 'mt-5'} rounded-t-md bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
: 'mt-5'} rounded-t-md bg-white dark:bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
>
<header
class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
>
<h1
class="mb-3 text-2xl sm:text-3xl font-bold text-white md:text-4xl"
class="pb-3 border-b-[2px] border-muted dark:border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
>
<h1 class="mb-3 text-2xl sm:text-3xl font-bold md:text-4xl">
{article?.title}
</h1>
<div class="text-white">
<div class="">
<div>
Last Updated: {new Date(article?.updated)?.toLocaleString(
"en-US",

6
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -753,7 +753,7 @@
>
<span
class={displayLegend?.change >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{displayLegend?.change}
@ -797,8 +797,8 @@
<div
class="mt-1.5 block text-sm xs: sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >=
0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'}"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'}"
>
{prePostData?.changesPercentage?.toFixed(
2,

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

@ -746,7 +746,7 @@
>
<span
class={displayLegend?.graphChange >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{displayLegend?.graphChange ??

2
src/routes/etf/[tickerID]/history/+page.svelte
View File

@ -480,7 +480,7 @@
? "text-[#00FC50] before:content-['+'] "
: item?.changesPercentage < 0 &&
item?.changesPercentage !== null
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} text-end"
>
{item?.changesPercentage !== null

6
src/routes/index/[tickerID]/+layout.svelte
View File

@ -756,7 +756,7 @@
>
<span
class={displayLegend?.change >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{displayLegend?.change}
@ -800,8 +800,8 @@
<div
class="mt-1.5 block text-sm xs: sm:mt-0 sm:inline sm:text-lg {prePostData?.changesPercentage >=
0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'}"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'}"
>
{prePostData?.changesPercentage?.toFixed(
2,

2
src/routes/index/[tickerID]/+page.svelte
View File

@ -747,7 +747,7 @@
>
<span
class={displayLegend?.graphChange >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{displayLegend?.graphChange ??

2
src/routes/index/[tickerID]/history/+page.svelte
View File

@ -476,7 +476,7 @@
? "text-[#00FC50] before:content-['+'] "
: item?.changesPercentage < 0 &&
item?.changesPercentage !== null
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} text-end"
>
{item?.changesPercentage !== null

15
src/routes/industry/+layout.svelte
View File

@ -1,5 +1,4 @@
<script lang="ts">
import { numberOfUnreadNotification } from "$lib/store";
import { page } from "$app/stores";
export let data;
@ -42,17 +41,17 @@
</ul>
</div>
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-default overflow-hidden">
<div class="mt-10 sm:mt-5 w-full m-auto mb-10 overflow-hidden">
<div class="mb-6">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
<h1 class="mb-1 text-2xl sm:text-3xl font-bold">
Stock Sectors & Industries
</h1>
</div>
<nav class="border-b-[2px] overflow-x-auto whitespace-nowrap mb-5">
<ul
class="flex flex-row items-center w-full text-[1rem] sm:text-lg text-white"
<nav
class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-[1rem] sm:text-lg">
{#each tabs as item, i}
<a
href={i === 0
@ -62,8 +61,8 @@
: "/industry/all"}
on:click={() => handleMode(i)}
class="p-2 px-5 cursor-pointer {activeIdx === i
? 'text-white bg-primary/90'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
>
{item.title}
</a>

28
src/routes/industry/+page.svelte
View File

@ -3,6 +3,7 @@
import IndustryTable from "$lib/components/IndustryTable.svelte";
import { industryList, sectorList, sectorNavigation } from "$lib/utils";
import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let rawData = data?.getSectorIndustryOverview;
@ -16,21 +17,10 @@
/>
<section class="w-full overflow-hidden m-auto">
<div
class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-default sm:rounded-md h-auto p-5 mb-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 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
>
We categorize stocks into {sectorList?.length} sectors and {industryList?.length}
industries, based on the company's primary business activity.
</div>
<Infobox
text={`We categorize stocks into ${sectorList?.length} sectors and ${industryList?.length}
industries, based on the company's primary business activity.`}
/>
<!-- Page wrapper -->
<div class="flex justify-center w-full m-auto h-full overflow-hidden">
@ -41,13 +31,13 @@
<a
href={sectorNavigation?.find((item) => item?.title === sector)
?.link}
class=" cursor-pointer text-white sm:hover:underline font-semibold text-lg sm:text-xl"
class=" cursor-pointer sm:hover:underline font-semibold text-lg sm:text-xl"
>
Sector: {sector}
<svg
class="inline-block h-6 w-6 -mt-1"
viewBox="0 0 20 20"
fill="white"
fill="currentColor"
style="max-width:40px"
><path
fill-rule="evenodd"
@ -58,10 +48,10 @@
</a>
</div>
<div class="border-t border-gray-600 mt-5" />
<div class="border-t border-gray-300 dark:border-gray-600 mt-5" />
<IndustryTable {charNumber} industryList={rawData[sector]} />
<div class="border-t border-gray-600 mt-5" />
<div class="border-t border-gray-300 dark:border-gray-600 mt-5" />
{/each}
</div>
</div>

34
src/routes/industry/all/+page.svelte
View File

@ -103,7 +103,7 @@
<!-- Content area -->
<div class="w-full overflow-x-auto">
<table
class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
>
<thead>
<TableHeader {columns} {sortOrders} {sortData} />
@ -112,12 +112,12 @@
{#each displayList as item}
<!-- row -->
<tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800"
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
>
<td class=" text-sm sm:text-[1rem] whitespace-nowrap">
<a
href={`/list/industry/${item?.industry?.replace(/ /g, "-")?.replace(/&/g, "and")?.replace(/-{2,}/g, "-")?.toLowerCase()}`}
class="sm:hover:underline sm:hover:underline-offset-4 text-white"
class="sm:hover:underline sm:hover:underline-offset-4"
>
{item?.industry?.length > charNumber
? item?.industry?.slice(0, charNumber) + "..."
@ -125,50 +125,42 @@
</a>
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.numStocks}
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{abbreviateNumber(item?.totalMarketCap) ?? "n/a"}
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.avgDividendYield?.toFixed(2) ?? "n/a"}%
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.pe?.toFixed(2) ?? "n/a"}
</td>
<td
class=" {item?.profitMargin >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'} text-sm sm:text-[1rem] whitespace-nowrap text-end"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-sm sm:text-[1rem] whitespace-nowrap text-end"
>
{abbreviateNumber(item?.profitMargin)}%
</td>
<td
class="{item?.avgChange1D >= 0
? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.avgChange1D?.toFixed(2) ?? "n/a"}%
</td>
<td
class="{item?.avgChange1Y >= 0
? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.avgChange1Y?.toFixed(2) ?? "n/a"}%
</td>

34
src/routes/industry/sectors/+page.svelte
View File

@ -102,7 +102,7 @@
<!-- Content area -->
<div class="w-full overflow-x-auto">
<table
class="table rounded-none sm:rounded-md w-full m-auto bg-table border border-gray-800 mt-4"
class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-white dark:bg-table border border-gray-300 dark:border-gray-800 m-auto mt-4"
>
<thead>
<TableHeader {columns} {sortOrders} {sortData} />
@ -111,14 +111,14 @@
{#each displayList as item}
<!-- row -->
<tr
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-oddborder-b border-gray-800"
class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
>
<td class=" text-sm sm:text-[1rem] whitespace-nowrap">
<a
href={sectorNavigation?.find(
(listItem) => listItem?.title === item?.sector,
)?.link}
class="sm:hover:underline sm:hover:underline-offset-4 text-white"
class="sm:hover:underline sm:hover:underline-offset-4"
>
{item?.sector?.length > charNumber
? item?.sector?.slice(0, charNumber) + "..."
@ -126,50 +126,42 @@
</a>
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.numStocks}
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{abbreviateNumber(item?.totalMarketCap) ?? "n/a"}
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.avgDividendYield?.toFixed(2) ?? "n/a"}%
</td>
<td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
<td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
{item?.pe?.toFixed(2) ?? "n/a"}
</td>
<td
class=" {item?.profitMargin >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
: 'text-[#FF2F1F]'} text-sm sm:text-[1rem] whitespace-nowrap text-end"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-sm sm:text-[1rem] whitespace-nowrap text-end"
>
{abbreviateNumber(item?.profitMargin)}%
</td>
<td
class="{item?.avgChange1M >= 0
? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.avgChange1D?.toFixed(2) ?? "n/a"}%
</td>
<td
class="{item?.avgChange1Y >= 0
? "before:content-['+'] text-[#00FC50]"
: 'text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: 'text-red-600 dark:text-[#FF2F1F]'} text-end text-sm sm:text-[1rem] whitespace-nowrap"
>
{item?.avgChange1Y?.toFixed(2) ?? "n/a"}%
</td>

4
src/routes/insider-tracker/+page.svelte
View File

@ -269,7 +269,7 @@
class="text-sm sm:text-[1rem] whitespace-nowrap text-end {item?.changesPercentage >=
0
? 'text-green-600 dark:text-[#00FC50]'
: 'text-[#FF2F1F]'}"
: 'text-red-600 dark:text-[#FF2F1F]'}"
>
{item?.changesPercentage > 0
? "+"
@ -287,7 +287,7 @@
'Buy'
? 'text-green-600 dark:text-[#00FC50]'
: item?.transactionType === 'Sell'
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-[#E57C34]'}"
>
<div class="flex flex-row items-center justify-end">

54
src/routes/learning-center/+page.svelte
View File

@ -1,15 +1,16 @@
<script lang="ts">
import { getImageURL, convertToSlug } from "$lib/utils";
import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data;
let allBlogPosts = data?.getAllBlogPost;
</script>
<SEO
title="Learning Center"
description="Learn and Understand the features and datasets of Stockner to better navigate the stock market."
title="Stock
Analysis Blog"
description="Get the latest blog post to understand and invest correctly into companies."
/>
<section
@ -22,21 +23,19 @@
>
<main class="w-full">
<div class="mb-6 border-b-[2px]">
<h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
Learning Center
<h1 class="mb-1 text-2xl sm:text-3xl font-bold">
Stock Analysis Blog
</h1>
</div>
<div class="w-full grid grid-cols-1 sm:grid-cols-3 gap-y-5 sm:gap-5">
<div class="w-full grid grid-cols-1 sm:grid-cols-3 gap-y-5 gap-5">
{#if allBlogPosts?.length !== 0}
{#each allBlogPosts as item}
<div
class="flex flex-col overflow-hidden rounded border border-gray-700"
class="shadow-sm sm:hover:shadow-lg flex flex-col overflow-hidden rounded border border-gray-300 dark:border-gray-700"
>
<div class="shrink-0">
<a
href={"/learning-center/article/" +
convertToSlug(item?.title)}
<a href={"/blog/article/" + convertToSlug(item?.title)}
><img
class="h-48 w-full object-cover"
src={getImageURL(
@ -50,29 +49,25 @@
>
</div>
<div
class="flex flex-1 flex-col justify-between bg-table p-3 sm:p-6"
class="flex flex-1 flex-col justify-between bg-white dark:bg-table p-4 sm:p-6"
>
<div class="flex-1">
<a
href={"/learning-center/article/" +
convertToSlug(item?.title)}
class="block"
><h2
class="text-lg sm:text-xl font-semibold text-white"
>
href={"/blog/article/" + convertToSlug(item?.title)}
class="mt-2 block"
><h2 class="text-lg sm:text-xl font-semibold">
{item?.title}
</h2>
<p class="mt-3 text-sm text-white">
<p class="mt-3 text-sm">
{item?.abstract.length > 250
? item?.abstract?.slice(0, 250) + "..."
: item?.abstract}
</p></a
>
</div>
<div class="mt-3 flex items-center">
<div class="flex space-x-1 text-sm text-white">
<span class="font-semibold">Published:</span>
<time datetime={item?.created} class="ml-1">
<div class="mt-6 flex items-center">
<div class="flex space-x-1 text-sm">
Published: <time datetime={item?.created} class="ml-1">
{new Date(item?.created)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
@ -82,24 +77,9 @@
>
</div>
</div>
<div class="flex flex-col text-white mt-3">
<div class="flex flex-wrap gap-x-2 gap-y-3">
{#each item?.tags as tags}
<label
class="px-2 text-sm py-1 text-black rounded bg-white ml-0"
>
{tags}
</label>
{/each}
</div>
</div>
</div>
</div>
{/each}
{:else}
<div class="w-full">
<Infobox text="No blog posts found" />
</div>
{/if}
</div>
</main>

69
src/routes/learning-center/article/[slug]/+page.svelte
View File

@ -15,11 +15,13 @@
<SEO
title={article?.title}
description={article?.abstract}
image={getImageURL(article?.collectionId, article?.id, article?.cover)}
image={article?.comver
? getImageURL(article?.collectionId, article?.id, article?.cover)
: ""}
/>
<section
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3 text-white"
class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
>
<div class="w-full overflow-hidden m-auto mt-5">
<div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
@ -31,7 +33,7 @@
article?.id,
article?.cover,
)}
class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-800"
class="h-[200px] w-full object-cover lg:h-[350px] rounded-lg border border-gray-300 dark:border-gray-800"
loading="lazy"
alt="Wallpaper"
/>
@ -40,17 +42,15 @@
<article
class="z-5 relative mx-1 {article?.cover
? '-mt-10 lg:-mt-16'
: 'mt-5'} rounded-t-md bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
: 'mt-5'} rounded-t-md bg-white dark:bg-default p-3 xs:p-4 lg:ml-3 lg:p-5 xl:mx-4"
>
<header
class="pb-3 border-b-[2px] border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
>
<h1
class="mb-3 text-2xl sm:text-3xl font-bold text-white md:text-4xl"
class="pb-3 border-b-[2px] border-muted dark:border-white w-full sm:min-w-[850px] sm:max-w-[850px]"
>
<h1 class="mb-3 text-2xl sm:text-3xl font-bold md:text-4xl">
{article?.title}
</h1>
<div class="text-white">
<div class="">
<div>
Last Updated: {new Date(article?.updated)?.toLocaleString(
"en-US",
@ -73,57 +73,6 @@
</article>
</div>
</main>
<aside class="hidden lg:block relative fixed w-1/4">
<div class="mt-5 lg:w-full">
<div class="flex flex-wrap gap-y-5 justify-center px-5">
{#if !data?.user}
<div
class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit lg:mx-0 lg:w-[300px] xl:w-[360px]"
>
<div class="space-y-6 p-6">
<h4 class="text-xl font-semibold sm:text-2xl sm:font-bold">
Stay informed in just 2 minutes
</h4>
<p class=" text-white lg:text-lg">
Get a daily email with the top market-moving news in bullet
point format, for Pro Members only.
</p>
<div>
<a
href="/register"
class=" btn bg-[#fff] border border-gray-600 sm:hover:bg-gray-300 transition duration-100 btn-md w-full rounded-md m-auto text-black font-semibold text-[1rem]"
>
<span class="text-[1rem]">Sign Up</span>
</a>
</div>
</div>
</div>
{/if}
<a
href="/watchlist/stocks"
class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit sm:hover:bg-secondary transition ease-out duration-100 lg:mx-0 lg:w-[300px] xl:w-[360px]"
>
<div class="space-y-3 p-6">
<h4 class="text-xl font-semibold">Watchlist</h4>
<p class=" text-white lg:text-lg">
Build your watchlist to keep track of their performance
</p>
</div>
</a>
<a
href="/analysts/top-stocks"
class="w-full text-white border border-gray-600 rounded-md h-fit bg-inherit sm:hover:bg-secondary transition ease-out duration-100 lg:mx-0 lg:w-[300px] xl:w-[360px]"
>
<div class="space-y-3 p-6">
<h4 class="text-xl font-semibold">Top Stocks</h4>
<p class=" text-white lg:text-lg">
Get the latest Top Wall Street Analyst Ratings
</p>
</div>
</a>
</div>
</div>
</aside>
</div>
</div>
</section>

15
src/routes/list/industry/[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;
@ -16,17 +17,15 @@
</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 industry has a total of {rawData?.length} stocks, with a combined market
cap of {abbreviateNumber(totalMarketCap)} and a total revenue of {abbreviateNumber(
<Infobox
text={`The industry has a total of ${rawData?.length} stocks, with a combined market
cap of ${abbreviateNumber(totalMarketCap)} and a total revenue of ${abbreviateNumber(
totalRevenue,
)}.
</div>
)}.`}
/>
<div
class="mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark:border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"
class="shadow-sm mt-4 mb-4 flex flex-col divide-y divide-gray-300 dark:divide-gray-600 rounded-md border border-gray-300 dark: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">

2
src/routes/market-flow/+page.svelte
View File

@ -706,7 +706,7 @@
class="text-sm sm:text-[1rem] {item?.changesPercentage >=
0
? "text-[#00FC50] before:content-['+'] "
: 'text-[#FF2F1F]'} text-end"
: 'text-red-600 dark:text-[#FF2F1F]'} text-end"
>
{item?.changesPercentage}%
</td>

2
src/routes/market-flow/sector-flow/+page.svelte
View File

@ -810,7 +810,7 @@
class="text-sm sm:text-[1rem] {item?.changesPercentage >=
0
? "text-[#00FC50] before:content-['+'] "
: 'text-[#FF2F1F]'} text-end"
: 'text-red-600 dark:text-[#FF2F1F]'} text-end"
>
{item?.changesPercentage}%
</td>

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

@ -756,7 +756,7 @@
>
<span
class={displayLegend?.graphChange >= 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{displayLegend?.graphChange ??

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

@ -842,22 +842,22 @@
><td class="py-[3px] text-left lg:py-0.5">Change</td>
<td
class={lowChange > 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{lowChange}%</td
>
<td
class={avgChange > 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{avgChange}%</td
>
<td
class={medianChange > 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{medianChange}%</td
>
<td
class={highChange > 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{highChange}%</td
></tr
></tbody

10
src/routes/stocks/[tickerID]/forecast/ai/+page.svelte
View File

@ -364,7 +364,7 @@
)
? 'text-green-600 dark:text-[#00FC50]'
: ['Strong Sell', 'Sell']?.includes(consensusRating)
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-[#fff]'}">{consensusRating}</span
>
</div>
@ -405,22 +405,22 @@
><td class="py-[3px] text-left lg:py-0.5">Change</td>
<td
class={lowChange > 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{lowChange}%</td
>
<td
class={avgChange > 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{avgChange}%</td
>
<td
class={medianChange > 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{medianChange}%</td
>
<td
class={highChange > 0
? "before:content-['+'] text-green-500 dark:text-[#00FC50]"
? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: "text-[#FF2F1F]"}>{highChange}%</td
></tr
></tbody

2
src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
View File

@ -450,7 +450,7 @@
: ['Strong Sell', 'Sell']?.includes(
item?.rating_current,
)
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: ''}"
>
{item?.rating_current}

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

@ -475,7 +475,7 @@
? "text-[#00FC50] before:content-['+'] "
: item?.changesPercentage < 0 &&
item?.changesPercentage !== null
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} text-end"
>
{item?.changesPercentage !== null

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

@ -141,7 +141,7 @@
class="text-sm sm:text-[1rem] text-end {growthValue > 0
? 'text-green-600 dark:text-[#00FC50]'
: growthValue < 0
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} border-b border-gray-800"
>
{growthValue > 0 ? "+" : ""}{growthValue !== null &&
@ -216,7 +216,7 @@
0
? 'text-green-600 dark:text-[#00FC50]'
: growthValue < 0
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} border-b border-gray-800"
>
{growthValue > 0 ? "+" : ""}{growthValue !== null &&
@ -293,7 +293,7 @@
0
? 'text-green-600 dark:text-[#00FC50]'
: growthValue < 0
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'} border-b border-gray-800"
>
{growthValue > 0 ? "+" : ""}{growthValue !== null &&

4
src/routes/watchlist/options/+page.svelte
View File

@ -320,7 +320,7 @@
class="text-sm sm:text-[1rem] {item?.put_call ===
'Calls'
? 'text-green-600 dark:text-[#00FC50]'
: 'text-[#FF2F1F]'} text-start"
: 'text-red-600 dark:text-[#FF2F1F]'} text-start"
>
{item?.put_call}
</td>
@ -330,7 +330,7 @@
'Bullish'
? 'text-green-600 dark:text-[#00FC50]'
: item?.sentiment === 'Bearish'
? 'text-[#FF2F1F]'
? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-[#C6A755]'} text-start"
>
{item?.sentiment}