refactor: replace and remove <BcFormatPercent>

See: BEDS-1147

Author: enzo-bitfly

frontend/components/bc/BcColor.vue

@@ -3,6 +3,7 @@ export type Color =
   | 'gray'
   | 'green'
   | 'red'
+  | 'yellow'
 
 defineProps<{
   color?: Color,
@@ -15,6 +16,7 @@ defineProps<{
       'bc-color--gray': color === 'gray',
       'bc-color--green': color === 'green',
       'bc-color--red': color === 'red',
+      'bc-color--yellow': color === 'yellow',
     }"
   >
     <slot />
@@ -28,6 +30,9 @@ defineProps<{
   .bc-color--red {
     color: var(--negative-color);
   }
+  .bc-color--yellow {
+    color: var(--equal-color);
+  }
   .bc-color--gray {
     color: var(--grey);
   }

frontend/components/bc/format/BcFormatPercent.vue

@@ -46,9 +46,9 @@ defineProps<Props>()
       <div class="name">
         {{ entry.name }}:
       </div>
-      <BcFormatPercent
+      <BaseFormatPercent
         class="efficiency"
-        :percent="entry.efficiency"
+        :value="entry.efficiency / 100"
       />
     </div>
   </div>

frontend/components/dashboard/chart/DashboardChartSummaryTooltip.vue

@@ -137,7 +137,7 @@ const data = computed(() => {
   else if (row && props.property === 'efficiency') {
     return {
       efficiencyTotal: {
-        compare: row.average_network_efficiency,
+        networkEfficiency: row.average_network_efficiency,
         value: row.efficiency,
       },
     }
@@ -334,20 +334,14 @@ const openValidatorModal = () => {
             class="space_before"
             :value="data.apr.income.el"
             source-currency="elCurrency"
-          /> (
-          <BaseFormatPercent
-            :value="data.apr.apr.el"
-          />
-          )
+          /> (<BaseFormatPercent :value="data.apr.apr.el" />)
         </div>
         <div class="row">
           <b>{{ $t("common.consensus_layer") }}:</b>
           <BcFormatAmount
             class="space_before"
             :value="data.apr.income.cl"
-          /> (<BaseFormatPercent
-            :value="data.apr.apr.cl"
-          />)
+          /> (<BaseFormatPercent :value="data.apr.apr.cl" />)
         </div>
       </template>
     </BcTooltip>
@@ -419,25 +413,90 @@ const openValidatorModal = () => {
     </BcTooltip>
   </div>
 
-  <BcFormatPercent
-    v-else-if="data?.efficiencyTotal"
-    :percent="data.efficiencyTotal.value * 100"
-    :compare-percent="data.efficiencyTotal.compare * 100"
-    :color-break-point="80"
-  >
-    <template #leading-tooltip="{ compare }">
-      <span class="efficiency-total-tooltip">
-        {{
-          $t(`dashboard.validator.summary.tooltip.${compare}`, {
-            name: groupName,
-            average: formatPercent(row.average_network_efficiency, {
-              maximumFractionDigits: 2,
-            }),
-          })
-        }}
-      </span>
-    </template>
-  </BcFormatPercent>
+  <div v-else-if="data?.efficiencyTotal">
+    <BcColor
+      v-if="data.efficiencyTotal.value > data.efficiencyTotal.networkEfficiency"
+      color="green"
+    >
+      <BcTooltip>
+        <BcIcon
+          name="arrow-up"
+          size="sm"
+          class="efficiency-total-comparison-icon"
+        />
+        <template #tooltip>
+          <span class="efficiency-total-tooltip">
+            {{
+              $t('dashboard.validator.summary.tooltip.higher', {
+                name: groupName,
+                average: formatPercent(data.efficiencyTotal.networkEfficiency, {
+                  maximumFractionDigits: 2,
+                }),
+              })
+            }}
+          </span>
+        </template>
+      </BcTooltip>
+      <BaseFormatPercent
+        :value="data.efficiencyTotal.value"
+      />
+    </BcColor>
+    <BcColor
+      v-else-if="data.efficiencyTotal.networkEfficiency === data.efficiencyTotal.value"
+      color="yellow"
+    >
+      <BcTooltip>
+        <BcIcon
+          name="arrow-left-right"
+          size="sm"
+          class="efficiency-total-comparison-icon"
+        />
+        <template #tooltip>
+          <span class="efficiency-total-tooltip">
+            {{
+              $t('dashboard.validator.summary.tooltip.equal', {
+                name: groupName,
+                average: formatPercent(data.efficiencyTotal.networkEfficiency, {
+                  maximumFractionDigits: 2,
+                }),
+              })
+            }}
+          </span>
+        </template>
+      </BcTooltip>
+      <BaseFormatPercent
+        :value="data.efficiencyTotal.value"
+      />
+    </BcColor>
+    <BcColor
+      v-else
+      color="red"
+    >
+      <BcTooltip>
+        <BcIcon
+          name="arrow-down"
+          size="sm"
+          class="efficiency-total-comparison-icon"
+        />
+        <template #tooltip>
+          <span class="efficiency-total-tooltip">
+            {{
+              $t('dashboard.validator.summary.tooltip.lower', {
+                name: groupName,
+                average: formatPercent(data.efficiencyTotal.networkEfficiency, {
+                  maximumFractionDigits: 2,
+                }),
+              })
+            }}
+          </span>
+        </template>
+      </BcTooltip>
+      <BaseFormatPercent
+        :value="data.efficiencyTotal.value"
+      />
+    </BcColor>
+  </div>
+
   <span v-else-if="data?.simple">
     {{ data.simple?.value }}
   </span>
@@ -478,6 +537,10 @@ const openValidatorModal = () => {
   width: 155px;
 }
 
+.efficiency-total-comparison-icon {
+  margin-right: var(--padding-small);
+}
+
 :global(.dashboard-table-summary-value__tooltip) {
   white-space: pre-line;
 }

frontend/components/dashboard/table/DashboardTableSummaryValue.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
 import type { SummaryValidatorsIconRowInfo } from '~/types/validator'
 
-interface Props {
-  absolute: boolean,
+defineProps<{
   icons: SummaryValidatorsIconRowInfo[],
-  total?: number,
-}
-const props = defineProps<Props>()
-
-const combinedTotal = computed<number>(
-  () =>
-    props.total ?? props.icons?.reduce((sum, icon) => sum + icon.count, 0) ?? 0,
-)
+}>()
 </script>
 
 <template>
@@ -25,13 +17,7 @@ const combinedTotal = computed<number>(
       <BcIcon name="power-off" />
     </div>
     <BcFormatNumber
-      v-if="absolute"
-      :value="status.count"
-    />
-    <BcFormatPercent
-      v-else
       :value="status.count"
-      :base="combinedTotal"
     />
   </div>
 </template>

frontend/components/dashboard/table/SummaryValidatorsIconRow.vue

@@ -155,7 +155,6 @@ const infos = computed(() => {
     <span class="sub-title">{{ props?.subTitle }}</span>
     <DashboardTableSummaryValidatorsIconRow
       :icons="infos.validatorIcons"
-      :absolute="true"
     />
     <div
       v-for="(info, index) in infos.list"