AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfixing ui

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-25 18:32:39 +02:00
parent 1616f92c16
commit ceda1eaba3
9 changed files with 2120 additions and 1550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -105,6 +105,7 @@ function handleTypeOfTrade(state:string)
dividends: "/dividends", dividends: "/dividends",
statistics: "/statistics", statistics: "/statistics",
forecast: "/forecast", forecast: "/forecast",
financials: "/financials",
news: "/news", news: "/news",
}; };
@ -759,7 +760,7 @@ function handleTypeOfTrade(state:string)
: ''} mb-2" : ''} mb-2"
> >
<ul <ul
class="pr-4 sm:pr-0 w-screen sm:w-full overflow-x-scroll font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2" class="pr-4 sm:pr-0 w-screen overflow-x-scroll font-medium flex flex-row items-center bg-[#09090B] space-x-3 rtl:space-x-reverse py-2"
> >
<li class="cursor-pointer flex flex-col items-center"> <li class="cursor-pointer flex flex-col items-center">
<a <a

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

@ -1,14 +1,17 @@
<script lang="ts"> <script lang="ts">
import {numberOfUnreadNotification, displayCompanyName, stockTicker} from '$lib/store'; import {
import { onMount } from 'svelte'; numberOfUnreadNotification,
displayCompanyName,
import { Chart } from 'svelte-echarts' stockTicker,
import { init, use } from 'echarts/core' } from "$lib/store";
import { LineChart, BarChart } from 'echarts/charts' import { onMount } from "svelte";
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer])
import { Chart } from "svelte-echarts";
import { init, use } from "echarts/core";
import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer]);
export let data; export let data;
let isLoaded = false; let isLoaded = false;
@ -16,8 +19,6 @@
let rawData = data?.getStockDividend; let rawData = data?.getStockDividend;
let optionsDividend; let optionsDividend;
let exDividendDate = rawData?.history?.at(0)?.date; let exDividendDate = rawData?.history?.at(0)?.date;
let dividendYield = rawData?.dividendYield; let dividendYield = rawData?.dividendYield;
let annualDividend = rawData?.annualDividend; let annualDividend = rawData?.annualDividend;
@ -25,43 +26,38 @@
let payoutRatio = rawData?.payoutRatio; let payoutRatio = rawData?.payoutRatio;
let dividendGrowth = rawData?.dividendGrowth; let dividendGrowth = rawData?.dividendGrowth;
async function plotDividend() { async function plotDividend() {
// Combine the data into an array of objects to keep them linked // Combine the data into an array of objects to keep them linked
const combinedData = rawData?.history?.map(item => ({ const combinedData = rawData?.history?.map((item) => ({
date: item?.paymentDate, date: item?.paymentDate,
dividend: item?.adjDividend?.toFixed(2) dividend: item?.adjDividend?.toFixed(2),
})); }));
// Sort the combined data array based on the date // Sort the combined data array based on the date
combinedData.sort((a, b) => new Date(a?.date) - new Date(b?.date)); combinedData.sort((a, b) => new Date(a?.date) - new Date(b?.date));
// Separate the sorted data back into individual arrays // Separate the sorted data back into individual arrays
const dates = combinedData.map(item => item.date); const dates = combinedData.map((item) => item.date);
const dividendList = combinedData.map(item => item.dividend); const dividendList = combinedData.map((item) => item.dividend);
const options = { const options = {
tooltip: { tooltip: {
trigger: 'axis', trigger: "axis",
hideDelay: 100, // Set the delay in milliseconds hideDelay: 100, // Set the delay in milliseconds
}, },
animation: false, animation: false,
grid: { grid: {
left: '3%', left: "3%",
right: '3%', right: "3%",
bottom: '10%', bottom: "10%",
top: '10%', top: "10%",
containLabel: true containLabel: true,
}, },
xAxis: { xAxis: {
data: dates, data: dates,
type: 'category', type: "category",
axisLabel: { axisLabel: {
color: '#fff', color: "#fff",
}, },
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
@ -69,205 +65,270 @@
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
splitLine: { splitLine: {
show: false, // Disable x-axis grid lines show: false, // Disable x-axis grid lines
}, },
axisLabel: { axisLabel: {
show: false // Hide y-axis labels show: false, // Hide y-axis labels
} },
}, },
], ],
series: [ series: [
{ {
name: 'Dividend per Share', name: "Dividend per Share",
data: dividendList, data: dividendList,
type: 'bar', type: "bar",
smooth: true, smooth: true,
}, },
], ],
}; };
return options; return options;
} }
onMount(async () => { onMount(async () => {
optionsDividend = await plotDividend() optionsDividend = await plotDividend();
isLoaded = true; isLoaded = true;
}) });
</script> </script>
<svelte:head> <svelte:head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title> <title>
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Dividend History, Dates & Yield · stocknear {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) Dividend History, Dates & Yield ·
stocknear
</title> </title>
<meta name="description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}> <meta
name="description"
content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}/> <meta
<meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}), including dividend history, yield, key dates, growth and other metrics.`} /> property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}
/>
<meta
property="og:description"
content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}), including dividend history, yield, key dates, growth and other metrics.`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}/> <meta
<meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} /> name="twitter:title"
content={`${$displayCompanyName} (${$stockTicker}) Dividend History, Dates & Yield · stocknear`}
/>
<meta
name="twitter:description"
content={`Get the latest dividend data for ${$displayCompanyName} (${$stockTicker}) stock price quote with breaking news, financials, statistics, charts and more.`}
/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"> >
<div class="w-full flex h-full overflow-hidden"> <div class="w-full flex h-full overflow-hidden">
<div class="w-full relative flex justify-center items-center overflow-hidden"> <div
class="w-full relative flex justify-center items-center overflow-hidden"
>
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:p-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-2xl sm:text-3xl text-gray-200 font-bold mb-4"> <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Dividends Dividends
</h1> </h1>
<div
class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
>
<div class="w-full text-white text-start p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"> <svg
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" 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> class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
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
>
{#if rawData?.history?.length !== 0} {#if rawData?.history?.length !== 0}
{#if !dateDistance} {#if !dateDistance}
{$displayCompanyName} has an annual dividend of {$displayCompanyName} has an annual dividend of ${annualDividend}
${annualDividend}
per share, with a forward yield of per share, with a forward yield of
{dividendYield}%. {dividendYield}%. The dividend is paid every
The dividend is paid every {payoutFrequency === 4
{payoutFrequency === 4 ? '3 months' : payoutFrequency === 2 ? '6 months' : payoutFrequency === 1 ? '12 months' : 'n/a'} ? "3 months"
: payoutFrequency === 2
? "6 months"
: payoutFrequency === 1
? "12 months"
: "n/a"}
and the last ex-dividend date was and the last ex-dividend date was
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} {new Date(exDividendDate)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
{:else} {:else}
{$displayCompanyName} issued its most recent dividend on {$displayCompanyName} issued its most recent dividend on
{new Date(rawData?.history?.at(0)?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}. {new Date(rawData?.history?.at(0)?.date)?.toLocaleString(
Since then, the company has not distributed any further dividends for over 12 months. "en-US",
{
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)}. Since then, the company has not distributed any further
dividends for over 12 months.
{/if} {/if}
{:else} {:else}
No dividend history available for {$displayCompanyName}. No dividend history available for {$displayCompanyName}.
{/if} {/if}
</div> </div>
</div> </div>
{#if rawData?.history?.length !== 0} {#if rawData?.history?.length !== 0}
<div
<div class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 divide-x"> class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-3 md:grid-rows-1 divide-x"
>
<div class="p-4 bp:p-5 sm:p-6"> <div class="p-4 bp:p-5 sm:p-6">
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"> <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
>
Dividend Yield Dividend Yield
</label> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div
{dividendYield !== '0.00' ? dividendYield : '0'}% class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{dividendYield !== "0.00" ? dividendYield : "0"}%
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast"> <div class="p-4 bp:p-5 sm:p-6 border-l border-b border-contrast">
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"> <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
>
Annual Dividend Annual Dividend
</label> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div
{annualDividend !== '0.00' ? annualDividend : '0'} class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{annualDividend !== "0.00" ? annualDividend : "0"}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-r border-contrast"> <div class="p-4 bp:p-5 sm:p-6 border-r border-contrast">
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"> <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
>
Ex-Dividend Date Ex-Dividend Date
</label> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div
{new Date(exDividendDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{new Date(exDividendDate)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast"> <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast">
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"> <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
>
Payout Frequency Payout Frequency
</label> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div
{payoutFrequency === 4 ? 'Quartely' : payoutFrequency === 2 ? 'Half-Yearly' : payoutFrequency === 1 ? 'Annually' : 'n/a'} class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{payoutFrequency === 4
? "Quartely"
: payoutFrequency === 2
? "Half-Yearly"
: payoutFrequency === 1
? "Annually"
: "n/a"}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast"> <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast">
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"> <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
>
Payout Ratio Payout Ratio
</label> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div
{payoutRatio !== '0.00' ? payoutRatio : '0'}% class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{payoutRatio !== "0.00" ? payoutRatio : "0"}%
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast"> <div class="p-4 bp:p-5 sm:p-6 border-t border-r border-contrast">
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"> <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem]"
>
Dividend Growth Dividend Growth
</label> </label>
<div class="mt-1 break-words font-semibold leading-8 text-light text-xl"> <div
{dividendGrowth !== 'NaN' ? dividendGrowth+'%' : '-'} class="mt-1 break-words font-semibold leading-8 text-light text-xl"
>
{dividendGrowth !== "NaN" ? dividendGrowth + "%" : "-"}
</div>
</div> </div>
</div> </div>
<div
class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8"
>
<h3 class="text-xl text-white font-semibold">Dividends History</h3>
</div> </div>
<div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
<h3 class="text-xl text-white font-semibold ">
Dividends History
</h3>
</div>
{#if isLoaded} {#if isLoaded}
{#if rawData?.history?.length !== 0 && optionsDividend} {#if rawData?.history?.length !== 0 && optionsDividend}
<div class="app w-full"> <div class="app w-full">
<Chart {init} options={optionsDividend} class="chart" /> <Chart {init} options={optionsDividend} class="chart" />
</div> </div>
<div
<div class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4"> class="overflow-x-scroll no-scrollbar flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4"
<table class="table table-sm table-compact flex justify-start items-center w-full m-auto"> >
<table
class="table table-sm table-compact flex justify-start items-center w-full m-auto"
>
<thead> <thead>
<tr class="bg-[#09090B] border-b-slate-600 shadow-md"> <tr class="bg-[#09090B] border-b-slate-600 shadow-md">
<th class="text-start bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"> <th
class="text-start bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
>
Ex-Divid. Date Ex-Divid. Date
</th> </th>
<th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"> <th
class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
>
Cash Amount Cash Amount
</th> </th>
<th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"> <th
class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
>
Record Date Record Date
</th> </th>
<th class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"> <th
class="text-end bg-[#09090B] border-b border-[#09090B] text-white text-sm font-semibold"
>
Pay Date Pay Date
</th> </th>
</tr> </tr>
@ -275,17 +336,50 @@
<tbody class="shadow-md"> <tbody class="shadow-md">
{#each rawData?.history as item} {#each rawData?.history as item}
<tr class="text-gray-200 odd:bg-[#27272A]"> <tr class="text-gray-200 odd:bg-[#27272A]">
<td class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]"> <td
{new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })} class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white font-medium border-b border-[#09090B]"
>
{new Date(item?.date)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"> <td
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
>
{item?.adjDividend?.toFixed(3)} {item?.adjDividend?.toFixed(3)}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"> <td
{item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
>
{item?.recordDate?.length !== 0
? new Date(item?.recordDate)?.toLocaleString(
"en-US",
{
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)
: "n/a"}
</td> </td>
<td class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"> <td
{item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white border-b border-[#09090B]"
>
{item?.paymentDate?.length !== 0
? new Date(item?.paymentDate)?.toLocaleString(
"en-US",
{
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)
: "n/a"}
</td> </td>
</tr> </tr>
{/each} {/each}
@ -293,44 +387,34 @@
</table> </table>
</div> </div>
<span class="text-gray-200 text-sm italic"> <span class="text-gray-200 text-sm italic">
* Dividend amounts are adjusted for stock splits when applicable. * Dividend amounts are adjusted for stock splits when
applicable.
</span> </span>
{:else} {:else}
<h1 class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10"> <h1
class="text-xl m-auto flex justify-center text-gray-200 mb-4 mt-10"
>
No history found No history found
</h1> </h1>
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label> </label>
</div> </div>
</div> </div>
{/if} {/if}
{/if} {/if}
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<style> <style>
.app { .app {
height: 400px; height: 400px;

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

@ -47,7 +47,7 @@
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40" class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
> >
<div class="m-auto h-full overflow-hidden"> <div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
<div <div
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640

67
src/routes/stocks/[tickerID]/forecast/+layout.svelte
View File

@ -13,9 +13,14 @@
analyst: "analyst", analyst: "analyst",
}; };
const foundSection = parts?.find((part) => Object?.values(sectionMap)?.includes(part)); const foundSection = parts?.find((part) =>
Object?.values(sectionMap)?.includes(part),
);
displaySubSection = Object?.keys(sectionMap)?.find((key) => sectionMap[key] === foundSection) || "overview"; displaySubSection =
Object?.keys(sectionMap)?.find(
(key) => sectionMap[key] === foundSection,
) || "overview";
} }
function changeSubSection(state) { function changeSubSection(state) {
@ -39,7 +44,10 @@
const unsubscribe = page.subscribe(($page) => { const unsubscribe = page.subscribe(($page) => {
const splitRoute = $page.url.pathname.split("/"); const splitRoute = $page.url.pathname.split("/");
const routeState = splitRoute[splitRoute.length - 1] !== "forecast" ? splitRoute[splitRoute.length - 1] : "overview"; const routeState =
splitRoute[splitRoute.length - 1] !== "forecast"
? splitRoute[splitRoute.length - 1]
: "overview";
changeSubSection(routeState); changeSubSection(routeState);
}); });
@ -49,37 +57,70 @@
}); });
</script> </script>
<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"> <section
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
>
<div class="m-auto h-full overflow-hidden"> <div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
<div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : 'no-scrollbar'} mb-2"> <div
<ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"> class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
? 'overflow-auto scrollbar'
: 'no-scrollbar'} mb-2"
>
<ul
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
>
<li class="cursor-pointer flex flex-col items-center"> <li class="cursor-pointer flex flex-col items-center">
<a <a
href={`/stocks/${$stockTicker}/forecast`} href={`/stocks/${$stockTicker}/forecast`}
on:click={() => changeSubSection("overview")} on:click={() => changeSubSection("overview")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'overview' ? 'text-white ' : 'bg-[#09090B]'}" class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'overview'
? 'text-white '
: 'bg-[#09090B]'}"
> >
Overview Overview
</a> </a>
<div class="{displaySubSection === 'overview' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" /> <div
class="{displaySubSection === 'overview'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
/>
</li> </li>
<li class="cursor-pointer flex flex-col items-center"> <li class="cursor-pointer flex flex-col items-center">
<a href={`/stocks/${$stockTicker}/forecast/ai`} on:click={() => changeSubSection("ai")} class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'ai' ? 'text-white ' : 'bg-[#09090B]'}"> <a
href={`/stocks/${$stockTicker}/forecast/ai`}
on:click={() => changeSubSection("ai")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'ai'
? 'text-white '
: 'bg-[#09090B]'}"
>
AI AI
</a> </a>
<div class="{displaySubSection === 'ai' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" /> <div
class="{displaySubSection === 'ai'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
/>
</li> </li>
<li class="cursor-pointer flex flex-col items-center"> <li class="cursor-pointer flex flex-col items-center">
<a <a
href={`/stocks/${$stockTicker}/forecast/analyst`} href={`/stocks/${$stockTicker}/forecast/analyst`}
on:click={() => changeSubSection("analyst")} on:click={() => changeSubSection("analyst")}
class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'analyst' ? 'text-white ' : 'bg-[#09090B]'}" class="px-2 text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'analyst'
? 'text-white '
: 'bg-[#09090B]'}"
> >
Analysts Analysts
</a> </a>
<div class="{displaySubSection === 'analyst' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]" /> <div
class="{displaySubSection === 'analyst'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4rem]"
/>
</li> </li>
</ul> </ul>
</div> </div>

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

@ -1,5 +1,10 @@
<script lang="ts"> <script lang="ts">
import { numberOfUnreadNotification, displayCompanyName, stockTicker, analystEstimateComponent } from "$lib/store"; import {
numberOfUnreadNotification,
displayCompanyName,
stockTicker,
analystEstimateComponent,
} from "$lib/store";
import { abbreviateNumber } from "$lib/utils"; import { abbreviateNumber } from "$lib/utils";
export let data; export let data;
@ -13,11 +18,15 @@ function findIndex(data) {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
// Find the index where the item's date is greater than the current year and revenue is null // Find the index where the item's date is greater than the current year and revenue is null
const index = data?.findIndex((item) => item?.date > currentYear && item?.revenue === null); const index = data?.findIndex(
(item) => item?.date > currentYear && item?.revenue === null,
);
// If index is found and there is at least one item in the data for the current year with non-null revenue // If index is found and there is at least one item in the data for the current year with non-null revenue
if (index !== -1) { if (index !== -1) {
const hasNonNullRevenue = data?.some((item) => item?.date === currentYear && item?.revenue !== null); const hasNonNullRevenue = data?.some(
(item) => item?.date === currentYear && item?.revenue !== null,
);
// Add +1 to the index if the condition is met // Add +1 to the index if the condition is met
return hasNonNullRevenue ? index + 1 : index; return hasNonNullRevenue ? index + 1 : index;
@ -26,13 +35,11 @@ function findIndex(data) {
return index; // Return the index or -1 if not found return index; // Return the index or -1 if not found
} }
const calculateChange = (current, previous) => { const calculateChange = (current, previous) => {
if (previous !== undefined && previous !== 0) { if (previous !== undefined && previous !== 0) {
const change = ((Math.abs(current) / Math.abs(previous)) - 1) * 100; const change = (Math.abs(current) / Math.abs(previous) - 1) * 100;
// Preserve the direction of change (positive/negative) // Preserve the direction of change (positive/negative)
const direction = (current < 0 || previous < 0) ? -1 : 1; const direction = current < 0 || previous < 0 ? -1 : 1;
return change * direction; return change * direction;
} else { } else {
return null; return null;
@ -42,15 +49,18 @@ function findIndex(data) {
if (data?.getAnalystEstimate?.length !== 0) { if (data?.getAnalystEstimate?.length !== 0) {
index = findIndex(data?.getAnalystEstimate); index = findIndex(data?.getAnalystEstimate);
// Calculate changes using the helper function // Calculate changes using the helper function
const estimatedRevenueAvg = data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg; const estimatedRevenueAvg =
data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg;
const revenue = data?.getAnalystEstimate[index - 2]?.revenue; const revenue = data?.getAnalystEstimate[index - 2]?.revenue;
const estimatedNetIncomeAvg = data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg; const estimatedNetIncomeAvg =
data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg;
const netIncome = data?.getAnalystEstimate[index - 2]?.netIncome; const netIncome = data?.getAnalystEstimate[index - 2]?.netIncome;
const estimatedEbitdaAvg = data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg; const estimatedEbitdaAvg =
data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg;
const ebitda = data?.getAnalystEstimate[index - 2]?.ebitda; const ebitda = data?.getAnalystEstimate[index - 2]?.ebitda;
const estimatedEpsAvg = data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg; const estimatedEpsAvg =
data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg;
const eps = data?.getAnalystEstimate[index - 2]?.eps; const eps = data?.getAnalystEstimate[index - 2]?.eps;
// Calculate percentage changes for each metric // Calculate percentage changes for each metric
@ -58,7 +68,6 @@ if (data?.getAnalystEstimate?.length !== 0) {
changeNetIncome = calculateChange(estimatedNetIncomeAvg, netIncome); changeNetIncome = calculateChange(estimatedNetIncomeAvg, netIncome);
changeEBITDA = calculateChange(estimatedEbitdaAvg, ebitda); changeEBITDA = calculateChange(estimatedEbitdaAvg, ebitda);
changeEPS = calculateChange(estimatedEpsAvg, eps); changeEPS = calculateChange(estimatedEpsAvg, eps);
} }
</script> </script>
@ -69,107 +78,266 @@ if (data?.getAnalystEstimate?.length !== 0) {
{$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
{$displayCompanyName} ({$stockTicker}) Forecast Overview · stocknear {$displayCompanyName} ({$stockTicker}) Forecast Overview · stocknear
</title> </title>
<meta name="description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} /> <meta
name="description"
content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} /> <meta
<meta property="og:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} /> property="og:title"
content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`}
/>
<meta
property="og:description"
content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
/>
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`} /> <meta
<meta name="twitter:description" content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`} /> name="twitter:title"
content={`${$displayCompanyName} (${$stockTicker}) Forecast Overview · stocknear`}
/>
<meta
name="twitter:description"
content={`A list of analyst ratings for Advanced Micro Devices (AMD) stock. See upgrades, downgrades, price targets and more from top Wall Street stock analysts.`}
/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full"> <section
<div class="flex justify-center m-auto h-full overflow-hidden w-full"> class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
<div class="relative flex justify-center items-center overflow-hidden w-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:p-7 w-full m-auto mt-2 sm:mt-0"> <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">Financial Forecast this Year</h2> <div class="w-full mb-6">
<h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
Financial Forecast this Year
</h2>
{#if data?.getAnalystEstimate?.length !== 0} {#if data?.getAnalystEstimate?.length !== 0}
<div class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x"> <div
class="mb-4 grid grid-cols-2 grid-rows-1 divide-gray-500 rounded-lg border border-gray-600 bg-[#272727] shadow md:grid-cols-4 md:grid-rows-1 md:divide-x"
>
<div class="p-4 bp:p-5 sm:p-6"> <div class="p-4 bp:p-5 sm:p-6">
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> Revenue </label> <label
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"> class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
<div class="flex items-baseline text-2xl font-semibold text-white"> >
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg)} Revenue
</label>
<div
class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
>
<div
class="flex items-baseline text-2xl font-semibold text-white"
>
{abbreviateNumber(
data?.getAnalystEstimate[index - 1]?.estimatedRevenueAvg,
)}
</div> </div>
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"> <div
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeRevenue > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true" class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg >
<svg
class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeRevenue >
0
? ''
: 'rotate-180'}"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
></path></svg
> >
{abbreviateNumber(changeRevenue?.toFixed(1))}% {abbreviateNumber(changeRevenue?.toFixed(1))}%
</div> </div>
</div> </div>
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"> <div
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.revenue)} class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
>
from {abbreviateNumber(
data?.getAnalystEstimate[index - 2]?.revenue,
)}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0"> <div
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> Net Income </label> class="p-4 bp:p-5 sm:p-6 border-l border-contrast md:border-0"
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"> >
<div class="flex items-baseline text-2xl font-semibold text-white"> <label
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedNetIncomeAvg)} class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
>
Net Income
</label>
<div
class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
>
<div
class="flex items-baseline text-2xl font-semibold text-white"
>
{abbreviateNumber(
data?.getAnalystEstimate[index - 1]
?.estimatedNetIncomeAvg,
)}
</div> </div>
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"> <div
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeNetIncome > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true" class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg >
<svg
class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeNetIncome >
0
? ''
: 'rotate-180'}"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
></path></svg
> >
{abbreviateNumber(changeNetIncome?.toFixed(1))}% {abbreviateNumber(changeNetIncome?.toFixed(1))}%
</div> </div>
</div> </div>
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"> <div
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.netIncome)} class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
>
from {abbreviateNumber(
data?.getAnalystEstimate[index - 2]?.netIncome,
)}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0"> <div
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> EBITDA </label> class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0"
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"> >
<div class="flex items-baseline text-2xl font-semibold text-white"> <label
{abbreviateNumber(data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg)} class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
>
EBITDA
</label>
<div
class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
>
<div
class="flex items-baseline text-2xl font-semibold text-white"
>
{abbreviateNumber(
data?.getAnalystEstimate[index - 1]?.estimatedEbitdaAvg,
)}
</div> </div>
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"> <div
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEBITDA > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true" class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg >
<svg
class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEBITDA >
0
? ''
: 'rotate-180'}"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
></path></svg
> >
{abbreviateNumber(changeEBITDA?.toFixed(2))}% {abbreviateNumber(changeEBITDA?.toFixed(2))}%
</div> </div>
</div> </div>
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"> <div
from {abbreviateNumber(data?.getAnalystEstimate[index - 2]?.ebitda)} class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
>
from {abbreviateNumber(
data?.getAnalystEstimate[index - 2]?.ebitda,
)}
</div> </div>
</div> </div>
<div class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0"> <div
<label class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"> EPS </label> class="p-4 bp:p-5 sm:p-6 border-t border-contrast md:border-0 border-l border-contrast md:border-0"
<div class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"> >
<div class="flex items-baseline text-2xl font-semibold text-white"> <label
class="mr-1 cursor-pointer flex flex-row items-center text-white text-[1rem] font-semibold"
>
EPS
</label>
<div
class="mt-1 flex flex-col items-baseline justify-start space-y-2 bp:space-y-0"
>
<div
class="flex items-baseline text-2xl font-semibold text-white"
>
{data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg} {data?.getAnalystEstimate[index - 1]?.estimatedEpsAvg}
</div> </div>
<div class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"> <div
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEPS > 0 ? '' : 'rotate-180'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="max-width:40px" aria-hidden="true" class="inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-semibold md:mt-2 lg:mt-0 bg-[#FBCE3C] text-black"
><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg >
<svg
class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center {changeEPS >
0
? ''
: 'rotate-180'}"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12"
></path></svg
> >
{abbreviateNumber(changeEPS?.toFixed(1))}% {abbreviateNumber(changeEPS?.toFixed(1))}%
</div> </div>
</div> </div>
<div class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"> <div
class="ml-0.5 mt-1.5 text-sm font-semibold text-white/60 lg:block"
>
from {data?.getAnalystEstimate[index - 2]?.eps} from {data?.getAnalystEstimate[index - 2]?.eps}
</div> </div>
</div> </div>
</div> </div>
<div class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent ? 'hidden' : ''}"> <div
class="w-full m-auto sm:pb-6 sm:pt-6 {!$analystEstimateComponent
? 'hidden'
: ''}"
>
{#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }} {#await import("$lib/components/AnalystEstimate.svelte") then { default: Comp }}
<svelte:component this={Comp} {data} /> <svelte:component this={Comp} {data} />
{/await} {/await}
</div> </div>
{:else} {:else}
<div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"> <div
<svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
><path fill="#a474f6" 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 >
<svg
class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
><path
fill="#a474f6"
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 analyst forecast available for {$displayCompanyName}. No analyst forecast available for {$displayCompanyName}.
</div> </div>
@ -177,4 +345,5 @@ if (data?.getAnalystEstimate?.length !== 0) {
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>

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

@ -1,33 +1,33 @@
<script lang='ts'> <script lang="ts">
import { stockTicker, screenWidth } from "$lib/store"; import { stockTicker, screenWidth } from "$lib/store";
import { page } from "$app/stores"; import { page } from "$app/stores";
let displaySubSection = ''; let displaySubSection = "";
if (!displaySubSection || displaySubSection.length === 0) { if (!displaySubSection || displaySubSection.length === 0) {
const parts = $page?.url?.pathname.split('/'); const parts = $page?.url?.pathname.split("/");
const sectionMap = { const sectionMap = {
'congress-trading': 'congress-trading', "congress-trading": "congress-trading",
'transcripts': 'transcripts', transcripts: "transcripts",
}; };
const foundSection = parts?.find(part => Object?.values(sectionMap)?.includes(part)); const foundSection = parts?.find((part) =>
Object?.values(sectionMap)?.includes(part),
);
displaySubSection = Object?.keys(sectionMap)?.find(key => sectionMap[key] === foundSection) || 'insider'; displaySubSection =
Object?.keys(sectionMap)?.find(
(key) => sectionMap[key] === foundSection,
) || "insider";
} }
function changeSubSection(state) { function changeSubSection(state) {
const subSectionMap = { const subSectionMap = {
'congress-trading': '/insider/congress-trading', "congress-trading": "/insider/congress-trading",
'transcripts': '/insider/transcripts', transcripts: "/insider/transcripts",
}; };
if (state !== 'insider' && subSectionMap[state]) { if (state !== "insider" && subSectionMap[state]) {
displaySubSection = state; displaySubSection = state;
//goto(`/stocks/${$stockTicker}${subSectionMap[state]}`); //goto(`/stocks/${$stockTicker}${subSectionMap[state]}`);
} else { } else {
@ -35,53 +35,81 @@
//goto(`/stocks/${$stockTicker}/insider`); //goto(`/stocks/${$stockTicker}/insider`);
} }
} }
</script> </script>
<section class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"> <section
class="w-full max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
>
<div class="h-full overflow-hidden"> <div class="h-full overflow-hidden">
<main class="w-full"> <main class="w-full">
<div
class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640
<div class="sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar no-scrollbar' : ''} mb-2" > ? 'overflow-auto scrollbar no-scrollbar'
<ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2"> : ''} mb-2"
>
<ul
class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll space-x-6 rtl:space-x-reverse py-2"
>
<li class="cursor-pointer flex flex-col items-center"> <li class="cursor-pointer flex flex-col items-center">
<a href={`/stocks/${$stockTicker}/insider`} on:click={() => (changeSubSection('insider'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'insider' ? 'text-white ' : 'bg-[#09090B]'}" > <a
href={`/stocks/${$stockTicker}/insider`}
on:click={() => changeSubSection("insider")}
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'insider'
? 'text-white '
: 'bg-[#09090B]'}"
>
Insider Trading Insider Trading
</a> </a>
<div class="{displaySubSection === 'insider' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]" /> <div
class="{displaySubSection === 'insider'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
/>
</li> </li>
<li class="cursor-pointer flex flex-col items-center"> <li class="cursor-pointer flex flex-col items-center">
<a href={`/stocks/${$stockTicker}/insider/congress-trading`} on:click={() => (changeSubSection('congress-trading'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'congress-trading' ? 'text-white ' : 'bg-[#09090B]'}" > <a
href={`/stocks/${$stockTicker}/insider/congress-trading`}
on:click={() => changeSubSection("congress-trading")}
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'congress-trading'
? 'text-white '
: 'bg-[#09090B]'}"
>
Congress Trading Congress Trading
</a> </a>
<div class="{displaySubSection === 'congress-trading' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]" /> <div
class="{displaySubSection === 'congress-trading'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem]"
/>
</li> </li>
<li class="cursor-pointer flex flex-col items-center"> <li class="cursor-pointer flex flex-col items-center">
<a href={`/stocks/${$stockTicker}/insider/transcripts`} on:click={() => (changeSubSection('transcripts'))} class="text-xs sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection === 'transcripts' ? 'text-white ' : 'bg-[#09090B]'}" > <a
href={`/stocks/${$stockTicker}/insider/transcripts`}
on:click={() => changeSubSection("transcripts")}
class="text-sm sm:text-[1rem] font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
'transcripts'
? 'text-white '
: 'bg-[#09090B]'}"
>
Transcripts Transcripts
</a> </a>
<div class="{displaySubSection === 'transcripts' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]" /> <div
class="{displaySubSection === 'transcripts'
? 'bg-[#75D377]'
: 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3.5rem]"
/>
</li> </li>
</ul> </ul>
</div> </div>
</main> </main>
<slot /> <slot />
</div> </div>
</section> </section>
<style lang="scss">
<style lang='scss'>
.scrollbar { .scrollbar {
display: grid; display: grid;
grid-gap: 17px; grid-gap: 17px;
@ -105,18 +133,16 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
height: 7px; height: 7px;
width: 10px; width: 10px;
background: #09090B; background: #09090b;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #6B6F79; background: #6b6f79;
-webkit-border-radius: 1ex; -webkit-border-radius: 1ex;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: #09090B; background: #09090b;
} }
</style> </style>

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

@ -11,7 +11,6 @@
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";
export let data; export let data;
let isLoaded = false; let isLoaded = false;
@ -22,7 +21,6 @@
let quarter = Math.floor(now.getMonth() / 3) + 1; let quarter = Math.floor(now.getMonth() / 3) + 1;
let yearRange = []; let yearRange = [];
function calculateInsiderTradingStatistics(data, year, quarter) { function calculateInsiderTradingStatistics(data, year, quarter) {
// Helper function to check if the transaction date is within the current quarter // Helper function to check if the transaction date is within the current quarter
const isInCurrentQuarter = (transactionDate) => { const isInCurrentQuarter = (transactionDate) => {
@ -114,9 +112,7 @@
yearRange = Array.from( yearRange = Array.from(
new Set( new Set(
rawData?.map((item) => rawData?.map((item) => new Date(item?.transactionDate)?.getFullYear()),
(new Date(item?.transactionDate))?.getFullYear(),
),
), ),
)?.sort((a, b) => b - a); )?.sort((a, b) => b - a);
if (yearRange?.length > 0) { if (yearRange?.length > 0) {
@ -150,7 +146,6 @@
"n/a": { text: "n/a", class: "text-gray-300" }, "n/a": { text: "n/a", class: "text-gray-300" },
}; };
let columns = [ let columns = [
{ key: "reportingName", label: "Name", align: "left" }, { key: "reportingName", label: "Name", align: "left" },
{ key: "transactionDate", label: "Date", align: "right" }, { key: "transactionDate", label: "Date", align: "right" },
@ -167,7 +162,6 @@
value: { order: "none", type: "number" }, value: { order: "none", type: "number" },
}; };
const sortData = (key) => { const sortData = (key) => {
// Reset all other keys to 'none' except the current key // Reset all other keys to 'none' except the current key
for (const k in sortOrders) { for (const k in sortOrders) {
@ -227,7 +221,7 @@
}; };
$: { $: {
if((year || quarter ) && typeof window !== 'undefined') { if ((year || quarter) && typeof window !== "undefined") {
statistics = calculateInsiderTradingStatistics(rawData, year, quarter); statistics = calculateInsiderTradingStatistics(rawData, year, quarter);
buySellRatio = buySellRatio =
statistics?.soldShares !== 0 statistics?.soldShares !== 0
@ -276,14 +270,14 @@ $: {
</svelte:head> </svelte:head>
<section <section
class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full" class="w-full bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0"
> >
<div class="flex justify-center m-auto h-full overflow-hidden w-full"> <div class="w-full flex h-full overflow-hidden">
<div <div
class="relative flex justify-center items-center overflow-hidden w-full" class="w-full relative flex justify-center items-center overflow-hidden"
> >
<div class="xl:p-7 w-full m-auto mt-2"> <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<div class="mb-6"> <div class="w-full mb-6">
<h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4"> <h1 class="text-2xl sm:text-3xl text-gray-200 font-bold mb-4">
Insider Trading Insider Trading
</h1> </h1>
@ -675,9 +669,7 @@ $: {
class={transactionStyles[item?.transactionType] class={transactionStyles[item?.transactionType]
?.class} ?.class}
> >
{abbreviateNumber( {abbreviateNumber(item?.value)}
item?.value,
)}
</div> </div>
<div <div
class="{transactionStyles[item?.transactionType] class="{transactionStyles[item?.transactionType]

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

File diff suppressed because it is too large Load Diff

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

@ -43,7 +43,7 @@
class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40" class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
> >
<div class="m-auto h-full overflow-hidden"> <div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl"> <main class="w-full">
<div class="m-auto"> <div class="m-auto">
<div <div
class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640