mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-11 02:33:51 +00:00
Add tradesLog chart
This commit is contained in:
parent
e41c102c35
commit
494902eae7
140
src/components/charts/TradesLog.vue
Normal file
140
src/components/charts/TradesLog.vue
Normal file
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<v-chart v-if="trades.length > 0" :options="chartOptions" autoresize :theme="getChartTheme" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from 'vue-property-decorator';
|
||||
import { Getter } from 'vuex-class';
|
||||
|
||||
import ECharts from 'vue-echarts';
|
||||
import { EChartOption } from 'echarts';
|
||||
|
||||
import 'echarts/lib/chart/bar';
|
||||
import 'echarts/lib/chart/line';
|
||||
import 'echarts/lib/component/title';
|
||||
import 'echarts/lib/component/tooltip';
|
||||
import 'echarts/lib/component/legend';
|
||||
import 'echarts/lib/component/dataZoom';
|
||||
import 'echarts/lib/component/visualMap';
|
||||
import 'echarts/lib/component/visualMapPiecewise';
|
||||
|
||||
import { ClosedTrade } from '@/types';
|
||||
|
||||
// Define Column labels here to avoid typos
|
||||
const CHART_PROFIT = 'Profit %';
|
||||
const CHART_COLOR = '#9be0a8';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
'v-chart': ECharts,
|
||||
},
|
||||
})
|
||||
export default class TradesLogChart extends Vue {
|
||||
@Prop({ required: true }) trades!: ClosedTrade[];
|
||||
|
||||
@Getter getChartTheme!: string;
|
||||
|
||||
get chartData() {
|
||||
const res: number[][] = [];
|
||||
const sortedTrades = this.trades.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_pct];
|
||||
res.push(entry);
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
get chartOptions(): EChartOption {
|
||||
return {
|
||||
title: {
|
||||
text: 'Trades log',
|
||||
show: true,
|
||||
},
|
||||
dataset: {
|
||||
dimensions: ['date', 'profit'],
|
||||
source: this.chartData,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
label: {
|
||||
backgroundColor: '#6a7985',
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: CHART_PROFIT,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
nameRotate: 90,
|
||||
nameLocation: 'middle',
|
||||
nameGap: 30,
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
bottom: 80,
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
// xAxisIndex: [0],
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
show: true,
|
||||
// xAxisIndex: [0],
|
||||
type: 'slider',
|
||||
bottom: 10,
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
name: CHART_PROFIT,
|
||||
step: 'start',
|
||||
animation: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{@[1]} %',
|
||||
color: this.getChartTheme === 'dark' ? '#c2c2c2' : '#3c3c3c',
|
||||
},
|
||||
encode: {
|
||||
x: 0,
|
||||
y: 1,
|
||||
},
|
||||
|
||||
areaStyle: {
|
||||
// color: CHART_COLOR,
|
||||
},
|
||||
itemStyle: {
|
||||
color: CHART_COLOR,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
|
@ -15,6 +15,7 @@ export enum DashboardLayout {
|
|||
dailyChart = 'g-dailyChart',
|
||||
hourlyChart = 'g-hourlyChart',
|
||||
cumChartChart = 'g-cumChartChart',
|
||||
tradesLogChart = 'g-TradesLogChart',
|
||||
}
|
||||
|
||||
export enum LayoutGetters {
|
||||
|
@ -50,6 +51,7 @@ const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
|
|||
{ i: DashboardLayout.dailyChart, x: 4, y: 0, w: 4, h: 6 },
|
||||
{ i: DashboardLayout.hourlyChart, x: 4, y: 6, w: 4, h: 6 },
|
||||
{ i: DashboardLayout.cumChartChart, x: 0, y: 6, w: 4, h: 6 },
|
||||
{ i: DashboardLayout.tradesLogChart, x: 0, y: 8, w: 12, h: 4 },
|
||||
];
|
||||
|
||||
const STORE_DASHBOARD_LAYOUT = 'ftDashboardLayout';
|
||||
|
|
|
@ -95,6 +95,20 @@
|
|||
<CumProfitChart :trades="closedTrades" :show-title="false" />
|
||||
</DraggableContainer>
|
||||
</GridItem>
|
||||
<GridItem
|
||||
:i="gridLayoutTradesLogChart.i"
|
||||
:x="gridLayoutTradesLogChart.x"
|
||||
:y="gridLayoutTradesLogChart.y"
|
||||
:w="gridLayoutTradesLogChart.w"
|
||||
:h="gridLayoutTradesLogChart.h"
|
||||
:min-w="3"
|
||||
:min-h="4"
|
||||
drag-allow-from=".drag-header"
|
||||
>
|
||||
<DraggableContainer header="Trades Log">
|
||||
<TradesLogChart :trades="closedTrades" :show-title="false" />
|
||||
</DraggableContainer>
|
||||
</GridItem>
|
||||
</GridLayout>
|
||||
</template>
|
||||
|
||||
|
@ -108,6 +122,7 @@ import { GridLayout, GridItem, GridItemData } from 'vue-grid-layout';
|
|||
import DailyChart from '@/components/charts/DailyChart.vue';
|
||||
import HourlyChart from '@/components/charts/HourlyChart.vue';
|
||||
import CumProfitChart from '@/components/charts/CumProfitChart.vue';
|
||||
import TradesLogChart from '@/components/charts/TradesLog.vue';
|
||||
import DraggableContainer from '@/components/layout/DraggableContainer.vue';
|
||||
|
||||
import {
|
||||
|
@ -128,6 +143,7 @@ const layoutNs = namespace('layout');
|
|||
DailyChart,
|
||||
HourlyChart,
|
||||
CumProfitChart,
|
||||
TradesLogChart,
|
||||
DraggableContainer,
|
||||
},
|
||||
})
|
||||
|
@ -183,6 +199,10 @@ export default class Dashboard extends Vue {
|
|||
return findGridLayout(this.gridLayout, DashboardLayout.cumChartChart);
|
||||
}
|
||||
|
||||
get gridLayoutTradesLogChart(): GridItemData {
|
||||
return findGridLayout(this.gridLayout, DashboardLayout.tradesLogChart);
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.getDaily({ timescale: 30 });
|
||||
this.getTrades();
|
||||
|
|
Loading…
Reference in New Issue
Block a user