diff --git a/src/routes/economic-data/+page.svelte b/src/routes/economic-indicator/+page.svelte similarity index 86% rename from src/routes/economic-data/+page.svelte rename to src/routes/economic-indicator/+page.svelte index 3bd1548a..3ff1e76a 100644 --- a/src/routes/economic-data/+page.svelte +++ b/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 () => { - {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} US Economic Data · stocknear + {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} US Economic Indicator · stocknear - + - - + + - - + + @@ -253,7 +315,7 @@ onMount(async () => {
@@ -272,12 +334,12 @@ onMount(async () => {

- US Economic Data + Economic Indicator

- US Economic Data such as treasury rate, CPI + The indicators measure economic performance and identify growth trends. @@ -314,10 +376,22 @@ onMount(async () => { {#if isLoaded}
- -

+ +

+ Consumer Price Index (CPI) +

+ +
+ 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. +
+ +
+ +
+ +

Treasury Rates -

+
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 () => { - {#each tableList as item, index} + {#each tableList as item} @@ -394,7 +468,7 @@ onMount(async () => { {item?.month1} - {item?.month2} + {item?.month2 !== null ? item?.month2 : '-'} {item?.month3} diff --git a/src/routes/economic-data/+page.ts b/src/routes/economic-indicator/+page.ts similarity index 62% rename from src/routes/economic-data/+page.ts rename to src/routes/economic-indicator/+page.ts index 8f186faf..5d783607 100644 --- a/src/routes/economic-data/+page.ts +++ b/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() }; }; \ No newline at end of file diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte index 86b2f28e..f32dd68c 100644 --- a/src/routes/home/+page.svelte +++ b/src/routes/home/+page.svelte @@ -202,10 +202,10 @@ onMount( async() => { {/if} - +

Dashboard