From 6debdaf00ad35497d3d0e443deeb0aa313cc1e43 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 4 Nov 2024 21:14:12 +0100
Subject: [PATCH] add fed fund rate plot

---
 src/routes/+layout.svelte                     |  16 ++
 src/routes/economic-indicator/+page.server.ts |   2 -
 src/routes/economic-indicator/+page.svelte    | 240 ++++++++++++------
 src/routes/stocks/[tickerID]/+page.svelte     |   7 +-
 4 files changed, 176 insertions(+), 89 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4b35dfce..bbc40fdc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -542,6 +542,17 @@ const handleTwitchMessage = (event) => {
                               >Economic Calendar</a
                             >
                           </Button>
+                          <Button
+                            builders={[builder]}
+                            type="submit"
+                            class="w-full bg-[#141417] hover:bg-[#141417]"
+                          >
+                            <a
+                              href="/economic-indicator"
+                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              >Economic Indicator</a
+                            >
+                          </Button>
                           <!--
 
                           <Button
@@ -1054,6 +1065,11 @@ const handleTwitchMessage = (event) => {
                             class="text-[1rem] text-white ml-4 mt-4"
                             >Economic Calendar</a
                           >
+                          <a
+                            href="/economic-indicator"
+                            class="text-[1rem] text-white ml-4 mt-4"
+                            >Economic Indicator</a
+                          >
                           <!--
                           <a
                             href="/stock-splits-calendar"
diff --git a/src/routes/economic-indicator/+page.server.ts b/src/routes/economic-indicator/+page.server.ts
index 5a6fd03c..b704d431 100644
--- a/src/routes/economic-indicator/+page.server.ts
+++ b/src/routes/economic-indicator/+page.server.ts
@@ -12,8 +12,6 @@ export const load = async ({ locals, setHeaders }) => {
 
     const output = await response.json();
 
-    setHeaders({ "cache-control": "public, max-age=3000" });
-
     return output;
   };
 
diff --git a/src/routes/economic-indicator/+page.svelte b/src/routes/economic-indicator/+page.svelte
index c6ae6015..ce983154 100644
--- a/src/routes/economic-indicator/+page.svelte
+++ b/src/routes/economic-indicator/+page.svelte
@@ -13,7 +13,6 @@
   use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);
 
   export let data;
-  let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
   let isLoaded = false;
   let rawData;
@@ -22,6 +21,7 @@
   let optionsCPI;
   let optionsGDP;
   let optionsInflation;
+  let optionsFedFundRate;
 
   let filterRule = "annual";
 
@@ -504,13 +504,92 @@
 
     return options;
   }
+
+  async function plotFedFundRate() {
+    // Get the filtered data based on the selected time period
+    let dates = [];
+    let valueList = [];
+    // Iterate over the data and extract required information
+    data?.getEconomicIndicator?.fedFundRate?.forEach((item) => {
+      dates?.push(item?.date);
+      valueList?.push(item?.value);
+    });
+
+    const options = {
+      animation: false,
+      grid: {
+        left: "2%",
+        right: "2%",
+        bottom: "2%",
+        top: "10%",
+        containLabel: true,
+      },
+      xAxis: {
+        axisLabel: {
+          color: "#fff",
+          formatter: function (value) {
+            // Assuming dates are in the format 'yyyy-mm-dd'
+            // Extract the month and day from the date string and convert the month to its abbreviated name
+            const dateParts = value.split("-");
+            const year = dateParts[0].substring(2); // Extracting the last two digits of the year
+            const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects
+            return `${monthNames[monthIndex]} '${year}`;
+          },
+        },
+        data: dates,
+        type: "category",
+      },
+      yAxis: [
+        {
+          type: "value",
+          splitLine: {
+            show: false, // Disable x-axis grid lines
+          },
+          axisLabel: {
+            color: "#fff", // Change label color to white
+          },
+        },
+        {
+          type: "value",
+          splitLine: {
+            show: false, // Disable x-axis grid lines
+          },
+        },
+      ],
+      series: {
+        name: "Fed Fund Rate",
+        data: valueList,
+        type: "line",
+        areaStyle: { opacity: 0.2 },
+        smooth: true,
+        showSymbol: false,
+      },
+      tooltip: {
+        trigger: "axis",
+        hideDelay: 100,
+      },
+    };
+
+    return options;
+  }
+
   onMount(async () => {
     rawData = data?.getEconomicIndicator?.treasury ?? {};
 
     // Run the async functions concurrently
-    [optionsData, optionsCPI, optionsGDP, optionsInflation] = await Promise.all(
-      [plotData(), plotCPI(), plotGDP(), plotInflation()],
-    );
+    [
+      optionsData,
+      optionsCPI,
+      optionsGDP,
+      optionsInflation,
+      optionsFedFundRate,
+    ] = await Promise.all([
+      plotData(),
+      plotCPI(),
+      plotGDP(),
+      plotInflation(),
+      plotFedFundRate(),
+    ]);
 
     tableList = filterEndOfYearDates(rawData);
     tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
@@ -551,9 +630,9 @@
 </svelte:head>
 
 <section
-  class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 pb-40 lg:px-3"
+  class="w-full max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
 >
-  <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
+  <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
       <li><a href="/" class="text-gray-300">Home</a></li>
       <li class="text-gray-300">US Economic Indicator</li>
@@ -566,71 +645,54 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
-          <div
-            class="w-full m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
-              <!-- Start Column -->
-              <div>
-                <div class="flex flex-row justify-center items-center">
-                  <h1
-                    class="text-3xl sm:text-4xl text-white text-center font-bold mb-5"
-                  >
-                    Economic Indicators
-                  </h1>
-                </div>
-
-                <span
-                  class="text-white text-md font-medium text-center flex justify-center items-center"
-                >
-                  The indicators measure economic performance and identify
-                  growth trends.
-                </span>
-              </div>
-              <!-- End Column -->
-
-              <!-- Start Column -->
-              <div
-                class="hidden sm:block relative m-auto mb-5 mt-5 sm:mb-0 sm:mt-0"
-              >
-                <svg
-                  class="w-40 -my-5"
-                  viewBox="0 0 200 200"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <filter id="glow">
-                      <feGaussianBlur stdDeviation="5" result="glow" />
-                      <feMerge>
-                        <feMergeNode in="glow" />
-                        <feMergeNode in="SourceGraphic" />
-                      </feMerge>
-                    </filter>
-                  </defs>
-                  <path
-                    fill="#1E40AF"
-                    d="M57.6,-58.7C72.7,-42.6,81.5,-21.3,82,0.5C82.5,22.3,74.7,44.6,59.7,60.1C44.6,75.6,22.3,84.3,0,84.3C-22.3,84.2,-44.6,75.5,-61.1,60.1C-77.6,44.6,-88.3,22.3,-87.6,0.7C-86.9,-20.8,-74.7,-41.6,-58.2,-57.7C-41.6,-73.8,-20.8,-85.2,0.2,-85.4C21.3,-85.6,42.6,-74.7,57.6,-58.7Z"
-                    transform="translate(100 100)"
-                    filter="url(#glow)"
-                  />
-                </svg>
-
-                <div class="z-1 absolute top-1">
-                  <img
-                    class="w-[80px] ml-10"
-                    src={cloudFrontUrl + "/assets/economic_data_logo.png"}
-                    alt="logo"
-                    loading="lazy"
-                  />
-                </div>
-              </div>
-              <!-- End Column -->
-            </div>
+          <div class="mb-6 border-b-[2px]">
+            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
+              Economic Indicators
+            </h1>
           </div>
 
           {#if isLoaded}
-            <div class="w-screen sm:w-full m-auto mt-20 sm:mt-10 p-3">
-              <h2 class="text-2xl text-gray-200 font-bold">
+            <div
+              class="mb-8 w-full text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5"
+            >
+              <svg
+                class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256"
+                ><path
+                  fill="#FBCE3C"
+                  d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+                /></svg
+              >
+              We provide real-time and historical data on key economic indicators
+              like GDP, unemployment, and inflation, essential for tracking economic
+              performance and growth trends.
+            </div>
+
+            <div class="w-full m-auto mt-20 sm:mt-10">
+              <h2 class="text-xl sm:text-2xl text-gray-200 font-bold">
+                Federal Fund Rate
+              </h2>
+
+              <div class="text-[1rem] text-white mt-2 mb-2">
+                The federal funds rate is the interest rate at which banks lend
+                to each other overnight to maintain reserve balances. It's a
+                critical tool for U.S. monetary policy, influencing borrowing
+                costs for consumers and businesses, economic growth, and
+                inflation. Changes in the federal funds rate affect everything
+                from loan interest rates to stock market performance, making it
+                a key indicator of economic health.
+              </div>
+
+              <Lazy>
+                <div class="app w-full">
+                  <Chart {init} options={optionsFedFundRate} class="chart" />
+                </div>
+              </Lazy>
+
+              <h2
+                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
+              >
                 Consumer Price Index (CPI)
               </h2>
 
@@ -648,7 +710,9 @@
                 </div>
               </Lazy>
 
-              <h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
+              <h2
+                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
+              >
                 Gross Domestic Product (GDP)
               </h2>
 
@@ -666,7 +730,9 @@
                 </div>
               </Lazy>
 
-              <h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
+              <h2
+                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
+              >
                 Unemployment Rate vs Inflation Rate
               </h2>
 
@@ -686,7 +752,9 @@
                 </div>
               </Lazy>
 
-              <h2 class="text-2xl text-gray-200 font-bold mt-20 sm:mt-10">
+              <h2
+                class="text-xl sm:text-2xl text-gray-200 font-bold mt-20 sm:mt-10"
+              >
                 Treasury Rates
               </h2>
 
@@ -917,10 +985,10 @@
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial}
             <div
-              on:click={() => goto("/pricing")}
               class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
             >
-              <div
+              <a
+                href="/pricing"
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
@@ -932,42 +1000,46 @@
                 <span class="text-white p-3 ml-3 mr-3">
                   Upgrade now for unlimited access to all data and tools.
                 </span>
-              </div>
+              </a>
             </div>
           {/if}
 
           <div
-            on:click={() => goto("/analysts")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/economic-calendar"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Wallstreet Analyst
+                  Economic Events
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
-                Get the latest top Wall Street analyst ratings.
+                Stay updated on upcoming Economic Events worldwide.
               </span>
-            </div>
+            </a>
           </div>
 
           <div
-            on:click={() => goto("/politicians")}
             class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
-            <div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
+            <a
+              href="/earnings-calendar"
+              class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
+            >
               <div class="w-full flex justify-between items-center p-3 mt-3">
                 <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Congress Trading
+                  Earnings Calendar
                 </h2>
                 <ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
               </div>
               <span class="text-white p-3 ml-3 mr-3">
-                Get the latest top Congress trading insights.
+                Get the latest Earnings of companies.
               </span>
-            </div>
+            </a>
           </div>
         </aside>
       </div>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index b304482d..bc5c9572 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -619,23 +619,24 @@
       exportList = await response.json();
 
       exportList = exportList?.map(
-        ({ time, open, high, low, close, date }) => ({
+        ({ time, open, high, low, close, date, volume }) => ({
           date: timePeriod === "max" ? time : date, // Use 'time' if timePeriod is "max", otherwise use 'date'
           open,
           high,
           low,
           close,
+          volume
         }),
       );
 
       const csvRows = [];
 
       // Add headers row
-      csvRows.push("time,open,high,low,close");
+      csvRows.push("time,open,high,low,close, volume");
 
       // Add data rows
       for (const row of exportList) {
-        const csvRow = `${row.date},${row.open},${row.high},${row.low},${row.close}`;
+        const csvRow = `${row.date},${row.open},${row.high},${row.low},${row.close},${row.volume}`;
         csvRows.push(csvRow);
       }