Add Area chart support (main chart only)

This commit is contained in:
Matthias 2023-05-04 19:26:54 +02:00
parent 8dd846d95b
commit b88ee2413f

View File

@ -6,7 +6,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'; 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 { generateCandleSeries } from '@/shared/charts/candleChartSeries';
import heikinashi from '@/shared/charts/heikinashi'; import heikinashi from '@/shared/charts/heikinashi';
import { getTradeEntries } from '@/shared/charts/tradeChartData'; import { getTradeEntries } from '@/shared/charts/tradeChartData';
@ -14,7 +21,7 @@ import ECharts from 'vue-echarts';
import { format } from 'date-fns-tz'; import { format } from 'date-fns-tz';
import { use } from 'echarts/core'; import { use } from 'echarts/core';
import { EChartsOption, ScatterSeriesOption } from 'echarts'; import { EChartsOption, LineSeriesOption, ScatterSeriesOption } from 'echarts';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { CandlestickChart, LineChart, BarChart, ScatterChart } from 'echarts/charts'; import { CandlestickChart, LineChart, BarChart, ScatterChart } from 'echarts/charts';
import { import {
@ -32,6 +39,7 @@ import {
VisualMapPiecewiseComponent, VisualMapPiecewiseComponent,
} from 'echarts/components'; } from 'echarts/components';
import { dataZoomPartial } from '@/shared/charts/chartZoom'; import { dataZoomPartial } from '@/shared/charts/chartZoom';
import { getDiffColumns, calculateDiff } from '@/shared/charts/areaPlotDataset';
use([ use([
AxisPointerComponent, AxisPointerComponent,
@ -111,6 +119,10 @@ const chartTitle = computed(() => {
return `${strategy.value} - ${pair.value} - ${timeframe.value}`; return `${strategy.value} - ${pair.value} - ${timeframe.value}`;
}); });
const diffCols = computed(() => {
return getDiffColumns(props.plotConfig);
});
function updateChart(initial = false) { function updateChart(initial = false) {
if (!hasData.value) { if (!hasData.value) {
return; return;
@ -158,9 +170,15 @@ function updateChart(initial = false) {
}); });
} }
} }
const dataset = props.heikinAshi let dataset = props.heikinAshi
? heikinashi(columns, props.dataset.data) ? heikinashi(columns, props.dataset.data)
: props.dataset.data.slice(); : 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" // Add new rows to end to allow slight "scroll past"
const newArray = Array(dataset.length > 0 ? dataset[dataset.length - 2].length : 0); const newArray = Array(dataset.length > 0 ? dataset[dataset.length - 2].length : 0);
newArray[colDate] = dataset[dataset.length - 1][colDate] + props.dataset.timeframe_ms * 3; 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)) { if (Array.isArray(chartOptions.value?.series)) {
chartOptions.value?.series.push(generateCandleSeries(colDate, col, key, value)); 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 { } else {
console.log(`element ${key} for main plot not found in columns.`); console.log(`element ${key} for main plot not found in columns.`);