From ba3f67da61f91838e8955bfa828af1c764a36c54 Mon Sep 17 00:00:00 2001
From: Alberto Monterroso <14013679+Albermonte@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:50:21 +0100
Subject: [PATCH] fix: show more decimals to prevent visual rounding issues

---
 app/components/ScorePie.vue        | 9 +++++++--
 app/components/ValidatorsTable.vue | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/ScorePie.vue b/app/components/ScorePie.vue
index 711d8fb..9555c52 100644
--- a/app/components/ScorePie.vue
+++ b/app/components/ScorePie.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 // todo change to use validator prop
-const props = defineProps<{ score: number | null }>()
+const props = withDefaults(defineProps<{
+  score: number | null
+  decimals?: number
+}>(), {
+  decimals: 1,
+})
 
 const viewBoxSize = 100
 const center = viewBoxSize / 2
@@ -36,7 +41,7 @@ const strokeColor = computed(() => {
   <div grid="~ cols-1 rows-1 place-content-center *:row-span-full *:col-span-full">
     <template v-if="score !== null">
       <div font-bold size-full grid="~ place-content-center">
-        {{ (score * 100).toFixed(0) }}
+        {{ Math.round(score * 100 * Math.max(decimals * 10, 1)) / Math.max(decimals * 10, 1) }}
       </div>
       <svg
         bg-transparent :viewBox="`0 0 ${viewBoxSize} ${viewBoxSize}`" height="100%" width="100%"
diff --git a/app/components/ValidatorsTable.vue b/app/components/ValidatorsTable.vue
index 5b4c9d4..05dcda8 100644
--- a/app/components/ValidatorsTable.vue
+++ b/app/components/ValidatorsTable.vue
@@ -40,7 +40,7 @@ defineProps<{ validators: ValidatorScore[] }>()
       <Copyable :content="validator.address" :style="{ 'view-transition-name': `address-${validator.id}` }" />
 
       <ScorePie
-        size-32 text-12 mx-auto :score="validator.total"
+        size-32 text-12 mx-auto :score="validator.total" :decimals="0"
         :style="{ 'view-transition-name': `score-${validator.id}` }"
       />
     </NuxtLink>