6 files changed, 225 insertions, 2 deletions
diff --git a/src/lib/APITypes.d.ts b/src/lib/APITypes.d.ts
index 6402721..e01a950 100644
--- a/src/lib/APITypes.d.ts
+++ b/src/lib/APITypes.d.ts
@@ -434,3 +434,23 @@ export interface AccessoryBagUpgrades {
 		list: string[]
 	}
 }
+
+export interface SimpleAuctionSchema {
+	/** The UUID of the auction so we can look it up later. */
+	id: string
+	coins: number
+	/**
+	 * The timestamp as **seconds** since epoch. It's in seconds instead of ms
+	 * since we don't need to be super exact and so it's shorter.
+	 */
+	ts: number
+	/** Whether the auction was bought or simply expired. */
+	success: boolean
+	bin: boolean
+}
+export interface ItemAuctionsSchema {
+	/** The id of the item */
+	id: string
+	sbId: string
+	auctions: SimpleAuctionSchema[]
+}
diff --git a/src/lib/AuctionPreviewTooltip.svelte b/src/lib/AuctionPreviewTooltip.svelte
new file mode 100644
index 0000000..26b01d9
--- /dev/null
+++ b/src/lib/AuctionPreviewTooltip.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { PreviewedAuctionData } from './utils'
+	import { fade } from 'svelte/transition'
+
+	export let preview: PreviewedAuctionData | null
+	let lastPreview: PreviewedAuctionData | null
+
+	$: {
+		lastPreview = preview ?? lastPreview
+	}
+
+	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
+			lastPreview = null
+		}
+	}
+</script>
+
+<svelte:body on:mousemove={onMouseMove} />
+
+{#if lastPreview}
+	<div
+		id="auction-preview-tooltip-container"
+		style={lastPreview ? `left: ${lastPreview.pageX}px; top: ${lastPreview.pageY}px` : undefined}
+		out:fade={{ duration: 100 }}
+		in:fade={{ duration: 100 }}
+	>
+		<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-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;
+	}
+
+	p {
+		margin: 0;
+	}
+
+	time {
+		color: var(--theme-darker-text);
+	}
+</style>
diff --git a/src/lib/AuctionPriceScatterplot.svelte b/src/lib/AuctionPriceScatterplot.svelte
new file mode 100644
index 0000000..6c59e70
--- /dev/null
+++ b/src/lib/AuctionPriceScatterplot.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { browser } from '$app/env'
+
+	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 earliestTimestamp = item.auctions.length > 0 ? item.auctions[0].ts : 0
+	let hoursBetween = (currentTimestamp - earliestTimestamp) / (60 * 60)
+	const gridWidth = 100 / hoursBetween
+
+	// 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) {
+		const timestampPercentage =
+			(auction.ts - earliestTimestamp) / (currentTimestamp - earliestTimestamp)
+		return [timestampPercentage * 100, 100 - (auction.coins / maxCoins) * 100]
+	}
+
+	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 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)
+			if (distance < nearestDistance) {
+				nearestDistance = distance
+				nearestAuction = auction
+			}
+		}
+		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,
+			}
+			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) {
+		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>
+
+<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 (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 {
+		height: 10em;
+		width: 100%;
+	}
+
+	svg :global(.selected-auction) {
+		stroke: #06e7;
+	}
+</style>
diff --git a/src/lib/GlobalTooltip.ts b/src/lib/GlobalTooltip.ts
index d2c1020..f4bc381 100644
--- a/src/lib/GlobalTooltip.ts
+++ b/src/lib/GlobalTooltip.ts
@@ -52,7 +52,6 @@ export function registerItem(itemEl: HTMLElement) {
 	})
 	itemEl.addEventListener('click', e => {
 		tooltipLocked = !tooltipLocked
-		moveTooltipToMouse(e)
 		tooltipEl.style.display = 'block'
 		if (tooltipLocked) {
 			tooltipEl.style.userSelect = 'auto'
@@ -64,6 +63,7 @@ export function registerItem(itemEl: HTMLElement) {
 		const loreHtml = itemEl.getElementsByClassName('tooltip-lore')[0].innerHTML
 		const nameHtml = itemEl.getElementsByClassName('tooltip-name')[0].innerHTML
 		tooltipEl.innerHTML = `<p class="item-lore-name">${nameHtml}</p><p class="item-lore-text">${loreHtml}</p>`
+		moveTooltipToMouse(e)
 	})
 	document.addEventListener('mousedown', e => {
 		if (tooltipLocked && !tooltipEl.contains(e.target as Node)) {
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 689a952..e3559e1 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/'
+\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e34d573..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
@@ -219,4 +221,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
+    auction: SimpleAuctionSchema
+}