frequi_origin/src/components/charts/BalanceChart.vue

104 lines
2.4 KiB
Vue
Raw Normal View History

2021-12-19 19:06:25 +00:00
<template>
2022-01-24 18:47:33 +00:00
<v-chart v-if="currencies" :option="balanceChartOptions" :theme="getChartTheme" autoresize />
2021-12-19 19:06:25 +00:00
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Getter } from 'vuex-class';
import ECharts from 'vue-echarts';
import { EChartsOption } from 'echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import {
DatasetComponent,
LegendComponent,
TitleComponent,
TooltipComponent,
} from 'echarts/components';
2022-01-24 18:47:33 +00:00
import { BalanceRecords } from '@/types';
2022-01-06 08:11:36 +00:00
import { formatPriceCurrency } from '@/shared/formatters';
2021-12-19 19:06:25 +00:00
use([
PieChart,
CanvasRenderer,
DatasetComponent,
LegendComponent,
TitleComponent,
TooltipComponent,
LabelLayout,
]);
@Component({
components: {
'v-chart': ECharts,
},
})
export default class BalanceChart extends Vue {
2022-01-24 18:47:33 +00:00
@Prop({ required: true }) currencies!: BalanceRecords[];
2021-12-19 19:06:25 +00:00
@Prop({ default: false, type: Boolean }) showTitle!: boolean;
@Getter getChartTheme!: string;
get balanceChartOptions(): EChartsOption {
return {
title: {
text: 'Balance',
show: this.showTitle,
},
center: ['50%', '50%'],
backgroundColor: 'rgba(0, 0, 0, 0)',
dataset: {
dimensions: ['balance', 'currency', 'est_stake', 'free', 'used', 'stake'],
2022-01-24 18:47:33 +00:00
source: this.currencies,
2021-12-19 19:06:25 +00:00
},
tooltip: {
trigger: 'item',
2022-01-06 08:11:36 +00:00
formatter: (params) => {
console.log(params);
return `${formatPriceCurrency(params.value.balance, params.value.currency, 8)}<br />${
params.percent
}% (${formatPriceCurrency(params.value.est_stake, params.value.stake)})`;
},
2021-12-19 19:06:25 +00:00
},
// legend: {
// orient: 'vertical',
// right: 10,
// top: 20,
// bottom: 20,
// },
series: [
{
type: 'pie',
radius: ['40%', '70%'],
2022-01-06 08:11:36 +00:00
2021-12-19 19:06:25 +00:00
encode: {
2022-01-06 08:11:36 +00:00
value: 'est_stake',
itemName: 'currency',
2021-12-19 19:06:25 +00:00
tooltip: ['balance', 'currency'],
},
label: {
formatter: '{b} - {d}%',
},
tooltip: {
show: true,
},
},
],
};
}
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
min-height: 240px;
}
</style>