improve governance

src/@core/scss/base/bootstrap-extended/_progress.scss

@@ -22,3 +22,28 @@
 .progress {
   border-radius: 3px;
 }
+
+
+.scale {
+  width: 100%;
+  height: 3em;
+  position: relative;
+  /* margin: 30px; // */
+}
+.box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding-top: 0.5em;
+  /* opacity: 0.7; /**/
+  background: transparent;
+}
+.overlay {
+  z-index: 9;
+  width: 2px;
+  border-right-color: green;
+  border-right-width: 2px;
+  border-right-style: dotted;
+}

src/views/Dashboard.vue

@@ -138,6 +138,7 @@
                       :max="totalPower? 100 * (totalPower/prop.tally.total) :100"
                       height="2rem"
                       show-progress
+                      class="font-small-1"
                     >
                       <b-progress-bar
                         :id="'vote-yes'+prop.id"
@@ -148,14 +149,14 @@
                       />
                       <b-progress-bar
                         :id="'vote-no'+prop.id"
-                        variant="warning"
+                        variant="danger"
                         :value="percent(prop.tally.no)"
                         :label="`${percent(prop.tally.no).toFixed()}%`"
                         show-progress
                       />
                       <b-progress-bar
                         :id="'vote-veto'+prop.id"
-                        variant="danger"
+                        class="bg-danger bg-darken-4"
                         :value="percent(prop.tally.veto)"
                         :label="`${percent(prop.tally.veto).toFixed()}%`"
                         show-progress
@@ -171,7 +172,7 @@
                   </div>
                   <div
                     class="box overlay"
-                    :style="`width:${scaleWidth(prop.tally)}%`"
+                    :style="`left:${scaleWidth(prop.tally)}%;`"
                   />
                 </div>
                 <b-tooltip
@@ -195,7 +196,10 @@
                   {{ percent(prop.tally.abstain) }}% voters voted Abstain
                 </b-tooltip>
               </b-col>
-              <b-col cols="4">
+              <b-col
+                cols="4"
+                style="padding-top: 0.5em"
+              >
                 <b-button
                   v-b-modal.operation-modal
                   variant="primary"
@@ -794,28 +798,4 @@ export default {
 .addzone :hover {
     border: 2px dashed #7367F0;
 }
-
-.scale {
-  width: 100%;
-  height: 3em;
-  position: relative;
-  /* margin: 30px; // */
-}
-.box {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding-top: 0.5em;
-  /* opacity: 0.7; */
-  background: transparent;
-}
-.overlay {
-  z-index: 9;
-  border-right-color: green;
-  border-right-width: 2px;
-  border-right-style: dotted;
-  background: transparent;
-}
 </style>

src/views/Governance.vue

@@ -10,6 +10,7 @@
         <proposal-summary-component
           :p="p"
           :total-power="totalPower"
+          :tally-param="tallyParam"
         />
       </b-col>
     </b-row>
@@ -68,9 +69,13 @@ export default {
       operationModalType: '',
       next: '',
       totalPower: 0,
+      tallyParam: null,
     }
   },
   mounted() {
+    this.$http.getGovernanceParameterTallying().then(res => {
+      this.tallyParam = res
+    })
     this.getList()
   },
   methods: {

src/views/GovernanceProposalView.vue

@@ -112,6 +112,9 @@
         </b-card-title>
       </b-card-header>
       <b-card-body>
+        <div>
+          <div class="scale">
+            <div class="box">
               <b-progress
                 :max="totalPower && proposal.status ===2? 100 * (totalPower/proposal.tally.total) :100"
                 height="2rem"
@@ -127,14 +130,14 @@
                 />
                 <b-progress-bar
                   :id="'vote-no'+proposal.id"
-            variant="warning"
+                  variant="danger"
                   :value="percent(proposal.tally.no)"
                   :label="`${percent(proposal.tally.no).toFixed()}%`"
                   show-progress
                 />
                 <b-progress-bar
                   :id="'vote-veto'+proposal.id"
-            variant="danger"
+                  class="bg-danger bg-darken-4"
                   :value="percent(proposal.tally.veto)"
                   :label="`${percent(proposal.tally.veto).toFixed()}%`"
                   show-progress
@@ -167,6 +170,14 @@
               >
                 {{ percent(proposal.tally.abstain) }}% voted Abstain
               </b-tooltip>
+
+              <div
+                v-if="tallyParam"
+                class="box overlay"
+                :style="`left:${scaleWidth(proposal)}%;`"
+              />
+            </div>
+          </div>
           <b-table
             v-if="votes.votes && votes.votes.length > 0"
             stacked="sm"
@@ -188,7 +199,7 @@
             <feather-icon icon="PlusIcon" />
             Load More Votes
           </div>
-      </b-card-body>
+        </div></b-card-body>
     </b-card>
     <b-card
       v-if="proposal.total_deposit"
@@ -290,6 +301,7 @@ export default {
   },
   data() {
     return {
+      tallyParam: null,
       latest: {},
       next: null,
       proposal: new Proposal(),
@@ -357,6 +369,9 @@ export default {
     },
   },
   created() {
+    this.$http.getGovernanceParameterTallying().then(res => {
+      this.tallyParam = res
+    })
     const pid = this.$route.params.proposalid
     if (this.$route.query.from) {
       this.from = this.$route.query.from
@@ -392,6 +407,15 @@ export default {
     })
   },
   methods: {
+    scaleWidth(p) {
+      if (this.tallyParam) {
+        if (p.status === 2) {
+          return Number(this.tallyParam.quorum) * Number(this.tallyParam.threshold) * 100
+        }
+        return Number(this.tallyParam.threshold) * 100
+      }
+      return 50
+    },
     percent: v => percent(v),
     formatDate: v => dayjs(v).format('YYYY-MM-DD HH:mm'),
     formatToken: v => tokenFormatter(v, {}),

src/views/components/governance/ProposalSummaryComponent.vue

@@ -63,7 +63,9 @@
         </h6>
       </div>
     </div>
-
+    <div>
+      <div class="scale">
+        <div class="box">
           <b-progress
             :max="totalPower && p.status === 2? 100 * (totalPower/p.tally.total) :100"
             height="2rem"
@@ -79,14 +81,14 @@
             />
             <b-progress-bar
               :id="'vote-no'+p.id"
-        variant="warning"
+              variant="danger"
               :value="percent(p.tally.no)"
               :label="`${percent(p.tally.no).toFixed()}%`"
               show-progress
             />
             <b-progress-bar
               :id="'vote-veto'+p.id"
-        variant="danger"
+              class="bg-danger bg-darken-4"
               :value="percent(p.tally.veto)"
               :label="`${percent(p.tally.veto).toFixed()}%`"
               show-progress
@@ -99,6 +101,12 @@
               show-progress
             />
           </b-progress>
+          <div
+            v-if="tallyParam"
+            class="box overlay"
+            :style="`left:${scaleWidth(p)}%;`"
+          />
+        </div>
         <b-tooltip
           :target="'vote-yes'+p.id"
         >
@@ -119,6 +127,7 @@
         >
           {{ percent(p.tally.abstain) }}% voted Abstain
         </b-tooltip>
+      </div>
       <b-card-footer class="pb-0">
         <router-link
           v-ripple.400="'rgba(113, 102, 240, 0.15)'"
@@ -152,7 +161,7 @@
           {{ $t('btn_vote') }}
         </b-button>
       </b-card-footer>
-  </b-card>
+    </div></b-card>
 </template>
 
 <script>
@@ -191,8 +200,21 @@ export default {
       type: Number,
       default: 0,
     },
+    tallyParam: {
+      type: Object,
+      default: null,
+    },
   },
   methods: {
+    scaleWidth(p) {
+      if (this.tallyParam) {
+        if (p.status === 2) {
+          return Number(this.tallyParam.quorum) * Number(this.tallyParam.threshold) * 100
+        }
+        return Number(this.tallyParam.threshold) * 100
+      }
+      return 50
+    },
     selectProposal(modal, pid, title) {
       this.$parent.operationModalType = modal
       this.$parent.selectedProposalId = Number(pid)