From b064cc21853762da178210c049223e1ea48ccbe1 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Tue, 11 Mar 2025 08:50:07 +0100 Subject: [PATCH] ui fixes --- src/lib/components/ShareHolders.svelte | 89 ++++++------ .../[tickerID]/financials/+layout.svelte | 2 +- .../stocks/[tickerID]/financials/+page.svelte | 6 +- .../financials/balance-sheet/+page.svelte | 6 +- .../financials/cash-flow/+page.svelte | 6 +- .../[tickerID]/financials/ratios/+page.svelte | 6 +- .../stocks/[tickerID]/insider/+layout.svelte | 30 ++-- .../stocks/[tickerID]/insider/+page.svelte | 137 ++++++------------ .../[tickerID]/insider/institute/+page.svelte | 6 +- .../stocks/[tickerID]/metrics/+layout.svelte | 4 +- .../stocks/[tickerID]/profile/+layout.svelte | 2 +- .../[tickerID]/statistics/+layout.svelte | 2 +- 12 files changed, 119 insertions(+), 177 deletions(-) diff --git a/src/lib/components/ShareHolders.svelte b/src/lib/components/ShareHolders.svelte index d0c7749e..b41681c5 100644 --- a/src/lib/components/ShareHolders.svelte +++ b/src/lib/components/ShareHolders.svelte @@ -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: `

${removeCompanyStrings($displayCompanyName)} Ownership Distribution

`, 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(); + } + } -
+
{#if shareholderList?.length !== 0} -
+

Total Institutes of {rawData?.investorsHolding?.toLocaleString( "en-US", @@ -289,11 +297,11 @@

{#if putCallRatio !== 0} -

+

Options Activity

-
+
Institutions are holding {callPercentage > 55 ? "more Calls Contracts as Puts Contracts, indicating a bullish sentiment." : callPercentage < 45 @@ -307,11 +315,11 @@ >
- Put/Call - + Put/Call + {putCallRatio?.toFixed(3)}
@@ -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" > @@ -351,7 +359,7 @@
- {putCallRatio?.toFixed(2)}
@@ -361,12 +369,11 @@
- Call Flow - + Call Flow + {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" > @@ -407,7 +414,7 @@
- {callPercentage?.toFixed(0)}%
@@ -418,11 +425,11 @@
- Put Flow - + Put Flow + {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" > @@ -463,7 +470,7 @@
- {putPercentage?.toFixed(0)}%
@@ -476,12 +483,10 @@ {/if}
-

- Top Shareholders -

+

Top Shareholders

{#if topHolders !== 0} - + The Top 10 shareholders collectively own {topHolders <= 0.01 ? "< 0.01%" @@ -504,7 +509,7 @@ class="flex justify-start items-center w-full m-auto mt-3 overflow-x-auto" > @@ -513,7 +518,7 @@ {#each displayList as item, index} {#if item?.investorName?.length > 0} {item?.investorName?.length > charNumber ? formatString( @@ -534,7 +539,7 @@
{item?.ownership <= 0.01 ? "< 0.01%" @@ -542,7 +547,7 @@ {@html item?.sharesNumber !== null ? abbreviateNumber(item?.sharesNumber, false, true) @@ -550,7 +555,7 @@ {#if item?.changeInSharesNumberPercentage >= 0} {item?.marketValue !== null ? abbreviateNumber(item?.marketValue) @@ -578,7 +583,7 @@ {item?.weight <= 0.01 ? "< 0.01%" diff --git a/src/routes/stocks/[tickerID]/financials/+layout.svelte b/src/routes/stocks/[tickerID]/financials/+layout.svelte index 280ec1f7..fae41810 100644 --- a/src/routes/stocks/[tickerID]/financials/+layout.svelte +++ b/src/routes/stocks/[tickerID]/financials/+layout.svelte @@ -54,7 +54,7 @@