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 20:53:09 +01:00
parent e416553d2f
commit 6bca300fe5
4 changed files with 79 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/lib/components/FailToDeliver.svelte
View File

@ -8,6 +8,7 @@
import { abbreviateNumber, removeCompanyStrings } from "$lib/utils"; import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import highcharts from "$lib/highcharts.ts"; import highcharts from "$lib/highcharts.ts";
import { mode } from "mode-watcher";
export let data; export let data;
export let rawData = []; export let rawData = [];
@ -78,21 +79,21 @@
}, },
chart: { chart: {
// Removed global type so each series can define its own type. // Removed global type so each series can define its own type.
backgroundColor: "#09090B", backgroundColor: $mode === "light" ? "#fff" : "#09090B",
plotBackgroundColor: "#09090B", plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
height: 360, height: 360,
animation: false, animation: false,
}, },
title: { title: {
text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} FTD</h3>`, text: `<h3 class="mt-3 mb-1 text-[1rem] sm:text-lg">${removeCompanyStrings($displayCompanyName)} FTD</h3>`,
style: { style: {
color: "white", color: $mode === "light" ? "black" : "white",
}, },
useHTML: true, useHTML: true,
}, },
plotOptions: { plotOptions: {
series: { series: {
color: "white", color: $mode === "light" ? "black" : "white",
animation: false, // Disable series animation animation: false, // Disable series animation
states: { states: {
hover: { hover: {
@ -118,7 +119,7 @@
borderRadius: 4, borderRadius: 4,
formatter: function () { formatter: function () {
// Format the x value to display time in hh:mm format // Format the x value to display time in hh:mm format
let tooltipContent = `<span class="text-white m-auto text-black text-[1rem] font-[501]">${new Date( let tooltipContent = `<span class=" m-auto text-[1rem] font-[501]">${new Date(
this?.x, this?.x,
).toLocaleDateString("en-US", { ).toLocaleDateString("en-US", {
year: "numeric", year: "numeric",
@ -128,8 +129,8 @@
// Loop through each point in the shared tooltip // Loop through each point in the shared tooltip
this.points.forEach((point) => { this.points.forEach((point) => {
tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span> tooltipContent += `<span class=" font-semibold text-sm">${point.series.name}:</span>
<span class="text-white font-normal text-sm" style="color:${point.color}">${abbreviateNumber( <span class=" font-normal text-sm">${abbreviateNumber(
point.y, point.y,
)}</span><br>`; )}</span><br>`;
}); });
@ -141,15 +142,13 @@
endOnTick: false, endOnTick: false,
categories: dates, categories: dates,
crosshair: { crosshair: {
color: "#fff", // Set the color of the crosshair line color: $mode === "light" ? "black" : "white", // Set the color of the crosshair line
width: 1, // Adjust the line width as needed width: 1, // Adjust the line width as needed
dashStyle: "Solid", dashStyle: "Solid",
}, },
labels: { labels: {
style: { style: { color: $mode === "light" ? "black" : "white" },
color: "#fff",
},
distance: 20, // Increases space between label and axis distance: 20, // Increases space between label and axis
formatter: function () { formatter: function () {
return new Date(this.value).toLocaleDateString("en-US", { return new Date(this.value).toLocaleDateString("en-US", {
@ -163,7 +162,7 @@
yAxis: [ yAxis: [
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
enabled: false, enabled: false,
}, },
@ -174,7 +173,7 @@
}, },
{ {
gridLineWidth: 1, gridLineWidth: 1,
gridLineColor: "#111827", gridLineColor: $mode === "light" ? "#d1d5dc" : "#111827",
labels: { labels: {
enabled: false, enabled: false,
}, },
@ -207,7 +206,7 @@
name: "Price", name: "Price",
type: "line", type: "line",
data: priceList, data: priceList,
color: "#fff", color: $mode === "light" ? "#2C6288" : "#fff",
marker: { marker: {
enabled: false, enabled: false,
states: { states: {
@ -225,29 +224,31 @@
} }
$: { $: {
const ticker = $assetType === "stock" ? $stockTicker : $etfTicker; if ($stockTicker || $etfTicker || $mode) {
if (ticker) { const ticker = $assetType === "stock" ? $stockTicker : $etfTicker;
if (rawData?.length > 0) { if (ticker) {
weightedFTD = ( if (rawData?.length > 0) {
(rawData?.slice(-1)?.at(0)?.failToDeliver / weightedFTD = (
data?.getStockQuote?.avgVolume) * (rawData?.slice(-1)?.at(0)?.failToDeliver /
100 data?.getStockQuote?.avgVolume) *
)?.toFixed(2); 100
config = getPlotOptions(); )?.toFixed(2);
config = getPlotOptions();
}
} }
} }
} }
</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">
<div class="flex flex-row items-center w-full mt-3"> <div class="flex flex-row items-center w-full mt-3">
<h1 class="text-xl sm:text-2xl text-white font-bold">FTD Chart</h1> <h1 class="text-xl sm:text-2xl font-bold">FTD Chart</h1>
</div> </div>
{#if rawData?.length !== 0} {#if rawData?.length !== 0}
<div class="w-full flex flex-col items-start"> <div class="w-full flex flex-col items-start">
<div class="text-white text-[1rem] mt-2 mb-2 w-full"> <div class=" text-[1rem] mt-2 mb-2 w-full">
Over the past year, {$displayCompanyName} has seen a monthly average of Over the past year, {$displayCompanyName} has seen a monthly average of
<span class="font-semibold" <span class="font-semibold"
>{avgFailToDeliver?.toLocaleString("en-US")} >{avgFailToDeliver?.toLocaleString("en-US")}
@ -256,22 +257,20 @@
</div> </div>
<div <div
class="chart mt-5 sm:mt-0 border border-gray-800 rounded" class="chart mt-5 sm:mt-0 border border-gray-300 dark:border-gray-800 rounded"
use:highcharts={config} use:highcharts={config}
></div> ></div>
<div <div
class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-800 sm:pt-2 sm:pb-2" class="mt-5 flex flex-col sm:flex-row items-start sm:items-center w-full justify-between sm:border-y border-gray-300 dark:border-gray-800 sm:pt-2 sm:pb-2"
> >
<h3 class="text-xl sm:text-2xl text-white font-bold mb-2 sm:mb-0"> <h3 class="text-xl sm:text-2xl font-bold mb-2 sm:mb-0">FTD History</h3>
FTD History
</h3>
<div <div
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto" class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto"
> >
<div <div
class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1" class="bg-gray-300 dark:bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1"
> >
{#each tabs as item, i} {#each tabs as item, i}
{#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0} {#if !["Pro", "Plus"]?.includes(data?.user?.tier) && i > 0}
@ -286,7 +285,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
><path ><path
fill="#A3A3A3" fill="currentColor"
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
/></svg /></svg
> >
@ -307,7 +306,7 @@
class="relative text-sm block font-semibold whitespace-nowrap {activeIdx === class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
i i
? 'text-black' ? 'text-black'
: 'text-white'}" : ''}"
> >
{item.title} {item.title}
</span> </span>
@ -320,24 +319,23 @@
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
<table <table
class="table table-sm table-compact bg-table border border-gray-800 rounded-none sm:rounded-md w-full m-auto 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 class="bg-default"> <thead class="text-muted dark:text-white">
<tr> <tr>
<th class="text-white font-semibold text-start text-sm">Date</th> <th class=" font-semibold text-start text-sm">Date</th>
<th class="text-white font-semibold text-end text-sm">Price</th> <th class=" font-semibold text-end text-sm">Price</th>
<th class="text-white font-semibold text-end text-sm" <th class=" font-semibold text-end text-sm">FTD Shares</th>
>FTD Shares</th <th class=" font-semibold text-end text-sm">% Change</th>
>
<th class="text-white font-semibold text-end text-sm">% Change</th
>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each tableList as item, index} {#each tableList as item, index}
<!-- row --> <!-- row -->
<tr class="odd:bg-odd"> <tr
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap"> class="dark:sm:hover:bg-[#245073]/10 odd:bg-[#F6F7F8] dark:odd:bg-odd"
>
<td class=" text-sm sm:text-[1rem] whitespace-nowrap">
{new Date(item?.date)?.toLocaleDateString("en-US", { {new Date(item?.date)?.toLocaleDateString("en-US", {
day: "2-digit", // Include day number day: "2-digit", // Include day number
month: "short", // Display short month name month: "short", // Display short month name
@ -346,24 +344,22 @@
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap" class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
> >
{item?.price} {item?.price}
</td> </td>
<td <td
class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap" class=" text-sm sm:text-[1rem] text-right whitespace-nowrap"
> >
{abbreviateNumber(item?.failToDeliver)} {abbreviateNumber(item?.failToDeliver)}
</td> </td>
<td <td class=" text-sm sm:text-[1rem] whitespace-nowrap text-end">
class="text-white text-sm sm:text-[1rem] whitespace-nowrap text-end"
>
{#if index === tableList?.length - 1} {#if index === tableList?.length - 1}
n/a n/a
{:else if item?.failToDeliver > tableList[index + 1]?.failToDeliver} {:else if item?.failToDeliver > tableList[index + 1]?.failToDeliver}
<span class="text-[#00FC50]"> <span class="text-green-600 dark:text-[#00FC50]">
+{( +{(
((item?.failToDeliver - ((item?.failToDeliver -
tableList[index + 1]?.failToDeliver) / tableList[index + 1]?.failToDeliver) /
@ -372,7 +368,7 @@
)?.toFixed(2)}% )?.toFixed(2)}%
</span> </span>
{:else if item?.failToDeliver < tableList[index + 1]?.failToDeliver} {:else if item?.failToDeliver < tableList[index + 1]?.failToDeliver}
<span class="text-[#FF2F1F]"> <span class="text-red-600 dark:text-[#FF2F1F]">
-{( -{(
Math.abs( Math.abs(
(item?.failToDeliver - (item?.failToDeliver -

20
src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+layout.svelte
View File

@ -21,18 +21,18 @@
<aside class="hidden lg:block relative fixed w-1/4 mt-3"> <aside class="hidden lg:block relative fixed w-1/4 mt-3">
{#if similarStocks?.length > 0} {#if similarStocks?.length > 0}
<div <div
class="w-full p-2 text-white border border-gray-600 bg-inherit rounded-md h-fit pb-4 mt-4 cursor-pointer" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
> >
<h3 class="p-2 pt-4 text-xl font-semibold">Related Stocks</h3> <h3 class="p-2 pt-4 text-xl font-semibold">Related Stocks</h3>
<table class="table table-sm table-compact w-full text-white"> <table class="table table-sm table-compact w-full">
<thead class="text-white" <thead class="text-muted dark:text-white"
><tr ><tr
><th ><th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-left px-2" class="whitespace-nowrap border-b border-gray-300 dark:border-gray-600 font-semibold text-[1rem] text-left px-2"
>Company</th >Company</th
> >
<th <th
class="whitespace-nowrap border-b border-gray-600 font-semibold text-[1rem] text-right px-2" class="whitespace-nowrap border-b border-gray-300 dark:border-gray-600 font-semibold text-[1rem] text-right px-2"
>FTD / Avg Volume</th >FTD / Avg Volume</th
></tr ></tr
></thead ></thead
@ -41,18 +41,18 @@
{#each similarStocks?.slice(0, 8) as item, index} {#each similarStocks?.slice(0, 8) as item, index}
{#if item?.relativeFTD > 0} {#if item?.relativeFTD > 0}
<tr <tr
class="border-gray-800 text-[1rem] {index !== class="border-gray-300 dark:border-gray-800 text-[1rem] {index !==
similarStocks?.slice(0, 8).length - 1 similarStocks?.slice(0, 8).length - 1
? 'border-b' ? 'border-b'
: ''}" : ''} "
><td class="text-left text-[1rem] px-2" ><td class="text-left text-[1rem] px-2"
><a ><a
href={`/stocks/${item?.symbol}`} href={`/stocks/${item?.symbol}`}
class="sm:hover:text-white text-blue-400" class="text-blue-500 sm:hover:text-muted dark:sm:hover:text-white dark:text-blue-400"
>{item?.symbol}</a >{item?.symbol}</a
></td ></td
> >
<td class="text-right cursor-normal text-[1rem] px-2" <td class="text-right text-[1rem] px-2"
>{item?.relativeFTD > 0.01 >{item?.relativeFTD > 0.01
? abbreviateNumber(item?.relativeFTD) + "%" ? abbreviateNumber(item?.relativeFTD) + "%"
: "< 0.01%"}</td : "< 0.01%"}</td
@ -65,7 +65,7 @@
<div class="px-2"> <div class="px-2">
<a <a
href="/list/most-ftd-shares" href="/list/most-ftd-shares"
class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff] transition duration-100" class="flex justify-center items-center rounded cursor-pointer w-full py-2 mt-3 text-[1rem] text-center font-semibold text-white dark:text-black m-auto sm:hover:bg-blue-600 dark:sm:hover:bg-gray-300 bg-[#3B82F6] dark:bg-[#fff] transition duration-100"
> >
Fail-to-Deliver Ranks Fail-to-Deliver Ranks
</a> </a>

32
src/routes/stocks/[tickerID]/statistics/fail-to-deliver/+page.svelte
View File

@ -62,7 +62,7 @@
description={`Historical Fail-to-Deliver shares of ${$displayCompanyName}.`} description={`Historical Fail-to-Deliver shares of ${$displayCompanyName}.`}
/> />
<section class="bg-default w-full overflow-hidden text-white h-full"> <section class=" w-full overflow-hidden h-full">
<div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden"> <div class="w-full flex justify-center w-full sm-auto 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"
@ -70,7 +70,7 @@
<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 class="mb-3"> <div class="mb-3">
<h1 class="text-xl sm:text-2xl text-white font-bold"> <h1 class="text-xl sm:text-2xl font-bold">
{removeCompanyStrings($displayCompanyName)} Fail-to-Deliver {removeCompanyStrings($displayCompanyName)} Fail-to-Deliver
</h1> </h1>
</div> </div>
@ -80,20 +80,20 @@
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4"
> >
<div <div
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors" class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
> >
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center"> <div class=" text-sm mb-2 flex items-center">
<span>Total FTD Shares</span> <span>Total FTD Shares</span>
</div> </div>
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-xl font-bold text-white"> <span class="text-xl font-bold">
{abbreviateNumber( {abbreviateNumber(
rawData?.slice(-1)?.at(0)?.failToDeliver, rawData?.slice(-1)?.at(0)?.failToDeliver,
false, false,
)}</span )}</span
> >
<div class="flex flex-col ml-2"> <div class="flex flex-col ml-2">
<span class="text-sm text-violet-400"> <span class="text-sm text-violet-600 dark:text-violet-400">
{rawData?.slice(-1)?.at(0)?.failToDeliver > 1e5 {rawData?.slice(-1)?.at(0)?.failToDeliver > 1e5
? "Above Average" ? "Above Average"
: "Below Average"} : "Below Average"}
@ -103,13 +103,13 @@
</div> </div>
<div <div
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors" class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
> >
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center"> <div class=" text-sm mb-2 flex items-center">
<span>FTD / Avg. Volume</span> <span>FTD / Avg. Volume</span>
</div> </div>
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-xl font-bold text-white" <span class="text-xl font-bold"
>{relativeFTD > 0.01 >{relativeFTD > 0.01
? relativeFTD + "%" ? relativeFTD + "%"
: relativeFTD !== "n/a" : relativeFTD !== "n/a"
@ -117,7 +117,7 @@
: "n/a"}</span : "n/a"}</span
> >
<div class="flex flex-col ml-2"> <div class="flex flex-col ml-2">
<span class="text-sm text-red-400"> <span class="text-sm text-red-600 dark:text-red-400">
{relativeFTD > 20 ? "High Impact" : "Low Impact"} {relativeFTD > 20 ? "High Impact" : "Low Impact"}
</span> </span>
</div> </div>
@ -125,13 +125,13 @@
</div> </div>
<div <div
class="bg-gray-800/30 rounded-lg p-4 sm:hover:bg-gray-800/40 transition-colors" class="shadow-md bg-gray-100 dark:bg-gray-800/30 rounded-lg p-4 transition-colors"
> >
<div class="text-[#c3c6d0] text-sm mb-2 flex items-center"> <div class=" text-sm mb-2 flex items-center">
<span>1-Year Change</span> <span>1-Year Change</span>
</div> </div>
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-xl font-bold text-white" <span class="text-xl font-bold"
>{changePercentageYearAgo > 100 >{changePercentageYearAgo > 100
? "> 100" ? "> 100"
: changePercentageYearAgo?.toFixed(1)}%</span : changePercentageYearAgo?.toFixed(1)}%</span
@ -140,11 +140,11 @@
<span <span
class="text-sm {changePercentageYearAgo >= 0 && class="text-sm {changePercentageYearAgo >= 0 &&
changePercentageYearAgo !== null changePercentageYearAgo !== null
? "before:content-['+'] text-[#00FC50]" ? "before:content-['+'] text-green-600 dark:text-[#00FC50]"
: changePercentageYearAgo < 0 && : changePercentageYearAgo < 0 &&
changePercentageYearAgo !== null changePercentageYearAgo !== null
? 'text-[#FF2F1F]' ? 'text-red-600 dark:text-[#FF2F1F]'
: 'text-white'}" : ''}"
> >
{changePercentageYearAgo >= 0 ? "Positive" : "Negative"} Trend {changePercentageYearAgo >= 0 ? "Positive" : "Negative"} Trend
</span> </span>

10
src/routes/stocks/[tickerID]/statistics/price-reaction/+page.svelte
View File

@ -102,7 +102,7 @@
>{`${earningsData?.positiveEpsSurprises}/${earningsData?.totalReports}`} >{`${earningsData?.positiveEpsSurprises}/${earningsData?.totalReports}`}
quarters</span quarters</span
> >
<span class="text-xs text-violet-400"> <span class="text-xs text-violet-700 dark:text-violet-400">
{earningsData?.positiveEpsSurprises > {earningsData?.positiveEpsSurprises >
earningsData?.totalReports / 2 earningsData?.totalReports / 2
? "Above Average" ? "Above Average"
@ -145,18 +145,18 @@
</div> </div>
<div class="flex items-baseline"> <div class="flex items-baseline">
<span class="text-2xl font-bold" <span class="text-2xl font-bold"
>{metrics.avgPriceImpact >= 0 >{metrics?.avgPriceImpact >= 0
? "+" ? "+"
: ""}{metrics.avgPriceImpact}%</span : ""}{metrics?.avgPriceImpact}%</span
> >
<div class="flex flex-col ml-2"> <div class="flex flex-col ml-2">
<span class="text-sm">Next Day</span> <span class="text-sm">Next Day</span>
<span <span
class="text-xs text-{metrics.avgPriceImpact >= 0 class="text-xs text-{metrics?.avgPriceImpact >= 0
? 'green' ? 'green'
: 'red'}-400" : 'red'}-400"
> >
{metrics.avgPriceImpact >= 0 ? "Positive" : "Negative"} Trend {metrics?.avgPriceImpact >= 0 ? "Positive" : "Negative"} Trend
</span> </span>
</div> </div>
</div> </div>