diff --git a/src/routes/potus-tracker/+page.server.ts b/src/routes/potus-tracker/+page.server.ts index e6136105..2c505234 100644 --- a/src/routes/potus-tracker/+page.server.ts +++ b/src/routes/potus-tracker/+page.server.ts @@ -1,7 +1,8 @@ -export const load = async ({ locals, setHeaders }) => { - const getData = async () => { +export const load = async ({ locals }) => { const { apiKey, apiURL, user } = locals; + const getData = async () => { + // make the POST request to the endpoint const response = await fetch(apiURL + "/potus-tracker", { method: "GET", @@ -16,8 +17,25 @@ export const load = async ({ locals, setHeaders }) => { return output; }; + const getEggPrice = async () => { + + // make the POST request to the endpoint + const response = await fetch(apiURL + "/egg-price", { + method: "GET", + headers: { + "Content-Type": "application/json", + "X-API-KEY": apiKey, + }, + }); + + const output = await response.json(); + + return output; + }; + // Make sure to return a promise return { getData: await getData(), + getEggPrice: await getEggPrice(), }; }; diff --git a/src/routes/potus-tracker/+page.svelte b/src/routes/potus-tracker/+page.svelte index 4f49a12a..979d4ccf 100644 --- a/src/routes/potus-tracker/+page.svelte +++ b/src/routes/potus-tracker/+page.svelte @@ -2,6 +2,28 @@ import SEO from "$lib/components/SEO.svelte"; import Map from "$lib/components/Map.svelte"; import Infobox from "$lib/components/Infobox.svelte"; + import { monthNames } from "$lib/utils"; + import { screenWidth } from "$lib/store"; + + import { Chart } from "svelte-echarts"; + + import { init, use } from "echarts/core"; + import { LineChart, BarChart } from "echarts/charts"; + import { + GridComponent, + TooltipComponent, + LegendComponent, + } from "echarts/components"; + import { CanvasRenderer } from "echarts/renderers"; + + use([ + LineChart, + BarChart, + GridComponent, + TooltipComponent, + LegendComponent, + CanvasRenderer, + ]); export let data; @@ -22,6 +44,139 @@ let modalTitle = "n/a"; let modalDescription = "n/a"; + + const tabs = [ + { + title: "Location Tracker", + }, + { + title: "Egg Price Tracker", + }, + ]; + + let activeIdx = 0; + + function plotData() { + const history = data?.getEggPrice?.history || []; + const dateList = history.map((item) => item?.date ?? null); + const priceList = history.map((item) => item?.price ?? null); + const yoyChangeList = history.map((item) => item?.yoyChange ?? null); + + const options = { + animation: false, + tooltip: { + trigger: "axis", + hideDelay: 100, + borderColor: "#969696", // Black border color + borderWidth: 1, // Border width of 1px + backgroundColor: "#313131", // Optional: Set background color for contrast + textStyle: { + color: "#fff", // Optional: Text color for better visibility + }, + formatter: function (params) { + const timestamp = params[0].axisValue; + let result = timestamp + "
"; + + params?.forEach((param) => { + const marker = + ''; + + // Check if it's "YoY Change" and append "%" + const value = + param.seriesName === "YoY Change" + ? param.value + "%" + : param.value; + + result += marker + param.seriesName + ": " + value + "
"; + }); + + return result; + }, + axisPointer: { + lineStyle: { + color: "#fff", + }, + }, + }, + silent: true, + grid: { + left: $screenWidth < 640 ? "5%" : "4%", + right: $screenWidth < 640 ? "5%" : "0%", + bottom: "4%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + data: dateList, + axisLabel: { + color: "#fff", + + formatter: function (value) { + // Assuming dates are in the format 'yyyy-mm-dd' + const dateParts = value.split("-"); + const monthIndex = parseInt(dateParts[1]) - 1; // Months are zero-indexed in JavaScript Date objects + const year = parseInt(dateParts[0]); + const day = parseInt(dateParts[2]); + return `${day} ${monthNames[monthIndex]} ${year}`; + }, + }, + }, + ], + yAxis: [ + { + type: "value", + splitLine: { + show: false, // Disable x-axis grid lines + }, + axisLabel: { + show: false, // Hide y-axis labels + }, + }, + { + type: "value", + splitLine: { + show: false, // Disable x-axis grid lines + }, + position: "right", + axisLabel: { + show: false, // Hide y-axis labels + }, + }, + ], + series: [ + { + name: "Price per Dozens", + type: "line", + data: priceList, + yAxisIndex: 1, + lineStyle: { width: 2 }, + itemStyle: { + color: "#fff", + }, + smooth: true, + showSymbol: false, + }, + { + name: "YoY Change", + type: "bar", + lineStyle: { width: 2 }, + data: yoyChangeList, + itemStyle: { + color: "#9B5DC4", + }, + smooth: true, + showSymbol: false, + }, + ], + }; + return options; + } + + let options = plotData();
+ + + {#if activeIdx === 0} +

+ The US President is currently located in {data?.getData?.city ?? + "n/a"} +

+ +
+ +
+ + Map data © OpenStreetMap + + {:else} +

Egg Stats:

+ +
+
+ Current Price: {data?.getEggPrice?.currentPrice} +
+
+ Avg. Price: + {data?.getEggPrice?.avgPrice} +
+
+ Min. Price: + {data?.getEggPrice?.minPrice} +
+
+ Max. Price: + {data?.getEggPrice?.maxPrice} +
+
+ +
+ +
+ + + The Federal Reserve Economic Data is collected monthly and + updates egg prices across the United States. + + {/if} + +

+ Official Presidential Schedule +

+
-

- The US President is currently located in {data?.getData?.city ?? - "n/a"} -

- -
- -
- - Map data © OpenStreetMap - - -

- Official Presidential Schedule -

-
{#each Object.entries(groupedByDate) as [date, items], indexA}
@@ -245,3 +451,21 @@
+ +