335 lines
13 KiB
JavaScript
335 lines
13 KiB
JavaScript
class Charts {
|
|
|
|
|
|
constructor(idata) {
|
|
// Unpack the initialization data.
|
|
this.chart1_id = idata.chart1_id;
|
|
this.chart2_id = idata.chart2_id;
|
|
this.chart3_id = idata.chart3_id;
|
|
this.chart4_id = idata.chart4_id;
|
|
this.trading_pair = idata.trading_pair;
|
|
this.price_history = idata.price_history;
|
|
/* A list of bound charts this is necessary for maintaining a dynamic
|
|
number of charts with their position and zoom factors bound.*/
|
|
this.bound_charts=[];
|
|
// Only the main chart is created by default.
|
|
this.create_main_chart();
|
|
}
|
|
|
|
|
|
create_main_chart() {
|
|
// Pass the id of the element to create the main chart in.
|
|
// This function returns the main chart object.
|
|
this.chart_1 = this.create_chart(this.chart1_id);
|
|
|
|
// Display the trading pair as a watermark overlaying the chart.
|
|
this.addWatermark(this.chart_1, this.trading_pair);
|
|
|
|
// - Create the candle stick series for our chart
|
|
this.candleSeries = this.chart_1.addCandlestickSeries();
|
|
|
|
// Initialize the candlestick series if price_history is available
|
|
if (this.price_history && this.price_history.length > 0) {
|
|
this.candleSeries.setData(this.price_history);
|
|
console.log('Candle series init:', this.price_history);
|
|
} else {
|
|
console.error('Price history is not available or is empty.');
|
|
}
|
|
this.bind_charts(this.chart_1);
|
|
}
|
|
|
|
update_main_chart(new_candle){
|
|
// Update candlestick series
|
|
this.candleSeries.update(new_candle);
|
|
}
|
|
|
|
create_RSI_chart(){
|
|
this.chart2 = this.create_chart(this.chart2_id, 100);
|
|
this.set_priceScale(this.chart2, 0.3, 0.0);
|
|
// Put the name of the chart in a watermark in the chart.
|
|
this.addWatermark(this.chart2, 'RSI');
|
|
// Todo: Not sure how to set this
|
|
//this.chart2.applyOptions({ priceRange: {minValue:0,maxValue:100} });
|
|
this.bind_charts(this.chart2);
|
|
}
|
|
|
|
|
|
create_MACD_chart(){
|
|
this.chart3 = this.create_chart(this.chart3_id, 100);
|
|
this.addWatermark(this.chart3, 'MACD');
|
|
this.bind_charts(this.chart3);
|
|
}
|
|
|
|
create_PercentB_chart(){
|
|
this.chart4 = this.create_chart(this.chart4_id, 100);
|
|
this.set_priceScale(this.chart4, 0.3, 0.0);
|
|
// Put the name of the chart in a watermark
|
|
this.addWatermark(this.chart4, '%B');
|
|
this.bind_charts(this.chart4);
|
|
}
|
|
|
|
|
|
create_chart(target_id, height=500){
|
|
// Accepts a target element to place the chart in.
|
|
// Returns the chart object.
|
|
let container = document.getElementById(target_id);
|
|
//Create a lightweight chart object.
|
|
let chart = LightweightCharts.createChart(container, {
|
|
width: 1000,
|
|
height: height,
|
|
crosshair: {
|
|
mode: LightweightCharts.CrosshairMode.Normal,
|
|
},
|
|
priceScale: {
|
|
borderColor: 'rgba(197, 203, 206, 0.8)',
|
|
},
|
|
timeScale: {
|
|
borderColor: 'rgba(197, 203, 206, 0.8)',
|
|
timeVisible: true,
|
|
secondsVisible: false,
|
|
barSpacing: 6
|
|
},
|
|
handleScroll: true
|
|
});
|
|
return chart;
|
|
}
|
|
|
|
|
|
set_priceScale(chart, top, bottom){
|
|
chart.priceScale('right').applyOptions({
|
|
scaleMargins: {
|
|
top: top,
|
|
bottom: bottom,
|
|
},
|
|
});
|
|
}
|
|
|
|
|
|
addWatermark(chart,text){
|
|
chart.applyOptions({
|
|
watermark: {visible: true,
|
|
color: '#DBC29E',
|
|
text: text,
|
|
fontSize: 30,
|
|
fontFamily: 'Roboto',
|
|
fontStyle: 'bold',
|
|
vertAlign: 'center'
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
bind_charts(chart){
|
|
// keep a list of charts and bind all their position and spacing.
|
|
// Add (arg1) to bound_charts
|
|
this.add_to_list(chart);
|
|
// Get the number of objects in bound_charts
|
|
let bcl = Object.keys(this.bound_charts).length;
|
|
// if bound_charts has two element in it bind them
|
|
if (bcl == 2) { this.bind2charts(); }
|
|
|
|
// if bound_charts has three elements in it bind them
|
|
if (bcl == 3) { this.bind3charts(); }
|
|
|
|
// if bound_charts has four elements in it bind them
|
|
if (bcl == 4) { this.bind4charts(); }
|
|
|
|
return;
|
|
}
|
|
add_to_list(chart){
|
|
// If the chart isn't already included in the list, add it.
|
|
if ( !this.bound_charts.includes(chart) ){
|
|
this.bound_charts.push(chart);
|
|
}
|
|
}
|
|
|
|
bind2charts(){
|
|
//On change in chart 1 change chart 2
|
|
let syncHandler1 = (e) => {
|
|
// Get the barSpacing(zoom) and position of 1st chart.
|
|
let barSpacing1 = this.bound_charts[0].timeScale().getBarSpacing();
|
|
let scrollPosition1 = this.bound_charts[0].timeScale().scrollPosition();
|
|
// Apply barSpacing(zoom) and position to 2nd chart.
|
|
this.bound_charts[1].timeScale().applyOptions({ rightOffset: scrollPosition1, barSpacing: barSpacing1 });
|
|
}
|
|
this.bound_charts[0].timeScale().subscribeVisibleTimeRangeChange(syncHandler1);
|
|
|
|
//On change in chart 2 change chart 1
|
|
let syncHandler2 = (e) => {
|
|
// Get the barSpacing(zoom) and position of chart 2
|
|
let barSpacing2 = this.bound_charts[1].timeScale().getBarSpacing();
|
|
let scrollPosition2 = this.bound_charts[1].timeScale().scrollPosition();
|
|
// Apply barSpacing(zoom) and position to chart 1
|
|
this.bound_charts[0].timeScale().applyOptions({ rightOffset: scrollPosition2, barSpacing: barSpacing2 });
|
|
}
|
|
this.bound_charts[1].timeScale().subscribeVisibleTimeRangeChange(syncHandler2);
|
|
}
|
|
bind3charts(){
|
|
|
|
//On change to chart 1 change chart 2 and 3
|
|
let syncHandler = (e) => {
|
|
// Get the barSpacing(zoom) and position of chart 1
|
|
let barSpacing1 = this.bound_charts[0].timeScale().getBarSpacing();
|
|
let scrollPosition1 = this.bound_charts[0].timeScale().scrollPosition();
|
|
// Apply barSpacing(zoom) and position to new chart
|
|
this.bound_charts[1].timeScale().applyOptions({ rightOffset: scrollPosition1, barSpacing: barSpacing1 });
|
|
this.bound_charts[2].timeScale().applyOptions({ rightOffset: scrollPosition1, barSpacing: barSpacing1 });
|
|
}
|
|
this.bound_charts[0].timeScale().subscribeVisibleTimeRangeChange(syncHandler);
|
|
|
|
//On change to chart 2 change chart 1 and 3
|
|
let syncHandler2 = (e) => {
|
|
// Get the barSpacing(zoom) and position of chart 2
|
|
let barSpacing2 = this.bound_charts[1].timeScale().getBarSpacing();
|
|
let scrollPosition2 = this.bound_charts[1].timeScale().scrollPosition();
|
|
// Apply barSpacing(zoom) and position to chart 1 and 3
|
|
this.bound_charts[0].timeScale().applyOptions({ rightOffset: scrollPosition2, barSpacing: barSpacing2 });
|
|
this.bound_charts[2].timeScale().applyOptions({ rightOffset: scrollPosition2, barSpacing: barSpacing2 });
|
|
}
|
|
this.bound_charts[1].timeScale().subscribeVisibleTimeRangeChange(syncHandler2);
|
|
|
|
//On change to chart 3 change chart 1 and 2
|
|
let syncHandler3 = (e) => {
|
|
// Get the barSpacing(zoom) and position of new chart
|
|
let barSpacing2 = this.bound_charts[2].timeScale().getBarSpacing();
|
|
let scrollPosition2 = this.bound_charts[2].timeScale().scrollPosition();
|
|
// Apply barSpacing(zoom) and position to parent chart
|
|
this.bound_charts[0].timeScale().applyOptions({ rightOffset: scrollPosition2, barSpacing: barSpacing2 });
|
|
this.bound_charts[1].timeScale().applyOptions({ rightOffset: scrollPosition2, barSpacing: barSpacing2 });
|
|
}
|
|
this.bound_charts[2].timeScale().subscribeVisibleTimeRangeChange(syncHandler3);
|
|
}
|
|
|
|
bind4charts(){
|
|
// Sync all 4 charts together
|
|
let syncFromChart = (sourceIndex) => {
|
|
return (e) => {
|
|
let barSpacing = this.bound_charts[sourceIndex].timeScale().getBarSpacing();
|
|
let scrollPosition = this.bound_charts[sourceIndex].timeScale().scrollPosition();
|
|
for (let i = 0; i < 4; i++) {
|
|
if (i !== sourceIndex) {
|
|
this.bound_charts[i].timeScale().applyOptions({ rightOffset: scrollPosition, barSpacing: barSpacing });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this.bound_charts[0].timeScale().subscribeVisibleTimeRangeChange(syncFromChart(0));
|
|
this.bound_charts[1].timeScale().subscribeVisibleTimeRangeChange(syncFromChart(1));
|
|
this.bound_charts[2].timeScale().subscribeVisibleTimeRangeChange(syncFromChart(2));
|
|
this.bound_charts[3].timeScale().subscribeVisibleTimeRangeChange(syncFromChart(3));
|
|
}
|
|
|
|
// Set trade markers on chart for all trades in backtest results
|
|
setTradeMarkers(trades) {
|
|
if (!this.candleSeries) {
|
|
console.warn('Candlestick series not available');
|
|
return;
|
|
}
|
|
|
|
if (!trades || trades.length === 0) {
|
|
console.log('No trades to display as markers');
|
|
return;
|
|
}
|
|
|
|
const candleData = this.price_history || [];
|
|
if (candleData.length === 0) {
|
|
console.warn('No candle data available for markers');
|
|
return;
|
|
}
|
|
|
|
// Get the time range of loaded candle data
|
|
const minCandleTime = candleData[0].time;
|
|
const maxCandleTime = candleData[candleData.length - 1].time;
|
|
console.log(`Chart data range: ${minCandleTime} to ${maxCandleTime}`);
|
|
|
|
// Build markers array from all trades
|
|
const markers = [];
|
|
|
|
trades.forEach(trade => {
|
|
const openTime = this.dateStringToUnixTimestamp(trade.open_datetime);
|
|
const closeTime = trade.close_datetime ? this.dateStringToUnixTimestamp(trade.close_datetime) : null;
|
|
|
|
// Add entry marker if within chart data range
|
|
if (openTime && openTime >= minCandleTime && openTime <= maxCandleTime) {
|
|
const matchedOpenTime = this.findNearestCandleTime(openTime, candleData);
|
|
markers.push({
|
|
time: matchedOpenTime,
|
|
position: 'belowBar',
|
|
color: '#26a69a',
|
|
shape: 'arrowUp',
|
|
text: 'BUY @ ' + (trade.open_price ? trade.open_price.toFixed(2) : '')
|
|
});
|
|
}
|
|
|
|
// Add exit marker if within chart data range
|
|
if (closeTime && closeTime >= minCandleTime && closeTime <= maxCandleTime) {
|
|
const matchedCloseTime = this.findNearestCandleTime(closeTime, candleData);
|
|
markers.push({
|
|
time: matchedCloseTime,
|
|
position: 'aboveBar',
|
|
color: '#ef5350',
|
|
shape: 'arrowDown',
|
|
text: 'SELL @ ' + (trade.close_price ? trade.close_price.toFixed(2) : '')
|
|
});
|
|
}
|
|
});
|
|
|
|
if (markers.length === 0) {
|
|
console.log('No trades fall within the loaded chart data timespan');
|
|
return;
|
|
}
|
|
|
|
// Sort markers by time (required by lightweight-charts)
|
|
markers.sort((a, b) => a.time - b.time);
|
|
|
|
console.log(`Setting ${markers.length} trade markers on chart`);
|
|
|
|
// Set markers on the candlestick series
|
|
this.candleSeries.setMarkers(markers);
|
|
}
|
|
|
|
// Clear all trade markers from chart
|
|
clearTradeMarkers() {
|
|
if (this.candleSeries) {
|
|
this.candleSeries.setMarkers([]);
|
|
console.log('Trade markers cleared');
|
|
}
|
|
}
|
|
|
|
// Find the nearest candle time in the data
|
|
findNearestCandleTime(targetTime, candleData) {
|
|
if (!candleData || candleData.length === 0) {
|
|
return targetTime;
|
|
}
|
|
|
|
let nearestTime = candleData[0].time;
|
|
let minDiff = Math.abs(targetTime - nearestTime);
|
|
|
|
for (const candle of candleData) {
|
|
const diff = Math.abs(targetTime - candle.time);
|
|
if (diff < minDiff) {
|
|
minDiff = diff;
|
|
nearestTime = candle.time;
|
|
}
|
|
// Early exit if exact match
|
|
if (diff === 0) break;
|
|
}
|
|
|
|
return nearestTime;
|
|
}
|
|
|
|
// Convert datetime string to Unix timestamp in seconds
|
|
dateStringToUnixTimestamp(dateStr) {
|
|
if (!dateStr) return null;
|
|
try {
|
|
const date = new Date(dateStr);
|
|
return Math.floor(date.getTime() / 1000);
|
|
} catch (e) {
|
|
console.warn('Failed to parse date:', dateStr, e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
|
|
}
|