mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-11 02:33:51 +00:00
Add Area chart support (main chart only)
This commit is contained in:
parent
8dd846d95b
commit
b88ee2413f
|
@ -6,7 +6,14 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { Trade, PairHistory, PlotConfig, ChartSliderPosition } from '@/types';
|
||||
import {
|
||||
Trade,
|
||||
PairHistory,
|
||||
PlotConfig,
|
||||
ChartSliderPosition,
|
||||
IndicatorConfig,
|
||||
ChartType,
|
||||
} from '@/types';
|
||||
import { generateCandleSeries } from '@/shared/charts/candleChartSeries';
|
||||
import heikinashi from '@/shared/charts/heikinashi';
|
||||
import { getTradeEntries } from '@/shared/charts/tradeChartData';
|
||||
|
@ -14,7 +21,7 @@ import ECharts from 'vue-echarts';
|
|||
import { format } from 'date-fns-tz';
|
||||
|
||||
import { use } from 'echarts/core';
|
||||
import { EChartsOption, ScatterSeriesOption } from 'echarts';
|
||||
import { EChartsOption, LineSeriesOption, ScatterSeriesOption } from 'echarts';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { CandlestickChart, LineChart, BarChart, ScatterChart } from 'echarts/charts';
|
||||
import {
|
||||
|
@ -32,6 +39,7 @@ import {
|
|||
VisualMapPiecewiseComponent,
|
||||
} from 'echarts/components';
|
||||
import { dataZoomPartial } from '@/shared/charts/chartZoom';
|
||||
import { getDiffColumns, calculateDiff } from '@/shared/charts/areaPlotDataset';
|
||||
|
||||
use([
|
||||
AxisPointerComponent,
|
||||
|
@ -111,6 +119,10 @@ const chartTitle = computed(() => {
|
|||
return `${strategy.value} - ${pair.value} - ${timeframe.value}`;
|
||||
});
|
||||
|
||||
const diffCols = computed(() => {
|
||||
return getDiffColumns(props.plotConfig);
|
||||
});
|
||||
|
||||
function updateChart(initial = false) {
|
||||
if (!hasData.value) {
|
||||
return;
|
||||
|
@ -158,9 +170,15 @@ function updateChart(initial = false) {
|
|||
});
|
||||
}
|
||||
}
|
||||
const dataset = props.heikinAshi
|
||||
let dataset = props.heikinAshi
|
||||
? heikinashi(columns, props.dataset.data)
|
||||
: props.dataset.data.slice();
|
||||
|
||||
diffCols.value.forEach(([colFrom, colTo]) => {
|
||||
// Enhance dataset with diff columns for area plots
|
||||
dataset = calculateDiff(columns, dataset, colFrom, colTo);
|
||||
});
|
||||
console.log(columns, dataset[dataset.length - 1]);
|
||||
// Add new rows to end to allow slight "scroll past"
|
||||
const newArray = Array(dataset.length > 0 ? dataset[dataset.length - 2].length : 0);
|
||||
newArray[colDate] = dataset[dataset.length - 1][colDate] + props.dataset.timeframe_ms * 3;
|
||||
|
@ -319,6 +337,42 @@ function updateChart(initial = false) {
|
|||
}
|
||||
if (Array.isArray(chartOptions.value?.series)) {
|
||||
chartOptions.value?.series.push(generateCandleSeries(colDate, col, key, value));
|
||||
|
||||
if (value.fill_to) {
|
||||
// Assign
|
||||
const fillColKey = `${key}-${value.fill_to}`;
|
||||
const fillCol = columns.findIndex((el) => el === fillColKey);
|
||||
const fillValue: IndicatorConfig = {
|
||||
// color: value.color;
|
||||
type: ChartType.line,
|
||||
};
|
||||
const areaSeries = generateCandleSeries(
|
||||
colDate,
|
||||
fillCol,
|
||||
fillColKey,
|
||||
fillValue,
|
||||
) as LineSeriesOption;
|
||||
const areaOptions: LineSeriesOption = {
|
||||
stack: key,
|
||||
lineStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
color: value.color,
|
||||
opacity: 0.2,
|
||||
},
|
||||
tooltip: {
|
||||
show: false, // hide value on tooltip
|
||||
},
|
||||
};
|
||||
|
||||
Object.assign(areaSeries, areaOptions);
|
||||
|
||||
chartOptions.value.series[chartOptions.value.series.length - 1]['stack'] = key;
|
||||
chartOptions.value?.series.push(areaSeries);
|
||||
}
|
||||
chartOptions.value?.series.splice(chartOptions.value?.series.length - 1, 0);
|
||||
}
|
||||
} else {
|
||||
console.log(`element ${key} for main plot not found in columns.`);
|
||||
|
|
Loading…
Reference in New Issue
Block a user