From c9df82745f53ef372e6bbaf73f73d47768ee026c Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Fri, 21 Feb 2025 18:44:18 +0100 Subject: [PATCH] ui fix --- src/lib/components/Map.svelte | 2 +- src/lib/utils.ts | 2 +- src/routes/potus-tracker/+page.svelte | 747 ++++++++++---------------- 3 files changed, 295 insertions(+), 456 deletions(-) diff --git a/src/lib/components/Map.svelte b/src/lib/components/Map.svelte index e2027e68..85d6ffb1 100644 --- a/src/lib/components/Map.svelte +++ b/src/lib/components/Map.svelte @@ -17,7 +17,7 @@ // White House coordinates const LON = -77.0365427; const LAT = 38.8950368; - const ZOOM = 5; + const ZOOM = 4.5; let mapElement; let map; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 2176fec2..3b546533 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -19,7 +19,7 @@ type FlyAndScaleParams = { }; export function removeCompanyStrings(name) { - const wordsToRemove = ["Technologies", "Inc."]; + const wordsToRemove = ["Technologies", "Inc.","Corp.","Corporation","Holding","Limited","Group"]; if (!name) return ""; return wordsToRemove?.reduce((acc, word) => acc.replace(word, "").trim(), name); } diff --git a/src/routes/potus-tracker/+page.svelte b/src/routes/potus-tracker/+page.svelte index b750b7a6..620d7bd3 100644 --- a/src/routes/potus-tracker/+page.svelte +++ b/src/routes/potus-tracker/+page.svelte @@ -6,9 +6,6 @@ import { screenWidth } from "$lib/store"; import ArrowLogo from "lucide-svelte/icons/move-up-right"; - import { Chart } from "svelte-echarts"; - import ScrollToTop from "$lib/components/ScrollToTop.svelte"; - import { init, use } from "echarts/core"; import { LineChart, BarChart } from "echarts/charts"; import { @@ -84,128 +81,6 @@ return text.slice(0, maxLength) + "..."; } - 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: "#2b7fff", - }, - smooth: true, - showSymbol: false, - }, - ], - }; - return options; - } - - let options = plotData(); - function latestInfoDate(inputDate) { // Create a Date object for the input date and convert it to New York time zone const inputDateLocal = new Date(inputDate).toLocaleString("en-US", { @@ -256,89 +131,39 @@ >
-

- POTUS Tracker -

+
+

+ POTUS Tracker +

+
- - - {#if activeIdx === 0} -
- + = 0 ? "grown" : "declined"} by ${data?.getData?.returnSince ?? "n/a"}%.`} - /> -
- -

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

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

- Quick Stats: -

- -
-
- Current Price: {data?.getEggPrice?.currentPrice} -
-
- Avg. Price: - {data?.getEggPrice?.avgPrice} -
-
- Min. Price: - {data?.getEggPrice?.minPrice} -
-
- Max. Price: - {data?.getEggPrice?.maxPrice} -
-
- -
- -
- - - {/if} +
+ +

+ The President is in {(data?.getData?.city === "Washington" + ? "the White House" + : data?.getData?.city) ?? "n/a"} +

+ +
+ +
+ + Map data © OpenStreetMap +