220 lines
8.3 KiB
JavaScript
220 lines
8.3 KiB
JavaScript
async function waitForVariable(variableName, timeout = 5000) {
|
|
const startTime = Date.now();
|
|
while (typeof window[variableName] === 'undefined') {
|
|
if (Date.now() - startTime > timeout) {
|
|
throw new Error(`Variable '${variableName}' not defined within ${timeout}ms`);
|
|
}
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
}
|
|
console.log(`Variable '${variableName}' is now defined.`);
|
|
}
|
|
|
|
async function update_tv(data_dict) {
|
|
|
|
window.data.push({ time: data_dict.timestamp, value: data_dict.value });
|
|
window.data_b.push({ time: data_dict.timestamp_b, value: data_dict.value_b });
|
|
window.data_c.push({ time: data_dict.timestamp_c, value: data_dict.value_c });
|
|
window.data_tgt.push({ time: data_dict.timestamp_c, value: data_dict.target });
|
|
window.lineSeries.update({ time: data_dict.timestamp, value: data_dict.value });
|
|
window.lineSeries_b.update({ time: data_dict.timestamp_b, value: data_dict.value_b });
|
|
window.lineSeries_c.update({ time: data_dict.timestamp_c, value: data_dict.value_c });
|
|
window.lineSeries_tgt.update({ time: data_dict.timestamp_c, value: data_dict.target });
|
|
|
|
// midPriceLine.applyOptions({
|
|
// price: data_dict.mid_px,
|
|
// color: '#c78228',
|
|
// lineWidth: 3,
|
|
// lineStyle: LightweightCharts.LineStyle.Dashed,
|
|
// axisLabelVisible: true,
|
|
// });
|
|
|
|
window.chart.timeScale().scrollToRealTime();
|
|
// const currentRange = window.chart.timeScale().getVisibleLogicalRange();
|
|
// window.chart.timeScale().fitContent();
|
|
// window.chart.timeScale().setVisibleLogicalRange(currentRange);
|
|
|
|
const MAX_DATA_POINTS = data_dict.LOOKBACK_RT_TV_MAX_POINTS;
|
|
if (window.lineSeries.data().length > MAX_DATA_POINTS) {
|
|
window.lineSeries.setData(lineSeries.data().slice(-MAX_DATA_POINTS));
|
|
}
|
|
if (window.lineSeries_b.data().length > MAX_DATA_POINTS) {
|
|
window.lineSeries_b.setData(lineSeries_b.data().slice(-MAX_DATA_POINTS));
|
|
}
|
|
if (window.lineSeries_c.data().length > MAX_DATA_POINTS) {
|
|
window.lineSeries_c.setData(lineSeries_c.data().slice(-MAX_DATA_POINTS));
|
|
}
|
|
if (window.lineSeries_tgt.data().length > MAX_DATA_POINTS) {
|
|
window.lineSeries_tgt.setData(lineSeries_tgt.data().slice(-MAX_DATA_POINTS));
|
|
}
|
|
};
|
|
|
|
|
|
async function create_tv() {
|
|
window.chart = LightweightCharts.createChart(document.getElementById('tv'),
|
|
{
|
|
autoSize: true,
|
|
toolbox: true,
|
|
timeScale: {
|
|
timeVisible: true, // Shows HH:mm on x-axis
|
|
secondsVisible: true // Optional: show seconds
|
|
},
|
|
rightPriceScale: {
|
|
visible: true
|
|
},
|
|
leftPriceScale: {
|
|
visible: true
|
|
},
|
|
|
|
layout: {
|
|
background: { type: 'solid', color: '#222' },
|
|
textColor: '#DDD',
|
|
},
|
|
grid: {
|
|
vertLines: {
|
|
color: '#e1e1e1', // Set vertical line color
|
|
visible: true,
|
|
style: 2, // 0: Solid, 1: Dashed, 2: Dotted, 3: LargeDashed, 4: SparseDotted
|
|
},
|
|
horzLines: {
|
|
color: '#e1e1e1', // Set horizontal line color
|
|
visible: true,
|
|
style: 2,
|
|
},
|
|
},
|
|
|
|
crosshair: { mode: LightweightCharts.CrosshairMode.Normal },
|
|
}
|
|
);
|
|
window.lineSeries = chart.addSeries(LightweightCharts.LineSeries, {
|
|
color: '#94fcdf',
|
|
priceScaleId: 'right'
|
|
// topColor: '#94fcdf',
|
|
// bottomColor: 'rgba(112, 171, 249, 0.28)',
|
|
// invertFilledArea: false
|
|
});
|
|
window.lineSeries_b = chart.addSeries(LightweightCharts.LineSeries, {
|
|
color: '#dd7525',
|
|
priceScaleId: 'right'
|
|
// topColor: '#94fcdf',
|
|
// bottomColor: 'rgba(112, 171, 249, 0.28)',
|
|
// invertFilledArea: false
|
|
});
|
|
window.lineSeries_c = chart.addSeries(LightweightCharts.LineSeries, {
|
|
color: '#ea0707',
|
|
priceScaleId: 'left',
|
|
priceRange: {
|
|
minValue: 0,
|
|
maxValue: 1
|
|
},
|
|
// topColor: '#94fcdf',
|
|
// bottomColor: 'rgba(112, 171, 249, 0.28)',
|
|
// invertFilledArea: false
|
|
});
|
|
window.lineSeries_tgt = chart.addSeries(LightweightCharts.LineSeries, {
|
|
color: '#ffffff',
|
|
priceScaleId: 'right',
|
|
lineStyle: LightweightCharts.LineStyle.Dashed
|
|
// topColor: '#94fcdf',
|
|
// bottomColor: 'rgba(112, 171, 249, 0.28)',
|
|
// invertFilledArea: false
|
|
});
|
|
// window.midPriceLine_Config = {
|
|
// price: 0,
|
|
// color: '#c78228',
|
|
// lineWidth: 3,
|
|
// lineStyle: LightweightCharts.LineStyle.Dashed,
|
|
// axisLabelVisible: false,
|
|
// };
|
|
// window.midPriceLine = window.lineSeries.createPriceLine(midPriceLine_Config);
|
|
window.data = [];
|
|
window.data_b = [];
|
|
window.data_c = [];
|
|
window.data_tgt = [];
|
|
window.lineSeries.setData(window.data);
|
|
window.lineSeries_b.setData(window.data_b);
|
|
window.lineSeries_c.setData(window.data_c);
|
|
window.lineSeries_tgt.setData(window.data_tgt);
|
|
|
|
// Create and style the tooltip html element
|
|
const container = document.getElementById('tv');
|
|
|
|
window.toolTipWidth = 200;
|
|
|
|
const toolTip = document.createElement('div');
|
|
toolTip.style = `width: ${window.toolTipWidth}px; height: 100%; position: absolute; display: none; padding: 8px; box-sizing: border-box; font-size: 12px; text-align: left; z-index: 1000; top: 12px; left: 12px; pointer-events: none; border-radius: 4px 4px 0px 0px; border-bottom: none; box-shadow: 0 2px 5px 0 rgba(117, 134, 150, 0.45);font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`;
|
|
toolTip.style.background = `rgba(${'0, 0, 0'}, 0.25)`;
|
|
toolTip.style.color = 'white';
|
|
toolTip.style.borderColor = 'rgba( 239, 83, 80, 1)';
|
|
container.appendChild(toolTip);
|
|
|
|
// update tooltip
|
|
window.chart.subscribeCrosshairMove(async param => {
|
|
|
|
if (
|
|
param.point === undefined ||
|
|
!param.time ||
|
|
param.point.x < 0 ||
|
|
param.point.x > container.clientWidth ||
|
|
param.point.y < 0 ||
|
|
param.point.y > container.clientHeight
|
|
) {
|
|
toolTip.style.display = 'none';
|
|
} else {
|
|
|
|
// toolTip.style.height = '100%';
|
|
toolTip.style.alignContent = 'center';
|
|
|
|
const dateStr = new Date(param.time*1000).toISOString();
|
|
|
|
let data = await param.seriesData.get(window.lineSeries);
|
|
if (data === undefined) {
|
|
data = {}
|
|
data.value = 0
|
|
console.log('data is UNDEFINED, SETTING TO 0')
|
|
};
|
|
|
|
let data_b = await param.seriesData.get(window.lineSeries_b);
|
|
if (data_b === undefined) {
|
|
data_b = {}
|
|
data_b.value = 0
|
|
console.log('data is UNDEFINED, SETTING TO 0')
|
|
};
|
|
|
|
const value_px = data.value
|
|
const value_px_b = window.data_b.value
|
|
const value_px_c = window.data_c.value
|
|
const value_px_tgt = window.data_tgt.value
|
|
|
|
toolTip.style.display = 'block';
|
|
// <div style="color: ${'rgba( 239, 83, 80, 1)'}">
|
|
// Atwater Trading
|
|
// </div>
|
|
toolTip.innerHTML = `
|
|
<div style="font-size: 24px; margin: 4px 0px; color: ${'white'}">
|
|
Chainlink: ${Math.round(100 * value_px) / 100}
|
|
Binance: ${Math.round(100 * value_px_b) / 100}
|
|
</div>
|
|
<div style="color: ${'white'}">
|
|
${dateStr}
|
|
</div>
|
|
`;
|
|
|
|
let left = param.point.x; // relative to timeScale
|
|
const timeScaleWidth = chart.timeScale().width();
|
|
const priceScaleWidth = chart.priceScale('left').width();
|
|
const halfTooltipWidth = toolTipWidth / 2;
|
|
left += priceScaleWidth - halfTooltipWidth;
|
|
left = Math.min(left, priceScaleWidth + timeScaleWidth - toolTipWidth);
|
|
left = Math.max(left, priceScaleWidth);
|
|
|
|
toolTip.style.left = left + 'px';
|
|
toolTip.style.top = 0 + 'px';
|
|
}
|
|
});
|
|
|
|
|
|
|
|
window.chart.timeScale().fitContent();
|
|
|
|
console.log("TV Created!")
|
|
}; |