Add Min/Max to item price graph

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "betterfloat",
 	"displayName": "BetterFloat",
-	"version": "2.8.2",
+	"version": "2.8.3",
 	"description": "Enhance your experience on CSFloat.com, Skinport.com & Skinbid.com!",
 	"author": "Rums",
 	"license": "CC BY NC SA 4.0",
@@ -68,8 +68,14 @@
 	"manifest": {
 		"web_accessible_resources": [
 			{
-				"matches": ["https://*.csfloat.com/*", "https://*.skinport.com/*", "https://*.skinbid.com/*"],
-				"resources": ["inject.ts"]
+				"matches": [
+					"https://*.csfloat.com/*",
+					"https://*.skinport.com/*",
+					"https://*.skinbid.com/*"
+				],
+				"resources": [
+					"inject.ts"
+				]
 			}
 		],
 		"key": "$CRX_PUBLIC_KEY",
@@ -79,11 +85,20 @@
 				"strict_min_version": "109.0"
 			}
 		},
-		"host_permissions": ["https://*.csfloat.com/*", "https://*.skinport.com/*", "https://*.skinbid.com/*"],
+		"host_permissions": [
+			"https://*.csfloat.com/*",
+			"https://*.skinport.com/*",
+			"https://*.skinbid.com/*"
+		],
 		"externally_connectable": {
-			"matches": ["https://*.rums.dev/*"]
+			"matches": [
+				"https://*.rums.dev/*"
+			]
 		},
-		"permissions": ["unlimitedStorage", "storage"]
+		"permissions": [
+			"unlimitedStorage",
+			"storage"
+		]
 	},
 	"pnpm": {
 		"peerDependencyRules": {

src/contents/csfloat_script.ts

@@ -6,6 +6,8 @@ import Decimal from 'decimal.js';
 import { dynamicUIHandler, mountCSFBargainButtons } from '~lib/handlers/urlhandler';
 import { CSFloatHelpers } from '~lib/helpers/csfloat_helpers';
 import {
+	ICON_ARROWDOWN,
+	ICON_ARROWUP2,
 	ICON_ARROWUP_SMALL,
 	ICON_BUFF,
 	ICON_C5GAME,
@@ -38,6 +40,7 @@ import { genGemContainer } from '~lib/util/uigeneration';
 import { activateHandler, initPriceMapping } from '../lib/handlers/eventhandler';
 import {
 	getCSFCurrencyRate,
+	getCSFHistoryGraph,
 	getCSFPopupItem,
 	getCrimsonWebMapping,
 	getFirstCSFItem,
@@ -187,7 +190,10 @@ function applyMutation() {
 						await adjustSalesTableRow(addedNode);
 					} else if (addedNode.className.toString().includes('mat-mdc-header-row')) {
 						// header of the latest sales table of an item popup
-						await adjustSalesTableHeaderRow(addedNode);
+						adjustSalesTableHeaderRow(addedNode);
+					} else if (addedNode.className.toString().includes('chart-container')) {
+						// header of the latest sales table of an item popup
+						await adjustChartContainer(addedNode);
 					} else if (location.pathname === '/profile/offers' && addedNode.className.startsWith('container')) {
 						// item in the offers page when switching from another page
 						await adjustOfferContainer(addedNode);
@@ -345,7 +351,7 @@ async function adjustBargainPopup(itemContainer: Element, popupContainer: Elemen
 	}
 }
 
-async function adjustSalesTableHeaderRow(container: Element) {
+function adjustSalesTableHeaderRow(container: Element) {
 	const keychainBadge = document.querySelector('mat-dialog-container div.keychain-pattern');
 	if (!keychainBadge || container.querySelector('.mat-column-pattern')) return;
 
@@ -457,6 +463,45 @@ async function adjustSalesTableRow(container: Element) {
 	}
 }
 
+async function adjustChartContainer(container: Element) {
+	let chartData = getCSFHistoryGraph();
+
+	let tries = 10;
+	while (!chartData && tries-- > 0) {
+		await new Promise((r) => setTimeout(r, 200));
+		chartData = getCSFHistoryGraph();
+	}
+	console.log('[BetterFloat] Chart data:', chartData);
+
+	if (!chartData) return;
+
+	const rangeSelectorDiv = container.querySelector<HTMLElement>('.range-selector');
+	if (!rangeSelectorDiv) return;
+
+	const userCurrency = CSFloatHelpers.userCurrency();
+	// chartData of max avg_price
+	const chartPrices = chartData.map((x) => x.avg_price);
+	const chartMax = Math.max(...chartPrices);
+	const chartMin = Math.min(...chartPrices);
+
+	const maxMinContainer = html`
+		<div style="width: 100%; display: flex; gap: 4px; justify-content: space-between;">
+			<div style="display: flex; gap: 12px; align-items: center; padding: 0 12px; background: var(--highlight-background-minimal); border-radius: 7px;">
+				<span style="color: var(--subtext-color); font-weight: 500; letter-spacing: .03em; display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 24px;">
+					<img src="${ICON_ARROWDOWN}" style="width: 16px; height: 16px; filter: invert(1);" alt="Min" />
+					${Intl.NumberFormat(undefined, { style: 'currency', currency: userCurrency, currencyDisplay: 'narrowSymbol', minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(chartMin)}
+				</span>
+				<span style="color: var(--subtext-color); font-weight: 500; letter-spacing: .03em; display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 24px;">
+					<img src="${ICON_ARROWUP2}" style="width: 16px; height: 16px; filter: invert(1);" alt="Max" />
+					${Intl.NumberFormat(undefined, { style: 'currency', currency: userCurrency, currencyDisplay: 'narrowSymbol', minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(chartMax)}
+				</span>
+			</div>
+			${rangeSelectorDiv?.outerHTML}
+		</div>
+	`;
+	rangeSelectorDiv.outerHTML = maxMinContainer;
+}
+
 enum POPOUT_ITEM {
 	NONE = 0,
 	PAGE = 1,

src/lib/handlers/mappinghandler.ts

@@ -212,7 +212,7 @@ export function getCSFUserCurrency() {
 	return CSFLOAT_API_DATA.location?.inferred_location.currency ?? 'USD';
 }
 
-export function getWholeHistory() {
+export function getCSFHistoryGraph() {
 	const history = CSFLOAT_API_DATA.historyGraph;
 	CSFLOAT_API_DATA.historyGraph = [];
 	return history;

src/lib/util/globals.ts

@@ -1,6 +1,9 @@
 import iconBuff from 'data-base64:/assets/buff_favicon.png';
 import iconCsfloat from 'data-base64:/assets/csfloat.png';
 import iconArrowup from 'data-base64:/assets/icons/arrow-up-right-from-square-solid.svg';
+import iconArrowup2 from 'data-base64:/assets/icons/arrow-up.svg';
+import iconArrowupSmall from 'data-text:/assets/icons/arrow-up-right-from-square-solid-small.svg';
+import iconArrowdown from 'data-base64:/assets/icons/arrow-down.svg';
 import iconBan from 'data-base64:/assets/icons/ban-solid.svg';
 import iconCameraFlipped from 'data-base64:/assets/icons/camera-flipped.svg';
 import iconCamera from 'data-base64:/assets/icons/camera-solid.svg';
@@ -25,7 +28,6 @@ import iconPinkGalaxy1 from 'data-base64:/assets/patterns/pink-galaxy-1.png';
 import iconPinkGalaxy2 from 'data-base64:/assets/patterns/pink-galaxy-2.png';
 import iconPinkGalaxy3 from 'data-base64:/assets/patterns/pink-galaxy-3.png';
 import iconSpiderWeb from 'data-base64:/assets/patterns/spider-web.svg';
-import iconArrowupSmall from 'data-text:/assets/icons/arrow-up-right-from-square-solid-small.svg';
 
 export const DISCORD_URL = 'https://discord.gg/VQWXp33nSW';
 export const GITHUB_URL = 'https://github.com/GODrums/BetterFloat';
@@ -42,7 +44,9 @@ export const ICON_CAMERA_FLIPPED = iconCameraFlipped;
 export const ICON_BAN = iconBan;
 export const ICON_CLOCK = iconClock;
 export const ICON_ARROWUP = iconArrowup;
+export const ICON_ARROWUP2 = iconArrowup2;
 export const ICON_ARROWUP_SMALL = iconArrowupSmall;
+export const ICON_ARROWDOWN = iconArrowdown;
 export const ICON_CRIMSON = iconCrimson;
 export const ICON_OVERPRINT_ARROW = iconOverprintArrow;
 export const ICON_OVERPRINT_FLOWER = iconOverprintFlower;