ui fixes
This commit is contained in:
MuslemRahimi
parent
976d6556a2
commit
b064cc2185
@ -10,6 +10,7 @@
|
||||
import DownloadData from "$lib/components/DownloadData.svelte";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
import highcharts from "$lib/highcharts.ts";
|
||||
import { mode } from "mode-watcher";
|
||||
|
||||
export let data;
|
||||
|
||||
@ -35,8 +36,8 @@
|
||||
const options = {
|
||||
chart: {
|
||||
type: "bar",
|
||||
backgroundColor: "#09090B",
|
||||
plotBackgroundColor: "#09090B",
|
||||
backgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
|
||||
height: 360, // Set the maximum height for the chart
|
||||
animation: false,
|
||||
},
|
||||
@ -44,19 +45,22 @@
|
||||
legend: {
|
||||
enabled: true,
|
||||
animation: false,
|
||||
itemStyle: { color: "#fff" },
|
||||
itemStyle: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
title: {
|
||||
text: `<h3 class="mt-3 mb-1 text-center">${removeCompanyStrings($displayCompanyName)} Ownership Distribution</h3>`,
|
||||
useHTML: true,
|
||||
style: { color: "white" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
xAxis: {
|
||||
categories: [""],
|
||||
animation: false,
|
||||
},
|
||||
yAxis: {
|
||||
title: { text: null, style: { color: "#fff" } },
|
||||
title: {
|
||||
text: null,
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
opposite: true,
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: "#111827",
|
||||
@ -64,7 +68,7 @@
|
||||
formatter: function () {
|
||||
return this?.value + "%";
|
||||
},
|
||||
style: { color: "#fff" },
|
||||
style: { color: $mode === "light" ? "black" : "white" },
|
||||
},
|
||||
tickPositioner: function () {
|
||||
// Create custom tick positions with wider spacing
|
||||
@ -84,11 +88,11 @@
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
color: "white",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
animation: false,
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
color: "white",
|
||||
color: $mode === "light" ? "black" : "white",
|
||||
style: {
|
||||
fontSize: "13px",
|
||||
fontWeight: "bold",
|
||||
@ -131,8 +135,6 @@
|
||||
putCallRatio = 0;
|
||||
}
|
||||
|
||||
config = plotData();
|
||||
|
||||
let charNumber = 30;
|
||||
|
||||
async function handleScroll() {
|
||||
@ -233,12 +235,18 @@
|
||||
// Sort using the generic comparison function
|
||||
displayList = [...originalData].sort(compareValues)?.slice(0, 50);
|
||||
};
|
||||
|
||||
$: {
|
||||
if ($mode) {
|
||||
config = plotData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="overflow-hidden text-white h-full pb-8">
|
||||
<section class="overflow-hidden h-full pb-8">
|
||||
<main class="overflow-hidden">
|
||||
{#if shareholderList?.length !== 0}
|
||||
<div class="text-white text-[1rem] mt-3">
|
||||
<div class=" text-[1rem] mt-3">
|
||||
<p>
|
||||
Total Institutes of {rawData?.investorsHolding?.toLocaleString(
|
||||
"en-US",
|
||||
@ -289,11 +297,11 @@
|
||||
</div>
|
||||
|
||||
{#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
|
||||
</h1>
|
||||
|
||||
<div class="mt-3 text-white text-md">
|
||||
<div class="mt-3 text-md">
|
||||
Institutions are holding {callPercentage > 55
|
||||
? "more Calls Contracts as Puts Contracts, indicating a bullish sentiment."
|
||||
: callPercentage < 45
|
||||
@ -307,11 +315,11 @@
|
||||
>
|
||||
<!--Start Put/Call-->
|
||||
<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">
|
||||
<span class=" text-white text-sm sm:text-[1rem]">Put/Call</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] text-white">
|
||||
<span class=" text-sm sm:text-[1rem]">Put/Call</span>
|
||||
<span class="text-start text-sm sm:text-[1rem]">
|
||||
{putCallRatio?.toFixed(3)}
|
||||
</span>
|
||||
</div>
|
||||
@ -328,7 +336,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -351,7 +359,7 @@
|
||||
<div
|
||||
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
|
||||
>
|
||||
</div>
|
||||
@ -361,12 +369,11 @@
|
||||
<!--End Put/Call-->
|
||||
<!--Start Call Flow-->
|
||||
<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">
|
||||
<span class=" text-white text-sm sm:text-[1rem]">Call Flow</span
|
||||
>
|
||||
<span class="text-start text-sm sm:text-[1rem] text-white">
|
||||
<span class=" text-sm sm:text-[1rem]">Call Flow</span>
|
||||
<span class="text-start text-sm sm:text-[1rem]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
@ -386,7 +393,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -407,7 +414,7 @@
|
||||
<div
|
||||
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
|
||||
>
|
||||
</div>
|
||||
@ -418,11 +425,11 @@
|
||||
|
||||
<!--Start Put Flow-->
|
||||
<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">
|
||||
<span class=" text-white text-sm sm:text-[1rem]">Put Flow</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] text-white">
|
||||
<span class=" text-sm sm:text-[1rem]">Put Flow</span>
|
||||
<span class="text-start text-sm sm:text-[1rem]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
@ -442,7 +449,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -463,7 +470,7 @@
|
||||
<div
|
||||
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
|
||||
>
|
||||
</div>
|
||||
@ -476,12 +483,10 @@
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-row items-center justify-between mb-3">
|
||||
<h3 class="text-white font-semibold text-xl sm:text-2xl">
|
||||
Top Shareholders
|
||||
</h3>
|
||||
<h3 class=" font-semibold text-xl sm:text-2xl">Top Shareholders</h3>
|
||||
|
||||
{#if topHolders !== 0}
|
||||
<span class="text-white text-[1rem">
|
||||
<span class=" text-[1rem">
|
||||
The Top 10 shareholders collectively own <span class="font-semibold"
|
||||
>{topHolders <= 0.01
|
||||
? "< 0.01%"
|
||||
@ -504,7 +509,7 @@
|
||||
class="flex justify-start items-center w-full m-auto mt-3 overflow-x-auto"
|
||||
>
|
||||
<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>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
@ -513,7 +518,7 @@
|
||||
{#each displayList as item, index}
|
||||
{#if item?.investorName?.length > 0}
|
||||
<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 ===
|
||||
shareholderList?.length &&
|
||||
!['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||
@ -523,7 +528,7 @@
|
||||
<td class=" text-sm sm:text-[1rem] whitespace-nowrap">
|
||||
<a
|
||||
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
|
||||
? formatString(
|
||||
@ -534,7 +539,7 @@
|
||||
</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
|
||||
? "< 0.01%"
|
||||
@ -542,7 +547,7 @@
|
||||
</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
|
||||
? abbreviateNumber(item?.sharesNumber, false, true)
|
||||
@ -550,7 +555,7 @@
|
||||
</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}
|
||||
<span class="text-green-600 dark:text-[#00FC50]"
|
||||
@ -570,7 +575,7 @@
|
||||
</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
|
||||
? abbreviateNumber(item?.marketValue)
|
||||
@ -578,7 +583,7 @@
|
||||
</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
|
||||
? "< 0.01%"
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
<main class="w-full">
|
||||
<div class="m-auto">
|
||||
<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">
|
||||
<a
|
||||
|
||||
@ -324,16 +324,14 @@
|
||||
/>
|
||||
|
||||
<section class=" w-full overflow-hidden h-full">
|
||||
<div
|
||||
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
||||
>
|
||||
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
<main class="w-full">
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
||||
<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">
|
||||
{removeCompanyStrings($displayCompanyName)} Income Statement
|
||||
|
||||
@ -360,16 +360,14 @@
|
||||
/>
|
||||
|
||||
<section class=" w-full overflow-hidden h-full">
|
||||
<div
|
||||
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
||||
>
|
||||
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
<main class="w-full">
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
||||
<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">
|
||||
{removeCompanyStrings($displayCompanyName)} Balance Sheet Statement
|
||||
|
||||
@ -322,16 +322,14 @@
|
||||
/>
|
||||
|
||||
<section class=" w-full overflow-hidden h-full">
|
||||
<div
|
||||
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
||||
>
|
||||
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
<main class="w-full">
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
||||
<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">
|
||||
{removeCompanyStrings($displayCompanyName)} Cash Flow Statement
|
||||
|
||||
@ -311,16 +311,14 @@
|
||||
/>
|
||||
|
||||
<section class=" w-full overflow-hidden h-full">
|
||||
<div
|
||||
class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
|
||||
>
|
||||
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
|
||||
<div
|
||||
class="w-full relative flex justify-center items-center overflow-hidden"
|
||||
>
|
||||
<main class="w-full">
|
||||
<div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
|
||||
<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">
|
||||
{removeCompanyStrings($displayCompanyName)} Ratios Statement
|
||||
|
||||
@ -79,15 +79,15 @@
|
||||
>
|
||||
<main class="w-full lg:w-3/4 lg:pr-10">
|
||||
<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">
|
||||
<a
|
||||
href={`/stocks/${$stockTicker}/insider`}
|
||||
on:click={() => changeSubSection("insider")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection === 'insider'
|
||||
? 'text-white bg-secondary'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
|
||||
? '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'}"
|
||||
>
|
||||
Insider Trading
|
||||
</a>
|
||||
@ -97,8 +97,8 @@
|
||||
on:click={() => changeSubSection("institute")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||
'institute'
|
||||
? 'text-white bg-secondary'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
|
||||
? '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'}"
|
||||
>
|
||||
13F Institute
|
||||
</a>
|
||||
@ -108,8 +108,8 @@
|
||||
on:click={() => changeSubSection("congress-trading")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||
'congress-trading'
|
||||
? 'text-white bg-secondary'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
|
||||
? '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'}"
|
||||
>
|
||||
Congress Trading
|
||||
</a>
|
||||
@ -118,8 +118,8 @@
|
||||
on:click={() => changeSubSection("transcripts")}
|
||||
class="p-2 px-5 cursor-pointer {displaySubSection ===
|
||||
'transcripts'
|
||||
? 'text-white bg-secondary'
|
||||
: 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary'}"
|
||||
? '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'}"
|
||||
>
|
||||
Transcripts
|
||||
</a>
|
||||
@ -129,21 +129,19 @@
|
||||
<slot />
|
||||
</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}
|
||||
<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">
|
||||
<h3 class="text-lg text-white font-semibold mb-3">
|
||||
{$stockTicker} News
|
||||
</h3>
|
||||
<ul class="text-white">
|
||||
<h3 class="text-xl font-bold mb-3">{$stockTicker} News</h3>
|
||||
<ul class="">
|
||||
{#each newsList?.slice(0, 10) as item}
|
||||
<li class="mb-3 last:mb-1">
|
||||
{formatDate(item?.publishedDate)} ago -
|
||||
<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}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow">{item?.title}</a
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
displayCompanyName,
|
||||
numberOfUnreadNotification,
|
||||
stockTicker,
|
||||
} from "$lib/store";
|
||||
import { displayCompanyName, stockTicker } from "$lib/store";
|
||||
import { formatString, abbreviateNumber } from "$lib/utils";
|
||||
import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
|
||||
import { onMount } from "svelte";
|
||||
@ -11,6 +7,7 @@
|
||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||
import SEO from "$lib/components/SEO.svelte";
|
||||
import Infobox from "$lib/components/Infobox.svelte";
|
||||
|
||||
export let data;
|
||||
let isLoaded = true;
|
||||
@ -218,33 +215,19 @@
|
||||
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 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="w-full mb-6">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
|
||||
Insider Trading
|
||||
</h1>
|
||||
<h1 class="text-xl sm:text-2xl font-bold mb-4">Insider Trading</h1>
|
||||
{#if insiderTradingList?.length === 0}
|
||||
<div
|
||||
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]"
|
||||
>
|
||||
<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>
|
||||
<Infobox
|
||||
text={`No trading history available for ${$displayCompanyName}. Likely no
|
||||
insider trading has happened yet.`}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -257,9 +240,9 @@
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
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
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
@ -278,7 +261,7 @@
|
||||
<DropdownMenu.Content
|
||||
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
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
@ -286,7 +269,7 @@
|
||||
{#each yearRange as index}
|
||||
<DropdownMenu.Item
|
||||
on:click={() => (year = index)}
|
||||
class="cursor-pointer hover:bg-primary"
|
||||
class="cursor-pointer sm:hover:bg-gray-300 dark:sm:hover:bg-primary"
|
||||
>
|
||||
{index}
|
||||
</DropdownMenu.Item>
|
||||
@ -300,11 +283,9 @@
|
||||
<DropdownMenu.Trigger asChild let:builder>
|
||||
<Button
|
||||
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"
|
||||
>Quarter: Q{quarter}</span
|
||||
>
|
||||
<span class="truncate">Quarter: Q{quarter}</span>
|
||||
<svg
|
||||
class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
|
||||
viewBox="0 0 20 20"
|
||||
@ -323,7 +304,7 @@
|
||||
<DropdownMenu.Content
|
||||
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
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
@ -331,7 +312,7 @@
|
||||
{#each [1, 2, 3, 4] as index}
|
||||
<DropdownMenu.Item
|
||||
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}
|
||||
</DropdownMenu.Item>
|
||||
@ -342,7 +323,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-white text-lg font-semibold pt-5">
|
||||
<h3 class=" text-lg font-semibold pt-5">
|
||||
Q{statistics?.quarter}
|
||||
{statistics?.year} Insider Statistics
|
||||
</h3>
|
||||
@ -355,15 +336,11 @@
|
||||
>
|
||||
<!--Start Put/Call-->
|
||||
<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">
|
||||
<span class=" text-white text-sm sm:text-[1rem]"
|
||||
>Buy/Sell</span
|
||||
>
|
||||
<span
|
||||
class="text-start text-sm sm:text-[1rem] text-white"
|
||||
>
|
||||
<span class=" text-sm sm:text-[1rem]">Buy/Sell</span>
|
||||
<span class="text-start text-sm sm:text-[1rem]">
|
||||
{buySellRatio > 0
|
||||
? buySellRatio?.toFixed(1)
|
||||
: buySellRatio}
|
||||
@ -382,7 +359,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -405,8 +382,7 @@
|
||||
<div
|
||||
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 sm:text-[1rem]"
|
||||
<span class="text-center text-sm sm:text-[1rem]"
|
||||
>{(buySellRatio * 100)?.toFixed(0)}%</span
|
||||
>
|
||||
</div>
|
||||
@ -416,15 +392,12 @@
|
||||
<!--End Put/Call-->
|
||||
<!--Start Call Flow-->
|
||||
<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">
|
||||
<span class=" text-white text-sm sm:text-[1rem]"
|
||||
>Bought Shares</span
|
||||
>
|
||||
<span
|
||||
class="text-start text-sm sm:text-[1rem] text-white"
|
||||
<span class=" text-sm sm:text-[1rem]">Bought Shares</span
|
||||
>
|
||||
<span class="text-start text-sm sm:text-[1rem]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
@ -444,7 +417,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -466,8 +439,7 @@
|
||||
<div
|
||||
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 sm:text-[1rem]"
|
||||
<span class="text-center text-sm sm:text-[1rem]"
|
||||
>{statistics?.buySharesPercentage}%</span
|
||||
>
|
||||
</div>
|
||||
@ -477,15 +449,11 @@
|
||||
<!--End Call Flow-->
|
||||
<!--Start Put Flow-->
|
||||
<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">
|
||||
<span class=" text-white text-sm sm:text-[1rem]"
|
||||
>Sold Shares</span
|
||||
>
|
||||
<span
|
||||
class="text-start text-sm sm:text-[1rem] text-white"
|
||||
>
|
||||
<span class=" text-sm sm:text-[1rem]">Sold Shares</span>
|
||||
<span class="text-start text-sm sm:text-[1rem]">
|
||||
{new Intl.NumberFormat("en", {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
@ -505,7 +473,7 @@
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
class="stroke-current text-[#3E3E3E]"
|
||||
class="stroke-current text-gray-300 dark:text-[#3E3E3E]"
|
||||
stroke-width="3"
|
||||
></circle>
|
||||
<!-- Progress Circle inside a group with rotation -->
|
||||
@ -527,8 +495,7 @@
|
||||
<div
|
||||
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 sm:text-[1rem]"
|
||||
<span class="text-center text-sm sm:text-[1rem]"
|
||||
>{statistics?.soldSharesPercentage}%</span
|
||||
>
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
<TableHeader {columns} {sortOrders} {sortData} />
|
||||
@ -554,16 +521,14 @@
|
||||
{#each insiderTradingList as item, index}
|
||||
{#if item?.price > 0}
|
||||
<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 ===
|
||||
insiderTradingList?.slice(0, 6)?.length &&
|
||||
!['Pro', 'Plus']?.includes(data?.user?.tier)
|
||||
? 'opacity-[0.1]'
|
||||
: ''}"
|
||||
>
|
||||
<td
|
||||
class="text-white text-sm sm:text-[1rem] ] whitespace-nowrap"
|
||||
>
|
||||
<td class=" text-sm sm:text-[1rem] ] whitespace-nowrap">
|
||||
<div class="flex flex-col">
|
||||
<span class=""
|
||||
>{formatString(item?.reportingName)?.replace(
|
||||
@ -571,14 +536,14 @@
|
||||
"",
|
||||
)}</span
|
||||
>
|
||||
<span class="text-sm text-white"
|
||||
<span class="text-sm"
|
||||
>{extractOfficeInfo(item?.typeOfOwner)}</span
|
||||
>
|
||||
</div>
|
||||
</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(
|
||||
"en-US",
|
||||
@ -592,7 +557,7 @@
|
||||
</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?.securitiesTransacted,
|
||||
@ -601,12 +566,12 @@
|
||||
)}
|
||||
</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)}
|
||||
</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)}
|
||||
</td>
|
||||
@ -615,7 +580,7 @@
|
||||
class="w-auto px-4 py-1 rounded-full uppercase {item?.transactionType ===
|
||||
'Bought'
|
||||
? 'bg-[#75D377] text-black'
|
||||
: 'bg-[#cd4050] text-white'} font-semibold"
|
||||
: 'bg-[#cd4050] '} font-semibold"
|
||||
>
|
||||
{transactionStyles[item?.transactionType]}
|
||||
</div>
|
||||
@ -630,7 +595,7 @@
|
||||
{#if rawData?.length > 5 && rawData?.length === insiderTradingList?.length && ["Pro", "Plus"]?.includes(data?.user?.tier)}
|
||||
<label
|
||||
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
|
||||
</label>
|
||||
@ -654,21 +619,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.app {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.app {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,16 +12,14 @@
|
||||
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 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="w-full">
|
||||
<h1 class="text-xl sm:text-2xl text-white font-bold">
|
||||
13F Institute Ownership
|
||||
</h1>
|
||||
<h1 class="text-xl sm:text-2xl font-bold">13F Institute Ownership</h1>
|
||||
</div>
|
||||
|
||||
<ShareHolders {data} />
|
||||
|
||||
@ -60,7 +60,9 @@
|
||||
<main class="w-full">
|
||||
<div class="m-auto">
|
||||
{#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">
|
||||
{#each subsectionTitles as title}
|
||||
{@const sectionKey = title
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
<main class="w-full">
|
||||
<div class="m-auto">
|
||||
<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">
|
||||
<a
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
<main class="w-full">
|
||||
<div class="m-auto">
|
||||
<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">
|
||||
<a
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user