lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-10 18:23:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

composition: tradesLog

Browse Source
This commit is contained in:
Matthias 2022-04-17 08:55:56 +02:00
parent 2b1fbeb6f3
commit 0cef5e780d
1 changed files with 126 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

251
src/components/charts/TradesLog.vue
View File

@ -3,9 +3,6 @@
</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';
@ -23,7 +20,8 @@ import {
} from 'echarts/components';
import { ClosedTrade } from '@/types';
import { defineComponent, computed } from '@vue/composition-api';
import { useGetters } from 'vuex-composition-helpers';
import { timestampms } from '@/shared/formatters';
use([
@ -45,142 +43,145 @@ use([
const CHART_PROFIT = 'Profit %';
const CHART_COLOR = '#9be0a8';
@Component({
export default defineComponent({
name: 'TradesLogChart',
components: {
'v-chart': ECharts,
},
})
export default class TradesLogChart extends Vue {
@Prop({ required: true }) trades!: ClosedTrade[];
props: {
trades: { required: true, type: Array as () => ClosedTrade[] },
showTitle: { default: true, type: Boolean },
},
setup(props) {
const { getChartTheme } = useGetters(['getChartTheme']);
const chartData = computed(() => {
const res: (number | string)[][] = [];
const sortedTrades = props.trades
.slice(0)
.sort((a, b) => (a.close_timestamp > b.close_timestamp ? 1 : -1));
for (let i = 0, len = sortedTrades.length; i < len; i += 1) {
const trade = sortedTrades[i];
const entry = [
i,
(trade.profit_ratio * 100).toFixed(2),
trade.pair,
trade.botName,
timestampms(trade.close_timestamp),
trade.is_short === undefined || !trade.is_short ? 'Long' : 'Short',
];
res.push(entry);
}
return res;
});
@Prop({ default: true, type: Boolean }) showTitle!: boolean;
@Getter getChartTheme!: string;
get chartData() {
const res: (number | string)[][] = [];
const sortedTrades = this.trades
.slice(0)
.sort((a, b) => (a.close_timestamp > b.close_timestamp ? 1 : -1));
for (let i = 0, len = sortedTrades.length; i < len; i += 1) {
const trade = sortedTrades[i];
const entry = [
i,
(trade.profit_ratio * 100).toFixed(2),
trade.pair,
trade.botName,
timestampms(trade.close_timestamp),
trade.is_short === undefined || !trade.is_short ? 'Long' : 'Short',
];
res.push(entry);
}
return res;
}
get chartOptions(): EChartsOption {
const { chartData } = this;
// Show a maximum of 50 trades by default - allowing to zoom out further.
const datazoomStart = chartData.length > 0 ? (1 - 50 / chartData.length) * 100 : 100;
return {
title: {
text: 'Trades log',
show: this.showTitle,
},
backgroundColor: 'rgba(0, 0, 0, 0)',
dataset: {
dimensions: ['date', 'profit'],
source: chartData,
},
tooltip: {
trigger: 'axis',
formatter: (params) => {
const botName = params[0].data[3] ? ` | ${params[0].data[3]}` : '';
return `${params[0].data[2]} | ${params[0].data[5]} ${botName}<br>${params[0].data[4]}<br>Profit ${params[0].data[1]} %`;
const chartOptions = computed((): EChartsOption => {
// const { chartData } = this;
// Show a maximum of 50 trades by default - allowing to zoom out further.
const datazoomStart =
chartData.value.length > 0 ? (1 - 50 / chartData.value.length) * 100 : 100;
return {
title: {
text: 'Trades log',
show: props.showTitle,
},
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985',
backgroundColor: 'rgba(0, 0, 0, 0)',
dataset: {
dimensions: ['date', 'profit'],
source: chartData.value,
},
tooltip: {
trigger: 'axis',
formatter: (params) => {
const botName = params[0].data[3] ? ` | ${params[0].data[3]}` : '';
return `${params[0].data[2]} | ${params[0].data[5]} ${botName}<br>${params[0].data[4]}<br>Profit ${params[0].data[1]} %`;
},
axisPointer: {
type: 'line',
label: {
backgroundColor: '#6a7985',
},
},
},
},
xAxis: {
type: 'value',
show: false,
},
yAxis: [
{
xAxis: {
type: 'value',
name: CHART_PROFIT,
splitLine: {
show: false,
show: false,
},
yAxis: [
{
type: 'value',
name: CHART_PROFIT,
splitLine: {
show: false,
},
nameRotate: 90,
nameLocation: 'middle',
nameGap: 30,
},
nameRotate: 90,
nameLocation: 'middle',
nameGap: 30,
],
grid: {
bottom: 80,
},
],
grid: {
bottom: 80,
},
dataZoom: [
{
type: 'inside',
start: datazoomStart,
end: 100,
},
{
show: true,
type: 'slider',
bottom: 10,
start: datazoomStart,
end: 100,
},
],
visualMap: [
{
show: true,
seriesIndex: 0,
pieces: [
{
max: 0.0,
color: '#f84960',
},
{
min: 0.0,
color: '#2ed191',
},
],
},
],
series: [
{
type: 'bar',
name: CHART_PROFIT,
barGap: '0%',
barCategoryGap: '0%',
animation: false,
label: {
dataZoom: [
{
type: 'inside',
start: datazoomStart,
end: 100,
},
{
show: true,
position: 'top',
rotate: 90,
offset: [7.5, 7.5],
formatter: '{@[1]} %',
color: this.getChartTheme === 'dark' ? '#c2c2c2' : '#3c3c3c',
type: 'slider',
bottom: 10,
start: datazoomStart,
end: 100,
},
encode: {
x: 0,
y: 1,
],
visualMap: [
{
show: true,
seriesIndex: 0,
pieces: [
{
max: 0.0,
color: '#f84960',
},
{
min: 0.0,
color: '#2ed191',
},
],
},
],
series: [
{
type: 'bar',
name: CHART_PROFIT,
barGap: '0%',
barCategoryGap: '0%',
animation: false,
label: {
show: true,
position: 'top',
rotate: 90,
offset: [7.5, 7.5],
formatter: '{@[1]} %',
color: getChartTheme.value === 'dark' ? '#c2c2c2' : '#3c3c3c',
},
encode: {
x: 0,
y: 1,
},
itemStyle: {
color: CHART_COLOR,
itemStyle: {
color: CHART_COLOR,
},
},
},
],
};
}
}
],
};
});
return { getChartTheme, chartData, chartOptions };
},
});
</script>
<style scoped>