script setup: Balancecharts

src/components/charts/BalanceChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-chart
+  <e-charts
     v-if="currencies"
     :option="balanceChartOptions"
     :theme="settingsStore.chartTheme"
@@ -7,7 +7,7 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ECharts from 'vue-echarts';
 import { EChartsOption } from 'echarts';
 
@@ -24,7 +24,7 @@ import {
 
 import { BalanceRecords } from '@/types';
 import { formatPriceCurrency } from '@/shared/formatters';
-import { defineComponent, computed } from 'vue';
+import { computed } from 'vue';
 import { useSettingsStore } from '@/stores/settings';
 
 use([
@@ -37,67 +37,57 @@ use([
   LabelLayout,
 ]);
 
-export default defineComponent({
-  name: 'BalanceChart',
-  components: {
-    'v-chart': ECharts,
-  },
-  props: {
-    currencies: { required: true, type: Array as () => BalanceRecords[] },
-    showTitle: { required: false, type: Boolean },
-  },
-  setup(props) {
-    const settingsStore = useSettingsStore();
+const props = defineProps({
+  currencies: { required: true, type: Array as () => BalanceRecords[] },
+  showTitle: { required: false, type: Boolean },
+});
+const settingsStore = useSettingsStore();
 
-    const balanceChartOptions = computed((): EChartsOption => {
-      return {
-        title: {
-          text: 'Balance',
-          show: props.showTitle,
+const balanceChartOptions = computed((): EChartsOption => {
+  return {
+    title: {
+      text: 'Balance',
+      show: props.showTitle,
+    },
+    center: ['50%', '50%'],
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    dataset: {
+      dimensions: ['balance', 'currency', 'est_stake', 'free', 'used', 'stake'],
+      source: props.currencies,
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: (params) => {
+        return `${formatPriceCurrency(params.value.balance, params.value.currency, 8)}<br />${
+          params.percent
+        }% (${formatPriceCurrency(params.value.est_stake, params.value.stake)})`;
+      },
+    },
+    // legend: {
+    //   orient: 'vertical',
+    //   right: 10,
+    //   top: 20,
+    //   bottom: 20,
+    // },
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+
+        encode: {
+          value: 'est_stake',
+          itemName: 'currency',
+          tooltip: ['balance', 'currency'],
         },
-        center: ['50%', '50%'],
-        backgroundColor: 'rgba(0, 0, 0, 0)',
-        dataset: {
-          dimensions: ['balance', 'currency', 'est_stake', 'free', 'used', 'stake'],
-          source: props.currencies,
+        label: {
+          formatter: '{b} - {d}%',
         },
         tooltip: {
-          trigger: 'item',
-          formatter: (params) => {
-            return `${formatPriceCurrency(params.value.balance, params.value.currency, 8)}<br />${
-              params.percent
-            }% (${formatPriceCurrency(params.value.est_stake, params.value.stake)})`;
-          },
+          show: true,
         },
-        // legend: {
-        //   orient: 'vertical',
-        //   right: 10,
-        //   top: 20,
-        //   bottom: 20,
-        // },
-        series: [
-          {
-            type: 'pie',
-            radius: ['40%', '70%'],
-
-            encode: {
-              value: 'est_stake',
-              itemName: 'currency',
-              tooltip: ['balance', 'currency'],
-            },
-            label: {
-              formatter: '{b} - {d}%',
-            },
-            tooltip: {
-              show: true,
-            },
-          },
-        ],
-      };
-    });
-
-    return { balanceChartOptions, settingsStore };
-  },
+      },
+    ],
+  };
 });
 </script>