fix: show fraction digits only for non-whole number percentages

See: BEDS-878
gobitfly · Dec 13, 2024 · ff6abba · ff6abba
1 parent 6210e7c
commit ff6abba
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 38 deletions.
diff --git a/frontend/components/bc/format/BcFormatPercent.vue b/frontend/components/bc/format/BcFormatPercent.vue
@@ -8,57 +8,70 @@ import {
 } from '@fortawesome/pro-solid-svg-icons'
 import type { CompareResult } from '~/types/value'
 
-interface Props {
-  addPositiveSign?: boolean,
-  base?: number,
+const {
+  addPositiveSign,
+  base,
   // if set then the percentage will be colored accordingly. Do not use it in combination with comparePercent
-  colorBreakPoint?: number,
-  comparePercent?: number, // if set it adds the compare sign in front and colors the values accordingly
-  fixed?: number,
-  fullOnEmptyBase?: boolean,
-  hideEmptyValue?: boolean,
-  percent?: number,
-  precision?: number,
-  value?: number,
+  colorBreakPoint,
+  comparePercent,
+  fullOnEmptyBase,
+  hideEmptyValue,
+  maximumFractionDigits = 2,
+  minimumFractionDigits = 0,
+  percent,
+  value,
 }
-
-const props = defineProps<Props>()
+ = defineProps<{
+   addPositiveSign?: boolean,
+   base?: number,
+   // if set then the percentage will be colored accordingly. Do not use it in combination with comparePercent
+   colorBreakPoint?: number,
+   comparePercent?: number, // if set it adds the compare sign in front and colors the values accordingly
+   fullOnEmptyBase?: boolean,
+   hideEmptyValue?: boolean,
+   maximumFractionDigits?: number,
+   minimumFractionDigits?: number,
+   percent?: number,
+   value?: number,
+ }>()
 
 const data = computed(() => {
   let label: null | string = null
   let compareResult: CompareResult | null = null
   let className = ''
-  if (props.base === 0 && props.fullOnEmptyBase) {
+  if (base === 0 && fullOnEmptyBase) {
     return {
       className: 'text-positive',
       label: '100%',
     }
   }
   let leadingIcon: IconDefinition | undefined
-  if (props.percent === undefined && !props.base) {
-    if (!props.hideEmptyValue) {
+  if (percent === undefined && !base) {
+    if (!hideEmptyValue) {
       label = '0%'
     }
     return {
       className,
       label,
     }
   }
-  const percent = props.percent ?? calculatePercent(props.value, props.base)
-  const config = {
-    addPositiveSign: props.addPositiveSign,
-    fixed: props.fixed ?? 2,
-    precision: props.precision ?? 2,
-  }
-  label = formatPercent(percent, config)
-  if (props.comparePercent !== undefined) {
+  const localPercent = percent ?? calculatePercent(value, base)
+  label = new Intl.NumberFormat('en', {
+    maximumFractionDigits,
+    minimumFractionDigits,
+    style: 'unit',
+    unit: 'percent',
+  }).format(localPercent)
+  label = addPositiveSign ? `+${label}` : label
+
+  if (comparePercent !== undefined) {
     const thresholdToDifferenciateUnderperformerAndOverperformer = 0.25
-    if (Math.abs(props.comparePercent - percent) <= thresholdToDifferenciateUnderperformerAndOverperformer) {
+    if (Math.abs(comparePercent - localPercent) <= thresholdToDifferenciateUnderperformerAndOverperformer) {
       className = 'text-equal'
       leadingIcon = faArrowsLeftRight
       compareResult = 'equal'
     }
-    else if (percent > props.comparePercent) {
+    else if (localPercent > comparePercent) {
       className = 'text-positive'
       leadingIcon = faArrowUp
       compareResult = 'higher'
@@ -69,10 +82,10 @@ const data = computed(() => {
       compareResult = 'lower'
     }
   }
-  else if (props.colorBreakPoint) {
+  else if (colorBreakPoint) {
     if (
-      (props.base === 0 && percent === 0)
-      || percent >= props.colorBreakPoint
+      (base === 0 && localPercent === 0)
+      || localPercent >= colorBreakPoint
     ) {
       className = 'text-positive'
     }

diff --git a/frontend/components/dashboard/table/DashboardTableEfficiency.vue b/frontend/components/dashboard/table/DashboardTableEfficiency.vue
@@ -48,12 +48,12 @@ const data = computed(() => {
         :value="props.failed"
       />
     </span>
+
     <BcFormatPercent
       v-else
       class="percent"
       :base="data.sum"
       :value="props.success"
-      :fixed="undefined"
       :color-break-point="80"
       :full-on-empty-base="true"
     />

diff --git a/frontend/components/dashboard/table/DashboardTableSummaryValue.vue b/frontend/components/dashboard/table/DashboardTableSummaryValue.vue
@@ -322,7 +322,7 @@ const openValidatorModal = () => {
         <BcFormatPercent
           class="space_before"
           :percent="data.luck.proposal.percent"
-          :precision="0"
+          :maximum-fraction-digits="0"
         />
       </span>
       <span> | </span>
@@ -331,7 +331,7 @@ const openValidatorModal = () => {
         <BcFormatPercent
           class="space_before"
           :percent="data.luck.sync.percent"
-          :precision="0"
+          :maximum-fraction-digits="0"
         />
       </span>
     </span>

diff --git a/frontend/components/dashboard/table/DashboardTableValueDuty.vue b/frontend/components/dashboard/table/DashboardTableValueDuty.vue
@@ -20,8 +20,7 @@ defineProps<Props>()
       <BcFormatPercent
         class="round-brackets"
         :percent="duty.attestation"
-        :fixed="0"
-        :precision="0"
+        :maximum-fraction-digits="0"
       />
     </div>
     <div
@@ -32,8 +31,7 @@ defineProps<Props>()
       <BcFormatPercent
         class="round-brackets"
         :percent="duty.proposal"
-        :fixed="0"
-        :precision="0"
+        :maximum-fraction-digits="0"
       />
     </div>
     <div
@@ -44,8 +42,7 @@ defineProps<Props>()
       <BcFormatPercent
         class="round-brackets"
         :percent="duty.sync"
-        :fixed="0"
-        :precision="0"
+        :maximum-fraction-digits="0"
       />
     </div>
     <div