mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-11 02:33:51 +00:00
script setup: Balancecharts
This commit is contained in:
parent
d4c6815eca
commit
66758de2b6
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user