radial progress

wighawag · Jan 16, 2024 · c0c4f68 · c0c4f68
1 parent 05b4b67
commit c0c4f68
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 21 deletions.
diff --git a/web/src/lib/components/progress/RadialProgress.svelte 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
@@ -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>