update business metrics

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

@@ -25,15 +25,20 @@
     }),
   );
   const dataset = data?.getBusinessMetrics?.revenue?.history || [];
-
   const geographicDataset = data?.getBusinessMetrics?.geographic?.history || [];
+  const operatingExpensesDataset =
+    data?.getBusinessMetrics?.operatingExpenses?.history || [];
 
   const revenueNames = data?.getBusinessMetrics?.revenue?.names || [];
-
   const geographicNames = data?.getBusinessMetrics?.geographic?.names || [];
+  const operatingExpensesNames =
+    data?.getBusinessMetrics?.operatingExpenses?.names || [];
 
   const xData = dataset?.map((item) => item?.date);
   const geographicXData = geographicDataset?.map((item) => item?.date);
+  const operatingExpensesXData = operatingExpensesDataset?.map(
+    (item) => item?.date,
+  );
 
   const categoryValues = revenueNames?.map((_, index) =>
     dataset?.map((item) => item.value[index]),
@@ -41,6 +46,9 @@
   const geographiCategoryValues = geographicNames?.map((_, index) =>
     geographicDataset?.map((item) => item.value[index]),
   );
+  const operatingExpensesCategoryValues = operatingExpensesNames?.map(
+    (_, index) => operatingExpensesDataset?.map((item) => item.value[index]),
+  );
 
   const growthValues = revenueNames?.map((_, index) =>
     dataset?.map((item) => item.valueGrowth[index]),
@@ -48,6 +56,10 @@
   const geographicGrowthValues = geographicNames?.map((_, index) =>
     geographicDataset?.map((item) => item.valueGrowth[index]),
   );
+  const operatingExpensesGrowthValues = operatingExpensesNames?.map(
+    (_, index) =>
+      operatingExpensesDataset?.map((item) => item.valueGrowth[index]),
+  );
 
   function getHref(title) {
     const key = title?.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-");
@@ -248,6 +260,83 @@
               </table>
             </div>
           {/if}
+
+          {#if operatingExpensesNames?.length !== 0}
+            <h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
+              Operating Expense Breakdown
+            </h2>
+
+            <div
+              class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto overflow-x-scroll pr-5 sm:pr-0"
+            >
+              <table
+                class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800"
+              >
+                <thead>
+                  <tr>
+                    <th
+                      class="bg-default border-b border-gray-800 text-white font-semibold text-sm sm:text-[1rem] text-start"
+                      >Quarter</th
+                    >
+                    {#each operatingExpensesXData as item}
+                      <th
+                        class="z-20 bg-default border-b border-gray-800 text-white font-semibold text-sm text-center bg-default"
+                        >{new Date(item ?? null)?.toLocaleString("en-US", {
+                          month: "short",
+                          day: "numeric",
+                          year: "numeric",
+                        })}</th
+                      >
+                    {/each}
+                  </tr>
+                </thead>
+                <tbody class="shadow-md">
+                  {#each operatingExpensesNames as name, index}
+                    <tr class="bg-table border-b-[#09090B] odd:bg-odd">
+                      <th
+                        class="text-white whitespace-nowrap odd:bg-odd text-sm sm:text-[1rem] text-start font-medium border-b border-gray-800"
+                        >{name} Revenue</th
+                      >
+                      {#each operatingExpensesCategoryValues[index] as value}
+                        <th
+                          class="text-white text-sm sm:text-[1rem] text-center font-medium border-b border-gray-800"
+                        >
+                          {@html value !== null &&
+                          value !== 0 &&
+                          value !== undefined
+                            ? abbreviateNumber(value, false, true)
+                            : "n/a"}
+                        </th>
+                      {/each}
+                    </tr>
+                    <tr class="bg-table border-b-[#09090B]">
+                      <td
+                        class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-table border-b border-gray-800"
+                      >
+                        <span class="ml-2">{name} Revenue Growth</span>
+                      </td>
+                      {#each operatingExpensesGrowthValues[index] as growthValue}
+                        <td
+                          class="text-sm sm:text-[1rem] text-center {growthValue >
+                          0
+                            ? 'text-[#00FC50]'
+                            : growthValue < 0
+                              ? 'text-[#FF2F1F]'
+                              : 'text-white'} font-medium border-b border-gray-800"
+                        >
+                          {growthValue > 0 ? "+" : ""}{growthValue !== null &&
+                          growthValue !== 0 &&
+                          growthValue !== undefined
+                            ? growthValue?.toFixed(2) + "%"
+                            : "n/a"}
+                        </td>
+                      {/each}
+                    </tr>
+                  {/each}
+                </tbody>
+              </table>
+            </div>
+          {/if}
         {:else}
           <div
             class="mt-5 sm:mt-0 border-l-4 border-white p-0 sm:p-4 text-white flex flex-row items-center"