Merge pull request #252 from cosmos/peng/177-delegated-power-percentage

Delegated power percentage instead of bar
luniehq · Dec 19, 2017 · 7d523eb · 7d523eb
2 parents cbb53f6 + 641543d
commit 7d523eb
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 56 deletions.
diff --git a/app/src/renderer/components/staking/LiDelegate.vue b/app/src/renderer/components/staking/LiDelegate.vue
@@ -8,21 +8,19 @@ transition(name='ts-li-delegate'): div(:class='styles')
             i.fa.fa-check-square-o(v-if='inCart' @click='rm(delegate)')
             i.fa.fa-square-o(v-else @click='add(delegate)')
           router-link(v-if="config.devMode" :to="{ name: 'delegate', params: { delegate: delegate.id }}")
-            //- | {{ delegate.keybaseID ? delegate.keybaseID : 'n/a'}}
             | {{ delegate.id }}
           a(v-else) {{ delegate.id }}
       .value {{ delegate.country ? delegate.country : 'n/a' }}
       .value.voting_power.num.bar
         span {{ num.prettyInt(delegate.voting_power) }}
         .bar(:style='vpStyles')
-      .value.delegated.num.bar.delegated
-        span {{ num.prettyInt(delegate.shares) }}
-        .bar(:style='sharesStyles')
-      .value {{ delegate.commission ? (delegate.commission * 100).toFixed(2) + '%' : 'n/a' }}
+      .value.delegated
+        span {{ num.percentInt(bondedPercent) }}
+      .value {{ delegate.commission ? num.percentInt(delegate.commission) : 'n/a' }}
     menu
-      btn(theme='cosmos' v-if='inCart'
+      btn(v-if='inCart'
         icon='delete' value='Remove' size='sm' @click.native='rm(delegate)')
-      btn(v-else='' theme='cosmos'
+      btn(v-else
         icon='check' value='Add' size='sm' @click.native='add(delegate)')
 </template>
 
@@ -55,16 +53,8 @@ export default {
         Math.round((this.delegate.voting_power / this.vpMax) * 100)
       return { width: percentage + '%' }
     },
-    sharesMax () {
-      if (this.delegates) {
-        let richestDelegate = maxBy(this.delegates, 'shares')
-        return richestDelegate.shares
-      } else { return 0 }
-    },
-    sharesStyles () {
-      let percentage =
-        Math.round((this.delegate.shares / this.sharesMax) * 100)
-      return { width: percentage + '%' }
+    bondedPercent () {
+      return this.delegate.shares / this.delegate.voting_power
     },
     inCart () {
       return this.shoppingCart.find(c => c.id === this.delegate.id)

diff --git a/app/src/renderer/components/staking/PageDelegates.vue b/app/src/renderer/components/staking/PageDelegates.vue
@@ -73,7 +73,7 @@ export default {
         { id: 1, title: 'Public Key', value: 'id', initial: true },
         { id: 2, title: 'Country', value: 'country' },
         { id: 3, title: 'Voting Power', value: 'voting_power' },
-        { id: 4, title: 'Delegated Power', value: 'shares' },
+        { id: 4, title: 'Bonded Power', value: 'shares' },
         { id: 5, title: 'Commission', value: 'commission' }
       ]
     }

diff --git a/app/src/renderer/scripts/num.js b/app/src/renderer/scripts/num.js
@@ -45,6 +45,8 @@ function integerize (num) {
 function fractionize (num) {
   return numeral(num).format('.00')
 }
+function percentInt (x) { return numeral(x).format('0%') }
+function percent (x) { return numeral(x).format('0.00%') }
 
 export default {
   usd,
@@ -55,5 +57,7 @@ export default {
   int: integerize,
   frac: fractionize,
   short: short,
-  shortInt
+  shortInt,
+  percent: percent,
+  percentInt: percentInt
 }
diff --git a/test/unit/specs/__snapshots__/LiDelegate.spec.js.snap b/test/unit/specs/__snapshots__/LiDelegate.spec.js.snap
@@ -42,15 +42,11 @@ exports[`LiDelegate has the expected html structure 1`] = `
         />
       </div>
       <div
-        class="value delegated num bar delegated"
+        class="value delegated"
       >
         <span>
-          5,000
+          50%
         </span>
-        <div
-          class="bar"
-          style="width: 50%;"
-        />
       </div>
       <div
         class="value"
@@ -63,7 +59,7 @@ exports[`LiDelegate has the expected html structure 1`] = `
         class="ni-btn"
       >
         <span
-          class="ni-btn-container ni-btn-size-sm ni-btn-theme-cosmos"
+          class="ni-btn-container ni-btn-size-sm"
         >
           <i
             aria-hidden="true"

diff --git a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap
@@ -140,7 +140,7 @@ exports[`PageDelegates has the expected html structure 1`] = `
           <div
             class="label"
           >
-            Delegated Power
+            Bonded Power
           </div>
         </div>
         <div
@@ -194,15 +194,11 @@ exports[`PageDelegates has the expected html structure 1`] = `
             />
           </div>
           <div
-            class="value delegated num bar delegated"
+            class="value delegated"
           >
             <span>
-              5,000
+              50%
             </span>
-            <div
-              class="bar"
-              style="width: 50%;"
-            />
           </div>
           <div
             class="value"
@@ -215,7 +211,7 @@ exports[`PageDelegates has the expected html structure 1`] = `
             class="ni-btn"
           >
             <span
-              class="ni-btn-container ni-btn-size-sm ni-btn-theme-cosmos"
+              class="ni-btn-container ni-btn-size-sm"
             >
               <i
                 aria-hidden="true"
@@ -273,15 +269,11 @@ exports[`PageDelegates has the expected html structure 1`] = `
             />
           </div>
           <div
-            class="value delegated num bar delegated"
+            class="value delegated"
           >
             <span>
-              10,000
+              33%
             </span>
-            <div
-              class="bar"
-              style="width: 100%;"
-            />
           </div>
           <div
             class="value"
@@ -294,7 +286,7 @@ exports[`PageDelegates has the expected html structure 1`] = `
             class="ni-btn"
           >
             <span
-              class="ni-btn-container ni-btn-size-sm ni-btn-theme-cosmos"
+              class="ni-btn-container ni-btn-size-sm"
             >
               <i
                 aria-hidden="true"
@@ -490,7 +482,7 @@ exports[`PageDelegates should filter the delegates 1`] = `
           <div
             class="label"
           >
-            Delegated Power
+            Bonded Power
           </div>
         </div>
         <div
@@ -544,15 +536,11 @@ exports[`PageDelegates should filter the delegates 1`] = `
             />
           </div>
           <div
-            class="value delegated num bar delegated"
+            class="value delegated"
           >
             <span>
-              5,000
+              50%
             </span>
-            <div
-              class="bar"
-              style="width: 50%;"
-            />
           </div>
           <div
             class="value"
@@ -565,7 +553,7 @@ exports[`PageDelegates should filter the delegates 1`] = `
             class="ni-btn"
           >
             <span
-              class="ni-btn-container ni-btn-size-sm ni-btn-theme-cosmos"
+              class="ni-btn-container ni-btn-size-sm"
             >
               <i
                 aria-hidden="true"
@@ -623,15 +611,11 @@ exports[`PageDelegates should filter the delegates 1`] = `
             />
           </div>
           <div
-            class="value delegated num bar delegated"
+            class="value delegated"
           >
             <span>
-              10,000
+              33%
             </span>
-            <div
-              class="bar"
-              style="width: 100%;"
-            />
           </div>
           <div
             class="value"
@@ -644,7 +628,7 @@ exports[`PageDelegates should filter the delegates 1`] = `
             class="ni-btn"
           >
             <span
-              class="ni-btn-container ni-btn-size-sm ni-btn-theme-cosmos"
+              class="ni-btn-container ni-btn-size-sm"
             >
               <i
                 aria-hidden="true"