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-11 08:50:07 +01:00
parent 976d6556a2
commit b064cc2185
12 changed files with 119 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/lib/components/ShareHolders.svelte
View File

@ -10,6 +10,7 @@
import DownloadData from "$lib/components/DownloadData.svelte"; import DownloadData from "$lib/components/DownloadData.svelte";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data; export let data;
@ -35,8 +36,8 @@
const options = { const options = {
chart: { chart: {
type: "bar", type: "bar",
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, // Set the maximum height for the chart height: 360, // Set the maximum height for the chart
animation: false, animation: false,
}, },
@ -44,19 +45,22 @@
legend: { legend: {
enabled: true, enabled: true,
animation: false, animation: false,
itemStyle: { color: "#fff" }, itemStyle: { color: $mode === "light" ? "black" : "white" },
}, },
title: { title: {
text: `<h3 class="mt-3 mb-1 text-center">${removeCompanyStrings($displayCompanyName)} Ownership Distribution</h3>`, text: `<h3 class="mt-3 mb-1 text-center">${removeCompanyStrings($displayCompanyName)} Ownership Distribution</h3>`,
useHTML: true, useHTML: true,
style: { color: "white" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
xAxis: { xAxis: {
categories: [""], categories: [""],
animation: false, animation: false,
}, },
yAxis: { yAxis: {
title: { text: null, style: { color: "#fff" } }, title: {
text: null,
style: { color: $mode === "light" ? "black" : "white" },
},
opposite: true, opposite: true,
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: "#111827",
@ -64,7 +68,7 @@
formatter: function () { formatter: function () {
return this?.value + "%"; return this?.value + "%";
}, },
style: { color: "#fff" }, style: { color: $mode === "light" ? "black" : "white" },
}, },
tickPositioner: function () { tickPositioner: function () {
// Create custom tick positions with wider spacing // Create custom tick positions with wider spacing
@ -84,11 +88,11 @@
}, },
plotOptions: { plotOptions: {
series: { series: {
color: "white", color: $mode === "light" ? "black" : "white",
animation: false, animation: false,
dataLabels: { dataLabels: {
enabled: false, enabled: false,
color: "white", color: $mode === "light" ? "black" : "white",
style: { style: {
fontSize: "13px", fontSize: "13px",
fontWeight: "bold", fontWeight: "bold",
@ -131,8 +135,6 @@
putCallRatio = 0; putCallRatio = 0;
} }
config = plotData();
let charNumber = 30; let charNumber = 30;
async function handleScroll() { async function handleScroll() {
@ -233,12 +235,18 @@
// Sort using the generic comparison function // Sort using the generic comparison function
displayList = [...originalData].sort(compareValues)?.slice(0, 50); displayList = [...originalData].sort(compareValues)?.slice(0, 50);
}; };
$: {
if ($mode) {
config = plotData();
}
}
</script> </script>
<section class="overflow-hidden text-white h-full pb-8"> <section class="overflow-hidden h-full pb-8">
<main class="overflow-hidden"> <main class="overflow-hidden">
{#if shareholderList?.length !== 0} {#if shareholderList?.length !== 0}
<div class="text-white text-[1rem] mt-3"> <div class=" text-[1rem] mt-3">
<p> <p>
Total Institutes of {rawData?.investorsHolding?.toLocaleString( Total Institutes of {rawData?.investorsHolding?.toLocaleString(
"en-US", "en-US",
@ -289,11 +297,11 @@
</div> </div>
{#if putCallRatio !== 0} {#if putCallRatio !== 0}
<h1 class="text-white font-semibold text-xl sm:text-2xl mb-3 mt-5"> <h1 class=" font-semibold text-xl sm:text-2xl mb-3 mt-5">
Options Activity Options Activity
</h1> </h1>
<div class="mt-3 text-white text-md"> <div class="mt-3 text-md">
Institutions are holding {callPercentage > 55 Institutions are holding {callPercentage > 55
? "more Calls Contracts as Puts Contracts, indicating a bullish sentiment." ? "more Calls Contracts as Puts Contracts, indicating a bullish sentiment."
: callPercentage < 45 : callPercentage < 45
@ -307,11 +315,11 @@
> >
<!--Start Put/Call--> <!--Start Put/Call-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class=" text-white text-sm sm:text-[1rem]">Put/Call</span> <span class=" text-sm sm:text-[1rem]">Put/Call</span>
<span class="text-start text-sm sm:text-[1rem] text-white"> <span class="text-start text-sm sm:text-[1rem]">
{putCallRatio?.toFixed(3)} {putCallRatio?.toFixed(3)}
</span> </span>
</div> </div>
@ -328,7 +336,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -351,7 +359,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
> >
<span class="text-center text-white text-sm" <span class="text-center text-sm"
>{putCallRatio?.toFixed(2)}</span >{putCallRatio?.toFixed(2)}</span
> >
</div> </div>
@ -361,12 +369,11 @@
<!--End Put/Call--> <!--End Put/Call-->
<!--Start Call Flow--> <!--Start Call Flow-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class=" text-white text-sm sm:text-[1rem]">Call Flow</span <span class=" text-sm sm:text-[1rem]">Call Flow</span>
> <span class="text-start text-sm sm:text-[1rem]">
<span class="text-start text-sm sm:text-[1rem] text-white">
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
@ -386,7 +393,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -407,7 +414,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
> >
<span class="text-center text-white text-sm" <span class="text-center text-sm"
>{callPercentage?.toFixed(0)}%</span >{callPercentage?.toFixed(0)}%</span
> >
</div> </div>
@ -418,11 +425,11 @@
<!--Start Put Flow--> <!--Start Put Flow-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 shadow-sm border border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class=" text-white text-sm sm:text-[1rem]">Put Flow</span> <span class=" text-sm sm:text-[1rem]">Put Flow</span>
<span class="text-start text-sm sm:text-[1rem] text-white"> <span class="text-start text-sm sm:text-[1rem]">
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
@ -442,7 +449,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -463,7 +470,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
> >
<span class="text-center text-white text-sm" <span class="text-center text-sm"
>{putPercentage?.toFixed(0)}%</span >{putPercentage?.toFixed(0)}%</span
> >
</div> </div>
@ -476,12 +483,10 @@
{/if} {/if}
<div class="flex flex-row items-center justify-between mb-3"> <div class="flex flex-row items-center justify-between mb-3">
<h3 class="text-white font-semibold text-xl sm:text-2xl"> <h3 class=" font-semibold text-xl sm:text-2xl">Top Shareholders</h3>
Top Shareholders
</h3>
{#if topHolders !== 0} {#if topHolders !== 0}
<span class="text-white text-[1rem"> <span class=" text-[1rem">
The Top 10 shareholders collectively own <span class="font-semibold" The Top 10 shareholders collectively own <span class="font-semibold"
>{topHolders <= 0.01 >{topHolders <= 0.01
? "< 0.01%" ? "< 0.01%"
@ -504,7 +509,7 @@
class="flex justify-start items-center w-full m-auto mt-3 overflow-x-auto" class="flex justify-start items-center w-full m-auto mt-3 overflow-x-auto"
> >
<table <table
class="table table-sm table-compact bg-table border border-gray-800 w-full" 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"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -513,7 +518,7 @@
{#each displayList as item, index} {#each displayList as item, index}
{#if item?.investorName?.length > 0} {#if item?.investorName?.length > 0}
<tr <tr
class="border-b border-gray-800 odd:bg-odd sm:hover:bg-[#245073]/10 {index + class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 === 1 ===
shareholderList?.length && shareholderList?.length &&
!['Pro', 'Plus']?.includes(data?.user?.tier) !['Pro', 'Plus']?.includes(data?.user?.tier)
@ -523,7 +528,7 @@
<td class=" text-sm sm:text-[1rem] whitespace-nowrap"> <td class=" text-sm sm:text-[1rem] whitespace-nowrap">
<a <a
href={"/hedge-funds/" + item?.cik} href={"/hedge-funds/" + item?.cik}
class="sm:hover:underline sm:hover:underline-offset-4 text-white" class="sm:hover:underline sm:hover:underline-offset-4"
> >
{item?.investorName?.length > charNumber {item?.investorName?.length > charNumber
? formatString( ? formatString(
@ -534,7 +539,7 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap" class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.ownership <= 0.01 {item?.ownership <= 0.01
? "< 0.01%" ? "< 0.01%"
@ -542,7 +547,7 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap" class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{@html item?.sharesNumber !== null {@html item?.sharesNumber !== null
? abbreviateNumber(item?.sharesNumber, false, true) ? abbreviateNumber(item?.sharesNumber, false, true)
@ -550,7 +555,7 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap" class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{#if item?.changeInSharesNumberPercentage >= 0} {#if item?.changeInSharesNumberPercentage >= 0}
<span class="text-green-600 dark:text-[#00FC50]" <span class="text-green-600 dark:text-[#00FC50]"
@ -570,7 +575,7 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap" class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.marketValue !== null {item?.marketValue !== null
? abbreviateNumber(item?.marketValue) ? abbreviateNumber(item?.marketValue)
@ -578,7 +583,7 @@
</td> </td>
<td <td
class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap" class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{item?.weight <= 0.01 {item?.weight <= 0.01
? "< 0.01%" ? "< 0.01%"

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

@ -54,7 +54,7 @@
<main class="w-full"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
<nav <nav
class="sm:ml-4 pt-1 overflow-x-auto md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap" class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full text-white">
<a <a

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

@ -324,16 +324,14 @@
/> />
<section class=" w-full overflow-hidden h-full"> <section class=" w-full overflow-hidden h-full">
<div <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
>
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<main class="w-full"> <main class="w-full">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
<div <div
class="mb-3 flex flex-col sm:flex-row items-center justify-between" class="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between"
> >
<h1 class="text-xl sm:text-2xl font-bold"> <h1 class="text-xl sm:text-2xl font-bold">
{removeCompanyStrings($displayCompanyName)} Income Statement {removeCompanyStrings($displayCompanyName)} Income Statement

6
src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
View File

@ -360,16 +360,14 @@
/> />
<section class=" w-full overflow-hidden h-full"> <section class=" w-full overflow-hidden h-full">
<div <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
>
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<main class="w-full"> <main class="w-full">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
<div <div
class="mb-3 flex flex-col sm:flex-row items-center justify-between" class="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between"
> >
<h1 class="text-xl sm:text-2xl font-bold"> <h1 class="text-xl sm:text-2xl font-bold">
{removeCompanyStrings($displayCompanyName)} Balance Sheet Statement {removeCompanyStrings($displayCompanyName)} Balance Sheet Statement

6
src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
View File

@ -322,16 +322,14 @@
/> />
<section class=" w-full overflow-hidden h-full"> <section class=" w-full overflow-hidden h-full">
<div <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
>
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<main class="w-full"> <main class="w-full">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
<div <div
class="mb-3 flex flex-col sm:flex-row items-center justify-between" class="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between"
> >
<h1 class="text-xl sm:text-2xl font-bold"> <h1 class="text-xl sm:text-2xl font-bold">
{removeCompanyStrings($displayCompanyName)} Cash Flow Statement {removeCompanyStrings($displayCompanyName)} Cash Flow Statement

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

@ -311,16 +311,14 @@
/> />
<section class=" w-full overflow-hidden h-full"> <section class=" w-full overflow-hidden h-full">
<div <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
>
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<main class="w-full"> <main class="w-full">
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
<div <div
class="mb-3 flex flex-col sm:flex-row items-center justify-between" class="mb-3 flex flex-col sm:flex-row items-start sm:items-center justify-between"
> >
<h1 class="text-xl sm:text-2xl font-bold"> <h1 class="text-xl sm:text-2xl font-bold">
{removeCompanyStrings($displayCompanyName)} Ratios Statement {removeCompanyStrings($displayCompanyName)} Ratios Statement

30
src/routes/stocks/[tickerID]/insider/+layout.svelte
View File

@ -79,15 +79,15 @@
> >
<main class="w-full lg:w-3/4 lg:pr-10"> <main class="w-full lg:w-3/4 lg:pr-10">
<nav <nav
class="mb-5 sm:mb-0 sm:ml-4 pt-1 overflow-x-auto md:overflow-hidden text-sm sm:text-[1rem] whitespace-nowrap" class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full text-white">
<a <a
href={`/stocks/${$stockTicker}/insider`} href={`/stocks/${$stockTicker}/insider`}
on:click={() => changeSubSection("insider")} on:click={() => changeSubSection("insider")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'insider' class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
? 'text-white bg-secondary' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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'}"
> >
Insider Trading Insider Trading
</a> </a>
@ -97,8 +97,8 @@
on:click={() => changeSubSection("institute")} on:click={() => changeSubSection("institute")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'institute' 'institute'
? 'text-white bg-secondary' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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'}"
> >
13F Institute 13F Institute
</a> </a>
@ -108,8 +108,8 @@
on:click={() => changeSubSection("congress-trading")} on:click={() => changeSubSection("congress-trading")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'congress-trading' 'congress-trading'
? 'text-white bg-secondary' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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'}"
> >
Congress Trading Congress Trading
</a> </a>
@ -118,8 +118,8 @@
on:click={() => changeSubSection("transcripts")} on:click={() => changeSubSection("transcripts")}
class="p-2 px-5 cursor-pointer {displaySubSection === class="p-2 px-5 cursor-pointer {displaySubSection ===
'transcripts' 'transcripts'
? 'text-white bg-secondary' ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}" : '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'}"
> >
Transcripts Transcripts
</a> </a>
@ -129,21 +129,19 @@
<slot /> <slot />
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 mt-3"> <aside class="hidden lg:block relative fixed w-1/4">
{#if newsList?.length !== 0} {#if newsList?.length !== 0}
<div <div
class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit" class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
> >
<div class="p-4 text-sm"> <div class="p-4 text-sm">
<h3 class="text-lg text-white font-semibold mb-3"> <h3 class="text-xl font-bold mb-3">{$stockTicker} News</h3>
{$stockTicker} News <ul class="">
</h3>
<ul class="text-white">
{#each newsList?.slice(0, 10) as item} {#each newsList?.slice(0, 10) as item}
<li class="mb-3 last:mb-1"> <li class="mb-3 last:mb-1">
{formatDate(item?.publishedDate)} ago - {formatDate(item?.publishedDate)} ago -
<a <a
class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400" class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
href={item?.url} href={item?.url}
target="_blank" target="_blank"
rel="noopener noreferrer nofollow">{item?.title}</a rel="noopener noreferrer nofollow">{item?.title}</a

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

@ -1,9 +1,5 @@
<script lang="ts"> <script lang="ts">
import { import { displayCompanyName, stockTicker } from "$lib/store";
displayCompanyName,
numberOfUnreadNotification,
stockTicker,
} from "$lib/store";
import { formatString, abbreviateNumber } from "$lib/utils"; import { formatString, abbreviateNumber } from "$lib/utils";
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte"; import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
@ -11,6 +7,7 @@
import { Button } from "$lib/components/shadcn/button/index.js"; import { Button } from "$lib/components/shadcn/button/index.js";
import TableHeader from "$lib/components/Table/TableHeader.svelte"; import TableHeader from "$lib/components/Table/TableHeader.svelte";
import SEO from "$lib/components/SEO.svelte"; import SEO from "$lib/components/SEO.svelte";
import Infobox from "$lib/components/Infobox.svelte";
export let data; export let data;
let isLoaded = true; let isLoaded = true;
@ -218,33 +215,19 @@
description={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`} description={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$stockTicker}) from democrates and republicans.`}
/> />
<section class="w-full bg-default overflow-hidden text-white h-full"> <section class="w-full overflow-hidden h-full">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<div class="w-full mb-6"> <div class="w-full mb-6">
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4"> <h1 class="text-xl sm:text-2xl font-bold mb-4">Insider Trading</h1>
Insider Trading
</h1>
{#if insiderTradingList?.length === 0} {#if insiderTradingList?.length === 0}
<div <Infobox
class="w-fit text-white p-3 sm:p-5 mb-5 rounded-md sm:flex sm:flex-row sm:items-center border border-gray-600 text-sm sm:text-[1rem]" text={`No trading history available for ${$displayCompanyName}. Likely no
> insider trading has happened yet.`}
<svg />
class="w-6 h-6 shrink-0 inline-block sm:mr-2"
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
>
No trading history available for {$displayCompanyName}. Likely no
insider trading has happened yet.
</div>
{/if} {/if}
</div> </div>
@ -257,9 +240,9 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:border-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
> >
<span class="truncate text-white">Year: {year}</span> <span class="truncate">Year: {year}</span>
<svg <svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -278,7 +261,7 @@
<DropdownMenu.Content <DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
> >
<DropdownMenu.Label class="text-gray-400"> <DropdownMenu.Label class="text-muted dark:text-gray-400">
Select Year Select Year
</DropdownMenu.Label> </DropdownMenu.Label>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
@ -286,7 +269,7 @@
{#each yearRange as index} {#each yearRange as index}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (year = index)} on:click={() => (year = index)}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
{index} {index}
</DropdownMenu.Item> </DropdownMenu.Item>
@ -300,11 +283,9 @@
<DropdownMenu.Trigger asChild let:builder> <DropdownMenu.Trigger asChild let:builder>
<Button <Button
builders={[builder]} builders={[builder]}
class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate" class="shadow-sm w-full border-gray-300 dark:border-gray-600 border sm:hover:border-gray-100 dark:sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 rounded-md truncate"
> >
<span class="truncate text-white" <span class="truncate">Quarter: Q{quarter}</span>
>Quarter: Q{quarter}</span
>
<svg <svg
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -323,7 +304,7 @@
<DropdownMenu.Content <DropdownMenu.Content
class="w-56 h-fit max-h-72 overflow-y-auto scroller" class="w-56 h-fit max-h-72 overflow-y-auto scroller"
> >
<DropdownMenu.Label class="text-gray-400"> <DropdownMenu.Label class="text-muted dark:text-gray-400">
Select Quarter Select Quarter
</DropdownMenu.Label> </DropdownMenu.Label>
<DropdownMenu.Separator /> <DropdownMenu.Separator />
@ -331,7 +312,7 @@
{#each [1, 2, 3, 4] as index} {#each [1, 2, 3, 4] as index}
<DropdownMenu.Item <DropdownMenu.Item
on:click={() => (quarter = index)} on:click={() => (quarter = index)}
class="cursor-pointer hover:bg-primary" class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
> >
Q{index} Q{index}
</DropdownMenu.Item> </DropdownMenu.Item>
@ -342,7 +323,7 @@
</div> </div>
</div> </div>
<h3 class="text-white text-lg font-semibold pt-5"> <h3 class=" text-lg font-semibold pt-5">
Q{statistics?.quarter} Q{statistics?.quarter}
{statistics?.year} Insider Statistics {statistics?.year} Insider Statistics
</h3> </h3>
@ -355,15 +336,11 @@
> >
<!--Start Put/Call--> <!--Start Put/Call-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class=" text-white text-sm sm:text-[1rem]" <span class=" text-sm sm:text-[1rem]">Buy/Sell</span>
>Buy/Sell</span <span class="text-start text-sm sm:text-[1rem]">
>
<span
class="text-start text-sm sm:text-[1rem] text-white"
>
{buySellRatio > 0 {buySellRatio > 0
? buySellRatio?.toFixed(1) ? buySellRatio?.toFixed(1)
: buySellRatio} : buySellRatio}
@ -382,7 +359,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -405,8 +382,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
> >
<span <span class="text-center text-sm sm:text-[1rem]"
class="text-center text-white text-sm sm:text-[1rem]"
>{(buySellRatio * 100)?.toFixed(0)}%</span >{(buySellRatio * 100)?.toFixed(0)}%</span
> >
</div> </div>
@ -416,15 +392,12 @@
<!--End Put/Call--> <!--End Put/Call-->
<!--Start Call Flow--> <!--Start Call Flow-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 bg-primary rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 shadow-sm dark:border-gray-600 bg-gray-200 dark:bg-primary rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class=" text-white text-sm sm:text-[1rem]" <span class=" text-sm sm:text-[1rem]">Bought Shares</span
>Bought Shares</span
>
<span
class="text-start text-sm sm:text-[1rem] text-white"
> >
<span class="text-start text-sm sm:text-[1rem]">
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
@ -444,7 +417,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -466,8 +439,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
> >
<span <span class="text-center text-sm sm:text-[1rem]"
class="text-center text-white text-sm sm:text-[1rem]"
>{statistics?.buySharesPercentage}%</span >{statistics?.buySharesPercentage}%</span
> >
</div> </div>
@ -477,15 +449,11 @@
<!--End Call Flow--> <!--End Call Flow-->
<!--Start Put Flow--> <!--Start Put Flow-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-600 rounded-md bg-primary h-20" class="shadow-sm flex flex-row items-center flex-wrap w-full px-3 sm:px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-200 dark:bg-primary h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class=" text-white text-sm sm:text-[1rem]" <span class=" text-sm sm:text-[1rem]">Sold Shares</span>
>Sold Shares</span <span class="text-start text-sm sm:text-[1rem]">
>
<span
class="text-start text-sm sm:text-[1rem] text-white"
>
{new Intl.NumberFormat("en", { {new Intl.NumberFormat("en", {
minimumFractionDigits: 0, minimumFractionDigits: 0,
maximumFractionDigits: 0, maximumFractionDigits: 0,
@ -505,7 +473,7 @@
cy="18" cy="18"
r="16" r="16"
fill="none" fill="none"
class="stroke-current text-[#3E3E3E]" class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
stroke-width="3" stroke-width="3"
></circle> ></circle>
<!-- Progress Circle inside a group with rotation --> <!-- Progress Circle inside a group with rotation -->
@ -527,8 +495,7 @@
<div <div
class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2" class="absolute top-1/2 start-1/2 transform -translate-y-1/2 -translate-x-1/2"
> >
<span <span class="text-center text-sm sm:text-[1rem]"
class="text-center text-white text-sm sm:text-[1rem]"
>{statistics?.soldSharesPercentage}%</span >{statistics?.soldSharesPercentage}%</span
> >
</div> </div>
@ -545,7 +512,7 @@
class="flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto no-scrollbar" class="flex justify-start items-center w-full m-auto rounded-none sm:rounded-md mb-4 overflow-x-auto no-scrollbar"
> >
<table <table
class="table table-sm table-pin-rows table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto" 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"
> >
<thead> <thead>
<TableHeader {columns} {sortOrders} {sortData} /> <TableHeader {columns} {sortOrders} {sortData} />
@ -554,16 +521,14 @@
{#each insiderTradingList as item, index} {#each insiderTradingList as item, index}
{#if item?.price > 0} {#if item?.price > 0}
<tr <tr
class="text-white odd:bg-odd border-b border-gray-800 {index + class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd {index +
1 === 1 ===
insiderTradingList?.slice(0, 6)?.length && insiderTradingList?.slice(0, 6)?.length &&
!['Pro', 'Plus']?.includes(data?.user?.tier) !['Pro', 'Plus']?.includes(data?.user?.tier)
? 'opacity-[0.1]' ? 'opacity-[0.1]'
: ''}" : ''}"
> >
<td <td class=" text-sm sm:text-[1rem] ] whitespace-nowrap">
class="text-white text-sm sm:text-[1rem] ] whitespace-nowrap"
>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="" <span class=""
>{formatString(item?.reportingName)?.replace( >{formatString(item?.reportingName)?.replace(
@ -571,14 +536,14 @@
"", "",
)}</span )}</span
> >
<span class="text-sm text-white" <span class="text-sm"
>{extractOfficeInfo(item?.typeOfOwner)}</span >{extractOfficeInfo(item?.typeOfOwner)}</span
> >
</div> </div>
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white ]" class="text-end text-sm sm:text-[1rem] whitespace-nowrap ]"
> >
{new Date(item?.transactionDate)?.toLocaleString( {new Date(item?.transactionDate)?.toLocaleString(
"en-US", "en-US",
@ -592,7 +557,7 @@
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white ]" class="text-end text-sm sm:text-[1rem] whitespace-nowrap ]"
> >
{@html abbreviateNumber( {@html abbreviateNumber(
item?.securitiesTransacted, item?.securitiesTransacted,
@ -601,12 +566,12 @@
)} )}
</td> </td>
<td <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white ]" class="text-end text-sm sm:text-[1rem] whitespace-nowrap ]"
> >
${item?.price?.toFixed(2)} ${item?.price?.toFixed(2)}
</td> </td>
<td <td
class=" text-end text-sm sm:text-[1rem] whitespace-nowrap text-white" class=" text-end text-sm sm:text-[1rem] whitespace-nowrap"
> >
{@html abbreviateNumber(item?.value, false, true)} {@html abbreviateNumber(item?.value, false, true)}
</td> </td>
@ -615,7 +580,7 @@
class="w-auto px-4 py-1 rounded-full uppercase {item?.transactionType === class="w-auto px-4 py-1 rounded-full uppercase {item?.transactionType ===
'Bought' 'Bought'
? 'bg-[#75D377] text-black' ? 'bg-[#75D377] text-black'
: 'bg-[#cd4050] text-white'} font-semibold" : 'bg-[#cd4050] '} font-semibold"
> >
{transactionStyles[item?.transactionType]} {transactionStyles[item?.transactionType]}
</div> </div>
@ -630,7 +595,7 @@
{#if rawData?.length > 5 && rawData?.length === insiderTradingList?.length && ["Pro", "Plus"]?.includes(data?.user?.tier)} {#if rawData?.length > 5 && rawData?.length === insiderTradingList?.length && ["Pro", "Plus"]?.includes(data?.user?.tier)}
<label <label
on:click={backToTop} on:click={backToTop}
class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full" class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-300 dark:border-gray-600 rounded-full"
> >
Back to top Back to top
</label> </label>
@ -654,21 +619,3 @@
</div> </div>
</div> </div>
</section> </section>
<style>
.app {
height: 400px;
width: 100%;
}
@media (max-width: 560px) {
.app {
width: 100%;
height: 300px;
}
}
.chart {
width: 100%;
}
</style>

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

@ -12,16 +12,14 @@
description={`Get the latest 13F Institute Ownership of ${$displayCompanyName} (${$stockTicker}).`} description={`Get the latest 13F Institute Ownership of ${$displayCompanyName} (${$stockTicker}).`}
/> />
<section class="w-full bg-default overflow-hidden text-white h-full"> <section class="w-full overflow-hidden h-full">
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="w-full relative flex justify-center items-center overflow-hidden" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:pl-7 sm:pb-7 sm:pt-7 w-full m-auto mt-2 sm:mt-0">
<div class="w-full"> <div class="w-full">
<h1 class="text-xl sm:text-2xl text-white font-bold"> <h1 class="text-xl sm:text-2xl font-bold">13F Institute Ownership</h1>
13F Institute Ownership
</h1>
</div> </div>
<ShareHolders {data} /> <ShareHolders {data} />

4
src/routes/stocks/[tickerID]/metrics/+layout.svelte
View File

@ -60,7 +60,9 @@
<main class="w-full"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
{#if names?.length > 0} {#if names?.length > 0}
<nav class="ml-4 overflow-x-auto whitespace-nowrap"> <nav
class="sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
>
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full text-white">
{#each subsectionTitles as title} {#each subsectionTitles as title}
{@const sectionKey = title {@const sectionKey = title

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

@ -40,7 +40,7 @@
<main class="w-full"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
<nav <nav
class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap" class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full text-white">
<a <a

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

@ -46,7 +46,7 @@
<main class="w-full"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
<nav <nav
class="sm:ml-4 pt-1 overflow-x-auto text-sm sm:text-[1rem] whitespace-nowrap" class="mb-5 sm:mb-0 sm:ml-4 pt-1 text-sm sm:text-[1rem] whitespace-nowrap overflow-x-auto whitespace-nowrap"
> >
<ul class="flex flex-row items-center w-full text-white"> <ul class="flex flex-row items-center w-full text-white">
<a <a