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,488 +274,331 @@
         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"
     >
-      <main class="w-full">
+      {#if isLoaded}
-        <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
+        <main class="w-full">
-          <div class="mb-3">
+          <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
-            <h1 class="text-xl sm:text-2xl text-white font-bold">
+            <div
-              {removeCompanyStrings($displayCompanyName)} Balance Sheet
+              class="mb-3 flex flex-col sm:flex-row items-center justify-between"
-            </h1>
+            >
-          </div>
+              <h1 class="text-xl sm:text-2xl text-white font-bold">
-
+                {removeCompanyStrings($displayCompanyName)} Income Statement
-          <div class="grid grid-cols-1 gap-2">
+              </h1>
-            {#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="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"
               >
-                <div
+                {#each tabs as item, i}
-                  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"
+                  {#if data?.user?.tier !== "Pro" && i > 0}
-                >
+                    <button
-                  {#each tabs as item, i}
+                      on:click={() => goto("/pricing")}
-                    {#if data?.user?.tier !== "Pro" && i > 0}
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
-                      <button
+                    >
-                        on:click={() => goto("/pricing")}
+                      <span class="relative text-sm block font-semibold">
-                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                        {item.title}
-                      >
+                        <svg
-                        <span class="relative text-sm block font-semibold">
+                          class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
-                          {item.title}
+                          xmlns="http://www.w3.org/2000/svg"
-                          <svg
+                          viewBox="0 0 24 24"
-                            class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                          ><path
-                            xmlns="http://www.w3.org/2000/svg"
+                            fill="#A3A3A3"
-                            viewBox="0 0 24 24"
+                            d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                            ><path
+                          /></svg
-                              fill="#A3A3A3"
-                              d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                            /></svg
-                          >
-                        </span>
-                      </button>
-                    {:else}
-                      <button
-                        on:click={() => (activeIdx = i)}
-                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
-                        i
-                          ? 'z-0'
-                          : ''} "
-                      >
-                        {#if activeIdx === i}
-                          <div
-                            class="absolute inset-0 rounded-md bg-[#fff]"
-                          ></div>
-                        {/if}
-                        <span
-                          class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
-                          i
-                            ? 'text-black'
-                            : 'text-white'}"
                         >
-                          {item.title}
+                      </span>
-                        </span>
+                    </button>
-                      </button>
-                    {/if}
-                  {/each}
-                </div>
-              </div>
-
-              <div
-                class="mb-6 sm:mb-3 flex flex-row items-center w-full justify-end sm:justify-center mt-3 sm:mt-0"
-              >
-                <label
-                  class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
-                >
-                  <input
-                    on:click={toggleMode}
-                    type="checkbox"
-                    checked={$coolMode}
-                    value={$coolMode}
-                    class="sr-only peer"
-                  />
-                  <div
-                    class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
-                  ></div>
-                  {#if $coolMode}
-                    <span class="ml-2 text-sm font-medium text-white">
-                      Cool Mode
-                    </span>
                   {:else}
-                    <span class="ml-2 text-sm font-medium text-white">
+                    <button
-                      Boring Mode
+                      on:click={() => (activeIdx = i)}
-                    </span>
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                      i
+                        ? 'z-0'
+                        : ''} "
+                    >
+                      {#if activeIdx === i}
+                        <div
+                          class="absolute inset-0 rounded-md bg-[#fff]"
+                        ></div>
+                      {/if}
+                      <span
+                        class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
+                        i
+                          ? 'text-black'
+                          : 'text-white'}"
+                      >
+                        {item.title}
+                      </span>
+                    </button>
                   {/if}
-                </label>
+                {/each}
-
-                <div class="flex flex-row items-center w-fit sm:ml-auto">
-                  <div class="relative inline-block text-left grow">
-                    <DropdownMenu.Root>
-                      <DropdownMenu.Trigger asChild let:builder>
-                        <Button
-                          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>
-                          <svg
-                            class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            style="max-width:40px"
-                            aria-hidden="true"
-                          >
-                            <path
-                              fill-rule="evenodd"
-                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                              clip-rule="evenodd"
-                            ></path>
-                          </svg>
-                        </Button>
-                      </DropdownMenu.Trigger>
-                      <DropdownMenu.Content
-                        class="w-56 h-fit max-h-72 overflow-y-auto scroller"
-                      >
-                        <DropdownMenu.Label class="text-gray-400">
-                          Select time frame
-                        </DropdownMenu.Label>
-                        <DropdownMenu.Separator />
-                        <DropdownMenu.Group>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "5Y")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            5 years
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "10Y")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            10 years
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "MAX")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            Max
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Group>
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Root>
-                  </div>
-                  <Button
-                    on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-fit 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">Download</span>
-                    <svg
-                      class="{data?.user?.tier === 'Pro'
-                        ? 'hidden'
-                        : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="#A3A3A3"
-                        d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                      /></svg
-                    >
-                  </Button>
-                </div>
               </div>
+            </div>
 
-              {#if $coolMode}
+            <div class="grid grid-cols-1 gap-2">
-                <div class="sm:w-full">
+              {#if financialData?.length > 0}
-                  <div class="relative">
+                <div
-                    <select
+                  class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
-                      class="w-40 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
+                >
-                      on:change={changeStatement}
+                  <label
+                    class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
+                  >
+                    <input
+                      on:click={toggleMode}
+                      type="checkbox"
+                      checked={$coolMode}
+                      value={$coolMode}
+                      class="sr-only peer"
+                    />
+                    <div
+                      class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
+                    ></div>
+                    {#if $coolMode}
+                      <span class="ml-2 text-sm font-medium text-white">
+                        Chart Mode
+                      </span>
+                    {:else}
+                      <span class="ml-2 text-sm font-medium text-white">
+                        Table Mode
+                      </span>
+                    {/if}
+                  </label>
+
+                  <div class="flex flex-row items-center w-fit sm:ml-auto">
+                    <div class="relative inline-block text-left grow">
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild let:builder>
+                          <Button
+                            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
+                            >
+                            <svg
+                              class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              style="max-width:40px"
+                              aria-hidden="true"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                clip-rule="evenodd"
+                              ></path>
+                            </svg>
+                          </Button>
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Content
+                          class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                        >
+                          <DropdownMenu.Label class="text-gray-400">
+                            Select time frame
+                          </DropdownMenu.Label>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Group>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "5Y")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              5 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "10Y")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              10 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "MAX")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              Max
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Group>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
+                    </div>
+                    <Button
+                      on:click={() => exportFundamentalData("csv")}
+                      class="ml-2 w-fit 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"
                     >
-                      <option disabled>Choose an Income Variable</option>
+                      <span class="truncate text-white">Download</span>
-                      <option value="cashAndCashEquivalents" selected
+                      <svg
-                        >Cash & Equivalents</option
+                        class="{data?.user?.tier === 'Pro'
+                          ? 'hidden'
+                          : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="#A3A3A3"
+                          d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                        /></svg
                       >
-                      <option value="shortTermInvestments"
+                    </Button>
-                        >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">
+                {#if $coolMode}
-                  <Chart {init} options={optionsData} class="chart" />
+                  <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
-                </div>
+                    {#each fields as item, i}
-
+                      <FinancialChart
-                <h2 class="mt-5 text-2xl text-gray-200 font-semibold">
+                        data={financialData}
-                  {statementConfig?.find(
+                        {statementConfig}
-                    (item) => item?.propertyName === displayStatement,
+                        displayStatement={item?.key}
-                  )?.label} History
+                        {filterRule}
-                </h2>
+                        {processedData}
-
+                        color={["#e5009d", "#9203e8", "#ff0831", "#6100ff"][
-                <div class="w-full overflow-x-scroll">
+                          i % 4
-                  <table
+                        ]}
-                    class="table table-sm table-compact bg-table border border-gray-800 rounded-md w-full m-auto mt-4"
+                      />
+                    {/each}
+                  </div>
+                {:else}
+                  <div
+                    class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
                   >
-                    <thead class="bg-default">
+                    <table
-                      <tr>
+                      class="table table-sm bg-table border border-gray-800 table-compact w-full"
-                        <th
+                    >
-                          class="text-white font-semibold text-start text-sm sm:text-[1rem]"
+                      <thead class="bg-default">
-                          >{filterRule === "annual"
+                        <tr class="text-white">
-                            ? "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"
+                            class="text-start bg-default text-white text-sm font-semibold pr-10"
+                            >Year</td
                           >
-                            {item?.date}
+                          {#each financialData as cash}
-                          </td>
+                            {#if filterRule === "annual"}
-
+                              <td
-                          <td
+                                class="bg-default font-semibold text-sm text-end"
-                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                              >
-                          >
+                                {"FY" + cash?.calendarYear?.slice(-2)}
-                            {@html abbreviateNumber(item?.value, false, true)}
+                              </td>
-                          </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
+                              <td
+                                class="bg-default font-semibold text-sm text-end"
+                              >
+                                {"FY" +
+                                  cash?.calendarYear?.slice(-2) +
+                                  " " +
+                                  cash?.period}
+                              </td>
                             {/if}
-                          </td>
+                          {/each}
                         </tr>
-                      {/each}
+                      </thead>
-                    </tbody>
+                      <tbody>
-                  </table>
+                        <!-- row -->
-                </div>
+                        <FinancialTable data={financialData} {fields} />
-              {:else}
+                      </tbody>
-                <div
+                    </table>
-                  class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
+                  </div>
-                >
+                {/if}
-                  <table
-                    class="table table-sm table-compact bg-table border border-gray-800 w-full"
-                  >
-                    <thead class="bg-default">
-                      <tr class="text-white">
-                        <td
-                          class="text-start bg-default text-white text-sm font-semibold pr-10"
-                          >Year</td
-                        >
-                        {#each balanceSheet as cash}
-                          {#if filterRule === "annual"}
-                            <td
-                              class="bg-default font-semibold text-sm text-end"
-                            >
-                              {"FY" + cash?.calendarYear?.slice(-2)}
-                            </td>
-                          {:else}
-                            <td
-                              class="bg-default font-semibold text-sm text-end"
-                            >
-                              {"FY" +
-                                cash?.calendarYear?.slice(-2) +
-                                " " +
-                                cash?.period}
-                            </td>
-                          {/if}
-                        {/each}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <!-- row -->
-                      <FinancialTable data={balanceSheet} {fields} />
-                    </tbody>
-                  </table>
-                </div>
               {/if}
-            {/if}
+            </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>
-      </main>
+      {/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,473 +236,331 @@
         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"
     >
-      <main class="w-full">
+      {#if isLoaded}
-        <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0 w-full">
+        <main class="w-full">
-          <div class="mb-3">
+          <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
-            <h1 class="text-xl sm:text-2xl text-white font-bold">
+            <div
-              {removeCompanyStrings($displayCompanyName)} Cash Flow
+              class="mb-3 flex flex-col sm:flex-row items-center justify-between"
-            </h1>
+            >
-          </div>
+              <h1 class="text-xl sm:text-2xl text-white font-bold">
-
+                {removeCompanyStrings($displayCompanyName)} Income Statement
-          <div class="grid grid-cols-1 gap-2 w-full">
+              </h1>
-            <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="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"
               >
-                <div
+                {#each tabs as item, i}
-                  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"
+                  {#if data?.user?.tier !== "Pro" && i > 0}
-                >
+                    <button
-                  {#each tabs as item, i}
+                      on:click={() => goto("/pricing")}
-                    {#if data?.user?.tier !== "Pro" && i > 0}
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
-                      <button
+                    >
-                        on:click={() => goto("/pricing")}
+                      <span class="relative text-sm block font-semibold">
-                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                        {item.title}
-                      >
+                        <svg
-                        <span class="relative text-sm block font-semibold">
+                          class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
-                          {item.title}
+                          xmlns="http://www.w3.org/2000/svg"
-                          <svg
+                          viewBox="0 0 24 24"
-                            class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                          ><path
-                            xmlns="http://www.w3.org/2000/svg"
+                            fill="#A3A3A3"
-                            viewBox="0 0 24 24"
+                            d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                            ><path
+                          /></svg
-                              fill="#A3A3A3"
-                              d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                            /></svg
-                          >
-                        </span>
-                      </button>
-                    {:else}
-                      <button
-                        on:click={() => (activeIdx = i)}
-                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
-                        i
-                          ? 'z-0'
-                          : ''} "
-                      >
-                        {#if activeIdx === i}
-                          <div
-                            class="absolute inset-0 rounded-md bg-[#fff]"
-                          ></div>
-                        {/if}
-                        <span
-                          class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
-                          i
-                            ? 'text-black'
-                            : 'text-white'}"
                         >
-                          {item.title}
+                      </span>
-                        </span>
+                    </button>
-                      </button>
-                    {/if}
-                  {/each}
-                </div>
-              </div>
-
-              <div
-                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"
-                >
-                  <input
-                    on:click={toggleMode}
-                    type="checkbox"
-                    checked={$coolMode}
-                    value={$coolMode}
-                    class="sr-only peer"
-                  />
-                  <div
-                    class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
-                  ></div>
-                  {#if $coolMode}
-                    <span class="ml-2 text-sm font-medium text-white">
-                      Cool Mode
-                    </span>
                   {:else}
-                    <span class="ml-2 text-sm font-medium text-white">
+                    <button
-                      Boring Mode
+                      on:click={() => (activeIdx = i)}
-                    </span>
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                      i
+                        ? 'z-0'
+                        : ''} "
+                    >
+                      {#if activeIdx === i}
+                        <div
+                          class="absolute inset-0 rounded-md bg-[#fff]"
+                        ></div>
+                      {/if}
+                      <span
+                        class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
+                        i
+                          ? 'text-black'
+                          : 'text-white'}"
+                      >
+                        {item.title}
+                      </span>
+                    </button>
                   {/if}
-                </label>
+                {/each}
-
-                <div class="flex flex-row items-center w-fit sm:ml-auto">
-                  <div class="relative inline-block text-left grow">
-                    <DropdownMenu.Root>
-                      <DropdownMenu.Trigger asChild let:builder>
-                        <Button
-                          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>
-                          <svg
-                            class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            style="max-width:40px"
-                            aria-hidden="true"
-                          >
-                            <path
-                              fill-rule="evenodd"
-                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                              clip-rule="evenodd"
-                            ></path>
-                          </svg>
-                        </Button>
-                      </DropdownMenu.Trigger>
-                      <DropdownMenu.Content
-                        class="w-56 h-fit max-h-72 overflow-y-auto scroller"
-                      >
-                        <DropdownMenu.Label class="text-gray-400">
-                          Select time frame
-                        </DropdownMenu.Label>
-                        <DropdownMenu.Separator />
-                        <DropdownMenu.Group>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "5Y")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            5 years
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "10Y")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            10 years
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "MAX")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            Max
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Group>
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Root>
-                  </div>
-                  <Button
-                    on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-fit 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">Download</span>
-                    <svg
-                      class="{data?.user?.tier === 'Pro'
-                        ? 'hidden'
-                        : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="#A3A3A3"
-                        d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                      /></svg
-                    >
-                  </Button>
-                </div>
               </div>
+            </div>
 
-              {#if $coolMode}
+            <div class="grid grid-cols-1 gap-2">
-                <div class="sm:w-full">
+              {#if financialData?.length > 0}
-                  <div class="relative">
+                <div
-                    <select
+                  class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
-                      class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
+                >
-                      on:change={changeStatement}
+                  <label
+                    class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
+                  >
+                    <input
+                      on:click={toggleMode}
+                      type="checkbox"
+                      checked={$coolMode}
+                      value={$coolMode}
+                      class="sr-only peer"
+                    />
+                    <div
+                      class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
+                    ></div>
+                    {#if $coolMode}
+                      <span class="ml-2 text-sm font-medium text-white">
+                        Chart Mode
+                      </span>
+                    {:else}
+                      <span class="ml-2 text-sm font-medium text-white">
+                        Table Mode
+                      </span>
+                    {/if}
+                  </label>
+
+                  <div class="flex flex-row items-center w-fit sm:ml-auto">
+                    <div class="relative inline-block text-left grow">
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild let:builder>
+                          <Button
+                            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
+                            >
+                            <svg
+                              class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              style="max-width:40px"
+                              aria-hidden="true"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                clip-rule="evenodd"
+                              ></path>
+                            </svg>
+                          </Button>
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Content
+                          class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                        >
+                          <DropdownMenu.Label class="text-gray-400">
+                            Select time frame
+                          </DropdownMenu.Label>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Group>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "5Y")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              5 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "10Y")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              10 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "MAX")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              Max
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Group>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
+                    </div>
+                    <Button
+                      on:click={() => exportFundamentalData("csv")}
+                      class="ml-2 w-fit 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"
                     >
-                      <option disabled>Choose an Cash Flow Variable</option>
+                      <span class="truncate text-white">Download</span>
-                      <option value="netIncome" selected>Net Income</option>
+                      <svg
-                      <option value="depreciationAndAmortization"
+                        class="{data?.user?.tier === 'Pro'
-                        >Depreciation & Amortization</option
+                          ? 'hidden'
+                          : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="#A3A3A3"
+                          d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                        /></svg
                       >
-                      <option value="stockBasedCompensation"
+                    </Button>
-                        >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">
+                {#if $coolMode}
-                  <Chart {init} options={optionsData} class="chart" />
+                  <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
-                </div>
+                    {#each fields as item, i}
-
+                      <FinancialChart
-                <div class="w-full overflow-x-scroll">
+                        data={financialData}
-                  <table
+                        {statementConfig}
-                    class="table table-sm table-compact bg-table border border-gray-800 rounded-md w-full m-auto mt-4"
+                        displayStatement={item?.key}
+                        {filterRule}
+                        {processedData}
+                        color={["#e5009d", "#9203e8", "#ff0831", "#6100ff"][
+                          i % 4
+                        ]}
+                      />
+                    {/each}
+                  </div>
+                {:else}
+                  <div
+                    class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
                   >
-                    <thead class="bg-default">
+                    <table
-                      <tr class="border-b border-gray-800">
+                      class="table table-sm bg-table border border-gray-800 table-compact w-full"
-                        <th
+                    >
-                          class="text-white font-semibold text-start text-sm sm:text-[1rem]"
+                      <thead class="bg-default">
-                          >{filterRule === "annual"
+                        <tr class="text-white">
-                            ? "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"
+                            class="text-start bg-default text-white text-sm font-semibold pr-10"
+                            >Year</td
                           >
-                            {item?.date}
+                          {#each financialData as cash}
-                          </td>
+                            {#if filterRule === "annual"}
-
+                              <td
-                          <td
+                                class="bg-default font-semibold text-sm text-end"
-                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                              >
-                          >
+                                {"FY" + cash?.calendarYear?.slice(-2)}
-                            {@html abbreviateNumber(item?.value, false, true)}
+                              </td>
-                          </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
+                              <td
+                                class="bg-default font-semibold text-sm text-end"
+                              >
+                                {"FY" +
+                                  cash?.calendarYear?.slice(-2) +
+                                  " " +
+                                  cash?.period}
+                              </td>
                             {/if}
-                          </td>
+                          {/each}
                         </tr>
-                      {/each}
+                      </thead>
-                    </tbody>
+                      <tbody>
-                  </table>
+                        <!-- row -->
-                </div>
+                        <FinancialTable data={financialData} {fields} />
-              {:else}
+                      </tbody>
-                <div
+                    </table>
-                  class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
+                  </div>
-                >
+                {/if}
-                  <table
-                    class="table table-sm table-compact bg-table border border-gray-800 w-full"
-                  >
-                    <thead class="bg-default">
-                      <tr class="text-white">
-                        <td class="text-start text-white text-sm font-semibold"
-                          >Year</td
-                        >
-                        {#each cashFlow as cash}
-                          {#if filterRule === "annual"}
-                            <td
-                              class="bg-default font-semibold text-end text-sm"
-                            >
-                              {"FY" + cash?.calendarYear?.slice(-2)}
-                            </td>
-                          {:else}
-                            <td
-                              class="bg-default font-semibold text-end text-sm"
-                            >
-                              {"FY" +
-                                cash?.calendarYear?.slice(-2) +
-                                " " +
-                                cash?.period}
-                            </td>
-                          {/if}
-                        {/each}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <!-- row -->
-                      <FinancialTable data={cashFlow} {fields} />
-                    </tbody>
-                  </table>
-                </div>
               {/if}
-            {/if}
+            </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>
-      </main>
+      {/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,
-    for (let i = ratios?.length - 1; i >= 0; i--) {
+        );
-      const statement = ratios[i];
+      case "10Y":
-      const year = statement?.calendarYear?.slice(-2);
+        return fullStatement?.filter(
-      const quarter = statement?.period;
+          (item) => currentYear - parseInt(item?.calendarYear) < 10,
-
+        );
-      // Determine the label based on filterRule
+      default:
-      if (filterRule === "annual") {
+        return fullStatement;
-        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
+  fullStatement = data?.getData;
-    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;
-  }
 
   const exportFundamentalData = (format = "csv") => {
     if (data?.user?.tier === "Pro") {
@@ -320,496 +225,331 @@
         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 = {};
+    statementConfig.forEach((item) => {
+      if (item && item.propertyName) {
+        configMap[item.propertyName] = item;
+      }
+    });
 
-  const filterStatement = (fullStatement, timeFrame) => {
+    const xList = [];
-    const currentYear = getCurrentYear();
+    for (let i = financialData.length - 1; i >= 0; i--) {
-
+      const statement = financialData[i];
-    switch (timeFrame) {
+      const year = statement.calendarYear.slice(-2);
-      case "5Y":
+      const quarter = statement.period;
-        return fullStatement?.filter(
+      xList.push(
-          (item) => currentYear - parseInt(item?.calendarYear) < 5,
+        filterRule === "annual" ? "FY" + year : "FY" + year + " " + quarter,
-        );
+      );
-      case "10Y":
-        return fullStatement?.filter(
-          (item) => currentYear - parseInt(item?.calendarYear) < 10,
-        );
-      default:
-        return fullStatement;
     }
-  };
+
+    // 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"
     >
-      <main class="w-full">
+      {#if isLoaded}
-        <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0 w-full">
+        <main class="w-full">
-          <div class="mb-3">
+          <div class="sm:pl-7 sm:pb-7 sm:pt-7 m-auto mt-2 sm:mt-0">
-            <h1 class="text-xl sm:text-2xl text-white font-bold">
+            <div
-              {#if $coolMode}
+              class="mb-3 flex flex-col sm:flex-row items-center justify-between"
-                {statementConfig?.find(
+            >
-                  (item) => item?.propertyName === displayStatement,
+              <h1 class="text-xl sm:text-2xl text-white font-bold">
-                )?.label}
+                {removeCompanyStrings($displayCompanyName)} Income Statement
-              {:else}
+              </h1>
-                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="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"
               >
-                <div
+                {#each tabs as item, i}
-                  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"
+                  {#if data?.user?.tier !== "Pro" && i > 0}
-                >
+                    <button
-                  {#each tabs as item, i}
+                      on:click={() => goto("/pricing")}
-                    {#if data?.user?.tier !== "Pro" && i > 0}
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
-                      <button
+                    >
-                        on:click={() => goto("/pricing")}
+                      <span class="relative text-sm block font-semibold">
-                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
+                        {item.title}
-                      >
+                        <svg
-                        <span class="relative text-sm block font-semibold">
+                          class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
-                          {item.title}
+                          xmlns="http://www.w3.org/2000/svg"
-                          <svg
+                          viewBox="0 0 24 24"
-                            class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
+                          ><path
-                            xmlns="http://www.w3.org/2000/svg"
+                            fill="#A3A3A3"
-                            viewBox="0 0 24 24"
+                            d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                            ><path
+                          /></svg
-                              fill="#A3A3A3"
-                              d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                            /></svg
-                          >
-                        </span>
-                      </button>
-                    {:else}
-                      <button
-                        on:click={() => (activeIdx = i)}
-                        class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
-                        i
-                          ? 'z-0'
-                          : ''} "
-                      >
-                        {#if activeIdx === i}
-                          <div
-                            class="absolute inset-0 rounded-md bg-[#fff]"
-                          ></div>
-                        {/if}
-                        <span
-                          class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
-                          i
-                            ? 'text-black'
-                            : 'text-white'}"
                         >
-                          {item.title}
+                      </span>
-                        </span>
+                    </button>
-                      </button>
-                    {/if}
-                  {/each}
-                </div>
-              </div>
-
-              <div
-                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"
-                >
-                  <input
-                    on:click={toggleMode}
-                    type="checkbox"
-                    checked={$coolMode}
-                    value={$coolMode}
-                    class="sr-only peer"
-                  />
-                  <div
-                    class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
-                  ></div>
-                  {#if $coolMode}
-                    <span class="ml-2 text-sm font-medium text-white">
-                      Cool Mode
-                    </span>
                   {:else}
-                    <span class="ml-2 text-sm font-medium text-white">
+                    <button
-                      Boring Mode
+                      on:click={() => (activeIdx = i)}
-                    </span>
+                      class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
+                      i
+                        ? 'z-0'
+                        : ''} "
+                    >
+                      {#if activeIdx === i}
+                        <div
+                          class="absolute inset-0 rounded-md bg-[#fff]"
+                        ></div>
+                      {/if}
+                      <span
+                        class="relative text-sm block font-semibold whitespace-nowrap {activeIdx ===
+                        i
+                          ? 'text-black'
+                          : 'text-white'}"
+                      >
+                        {item.title}
+                      </span>
+                    </button>
                   {/if}
-                </label>
+                {/each}
-
-                <div class="flex flex-row items-center w-fit sm:ml-auto">
-                  <div class="relative inline-block text-left grow">
-                    <DropdownMenu.Root>
-                      <DropdownMenu.Trigger asChild let:builder>
-                        <Button
-                          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>
-                          <svg
-                            class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
-                            viewBox="0 0 20 20"
-                            fill="currentColor"
-                            style="max-width:40px"
-                            aria-hidden="true"
-                          >
-                            <path
-                              fill-rule="evenodd"
-                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                              clip-rule="evenodd"
-                            ></path>
-                          </svg>
-                        </Button>
-                      </DropdownMenu.Trigger>
-                      <DropdownMenu.Content
-                        class="w-56 h-fit max-h-72 overflow-y-auto scroller"
-                      >
-                        <DropdownMenu.Label class="text-gray-400">
-                          Select time frame
-                        </DropdownMenu.Label>
-                        <DropdownMenu.Separator />
-                        <DropdownMenu.Group>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "5Y")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            5 years
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "10Y")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            10 years
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            on:click={() => ($timeFrame = "MAX")}
-                            class="cursor-pointer hover:bg-primary"
-                          >
-                            Max
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Group>
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Root>
-                  </div>
-                  <Button
-                    on:click={() => exportFundamentalData("csv")}
-                    class="ml-2 w-fit 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">Download</span>
-                    <svg
-                      class="{data?.user?.tier === 'Pro'
-                        ? 'hidden'
-                        : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      ><path
-                        fill="#A3A3A3"
-                        d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
-                      /></svg
-                    >
-                  </Button>
-                </div>
               </div>
+            </div>
 
-              {#if $coolMode}
+            <div class="grid grid-cols-1 gap-2">
-                <div class="sm:w-full">
+              {#if financialData?.length > 0}
-                  <div class="relative">
+                <div
-                    <select
+                  class="mb-2 flex flex-row items-center w-full justify-end sm:justify-center"
-                      class="w-36 select select-bordered select-sm p-0 pl-5 overflow-y-auto bg-secondary"
+                >
-                      on:change={changeStatement}
+                  <label
+                    class="inline-flex mt-2 sm:mt-0 cursor-pointer relative mr-auto"
+                  >
+                    <input
+                      on:click={toggleMode}
+                      type="checkbox"
+                      checked={$coolMode}
+                      value={$coolMode}
+                      class="sr-only peer"
+                    />
+                    <div
+                      class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"
+                    ></div>
+                    {#if $coolMode}
+                      <span class="ml-2 text-sm font-medium text-white">
+                        Chart Mode
+                      </span>
+                    {:else}
+                      <span class="ml-2 text-sm font-medium text-white">
+                        Table Mode
+                      </span>
+                    {/if}
+                  </label>
+
+                  <div class="flex flex-row items-center w-fit sm:ml-auto">
+                    <div class="relative inline-block text-left grow">
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild let:builder>
+                          <Button
+                            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
+                            >
+                            <svg
+                              class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              style="max-width:40px"
+                              aria-hidden="true"
+                            >
+                              <path
+                                fill-rule="evenodd"
+                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                                clip-rule="evenodd"
+                              ></path>
+                            </svg>
+                          </Button>
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Content
+                          class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                        >
+                          <DropdownMenu.Label class="text-gray-400">
+                            Select time frame
+                          </DropdownMenu.Label>
+                          <DropdownMenu.Separator />
+                          <DropdownMenu.Group>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "5Y")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              5 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "10Y")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              10 years
+                            </DropdownMenu.Item>
+                            <DropdownMenu.Item
+                              on:click={() => ($timeFrame = "MAX")}
+                              class="cursor-pointer hover:bg-primary"
+                            >
+                              Max
+                            </DropdownMenu.Item>
+                          </DropdownMenu.Group>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
+                    </div>
+                    <Button
+                      on:click={() => exportFundamentalData("csv")}
+                      class="ml-2 w-fit 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"
                     >
-                      <option disabled>Choose a Variable</option>
+                      <span class="truncate text-white">Download</span>
-                      <option value="priceEarningsRatio" selected
+                      <svg
-                        >PE Ratio</option
+                        class="{data?.user?.tier === 'Pro'
+                          ? 'hidden'
+                          : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="#A3A3A3"
+                          d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                        /></svg
                       >
-                      <option value="priceEarningsToGrowthRatio" selected
+                    </Button>
-                        >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">
+                {#if $coolMode}
-                  <Chart {init} options={optionsData} class="chart" />
+                  <div class="grid gap-5 xs:gap-6 lg:grid-cols-3 lg:gap-3">
-                </div>
+                    {#each fields as item, i}
-
+                      <FinancialChart
-                <div class="w-full overflow-x-scroll">
+                        data={financialData}
-                  <table
+                        {statementConfig}
-                    class="table table-sm table-compact bg-table border border-gray-800 rounded-md w-full m-auto mt-4"
+                        displayStatement={item?.key}
+                        {filterRule}
+                        {processedData}
+                        color={["#e5009d", "#9203e8", "#ff0831", "#6100ff"][
+                          i % 4
+                        ]}
+                      />
+                    {/each}
+                  </div>
+                {:else}
+                  <div
+                    class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
                   >
-                    <thead class="bg-default">
+                    <table
-                      <tr class="border-b border-gray-800">
+                      class="table table-sm bg-table border border-gray-800 table-compact w-full"
-                        <th
+                    >
-                          class="text-white font-semibold text-start text-sm sm:text-[1rem]"
+                      <thead class="bg-default">
-                          >{filterRule === "annual"
+                        <tr class="text-white">
-                            ? "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"
+                            class="text-start bg-default text-white text-sm font-semibold pr-10"
+                            >Year</td
                           >
-                            {item?.date}
+                          {#each financialData as cash}
-                          </td>
+                            {#if filterRule === "annual"}
-
+                              <td
-                          <td
+                                class="bg-default font-semibold text-sm text-end"
-                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap"
+                              >
-                          >
+                                {"FY" + cash?.calendarYear?.slice(-2)}
-                            {@html abbreviateNumber(item?.value, false, true)}
+                              </td>
-                          </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
+                              <td
+                                class="bg-default font-semibold text-sm text-end"
+                              >
+                                {"FY" +
+                                  cash?.calendarYear?.slice(-2) +
+                                  " " +
+                                  cash?.period}
+                              </td>
                             {/if}
-                          </td>
+                          {/each}
                         </tr>
-                      {/each}
+                      </thead>
-                    </tbody>
+                      <tbody>
-                  </table>
+                        <!-- row -->
-                </div>
+                        <FinancialTable data={financialData} {fields} />
-              {:else}
+                      </tbody>
-                <div
+                    </table>
-                  class="w-full rounded-none sm:rounded-md m-auto overflow-x-auto"
+                  </div>
-                >
+                {/if}
-                  <table
-                    class="table table-sm table-compact bg-table border border-gray-800 w-full"
-                  >
-                    <thead class="bg-default">
-                      <tr class="text-white">
-                        <td class="text-start text-sm font-semibold">Year</td>
-                        {#each ratios as item}
-                          {#if filterRule === "annual"}
-                            <td
-                              class="bg-default font-semibold text-end text-sm"
-                            >
-                              {"FY" + item?.calendarYear?.slice(-2)}
-                            </td>
-                          {:else}
-                            <td
-                              class="bg-default font-semibold text-end text-sm"
-                            >
-                              {"FY" +
-                                item?.calendarYear?.slice(-2) +
-                                " " +
-                                item?.period}
-                            </td>
-                          {/if}
-                        {/each}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <!-- row -->
-                      <FinancialTable data={ratios} {fields} />
-                    </tbody>
-                  </table>
-                </div>
               {/if}
-            {/if}
+            </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>
-      </main>
+      {/if}
     </div>
   </div>
 </section>
-
-<style>
-  .app {
-    height: 400px;
-    width: 100%;
-  }
-
-  @media (max-width: 560px) {
-    .app {
-      width: 100%;
-      height: 300px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>