fix label issue

src/views/Dashboard.vue

@@ -133,7 +133,7 @@
             <b-row>
               <b-col cols="8">
                 <b-progress
-                  :max="100"
+                  :max="totalPower? 100 * (totalPower/prop.tally.total) :100"
                   height="2rem"
                   show-progress
                 >
@@ -169,22 +169,22 @@
                 <b-tooltip
                   :target="'vote-yes'+prop.id"
                 >
-                  {{ percent(prop.tally.yes) }}% voted Yes
+                  {{ percent(prop.tally.yes) }}% voters voted Yes
                 </b-tooltip>
                 <b-tooltip
                   :target="'vote-no'+prop.id"
                 >
-                  {{ percent(prop.tally.no) }}% voted No
+                  {{ percent(prop.tally.no) }}% voters voted No
                 </b-tooltip>
                 <b-tooltip
                   :target="'vote-veto'+prop.id"
                 >
-                  {{ percent(prop.tally.veto) }}% voted No With Veto
+                  {{ percent(prop.tally.veto) }}% voters voted No With Veto
                 </b-tooltip>
                 <b-tooltip
                   :target="'vote-abstain'+prop.id"
                 >
-                  {{ percent(prop.tally.abstain) }}% voted Abstain
+                  {{ percent(prop.tally.abstain) }}% voters voted Abstain
                 </b-tooltip>
               </b-col>
               <b-col cols="4">
@@ -515,6 +515,7 @@ export default {
       selectedProposalId: 0,
       selectedTitle: '',
       operationModalType: '',
+      totalPower: 0,
       voteColors: {
         YES: 'success',
         NO: 'warning',
@@ -568,20 +569,21 @@ export default {
           this.supply = `${formatNumber(formatTokenAmount(pool[1].amount, 2, res.bond_denom, false), true, 2)}`
           this.bonded = `${formatNumber(formatTokenAmount(pool[0].bondedToken, 2, res.bond_denom, false), true, 2)}`
           this.ratio = `${percent(pool[0].bondedToken / pool[1].amount)}%`
-
-          this.$http.getGovernanceListByStatus(2).then(gov => {
-            gov.proposals.forEach(p => {
-              this.$http.getGovernanceTally(p.id, pool[0].bondedToken).then(update => {
-                const p2 = p
-                p2.tally = update
-                this.proposals.push(p2)
-                this.proposals.sort((a, b) => a.id - b.id)
-              })
-            })
-          })
+          this.totalPower = pool[0].bondedToken
         })
     })
 
+    this.$http.getGovernanceListByStatus(2).then(gov => {
+      gov.proposals.forEach(p => {
+        this.$http.getGovernanceTally(p.id, 0).then(update => {
+          const p2 = p
+          p2.tally = update
+          this.proposals.push(p2)
+          this.proposals.sort((a, b) => a.id - b.id)
+        })
+      })
+    })
+
     this.$http.getLatestBlock().then(res => {
       this.height = res.block.header.height
       if (timeIn(res.block.header.time, 3, 'm')) {
@@ -722,6 +724,9 @@ export default {
       return value ? value.replace(/(?:\\[rn])+/g, '\n') : '-'
     },
     percent: v => percent(v),
+    processBarLength(v) {
+      return percent(v)
+    },
     formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm:ss'),
     convert(v) {
       if (typeof v === 'object') {

src/views/Governance.vue

@@ -7,7 +7,10 @@
         lg="6"
         md="12"
       >
-        <proposal-summary-component :p="p" />
+        <proposal-summary-component
+          :p="p"
+          :total-power="totalPower"
+        />
       </b-col>
     </b-row>
     <b-row v-if="next">
@@ -64,6 +67,7 @@ export default {
       max: 1,
       operationModalType: '',
       next: '',
+      totalPower: 0,
     }
   },
   mounted() {
@@ -81,9 +85,10 @@ export default {
     },
     updateTally(res) {
       this.$http.getStakingPool().then(pool => {
+        this.totalPower = pool.bondedToken
         const voting = res.filter(i => i.status === 2)
         if (voting.length > 0) {
-          voting.forEach(p => this.$http.getGovernanceTally(p.id, pool.bondedToken).then(update => {
+          voting.forEach(p => this.$http.getGovernanceTally(p.id, 0).then(update => {
             this.$set(p, 'tally', update)
           }))
         }

src/views/GovernanceProposalView.vue

@@ -113,7 +113,7 @@
       </b-card-header>
       <b-card-body>
         <b-progress
-          :max="100"
+          :max="totalPower && proposal.status ===2? 100 * (totalPower/proposal.tally.total) :100"
           height="2rem"
           class="mb-2"
           show-progress
@@ -294,6 +294,7 @@ export default {
       next: null,
       proposal: new Proposal(),
       proposer: new Proposer(),
+      totalPower: 0,
       deposits: [],
       votes: [],
       operationModalType: '',
@@ -368,7 +369,8 @@ export default {
     this.$http.getGovernance(pid).then(p => {
       if (p.status === 2) {
         this.$http.getStakingPool().then(pool => {
-          this.$http.getGovernanceTally(pid, pool.bondedToken).then(t => p.updateTally(t))
+          this.totalPower = pool.bondedToken
+          this.$http.getGovernanceTally(pid, 0).then(t => p.updateTally(t))
         })
       }
       this.proposal = p

src/views/components/governance/ProposalSummaryComponent.vue

@@ -65,7 +65,7 @@
     </div>
 
     <b-progress
-      :max="100"
+      :max="totalPower && p.status === 2? 100 * (totalPower/p.tally.total) :100"
       height="2rem"
       class="mb-2"
       show-progress
@@ -187,6 +187,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    totalPower: {
+      type: Number,
+      default: 0,
+    },
   },
   methods: {
     selectProposal(modal, pid, title) {