use scatter chart

2022-03-05 23:48:39 +08:00 · 2022-03-05 23:48:39 +08:00 · 976ebef410
commit 976ebef410
parent 24d1f92bae
5 changed files with 270 additions and 2138 deletions
--- a/package.json
+++ b/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",
--- a/src/@core/components/charts/echart/AppEchartScatter.vue
+++ b/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: {
--- a/src/views/WalletAccounts.vue
+++ b/src/views/WalletAccounts.vue
@ -67,10 +67,9 @@
        <b-col
          md="8"
        >
-          <chartjs-component-bar
-            :height="200"
-            :chart-data="calculateChartBar"
-            :options="options"
+          <echart-scatter
+            :items.sync="scatters"
+            auto-resize
          />
        </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) {
-        v.forEach(tokens => {
-          const subtotal = tokens.map(x => this.formatCurrency(x.amount, x.denom)).reduce((t, c) => t + c)
-          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
+      if (this.calculateByDenom.value) {
+        Object.values(this.calculateByDenom.value).forEach(i => {
+          total += i
        })
      }
      return numberWithCommas(parseFloat(total.toFixed(2)))
    },
-    calculateTotalChange() {
-      const v = Object.values(this.balances)
-      let total = 0
-      if (v) {
-        v.forEach(tokens => {
-          const subtotal = tokens.map(x => this.formatCurrency(x.amount, x.denom) * this.getChanges(x.denom) * 0.01).reduce((t, c) => t + c)
-          total += subtotal
+    scatters() {
+      const total = []
+      if (this.calculateByDenom.qty) {
+        Object.entries(this.calculateByDenom.qty).forEach(i => {
+          const price = this.getPrice(i[0])
+          total.push([i[1], i[1] * price, price, i[0]])
        })
      }
-      const d = Object.values(this.delegations)
-      if (d) {
-        d.forEach(tokens => {
-          const subtotal = tokens.map(x => this.formatCurrency(x.amount, x.denom) * this.getChanges(x.denom) * 0.01).reduce((t, c) => t + c, 0)
-          total += subtotal
+      return total
+    },
+    calculateTotalChange() {
+      let total = 0
+      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)
-      const quote = this.$store.state.chains.quotes[d2]
-      if (quote) {
-        const price = quote[this.currency2]
-        return parseFloat((qty * price).toFixed(2))
-      }
-      return 0
+      return qty * this.getPrice(denom)
    },
    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]
--- a/src/views/components/charts/EchartScatter.vue
+++ b/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>
--- a/yarn.lock
+++ b/yarn.lock