update chart

src/lib/components/FinancialChart.svelte

@@ -9,6 +9,7 @@
   export let filterRule = "annual";
   export let statementConfig;
   export let processedData = null; // Accept pre-processed data
+  export let color = "#fff";
 
   let config = null;
   let isLoaded = false;
@@ -102,8 +103,10 @@
         {
           name: labelName,
           data: valueList,
-          color: "#fff",
+          color: color,
+          borderColor: color,
           borderRadius: "1px",
+          animation: false,
         },
       ],
     };
@@ -121,7 +124,7 @@
 
     try {
       // Add a small delay to ensure the loading state is visible
-      await new Promise((resolve) => setTimeout(resolve, 300));
+      await new Promise((resolve) => setTimeout(resolve, 100));
 
       const { xList, valueList, labelName } = processedData[displayStatement];
       return getChartOptions(xList, valueList, labelName);
@@ -159,7 +162,7 @@
     <span class="loading loading-bars loading-sm"></span>
   </div>
 {:else}
-  <Lazy fadeOption={{ delay: 50, duration: 100 }} keep={true}>
+  <Lazy fadeOption={{ delay: 50, duration: 50 }} keep={true}>
     <div
       class="border border-gray-800 rounded w-full"
       use:highcharts={config}

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

@@ -45,7 +45,7 @@
   }
 </script>
 
-<section class="w-full overflow-hidden min-h-screen">
+<section class="w-full overflow-hidden">
   <div class="w-full overflow-hidden m-auto">
     <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
       <div

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

@@ -5,7 +5,7 @@ import { loginUserSchema, registerUserSchema } from "$lib/schemas";
 
 
 export const load = async ({ locals, params }) => {
-  const getIncomeStatement = async () => {
+  const getData = async () => {
     const { apiKey, apiURL } = locals;
     const postData = {
       ticker: params.tickerID,
@@ -28,7 +28,7 @@ export const load = async ({ locals, params }) => {
 
   // Make sure to return a promise
   return {
-    getIncomeStatement: await getIncomeStatement(),
+    getData: await getData(),
   };
 };
 

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

@@ -20,7 +20,7 @@
   let tableList = [];
   let processedData = {};
 
-  let income = [];
+  let financialData = [];
   let fullStatement = [];
   let filterRule = "annual";
   let displayStatement = "revenue";
@@ -192,7 +192,7 @@
     }
   };
 
-  fullStatement = data?.getIncomeStatement;
+  fullStatement = data?.getData;
   displayStatement = "revenue";
 
   const exportFundamentalData = (format = "csv") => {
@@ -263,8 +263,8 @@
 
     // Precompute xList from income (reverse order)
     const xList = [];
-    for (let i = income.length - 1; i >= 0; i--) {
+    for (let i = financialData.length - 1; i >= 0; i--) {
-      const statement = income[i];
+      const statement = financialData[i];
       const year = statement.calendarYear.slice(-2);
       const quarter = statement.period;
       xList.push(
@@ -279,9 +279,9 @@
       if (!config) return;
 
       const valueList = [];
-      // Loop through income in reverse to match xList order
+      // Loop through financialData in reverse to match xList order
-      for (let i = income.length - 1; i >= 0; i--) {
+      for (let i = financialData.length - 1; i >= 0; i--) {
-        const statement = income[i];
+        const statement = financialData[i];
         const rawValue = Number(statement[config.propertyName]);
         // Round to two decimals
         const value = parseFloat(rawValue.toFixed(2));
@@ -296,7 +296,7 @@
     });
 
     // Build tableList once for all charts and sort by date (newest first)
-    tableList = income.map((statement) => ({
+    tableList = financialData.map((statement) => ({
       date: statement.date,
       // Add more properties if needed
     }));
@@ -308,19 +308,19 @@
     if ($timeFrame || activeIdx) {
       if (activeIdx === 0) {
         filterRule = "annual";
-        fullStatement = data?.getIncomeStatement?.annual;
+        fullStatement = data?.getData?.annual;
       } else {
         filterRule = "quarterly";
-        fullStatement = data?.getIncomeStatement?.quarter;
+        fullStatement = data?.getData?.quarter;
       }
-      income = filterStatement(fullStatement, $timeFrame);
+      financialData = filterStatement(fullStatement, $timeFrame);
       preprocessFinancialData();
     }
   }
 </script>
 
 <SEO
-  title={`${$displayCompanyName} (${$stockTicker}) Financials - Income Statement · Stocknear`}
+  title={`${$displayCompanyName} (${$stockTicker}) Financials - Income Statement`}
   description={`Detailed annual and timeFramely income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
 />
 
@@ -390,7 +390,7 @@
             </div>
 
             <div class="grid grid-cols-1 gap-2">
-              {#if income?.length > 0}
+              {#if financialData?.length > 0}
                 <div
                   class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
                 >
@@ -497,11 +497,14 @@
                   <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
                     {#each fields as item, i}
                       <FinancialChart
-                        data={income}
+                        data={financialData}
                         {statementConfig}
                         displayStatement={item?.key}
                         {filterRule}
                         {processedData}
+                        color={["#e5009d", "#9203e8", "#ff0831", "#6100ff"][
+                          i % 4
+                        ]}
                       />
                     {/each}
                   </div>
@@ -518,7 +521,7 @@
                             class="text-start bg-default text-white text-sm font-semibold pr-10"
                             >Year</td
                           >
-                          {#each income as cash}
+                          {#each financialData as cash}
                             {#if filterRule === "annual"}
                               <td
                                 class="bg-default font-semibold text-sm text-end"
@@ -540,7 +543,7 @@
                       </thead>
                       <tbody>
                         <!-- row -->
-                        <FinancialTable data={income} {fields} />
+                        <FinancialTable data={financialData} {fields} />
                       </tbody>
                     </table>
                   </div>

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

@@ -1,7 +1,7 @@
 import { getCache, setCache } from "$lib/store";
 
 export const load = async ({ locals, params }) => {
-  const getBalanceSheetStatement = async () => {
+  const getData = async () => {
     const { apiKey, apiURL } = locals;
     const postData = {
       ticker: params.tickerID,
@@ -24,6 +24,6 @@ export const load = async ({ locals, params }) => {
 
   // Make sure to return a promise
   return {
-    getBalanceSheetStatement: await getBalanceSheetStatement(),
+    getData: await getData(),
   };
 };

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

@@ -1,36 +1,29 @@
 <script lang="ts">
-  import { Chart } from "svelte-echarts";
   import {
-    coolMode,
-    timeFrame,
     displayCompanyName,
     stockTicker,
+    coolMode,
+    timeFrame,
   } from "$lib/store";
+  import { removeCompanyStrings } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
-  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
-  import { goto } from "$app/navigation";
   //import * as XLSX from 'xlsx';
   import FinancialTable from "$lib/components/FinancialTable.svelte";
-
+  import FinancialChart from "$lib/components/FinancialChart.svelte";
-  import { init, use } from "echarts/core";
+  import { goto } from "$app/navigation";
-  import { LineChart, BarChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-  import Infobox from "$lib/components/Infobox.svelte";
   import SEO from "$lib/components/SEO.svelte";
 
-  use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
   export let data;
 
-  let balanceSheet = [];
+  let isLoaded = true;
-  let fullStatement = [];
   let tableList = [];
-  let filterRule = "annual";
+  let processedData = {};
-  let optionsData;
 
-  let displayStatement = "cashAndCashEquivalents";
+  let financialData = [];
+  let fullStatement = [];
+  let filterRule = "annual";
+  let displayStatement = "revenue";
 
   let activeIdx = 0;
 
@@ -212,140 +205,10 @@
     label: item.label,
     key: item.propertyName,
   }));
-
   function toggleMode() {
     $coolMode = !$coolMode;
   }
 
-  function changeStatement(event) {
-    displayStatement = event.target.value;
-  }
-
-  function normalizer(value) {
-    if (Math?.abs(value) >= 1e18) {
-      return { unit: "Q", denominator: 1e18 };
-    } else if (Math?.abs(value) >= 1e12) {
-      return { unit: "T", denominator: 1e12 };
-    } else if (Math?.abs(value) >= 1e9) {
-      return { unit: "B", denominator: 1e9 };
-    } else if (Math?.abs(value) >= 1e6) {
-      return { unit: "M", denominator: 1e6 };
-    } else if (Math?.abs(value) >= 1e5) {
-      return { unit: "K", denominator: 1e5 };
-    } else {
-      return { unit: "", denominator: 1 };
-    }
-  }
-
-  function plotData() {
-    let labelName = "-";
-    let xList = [];
-    let valueList = [];
-    tableList = [];
-
-    const index = statementConfig?.findIndex(
-      (item) => item?.propertyName === displayStatement,
-    );
-
-    for (let i = balanceSheet?.length - 1; i >= 0; i--) {
-      const statement = balanceSheet[i];
-      const year = statement?.calendarYear?.slice(-2);
-      const quarter = statement?.period;
-
-      // Determine the label based on filterRule
-      if (filterRule === "annual") {
-        xList.push("FY" + year);
-      } else {
-        xList.push("FY" + year + " " + quarter);
-      }
-
-      // Calculate the value and growth
-      const value = Number(
-        statement[statementConfig[index]?.propertyName],
-      )?.toFixed(2);
-
-      valueList.push(value);
-
-      // Add the entry to tableList
-      tableList.push({
-        date: statement?.date,
-        value: value,
-      });
-    }
-
-    //sort tableList by date
-    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-
-    labelName = statementConfig[index]?.label;
-
-    const { unit, denominator } = normalizer(Math.max(...valueList) ?? 0);
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "0%",
-        right: "0%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-        },
-        data: xList,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
-        },
-      ],
-      series: [
-        {
-          name: labelName,
-          data: valueList,
-          type: "bar",
-          smooth: true,
-          itemStyle: {
-            color: "#fff",
-          },
-        },
-      ],
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          const date = params[0].name; // Get the date from the x-axis value
-          // Return the tooltip content
-          return `${date}<br/> ${
-            statementConfig?.find(
-              (item) => item?.propertyName === displayStatement,
-            )?.label
-          }: ${abbreviateNumber(params[0].value)}`;
-        },
-      },
-    };
-
-    return options;
-  }
-
-  fullStatement = data?.getBalanceSheetStatement;
-  displayStatement = "cashAndCashEquivalents";
-
   const getCurrentYear = () => new Date()?.getFullYear();
 
   const filterStatement = (fullStatement, timeFrame) => {
@@ -365,6 +228,9 @@
     }
   };
 
+  fullStatement = data?.getData;
+  displayStatement = "revenue";
+
   const exportFundamentalData = (format = "csv") => {
     if (data?.user?.tier === "Pro") {
       const data = fullStatement;
@@ -408,101 +274,109 @@
         a.href = url;
         a.download =
           $stockTicker.toLowerCase() +
-          `${filterRule === "annual" ? "_annual" : "_quarter"}_cashflow_statement.csv`;
+          `${filterRule === "annual" ? "_annual" : "_quarter"}_balance_sheet_statement.csv`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
-      } /*else if (format.toLowerCase() === "excel") {
-      const worksheet = XLSX.utils.aoa_to_sheet(rows);
-      const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, "Ratios Statement");
-      XLSX.writeFile(
-        workbook,
-        `${$stockTicker.toLowerCase()}-ratios-statement.xlsx`,
-      );
-      
       }
-      */
     } else {
       goto("/pricing");
     }
   };
 
+  // Pre-process all data once instead of in each component
+  function preprocessFinancialData() {
+    processedData = {};
+
+    // Precompute mapping from propertyName to config for quick lookup
+    const configMap = {};
+    statementConfig.forEach((item) => {
+      if (item && item.propertyName) {
+        configMap[item.propertyName] = item;
+      }
+    });
+
+    const xList = [];
+    for (let i = financialData.length - 1; i >= 0; i--) {
+      const statement = financialData[i];
+      const year = statement.calendarYear.slice(-2);
+      const quarter = statement.period;
+      xList.push(
+        filterRule === "annual" ? "FY" + year : "FY" + year + " " + quarter,
+      );
+    }
+
+    // Process each field using precomputed config and xList
+    fields.forEach((field) => {
+      const statementKey = field.key;
+      const config = configMap[statementKey];
+      if (!config) return;
+
+      const valueList = [];
+      // Loop through financialData in reverse to match xList order
+      for (let i = financialData.length - 1; i >= 0; i--) {
+        const statement = financialData[i];
+        const rawValue = Number(statement[config.propertyName]);
+        // Round to two decimals
+        const value = parseFloat(rawValue.toFixed(2));
+        valueList.push(value);
+      }
+
+      processedData[statementKey] = {
+        xList, // re-use the precomputed labels
+        valueList,
+        labelName: config.label,
+      };
+    });
+
+    // Build tableList once for all charts and sort by date (newest first)
+    tableList = financialData.map((statement) => ({
+      date: statement.date,
+      // Add more properties if needed
+    }));
+
+    tableList.sort((a, b) => new Date(b.date) - new Date(a.date));
+  }
+
   $: {
-    if ($timeFrame || displayStatement || activeIdx) {
+    if ($timeFrame || activeIdx) {
       if (activeIdx === 0) {
         filterRule = "annual";
-        fullStatement = data?.getBalanceSheetStatement?.annual;
+        fullStatement = data?.getData?.annual;
       } else {
         filterRule = "quarterly";
-        fullStatement = data?.getBalanceSheetStatement?.quarter;
+        fullStatement = data?.getData?.quarter;
       }
-      balanceSheet = filterStatement(fullStatement, $timeFrame);
+      financialData = filterStatement(fullStatement, $timeFrame);
-
+      preprocessFinancialData();
-      if ($coolMode === true) {
-        optionsData = plotData();
-      }
-    }
-  }
-
-  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>
 
 <SEO
-  title={`${$displayCompanyName} (${$stockTicker}) Balance Sheet · Stocknear`}
+  title={`${$displayCompanyName} (${$stockTicker}) Balance Sheet`}
   description={`Detailed balance sheet for ${$displayCompanyName} (${$stockTicker}), including cash, debt, assets, liabilities, and book value.`}
 />
 
-<section class="bg-default overflow-hidden text-white h-full w-full">
+<section class="bg-default w-full overflow-hidden text-white h-full">
   <div
-    class="flex justify-center w-full m-auto h-full overflow-hidden mt-4 sm:mt-0"
+    class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
   >
     <div
-      class="relative flex justify-center items-center overflow-hidden w-full"
+      class="w-full relative flex justify-center items-center overflow-hidden"
     >
+      {#if isLoaded}
         <main class="w-full">
           <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
-          <div class="mb-3">
-            <h1 class="text-xl sm:text-2xl text-white font-bold">
-              {removeCompanyStrings($displayCompanyName)} Balance Sheet
-            </h1>
-          </div>
-
-          <div class="grid grid-cols-1 gap-2">
-            {#if balanceSheet?.length > 0}
             <div
-                class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
+              class="mb-3 flex flex-col sm:flex-row items-center justify-between"
             >
+              <h1 class="text-xl sm:text-2xl text-white font-bold">
+                {removeCompanyStrings($displayCompanyName)} Income Statement
+              </h1>
               <div
-                  class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                class="mt-3 sm:mt-0 mb-2 sm:mb-0 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}
                   {#if data?.user?.tier !== "Pro" && i > 0}
@@ -550,8 +424,10 @@
               </div>
             </div>
 
+            <div class="grid grid-cols-1 gap-2">
+              {#if financialData?.length > 0}
                 <div
-                class="mb-6 sm:mb-3 flex flex-row items-center w-full justify-end sm:justify-center mt-3 sm:mt-0"
+                  class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
                 >
                   <label
                     class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
@@ -568,11 +444,11 @@
                     ></div>
                     {#if $coolMode}
                       <span class="ml-2 text-sm font-medium text-white">
-                      Cool Mode
+                        Chart Mode
                       </span>
                     {:else}
                       <span class="ml-2 text-sm font-medium text-white">
-                      Boring Mode
+                        Table Mode
                       </span>
                     {/if}
                   </label>
@@ -585,7 +461,8 @@
                             builders={[builder]}
                             class="w-full border-gray-600 border bg-default 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">{$timeFrame}</span>
+                            <span class="truncate text-white">{$timeFrame}</span
+                            >
                             <svg
                               class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                               viewBox="0 0 20 20"
@@ -652,188 +529,26 @@
                 </div>
 
                 {#if $coolMode}
-                <div class="sm:w-full">
+                  <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
-                  <div class="relative">
+                    {#each fields as item, i}
-                    <select
+                      <FinancialChart
-                      class="w-40 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
+                        data={financialData}
-                      on:change={changeStatement}
+                        {statementConfig}
-                    >
+                        displayStatement={item?.key}
-                      <option disabled>Choose an Income Variable</option>
+                        {filterRule}
-                      <option value="cashAndCashEquivalents" selected
+                        {processedData}
-                        >Cash & Equivalents</option
+                        color={["#e5009d", "#9203e8", "#ff0831", "#6100ff"][
-                      >
+                          i % 4
-                      <option value="shortTermInvestments"
+                        ]}
-                        >Short-Term Investments</option
+                      />
-                      >
-                      <option value="longTermInvestments"
-                        >Long-Term Investments</option
-                      >
-                      <option value="otherNonCurrentAssets"
-                        >Other Long-Term Assets</option
-                      >
-                      <option value="netReceivables">Receivables</option>
-                      <option value="inventory">Inventory</option>
-                      <option value="otherCurrentAssets"
-                        >Other Current Assets</option
-                      >
-                      <option value="totalCurrentAssets"
-                        >Total Current Assets</option
-                      >
-                      <option value="propertyPlantEquipmentNet"
-                        >Property, Plant & Equipment</option
-                      >
-                      <option value="goodwillAndIntangibleAssets"
-                        >Goodwill & Intangibles</option
-                      >
-                      <option value="totalNonCurrentAssets"
-                        >Total Long-Term Assets</option
-                      >
-                      <option value="totalAssets">Total Assets</option>
-                      <option value="accountPayables">Account Payables</option>
-                      <option value="deferredRevenue">Deferred Revenue</option>
-                      <option value="shortTermDebt">Short-Term Debt</option>
-                      <option value="otherCurrentLiabilities"
-                        >Other Current Liabilities</option
-                      >
-                      <option value="totalCurrentLiabilities"
-                        >Total Current Liabilities</option
-                      >
-                      <option value="longTermDebt">Long-Term Debt</option>
-                      <option value="otherNonCurrentLiabilities"
-                        >Other Long-Term Liabilities</option
-                      >
-                      <option value="totalNonCurrentLiabilities"
-                        >Total Long-Term Liabilities</option
-                      >
-                      <option value="totalLiabilities">Total Liabilities</option
-                      >
-                      <option value="totalDebt">Total Debt</option>
-                      <option value="commonStock">Common Stock</option>
-                      <option value="retainedEarnings">Retained Earnigns</option
-                      >
-                      <option value="accumulatedOtherComprehensiveIncomeLoss"
-                        >Comprehensive Income</option
-                      >
-                      <option value="totalStockholdersEquity"
-                        >Shareholders' Equity</option
-                      >
-                      <option value="totalInvestments">Total Investments</option
-                      >
-                    </select>
-                  </div>
-                </div>
-
-                <div class="app w-full">
-                  <Chart {init} options={optionsData} class="chart" />
-                </div>
-
-                <h2 class="mt-5 text-2xl text-gray-200 font-semibold">
-                  {statementConfig?.find(
-                    (item) => item?.propertyName === displayStatement,
-                  )?.label} History
-                </h2>
-
-                <div class="w-full overflow-x-scroll">
-                  <table
-                    class="table table-sm table-compact bg-table border border-gray-800 rounded-md w-full m-auto mt-4"
-                  >
-                    <thead class="bg-default">
-                      <tr>
-                        <th
-                          class="text-white font-semibold text-start text-sm sm:text-[1rem]"
-                          >{filterRule === "annual"
-                            ? "Fiscal Year End"
-                            : "Quarter Ends"}</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >{statementConfig?.find(
-                            (item) => item?.propertyName === displayStatement,
-                          )?.label}</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >Change</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >Growth</th
-                        >
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {#each tableList as item, index}
-                        <!-- row -->
-                        <tr class="odd:bg-odd border-b border-gray-800">
-                          <td
-                            class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
-                          >
-                            {item?.date}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
-                          >
-                            {@html abbreviateNumber(item?.value, false, true)}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                          >
-                            {@html item?.value - tableList[index + 1]?.value !==
-                            0
-                              ? abbreviateNumber(
-                                  (
-                                    item?.value - tableList[index + 1]?.value
-                                  )?.toFixed(2),
-                                  false,
-                                  true,
-                                )
-                              : "n/a"}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                          >
-                            {#if index + 1 - tableList?.length === 0}
-                              n/a
-                            {:else if item?.value === 0 && tableList[index + 1]?.value < 0}
-                              <span class="text-[#FF2F1F]">-100.00%</span>
-                            {:else if item?.value === 0 && tableList[index + 1]?.value > 0}
-                              <span class="text-[#00FC50]">100.00%</span>
-                            {:else if item?.value - tableList[index + 1]?.value > 0}
-                              <span class="text-[#00FC50]">
-                                {(
-                                  ((item?.value - tableList[index + 1]?.value) /
-                                    Math.abs(item?.value)) *
-                                  100
-                                )?.toFixed(2)}%
-                              </span>
-                            {:else if item?.value - tableList[index + 1]?.value < 0}
-                              <span class="text-[#FF2F1F]">
-                                -{(
-                                  Math?.abs(
-                                    (tableList[index + 1]?.value -
-                                      item?.value) /
-                                      Math.abs(item?.value),
-                                  ) * 100
-                                )?.toFixed(2)}%
-                              </span>
-                            {:else}
-                              n/a
-                            {/if}
-                          </td>
-                        </tr>
                     {/each}
-                    </tbody>
-                  </table>
                   </div>
                 {:else}
                   <div
                     class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
                   >
                     <table
-                    class="table table-sm table-compact bg-table border border-gray-800 w-full"
+                      class="table table-sm bg-table border border-gray-800 table-compact w-full"
                     >
                       <thead class="bg-default">
                         <tr class="text-white">
@@ -841,7 +556,7 @@
                             class="text-start bg-default text-white text-sm font-semibold pr-10"
                             >Year</td
                           >
-                        {#each balanceSheet as cash}
+                          {#each financialData as cash}
                             {#if filterRule === "annual"}
                               <td
                                 class="bg-default font-semibold text-sm text-end"
@@ -863,7 +578,7 @@
                       </thead>
                       <tbody>
                         <!-- row -->
-                      <FinancialTable data={balanceSheet} {fields} />
+                        <FinancialTable data={financialData} {fields} />
                       </tbody>
                     </table>
                   </div>
@@ -872,24 +587,18 @@
             </div>
           </div>
         </main>
+      {:else}
+        <div class="w-full flex justify-center items-center h-80">
+          <div class="relative">
+            <label
+              class="bg-secondary rounded-md 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>
+          </div>
+        </div>
+      {/if}
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

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

@@ -1,5 +1,5 @@
 export const load = async ({ locals, params }) => {
-  const getCashFlowStatement = async () => {
+  const getData = async () => {
     const { apiKey, apiURL } = locals;
 
     const postData = {
@@ -23,6 +23,6 @@ export const load = async ({ locals, params }) => {
 
   // Make sure to return a promise
   return {
-    getCashFlowStatement: await getCashFlowStatement(),
+    getData: await getData(),
   };
 };

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

@@ -1,36 +1,28 @@
 <script lang="ts">
   import {
     displayCompanyName,
+    stockTicker,
     coolMode,
     timeFrame,
-    stockTicker,
   } from "$lib/store";
-  import { abbreviateNumber, removeCompanyStrings } from "$lib/utils";
+  import { removeCompanyStrings } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
   //import * as XLSX from 'xlsx';
-  import { Chart } from "svelte-echarts";
-  import { goto } from "$app/navigation";
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
   import FinancialTable from "$lib/components/FinancialTable.svelte";
-  import Infobox from "$lib/components/Infobox.svelte";
+  import FinancialChart from "$lib/components/FinancialChart.svelte";
+  import { goto } from "$app/navigation";
   import SEO from "$lib/components/SEO.svelte";
 
-  use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
   export let data;
 
-  let optionsData;
+  let isLoaded = true;
+  let tableList = [];
+  let processedData = {};
 
-  let cashFlow = [];
+  let financialData = [];
   let fullStatement = [];
   let filterRule = "annual";
-  let displayStatement = "netIncome";
-
-  let tableList = [];
 
   let activeIdx = 0;
 
@@ -42,6 +34,7 @@
       title: "Quarterly",
     },
   ];
+
   const statementConfig = [
     {
       propertyName: "netIncome",
@@ -175,123 +168,10 @@
     label: item.label,
     key: item.propertyName,
   }));
-
   function toggleMode() {
     $coolMode = !$coolMode;
   }
 
-  function changeStatement(event) {
-    displayStatement = event.target.value;
-  }
-
-  function plotData() {
-    let labelName = "-";
-    let xList = [];
-    let valueList = [];
-    tableList = [];
-
-    const index = statementConfig?.findIndex(
-      (item) => item?.propertyName === displayStatement,
-    );
-
-    for (let i = cashFlow?.length - 1; i >= 0; i--) {
-      const statement = cashFlow[i];
-      const year = statement?.calendarYear?.slice(-2);
-      const quarter = statement?.period;
-
-      // Determine the label based on filterRule
-      if (filterRule === "annual") {
-        xList.push("FY" + year);
-      } else {
-        xList.push("FY" + year + " " + quarter);
-      }
-
-      // Calculate the value and growth
-      const value = Number(
-        statement[statementConfig[index]?.propertyName],
-      )?.toFixed(2);
-
-      valueList.push(value);
-
-      // Add the entry to tableList
-      tableList.push({
-        date: statement?.date,
-        value: value,
-      });
-    }
-
-    //sort tableList by date
-    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-
-    labelName = statementConfig[index]?.label;
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "0%",
-        right: "0%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-        },
-        data: xList,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
-        },
-      ],
-      series: [
-        {
-          name: labelName,
-          data: valueList,
-          type: "bar",
-          smooth: true,
-          itemStyle: {
-            color: "#fff",
-          },
-        },
-      ],
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          const date = params[0].name; // Get the date from the x-axis value
-          // Return the tooltip content
-          return `${date}<br/> ${
-            statementConfig?.find(
-              (item) => item?.propertyName === displayStatement,
-            )?.label
-          }: ${abbreviateNumber(params[0].value)}`;
-        },
-      },
-    };
-
-    return options;
-  }
-
-  fullStatement = data?.getCashFlowStatement;
-
-  displayStatement = "netIncome";
-
   const getCurrentYear = () => new Date()?.getFullYear();
 
   const filterStatement = (fullStatement, timeFrame) => {
@@ -311,6 +191,8 @@
     }
   };
 
+  fullStatement = data?.getData;
+
   const exportFundamentalData = (format = "csv") => {
     if (data?.user?.tier === "Pro") {
       const data = fullStatement;
@@ -354,102 +236,109 @@
         a.href = url;
         a.download =
           $stockTicker.toLowerCase() +
-          `${filterRule === "annual" ? "_annual" : "_quarter"}_cashflow_statement.csv`;
+          `${filterRule === "annual" ? "_annual" : "_quarter"}_cash_flow_statement.csv`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
-      } /*else if (format.toLowerCase() === "excel") {
-      const worksheet = XLSX.utils.aoa_to_sheet(rows);
-      const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, "Ratios Statement");
-      XLSX.writeFile(
-        workbook,
-        `${$stockTicker.toLowerCase()}-ratios-statement.xlsx`,
-      );
-      
       }
-      */
     } else {
       goto("/pricing");
     }
   };
 
+  // Pre-process all data once instead of in each component
+  function preprocessFinancialData() {
+    processedData = {};
+
+    // Precompute mapping from propertyName to config for quick lookup
+    const configMap = {};
+    statementConfig.forEach((item) => {
+      if (item && item.propertyName) {
+        configMap[item.propertyName] = item;
+      }
+    });
+
+    const xList = [];
+    for (let i = financialData.length - 1; i >= 0; i--) {
+      const statement = financialData[i];
+      const year = statement.calendarYear.slice(-2);
+      const quarter = statement.period;
+      xList.push(
+        filterRule === "annual" ? "FY" + year : "FY" + year + " " + quarter,
+      );
+    }
+
+    // Process each field using precomputed config and xList
+    fields.forEach((field) => {
+      const statementKey = field.key;
+      const config = configMap[statementKey];
+      if (!config) return;
+
+      const valueList = [];
+      // Loop through financialData in reverse to match xList order
+      for (let i = financialData.length - 1; i >= 0; i--) {
+        const statement = financialData[i];
+        const rawValue = Number(statement[config.propertyName]);
+        // Round to two decimals
+        const value = parseFloat(rawValue.toFixed(2));
+        valueList.push(value);
+      }
+
+      processedData[statementKey] = {
+        xList, // re-use the precomputed labels
+        valueList,
+        labelName: config.label,
+      };
+    });
+
+    // Build tableList once for all charts and sort by date (newest first)
+    tableList = financialData.map((statement) => ({
+      date: statement.date,
+      // Add more properties if needed
+    }));
+
+    tableList.sort((a, b) => new Date(b.date) - new Date(a.date));
+  }
+
   $: {
-    if ($timeFrame || displayStatement || activeIdx) {
+    if ($timeFrame || activeIdx) {
       if (activeIdx === 0) {
         filterRule = "annual";
-        fullStatement = data?.getCashFlowStatement?.annual;
+        fullStatement = data?.getData?.annual;
       } else {
         filterRule = "quarterly";
-        fullStatement = data?.getCashFlowStatement?.quarter;
+        fullStatement = data?.getData?.quarter;
       }
-      cashFlow = filterStatement(fullStatement, $timeFrame);
+      financialData = filterStatement(fullStatement, $timeFrame);
-
+      preprocessFinancialData();
-      if ($coolMode === true) {
-        optionsData = plotData();
-      }
-    }
-  }
-
-  function generateStatementInfoHTML() {
-    if ($coolMode) {
-      const statementText = statementConfig?.find(
-        (item) => item?.propertyName === displayStatement,
-      )?.text;
-
-      return `<span>${statementText || ""}</span>`;
-    } else if (cashFlow?.length > 0) {
-      return `
-      <span>
-       Get detailed ratio statement breakdowns, uncovering price to free cash flow ratio, price per earnings, and much more.
-      </span>
-    `;
-    } else {
-      return `
-      <span>
-        No financial data available for ${$displayCompanyName}.
-      </span>
-    `;
-    }
-  }
-
-  let htmlOutput = null;
-  $: {
-    if ($coolMode || displayStatement) {
-      htmlOutput = generateStatementInfoHTML();
     }
   }
 </script>
 
 <SEO
-  title={`${$displayCompanyName} (${$stockTicker}) Cash Flow Statement · Stocknear`}
+  title={`${$displayCompanyName} (${$stockTicker}) Cash Flow Statement`}
   description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`}
 />
 
-<section class="w-full bg-default overflow-hidden text-white h-full">
+<section class="bg-default w-full overflow-hidden text-white h-full">
   <div
-    class="flex justify-center w-full m-auto h-full overflow-hidden mt-4 sm:mt-0"
+    class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
   >
     <div
-      class="relative flex justify-center items-center overflow-hidden w-full"
+      class="w-full relative flex justify-center items-center overflow-hidden"
     >
+      {#if isLoaded}
         <main class="w-full">
-        <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0 w-full">
+          <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
-          <div class="mb-3">
-            <h1 class="text-xl sm:text-2xl text-white font-bold">
-              {removeCompanyStrings($displayCompanyName)} Cash Flow
-            </h1>
-          </div>
-
-          <div class="grid grid-cols-1 gap-2 w-full">
-            <Infobox text={htmlOutput} />
-            {#if cashFlow?.length > 0}
             <div
-                class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
+              class="mb-3 flex flex-col sm:flex-row items-center justify-between"
             >
+              <h1 class="text-xl sm:text-2xl text-white font-bold">
+                {removeCompanyStrings($displayCompanyName)} Income Statement
+              </h1>
               <div
-                  class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                class="mt-3 sm:mt-0 mb-2 sm:mb-0 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}
                   {#if data?.user?.tier !== "Pro" && i > 0}
@@ -497,6 +386,8 @@
               </div>
             </div>
 
+            <div class="grid grid-cols-1 gap-2">
+              {#if financialData?.length > 0}
                 <div
                   class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
                 >
@@ -515,11 +406,11 @@
                     ></div>
                     {#if $coolMode}
                       <span class="ml-2 text-sm font-medium text-white">
-                      Cool Mode
+                        Chart Mode
                       </span>
                     {:else}
                       <span class="ml-2 text-sm font-medium text-white">
-                      Boring Mode
+                        Table Mode
                       </span>
                     {/if}
                   </label>
@@ -532,7 +423,8 @@
                             builders={[builder]}
                             class="w-full border-gray-600 border bg-default 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">{$timeFrame}</span>
+                            <span class="truncate text-white">{$timeFrame}</span
+                            >
                             <svg
                               class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                               viewBox="0 0 20 20"
@@ -599,189 +491,43 @@
                 </div>
 
                 {#if $coolMode}
-                <div class="sm:w-full">
+                  <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
-                  <div class="relative">
+                    {#each fields as item, i}
-                    <select
+                      <FinancialChart
-                      class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
+                        data={financialData}
-                      on:change={changeStatement}
+                        {statementConfig}
-                    >
+                        displayStatement={item?.key}
-                      <option disabled>Choose an Cash Flow Variable</option>
+                        {filterRule}
-                      <option value="netIncome" selected>Net Income</option>
+                        {processedData}
-                      <option value="depreciationAndAmortization"
+                        color={["#e5009d", "#9203e8", "#ff0831", "#6100ff"][
-                        >Depreciation & Amortization</option
+                          i % 4
-                      >
+                        ]}
-                      <option value="stockBasedCompensation"
+                      />
-                        >Stock-Based Compensation</option
-                      >
-                      <option value="otherWorkingCapital"
-                        >Other Working Capital</option
-                      >
-                      <option value="otherNonCashItems"
-                        >Other Non-Cash Items</option
-                      >
-                      <option value="deferredIncomeTax"
-                        >Deferred Income Tax</option
-                      >
-                      <option value="changeInWorkingCapital"
-                        >Change in Working Capital</option
-                      >
-                      <option value="netCashProvidedByOperatingActivities"
-                        >Operating Cash Flow</option
-                      >
-                      <option value="capitalExpenditure"
-                        >Capital Expenditures</option
-                      >
-                      <option value="acquisitionsNet">Acquisitions</option>
-                      <option value="purchasesOfInvestments"
-                        >Purchase of Investments</option
-                      >
-                      <option value="salesMaturitiesOfInvestments"
-                        >Sales Maturities Of Investments</option
-                      >
-                      <option value="otherInvestingActivites"
-                        >Other Investing Acitivies</option
-                      >
-                      <option value="netCashUsedForInvestingActivites"
-                        >Investing Cash Flow</option
-                      >
-                      <option value="debtRepayment">Debt Repayment</option>
-                      <option value="commonStockRepurchased"
-                        >Common Stock Repurchased</option
-                      >
-                      <option value="dividendsPaid">Dividend Paid</option>
-                      <option value="otherFinancingActivites"
-                        >Other Financial Acitivies</option
-                      >
-                      <option value="netCashUsedProvidedByFinancingActivities"
-                        >Financial Cash Flow</option
-                      >
-                      <option value="netChangeInCash">Net Cash Flow</option>
-                      <option value="freeCashFlow">Free Cash Flow</option>
-                    </select>
-                  </div>
-                </div>
-
-                <div class="app w-full">
-                  <Chart {init} options={optionsData} class="chart" />
-                </div>
-
-                <div class="w-full overflow-x-scroll">
-                  <table
-                    class="table table-sm table-compact bg-table border border-gray-800 rounded-md w-full m-auto mt-4"
-                  >
-                    <thead class="bg-default">
-                      <tr class="border-b border-gray-800">
-                        <th
-                          class="text-white font-semibold text-start text-sm sm:text-[1rem]"
-                          >{filterRule === "annual"
-                            ? "Fiscal Year End"
-                            : "Quarter Ends"}</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >{statementConfig?.find(
-                            (item) => item?.propertyName === displayStatement,
-                          )?.label}</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >Change</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >Growth</th
-                        >
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {#each tableList as item, index}
-                        <!-- row -->
-                        <tr class="odd:bg-odd border-b border-gray-800">
-                          <td
-                            class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
-                          >
-                            {item?.date}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
-                          >
-                            {@html abbreviateNumber(item?.value, false, true)}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                          >
-                            {@html item?.value - tableList[index + 1]?.value !==
-                            0
-                              ? abbreviateNumber(
-                                  (
-                                    item?.value - tableList[index + 1]?.value
-                                  )?.toFixed(2),
-                                  false,
-                                  true,
-                                )
-                              : "n/a"}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                          >
-                            {#if index + 1 - tableList?.length === 0}
-                              n/a
-                            {:else if item?.value === 0 && tableList[index + 1]?.value < 0}
-                              <span class="text-[#FF2F1F]">-100.00%</span>
-                            {:else if item?.value === 0 && tableList[index + 1]?.value > 0}
-                              <span class="text-[#00FC50]">100.00%</span>
-                            {:else if item?.value - tableList[index + 1]?.value > 0}
-                              <span class="text-[#00FC50]">
-                                {(
-                                  ((item?.value - tableList[index + 1]?.value) /
-                                    Math.abs(item?.value)) *
-                                  100
-                                )?.toFixed(2)}%
-                              </span>
-                            {:else if item?.value - tableList[index + 1]?.value < 0}
-                              <span class="text-[#FF2F1F]">
-                                -{(
-                                  Math?.abs(
-                                    (tableList[index + 1]?.value -
-                                      item?.value) /
-                                      Math.abs(item?.value),
-                                  ) * 100
-                                )?.toFixed(2)}%
-                              </span>
-                            {:else}
-                              n/a
-                            {/if}
-                          </td>
-                        </tr>
                     {/each}
-                    </tbody>
-                  </table>
                   </div>
                 {:else}
                   <div
                     class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
                   >
                     <table
-                    class="table table-sm table-compact bg-table border border-gray-800 w-full"
+                      class="table table-sm bg-table border border-gray-800 table-compact w-full"
                     >
                       <thead class="bg-default">
                         <tr class="text-white">
-                        <td class="text-start text-white text-sm font-semibold"
+                          <td
+                            class="text-start bg-default text-white text-sm font-semibold pr-10"
                             >Year</td
                           >
-                        {#each cashFlow as cash}
+                          {#each financialData as cash}
                             {#if filterRule === "annual"}
                               <td
-                              class="bg-default font-semibold text-end text-sm"
+                                class="bg-default font-semibold text-sm text-end"
                               >
                                 {"FY" + cash?.calendarYear?.slice(-2)}
                               </td>
                             {:else}
                               <td
-                              class="bg-default font-semibold text-end text-sm"
+                                class="bg-default font-semibold text-sm text-end"
                               >
                                 {"FY" +
                                   cash?.calendarYear?.slice(-2) +
@@ -794,7 +540,7 @@
                       </thead>
                       <tbody>
                         <!-- row -->
-                      <FinancialTable data={cashFlow} {fields} />
+                        <FinancialTable data={financialData} {fields} />
                       </tbody>
                     </table>
                   </div>
@@ -803,24 +549,18 @@
             </div>
           </div>
         </main>
+      {:else}
+        <div class="w-full flex justify-center items-center h-80">
+          <div class="relative">
+            <label
+              class="bg-secondary rounded-md 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>
+          </div>
+        </div>
+      {/if}
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

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

@@ -1,5 +1,5 @@
 export const load = async ({ locals, params }) => {
-  const getRatiosStatement = async () => {
+  const getData = async () => {
     const { apiKey, apiURL } = locals;
 
     const postData = {
@@ -23,6 +23,6 @@ export const load = async ({ locals, params }) => {
 
   // Make sure to return a promise
   return {
-    getRatiosStatement: await getRatiosStatement(),
+    getData: await getData(),
   };
 };

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

@@ -1,36 +1,28 @@
 <script lang="ts">
-  import { Chart } from "svelte-echarts";
   import {
     displayCompanyName,
     stockTicker,
     coolMode,
     timeFrame,
   } from "$lib/store";
-  import { abbreviateNumber } from "$lib/utils";
+  import { removeCompanyStrings } from "$lib/utils";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
   import { Button } from "$lib/components/shadcn/button/index.js";
   //import * as XLSX from 'xlsx';
-  import { goto } from "$app/navigation";
-  import { init, use } from "echarts/core";
-  import { LineChart, BarChart } from "echarts/charts";
-  import { GridComponent, TooltipComponent } from "echarts/components";
-  import { CanvasRenderer } from "echarts/renderers";
-  import Infobox from "$lib/components/Infobox.svelte";
   import FinancialTable from "$lib/components/FinancialTable.svelte";
+  import FinancialChart from "$lib/components/FinancialChart.svelte";
+  import { goto } from "$app/navigation";
   import SEO from "$lib/components/SEO.svelte";
 
-  use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
-
   export let data;
 
-  let ratios = [];
+  let isLoaded = true;
-  let fullStatement = [];
   let tableList = [];
+  let processedData = {};
 
+  let financialData = [];
+  let fullStatement = [];
   let filterRule = "annual";
-  let optionsData;
-
-  let displayStatement = "priceEarningsRatio";
 
   let activeIdx = 0;
 
@@ -42,6 +34,7 @@
       title: "Quarterly",
     },
   ];
+
   const statementConfig = [
     {
       propertyName: "priceEarningsRatio",
@@ -164,118 +157,30 @@
     label: item.label,
     key: item.propertyName,
   }));
-
   function toggleMode() {
     $coolMode = !$coolMode;
   }
 
-  function changeStatement(event) {
+  const getCurrentYear = () => new Date()?.getFullYear();
-    displayStatement = event.target.value;
-  }
 
-  function plotData() {
+  const filterStatement = (fullStatement, timeFrame) => {
-    let labelName = "-";
+    const currentYear = getCurrentYear();
-    let xList = [];
-    let valueList = [];
-    tableList = [];
 
-    const index = statementConfig?.findIndex(
+    switch (timeFrame) {
-      (item) => item?.propertyName === displayStatement,
+      case "5Y":
+        return fullStatement?.filter(
+          (item) => currentYear - parseInt(item?.calendarYear) < 5,
         );
-
+      case "10Y":
-    for (let i = ratios?.length - 1; i >= 0; i--) {
+        return fullStatement?.filter(
-      const statement = ratios[i];
+          (item) => currentYear - parseInt(item?.calendarYear) < 10,
-      const year = statement?.calendarYear?.slice(-2);
+        );
-      const quarter = statement?.period;
+      default:
-
+        return fullStatement;
-      // Determine the label based on filterRule
-      if (filterRule === "annual") {
-        xList.push("FY" + year);
-      } else {
-        xList.push("FY" + year + " " + quarter);
     }
-
-      // Calculate the value and growth
-      const value = Number(
-        statement[statementConfig[index]?.propertyName],
-      )?.toFixed(2);
-
-      valueList.push(value);
-
-      // Add the entry to tableList
-      tableList.push({
-        date: statement?.date,
-        value: value,
-      });
-    }
-
-    //sort tableList by date
-    tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-
-    labelName = statementConfig[index]?.label;
-
-    const options = {
-      animation: false,
-      grid: {
-        left: "0%",
-        right: "0%",
-        bottom: "2%",
-        top: "10%",
-        containLabel: true,
-      },
-      xAxis: {
-        axisLabel: {
-          color: "#fff",
-        },
-        data: xList,
-        type: "category",
-      },
-      yAxis: [
-        {
-          type: "value",
-          splitLine: {
-            show: false, // Disable x-axis grid lines
-          },
-
-          axisLabel: {
-            show: false, // Hide y-axis labels
-          },
-        },
-      ],
-      series: [
-        {
-          name: labelName,
-          data: valueList,
-          type: "bar",
-          smooth: true,
-          itemStyle: {
-            color: "#fff",
-          },
-        },
-      ],
-      tooltip: {
-        trigger: "axis",
-        hideDelay: 100,
-        borderColor: "#969696", // Black border color
-        borderWidth: 1, // Border width of 1px
-        backgroundColor: "#313131", // Optional: Set background color for contrast
-        textStyle: {
-          color: "#fff", // Optional: Text color for better visibility
-        },
-        formatter: function (params) {
-          const date = params[0].name; // Get the date from the x-axis value
-          // Return the tooltip content
-          return `${date}<br/> ${
-            statementConfig?.find(
-              (item) => item?.propertyName === displayStatement,
-            )?.label
-          }: ${abbreviateNumber(params[0].value)}`;
-        },
-      },
   };
 
-    return options;
+  fullStatement = data?.getData;
-  }
 
   const exportFundamentalData = (format = "csv") => {
     if (data?.user?.tier === "Pro") {
@@ -320,130 +225,109 @@
         a.href = url;
         a.download =
           $stockTicker.toLowerCase() +
-          `${filterRule === "annual" ? "_annual" : "_quarter"}_balance_sheet_statement.csv`;
+          `${filterRule === "annual" ? "_annual" : "_quarter"}_cash_flow_statement.csv`;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
-      } /*else if (format.toLowerCase() === "excel") {
-      const worksheet = XLSX.utils.aoa_to_sheet(rows);
-      const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, "Ratios Statement");
-      XLSX.writeFile(
-        workbook,
-        `${$stockTicker.toLowerCase()}-ratios-statement.xlsx`,
-      );
-      
       }
-      */
     } else {
       goto("/pricing");
     }
   };
 
-  fullStatement = data?.getRatiosStatement;
+  // Pre-process all data once instead of in each component
-  displayStatement = "priceEarningsRatio";
+  function preprocessFinancialData() {
+    processedData = {};
 
-  const getCurrentYear = () => new Date()?.getFullYear();
+    // Precompute mapping from propertyName to config for quick lookup
-
+    const configMap = {};
-  const filterStatement = (fullStatement, timeFrame) => {
+    statementConfig.forEach((item) => {
-    const currentYear = getCurrentYear();
+      if (item && item.propertyName) {
-
+        configMap[item.propertyName] = item;
-    switch (timeFrame) {
-      case "5Y":
-        return fullStatement?.filter(
-          (item) => currentYear - parseInt(item?.calendarYear) < 5,
-        );
-      case "10Y":
-        return fullStatement?.filter(
-          (item) => currentYear - parseInt(item?.calendarYear) < 10,
-        );
-      default:
-        return fullStatement;
       }
+    });
+
+    const xList = [];
+    for (let i = financialData.length - 1; i >= 0; i--) {
+      const statement = financialData[i];
+      const year = statement.calendarYear.slice(-2);
+      const quarter = statement.period;
+      xList.push(
+        filterRule === "annual" ? "FY" + year : "FY" + year + " " + quarter,
+      );
+    }
+
+    // Process each field using precomputed config and xList
+    fields.forEach((field) => {
+      const statementKey = field.key;
+      const config = configMap[statementKey];
+      if (!config) return;
+
+      const valueList = [];
+      // Loop through financialData in reverse to match xList order
+      for (let i = financialData.length - 1; i >= 0; i--) {
+        const statement = financialData[i];
+        const rawValue = Number(statement[config.propertyName]);
+        // Round to two decimals
+        const value = parseFloat(rawValue.toFixed(2));
+        valueList.push(value);
+      }
+
+      processedData[statementKey] = {
+        xList, // re-use the precomputed labels
+        valueList,
+        labelName: config.label,
       };
+    });
+
+    // Build tableList once for all charts and sort by date (newest first)
+    tableList = financialData.map((statement) => ({
+      date: statement.date,
+      // Add more properties if needed
+    }));
+
+    tableList.sort((a, b) => new Date(b.date) - new Date(a.date));
+  }
 
   $: {
-    if ($timeFrame || displayStatement || activeIdx) {
+    if ($timeFrame || activeIdx) {
       if (activeIdx === 0) {
         filterRule = "annual";
-        fullStatement = data?.getRatiosStatement?.annual;
+        fullStatement = data?.getData?.annual;
       } else {
         filterRule = "quarterly";
-        fullStatement = data?.getRatiosStatement?.quarter;
+        fullStatement = data?.getData?.quarter;
       }
-      ratios = filterStatement(fullStatement, $timeFrame);
+      financialData = filterStatement(fullStatement, $timeFrame);
-
+      preprocessFinancialData();
-      if ($coolMode === true) {
-        optionsData = plotData();
-      }
-    }
-  }
-
-  function generateStatementInfoHTML() {
-    if ($coolMode) {
-      const statementText = statementConfig?.find(
-        (item) => item?.propertyName === displayStatement,
-      )?.text;
-
-      return `<span>${statementText || ""}</span>`;
-    } else if (ratios?.length > 0) {
-      return `
-      <span>
-        Discover comprehensive ratio statement breakdowns that reveal insights into revenue, expenses, and beyond.
-      </span>
-    `;
-    } else {
-      return `
-      <span>
-        No financial data available for ${$displayCompanyName}.
-      </span>
-    `;
-    }
-  }
-
-  let htmlOutput = null;
-  $: {
-    if ($coolMode || displayStatement) {
-      htmlOutput = generateStatementInfoHTML();
     }
   }
 </script>
 
 <SEO
-  title={`${$displayCompanyName} (${$stockTicker}) Financial Ratios and Metrics · Stocknear`}
+  title={`${$displayCompanyName} (${$stockTicker}) Cash Flow Statement`}
-  description={`Financial ratios and metrics for ${$displayCompanyName} (${$stockTicker}). Includes annual, quarterly and trailing numbers with full history and charts.`}
+  description={`Detailed cash flow statements for ${$displayCompanyName} (${$stockTicker}), including operating cash flow, capex and free cash flow.`}
 />
 
-<section class="bg-default overflow-hidden text-white h-full">
+<section class="bg-default w-full overflow-hidden text-white h-full">
   <div
-    class="flex justify-center w-full m-auto h-full overflow-hidden mt-4 sm:mt-0"
+    class="w-full flex justify-center w-full sm-auto h-full overflow-hidden mt-4 sm:mt-0"
   >
     <div
       class="w-full relative flex justify-center items-center overflow-hidden"
     >
+      {#if isLoaded}
         <main class="w-full">
-        <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0 w-full">
+          <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
-          <div class="mb-3">
-            <h1 class="text-xl sm:text-2xl text-white font-bold">
-              {#if $coolMode}
-                {statementConfig?.find(
-                  (item) => item?.propertyName === displayStatement,
-                )?.label}
-              {:else}
-                Ratios {filterRule === "annual" ? "(Annual)" : "(Quarter)"}
-              {/if}
-            </h1>
-          </div>
-
-          <div class="grid grid-cols-1 gap-2">
-            <Infobox text={htmlOutput} />
-            {#if ratios?.length > 0}
             <div
-                class="inline-flex justify-center w-full rounded-md sm:w-auto sm:ml-auto mt-3 mb-6"
+              class="mb-3 flex flex-col sm:flex-row items-center justify-between"
             >
+              <h1 class="text-xl sm:text-2xl text-white font-bold">
+                {removeCompanyStrings($displayCompanyName)} Income Statement
+              </h1>
               <div
-                  class="bg-secondary w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
+                class="mt-3 sm:mt-0 mb-2 sm:mb-0 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}
                   {#if data?.user?.tier !== "Pro" && i > 0}
@@ -491,6 +375,8 @@
               </div>
             </div>
 
+            <div class="grid grid-cols-1 gap-2">
+              {#if financialData?.length > 0}
                 <div
                   class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
                 >
@@ -509,11 +395,11 @@
                     ></div>
                     {#if $coolMode}
                       <span class="ml-2 text-sm font-medium text-white">
-                      Cool Mode
+                        Chart Mode
                       </span>
                     {:else}
                       <span class="ml-2 text-sm font-medium text-white">
-                      Boring Mode
+                        Table Mode
                       </span>
                     {/if}
                   </label>
@@ -526,7 +412,8 @@
                             builders={[builder]}
                             class="w-full border-gray-600 border bg-default 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">{$timeFrame}</span>
+                            <span class="truncate text-white">{$timeFrame}</span
+                            >
                             <svg
                               class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
                               viewBox="0 0 20 20"
@@ -593,189 +480,48 @@
                 </div>
 
                 {#if $coolMode}
-                <div class="sm:w-full">
+                  <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
-                  <div class="relative">
+                    {#each fields as item, i}
-                    <select
+                      <FinancialChart
-                      class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
+                        data={financialData}
-                      on:change={changeStatement}
+                        {statementConfig}
-                    >
+                        displayStatement={item?.key}
-                      <option disabled>Choose a Variable</option>
+                        {filterRule}
-                      <option value="priceEarningsRatio" selected
+                        {processedData}
-                        >PE Ratio</option
+                        color={["#e5009d", "#9203e8", "#ff0831", "#6100ff"][
-                      >
+                          i % 4
-                      <option value="priceEarningsToGrowthRatio" selected
+                        ]}
-                        >PEG Ratio</option
+                      />
-                      >
-                      <option value="priceToSalesRatio">PS Ratio</option>
-                      <option value="priceToBookRatio">PB Ratio</option>
-                      <option value="priceToFreeCashFlowsRatio"
-                        >P/FCF Ratio</option
-                      >
-                      <option value="priceToOperatingCashFlowsRatio"
-                        >P/OCF Ratio</option
-                      >
-                      <option value="operatingCashFlowSalesRatio"
-                        >OCF/S Ratio</option
-                      >
-                      <option value="debtEquityRatio"
-                        >Debt / Equity Ratio</option
-                      >
-                      <option value="quickRatio">Quick Ratio</option>
-                      <option value="currentRatio">Current Ratio</option>
-                      <option value="assetTurnover">Asset Turnover</option>
-                      <option value="interestCoverage">Interest Coverage</option
-                      >
-                      <option value="returnOnEquity"
-                        >Return on Equity (ROE)</option
-                      >
-                      <option value="returnOnAssets"
-                        >Return on Assets (ROA)</option
-                      >
-                      <option value="returnOnCapitalEmployed"
-                        >Return on Capital (ROIC)</option
-                      >
-                      <option value="dividendYield">Dividend Yield</option>
-                      <option value="payoutRatio">Payout Ratio</option>
-                      <option value="grossProfitMargin"
-                        >Gross Profit Margin</option
-                      >
-                      <option value="netProfitMargin">Net Profit Margin</option>
-                      <option value="pretaxProfitMargin"
-                        >Pretax Profit Margin</option
-                      >
-                      <option value="operatingProfitMargin"
-                        >Operating Profit Margin</option
-                      >
-                      <option value="freeCashFlowMargin">FCF Margin</option>
-                      <option value="ebitdaMargin">EBITDA Margin</option>
-                    </select>
-                  </div>
-                </div>
-
-                <div class="app w-full">
-                  <Chart {init} options={optionsData} class="chart" />
-                </div>
-
-                <div class="w-full overflow-x-scroll">
-                  <table
-                    class="table table-sm table-compact bg-table border border-gray-800 rounded-md w-full m-auto mt-4"
-                  >
-                    <thead class="bg-default">
-                      <tr class="border-b border-gray-800">
-                        <th
-                          class="text-white font-semibold text-start text-sm sm:text-[1rem]"
-                          >{filterRule === "annual"
-                            ? "Fiscal Year End"
-                            : "Quarter Ends"}</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >{statementConfig?.find(
-                            (item) => item?.propertyName === displayStatement,
-                          )?.label}</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >Change</th
-                        >
-                        <th
-                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
-                          >Growth</th
-                        >
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {#each tableList as item, index}
-                        <!-- row -->
-                        <tr class="odd:bg-odd border-b border-gray-800">
-                          <td
-                            class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap"
-                          >
-                            {item?.date}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
-                          >
-                            {@html abbreviateNumber(item?.value, false, true)}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                          >
-                            {@html item?.value - tableList[index + 1]?.value !==
-                            0
-                              ? abbreviateNumber(
-                                  (
-                                    item?.value - tableList[index + 1]?.value
-                                  )?.toFixed(2),
-                                  false,
-                                  true,
-                                )
-                              : "n/a"}
-                          </td>
-
-                          <td
-                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end"
-                          >
-                            {#if index + 1 - tableList?.length === 0}
-                              n/a
-                            {:else if item?.value === 0 && tableList[index + 1]?.value < 0}
-                              <span class="text-[#FF2F1F]">-100.00%</span>
-                            {:else if item?.value === 0 && tableList[index + 1]?.value > 0}
-                              <span class="text-[#00FC50]">100.00%</span>
-                            {:else if item?.value - tableList[index + 1]?.value > 0}
-                              <span class="text-[#00FC50]">
-                                {(
-                                  ((item?.value - tableList[index + 1]?.value) /
-                                    Math.abs(item?.value)) *
-                                  100
-                                )?.toFixed(2)}%
-                              </span>
-                            {:else if item?.value - tableList[index + 1]?.value < 0}
-                              <span class="text-[#FF2F1F]">
-                                -{(
-                                  Math?.abs(
-                                    (tableList[index + 1]?.value -
-                                      item?.value) /
-                                      Math.abs(item?.value),
-                                  ) * 100
-                                )?.toFixed(2)}%
-                              </span>
-                            {:else}
-                              n/a
-                            {/if}
-                          </td>
-                        </tr>
                     {/each}
-                    </tbody>
-                  </table>
                   </div>
                 {:else}
                   <div
                     class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
                   >
                     <table
-                    class="table table-sm table-compact bg-table border border-gray-800 w-full"
+                      class="table table-sm bg-table border border-gray-800 table-compact w-full"
                     >
                       <thead class="bg-default">
                         <tr class="text-white">
-                        <td class="text-start text-sm font-semibold">Year</td>
+                          <td
-                        {#each ratios as item}
+                            class="text-start bg-default text-white text-sm font-semibold pr-10"
+                            >Year</td
+                          >
+                          {#each financialData as cash}
                             {#if filterRule === "annual"}
                               <td
-                              class="bg-default font-semibold text-end text-sm"
+                                class="bg-default font-semibold text-sm text-end"
                               >
-                              {"FY" + item?.calendarYear?.slice(-2)}
+                                {"FY" + cash?.calendarYear?.slice(-2)}
                               </td>
                             {:else}
                               <td
-                              class="bg-default font-semibold text-end text-sm"
+                                class="bg-default font-semibold text-sm text-end"
                               >
                                 {"FY" +
-                                item?.calendarYear?.slice(-2) +
+                                  cash?.calendarYear?.slice(-2) +
                                   " " +
-                                item?.period}
+                                  cash?.period}
                               </td>
                             {/if}
                           {/each}
@@ -783,7 +529,7 @@
                       </thead>
                       <tbody>
                         <!-- row -->
-                      <FinancialTable data={ratios} {fields} />
+                        <FinancialTable data={financialData} {fields} />
                       </tbody>
                     </table>
                   </div>
@@ -792,24 +538,18 @@
             </div>
           </div>
         </main>
+      {:else}
+        <div class="w-full flex justify-center items-center h-80">
+          <div class="relative">
+            <label
+              class="bg-secondary rounded-md 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>
+          </div>
+        </div>
+      {/if}
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>