improve dashboard

src/views/components/dashboard/DashboardCardHorizontal.vue

@@ -5,29 +5,50 @@
         <h4 class="mb-25 font-weight-bolder">
           {{ statistic || '-' }}
         </h4>
-        <span>{{ statisticTitle }}</span>
+        <span v-if="!statistic || statistic === '-'">{{ statisticTitle }}</span>
+        <span
+          v-else-if="changes < 0"
+          v-b-tooltip.hover.v-danger
+          :title="`${(changes*100).toFixed(1)}%`"
+          class="text-danger"
+        >
+          {{ showPrice(statistic) }}
+        </span>
+        <span
+          v-else
+          v-b-tooltip.hover.v-success
+          :title="`+${(changes*100).toFixed(1)}%`"
+          class="text-success"
+        >
+          {{ showPrice(statistic) }}
+        </span>
       </div>
       <b-avatar
+        v-b-tooltip.hover
         :variant="`light-${color}`"
         size="45"
-      >
-        <feather-icon
-          size="21"
-          :icon="icon"
-        />
-      </b-avatar>
+        :text="statisticTitle.substring(0,1)"
+        :title="statisticTitle"
+      />
     </b-card-body>
   </b-card>
 </template>
 
 <script>
-import { BCard, BCardBody, BAvatar } from 'bootstrap-vue'
+import {
+  BCard, BCardBody, BAvatar, VBTooltip,
+} from 'bootstrap-vue'
+import { getUserCurrency, getUserCurrencySign } from '@/libs/utils'
 
 export default {
   components: {
     BCard,
     BCardBody,
     BAvatar,
+    VBTooltip,
+  },
+  directives: {
+    'b-tooltip': VBTooltip,
   },
   props: {
     icon: {
@@ -47,5 +68,24 @@ export default {
       default: 'primary',
     },
   },
+  data() {
+    return {
+      changes: 0,
+    }
+  },
+  methods: {
+    showPrice(v) {
+      const token = String(v).split(' ')
+      if (token.length >= 2) {
+        const quote = this.$store.state.chains.quotes[token[1]]
+        if (quote) {
+          const price = quote[getUserCurrency()]
+          this.changes = quote[`${getUserCurrency()}_24h_change`]
+          return `${getUserCurrencySign()}${(Number(token[0].replaceAll(',', '')) * price).toFixed(2)}`
+        }
+      }
+      return token
+    },
+  },
 }
 </script>