improved auction price scatterplot

1 files changed, 35 insertions, 5 deletions

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>