fix: show more decimals to prevent visual rounding issues

nimiq · Dec 17, 2024 · 76dc9cc · 76dc9cc
1 parent 5ab06df
commit 76dc9cc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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>