script setup: Balancecharts

This commit is contained in:
Matthias 2023-04-22 11:55:18 +02:00
parent d4c6815eca
commit 66758de2b6

View File

@ -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>