lychiyu/bbgo_origin
1
0
Fork 0
mirror of https://github.com/c9s/bbgo.git synced 2024-11-10 09:11:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

backtest-report: add checkbox to switch average cost and base line

Browse Source
This commit is contained in:
c9s 2022-06-27 00:24:15 +08:00
parent d46954a4b1
commit fa211a27bc
No known key found for this signature in database
GPG Key ID: 7385E7E464CB0A54
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/backtest-report/components/TradingViewChart.tsx
View File

@ -1,6 +1,6 @@
import React, {useEffect, useRef, useState} from 'react'; import React, {useEffect, useRef, useState} from 'react';
import {tsvParse} from "d3-dsv"; import {tsvParse} from "d3-dsv";
import {SegmentedControl} from '@mantine/core'; import {Checkbox, Group, SegmentedControl} from '@mantine/core';
// https://github.com/tradingview/lightweight-charts/issues/543 // https://github.com/tradingview/lightweight-charts/issues/543
@ -377,6 +377,9 @@ const TradingViewChart = (props: TradingViewChartProps) => {
const intervals = props.reportSummary.intervals || []; const intervals = props.reportSummary.intervals || [];
const [currentInterval, setCurrentInterval] = useState(intervals.length > 0 ? intervals[0] : '1m'); const [currentInterval, setCurrentInterval] = useState(intervals.length > 0 ? intervals[0] : '1m');
const [showPositionBase, setShowPositionBase] = useState(false);
const [showPositionAverageCost, setShowPositionAverageCost] = useState(false);
useEffect(() => { useEffect(() => {
if (!chartContainerRef.current || chartContainerRef.current.children.length > 0) { if (!chartContainerRef.current || chartContainerRef.current.children.length > 0) {
return; return;
@ -442,16 +445,20 @@ const TradingViewChart = (props: TradingViewChartProps) => {
volumeSeries.setData(volumeData); volumeSeries.setData(volumeData);
if (chartData.positionHistory) { if (chartData.positionHistory) {
const lineSeries = chart.current.addLineSeries(); if (showPositionAverageCost) {
const costLine = positionAverageCostHistoryToLineData(currentInterval, chartData.positionHistory); const costLineSeries = chart.current.addLineSeries();
lineSeries.setData(costLine); const costLine = positionAverageCostHistoryToLineData(currentInterval, chartData.positionHistory);
costLineSeries.setData(costLine);
}
const baseLineSeries = chart.current.addLineSeries({ if (showPositionBase) {
priceScaleId: 'left', const baseLineSeries = chart.current.addLineSeries({
color: '#98338C', priceScaleId: 'left',
}); color: '#98338C',
const baseLine = positionBaseHistoryToLineData(currentInterval, chartData.positionHistory) });
baseLineSeries.setData(baseLine); const baseLine = positionBaseHistoryToLineData(currentInterval, chartData.positionHistory)
baseLineSeries.setData(baseLine);
}
} }
chart.current.timeScale().fitContent(); chart.current.timeScale().fitContent();
@ -462,7 +469,7 @@ const TradingViewChart = (props: TradingViewChartProps) => {
chart.current.remove(); chart.current.remove();
} }
}; };
}, [props.runID, props.reportSummary, currentInterval]) }, [props.runID, props.reportSummary, currentInterval, showPositionBase, showPositionAverageCost])
// see: // see:
// https://codesandbox.io/s/9inkb?file=/src/styles.css // https://codesandbox.io/s/9inkb?file=/src/styles.css
@ -487,14 +494,18 @@ const TradingViewChart = (props: TradingViewChartProps) => {
return ( return (
<div> <div>
<div> <Group>
<SegmentedControl <SegmentedControl
data={intervals.map((interval) => { data={intervals.map((interval) => {
return {label: interval, value: interval} return {label: interval, value: interval}
})} })}
onChange={setCurrentInterval} onChange={setCurrentInterval}
/> />
</div> <Checkbox label="Position Base" checked={showPositionBase}
onChange={(event) => setShowPositionBase(event.currentTarget.checked)}/>
<Checkbox label="Position Average Cost" checked={showPositionAverageCost}
onChange={(event) => setShowPositionAverageCost(event.currentTarget.checked)}/>
</Group>
<div ref={chartContainerRef} style={{'flex': 1, 'minHeight': 300}}> <div ref={chartContainerRef} style={{'flex': 1, 'minHeight': 300}}>
</div> </div>