lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-26 04:55:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ensure cumrofitchart doesn't contantly reset zoom

Browse Source
This commit is contained in:
Matthias 2023-05-21 16:38:42 +02:00
parent 3af366e89e
commit ad82df1b2c
1 changed files with 101 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/components/charts/CumProfitChart.vue
View File

@ -1,5 +1,5 @@
<template>
<e-charts v-if="trades" :option="chartOptions" autoresize :theme="settingsStore.chartTheme" />
<e-charts v-if="trades" ref="chart" autoresize manual-update :theme="settingsStore.chartTheme" />
</template>
<script setup lang="ts">
@ -27,6 +27,10 @@ import {
import { computed } from 'vue';
import { useSettingsStore } from '@/stores/settings';
import { dataZoomPartial } from '@/shared/charts/chartZoom';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { watch } from 'vue';
import { watchThrottled } from '@vueuse/core';
use([
BarChart,
@ -54,6 +58,8 @@ const settingsStore = useSettingsStore();
// const botList = ref<string[]>([]);
// const cumulativeData = ref<{ date: number; profit: any }[]>([]);
const chart = ref<typeof ECharts>();
const openProfit = computed<number>(() => {
return props.openTrades.reduce((a, v) => a + v[props.profitColumn], 0);
});
@ -111,17 +117,86 @@ const cumulativeData = computed<CumProfitChartData[]>(() => {
return valueArray;
});
const chartOptions = computed((): EChartsOption => {
function updateChart(initial = false) {
const chartOptionsLoc: EChartsOption = {
dataset: {
dimensions: ['date', 'profit', 'currentProfit'],
source: cumulativeData.value,
},
series: [
{
// Keep current-profit before profit, so the starting symbol is behind
type: 'line',
name: 'currentProfit',
animation: initial,
tooltip: {
show: false,
},
lineStyle: {
color: openProfit.value > 0 ? 'green' : 'red',
type: 'dotted',
},
itemStyle: {
color: openProfit.value > 0 ? 'green' : 'red',
},
encode: {
x: 'date',
y: 'currentProfit',
},
},
{
type: 'line',
name: CHART_PROFIT,
animation: initial,
step: 'end',
lineStyle: {
color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
},
itemStyle: {
color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
},
encode: {
x: 'date',
y: 'profit',
},
// symbol: 'none',
},
],
};
// TODO: maybe have profit lines per bot?
// this.botList.forEach((botId: string) => {
// console.log('bot', botId);
// chartOptionsLoc.series.push({
// type: 'line',
// name: botId,
// animation: true,
// step: 'end',
// lineStyle: {
// color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
// },
// itemStylesettingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
// },
// // symbol: 'none',
// });
// });
chart.value?.setOption(chartOptionsLoc, {
replaceMerge: ['series', 'dataset'],
noMerge: !initial,
});
}
function initializeChart() {
chart.value?.setOption({}, { noMerge: true });
const chartOptionsLoc: EChartsOption = {
title: {
text: 'Cumulative Profit',
show: props.showTitle,
},
backgroundColor: 'rgba(0, 0, 0, 0)',
dataset: {
dimensions: ['date', 'profit', 'currentProfit'],
source: cumulativeData.value,
},
tooltip: {
trigger: 'axis',
axisPointer: {
@ -170,66 +245,29 @@ const chartOptions = computed((): EChartsOption => {
...dataZoomPartial,
},
],
series: [
{
// Keep current-profit before profit, so the starting symbol is behind
type: 'line',
name: 'currentProfit',
animation: true,
tooltip: {
show: false,
},
lineStyle: {
color: openProfit.value > 0 ? 'green' : 'red',
type: 'dotted',
},
itemStyle: {
color: openProfit.value > 0 ? 'green' : 'red',
},
encode: {
x: 'date',
y: 'currentProfit',
},
},
{
type: 'line',
name: CHART_PROFIT,
animation: true,
step: 'end',
lineStyle: {
color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
},
itemStyle: {
color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
},
encode: {
x: 'date',
y: 'profit',
},
// symbol: 'none',
},
],
};
chart.value?.setOption(chartOptionsLoc, { noMerge: true });
updateChart(true);
}
// TODO: maybe have profit lines per bot?
// this.botList.forEach((botId: string) => {
// console.log('bot', botId);
// chartOptionsLoc.series.push({
// type: 'line',
// name: botId,
// animation: true,
// step: 'end',
// lineStyle: {
// color: settingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
// },
// itemStylesettingsStore.chartTheme === 'dark' ? '#c2c2c2' : 'black',
// },
// // symbol: 'none',
// });
// });
return chartOptionsLoc;
onMounted(() => {
initializeChart();
});
watchThrottled(
() => props.openTrades,
() => {
updateChart();
},
{ throttle: 60 * 1000 },
);
watchThrottled(
() => props.trades,
() => {
updateChart();
},
{ throttle: 60 * 1000 },
);
</script>
<style scoped>