use scatter chart

package.json

@@ -23,7 +23,7 @@
     "@ledgerhq/hw-app-cosmos": "^6.3.0",
     "@ledgerhq/hw-transport-web-ble": "^6.3.0",
     "@ledgerhq/hw-transport-webusb": "^6.3.0",
-    "@vue/composition-api": "^1.4.0",
+    "@vue/composition-api": "^1.4.9",
     "@vueuse/core": "4.0.0",
     "animate.css": "4.1.1",
     "apexcharts": "3.24.0",
@@ -36,7 +36,7 @@
     "core-js": "3.8.1",
     "cosmjs-types": "^0.2.0",
     "dayjs": "^1.10.6",
-    "echarts": "4.8.0",
+    "echarts": "5.3.0",
     "leaflet": "1.6.0",
     "ledger-cosmos-js": "2.1.8",
     "long": "^5.2.0",
@@ -60,7 +60,7 @@
     "vue-cleave-component": "2.1.3",
     "vue-clipboard2": "0.3.1",
     "vue-context": "6.0.0",
-    "vue-echarts": "5.0.0-beta.0",
+    "vue-echarts": "^6.0.2",
     "vue-feather-icons": "5.1.0",
     "vue-flatpickr-component": "8.1.6",
     "vue-flex-waterfall": "^1.0.7",

src/@core/components/charts/echart/AppEchartScatter.vue

@@ -8,13 +8,13 @@
 </template>
 
 <script>
-import ECharts from 'vue-echarts'
+import * as ECharts from 'echarts'
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
 import 'echarts/lib/chart/scatter'
-import theme from './theme.json'
+// import theme from './theme.json'
 
-ECharts.registerTheme('theme-color', theme)
+// ECharts.registerTheme('theme-color', theme)
 
 export default {
   components: {

src/views/WalletAccounts.vue

@@ -67,10 +67,9 @@
         <b-col
           md="8"
         >
-          <chartjs-component-bar
+          <echart-scatter
-            :height="200"
+            :items.sync="scatters"
-            :chart-data="calculateChartBar"
+            auto-resize
-            :options="options"
           />
         </b-col>
       </b-row>
@@ -291,7 +290,7 @@ import AppCollapseItem from '@core/components/app-collapse/AppCollapseItem.vue'
 import OperationTransferComponent from './OperationTransferComponent.vue'
 import OperationTransfer2Component from './OperationTransfer2Component.vue'
 import ChartComponentDoughnut from './ChartComponentDoughnut.vue'
-import ChartjsComponentBar from './ChartjsComponentBar.vue'
+import EchartScatter from './components/charts/EchartScatter.vue'
 
 export default {
   components: {
@@ -315,9 +314,9 @@ export default {
     ToastificationContent,
     OperationTransfer2Component,
     ChartComponentDoughnut,
-    ChartjsComponentBar,
     AppCollapse,
     AppCollapseItem,
+    EchartScatter,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -395,37 +394,29 @@ export default {
       },
     },
     calculateTotal() {
-      const v = Object.values(this.balances)
       let total = 0
-      if (v) {
+      if (this.calculateByDenom.value) {
-        v.forEach(tokens => {
+        Object.values(this.calculateByDenom.value).forEach(i => {
-          const subtotal = tokens.map(x => this.formatCurrency(x.amount, x.denom)).reduce((t, c) => t + c)
+          total += i
-          total += subtotal
-        })
-      }
-      const d = Object.values(this.delegations)
-      if (d) {
-        d.forEach(tokens => {
-          const subtotal = tokens.map(x => this.formatCurrency(x.amount, x.denom)).reduce((t, c) => t + c, 0)
-          total += subtotal
         })
       }
       return numberWithCommas(parseFloat(total.toFixed(2)))
     },
-    calculateTotalChange() {
+    scatters() {
-      const v = Object.values(this.balances)
+      const total = []
-      let total = 0
+      if (this.calculateByDenom.qty) {
-      if (v) {
+        Object.entries(this.calculateByDenom.qty).forEach(i => {
-        v.forEach(tokens => {
+          const price = this.getPrice(i[0])
-          const subtotal = tokens.map(x => this.formatCurrency(x.amount, x.denom) * this.getChanges(x.denom) * 0.01).reduce((t, c) => t + c)
+          total.push([i[1], i[1] * price, price, i[0]])
-          total += subtotal
         })
       }
-      const d = Object.values(this.delegations)
+      return total
-      if (d) {
+    },
-        d.forEach(tokens => {
+    calculateTotalChange() {
-          const subtotal = tokens.map(x => this.formatCurrency(x.amount, x.denom) * this.getChanges(x.denom) * 0.01).reduce((t, c) => t + c, 0)
+      let total = 0
-          total += subtotal
+      if (this.calculateByDenom.value) {
+        Object.entries(this.calculateByDenom.value).forEach(i => {
+          total += i[1] * this.getChanges(i[0]) * 0.01
         })
       }
       return parseFloat(total.toFixed(2))
@@ -491,32 +482,6 @@ export default {
         ],
       }
     },
-    calculateChartBar() {
-      const total = this.calculateByDenom
-      // Object.entries(total.value).sort((a, b) => b[0].localeCompare(a[0]));
-      const data = Object.entries(total.value).sort((a, b) => b[1] - a[1]).slice(0, 15)
-      return {
-        labels: data.map(x => x[0]),
-        datasets: [
-          {
-            label: 'Market Cap',
-            data: data.map(x => x[1]),
-            backgroundColor: chartColors(),
-            borderWidth: 0,
-            pointStyle: 'rectRounded',
-            yAxisID: 'y-axis-1',
-          },
-          {
-            label: 'Qty',
-            data: data.map(x => total.qty[x[0]]), // Object.values(total.qty),
-            backgroundColor: chartColors(),
-            borderWidth: 0,
-            pointStyle: 'rectRounded',
-            yAxisID: 'y-axis-2',
-          },
-        ],
-      }
-    },
   },
   created() {
     this.init()
@@ -593,13 +558,7 @@ export default {
     },
     formatCurrency(amount, denom) {
       const qty = this.formatAmount(amount, denom, false)
-      const d2 = this.formatDenom(denom)
+      return qty * this.getPrice(denom)
-      const quote = this.$store.state.chains.quotes[d2]
-      if (quote) {
-        const price = quote[this.currency2]
-        return parseFloat((qty * price).toFixed(2))
-      }
-      return 0
     },
     priceColor(denom) {
       const d2 = this.formatDenom(denom)
@@ -610,6 +569,11 @@ export default {
       }
       return ''
     },
+    getPrice(denom) {
+      const d2 = this.formatDenom(denom)
+      const quote = this.$store.state.chains.quotes[d2]
+      return quote ? quote[this.currency2] : 0
+    },
     getChanges(denom) {
       const d2 = this.formatDenom(denom)
       const quote = this.$store.state.chains.quotes[d2]

src/views/components/charts/EchartScatter.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <v-chart
+      class="chart"
+      autoresize
+      :option="option"
+    /></div>
+</template>
+
+<script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { ScatterChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart, { THEME_KEY } from 'vue-echarts'
+import { formatNumber } from '@/libs/utils'
+
+use([
+  CanvasRenderer,
+  ScatterChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+export default {
+  name: 'AssetScatter',
+  components: {
+    VChart,
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  provide: {
+    [THEME_KEY]: 'light',
+  },
+  computed: {
+    option() {
+      return {
+        title: {
+          text: '',
+          left: '5%',
+          top: '3%',
+        },
+        // legend: {
+        //   right: '10%',
+        //   top: '3%',
+        //   data: ['1990', '2015'],
+        // },
+        // grid: {
+        //   left: '8%',
+        //   top: '10%',
+        // },
+        xAxis: {
+          name: 'Qty',
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+            },
+          },
+          axisLabel: {
+            formatter(param) {
+              return formatNumber(param, true, 0)
+            },
+          },
+        },
+        yAxis: {
+          name: 'Value',
+          axisLabel: {
+            formatter(param) {
+              return formatNumber(param, true, 0)
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+            },
+          },
+          scale: true,
+        },
+        series: [
+          {
+            name: '',
+            data: this.items,
+            type: 'scatter',
+            symbolSize(data) {
+              const r = Math.log(data[2]) * 5
+              if (r > 50) {
+                return 50
+              }
+              if (r < 10) {
+                return 10
+              }
+              return r
+            },
+            emphasis: {
+              focus: 'series',
+              label: {
+                show: true,
+                formatter(param) {
+                  return param.data[3]
+                },
+                position: 'top',
+              },
+            },
+            itemStyle: {
+              shadowBlur: 10,
+              shadowColor: 'rgba(120, 36, 50, 0.5)',
+              shadowOffsetY: 5,
+              color: '#7367F0',
+            },
+          },
+        ],
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.chart {
+  height: 300px;
+  width: 100%;
+}
+</style>