From 48fe6ca96e4a056f17e7ffeb596289892893413a Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 20 Oct 2024 18:41:45 +0200
Subject: [PATCH] update metrics page

---
 .../{+page.server.ts => +layout.server.ts}    |  56 +-
 .../stocks/[tickerID]/metrics/+layout.svelte  |  59 +-
 .../stocks/[tickerID]/metrics/+page.svelte    | 233 ++++++--
 .../[tickerID]/metrics/[slug]/+page.svelte    | 515 +++++++++---------
 4 files changed, 508 insertions(+), 355 deletions(-)
 rename src/routes/stocks/[tickerID]/metrics/{+page.server.ts => +layout.server.ts} (72%)

diff --git a/src/routes/stocks/[tickerID]/metrics/+page.server.ts b/src/routes/stocks/[tickerID]/metrics/+layout.server.ts
similarity index 72%
rename from src/routes/stocks/[tickerID]/metrics/+page.server.ts
rename to src/routes/stocks/[tickerID]/metrics/+layout.server.ts
index 0762cadb..ad2577e0 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.server.ts
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.server.ts
@@ -1,28 +1,28 @@
-export const load = async ({ locals, params }) => {
-  const getAnalystEstimate = async () => {
-    const { apiURL, apiKey } = locals;
-
-    const postData = {
-      ticker: params.tickerID,
-    };
-
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/analyst-estimate", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    const output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getAnalystEstimate: await getAnalystEstimate(),
-  };
-};
+export const load = async ({ locals, params }) => {
+  const getBusinessMetrics = async () => {
+    const { apiURL, apiKey } = locals;
+
+    const postData = {
+      ticker: params.tickerID,
+    };
+
+    // make the POST request to the endpoint
+    const response = await fetch(apiURL + "/business-metrics", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-KEY": apiKey,
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output;
+  };
+
+  // Make sure to return a promise
+  return {
+    getBusinessMetrics: await getBusinessMetrics(),
+  };
+};
diff --git a/src/routes/stocks/[tickerID]/metrics/+layout.svelte b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
index c6d45ea7..8fa622d9 100644
--- a/src/routes/stocks/[tickerID]/metrics/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+layout.svelte
@@ -1,27 +1,31 @@
 <script lang="ts">
   import { stockTicker, screenWidth } from "$lib/store";
   import { page } from "$app/stores";
-  import { goto } from "$app/navigation";
 
-  const subsectionTitles = ['Overview', 'Data Center', 'Gaming', 'Visualization', 'Automotive', 'OEM & Other'];
+  export let data;
+
+  const names = data?.getBusinessMetrics?.revenue?.names;
+  const subsectionTitles = ["Overview", ...names];
 
   const sectionMap = Object.fromEntries(
-    subsectionTitles.map(title => {
-      const key = title.toLowerCase().replace(/ & /g, '-').replace(/ /g, '-');
-      return [key, key === 'overview' ? '' : key];
-    })
+    subsectionTitles.map((title) => {
+      const key = title.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-");
+      return [key, key === "overview" ? "" : key];
+    }),
   );
 
   let displaySubSection = "overview";
 
   function changeSubSection(state) {
     displaySubSection = state;
-    const path = state === "overview" ? "/metrics" : `/metrics/${sectionMap[state]}`;
+    const path =
+      state === "overview" ? "/metrics" : `/metrics/${sectionMap[state]}`;
     // Navigate programmatically using SvelteKit's goto function
   }
 
   function getHref(section) {
-    const path = section === "overview" ? "/metrics" : `/metrics/${sectionMap[section]}`;
+    const path =
+      section === "overview" ? "/metrics" : `/metrics/${sectionMap[section]}`;
     return `/stocks/${$stockTicker}${path}`;
   }
 
@@ -30,33 +34,56 @@
       const parts = $page.url.pathname.split("/");
 
       // Filter out empty strings from URL parts and look for the section
-      const foundSection = parts.find(part => part && Object.values(sectionMap).includes(part));
+      const foundSection = parts.find(
+        (part) => part && Object.values(sectionMap).includes(part),
+      );
 
       // If a valid section is found in the URL, update the displaySubSection
-      displaySubSection = Object.keys(sectionMap).find(key => sectionMap[key] === foundSection) || "overview";
+      displaySubSection =
+        Object.keys(sectionMap).find(
+          (key) => sectionMap[key] === foundSection,
+        ) || "overview";
     }
   }
 </script>
 
 <!-- Rest of the component remains the same -->
 
-<section class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40">
+<section
+  class="w-auto max-w-5xl bg-[#09090B] overflow-hidden text-black h-full mb-40"
+>
   <div class="m-auto h-full overflow-hidden">
     <main class="w-fit sm:w-full sm:max-w-2xl">
       <div class="m-auto">
-        <div class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640 ? 'overflow-auto scrollbar' : ''} mb-2">
-          <ul class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2">
+        <div
+          class="-ml-2 sm:ml-8 w-screen sm:w-full {$screenWidth < 640
+            ? 'overflow-auto scrollbar'
+            : ''} mb-2"
+        >
+          <ul
+            class="pr-4 sm:pr-0 w-screen flex flex-row items-center bg-[#09090B] overflow-x-scroll sm:overflow-hidden space-x-4 rtl:space-x-reverse py-2"
+          >
             {#each subsectionTitles as title}
-              {@const sectionKey = title.toLowerCase().replace(/ & /g, '-').replace(/ /g, '-')}
+              {@const sectionKey = title
+                .toLowerCase()
+                .replace(/ & /g, "-")
+                .replace(/ /g, "-")}
               <li class="cursor-pointer flex flex-col items-center">
                 <a
                   href={getHref(sectionKey)}
                   on:click={() => changeSubSection(sectionKey)}
-                  class="px-2 text-sm sm:text-[1rem] whitespace-nowrap font-medium text-gray-400 sm:hover:text-white {displaySubSection === sectionKey ? 'text-white' : 'bg-[#09090B]'}"
+                  class="px-2 text-sm sm:text-[1rem] whitespace-nowrap font-medium text-gray-400 sm:hover:text-white {displaySubSection ===
+                  sectionKey
+                    ? 'text-white'
+                    : 'bg-[#09090B]'}"
                 >
                   {title}
                 </a>
-                <div class="{displaySubSection === sectionKey ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]" />
+                <div
+                  class="{displaySubSection === sectionKey
+                    ? 'bg-[#75D377]'
+                    : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[3rem]"
+                />
               </li>
             {/each}
           </ul>
diff --git a/src/routes/stocks/[tickerID]/metrics/+page.svelte b/src/routes/stocks/[tickerID]/metrics/+page.svelte
index c2911958..04cf202a 100644
--- a/src/routes/stocks/[tickerID]/metrics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/+page.svelte
@@ -1,24 +1,54 @@
 <script lang="ts">
-  import { numberOfUnreadNotification, displayCompanyName, stockTicker } from "$lib/store";
+  import {
+    numberOfUnreadNotification,
+    displayCompanyName,
+    stockTicker,
+  } from "$lib/store";
   import { abbreviateNumber } from "$lib/utils";
 
   export let data;
-  const dataset = [{'date': '2024-06-30', 'value': [26272000000, 2880000000, 454000000, 346000000, 88000000], 'valueGrowth': [16.44, 8.8, 6.32, 5.17, 12.82]}, {'date': '2024-03-31', 'value': [22563000000, 2647000000, 427000000, 329000000, 78000000], 'valueGrowth': [22.6, -7.61, -7.78, 17.08, -13.33]}, {'date': '2023-12-31', 'value': [18404000000, 2865000000, 463000000, 281000000, 90000000], 'valueGrowth': [26.8, 0.32, 11.3, 7.66, 23.29]}, {'date': '2023-09-30', 'value': [14514000000, 2856000000, 416000000, 261000000, 73000000], 'valueGrowth': [40.6, 14.88, 9.76, 3.16, 10.61]}, {'date': '2023-06-30', 'value': [10323000000, 2486000000, 379000000, 253000000, 66000000], 'valueGrowth': [324.81, -41.97, -83.08, -14.24, -77.7]}, {'date': '2022-12-31', 'value': [3616000000, 1831000000, 226000000, 294000000, 84000000], 'valueGrowth': [-5.66, 16.33, 13.0, 17.13, 15.07]}, {'date': '2022-09-30', 'value': [3833000000, 1574000000, 200000000, 251000000, 73000000], 'valueGrowth': [0.71, -22.92, -59.68, 14.09, -47.86]}, {'date': '2022-06-30', 'value': [3806000000, 2042000000, 496000000, 220000000, 140000000], 'valueGrowth': [1.49, -43.59, -20.26, 59.42, -11.39]}, {'date': '2022-03-31', 'value': [3750000000, 3620000000, 622000000, 138000000, 158000000], 'valueGrowth': [14.92, 5.85, -3.27, 10.4, -17.71]}, {'date': '2021-12-31', 'value': [3263000000, 3420000000, 643000000, 125000000, 192000000], 'valueGrowth': [11.14, 6.18, 11.44, -7.41, -17.95]}, {'date': '2021-09-30', 'value': [2936000000, 3221000000, 577000000, 135000000, 234000000], 'valueGrowth': [24.09, 5.23, 11.18, -11.18, -42.79]}, {'date': '2021-06-30', 'value': [2366000000, 3061000000, 519000000, 152000000, 409000000], 'valueGrowth': [15.53, 10.91, 39.52, -1.3, 25.08]}, {'date': '2021-03-31', 'value': [2048000000, 2760000000, 372000000, 154000000, 327000000], 'valueGrowth': [-32.72, -28.01, -39.41, -48.67, 12.37]}, {'date': '2020-12-31', 'value': [3044000000, 3834000000, 614000000, 300000000, 291000000], 'valueGrowth': [60.21, 68.82, 160.17, 140.0, 50.0]}, {'date': '2020-09-30', 'value': [1900000000, 2271000000, 236000000, 125000000, 194000000], 'valueGrowth': [8.45, 37.3, 16.26, 12.61, 32.88]}, {'date': '2020-06-30', 'value': [1752000000, 1654000000, 203000000, 111000000, 146000000], 'valueGrowth': [null, null, null, null, null]}];
-  const geographicDataset = [{'date': '2024-06-30', 'value': [13022000000, 3667000000, 13351000000], 'valueGrowth': [-3.51, 47.21, 32.75]}, {'date': '2024-03-31', 'value': [13496000000, 2491000000, 10057000000], 'valueGrowth': [10.3, 28.01, 4.8]}, {'date': '2023-12-31', 'value': [12236000000, 1946000000, 9596000000], 'valueGrowth': [94.16, -51.71, 23.22]}, {'date': '2023-09-30', 'value': [6302000000, 4030000000, 7788000000], 'valueGrowth': [4.29, 47.08, 64.86]}, {'date': '2023-06-30', 'value': [6043000000, 2740000000, 4724000000], 'valueGrowth': [153.38, 72.33, 46.84]}, {'date': '2023-03-31', 'value': [2385000000, 1590000000, 3217000000], 'valueGrowth': [7.24, 66.67, -27.72]}, {'date': '2022-12-31', 'value': [2224000000, 954000000, 4451000000], 'valueGrowth': [3.54, -16.9, 68.92]}, {'date': '2022-09-30', 'value': [2148000000, 1148000000, 2635000000], 'valueGrowth': [8.05, -28.34, -15.38]}, {'date': '2022-06-30', 'value': [1988000000, 1602000000, 3114000000], 'valueGrowth': [2.9, -23.02, -27.16]}, {'date': '2022-03-31', 'value': [1932000000, 2081000000, 4275000000], 'valueGrowth': [32.42, 4.94, 39.89]}, {'date': '2021-12-31', 'value': [1459000000, 1983000000, 3056000000], 'valueGrowth': [29.57, -1.69, -44.95]}, {'date': '2021-09-30', 'value': [1126000000, 2017000000, 5551000000], 'valueGrowth': [13.05, 17.27, 6.89]}, {'date': '2021-06-30', 'value': [996000000, 1720000000, 5193000000], 'valueGrowth': [29.69, 23.65, 66.39]}, {'date': '2021-03-31', 'value': [768000000, 1391000000, 3121000000], 'valueGrowth': [-44.35, -27.48, -28.5]}, {'date': '2020-12-31', 'value': [1380000000, 1918000000, 4365000000], 'valueGrowth': [55.06, 72.33, 76.29]}, {'date': '2020-09-30', 'value': [890000000, 1113000000, 2476000000], 'valueGrowth': [-5.72, 30.18, 35.52]}, {'date': '2020-06-30', 'value': [944000000, 855000000, 1827000000], 'valueGrowth': [null, null, null]}]
-  
-  const categories = ['Data Center', 'Gaming', 'Visualization', 'Automotive', 'OEM and Other'];
-  const geographicCategories = ['United States', 'China', 'Other Countries'];
 
-  const xData = dataset?.map(item => item?.date);
-  const geographicXData = geographicDataset?.map(item => item?.date);
+  const names = data?.getBusinessMetrics?.revenue?.names;
+  const subsectionTitles = ["Overview", ...names];
 
-  const categoryValues = categories.map((_, index) => dataset.map(item => item.value[index]));
-  const geographiCategoryValues = geographicCategories.map((_, index) => geographicDataset.map(item => item.value[index]));
+  const sectionMap = Object.fromEntries(
+    subsectionTitles.map((title) => {
+      const key = title.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-");
+      return [key, key === "overview" ? "" : key];
+    }),
+  );
 
+  const dataset = data?.getBusinessMetrics?.revenue?.history;
 
-  const growthValues = categories?.map((_, index) => dataset.map(item => item.valueGrowth[index]));
-  const geographicGrowthValues = geographicCategories?.map((_, index) => geographicDataset?.map(item => item.valueGrowth[index]));
+  const geographicDataset = data?.getBusinessMetrics?.geographic?.history;
 
+  const revenueNames = data?.getBusinessMetrics?.revenue?.names;
+
+  const geographicNames = data?.getBusinessMetrics?.geographic?.names;
+
+  const xData = dataset?.map((item) => item?.date);
+  const geographicXData = geographicDataset?.map((item) => item?.date);
+
+  const categoryValues = revenueNames.map((_, index) =>
+    dataset.map((item) => item.value[index]),
+  );
+  const geographiCategoryValues = geographicNames.map((_, index) =>
+    geographicDataset.map((item) => item.value[index]),
+  );
+
+  const growthValues = revenueNames?.map((_, index) =>
+    dataset.map((item) => item.valueGrowth[index]),
+  );
+  const geographicGrowthValues = geographicNames?.map((_, index) =>
+    geographicDataset?.map((item) => item.valueGrowth[index]),
+  );
+
+  function getHref(title) {
+    const key = title?.toLowerCase().replace(/ & /g, "-").replace(/ /g, "-");
+    const path =
+      key === "overview" ? "/metrics" : `/metrics/${sectionMap[key]}`;
+    return `/stocks/${$stockTicker}${path}`;
+  }
 </script>
 
 <svelte:head>
@@ -28,54 +58,105 @@
     {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
     {$displayCompanyName} ({$stockTicker}) Business Metric Overview · stocknear
   </title>
-  <meta name="description" content={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`} />
-  <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Business Metric Overview · stocknear`} />
-  <meta property="og:description" content={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`} />
+  <meta
+    name="description"
+    content={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`}
+  />
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Business Metric Overview · stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`}
+  />
   <meta property="og:type" content="website" />
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Business Metric Overview · stocknear`} />
-  <meta name="twitter:description" content={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`} />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Business Metric Overview · stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`View unique business metrics for ${displayCompanyName} (${$stockTicker}) stock, including revenue breakdown, operating income, revenue by geography.`}
+  />
 </svelte:head>
 
-<section class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full">
+<section
+  class="bg-[#09090B] overflow-hidden text-white h-full mb-40 sm:mb-0 w-full"
+>
   <div class="flex justify-center m-auto h-full overflow-hidden w-full">
-    <div class="relative flex justify-center items-center overflow-hidden w-full">
+    <div
+      class="relative flex justify-center items-center overflow-hidden w-full"
+    >
       <div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
         {#if data?.getAnalystEstimate?.length !== 0}
+          <h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
+            {$displayCompanyName} Revenue Breakdown
+          </h2>
 
-        <h2 class="mt-5 text-xl sm:text-2xl text-gray-200 font-bold mb-4">{$displayCompanyName} Revenue 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 shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
+          <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 shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
+            >
               <thead>
                 <tr>
-                  <th class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start">Quarter</th>
+                  <th
+                    class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start"
+                    >Quarter</th
+                  >
                   {#each xData as item}
-                    <td class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]">{new Date(item ?? null)?.toLocaleString('en-US', {
-                      month: 'short',
-                      day: 'numeric',
-                      year: 'numeric',
-                    })}</td>
+                    <td
+                      class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]"
+                      >{new Date(item ?? null)?.toLocaleString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      })}</td
+                    >
                   {/each}
                 </tr>
               </thead>
               <tbody class="shadow-md">
-                {#each categories as category, index}
+                {#each revenueNames as name, index}
                   <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]">
-                    <th class="text-white whitespace-nowrap odd:bg-[#27272A] text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B] sm:hover:text-blue-400 cursor-pointer underline underline-offset-4">{category} Revenue</th>
+                    <th
+                      class="whitespace-nowrap odd:bg-[#27272A] text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
+                    >
+                      <a
+                        href={getHref(name)}
+                        class="sm:hover:text-blue-400 cursor-pointer underline underline-offset-4"
+                      >
+                        {name} Revenue
+                      </a></th
+                    >
                     {#each categoryValues[index] as value}
-                      <td class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]">
+                      <td
+                        class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]"
+                      >
                         {abbreviateNumber(value)}
                       </td>
                     {/each}
                   </tr>
                   <tr class="bg-[#09090B] border-b-[#09090B]">
-                    <th class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b  border-[#09090B]">
-                      <span class="ml-2">{category} Revenue Growth</span>
+                    <th
+                      class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]"
+                    >
+                      <span class="ml-2">{name} Revenue Growth</span>
                     </th>
                     {#each growthValues[index] as growthValue}
-                      <td class="text-sm sm:text-[1rem] text-end {growthValue > 0 ? "text-[#37C97D]" : growthValue < 0 ? "text-[#FF2F1F]" : 'text-white'} font-medium border-b border-[#09090B]">
-                        {growthValue > 0 ? '+' : ''}{growthValue !== null ? growthValue?.toFixed(2) + '%' : '-'}
+                      <td
+                        class="text-sm sm:text-[1rem] text-end {growthValue > 0
+                          ? 'text-[#37C97D]'
+                          : growthValue < 0
+                            ? 'text-[#FF2F1F]'
+                            : 'text-white'} font-medium border-b border-[#09090B]"
+                      >
+                        {growthValue > 0 ? "+" : ""}{growthValue !== null
+                          ? growthValue?.toFixed(2) + "%"
+                          : "-"}
                       </td>
                     {/each}
                   </tr>
@@ -84,42 +165,66 @@
             </table>
           </div>
 
+          <h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4">
+            Revenue by Geography
+          </h2>
 
-
-
-         <h2 class="mt-10 text-xl sm:text-2xl text-gray-200 font-bold mb-4">Revenue by Geography</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 shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
+          <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 shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]"
+            >
               <thead>
                 <tr>
-                  <th class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start">Quarter</th>
+                  <th
+                    class="bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm sm:text-[1rem] text-start"
+                    >Quarter</th
+                  >
                   {#each geographicXData as item}
-                    <td class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]">{new Date(item ?? null)?.toLocaleString('en-US', {
-                      month: 'short',
-                      day: 'numeric',
-                      year: 'numeric',
-                    })}</td>
+                    <td
+                      class="z-20 bg-[#09090B] border-b border-[#09090B] text-white font-semibold text-sm text-center bg-[#09090B]"
+                      >{new Date(item ?? null)?.toLocaleString("en-US", {
+                        month: "short",
+                        day: "numeric",
+                        year: "numeric",
+                      })}</td
+                    >
                   {/each}
                 </tr>
               </thead>
               <tbody class="shadow-md">
-                {#each geographicCategories as category, index}
+                {#each geographicNames as name, index}
                   <tr class="bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A]">
-                    <th class="text-white whitespace-nowrap odd:bg-[#27272A] text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]">{category} Revenue</th>
+                    <th
+                      class="text-white whitespace-nowrap odd:bg-[#27272A] text-sm sm:text-[1rem] text-start font-medium border-b border-[#09090B]"
+                      >{name} Revenue</th
+                    >
                     {#each geographiCategoryValues[index] as value}
-                      <td class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]">
+                      <td
+                        class="text-white text-sm sm:text-[1rem] text-end font-medium border-b border-[#09090B]"
+                      >
                         {abbreviateNumber(value)}
                       </td>
                     {/each}
                   </tr>
                   <tr class="bg-[#09090B] border-b-[#09090B]">
-                    <th class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b  border-[#09090B]">
-                      <span class="ml-2">{category} Revenue Growth</span>
+                    <th
+                      class="text-white whitespace-nowrap text-sm sm:text-[1rem] text-start font-medium bg-[#09090B] border-b border-[#09090B]"
+                    >
+                      <span class="ml-2">{name} Revenue Growth</span>
                     </th>
                     {#each geographicGrowthValues[index] as growthValue}
-                      <td class="text-sm sm:text-[1rem] text-end {growthValue > 0 ? "text-[#37C97D]" : growthValue < 0 ? "text-[#FF2F1F]" : 'text-white'} font-medium border-b border-[#09090B]">
-                        {growthValue > 0 ? '+' : ''}{growthValue !== null ? growthValue?.toFixed(2) + '%' : '-'}
+                      <td
+                        class="text-sm sm:text-[1rem] text-end {growthValue > 0
+                          ? 'text-[#37C97D]'
+                          : growthValue < 0
+                            ? 'text-[#FF2F1F]'
+                            : 'text-white'} font-medium border-b border-[#09090B]"
+                      >
+                        {growthValue > 0 ? "+" : ""}{growthValue !== null
+                          ? growthValue?.toFixed(2) + "%"
+                          : "-"}
                       </td>
                     {/each}
                   </tr>
@@ -128,9 +233,21 @@
             </table>
           </div>
         {:else}
-          <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
-            <svg class="w-6 h-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12l-2 2m0-2l2-2m2 2h6m-6 0H6" />
+          <div
+            class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+          >
+            <svg
+              class="w-6 h-6 mr-2"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 12l-2 2m0-2l2-2m2 2h6m-6 0H6"
+              />
             </svg>
             <p class="font-medium">No estimates available.</p>
           </div>
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index cacf8191..0c6714c7 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -1,283 +1,292 @@
 <script lang="ts">
-import {numberOfUnreadNotification,displayCompanyName, stockTicker} from '$lib/store';
-import { abbreviateNumber } from '$lib/utils';
+  import {
+    numberOfUnreadNotification,
+    displayCompanyName,
+    stockTicker,
+  } from "$lib/store";
+  import { abbreviateNumber } from "$lib/utils";
 
-import { Chart } from 'svelte-echarts'
+  import { Chart } from "svelte-echarts";
 
-import { init, use } from 'echarts/core'
-  import { LineChart, BarChart } from 'echarts/charts'
-  import { GridComponent, TooltipComponent } from 'echarts/components'
-  import { CanvasRenderer } from 'echarts/renderers'
-  import { onMount } from 'svelte';
-  use([LineChart, BarChart, GridComponent,TooltipComponent, CanvasRenderer])
+  import { init, use } from "echarts/core";
+  import { LineChart, BarChart } from "echarts/charts";
+  import { GridComponent, TooltipComponent } from "echarts/components";
+  import { CanvasRenderer } from "echarts/renderers";
+  import { onMount } from "svelte";
+  use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
+  export let data;
 
+  let isLoaded = false;
+  let optionsData;
 
+  let rawData = data?.getBusinessMetrics?.revenue?.history;
 
-    export let data;
-    
-    let isLoaded = false;
-    let optionsData;
+  let dataset = [];
+  let tableList = [];
 
-    let rawData = [{'date': '2024-06-30', 'value': [26272000000, 2880000000, 454000000, 346000000, 88000000], 'valueGrowth': [16.44, 8.8, 6.32, 5.17, 12.82]}, {'date': '2024-03-31', 'value': [22563000000, 2647000000, 427000000, 329000000, 78000000], 'valueGrowth': [22.6, -7.61, -7.78, 17.08, -13.33]}, {'date': '2023-12-31', 'value': [18404000000, 2865000000, 463000000, 281000000, 90000000], 'valueGrowth': [26.8, 0.32, 11.3, 7.66, 23.29]}, {'date': '2023-09-30', 'value': [14514000000, 2856000000, 416000000, 261000000, 73000000], 'valueGrowth': [40.6, 14.88, 9.76, 3.16, 10.61]}, {'date': '2023-06-30', 'value': [10323000000, 2486000000, 379000000, 253000000, 66000000], 'valueGrowth': [324.81, -41.97, -83.08, -14.24, -77.7]}, {'date': '2022-12-31', 'value': [3616000000, 1831000000, 226000000, 294000000, 84000000], 'valueGrowth': [-5.66, 16.33, 13.0, 17.13, 15.07]}, {'date': '2022-09-30', 'value': [3833000000, 1574000000, 200000000, 251000000, 73000000], 'valueGrowth': [0.71, -22.92, -59.68, 14.09, -47.86]}, {'date': '2022-06-30', 'value': [3806000000, 2042000000, 496000000, 220000000, 140000000], 'valueGrowth': [1.49, -43.59, -20.26, 59.42, -11.39]}, {'date': '2022-03-31', 'value': [3750000000, 3620000000, 622000000, 138000000, 158000000], 'valueGrowth': [14.92, 5.85, -3.27, 10.4, -17.71]}, {'date': '2021-12-31', 'value': [3263000000, 3420000000, 643000000, 125000000, 192000000], 'valueGrowth': [11.14, 6.18, 11.44, -7.41, -17.95]}, {'date': '2021-09-30', 'value': [2936000000, 3221000000, 577000000, 135000000, 234000000], 'valueGrowth': [24.09, 5.23, 11.18, -11.18, -42.79]}, {'date': '2021-06-30', 'value': [2366000000, 3061000000, 519000000, 152000000, 409000000], 'valueGrowth': [15.53, 10.91, 39.52, -1.3, 25.08]}, {'date': '2021-03-31', 'value': [2048000000, 2760000000, 372000000, 154000000, 327000000], 'valueGrowth': [-32.72, -28.01, -39.41, -48.67, 12.37]}, {'date': '2020-12-31', 'value': [3044000000, 3834000000, 614000000, 300000000, 291000000], 'valueGrowth': [60.21, 68.82, 160.17, 140.0, 50.0]}, {'date': '2020-09-30', 'value': [1900000000, 2271000000, 236000000, 125000000, 194000000], 'valueGrowth': [8.45, 37.3, 16.26, 12.61, 32.88]}, {'date': '2020-06-30', 'value': [1752000000, 1654000000, 203000000, 111000000, 146000000], 'valueGrowth': [null, null, null, null, null]}]
-    
-    
-    let dataset = []
-    let tableList = [];
-
-
-
-function convertToTitleCase(str) {
+  function convertToTitleCase(str) {
     return str
-        ?.split('-') // Split the string by hyphen
-        ?.map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word
-        ?.join(' ')
-        ?.replace('Oem', 'OEM')
-}
+      ?.split("-") // Split the string by hyphen
+      ?.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter of each word
+      ?.join(" ")
+      ?.replace("Oem", "OEM");
+  }
 
-
-
-
-function plotData()
-    {
-        const plotDataset = [...dataset]?.sort((a, b) => new Date(a?.date) - new Date(b?.date));
-        const xData = plotDataset?.map(item => item?.date);
-        let valueList = [];
-        for (let i = 0; i < plotDataset?.length; i++) {
-        valueList.push(plotDataset[i]?.value);
-        }
+  function plotData() {
+    const plotDataset = [...dataset]?.sort(
+      (a, b) => new Date(a?.date) - new Date(b?.date),
+    );
+    const xData = plotDataset?.map((item) => item?.date);
+    let valueList = [];
+    for (let i = 0; i < plotDataset?.length; i++) {
+      valueList.push(plotDataset[i]?.value);
+    }
 
     const options = {
-        animation: false,
-        grid: {
-        left: '0%',
-        right: '2%',
-        bottom: '2%',
-        top: '10%',
-        containLabel: true
-        },
-        xAxis: {
+      animation: false,
+      grid: {
+        left: "0%",
+        right: "2%",
+        bottom: "2%",
+        top: "10%",
+        containLabel: true,
+      },
+      xAxis: {
         axisLabel: {
-            color: '#fff',
+          color: "#fff",
         },
         data: xData,
-        type: 'category',
-        },
-        yAxis: [
-            {
-            type: 'value',
-            splitLine: {
-                    show: false, // Disable x-axis grid lines
-            },
-            
-            axisLabel: {
-                show: false // Hide y-axis labels
-            }
-            },
-        ],
-        series: [
+        type: "category",
+      },
+      yAxis: [
         {
-            name: 'Revenue',
-            data: valueList,
-            type: 'line',
-            areaStyle: {opacity: 0.2},
-            smooth: true,
-            symbol: 'none',
+          type: "value",
+          splitLine: {
+            show: false, // Disable x-axis grid lines
+          },
+
+          axisLabel: {
+            show: false, // Hide y-axis labels
+          },
         },
-        ],
-        tooltip: {
-            trigger: 'axis',
-            hideDelay: 100,
+      ],
+      series: [
+        {
+          name: "Revenue",
+          data: valueList,
+          type: "line",
+          areaStyle: { opacity: 0.2 },
+          smooth: true,
+          symbol: "none",
         },
+      ],
+      tooltip: {
+        trigger: "axis",
+        hideDelay: 100,
+      },
     };
-    
+
     return options;
+  }
+
+  $: {
+    if ($stockTicker && data?.getParams && typeof window !== "undefined") {
+      isLoaded = false;
+      dataset = [];
+      tableList = [];
+
+      dataset = rawData?.map((entry) => ({
+        date: entry.date,
+        value:
+          data?.getParams === "data-center"
+            ? entry?.value[0]
+            : data?.getParams === "gaming"
+              ? entry?.value[1]
+              : data?.getParams === "visualization"
+                ? entry?.value[2]
+                : data?.getParams === "automotive"
+                  ? entry?.value[3]
+                  : data?.getParams === "oem-other"
+                    ? entry?.value[4]
+                    : null,
+
+        valueGrowth:
+          data?.getParams === "data-center"
+            ? entry?.valueGrowth[0]
+            : data?.getParams === "gaming"
+              ? entry?.valueGrowth[1]
+              : data?.getParams === "visualization"
+                ? entry?.valueGrowth[2]
+                : data?.getParams === "automotive"
+                  ? entry?.valueGrowth[3]
+                  : data?.getParams === "oem-other"
+                    ? entry?.valueGrowth[4]
+                    : null,
+      }));
+
+      tableList = [...dataset];
+
+      tableList = tableList?.sort(
+        (a, b) => new Date(b?.date) - new Date(a?.date),
+      );
+      optionsData = plotData();
+      isLoaded = true;
     }
-    
-
-
-$: {
-    if($stockTicker && data?.getParams && typeof window !== 'undefined') {
-        console.log('yes')
-        isLoaded = false;
-        dataset = [];
-        tableList= [];
-
-        dataset = rawData?.map(entry => ({
-            date: entry.date,
-            value: data?.getParams === 'data-center' ? entry?.value[0]
-                : data?.getParams === 'gaming' ? entry?.value[1]
-                : data?.getParams === 'visualization' ? entry?.value[2]
-                : data?.getParams === 'automotive' ? entry?.value[3]
-                : data?.getParams === 'oem-other' ? entry?.value[4]
-                : null,
-            
-            valueGrowth: data?.getParams === 'data-center' ? entry?.valueGrowth[0]
-                : data?.getParams === 'gaming' ? entry?.valueGrowth[1]
-                : data?.getParams === 'visualization' ?  entry?.valueGrowth[2]
-                : data?.getParams === 'automotive' ? entry?.valueGrowth[3]
-                : data?.getParams === 'oem-other' ? entry?.valueGrowth[4]
-                : null
-        }));
-
-
-
-        tableList = [...dataset];
-
-        tableList = tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
-        optionsData= plotData()
-        isLoaded = true;
-    }
-}
+  }
 </script>
-                    
-    
-<svelte:head>
 
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width" />
-<title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} {$displayCompanyName} ({$stockTicker}) Revenue Breakdown · stocknear
-</title>
-<meta name="description" content={`Revenue & Geographic Breakdown`} />
-<meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Revenue Breakdown · stocknear`}/>
-<meta property="og:description" content={`Revenue & Geographic Breakdown`} />
-<meta property="og:type" content="website"/>
-<meta name="twitter:card" content="summary_large_image"/>
-<meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Revenue Breakdown · stocknear`}/>
-<meta name="twitter:description" content={`Revenue & Geographic Breakdown`} />
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) Revenue Breakdown · stocknear
+  </title>
+  <meta name="description" content={`Revenue & Geographic Breakdown`} />
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Revenue Breakdown · stocknear`}
+  />
+  <meta property="og:description" content={`Revenue & Geographic Breakdown`} />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$stockTicker}) Revenue Breakdown · stocknear`}
+  />
+  <meta name="twitter:description" content={`Revenue & Geographic Breakdown`} />
 </svelte:head>
 
-    
-    <section class="bg-[#09090B] w-full  overflow-hidden text-white h-full pb-40 sm:mb-0">
-        <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
-            <div class="w-full relative flex justify-center items-center overflow-hidden">
-
-                {#if isLoaded}
-                <main class="w-full">
-                    <div class="sm:p-7 m-auto mt-2 sm:mt-0">
-                        <div class="mb-3">
-                            <h1 class="text-2xl text-gray-200 font-bold">
-                               {convertToTitleCase(data?.getParams)} Revenue
-                            </h1>
-                        </div>
-    
-                        {#if rawData?.length !== 0}
-                        <div class="grid grid-cols-1 gap-2">
-                          
-                            
-    
-                            <div class="app w-full ">
-                                <Chart {init} options={optionsData} class="chart" />
-                            </div>
-
-
-                            <h2 class="mt-10 text-xl text-gray-200 font-bold">
-                                History
-                            </h2>
-
-
-
-
-                            <div class="w-full overflow-x-scroll">         
-                                <table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 ">
-                                  <thead>
-                                    <tr class="border border-slate-800">
-                                      <th class="text-white font-semibold text-start text-sm sm:text-[1rem]">Quarter</th>
-                                      <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">Value</th>
-                                      <th class="text-white font-semibold text-end text-sm sm:text-[1rem]">% Change</th>
-                                    </tr>
-                                  </thead>
-                                  <tbody>
-                                    {#each tableList as item, index}
-                                        <!-- row -->
-                                        <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
-                                        
-                                            <td class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]">
-                                            {new Date(item?.date ?? null)?.toLocaleString('en-US', {
-                                            month: 'short',
-                                            day: 'numeric',
-                                            year: 'numeric',
-                                            })}
-                                            </td>
-
-                                            <td class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]">
-                                            {abbreviateNumber(item?.value)}
-                                            </td>
-
-                                            <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]">
-                                                {#if item?.valueGrowth > 0}
-                                                <span class="text-[#37C97D]">
-                                                  +{(item?.valueGrowth)?.toFixed(2)}%
-                                                </span>
-                                                {:else if item?.valueGrowth < 0}
-                                                <span class="text-[#FF2F1F]">
-                                                  {(item?.valueGrowth)?.toFixed(2)}%
-                                                </span>
-                                                {:else}
-                                                -
-                                                {/if}
-                                            </td>
-
-                                        </tr>
-                                        {/each}
-
-                                  </tbody>
-                                </table>
-                    
-                                    
-                            </div>
-
-    
-                    
-    
-                        </div>
-
-                        {:else}
-                        <h2 class="mt-16 flex justify-center items-center text-2xl font-medium text-white mb-5 m-auto">
-                            No data available
-                        </h2>
-                        {/if}
-    
-                        </div>
-                        
-                </main>
-                {:else}
-                <div class="w-full flex justify-center items-center h-80">
-                    <div class="relative">
-                    <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md text-gray-400"></span>
-                    </label>
-                    </div>
-                </div>
-                {/if}
+<section
+  class="bg-[#09090B] w-full overflow-hidden text-white h-full pb-40 sm:mb-0"
+>
+  <div class="w-full flex justify-center w-full sm-auto h-full overflow-hidden">
+    <div
+      class="w-full relative flex justify-center items-center overflow-hidden"
+    >
+      {#if isLoaded}
+        <main class="w-full">
+          <div class="sm:p-7 m-auto mt-2 sm:mt-0">
+            <div class="mb-3">
+              <h1 class="text-2xl text-gray-200 font-bold">
+                {convertToTitleCase(data?.getParams)} Revenue
+              </h1>
             </div>
+
+            {#if rawData?.length !== 0}
+              <div class="grid grid-cols-1 gap-2">
+                <div class="app w-full">
+                  <Chart {init} options={optionsData} class="chart" />
+                </div>
+
+                <h2 class="mt-10 text-xl text-gray-200 font-bold">History</h2>
+
+                <div class="w-full overflow-x-scroll">
+                  <table
+                    class="table table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4"
+                  >
+                    <thead>
+                      <tr class="border border-slate-800">
+                        <th
+                          class="text-white font-semibold text-start text-sm sm:text-[1rem]"
+                          >Quarter</th
+                        >
+                        <th
+                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
+                          >Value</th
+                        >
+                        <th
+                          class="text-white font-semibold text-end text-sm sm:text-[1rem]"
+                          >% Change</th
+                        >
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {#each tableList as item, index}
+                        <!-- row -->
+                        <tr
+                          class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"
+                        >
+                          <td
+                            class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
+                          >
+                            {new Date(item?.date ?? null)?.toLocaleString(
+                              "en-US",
+                              {
+                                month: "short",
+                                day: "numeric",
+                                year: "numeric",
+                              },
+                            )}
+                          </td>
+
+                          <td
+                            class="text-white text-sm sm:text-[1rem] text-right whitespace-nowrap border-b-[#09090B]"
+                          >
+                            {abbreviateNumber(item?.value)}
+                          </td>
+
+                          <td
+                            class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-end border-b-[#09090B]"
+                          >
+                            {#if item?.valueGrowth > 0}
+                              <span class="text-[#37C97D]">
+                                +{item?.valueGrowth?.toFixed(2)}%
+                              </span>
+                            {:else if item?.valueGrowth < 0}
+                              <span class="text-[#FF2F1F]">
+                                {item?.valueGrowth?.toFixed(2)}%
+                              </span>
+                            {:else}
+                              -
+                            {/if}
+                          </td>
+                        </tr>
+                      {/each}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            {:else}
+              <h2
+                class="mt-16 flex justify-center items-center text-2xl font-medium text-white mb-5 m-auto"
+              >
+                No data available
+              </h2>
+            {/if}
+          </div>
+        </main>
+      {:else}
+        <div class="w-full flex justify-center items-center h-80">
+          <div class="relative">
+            <label
+              class="bg-[#09090B] rounded-xl 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>
-    </section>
-            
-                
+      {/if}
+    </div>
+  </div>
+</section>
 
-    
+<style>
+  .app {
+    height: 400px;
+    width: 100%;
+  }
 
+  @media (max-width: 560px) {
+    .app {
+      width: 100%;
+      height: 300px;
+    }
+  }
 
-
-
-
-    
-    <style>
-        .app {
-            height: 400px;
-            width: 100%;
-        }
-        
-        @media (max-width: 560px) {
-            .app {
-                width: 100%;
-                height: 300px;
-            }
-        }
-    
-        .chart {
-            width: 100%;
-        }
-    </style>
\ No newline at end of file
+  .chart {
+    width: 100%;
+  }
+</style>