add economic indicator page

src/routes/economic-indicator/+page.svelte

@@ -17,9 +17,10 @@ export let data;
 let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
 let isLoaded = false;
-let rawData =  data?.getEconomicData || [];
+let rawData;
 let tableList = [];
 let optionsData;
+let optionsCPI;
 let filterRule = 'annual';
 
 let timePeriod = 'threeYears';
@@ -210,10 +211,71 @@ async function plotData() {
     return options;
 }
 
+async function plotCPI() {
+    // Get the filtered data based on the selected time period
+    let dates = [];
+    let valueList = [];
+    // Iterate over the data and extract required information
+    data?.getEconomicIndicator?.cpi?.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',
+            },
+            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: 'CPI',
+            data: valueList,
+            type: 'line',
+            areaStyle: {opacity: 0.2},
+            smooth: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            hideDelay: 100,
+        },
+    };
+
+    return options;
+}
+
   
 onMount(async () => {
-  rawData = data?.getEconomicData ?? [];
+  rawData = data?.getEconomicIndicator?.treasury ?? {};
   optionsData = await plotData();
+  optionsCPI = await plotCPI();
   tableList = filterEndOfYearDates(rawData);
   tableList?.sort((a, b) => new Date(b?.date) - new Date(a?.date));
   isLoaded = true;
@@ -228,20 +290,20 @@ onMount(async () => {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>
-      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} US Economic Data · stocknear
+      {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} US Economic Indicator · stocknear
   </title>
-  <meta name="description" content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`} />
+  <meta name="description" content={`Economic indicators measure economic performance and identify growth trends.`} />
   
   <!-- Other meta tags -->
-  <meta property="og:title" content={`US Economic Data · stocknear`}/>
+  <meta property="og:title" content={`US Economic Indicator · stocknear`}/>
-  <meta property="og:description" content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`} />
+  <meta property="og:description" content={`Economic indicators measure economic performance and identify growth trends.`} />
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
   
   <!-- Twitter specific meta tags -->
   <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content={`US Economic Data · stocknear`}/>
+  <meta name="twitter:title" content={`US Economic Indicator · stocknear`}/>
-  <meta name="twitter:description" content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`} />
+  <meta name="twitter:description" content={`Economic indicators measure economic performance and identify growth trends.`} />
   <!-- Add more Twitter meta tags as needed -->
   
   </svelte:head>
@@ -253,7 +315,7 @@ onMount(async () => {
     <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
       <ul>
         <li><a href="/" class="text-gray-300">Home</a></li>
-        <li class="text-gray-300">US Economic Data</li>
+        <li class="text-gray-300">US Economic Indicator</li>
       </ul>
     </div>
             
@@ -272,12 +334,12 @@ onMount(async () => {
                     <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">
-                           US Economic Data
+                            Economic Indicator
                         </h1>
                       </div>
             
                       <span class="text-white text-md font-medium text-center flex justify-center items-center ">
-                        US Economic Data such as treasury rate, CPI 
+                        The indicators measure economic performance and identify growth trends.
                       </span>
             
         
@@ -315,9 +377,21 @@ onMount(async () => {
                 {#if isLoaded}
                 <div class="w-screen sm:w-full m-auto mt-20 sm:mt-10 p-3">
                   
-                  <h1 class="text-2xl text-gray-200 font-bold">
+                  <h2 class="text-2xl text-gray-200 font-bold">
+                    Consumer Price Index (CPI)
+                  </h2>
+
+                  <div class="text-[1rem] text-white mt-2 mb-2">
+                    The CPI measures the average change in prices for a typical basket of goods. It's key for tracking inflation, affecting interest rates, wages, and business decisions. Rising CPI indicates inflation, impacting purchasing power and the overall economy.
+                  </div>
+
+                  <div class="app w-full ">
+                    <Chart {init} options={optionsCPI} class="chart" />
+                  </div>
+
+                  <h2 class="text-2xl text-gray-200 font-bold mt-10">
                     Treasury Rates
-                  </h1>
+                  </h2>
 
                   <div class="text-[1rem] text-white mt-2 mb-2">
                     Treasury rates are the interest rates that the US government pays on its debt obligations, and they are a key benchmark for interest rates across the economy.
@@ -383,7 +457,7 @@ onMount(async () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {#each tableList as item, index}
+                      {#each tableList as item}
                           <!-- row -->
                           <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
                           
@@ -394,7 +468,7 @@ onMount(async () => {
                                 {item?.month1}
                               </td>
                               <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
-                                {item?.month2}
+                                {item?.month2 !== null ? item?.month2 : '-'}
                               </td>
                               <td class="text-white font-medium text-sm sm:text-[1rem] text-end whitespace-nowrap border-b-[#09090B]">
                                 {item?.month3}

src/routes/economic-indicator/+page.ts

@@ -3,15 +3,15 @@ import { getCache, setCache } from '$lib/store';
 
 
 export const load = async ({parent}) => {
-  const getEconomicData = async () => {
+  const getEconomicIndicator = async () => {
     let output;
     const {apiKey, apiURL} = await parent();
 
-    const cachedData = getCache('', 'getEconomicData');
+    const cachedData = getCache('', 'getEconomicIndicator');
     if (cachedData) {
       output = cachedData;
     } else {
-    const response = await fetch(apiURL + '/economic-data', {
+    const response = await fetch(apiURL + '/economic-indicator', {
       method: 'GET',
       headers: {
         "Content-Type": "application/json", "X-API-KEY": apiKey
@@ -21,7 +21,7 @@ export const load = async ({parent}) => {
     output = await response.json();
 
 
-    setCache('', output, 'getEconomicData');
+    setCache('', output, 'getEconomicIndicator');
 
     }
 
@@ -30,6 +30,6 @@ export const load = async ({parent}) => {
 
   // Make sure to return a promise
   return {
-    getEconomicData: await getEconomicData()
+    getEconomicIndicator: await getEconomicIndicator()
   };
 };

src/routes/home/+page.svelte

@@ -202,10 +202,10 @@ onMount( async() => {
           <Feedback data={data} />
         {/if}
         
-        <!--
+        
         <div class="text-center mb-10 relative w-fit flex justify-center m-auto">
-          <a href="/corporate-lobbying-tracker" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-lg m-auto font-medium text-[1rem] flex items-center">
+          <a href="/economic-indicator" class="text-white antialiased bg-[#27272A] w-full px-4 py-2 rounded-lg m-auto font-medium text-[1rem] flex items-center">
-            <span class="font-semibold">Corporate Lobbying Tracker</span>
+            <span class="font-semibold">US Economic Indicator</span>
           </a>
           <div class="absolute top-[-1.2rem] -right-5 sm:-right-8 rotate-[7deg]">
             <span class="bg-[#FBCE3C] text-black text-sm sm:text-[0.9rem] rounded-xl font-semibold sm:me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
@@ -213,7 +213,7 @@ onMount( async() => {
             </span>
           </div>
         </div>
-      -->
+      
 
         <h1 class="text-white text-3xl font-semibold text-start w-full pl-4 pb-4 sm:pb-2">
           Dashboard