From cd9748e59f1dd9ef31afb22195b8d5a1346ec5c3 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Mon, 16 May 2022 00:09:44 -0500
Subject: start adding auctionprices page

---
 src/lib/AuctionPriceScatterplot.svelte | 49 ++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/lib/AuctionPriceScatterplot.svelte

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
new file mode 100644
index 0000000..f887725
--- /dev/null
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { ItemAuctionsSchema } from './APITypes'
+
+	export let item: ItemAuctionsSchema
+
+	let maxCoins: number = item.auctions.reduce((max, auction) => Math.max(max, auction.coins), 0)
+
+	let currentTimestamp = Math.floor(Date.now() / 1000)
+
+	let lowestCoinsAuction = item.auctions.reduce(
+		(min, auction) => (auction.coins < min.coins ? auction : min),
+		{ coins: Infinity, ts: currentTimestamp }
+	)
+
+	let earliestTimestamp = item.auctions.length > 0 ? item.auctions[0].ts : 0
+
+	let minutesBetween = (currentTimestamp - earliestTimestamp) / 360
+
+	let gridWidth = 100 / minutesBetween
+</script>
+
+<svg viewBox="0 0 100 100" class="item-auction-history">
+	<defs>
+		<pattern id="grid-{item._id}" width={gridWidth} height="10" patternUnits="userSpaceOnUse">
+			<path d="M {gridWidth} 0 L 0 0 0 10" fill="none" stroke="#fff2" stroke-width="1" />
+		</pattern>
+	</defs>
+	<rect width="100%" height="100%" fill="url(#grid-{item._id})" />
+
+	{#each item.auctions as auction}
+		{@const timestampPercentage =
+			(auction.ts - earliestTimestamp) / (currentTimestamp - earliestTimestamp)}
+		<circle
+			cx={timestampPercentage * 100}
+			cy={100 - (auction.coins / maxCoins) * 100}
+			r="1"
+			stroke-width="4"
+			fill={auction.bin ? '#11b' : '#1b1'}
+		/>
+	{/each}
+	<!-- {item.auctions} -->
+</svg>
+
+<style>
+	.item-auction-history {
+		height: 10em;
+		width: 100%;
+	}
+</style>
-- 
cgit 


From 8ba9c7090c88c04d43ca727b7ed012cf5a6b58c8 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Mon, 16 May 2022 15:36:06 +0000
Subject: start adding really basic tooltip

---
 src/lib/AuctionPreviewTooltip.svelte   | 22 ++++++++++++++++++++++
 src/lib/AuctionPriceScatterplot.svelte | 16 ++++++++++++++++
 src/lib/utils.ts                       |  8 +++++++-
 src/routes/auctionprices.svelte        | 16 ++++++++++++++--
 svelte.config.js                       | 18 +++++++++---------
 5 files changed, 68 insertions(+), 12 deletions(-)
 create mode 100644 src/lib/AuctionPreviewTooltip.svelte

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
new file mode 100644
index 0000000..226feee
--- /dev/null
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { PreviewedAuctionData } from './utils'
+
+	export let preview: PreviewedAuctionData | null
+</script>
+
+{#if preview}
+	<div id="auction-preview-tooltip" style="left: {preview.pageX}px; top: {preview.pageY}px">
+		<p>uuid: {JSON.stringify(preview)}</p>
+	</div>
+{/if}
+
+<style>
+	#auction-preview-tooltip {
+		position: absolute;
+		width: 10em;
+		height: 10em;
+		border: 1px solid rgba(255, 255, 255, 0.1);
+		background: var(--theme-lighter-background);
+		pointer-events: none;
+	}
+</style>
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index f887725..e416163 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { ItemAuctionsSchema } from './APITypes'
+	import type { PreviewedAuctionData } from './utils'
 
 	export let item: ItemAuctionsSchema
+	export let currentlyPreviewedAuction: PreviewedAuctionData | null
 
 	let maxCoins: number = item.auctions.reduce((max, auction) => Math.max(max, auction.coins), 0)
 
@@ -17,6 +19,17 @@
 	let minutesBetween = (currentTimestamp - earliestTimestamp) / 360
 
 	let gridWidth = 100 / minutesBetween
+
+	function showAuctionPreview(e, uuid: string) {
+		currentlyPreviewedAuction = {
+			pageX: e.pageX,
+			pageY: e.pageY,
+			uuid,
+		}
+	}
+	function hideAuctionPreview() {
+		currentlyPreviewedAuction = null
+	}
 </script>
 
 <svg viewBox="0 0 100 100" class="item-auction-history">
@@ -36,6 +49,9 @@
 			r="1"
 			stroke-width="4"
 			fill={auction.bin ? '#11b' : '#1b1'}
+			on:mouseenter={e => showAuctionPreview(e, auction.id)}
+			on:click={e => showAuctionPreview(e, auction.id)}
+			on:mouseleave={hideAuctionPreview}
 		/>
 	{/each}
 	<!-- {item.auctions} -->
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e34d573..c2e4b86 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -219,4 +219,10 @@ export function skyblockTime(year: number, month = 1, day = 1) {
     if (month) time += 37200000 * (month - 1)
     if (day) time += 1200000 * (day - 1)
     return time
-}
\ No newline at end of file
+}
+
+export interface PreviewedAuctionData {
+    pageX: number
+    pageY: number
+    uuid: string
+}
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index f464f7b..4e7bfde 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -16,13 +16,23 @@
 <script lang="ts">
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
-	import { millisecondsToTime, TIER_COLORS, colorCodes, cleanId, toTitleCase } from '$lib/utils'
+	import {
+		millisecondsToTime,
+		TIER_COLORS,
+		colorCodes,
+		cleanId,
+		toTitleCase,
+		type PreviewedAuctionData,
+	} from '$lib/utils'
 	import type { ItemAuctionsSchema, ItemListData, ItemListItem } from '$lib/APITypes'
 	import Item from '$lib/minecraft/Item.svelte'
 	import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte'
+	import AuctionPreviewTooltip from '$lib/AuctionPreviewTooltip.svelte'
 
 	export let data: ItemAuctionsSchema[]
 
+	let currentlyPreviewedAuction: PreviewedAuctionData | null
+
 	let query: string = ''
 
 	let pageHeight = 0
@@ -44,6 +54,8 @@
 
 <svelte:window on:scroll={checkScroll} />
 
+<AuctionPreviewTooltip preview={currentlyPreviewedAuction} />
+
 <main>
 	<h1>SkyBlock Auction Prices</h1>
 	<div class="filter-items-settings">
@@ -74,7 +86,7 @@
 					{/if}
 				</div>
 				<div class="item-scatterplot">
-					<AuctionPriceScatterplot {item} />
+					<AuctionPriceScatterplot {item} bind:currentlyPreviewedAuction />
 				</div>
 			</div>
 		{/each}
diff --git a/svelte.config.js b/svelte.config.js
index b4cc10d..23b0e12 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -42,15 +42,15 @@ const config = {
 				},
 			},
 			// if the user is on replit or gitpod, use a secure websocket
-			server:
-				process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
-					? {
-						hmr: {
-							protocol: 'wss',
-							port: 443,
-						},
-					}
-					: {},
+			// server:
+			// 	process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
+			// 		? {
+			// 			hmr: {
+			// 				protocol: 'wss',
+			// 				port: 443,
+			// 			},
+			// 		}
+			// 		: {},
 		},
 	}
 }
-- 
cgit 


From b6d23f4334eae873e7d32a4d5bb5f8b3a1a67ce5 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Tue, 17 May 2022 16:20:20 +0000
Subject: improved auction price scatterplot

---
 src/lib/AuctionPreviewTooltip.svelte   | 40 +++++++++++++++++---
 src/lib/AuctionPriceScatterplot.svelte | 68 +++++++++++++++++++++-------------
 src/lib/utils.ts                       |  4 +-
 svelte.config.js                       | 18 ++++-----
 4 files changed, 89 insertions(+), 41 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 226feee..223cec2 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -1,22 +1,52 @@
 <script lang="ts">
+	import { API_URL } from './api'
+
+	import Loader from './layout/Loader.svelte'
 	import type { PreviewedAuctionData } from './utils'
 
 	export let preview: PreviewedAuctionData | null
+	export let lastPreview: PreviewedAuctionData | null
+
+	$: lastPreview = preview ?? lastPreview
+
+	function onClick(e) {
+		// commented out because it doesn't work: sometimes e.target is null when we click a point
+		// if (!e.target.closest('.item-auction-history')) {
+		// 	preview = null
+		// 	lastPreview = null
+		// }
+	}
 </script>
 
-{#if preview}
-	<div id="auction-preview-tooltip" style="left: {preview.pageX}px; top: {preview.pageY}px">
-		<p>uuid: {JSON.stringify(preview)}</p>
+<svelte:body on:click={onClick} />
+
+{#if lastPreview}
+	{@const date = new Date(lastPreview.auction.ts * 1000)}
+	<div
+		id="auction-preview-tooltip"
+		class:hidden={preview === null}
+		style="left: {lastPreview.pageX}px; top: {lastPreview.pageY}px"
+	>
+		<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
+		<time>{date.toLocaleString()}</time>
 	</div>
 {/if}
 
 <style>
 	#auction-preview-tooltip {
 		position: absolute;
-		width: 10em;
-		height: 10em;
 		border: 1px solid rgba(255, 255, 255, 0.1);
 		background: var(--theme-lighter-background);
+		padding: 0.5em;
+		transition: left 200ms, top 200ms;
 		pointer-events: none;
 	}
+
+	p {
+		margin: 0;
+	}
+
+	time {
+		color: var(--theme-darker-text);
+	}
 </style>
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index e416163..48a3fa5 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -1,34 +1,47 @@
 <script lang="ts">
-	import type { ItemAuctionsSchema } from './APITypes'
+	import type { ItemAuctionsSchema, SimpleAuctionSchema } from './APITypes'
 	import type { PreviewedAuctionData } from './utils'
 
 	export let item: ItemAuctionsSchema
 	export let currentlyPreviewedAuction: PreviewedAuctionData | null
 
+	let svgEl: SVGElement
 	let maxCoins: number = item.auctions.reduce((max, auction) => Math.max(max, auction.coins), 0)
-
 	let currentTimestamp = Math.floor(Date.now() / 1000)
-
-	let lowestCoinsAuction = item.auctions.reduce(
-		(min, auction) => (auction.coins < min.coins ? auction : min),
-		{ coins: Infinity, ts: currentTimestamp }
-	)
-
 	let earliestTimestamp = item.auctions.length > 0 ? item.auctions[0].ts : 0
-
 	let minutesBetween = (currentTimestamp - earliestTimestamp) / 360
-
 	let gridWidth = 100 / minutesBetween
 
-	function showAuctionPreview(e, uuid: string) {
-		currentlyPreviewedAuction = {
-			pageX: e.pageX,
-			pageY: e.pageY,
-			uuid,
-		}
+	function getAuctionCoordinates(auction: SimpleAuctionSchema) {
+		const timestampPercentage =
+			(auction.ts - earliestTimestamp) / (currentTimestamp - earliestTimestamp)
+		return [timestampPercentage * 100, 100 - (auction.coins / maxCoins) * 100]
 	}
-	function hideAuctionPreview() {
-		currentlyPreviewedAuction = null
+
+	function updateNearest(e: MouseEvent) {
+		const rect = svgEl.getBoundingClientRect()
+
+		const mouseCoords = [e.clientX - rect.left, e.clientY - rect.top]
+		let nearestDistance = Number.MAX_SAFE_INTEGER
+		let nearestAuction: SimpleAuctionSchema | null = null
+		for (const auction of item.auctions) {
+			const auctionCoords = getAuctionCoordinates(auction)
+			const distance =
+				Math.pow(mouseCoords[0] - auctionCoords[0], 2) +
+				Math.pow(mouseCoords[1] - auctionCoords[1], 2)
+			if (distance < nearestDistance) {
+				nearestDistance = distance
+				nearestAuction = auction
+			}
+		}
+		if (nearestAuction) {
+			const [x, y] = getAuctionCoordinates(nearestAuction)
+			currentlyPreviewedAuction = {
+				pageX: window.scrollX + rect.left + x,
+				pageY: window.scrollY + rect.top + y,
+				auction: nearestAuction,
+			}
+		} else currentlyPreviewedAuction = null
 	}
 </script>
 
@@ -38,20 +51,23 @@
 			<path d="M {gridWidth} 0 L 0 0 0 10" fill="none" stroke="#fff2" stroke-width="1" />
 		</pattern>
 	</defs>
-	<rect width="100%" height="100%" fill="url(#grid-{item._id})" />
+	<rect
+		width="100%"
+		height="100%"
+		fill="url(#grid-{item._id})"
+		on:mousemove={updateNearest}
+		bind:this={svgEl}
+	/>
 
 	{#each item.auctions as auction}
-		{@const timestampPercentage =
-			(auction.ts - earliestTimestamp) / (currentTimestamp - earliestTimestamp)}
+		{@const [x, y] = getAuctionCoordinates(auction)}
 		<circle
-			cx={timestampPercentage * 100}
-			cy={100 - (auction.coins / maxCoins) * 100}
+			cx={x}
+			cy={y}
 			r="1"
 			stroke-width="4"
 			fill={auction.bin ? '#11b' : '#1b1'}
-			on:mouseenter={e => showAuctionPreview(e, auction.id)}
-			on:click={e => showAuctionPreview(e, auction.id)}
-			on:mouseleave={hideAuctionPreview}
+			tabindex="-1"
 		/>
 	{/each}
 	<!-- {item.auctions} -->
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index c2e4b86..c094db4 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,3 +1,5 @@
+import type { SimpleAuctionSchema } from "./APITypes"
+
 export const colorCodes: { [key: string]: string } = {
     '0': '#000000', // black
     '1': '#0000be', // blue
@@ -224,5 +226,5 @@ export function skyblockTime(year: number, month = 1, day = 1) {
 export interface PreviewedAuctionData {
     pageX: number
     pageY: number
-    uuid: string
+    auction: SimpleAuctionSchema
 }
diff --git a/svelte.config.js b/svelte.config.js
index 23b0e12..222cd8f 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -42,15 +42,15 @@ const config = {
 				},
 			},
 			// if the user is on replit or gitpod, use a secure websocket
-			// server:
-			// 	process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
-			// 		? {
-			// 			hmr: {
-			// 				protocol: 'wss',
-			// 				port: 443,
-			// 			},
-			// 		}
-			// 		: {},
+			server:
+				process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
+					? {
+						hmr: {
+							protocol: 'wss',
+							port: 3001,
+						},
+					}
+					: {},
 		},
 	}
 }
-- 
cgit 


From f9bb90cab81e7c7f8c2a7e932bbf2ddbf7b51f1f Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Tue, 17 May 2022 18:50:49 +0000
Subject: auction search and fixes

---
 src/lib/AuctionPreviewTooltip.svelte   |  4 ++--
 src/lib/AuctionPriceScatterplot.svelte | 15 ++++++++++++---
 src/routes/auctionprices.svelte        | 26 +++++++++++++++++---------
 svelte.config.js                       | 11 +++++++----
 4 files changed, 38 insertions(+), 18 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 223cec2..417f8b3 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -5,7 +5,7 @@
 	import type { PreviewedAuctionData } from './utils'
 
 	export let preview: PreviewedAuctionData | null
-	export let lastPreview: PreviewedAuctionData | null
+	let lastPreview: PreviewedAuctionData | null
 
 	$: lastPreview = preview ?? lastPreview
 
@@ -36,7 +36,7 @@
 	#auction-preview-tooltip {
 		position: absolute;
 		border: 1px solid rgba(255, 255, 255, 0.1);
-		background: var(--theme-lighter-background);
+		background: rgba(0, 0, 0, 0.1);
 		padding: 0.5em;
 		transition: left 200ms, top 200ms;
 		pointer-events: none;
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 48a3fa5..1e774d0 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -25,7 +25,11 @@
 		let nearestDistance = Number.MAX_SAFE_INTEGER
 		let nearestAuction: SimpleAuctionSchema | null = null
 		for (const auction of item.auctions) {
-			const auctionCoords = getAuctionCoordinates(auction)
+			const auctionCoordsSvg = getAuctionCoordinates(auction)
+			const auctionCoords = [
+				(auctionCoordsSvg[0] * rect.width) / 100,
+				(auctionCoordsSvg[1] * rect.height) / 100,
+			]
 			const distance =
 				Math.pow(mouseCoords[0] - auctionCoords[0], 2) +
 				Math.pow(mouseCoords[1] - auctionCoords[1], 2)
@@ -35,7 +39,8 @@
 			}
 		}
 		if (nearestAuction) {
-			const [x, y] = getAuctionCoordinates(nearestAuction)
+			const [svgX, svgY] = getAuctionCoordinates(nearestAuction)
+			const [x, y] = [(svgX * rect.width) / 100, (svgY * rect.height) / 100]
 			currentlyPreviewedAuction = {
 				pageX: window.scrollX + rect.left + x,
 				pageY: window.scrollY + rect.top + y,
@@ -67,7 +72,7 @@
 			r="1"
 			stroke-width="4"
 			fill={auction.bin ? '#11b' : '#1b1'}
-			tabindex="-1"
+			class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id}
 		/>
 	{/each}
 	<!-- {item.auctions} -->
@@ -78,4 +83,8 @@
 		height: 10em;
 		width: 100%;
 	}
+
+	.selected-auction {
+		stroke: #06e7;
+	}
 </style>
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index 4e7bfde..d07c533 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -3,11 +3,14 @@
 	import { API_URL } from '$lib/api'
 
 	export const load: Load = async ({ params, fetch }) => {
+		const auctionItemsPromise = fetch(`${API_URL}auctionitems`).then(r => r.json())
 		const data = await fetch(`${API_URL}auctionprices`).then(r => r.json())
+		const auctionItems = await auctionItemsPromise
 
 		return {
 			props: {
 				data,
+				auctionItems,
 			},
 		}
 	}
@@ -16,24 +19,29 @@
 <script lang="ts">
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
-	import {
-		millisecondsToTime,
-		TIER_COLORS,
-		colorCodes,
-		cleanId,
-		toTitleCase,
-		type PreviewedAuctionData,
-	} from '$lib/utils'
+	import type { PreviewedAuctionData } from '$lib/utils'
 	import type { ItemAuctionsSchema, ItemListData, ItemListItem } from '$lib/APITypes'
 	import Item from '$lib/minecraft/Item.svelte'
 	import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte'
 	import AuctionPreviewTooltip from '$lib/AuctionPreviewTooltip.svelte'
+	import { browser } from '$app/env'
 
 	export let data: ItemAuctionsSchema[]
+	export let auctionItems: Record<string, string>
 
 	let currentlyPreviewedAuction: PreviewedAuctionData | null
 
 	let query: string = ''
+	$: allMatchingItemIds = Object.entries(auctionItems)
+		.filter(a => a[1].includes(query))
+		.map(a => a[0])
+	$: {
+		if (browser) fetchItems(allMatchingItemIds.slice(0, 100))
+	}
+
+	async function fetchItems(itemIds: string[]) {
+		data = await fetch(`${API_URL}auctionprices?items=${itemIds.join(',')}`).then(r => r.json())
+	}
 
 	let pageHeight = 0
 	$: {
@@ -66,7 +74,7 @@
 			{@const binAuctions = item.auctions.filter(i => i.bin)}
 			{@const normalAuctions = item.auctions.filter(i => !i.bin)}
 			<div class="item-container">
-				<h2>{cleanId(item._id.toLowerCase())}</h2>
+				<h2>{auctionItems[item._id]}</h2>
 				<div class="auctions-info-text">
 					{#if binAuctions.length > 0}
 						<p>
diff --git a/svelte.config.js b/svelte.config.js
index 222cd8f..8d97638 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -45,10 +45,13 @@ const config = {
 			server:
 				process.env.REPL_ID || process.env.GITPOD_WORKSPACE_ID
 					? {
-						hmr: {
-							protocol: 'wss',
-							port: 3001,
-						},
+						hmr: process.env.GITPOD_WORKSPACE_URL
+							? {
+								host: process.env.GITPOD_WORKSPACE_URL.replace('https://', '3000-'),
+								protocol: "wss",
+								clientPort: 443
+							}
+							: true
 					}
 					: {},
 		},
-- 
cgit 


From 7a04672666e9c366e7bbf241ed82efe481dc9492 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 18 May 2022 01:21:16 +0000
Subject: grid background improvement

---
 src/lib/AuctionPriceScatterplot.svelte | 19 +++++++++++++++----
 src/routes/auctionprices.svelte        |  4 +++-
 2 files changed, 18 insertions(+), 5 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 1e774d0..0532f97 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -9,8 +9,12 @@
 	let maxCoins: number = item.auctions.reduce((max, auction) => Math.max(max, auction.coins), 0)
 	let currentTimestamp = Math.floor(Date.now() / 1000)
 	let earliestTimestamp = item.auctions.length > 0 ? item.auctions[0].ts : 0
-	let minutesBetween = (currentTimestamp - earliestTimestamp) / 360
-	let gridWidth = 100 / minutesBetween
+	let hoursBetween = (currentTimestamp - earliestTimestamp) / (60 * 60)
+	const gridWidth = 100 / hoursBetween
+
+	let heightCoinInterval = Math.pow(10, Math.floor(Math.log10(maxCoins / 2)))
+
+	const gridHeight = 100 / (maxCoins / heightCoinInterval)
 
 	function getAuctionCoordinates(auction: SimpleAuctionSchema) {
 		const timestampPercentage =
@@ -52,8 +56,15 @@
 
 <svg viewBox="0 0 100 100" class="item-auction-history">
 	<defs>
-		<pattern id="grid-{item._id}" width={gridWidth} height="10" patternUnits="userSpaceOnUse">
-			<path d="M {gridWidth} 0 L 0 0 0 10" fill="none" stroke="#fff2" stroke-width="1" />
+		<pattern
+			id="grid-{item._id}"
+			width={gridWidth}
+			height={gridHeight}
+			patternUnits="userSpaceOnUse"
+			x="0%"
+			y="100%"
+		>
+			<path d="M {gridWidth} 0 L 0 0 0 {gridHeight}" fill="none" stroke="#fff2" stroke-width="1" />
 		</pattern>
 	</defs>
 	<rect
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index d07c533..eccaab7 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -40,7 +40,9 @@
 	}
 
 	async function fetchItems(itemIds: string[]) {
-		data = await fetch(`${API_URL}auctionprices?items=${itemIds.join(',')}`).then(r => r.json())
+		let url = `${API_URL}auctionprices`
+		if (query.length > 0) url += `?items=${itemIds.join(',')}`
+		data = await fetch(url).then(r => r.json())
 	}
 
 	let pageHeight = 0
-- 
cgit 


From c057eb0aaed4a746f2d3a4f15688ef21cc6213b3 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Tue, 17 May 2022 20:48:54 -0500
Subject: fixes and improved tooltip

---
 src/lib/APITypes.d.ts                  |  2 +-
 src/lib/AuctionPreviewTooltip.svelte   | 20 +++++++++-----------
 src/lib/AuctionPriceScatterplot.svelte |  4 ++--
 src/lib/api.ts                         |  1 +
 src/routes/auctionprices.svelte        |  4 ++--
 5 files changed, 15 insertions(+), 16 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index 6429e8b..95231f7 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -450,6 +450,6 @@ export interface SimpleAuctionSchema {
 }
 export interface ItemAuctionsSchema {
 	/** The id of the item */
-	_id: string
+	id: string
 	auctions: SimpleAuctionSchema[]
 }
diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 417f8b3..a3a73fb 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -1,34 +1,32 @@
 <script lang="ts">
-	import { API_URL } from './api'
-
-	import Loader from './layout/Loader.svelte'
 	import type { PreviewedAuctionData } from './utils'
+	import { fade } from 'svelte/transition'
 
 	export let preview: PreviewedAuctionData | null
 	let lastPreview: PreviewedAuctionData | null
 
 	$: lastPreview = preview ?? lastPreview
 
-	function onClick(e) {
+	function onClick(e: MouseEvent) {
 		// commented out because it doesn't work: sometimes e.target is null when we click a point
-		// if (!e.target.closest('.item-auction-history')) {
-		// 	preview = null
-		// 	lastPreview = null
-		// }
+		if (e.target && !(e.target as HTMLElement).closest('.item-auction-history')) {
+			preview = null
+			lastPreview = null
+		}
 	}
 </script>
 
-<svelte:body on:click={onClick} />
+<svelte:body on:mousemove={onClick} />
 
 {#if lastPreview}
-	{@const date = new Date(lastPreview.auction.ts * 1000)}
 	<div
 		id="auction-preview-tooltip"
 		class:hidden={preview === null}
 		style="left: {lastPreview.pageX}px; top: {lastPreview.pageY}px"
+		out:fade={{ duration: 100 }}
 	>
 		<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
-		<time>{date.toLocaleString()}</time>
+		<time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time>
 	</div>
 {/if}
 
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 0532f97..cfdbe9b 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -57,7 +57,7 @@
 <svg viewBox="0 0 100 100" class="item-auction-history">
 	<defs>
 		<pattern
-			id="grid-{item._id}"
+			id="grid-{item.id}"
 			width={gridWidth}
 			height={gridHeight}
 			patternUnits="userSpaceOnUse"
@@ -70,7 +70,7 @@
 	<rect
 		width="100%"
 		height="100%"
-		fill="url(#grid-{item._id})"
+		fill="url(#grid-{item.id})"
 		on:mousemove={updateNearest}
 		bind:this={svgEl}
 	/>
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 689a952..1721d01 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,2 +1,3 @@
 // the trailing slash is required
 export const API_URL = 'https://skyblock-api.matdoes.dev/'
+// export const API_URL = 'http://localhost:8080/'
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index eccaab7..3c301d0 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -72,11 +72,11 @@
 		<input type="text" id="filter-items-tier" placeholder="Search..." bind:value={query} />
 	</div>
 	<div class="item-list">
-		{#each data as item (item._id)}
+		{#each data as item (item.id)}
 			{@const binAuctions = item.auctions.filter(i => i.bin)}
 			{@const normalAuctions = item.auctions.filter(i => !i.bin)}
 			<div class="item-container">
-				<h2>{auctionItems[item._id]}</h2>
+				<h2>{auctionItems[item.id]}</h2>
 				<div class="auctions-info-text">
 					{#if binAuctions.length > 0}
 						<p>
-- 
cgit 


From ce97f7eec03a44dd653512656546ade2eb8fa01b Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Tue, 17 May 2022 23:20:35 -0500
Subject: Show auctions sold frequency

---
 src/lib/AuctionPriceScatterplot.svelte |  2 +-
 src/routes/auctionprices.svelte        | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index cfdbe9b..defadcd 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -75,7 +75,7 @@
 		bind:this={svgEl}
 	/>
 
-	{#each item.auctions as auction}
+	{#each item.auctions as auction (auction.id)}
 		{@const [x, y] = getAuctionCoordinates(auction)}
 		<circle
 			cx={x}
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index 68ce00e..e778330 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -97,6 +97,19 @@
 							</b>
 						</p>
 					{/if}
+					{#if item.auctions.length >= 2}
+						<p>
+							Frequency:
+							<b>
+								{parseFloat(
+									(
+										(24 * 60 * 60) /
+										((Date.now() / 1000 - item.auctions[0].ts) / item.auctions.length)
+									).toPrecision(2)
+								).toLocaleString()}/day
+							</b>
+						</p>
+					{/if}
 				</div>
 				<div class="item-scatterplot">
 					<AuctionPriceScatterplot {item} bind:currentlyPreviewedAuction />
-- 
cgit 


From 409d35b26c4dc395ccf90d48af42a4c5d3c69160 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Tue, 17 May 2022 23:38:57 -0500
Subject: remove keyed auctions

---
 src/lib/AuctionPriceScatterplot.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index defadcd..cfdbe9b 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -75,7 +75,7 @@
 		bind:this={svgEl}
 	/>
 
-	{#each item.auctions as auction (auction.id)}
+	{#each item.auctions as auction}
 		{@const [x, y] = getAuctionCoordinates(auction)}
 		<circle
 			cx={x}
-- 
cgit 


From 5fd8b696b9b9e76785817075cacdec58a900f388 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 18 May 2022 00:21:08 -0500
Subject: fix NaN warning

---
 src/lib/AuctionPriceScatterplot.svelte | 73 +++++++++++++++++++---------------
 1 file changed, 40 insertions(+), 33 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index cfdbe9b..f430edd 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -54,40 +54,47 @@
 	}
 </script>
 
-<svg viewBox="0 0 100 100" class="item-auction-history">
-	<defs>
-		<pattern
-			id="grid-{item.id}"
-			width={gridWidth}
-			height={gridHeight}
-			patternUnits="userSpaceOnUse"
-			x="0%"
-			y="100%"
-		>
-			<path d="M {gridWidth} 0 L 0 0 0 {gridHeight}" fill="none" stroke="#fff2" stroke-width="1" />
-		</pattern>
-	</defs>
-	<rect
-		width="100%"
-		height="100%"
-		fill="url(#grid-{item.id})"
-		on:mousemove={updateNearest}
-		bind:this={svgEl}
-	/>
-
-	{#each item.auctions as auction}
-		{@const [x, y] = getAuctionCoordinates(auction)}
-		<circle
-			cx={x}
-			cy={y}
-			r="1"
-			stroke-width="4"
-			fill={auction.bin ? '#11b' : '#1b1'}
-			class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id}
+{#if item.auctions.length > 0}
+	<svg viewBox="0 0 100 100" class="item-auction-history">
+		<defs>
+			<pattern
+				id="grid-{item.id}"
+				width={gridWidth}
+				height={gridHeight}
+				patternUnits="userSpaceOnUse"
+				x="0%"
+				y="100%"
+			>
+				<path
+					d="M {gridWidth} 0 L 0 0 0 {gridHeight}"
+					fill="none"
+					stroke="#fff2"
+					stroke-width="1"
+				/>
+			</pattern>
+		</defs>
+		<rect
+			width="100%"
+			height="100%"
+			fill="url(#grid-{item.id})"
+			on:mousemove={updateNearest}
+			bind:this={svgEl}
 		/>
-	{/each}
-	<!-- {item.auctions} -->
-</svg>
+
+		{#each item.auctions as auction}
+			{@const [x, y] = getAuctionCoordinates(auction)}
+			<circle
+				cx={x}
+				cy={y}
+				r="1"
+				stroke-width="4"
+				fill={auction.bin ? '#11b' : '#1b1'}
+				class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id}
+			/>
+		{/each}
+		<!-- {item.auctions} -->
+	</svg>
+{/if}
 
 <style>
 	.item-auction-history {
-- 
cgit 


From 96ba69c37b55b5fc056db997b68b92a208ace66d Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 18 May 2022 16:16:43 +0000
Subject: add coin units to auction graphs

---
 src/lib/AuctionPriceScatterplot.svelte | 19 ++++++++++++++++++-
 src/lib/api.ts                         |  3 ++-
 2 files changed, 20 insertions(+), 2 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index f430edd..42fb6f1 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -12,7 +12,7 @@
 	let hoursBetween = (currentTimestamp - earliestTimestamp) / (60 * 60)
 	const gridWidth = 100 / hoursBetween
 
-	let heightCoinInterval = Math.pow(10, Math.floor(Math.log10(maxCoins / 2)))
+	let heightCoinInterval = Math.ceil(Math.pow(10, Math.floor(Math.log10(maxCoins / 2))))
 
 	const gridHeight = 100 / (maxCoins / heightCoinInterval)
 
@@ -52,6 +52,14 @@
 			}
 		} else currentlyPreviewedAuction = null
 	}
+
+	function shortenBigNumber(n: number) {
+		if (n < 1000) return n
+		if (n < 1_000_000) return parseFloat((n / 1000).toPrecision(2)).toLocaleString() + 'k'
+		if (n < 1_000_000_000) return parseFloat((n / 1_000_000).toPrecision(2)).toLocaleString() + 'M'
+		if (n < 1_000_000_000_000)
+			return parseFloat((n / 1_000_000_000).toPrecision(2)).toLocaleString() + 'B'
+	}
 </script>
 
 {#if item.auctions.length > 0}
@@ -73,6 +81,15 @@
 				/>
 			</pattern>
 		</defs>
+		{#each new Array(Math.floor(maxCoins / heightCoinInterval) + 1) as _, intervalIndex}
+			<text
+				x="-1"
+				y={Math.max(5, 100 - intervalIndex * gridHeight + 2)}
+				fill="var(--theme-darker-text)"
+				font-size="6px"
+				text-anchor="end">{shortenBigNumber(heightCoinInterval * intervalIndex)}</text
+			>
+		{/each}
 		<rect
 			width="100%"
 			height="100%"
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 1721d01..77d6334 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,3 +1,4 @@
 // the trailing slash is required
-export const API_URL = 'https://skyblock-api.matdoes.dev/'
+// export const API_URL = 'https://skyblock-api.matdoes.dev/'
 // export const API_URL = 'http://localhost:8080/'
+export const API_URL = 'https://8080-skyblocksta-skyblockapi-gef4h4mxokc.ws-us45.gitpod.io/'
-- 
cgit 


From ad02f4a34923bf2819504568351fac23cd2c1dcc Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 18 May 2022 16:25:58 +0000
Subject: improve bad interval calculation

---
 src/lib/AuctionPriceScatterplot.svelte | 11 ++++++++---
 src/lib/api.ts                         |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 42fb6f1..d01349c 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -12,8 +12,13 @@
 	let hoursBetween = (currentTimestamp - earliestTimestamp) / (60 * 60)
 	const gridWidth = 100 / hoursBetween
 
-	let heightCoinInterval = Math.ceil(Math.pow(10, Math.floor(Math.log10(maxCoins / 2))))
-
+	// this code is bad but it works
+	let heightCoinInterval = Math.ceil(Math.pow(10, Math.floor(Math.log10(maxCoins / 5))))
+	if (heightCoinInterval < maxCoins / 20) {
+		heightCoinInterval *= 5
+	} else if (heightCoinInterval < maxCoins / 10) {
+		heightCoinInterval *= 2
+	}
 	const gridHeight = 100 / (maxCoins / heightCoinInterval)
 
 	function getAuctionCoordinates(auction: SimpleAuctionSchema) {
@@ -84,7 +89,7 @@
 		{#each new Array(Math.floor(maxCoins / heightCoinInterval) + 1) as _, intervalIndex}
 			<text
 				x="-1"
-				y={Math.max(5, 100 - intervalIndex * gridHeight + 2)}
+				y={Math.min(Math.max(5, 100 - intervalIndex * gridHeight + 2), 100)}
 				fill="var(--theme-darker-text)"
 				font-size="6px"
 				text-anchor="end">{shortenBigNumber(heightCoinInterval * intervalIndex)}</text
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 77d6334..9152370 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,4 +1,4 @@
 // the trailing slash is required
-// export const API_URL = 'https://skyblock-api.matdoes.dev/'
+export const API_URL = 'https://skyblock-api.matdoes.dev/'
 // export const API_URL = 'http://localhost:8080/'
-export const API_URL = 'https://8080-skyblocksta-skyblockapi-gef4h4mxokc.ws-us45.gitpod.io/'
+// export const API_URL = 'https://8080-skyblocksta-skyblockapi-gef4h4mxokc.ws-us45.gitpod.io/'
-- 
cgit 


From f1c9ccfa043210d8fffdb7a992241177e37a73d6 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 18 May 2022 17:24:56 +0000
Subject: improve grid lines

---
 src/lib/AuctionPriceScatterplot.svelte | 2 +-
 src/lib/api.ts                         | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index d01349c..35ef103 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -79,7 +79,7 @@
 				y="100%"
 			>
 				<path
-					d="M {gridWidth} 0 L 0 0 0 {gridHeight}"
+					d="M {gridWidth} {gridHeight} L 0 {gridHeight} 0 0"
 					fill="none"
 					stroke="#fff2"
 					stroke-width="1"
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 9152370..1721d01 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -1,4 +1,3 @@
 // the trailing slash is required
 export const API_URL = 'https://skyblock-api.matdoes.dev/'
 // export const API_URL = 'http://localhost:8080/'
-// export const API_URL = 'https://8080-skyblocksta-skyblockapi-gef4h4mxokc.ws-us45.gitpod.io/'
-- 
cgit 


From aeebc84c5bbecb29707e4ace0ce515cdde0bb27b Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 18 May 2022 17:59:23 +0000
Subject: fix item names with formatting codes

---
 src/lib/AuctionPriceScatterplot.svelte |  1 -
 src/routes/auctionprices.svelte        | 12 ++++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 35ef103..3b89149 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -114,7 +114,6 @@
 				class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id}
 			/>
 		{/each}
-		<!-- {item.auctions} -->
 	</svg>
 {/if}
 
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index 853c7d6..95e062b 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -19,7 +19,7 @@
 <script lang="ts">
 	import Header from '$lib/Header.svelte'
 	import Head from '$lib/Head.svelte'
-	import { cleanId, type PreviewedAuctionData } from '$lib/utils'
+	import { cleanId, removeFormattingCode, type PreviewedAuctionData } from '$lib/utils'
 	import type { ItemAuctionsSchema } from '$lib/APITypes'
 	import AuctionPriceScatterplot from '$lib/AuctionPriceScatterplot.svelte'
 	import AuctionPreviewTooltip from '$lib/AuctionPreviewTooltip.svelte'
@@ -38,7 +38,7 @@
 	$: {
 		pageNumber = 0
 		allMatchingItemIds = Object.entries(auctionItems)
-			.filter(a => a[1].toLowerCase().includes(queryNormalized))
+			.filter(a => removeFormattingCode(a[1].toLowerCase()).includes(queryNormalized))
 			.map(a => a[0])
 	}
 	$: {
@@ -103,18 +103,18 @@
 			{@const binAuctions = item.auctions.filter(i => i.bin)}
 			{@const normalAuctions = item.auctions.filter(i => !i.bin)}
 			<div class="item-container">
-				<h2>{auctionItems[item.id] ?? cleanId(item.id.toLowerCase())}</h2>
+				<h2>{removeFormattingCode(auctionItems[item.id] ?? cleanId(item.id.toLowerCase()))}</h2>
 				<div class="auctions-info-text">
 					{#if binAuctions.length > 0}
 						<p>
-							Lowest recent BIN: <b>
+							Cheapest recent BIN: <b>
 								{binAuctions.reduce((a, b) => (a.coins < b.coins ? a : b)).coins.toLocaleString()} coins
 							</b>
 						</p>
 					{/if}
 					{#if normalAuctions.length > 0}
 						<p>
-							Lowest recent auction: <b>
+							Cheapest recent auction: <b>
 								{normalAuctions
 									.reduce((a, b) => (a.coins < b.coins ? a : b))
 									.coins.toLocaleString()} coins
@@ -152,7 +152,7 @@
 	}
 	.item-list {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
 		grid-gap: 1em;
 		margin-top: 1em;
 	}
-- 
cgit 


From 97688e22c8335642b72d200ce0a865353bef5207 Mon Sep 17 00:00:00 2001
From: mat <github@matdoes.dev>
Date: Wed, 18 May 2022 21:29:41 -0500
Subject: Fix lag

---
 package.json                           |   6 +-
 src/lib/AuctionPreviewTooltip.svelte   |  27 ++++----
 src/lib/AuctionPriceScatterplot.svelte | 109 ++++++++++++++++++---------------
 src/routes/auctionprices.svelte        |   9 ++-
 yarn.lock                              |  12 ++--
 5 files changed, 92 insertions(+), 71 deletions(-)

(limited to 'src/lib/AuctionPriceScatterplot.svelte')

diff --git a/package.json b/package.json
index b2ba8a9..a2b2139 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,7 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
-    "svelte": "^3.46.4",
     "svelte-check": "^2.4.6",
-    "svelte-preprocess": "^4.10.4",
     "tslib": "^2.3.1",
     "typescript": "~4.6.4",
     "vite": "^2.8.6",
@@ -38,10 +36,12 @@
     "@sveltejs/adapter-node": "^1.0.0-next.68",
     "@sveltejs/adapter-static": "^1.0.0-next.28",
     "@sveltejs/adapter-vercel": "^1.0.0-next.43",
-    "@sveltejs/kit": "^1.0.0-next.330",
+    "@sveltejs/kit": "^1.0.0-next.335",
     "cookie": "^0.5.0",
     "dotenv": "^16.0.0",
     "skyblock-assets": "^2.0.8",
+    "svelte": "^3.48.0",
+    "svelte-preprocess": "^4.10.6",
     "typed-hypixel-api": "^1.1.0"
   },
   "packageManager": "yarn@3.1.1"
diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
index 39a2370..26b01d9 100644
--- a/src/lib/AuctionPreviewTooltip.svelte
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -5,9 +5,11 @@
 	export let preview: PreviewedAuctionData | null
 	let lastPreview: PreviewedAuctionData | null
 
-	$: lastPreview = preview ?? lastPreview
+	$: {
+		lastPreview = preview ?? lastPreview
+	}
 
-	function onClick(e: MouseEvent) {
+	function onMouseMove(e: MouseEvent) {
 		// commented out because it doesn't work: sometimes e.target is null when we click a point
 		if (e.target && !(e.target as HTMLElement).closest('.item-auction-history')) {
 			preview = null
@@ -16,29 +18,32 @@
 	}
 </script>
 
-<svelte:body on:mousemove={onClick} />
+<svelte:body on:mousemove={onMouseMove} />
 
 {#if lastPreview}
 	<div
-		id="auction-preview-tooltip"
-		class:hidden={preview === null}
-		style="left: {lastPreview.pageX}px; top: {lastPreview.pageY}px"
+		id="auction-preview-tooltip-container"
+		style={lastPreview ? `left: ${lastPreview.pageX}px; top: ${lastPreview.pageY}px` : undefined}
 		out:fade={{ duration: 100 }}
 		in:fade={{ duration: 100 }}
 	>
-		<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
-		<time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time>
+		<div id="auction-preview-tooltip">
+			<p><b>{lastPreview.auction.coins.toLocaleString()}</b> coins</p>
+			<time>{new Date(lastPreview.auction.ts * 1000).toLocaleString()}</time>
+		</div>
 	</div>
 {/if}
 
 <style>
-	#auction-preview-tooltip {
+	#auction-preview-tooltip-container {
 		position: absolute;
+		pointer-events: none;
+		transition: left 200ms linear, top 200ms linear;
+	}
+	#auction-preview-tooltip {
 		border: 1px solid rgba(255, 255, 255, 0.1);
 		background: rgba(0, 0, 0, 0.1);
 		padding: 0.5em;
-		transition: left 200ms, top 200ms;
-		pointer-events: none;
 	}
 
 	p {
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
index 3b89149..6c59e70 100644
--- a/src/lib/AuctionPriceScatterplot.svelte
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { browser } from '$app/env'
+
 	import type { ItemAuctionsSchema, SimpleAuctionSchema } from './APITypes'
 	import type { PreviewedAuctionData } from './utils'
 
@@ -50,12 +52,20 @@
 		if (nearestAuction) {
 			const [svgX, svgY] = getAuctionCoordinates(nearestAuction)
 			const [x, y] = [(svgX * rect.width) / 100, (svgY * rect.height) / 100]
+			if (currentlyPreviewedAuction?.auction.id === nearestAuction.id) return
 			currentlyPreviewedAuction = {
 				pageX: window.scrollX + rect.left + x,
 				pageY: window.scrollY + rect.top + y,
 				auction: nearestAuction,
 			}
-		} else currentlyPreviewedAuction = null
+			for (const el of document.getElementsByClassName('selected-auction'))
+				el.classList.remove('selected-auction')
+			document
+				.getElementsByClassName(`auction-point-${nearestAuction.id}`)[0]
+				.classList.add('selected-auction')
+		} else {
+			currentlyPreviewedAuction = null
+		}
 	}
 
 	function shortenBigNumber(n: number) {
@@ -67,55 +77,54 @@
 	}
 </script>
 
-{#if item.auctions.length > 0}
-	<svg viewBox="0 0 100 100" class="item-auction-history">
-		<defs>
-			<pattern
-				id="grid-{item.id}"
-				width={gridWidth}
-				height={gridHeight}
-				patternUnits="userSpaceOnUse"
-				x="0%"
-				y="100%"
-			>
-				<path
-					d="M {gridWidth} {gridHeight} L 0 {gridHeight} 0 0"
-					fill="none"
-					stroke="#fff2"
-					stroke-width="1"
-				/>
-			</pattern>
-		</defs>
-		{#each new Array(Math.floor(maxCoins / heightCoinInterval) + 1) as _, intervalIndex}
-			<text
-				x="-1"
-				y={Math.min(Math.max(5, 100 - intervalIndex * gridHeight + 2), 100)}
-				fill="var(--theme-darker-text)"
-				font-size="6px"
-				text-anchor="end">{shortenBigNumber(heightCoinInterval * intervalIndex)}</text
-			>
-		{/each}
-		<rect
-			width="100%"
-			height="100%"
-			fill="url(#grid-{item.id})"
-			on:mousemove={updateNearest}
-			bind:this={svgEl}
-		/>
-
-		{#each item.auctions as auction}
-			{@const [x, y] = getAuctionCoordinates(auction)}
-			<circle
-				cx={x}
-				cy={y}
-				r="1"
-				stroke-width="4"
-				fill={auction.bin ? '#11b' : '#1b1'}
-				class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id}
+<svg viewBox="0 0 100 100" class="item-auction-history">
+	<defs>
+		<pattern
+			id="grid-{item.id}"
+			width={gridWidth}
+			height={gridHeight}
+			patternUnits="userSpaceOnUse"
+			x="0%"
+			y="100%"
+		>
+			<path
+				d="M {gridWidth} {gridHeight} L 0 {gridHeight} 0 0"
+				fill="none"
+				stroke="#fff2"
+				stroke-width="1"
 			/>
-		{/each}
-	</svg>
-{/if}
+		</pattern>
+	</defs>
+	{#each new Array(Math.floor(maxCoins / heightCoinInterval) + 1) as _, intervalIndex}
+		<text
+			x="-1"
+			y={Math.min(Math.max(5, 100 - intervalIndex * gridHeight + 2), 100)}
+			fill="var(--theme-darker-text)"
+			font-size="6px"
+			text-anchor="end">{shortenBigNumber(heightCoinInterval * intervalIndex)}</text
+		>
+	{/each}
+	<rect
+		width="100%"
+		height="100%"
+		fill="url(#grid-{item.id})"
+		on:mousemove={updateNearest}
+		bind:this={svgEl}
+	/>
+
+	{#each item.auctions as auction (auction.id)}
+		{@const [x, y] = getAuctionCoordinates(auction)}
+		<circle
+			cx={x}
+			cy={y}
+			r="1"
+			stroke-width="4"
+			fill={auction.bin ? '#11b' : '#1b1'}
+			class="auction-point-{auction.id}"
+		/>
+		<!-- class:selected-auction={currentlyPreviewedAuction?.auction?.id === auction?.id} -->
+	{/each}
+</svg>
 
 <style>
 	.item-auction-history {
@@ -123,7 +132,7 @@
 		width: 100%;
 	}
 
-	.selected-auction {
+	svg :global(.selected-auction) {
 		stroke: #06e7;
 	}
 </style>
diff --git a/src/routes/auctionprices.svelte b/src/routes/auctionprices.svelte
index 3c57e1e..9e7615c 100644
--- a/src/routes/auctionprices.svelte
+++ b/src/routes/auctionprices.svelte
@@ -30,7 +30,7 @@
 	export let data: ItemAuctionsSchema[]
 	export let auctionItems: Record<string, { display: { name: string }; vanillaId?: string }>
 
-	let currentlyPreviewedAuction: PreviewedAuctionData | null
+	let currentlyPreviewedAuction: PreviewedAuctionData | null = null
 
 	let query: string = ''
 
@@ -89,6 +89,13 @@
 			loadingPage = false
 		}
 	}
+
+	$: {
+		if (browser && !currentlyPreviewedAuction) {
+			for (const el of document.getElementsByClassName('selected-auction'))
+				el.classList.remove('selected-auction')
+		}
+	}
 </script>
 
 <Head title="SkyBlock Auction Prices" />
diff --git a/yarn.lock b/yarn.lock
index 758e549..dad6890 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -150,10 +150,10 @@
   dependencies:
     esbuild "^0.14.21"
 
-"@sveltejs/kit@^1.0.0-next.330":
-  version "1.0.0-next.330"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.330.tgz#1865ca9e38eb34633b0e469e833f4f51ebb5eb69"
-  integrity sha512-Wb95D5tOF8BViZuikqzZLAcupdS7TpXtadNPgpEOxKowmkrW8xjRrrfVdPIkNOLqAP1V+gKInmQ/gFYmnv5EjA==
+"@sveltejs/kit@^1.0.0-next.335":
+  version "1.0.0-next.335"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.335.tgz#14bd4016633605b9edc8b7a77cd393ca778449db"
+  integrity sha512-iZutvIJSSNJJGceZOX2ZWqcyRqp9MIPnNWOgOLXqBG/Z/+KLoN8MRI0U79XIw232SAEXhhkwaJtB3UnXQSu85A==
   dependencies:
     "@sveltejs/vite-plugin-svelte" "^1.0.0-next.32"
     chokidar "^3.5.3"
@@ -1608,7 +1608,7 @@ svelte-hmr@^0.14.11:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.11.tgz#63d532dc9c2c849ab708592f034765fa2502e568"
   integrity sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==
 
-svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.4:
+svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.6:
   version "4.10.6"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz#5f9a53e7ed3b85fc7e0841120c725b76ac5a1ba8"
   integrity sha512-I2SV1w/AveMvgIQlUF/ZOO3PYVnhxfcpNyGt8pxpUVhPfyfL/CZBkkw/KPfuFix5FJ9TnnNYMhACK3DtSaYVVQ==
@@ -1620,7 +1620,7 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.4:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-svelte@^3.46.4:
+svelte@^3.48.0:
   version "3.48.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.48.0.tgz#f98c866d45e155bad8e1e88f15f9c03cd28753d3"
   integrity sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==
-- 
cgit 

