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

refactor TradingViewChart

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

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

@ -1,11 +1,11 @@
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 {Checkbox, Group, SegmentedControl, Table} 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
// const createChart = dynamic(() => import('lightweight-charts')); // const createChart = dynamic(() => import('lightweight-charts'));
import {createChart, CrosshairMode, MouseEventParams, TimeRange} from 'lightweight-charts'; import {createChart, CrosshairMode, MouseEventParams, TimeRange} from 'lightweight-charts';
import {ReportSummary, Order} from "../types"; import {Order, ReportSummary} from "../types";
import moment from "moment"; import moment from "moment";
import {format} from 'date-fns'; import {format} from 'date-fns';
@ -459,26 +459,14 @@ const TradingViewChart = (props: TradingViewChartProps) => {
}); });
emaLine.setData(emaValues); emaLine.setData(emaValues);
const legend = document.createElement('div'); const legend = createLegend(i, emaColor)
legend.className = 'ema-legend';
legend.style.display = 'block';
legend.style.position = 'absolute';
legend.style.left = 3 + 'px';
legend.style.zIndex = '99';
legend.style.top = 3 + (i * 22) + 'px';
chartContainerRef.current.appendChild(legend); chartContainerRef.current.appendChild(legend);
const setLegendText = (priceValue: any) => { const updateLegendText = createLegendUpdater(legend, 'EMA ' + w)
let val = '∅';
if (priceValue !== undefined) {
val = (Math.round(priceValue * 100) / 100).toFixed(2);
}
legend.innerHTML = 'EMA' + w + ' <span style="color:' + emaColor + '">' + val + '</span>';
}
setLegendText(emaValues[emaValues.length - 1].value); updateLegendText(emaValues[emaValues.length - 1].value);
chart.current.subscribeCrosshairMove((param: MouseEventParams) => { chart.current.subscribeCrosshairMove((param: MouseEventParams) => {
setLegendText(param.seriesPrices.get(emaLine)); updateLegendText(param.seriesPrices.get(emaLine));
}); });
}) })
@ -583,7 +571,7 @@ const TradingViewChart = (props: TradingViewChartProps) => {
<TimeRangeSlider <TimeRangeSlider
selectedInterval={selectedTimeRange} selectedInterval={selectedTimeRange}
timelineInterval={timeRange} timelineInterval={timeRange}
formatTick={(ms : Date) => format(new Date(ms), 'M d HH')} formatTick={(ms: Date) => format(new Date(ms), 'M d HH')}
step={1000 * parseInterval(currentInterval)} step={1000 * parseInterval(currentInterval)}
onChange={(tr: any) => { onChange={(tr: any) => {
console.log("selectedTimeRange", tr) console.log("selectedTimeRange", tr)
@ -627,6 +615,26 @@ const calculateEMA = (a: KLine[], r: number) => {
}]) }])
} }
const createLegend = (i: number, color: string) => {
const legend = document.createElement('div');
legend.className = 'ema-legend';
legend.style.display = 'block';
legend.style.position = 'absolute';
legend.style.left = 3 + 'px';
legend.style.color = color;
legend.style.zIndex = '99';
legend.style.top = 3 + (i * 22) + 'px';
return legend;
}
const createLegendUpdater = (legend: HTMLDivElement, prefix: string) => {
return (priceValue: any) => {
let val = '-';
if (priceValue !== undefined) {
val = (Math.round(priceValue * 100) / 100).toFixed(2);
}
legend.innerHTML = prefix + ' <span>' + val + '</span>';
}
}
export default TradingViewChart; export default TradingViewChart;