update financial tab

src/lib/components/FinancialTable.svelte

@@ -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,

src/lib/store.ts

@@ -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);
 

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

@@ -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'

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

@@ -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",

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

@@ -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",
+          key: $selectedTimePeriod === "annual" ? "fiscalYear" : "date",
-          label: filterRule === "annual" ? "Year" : "Quarter",
+          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 ($timeFrame || $selectedTimePeriod) {
-      if (activeIdx === 0) {
+      if ($selectedTimePeriod === "annual") {
-        filterRule = "annual";
         fullStatement = data?.getData?.annual;
-      } else {
+      } else if ($selectedTimePeriod === "quarterly") {
-        filterRule = "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"
                             >