update plot

src/lib/components/FinancialTable.svelte

@@ -9,6 +9,13 @@
 
   let config = null;
 
+  let modalLabel;
+  let highestValue;
+  let highestValueDate;
+  let lowestValueDate;
+  let lowestValue;
+  let fiveYearsGrowth;
+
   const marginKeys = new Set([
     /*
     "pretaxProfitMargin",
@@ -48,11 +55,28 @@
 
     const valueList = rawData?.map((item) => item[key]);
 
+    // Calculate highest and lowest value
+    highestValue = Math.max(...valueList);
+    lowestValue = Math.min(...valueList);
+    let highestValueIndex = valueList.indexOf(highestValue);
+    let lowestValueIndex = valueList.indexOf(lowestValue);
+
+    highestValueDate = dateList[highestValueIndex] || null;
+    lowestValueDate = dateList[lowestValueIndex] || null;
+
+    // Calculate last 5 years growth
+    fiveYearsGrowth = null;
+    if (valueList?.length >= 5) {
+      let firstValue = valueList[valueList.length - 5];
+      let lastValue = valueList[valueList.length - 1];
+      fiveYearsGrowth = ((lastValue - firstValue) / Math.abs(firstValue)) * 100;
+    }
+
     const options = {
       chart: {
         type: "column",
-        backgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        backgroundColor: $mode === "light" ? "#fff" : "#2A2E39",
-        plotBackgroundColor: $mode === "light" ? "#fff" : "#09090B",
+        plotBackgroundColor: $mode === "light" ? "#fff" : "#2A2E39",
         height: 360,
         animation: false,
       },
@@ -98,7 +122,7 @@
       },
       yAxis: {
         gridLineWidth: 1,
-        gridLineColor: $mode === "light" ? "#e5e7eb" : "#111827",
+        gridLineColor: $mode === "light" ? "#e5e7eb" : "#404657",
         labels: {
           style: { color: $mode === "light" ? "black" : "white" },
           formatter: function () {
@@ -125,7 +149,7 @@
           this.points.forEach((point) => {
             tooltipContent += `<span class="text-white font-semibold text-sm">${point.series.name}:</span>
           <span class="text-white font-normal text-sm">${abbreviateNumber(
-            point.y,
+            point.y?.toFixed(2),
           )}</span><br>`;
           });
           return tooltipContent;
@@ -146,6 +170,7 @@
   }
 
   async function handleChart(label, key) {
+    modalLabel = label;
     config = plotData(label, key);
   }
 </script>
@@ -157,7 +182,7 @@
     <td
       class="text-start min-w-[220px] sm:min-w-[320px] border-r border-gray-300 dark:border-gray-700 text-sm sm:text-[1rem] w-full flex flex-row items-center justify-between"
     >
-      <span class="truncate w-fit max-w-40 sm:max-w-fit">{label}</span>
+      <span class="truncate w-fit max-w-40 sm:max-w-64">{label}</span>
       <label
         for="financialPlotModal"
         on:click={() => handleChart(label, key)}
@@ -200,24 +225,27 @@
   <label for="financialPlotModal" class="cursor-pointer modal-backdrop"></label>
 
   <div
-    class="modal-box bg-white relative dark:bg-default w-full max-w-3xl rounded-md border-t sm:border border-gray-300 dark:border-gray-700 min-h-48 h-auto"
+    class="modal-box w-full p-6 rounded shadow-lg border
+        bg-white dark:bg-secondary border border-gray-600 dark:border-gray-800"
   >
-    <label
-      for="financialPlotModal"
-      class="cursor-pointer text-[1.8rem] focus:outline-hidden absolute top-2 right-3"
-    >
-      <svg
-        class="w-8 h-8 text-muted dark:text-white"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        ><path
-          fill="currentColor"
-          d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
-        />
-      </svg>
-    </label>
     {#if config}
       <div class="mt-2" use:highcharts={config}></div>
     {/if}
+    <p class="text-sm mb-6">
+      Revenue peaked at {abbreviateNumber(highestValue?.toFixed(2))} in {highestValueDate}
+      and hit its lowest at {abbreviateNumber(lowestValue?.toFixed(2))} in {lowestValueDate}.
+      Over the past five years, it has {fiveYearsGrowth >= 0
+        ? "grown"
+        : "declined"} by {fiveYearsGrowth?.toFixed(2)}%.
+    </p>
+
+    <div class="border-t border-gray-300 dark:border-gray-600 mt-2 w-full">
+      <label
+        for="financialPlotModal"
+        class="mt-4 font-semibold text-xl m-auto flex justify-center cursor-pointer"
+      >
+        Close
+      </label>
+    </div>
   </div>
 </dialog>

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

@@ -22,7 +22,6 @@
   let financialData = [];
   let fullStatement = [];
   let filterRule = "annual";
-  let displayStatement = "revenue";
 
   let activeIdx = 0;
 
@@ -38,135 +37,92 @@
   const statementConfig = [
     {
       propertyName: "revenue",
-      growthPropertyName: "growthRevenue",
       label: "Revenue",
-      text: "Revenue, also called sales, is the amount of money a company receives from its business activities, such as sales of products or services. Revenue does not take any expenses into account and is therefore different from profits.",
     },
     {
       propertyName: "costOfRevenue",
-      growthPropertyName: "growthCostOfRevenue",
       label: "Cost of Revenue",
-      text: "Cost of revenue is also called cost of goods sold (COGS). It is the variable cost related to the company's production of products and services.",
     },
     {
       propertyName: "grossProfit",
-      growthPropertyName: "growthGrossProfit",
       label: "Gross Profit",
-      text: "Gross profit is a company’s profit after subtracting the costs directly linked to making and delivering its products and services.",
     },
     {
       propertyName: "operatingIncome",
-      growthPropertyName: "growthOperatingIncome",
       label: "Operating Income",
-      text: "Gross profit is a company’s profit after subtracting the costs directly linked to making and delivering its products and services.",
     },
     {
       propertyName: "interestIncome",
-      growthPropertyName: "growthInterestIncome",
       label: "Interest Income",
-      text: "Gross profit is a company’s profit after subtracting the costs directly linked to making and delivering its products and services.",
     },
     {
       propertyName: "incomeBeforeTax",
-      growthPropertyName: "growthIncomeBeforeTax",
       label: "Pretax Income",
-      text: "Pretax income is a company's profits before accounting for income taxes.",
     },
     {
       propertyName: "netIncome",
-      growthPropertyName: "growthNetIncome",
       label: "Net Income",
-      text: `Net income is a company's accounting profits after subtracting all costs and expenses from the revenue. It is also called earnings, profits or "the bottom line."`,
     },
     {
       propertyName: "sellingGeneralAndAdministrativeExpenses",
-      growthPropertyName: "growthSellingGeneralAndAdministrativeExpenses",
       label: "Selling & General & Admin",
-      text: "Selling, general and administrative (SG&A) is an operating expense. It involves various company expenses that are not related to production.",
     },
     {
       propertyName: "researchAndDevelopmentExpenses",
-      growthPropertyName: "growthResearchAndDevelopmentExpenses",
       label: "Research & Development",
-      text: "Research and development (R&D) is an operating expense. It is the amount of money a company spends on researching and developing new products and services, or improving existing ones.",
     },
     {
       propertyName: "otherExpenses",
-      growthPropertyName: "growthOtherExpenses",
       label: "Other Expenses",
-      text: "Other expenses typically refer to costs that are not directly related to the primary operations of the business. These can include a wide variety of things, such as interest expense, taxes, depreciation and amortization, losses from investments, legal fees and restructuring costs.",
     },
     {
       propertyName: "operatingExpenses",
-      growthPropertyName: "growthOperatingExpenses",
       label: "Operating Expenses",
-      text: "Operating expenses are a company's fixed costs that a company incurs during its ongoing business operations. It can include SG&A, R&D and other expenses.",
     },
     {
       propertyName: "interestExpense",
-      growthPropertyName: "growthInterestExpense",
       label: "Interest Expense",
-      text: "Interest expense is the amount that the company paid or received in interest. A positive number indicates a net expense, while a negative number implies that the company had more interest income from its cash reserves than it paid for interest on debt.",
     },
     {
       propertyName: "sellingAndMarketingExpenses",
-      growthPropertyName: "growthSellingAndMarketingExpenses",
       label: "Selling & Marketing Expenses",
-      text: "Revenue, also called sales, is the amount of money a company receives from its business activities, such as sales of products or services. Revenue does not take any expenses into account and is therefore different from profits.",
     },
     {
       propertyName: "costAndExpenses",
-      growthPropertyName: "growthCostAndExpensess",
       label: "Cost & Expenses",
-      text: "Revenue, also called sales, is the amount of money a company receives from its business activities, such as sales of products or services. Revenue does not take any expenses into account and is therefore different from profits.",
     },
     {
       propertyName: "incomeTaxExpense",
-      growthPropertyName: "growthIncomeTaxExpense",
       label: "Income Tax",
-      text: "Income tax is the amount of corporate income tax that the company has incurred during the fiscal period.",
     },
     {
       propertyName: "weightedAverageShsOut",
-      growthPropertyName: "growthWeightedAverageShsOut",
       label: "Shares Outstanding (Basic)",
-      text: "Basic shares outstanding is the total amount of common stock held by all of a company's shareholders.",
     },
     {
       propertyName: "weightedAverageShsOutDil",
-      growthPropertyName: "growthWeightedAverageShsOutDil",
       label: "Shares Outstanding (Diluted)",
-      text: "Diluted shares outstanding is the total amount of common stock that will be outstanding if all stock options, warrants and convertible securities are exercised.",
     },
     {
       propertyName: "eps",
       growthPropertyName: "growthEPS",
       label: "EPS (Basic)",
-      text: "Earnings per share is the portion of a company's profit that is allocated to each individual stock. EPS is calculated by dividing net income by shares outstanding.",
     },
     {
       propertyName: "epsDiluted",
-      growthPropertyName: "growthEPSDiluted",
       label: "EPS (Diluted)",
-      text: `Earnings per share is the portion of a company's profit that is allocated to each individual stock. Diluted EPS is calculated by dividing net income by "diluted" shares outstanding.`,
     },
     {
       propertyName: "ebitda",
-      growthPropertyName: "growthEBITDA",
       label: "EBITDA",
-      text: `EBITDA stands for "Earnings Before Interest, Taxes, Depreciation and Amortization." It is a commonly used measure of profitability.`,
     },
     {
       propertyName: "ebit",
-      growthPropertyName: "growthEBIT",
       label: "EBIT",
-      text: ``,
     },
     {
       propertyName: "depreciationAndAmortization",
-      growthPropertyName: "growthDepreciationAndAmortization",
       label: "Depreciation & Amortization",
-      text: "Depreciation and amortization are accounting methods for calculating how the value of a business's assets change over time. Depreciation refers to physical assets, while amortization refers to intangible assets.",
     },
   ];
 
@@ -198,7 +154,6 @@
   };
 
   fullStatement = data?.getData;
-  displayStatement = "revenue";
 
   const exportFundamentalData = (format = "csv") => {
     if (["Pro", "Plus"]?.includes(data?.user?.tier)) {
@@ -326,7 +281,7 @@
 
 <SEO
   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.`}
+  description={`Detailed annual and quarter income statement for ${$displayCompanyName} (${$stockTicker}). See many years of revenue, expenses and profits or losses.`}
 />
 
 <section class=" w-full overflow-hidden h-full">
@@ -506,10 +461,10 @@
                 </div>
               {:else}
                 <div
-                  class="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between"
+                  class="flex flex-col sm:flex-row items-start sm:items-end sm:justify-between"
                 >
                   <span
-                    class="text-sm order-1 sm:order-0 mt-5 sm:mt-0 text-gray-600 dark:text-gray-400 w-full"
+                    class="text-xs sm:text-sm order-1 sm:order-0 mt-5 sm:mt-0 text-gray-600 dark:text-gray-400 w-full"
                   >
                     Financials in {data?.getProfileData?.currency}. Fiscal year
                     is