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

refactor code with info box

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-19 15:57:28 +01:00
parent 51b2f0a065
commit 55d171de2e
9 changed files with 237 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/Infobox.svelte Normal file
View File

@ -0,0 +1,27 @@
<script lang="ts">
export let text;
</script>
<div
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
>
<svg
class="h-6 w-6 hidden sm:block"
viewBox="0 0 20 20"
fill="currentColor"
style="max-width:40px"
aria-hidden="true"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
></path></svg
>
<div class="ml-3 w-full">
<div class="flex w-full flex-row justify-between">
<div>
{@html text}
</div>
</div>
</div>
</div>

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

@ -11,6 +11,7 @@
import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import Infobox from "$lib/components/Infobox.svelte";
use([LineChart, BarChart, TooltipComponent, GridComponent, CanvasRenderer]);
export let data;
@ -118,6 +119,57 @@
optionsDividend = await plotDividend();
isLoaded = true;
});
function generateDividendInfoHTML() {
const history = rawData?.history || [];
if (history.length !== 0) {
if (!dateDistance) {
const formattedExDividendDate = new Date(exDividendDate).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
const payoutFrequencyText =
payoutFrequency === 4
? '3 months'
: payoutFrequency === 2
? '6 months'
: payoutFrequency === 1
? '12 months'
: 'n/a';
return `
<span>
${$displayCompanyName} has an annual dividend of $${annualDividend} per share, with a forward yield of ${dividendYield}%.
The dividend is paid every ${payoutFrequencyText} and the last ex-dividend date was ${formattedExDividendDate}.
</span>
`;
} else {
const latestDividendDate = new Date(history.at(0)?.date).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
return `
<span>
${$displayCompanyName} issued its most recent dividend on ${latestDividendDate}.
Since then, the company has not distributed any further dividends for over 12 months.
</span>
`;
}
} else {
return `
<span>
No dividend history available for ${$displayCompanyName}.
</span>
`;
}
}
const htmlOutput = generateDividendInfoHTML();
</script>
<svelte:head>
@ -169,55 +221,7 @@
Dividends
</h1>
<div
class="w-full text-white text-start p-3 sm:p-5 mb-10 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 flex-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
>
{#if rawData?.history?.length !== 0}
{#if !dateDistance}
{$displayCompanyName} has an annual dividend of ${annualDividend}
per share, with a forward yield of
{dividendYield}%. The dividend is paid every
{payoutFrequency === 4
? "3 months"
: payoutFrequency === 2
? "6 months"
: payoutFrequency === 1
? "12 months"
: "n/a"}
and the last ex-dividend date was
{new Date(exDividendDate)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
{:else}
{$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",
},
)}. Since then, the company has not distributed any further
dividends for over 12 months.
{/if}
{:else}
No dividend history available for {$displayCompanyName}.
{/if}
</div>
<Infobox text={htmlOutput} />
</div>
{#if rawData?.history?.length !== 0}

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

@ -17,6 +17,7 @@
import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import Infobox from "$lib/components/Infobox.svelte";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data;
@ -388,6 +389,36 @@
}
}
}
function generateStatementInfoHTML() {
if ($coolMode) {
const statementText = statementConfig?.find(
(item) => item?.propertyName === displayStatement
)?.text;
return `<span>${statementText || ''}</span>`;
} else if (income?.length > 0) {
return `
<span>
Get detailed income statement breakdowns, uncovering revenue, expenses, and much more.
</span>
`;
} else {
return `
<span>
No financial data available for ${$displayCompanyName}.
</span>
`;
}
}
let htmlOutput = null;
$: {
if($coolMode || displayStatement) {
htmlOutput = generateStatementInfoHTML()
}
}
</script>
<svelte:head>
@ -447,31 +478,7 @@
</div>
<div class="grid grid-cols-1 gap-2">
<div
class="text-white p-3 sm:p-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 flex-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
>
{#if $coolMode}
{statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.text}
<!--<Katex formula={true} math={"\\textrm{Revenue}=\\textrm{Revenue} - \\textrm{All Expenses}"}/>-->
{:else if income?.length > 0}
Get detailed income statement breakdowns, uncovering revenue,
expenses, and much more.
{:else}
No financial data available for {$displayCompanyName}
{/if}
</div>
<Infobox text={htmlOutput} />
{#if income?.length > 0}
<div
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
@ -553,7 +560,7 @@
</label>
<div
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto sm:ml-auto"
class="flex flex-row items-center w-fit sm:ml-auto"
>
<div class="relative inline-block text-left grow">
<DropdownMenu.Root>
@ -611,7 +618,7 @@
</div>
<Button
on:click={() => exportFundamentalData("csv")}
class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
class="ml-2 w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
>
<span class="truncate text-white">Download</span>
<svg

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

@ -18,6 +18,7 @@
import { LineChart, BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import Infobox from "$lib/components/Infobox.svelte";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data;
@ -443,6 +444,37 @@
}
}
}
function generateStatementInfoHTML() {
if ($coolMode) {
const statementText = statementConfig?.find(
(item) => item?.propertyName === displayStatement
)?.text;
return `<span>${statementText || ''}</span>`;
} else if (balanceSheet?.length > 0) {
return `
<span>
Get detailed breakdowns of the balance-sheet with total debts, total investments, and much more.
</span>
`;
} else {
return `
<span>
No financial data available for ${$displayCompanyName}.
</span>
`;
}
}
let htmlOutput = null;
$: {
if($coolMode || displayStatement) {
htmlOutput = generateStatementInfoHTML()
}
}
</script>
<svelte:head>
@ -506,30 +538,7 @@
</div>
<div class="grid grid-cols-1 gap-2">
<div
class="text-white p-3 sm:p-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 flex-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
>
{#if $coolMode}
{statementConfig?.find(
(item) => item?.propertyName === displayStatement,
)?.text}
{:else if balanceSheet?.length > 0}
Get detailed breakdowns of the balance-sheet with total debts,
total investments, and much more.
{:else}
No financial data available for {$displayCompanyName}
{/if}
</div>
<Infobox text={htmlOutput} />
{#if balanceSheet?.length > 0}
<div
class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
@ -611,7 +620,7 @@
</label>
<div
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto sm:ml-auto"
class="flex flex-row items-center w-fit sm:ml-auto"
>
<div class="relative inline-block text-left grow">
<DropdownMenu.Root>
@ -668,7 +677,7 @@
</div>
<Button
on:click={() => exportFundamentalData("csv")}
class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
class="ml-2 w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
>
<span class="truncate text-white">Download</span>
<svg

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

@ -59,6 +59,7 @@
<div class="m-auto h-full overflow-hidden">
<main class="w-fit sm:w-full sm:max-w-2xl">
<div class="m-auto">
{#if names?.length > 0}
<nav
class="sm:ml-4 pt-1 overflow-x-scroll text-sm sm:text-[1rem] whitespace-nowrap"
>
@ -83,6 +84,7 @@
{/each}
</ul>
</nav>
{/if}
</div>
</main>

2
src/routes/stocks/[tickerID]/metrics/+page.svelte
View File

@ -251,7 +251,7 @@
{/if}
{:else}
<div
class="border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"
>
<svg
class="h-6 w-6 hidden sm:block"

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

@ -16,7 +16,7 @@
import { BarChart, LineChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import Infobox from "$lib/components/Infobox.svelte";
use([BarChart, LineChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data;
@ -570,13 +570,13 @@
<!-- Add more Twitter meta tags as needed -->
</svelte:head>
<section class="w-full bg-[#09090B] overflow-hidden text-white h-full">
<section class="w-full bg-[#09090B] overflow-hidden text-white min-h-screen">
<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="w-full mb-6">
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0 ">
<div class="w-full mb-10">
<div
class="w-full m-auto sm:pb-6 {data?.getOptionsNetFlow?.length === 0
? 'hidden'
@ -587,27 +587,18 @@
{/await}
</div>
<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 flex-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
>
{#if optionsPlotData?.length !== 0}
1 Year of options activity involving {$displayCompanyName} by major
institutional traders and hedge funds.
{#if optionsPlotData?.length !== 0}
<Infobox text={`1 Year of options activity involving ${$displayCompanyName} by major
institutional traders and hedge funds.`} />
{:else}
There's no data available, indicating that major traders may not
be actively betting on {$displayCompanyName}.
<Infobox text={`There's no data available, indicating that major traders may not
be actively betting on ${$displayCompanyName}.`} />
{/if}
</div>
</div>
{#if optionsPlotData?.length !== 0}
@ -779,11 +770,14 @@
</div>
{/if}
{#if optionList?.length !== 0}
<h3 class="text-2xl text-gray-200 font-bold mb-4 text-start">
{activeIdx === 0 ? "Historical Option Data" : "Option Chain Data"}
</h3>
{#if optionList?.length !== 0}
<div
class="bg-secondary w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-6 mb-6"
>
@ -1124,23 +1118,7 @@
</div>
<UpgradeToPro {data} />
{:else}
<div class="flex justify-center items-center m-auto mt-16 mb-6">
<div
class="text-gray-100 text-sm sm:text-[1rem] rounded-md h-auto border border-gray-600 p-4"
>
<svg
class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
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 Options activity found
</div>
</div>
{/if}
{/if}
</div>

121
src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
View File

@ -12,6 +12,7 @@
import { BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import Infobox from "$lib/components/Infobox.svelte";
use([BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
import { abbreviateNumber } from "$lib/utils";
@ -342,6 +343,56 @@
goto("/pricing");
}
};
function generateEmployeeInfoHTML() {
if (employeeHistory?.length !== 0 && !dateDistance) {
const formattedEmployees = new Intl.NumberFormat('en').format(employees);
const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]['filingDate']
).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
const formattedChangeRate = new Intl.NumberFormat('en').format(changeRate);
const changeDirection = changeRate >= 0 && changeRate !== null ? 'increased' : 'decreased';
const growthRateClass = changeRate >= 0 && changeRate !== null ? 'text-[#00FC50]' : 'text-[#FF2F1F]';
return `
<span>
${$displayCompanyName} had ${formattedEmployees} employees on ${latestFilingDate}. The number of employees ${changeDirection}
by ${formattedChangeRate} or
<span class="${growthRateClass}">
${growthRate}%
</span>
compared to the previous year.
</span>
`;
} else if (employeeHistory?.length !== 0 && dateDistance) {
const abbreviatedEmployees = abbreviateNumber(employees);
const latestFilingDate = new Date(
employeeHistory[employeeHistory.length - 1]['filingDate']
).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
return `
<span>
${$displayCompanyName} had ${abbreviatedEmployees} employees on ${latestFilingDate}. Since then, the company has not submitted any additional employee data for more than a year.
</span>
`;
} else {
return `
<span>
No employee history for ${$displayCompanyName}. Probably, no records of past employees.
</span>
`;
}
}
const htmlOutput = generateEmployeeInfoHTML();
</script>
<svelte:head>
@ -392,72 +443,12 @@
{$stockTicker} Employees
</h2>
<div
class="text-white text-sm sm:text-[1rem] p-3 sm:p-5 mb-5 rounded-md border border-gray-800"
>
<span class="inline-block align-text-bottom">
<svg
class="w-5 h-5 inline-block align-text-bottom"
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>
</span>
{#if employeeHistory?.length !== 0 && !dateDistance}
<span>
{$displayCompanyName} had {new Intl.NumberFormat("en")?.format(
employees,
)} employees on
{new Date(
employeeHistory[employeeHistory?.length - 1]["filingDate"],
)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}. The number of employees {changeRate >= 0 &&
changeRate !== null
? "increased"
: "decreased"}
by {new Intl.NumberFormat("en")?.format(changeRate)} or
<span
class={changeRate >= 0 && changeRate !== null
? "text-[#00FC50]"
: "text-[#FF2F1F]"}
>
{growthRate}%
</span>
compared to the previous year.
</span>
{:else if employeeHistory?.length !== 0 && dateDistance}
<span>
{$displayCompanyName} had {abbreviateNumber(employees)} employees
on
{new Date(
employeeHistory[employeeHistory?.length - 1]["filingDate"],
)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}. Since then, the company has not submitted any additional
employee data for more than a year.
</span>
{:else}
<span>
No employee history for {$displayCompanyName}. Probably, no
records of past employees.
</span>
{/if}
</div>
<Infobox text={htmlOutput} />
</div>
<div
class="my-5 grid grid-cols-2 gap-3 px-1 xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6 sm:px-4"
class="my-5 grid grid-cols-2 gap-3 xs:mt-6 bp:mt-7 sm:grid-cols-3 sm:gap-6 "
>
<div>
Employees
@ -537,7 +528,7 @@
</h1>
{#if historyList?.length > 0}
<div
class="flex flex-row items-center w-fit sm:w-[50%] md:w-auto ml-auto"
class="flex flex-row items-center w-fit ml-auto"
>
<div class="relative inline-block text-left grow">
<DropdownMenu.Root>
@ -594,7 +585,7 @@
</div>
<Button
on:click={() => exportData("csv")}
class="ml-2 w-full border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
class="ml-2 w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-primary ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
>
<span class="truncate text-white">Download</span>
<svg

31
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -16,6 +16,7 @@
import { GridComponent, TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { onMount } from "svelte";
import Infobox from "$lib/components/Infobox.svelte";
use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
export let data;
@ -415,34 +416,24 @@
{#if rawData?.length !== 0}
<div class="grid grid-cols-1 gap-2">
<div
class="text-white p-3 sm:p-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 flex-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
>
{$displayCompanyName} has a market cap of {abbreviateNumber(
data?.getStockQuote?.marketCap,
true,
)} as of {new Date()?.toLocaleString("en-US", {
<Infobox text={`${$displayCompanyName} has a market cap of ${abbreviateNumber(
data?.getStockQuote?.marketCap
)} as of ${new Date()?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}. Its market cap has {changePercentageYearAgo > 0
})}. Its market cap has ${changePercentageYearAgo > 0
? "increased"
: changePercentageYearAgo < 0
? "decreased"
: "unchanged"} by {abbreviateNumber(
: "unchanged"} by ${abbreviateNumber(
changePercentageYearAgo?.toFixed(2),
)}% in one year.
</div>
)}% in one year.`}
/>
<div
class="mb-4 mt-5 flex flex-col divide-y divide-gray-600 rounded-md border border-gray-600 sm:grid sm:grid-cols-3 sm:divide-x sm:divide-y-0"