From 06188977610127b58ef008d29109c66b63f5dac9 Mon Sep 17 00:00:00 2001
From: alisa <alisa@side.one>
Date: Tue, 25 Apr 2023 01:05:00 +0800
Subject: [PATCH] feat: add npm run dev

---
 package.json                                  |  1 +
 .../src/components/ProposalProcess.vue        | 89 ++++++++++---------
 2 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index aa377864..f832a4c0 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "target": "",
   "scripts": {
+    "dev": "vite",
     "serve": "vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
diff --git a/packages/dashboard/src/components/ProposalProcess.vue b/packages/dashboard/src/components/ProposalProcess.vue
index 09b5d065..28d3e823 100644
--- a/packages/dashboard/src/components/ProposalProcess.vue
+++ b/packages/dashboard/src/components/ProposalProcess.vue
@@ -1,58 +1,67 @@
 <script lang="ts" setup>
-import { useFormatter } from '@/stores';
-import { computed } from '@vue/reactivity';
-import { ref, type PropType } from 'vue';
-
+import { useFormatter } from "@/stores";
+import { computed } from "@vue/reactivity";
+import { ref, type PropType } from "vue";
 
 const props = defineProps({
-  tally: { type: Object as PropType<{
-    yes: string,
-    no: string,
-    noWithVeto: string,
-    abstain: string
-  }>},
-  pool: {
+  tally: {
     type: Object as PropType<{
-        notBondedTokens: string;
-        bondedTokens: string;
+      yes: string;
+      no: string;
+      noWithVeto: string;
+      abstain: string;
     }>,
   },
-})
-const format = useFormatter()
-const yes = computed(() => (format.calculatePercent(props.tally?.yes, props.pool?.bondedTokens)))
-const no = computed(() => ref(format.calculatePercent(props.tally?.no, props.pool?.bondedTokens)))
-const abstain = computed(() => (format.calculatePercent(props.tally?.abstain, props.pool?.bondedTokens)))
-const veto = computed(() => (format.calculatePercent(props.tally?.noWithVeto, props.pool?.bondedTokens)))
-
-
-console.log(yes.value, no.value, abstain.value, veto.value)
+  pool: {
+    type: Object as PropType<{
+      notBondedTokens: string;
+      bondedTokens: string;
+    }>,
+  },
+});
+const format = useFormatter();
+const yes = computed(() =>
+  format.calculatePercent(props.tally?.yes, props.pool?.bondedTokens)
+);
+const no = computed(() =>
+  ref(format.calculatePercent(props.tally?.no, props.pool?.bondedTokens))
+);
+const abstain = computed(() =>
+  format.calculatePercent(props.tally?.abstain, props.pool?.bondedTokens)
+);
+const veto = computed(() =>
+  format.calculatePercent(props.tally?.noWithVeto, props.pool?.bondedTokens)
+);
 </script>
 <template>
-<div class="progress">
-  <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
-  <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
-  <div class="progress-bar " :style="`width: ${veto}; background-color: #B71C1C;`"></div>
-  <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
-</div>
+  <div class="progress">
+    <div class="progress-bar bg-success" :style="`width: ${yes}`"></div>
+    <div class="progress-bar bg-error" :style="`width: ${no}`"></div>
+    <div
+      class="progress-bar"
+      :style="`width: ${veto}; background-color: #B71C1C;`"
+    ></div>
+    <div class="progress-bar bg-secondary" :style="`width: ${abstain}`"></div>
+  </div>
 </template>
 <style scoped>
 .progress {
-    height: 0.8rem;
-    overflow: hidden;
-    background-color: rgba(128, 128, 128, 0.178);
+  height: 0.8rem;
+  overflow: hidden;
+  background-color: rgba(128, 128, 128, 0.178);
 }
 .progress-bar {
-    display: inline-block;
-    height: 100%;
+  display: inline-block;
+  height: 100%;
 }
 .progress :first-child {
-    border-radius: 0px !important;
-    border-top-right-radius: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-top-left-radius: 0;
+  border-radius: 0px !important;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 0;
 }
 .progress :last-child {
-    border-radius: 0px !important;
+  border-radius: 0px !important;
 }
-</style>
\ No newline at end of file
+</style>