transfer to aws
This commit is contained in:
220
nicegui_modules/static/script.js
Normal file
220
nicegui_modules/static/script.js
Normal file
@@ -0,0 +1,220 @@
|
||||
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!")
|
||||
};
|
||||
Reference in New Issue
Block a user