From c0c4f68042243c4b5ee731cd8d1cd6e599b6ebbc Mon Sep 17 00:00:00 2001
From: wighawag <wighawag@gmail.com>
Date: Tue, 16 Jan 2024 10:56:02 +0000
Subject: [PATCH] radial progress

---
 .../components/progress/RadialProgress.svelte | 31 ++++++++++++++++
 web/src/routes/debug/indexer/+page.svelte     | 37 ++++++++-----------
 2 files changed, 47 insertions(+), 21 deletions(-)
 create mode 100644 web/src/lib/components/progress/RadialProgress.svelte

diff --git a/web/src/lib/components/progress/RadialProgress.svelte b/web/src/lib/components/progress/RadialProgress.svelte
new file mode 100644
index 0000000..b9d5a28
--- /dev/null
+++ b/web/src/lib/components/progress/RadialProgress.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	export let value: number;
+	export let style: string = '';
+
+	$: val = Math.floor(value * 100) / 100;
+
+	$: fullStyle = `--progress-value:${val}%;--progress-value-text:'${val}%';${style}`;
+</script>
+
+<div class="progress-bar" style={fullStyle}>
+	<progress value={val} max="100" style="visibility:hidden;height:0;width:0;">{val}%</progress>
+</div>
+
+<style>
+	.progress-bar {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		width: 100px;
+		height: 100px;
+		border-radius: 50%;
+		background: radial-gradient(closest-side, var(--progress-bg-color, black) 79%, transparent 80% 100%),
+			conic-gradient(var(--progress-color, white) var(--progress-value), var(--progress-dim-color, gray) 0);
+	}
+
+	.progress-bar::before {
+		color: var(--progress-color, white);
+		content: var(--progress-value-text);
+	}
+</style>
diff --git a/web/src/routes/debug/indexer/+page.svelte b/web/src/routes/debug/indexer/+page.svelte
index c6ad923..85674f6 100644
--- a/web/src/routes/debug/indexer/+page.svelte
+++ b/web/src/routes/debug/indexer/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {status, state, syncing} from '$lib/blockchain/state/State';
+	import RadialProgress from '$lib/components/progress/RadialProgress.svelte';
 	import DebugWrapper from '../DebugWrapper.svelte';
 
 	// import JSONTree from 'svelte-json-tree';
@@ -21,35 +22,23 @@
 
 <DebugWrapper>
 	<p slot="title">Indexer State</p>
-	<div
-		class={`radial-progress m-2 ${
-			$syncing.loading ? 'text-green-400' : $status.state === 'Idle' ? 'text-red-400' : 'text-green-400'
-		}`}
-		style={`--value:${$syncing.lastSync?.syncPercentage || 0};`}
-	>
-		{$syncing.lastSync?.syncPercentage
-			? $syncing.lastSync?.syncPercentage === 100
-				? $status.state
-				: `${$syncing.lastSync?.syncPercentage}%`
-			: '0%'}
-	</div>
 
-	<!-- <progress value={($syncing.lastSync?.syncPercentage || 0) / 100} style="width:100%;" /> -->
+	<RadialProgress value={$syncing.lastSync?.syncPercentage || 0} />
 
-	<p class="m-1">status: {$status.state}</p>
-	<p class="m-1">catchingUp: {$syncing.catchingUp}</p>
-	<p class="m-1">autoIndexing: {$syncing.autoIndexing}</p>
-	<p class="m-1">fetchingLogs: {$syncing.fetchingLogs}</p>
-	<p class="m-1">processingFetchedLogs: {$syncing.processingFetchedLogs}</p>
+	<p>status: {$status.state}</p>
+	<p>catchingUp: {$syncing.catchingUp}</p>
+	<p>autoIndexing: {$syncing.autoIndexing}</p>
+	<p>fetchingLogs: {$syncing.fetchingLogs}</p>
+	<p>processingFetchedLogs: {$syncing.processingFetchedLogs}</p>
 
 	{#if $syncing.numRequests !== undefined}
-		<p class="m-1">requests sent: {$syncing.numRequests}</p>
+		<p>requests sent: {$syncing.numRequests}</p>
 	{/if}
-	<p class="m-1">
+	<p>
 		block processed: {$syncing.lastSync?.numBlocksProcessedSoFar?.toLocaleString() || 0}
 	</p>
 
-	<p class="m-1">
+	<p>
 		latestBlock: {$syncing.lastSync?.latestBlock || 0}
 	</p>
 
@@ -63,3 +52,9 @@
 		{JSON.stringify($syncing)}
 	{/if}
 </DebugWrapper>
+
+<style>
+	p {
+		margin-block: 1rem;
+	}
+</style>