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

update financial tab

Browse Source
This commit is contained in:
MuslemRahimi 2025-04-07 13:45:29 +02:00
parent 7fe8bb2911
commit 32d0791690
5 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/components/FinancialTable.svelte
View File

@ -1,6 +1,12 @@
<script lang="ts">
import { abbreviateNumber } from "$lib/utils";
import { screenWidth, stockTicker, getCache, setCache } from "$lib/store";
import {
selectedTimePeriod,
screenWidth,
stockTicker,
getCache,
setCache,
} from "$lib/store";
import { mode } from "mode-watcher";
import highcharts from "$lib/highcharts.ts";
@ -76,7 +82,7 @@
const options = {
chart: {
type: "column",
type: $selectedTimePeriod === "annual" ? "column" : "spline",
backgroundColor: $mode === "light" ? "#fff" : "#2A2E39",
plotBackgroundColor: $mode === "light" ? "#fff" : "#2A2E39",
height: 360,

2
src/lib/store.ts
View File

@ -50,7 +50,7 @@ export const shouldUpdatePriceChart = writable(<boolean>false);
export const selectedTimePeriod = writable(<string>"");
export const coolMode = writable(<boolean>false);
export const timeFrame =writable(<string>"Max");
export const timeFrame =writable(<string>"10Y");
export const closedPWA = writable(<boolean>false);

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

@ -89,7 +89,9 @@
>
<ul class="flex flex-row items-center w-full">
<a
href={`/stocks/${$stockTicker}/financials`}
href={$selectedTimePeriod !== "annual" && $selectedTimePeriod
? `/stocks/${$stockTicker}/financials/?query=${$selectedTimePeriod}`
: `/stocks/${$stockTicker}/financials`}
on:click={() => changeSubSection("income")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'income'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
@ -99,9 +101,9 @@
</a>
<a
href={$selectedTimePeriod
href={$selectedTimePeriod !== "annual" && $selectedTimePeriod
? `/stocks/${$stockTicker}/financials/balance-sheet/?query=${$selectedTimePeriod}`
: "/stocks/${$stockTicker}/financials/balance-sheet"}
: `/stocks/${$stockTicker}/financials/balance-sheet`}
on:click={() => changeSubSection("balance-sheet")}
class="p-2 px-5 cursor-pointer {displaySubSection ===
'balance-sheet'
@ -111,9 +113,9 @@
Balance Sheet
</a>
<a
href={$selectedTimePeriod
href={$selectedTimePeriod !== "annual" && $selectedTimePeriod
? `/stocks/${$stockTicker}/financials/cash-flow/?query=${$selectedTimePeriod}`
: "/stocks/${$stockTicker}/financials/cash-flow"}
: `/stocks/${$stockTicker}/financials/cash-flow`}
on:click={() => changeSubSection("cash-flow")}
class="p-2 px-5 cursor-pointer {displaySubSection ===
'cash-flow'
@ -123,7 +125,9 @@
Cashflow
</a>
<a
href={`/stocks/${$stockTicker}/financials/ratios`}
href={$selectedTimePeriod !== "annual" && $selectedTimePeriod
? `/stocks/${$stockTicker}/financials/ratios/?query=${$selectedTimePeriod}`
: `/stocks/${$stockTicker}/financials/ratios`}
on:click={() => changeSubSection("ratios")}
class="p-2 px-5 cursor-pointer {displaySubSection === 'ratios'
? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'

3
src/routes/stocks/[tickerID]/financials/+page.server.ts
View File

@ -6,13 +6,14 @@ export const load = async ({ locals, params }) => {
const { apiKey, apiURL } = locals;
const postData = {
ticker: params.tickerID,
statement: 'income-statement',
};
const getData = async () => {
// make the POST request to the endpoint
const response = await fetch(apiURL + "/stock-income", {
const response = await fetch(apiURL + "/financial-statement", {
method: "POST",
headers: {
"Content-Type": "application/json",

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

@ -4,6 +4,7 @@
stockTicker,
coolMode,
timeFrame,
selectedTimePeriod,
} from "$lib/store";
import { removeCompanyStrings } from "$lib/utils";
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
@ -21,18 +22,6 @@
let financialData = [];
let fullStatement = [];
let filterRule = "annual";
let activeIdx = 0;
const tabs = [
{
title: "Annual",
},
{
title: "Quarterly",
},
];
const statementConfig = [
{
@ -164,8 +153,8 @@
let properties = [
{
key: filterRule === "annual" ? "fiscalYear" : "date",
label: filterRule === "annual" ? "Year" : "Quarter",
key: $selectedTimePeriod === "annual" ? "fiscalYear" : "date",
label: $selectedTimePeriod === "annual" ? "Year" : "Quarter",
},
];
@ -198,7 +187,7 @@
a.href = url;
a.download =
$stockTicker.toLowerCase() +
`${filterRule === "annual" ? "_annual" : "_quarter"}_income_statement.csv`;
`${$selectedTimePeriod === "annual" ? "_annual" : $selectedTimePeriod === "quarterly" ? "_quarter" : "_ttm"}_income_statement.csv`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
@ -228,7 +217,9 @@
const year = statement.fiscalYear.slice(-2);
const quarter = statement.period;
xList.push(
filterRule === "annual" ? "FY" + year : "FY" + year + " " + quarter,
$selectedTimePeriod === "annual"
? "FY" + year
: "FY" + year + " " + quarter,
);
}
@ -256,7 +247,7 @@
});
// Build tableList once for all charts and sort by date (newest first)
tableList = financialData.map((statement) => ({
tableList = financialData?.map((statement) => ({
date: statement.date,
// Add more properties if needed
}));
@ -265,14 +256,17 @@
}
$: {
if ($timeFrame || activeIdx) {
if (activeIdx === 0) {
filterRule = "annual";
if ($timeFrame || $selectedTimePeriod) {
if ($selectedTimePeriod === "annual") {
fullStatement = data?.getData?.annual;
} else {
filterRule = "quarterly";
} else if ($selectedTimePeriod === "quarterly") {
fullStatement = data?.getData?.quarter;
} else if ($selectedTimePeriod === "ttm") {
fullStatement = data?.getData?.ttm;
} else {
fullStatement = data?.getData?.annual;
}
financialData = filterStatement(fullStatement, $timeFrame);
preprocessFinancialData();
}
@ -281,7 +275,7 @@
<SEO
title={`${$displayCompanyName} (${$stockTicker}) Financials - Income Statement`}
description={`Detailed annual and quarterly income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
description={`Detailed annual, quarterly and trailing income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
/>
<section class=" w-full overflow-hidden h-full">
@ -430,7 +424,7 @@
data={financialData}
{statementConfig}
displayStatement={item?.key}
{filterRule}
filterRule={$selectedTimePeriod}
{processedData}
color={["#ff00cc", "#37ff00", "#0c63e7", "#07c8f9"][
i % 4
@ -451,7 +445,7 @@
>Fiscal Year</td
>
{#each financialData as item}
{#if filterRule === "annual"}
{#if $selectedTimePeriod === "annual"}
<td
class="min-w-[130px] font-semibold text-sm text-end border-l border-gray-300 dark:border-gray-800"
>